How to build a large React application
You have a vision for your next big application. It’s a SPA with many routes. It should handle authentication and registration. A nice UI with animations. And it should communicate with external and internal APIs.
Then you think to yourself: Where do I start? Is there a tutorial I can use that describes how to code this app?
It’s difficult to find such extensive tutorial. Even if you find a tutorial which shows you how to build a large app, it’s unlikely it will teach you to build an app that is exactly like yours.
You need a process to build it yourself.
Break it down to tasks
To succeed building your large application, you must take control over it. The way you do that is by breaking it down into smaller and more manageable tasks. This is an example:
-
Create a “hello world” react app
-
Add forms
-
Add a /dashboard page
-
Add a backend for handling API requests
-
Where to persist data, DB or SaaS such as Firebase?
-
Where to host the app?
You don’t need to do this perfectly. Don’t spend too much time on this exercise, 10 min max. The reason is not to create “todos” for everything, but to realize your app is not a big monster. It consists of small tasks that are completely possible to finish.
You will be able to code some of the tasks without learning anything new. And some of the tasks will require researching to learn how to solve it.
Some of the tasks might be questions that you need to answer, for example, “where to persist data?“. You don’t need to answer all those questions in advance. You will answer them when you decide to implement the task. You don’t want to overwhelm yourself by doing all research upfront.
Keep it simple
When you pick a task to start work on you only have to solve a small well-defined task. If you don’t know how to solve it, you have to do some googling. Most likely you are going to find a lot of different solutions and many opinions on how to resolve the task. It’s easy to spend hours reading blog post after blog post even about minor details. Time quickly gets wasted.
To keep your focus and not be overwhelmed you must use a guiding principle: “what is the most simple thing I can do?”
It is so important that I am going to repeat it for you:
Your guiding principle when solving tasks is “what is the most simple thing I can do?”
It is so easy to get distracted away from this. There are so many smart solutions out there. But those smart solutions are not that smart when they distract you from reaching your goal.
You will require more advanced solutions when you need to scale up the code base. But not now.
This approach to software development applies both for hobby projects and most production applications.
Don’t overthink
You might read about Presentational/Container pattern, Higher order components, and other best practices. You start to lay out your architecture and you want to take the patterns into consideration.
Stop.
Learning best practices and setting an architecture at the same time will almost guarantee you to get stuck.
Your approach should be different: Only add stuff when you have felt the pain of not having it.
With the stuff I mean:
-
Best practices
-
Libraries
-
Programming patterns
When your application grows you need to continuously revisit your code and think about how you can improve it. When you feel pain, improve your code base and reduce technical debt.
But am I ready for X?
If you are new to the React ecosystem you might have gotten the advice to start with React, and only move over to Redux when you are ready. But how do you know when you are ready? And how do you know when you are ready for other “advanced” technology such as routing, authentication, Ajax calls, etc?
If you are using the approach “start small, and only add tech when you feel the pain” you don’t have to think about if you are ready or not. If you feel the pain, you know what kind of library/tool you need. And if you start small and simple, you will not get overwhelmed.
Stop thinking about you and think about the app you are building.
Conclusion
When you want to build a large application there are many things that can overwhelm you. Your own application can overwhelm you, and the React ecosystem can overwhelm you.
That’s why it’s important to have a process to take back control. To make it manageable you have to make it simple.