Month: January 2025

As we continue developing the Crowd-Sourced Travel Planner project, I’ve had the opportunity to dive deep into React Native for building the front-end. In this post, I’ll share my thoughts on how React Native fits into the tech stack, what I’ve learned, and why it has become one of my favorite technologies so far.

Favorite Technology: React Native

Without a doubt, React Native has been my favorite technology to work with for this project. As someone with experience in React for web development, transitioning to React Native felt like a natural extension of my skillset. The main appeal of React Native lies in its ability to write cross-platform mobile applications using JavaScript, which means that the same codebase can be used for both iOS and Android. This is a game-changer, as it saves a lot of time and effort in building mobile apps for different platforms.

One of the standout features of React Native is its “live reload” functionality, which lets you see code changes immediately without needing to rebuild the entire app. This feature speeds up the development process significantly. Additionally, React Native’s component-based structure, similar to React for the web, makes it easy to break down the app into manageable pieces that are easy to maintain and debug.

The Technology I Had Difficulty Learning: React Native’s Navigation System

While React Native overall has been great, there was one area where I initially struggled: the navigation system. React Native uses different libraries for navigation, and the learning curve for setting up stack, tab, and drawer navigators was a bit steeper than I anticipated. At first, I found myself getting confused by the various methods of navigating between screens and passing data between them. But after spending more time with the documentation and experimenting with different approaches, I now appreciate how flexible the navigation system is. It’s crucial for building fluid, intuitive user experiences, and once you get the hang of it, it feels natural.

What I’d Change: Handling of UI Performance

One area where I’d like to see improvement in React Native is in its handling of complex UIs. While React Native does a great job at rendering most UI components, when dealing with large lists or complex animations, the app’s performance can sometimes suffer, especially on lower-end devices. To address this, I’ve learned to use libraries like React Native’s FlatList component, which optimizes rendering large lists by only rendering items that are visible on screen. However, it’s still an area where I think React Native could improve out-of-the-box performance for highly dynamic UIs.

Most Difficult Learning Curve: React Navigation

As mentioned earlier, React Navigation had the most difficult learning curve for me. I spent a lot of time trying to understand how the different navigators worked together and how to pass data efficiently between screens. It was tricky getting things to work as expected, but now that I’ve got the hang of it, I can confidently build navigation flows and handle user input in a seamless manner. React Native’s official documentation was helpful here, but there was a lot to absorb in terms of configurations and best practices.

Easiest Technology: Expo for Development

One of the easiest technologies I’ve worked with in this stack is Expo. Expo is a framework and platform for React Native that provides a suite of tools to simplify development. It includes things like a development server, hot reloading, and easy access to native device functionality like the camera or location services. Expo made it incredibly easy to get up and running with React Native, and I was able to see my changes instantly without much configuration. For anyone just starting out with React Native, I highly recommend using Expo to quickly prototype and test your app.

If I Could Start Over: Alternative Technologies

If I had to start over, I might consider using Flutter instead of React Native. Flutter, developed by Google, also allows for cross-platform development but has a different approach to rendering UI elements. While React Native relies on native components, Flutter uses its own rendering engine, which can result in more consistent UIs across different platforms. That said, I’m happy with React Native for this project, and I’ve learned a lot by sticking with it.

Technology I Wish Was Included: TypeScript

One technology I wish I had included in my stack earlier is TypeScript. While React Native is perfectly functional with plain JavaScript, using TypeScript could have helped catch type-related bugs early in development. As the project grows in complexity, having strong typing would make the codebase more robust and easier to maintain. If I had the chance to add TypeScript from the start, I definitely would.

As a CS student, I’ve definitely looked back at my old code and wondered, “What was I thinking?” I feel like we’ve all been there, writing code that works but isn’t easy to understand. That’s where clean code comes in. It’s not just about making your code look nice; it’s about writing code that’s readable, maintainable, and easy for others (or your future self) to work with.

---

What is Clean Code?

Clean code is code that is easy to read and understand. It’s like writing an essay that’s clear and well-organized, not just grammatically correct but also easy to follow. When your code is clean, it’s easier to debug, and when its easier to debug it’s also easier to maintain, and scale.

---

One Good Practice: Meaningful Variable Names

One thing I’ve learned is the power of meaningful variable names. Instead of using generic names like a or x, descriptive names help anyone reading your code understand what each variable represents.

Example:

# Bad
a = 10
b = 5
c = a + b

# Good
length = 10
width = 5
area = length + width

Using length, width, and area makes the code much clearer. Good naming doesn’t just help others; it helps you when you revisit the code later.

---

One Bad Practice to Avoid: Code Duplication

Code duplication may seem harmless, but it leads to maintenance problems. When you copy and paste code, you risk making mistakes when you need to update it. Reusing functions keeps your code cleaner and easier to modify.

Example:

# Bad
def calculate_rectangle_area(length, width):
    return length * width

def calculate_square_area(side):
    return side * side

# Good
def calculate_area(length, width):
    return length * width

def calculate_square_area(side):
    return calculate_area(side, side)

Here, the calculate_area function is reused, making the code shorter and more maintainable.

---

Why Clean Code Matters

Writing and focusing on clean code is a practical approach that makes your code easier to work with. As you grow in your programming journey, clean code will save you time and effort in debugging and collaboration. It makes your code future proof and scalable.

---

Wrapping Up

For me, the key takeaway is to start using more descriptive variable names and to avoid code duplication. These small changes make a huge difference in making code more readable and maintainable. Clean code might take extra effort up front, but it pays off in the long run.

---

References:

• Robert C. Martin, Clean Code: A Handbook of Agile Software Craftsmanship
• Martin Fowler, Refactoring: Improving the Design of Existing Code