Refactoring for big react applications!
Refactoring a big application can be scary, even more if the application is written by other developers, you start wondering… what if I break something?, what if it is not worth the change?, I was in that position so I will tell you my story.
I started working in a big application developed in react, it was working fine, then this needed some changes because the front end is different for every client so I was struggling with the repeated code, I want to make it more scalable, I did some research and I discovered a lot of things which I will explain to you.
The first step I took was a research of some design patterns applied to JavaScript and there are various options of this, when I tried to apply this to React I got stuck, you cannot apply this in a good way with React because it is oriented to be used with declarative programming and most of the patterns are OO based, the best solution I found is the use of Presentational and Container components, but this is just the start…
Structuring your project
The first tip I can give to you is organizing properly your folders and archives, this is more important if you are developing a big application, you cannot organize code in unorganized archives. I would recommend dividing by modules, each folder with the components and styles of each module, besides helping you keeping everything well organized also split the code in different bundles with webpack. If a component is used in various modules you should include them into a common folder, or a library.
app/
├─ common
├─ modules
| ├─reports
| ├─admin
| └─users
└ webpack.configPresentational and Container components
The pattern I chose is presentational and container components, the first is concerned on how things look and the other on how things work. The next article written by Dan Abramov explains with more detail.
I needed to present different information organized in a different way for every client, the app had repeated code for every report presented, I identified the most used code and wrote it in a component so I can use it more times in the same report and in other, also I realized it is better to do little components so you can easily reuse each one, and assembling them as like they were Lego pieces.
I also realized that the sections had the same structure, almost the same styles and one or more subsection so I created a section and subsection component so I only have to call every time I want a new section.
The code here is clean, I can still use the col and rows bootstrap style adding classes to the section and I just have to put <SectionWrapper /> tag to include a new section with no need of coding everything again.
These two components are presentational, the data doesn’t mutate in here, also because it doesn’t use Redux or the component life cycle is possible to make it functional.
Tip: Do the most functional components as you can, it helps the readability of the code.
One thing you should always have in mind is to build your code in a way other people can understand easily, it can be refactored and reused, so don’t be afraid of creating a lot of components.
After doing this little components I wrapped them into a container component where I get the data I need fetching it.
As you can notice I have a function array so the application itself can decide what to fetch only having the type of report to show, this was one of my objectives, so if I want to add some data of other client it can easily be added and used in the component. This component also stores the data in his state, so it can be use later passing it through the props to other components.
Wrapping your components
I had to reuse some forms, this components were used in two different places and the data was stored in redux, to maintain reusable this components I wrapped the forms in another component which managed the connection to redux in every place was necessary.
Tip: To use a component with different data source just wrap it and add what you need, don’t add directly to the component!
Here I render the component passing the props I got from redux, this let me to pass in other module different information and actions, this can also be done with HOC components but it was a better way to me because I used React Loadable to get exactly the component I need.
Dynamic loading
My main component was plagued of ifs:
if(report === 1){
fetchFromHere();
let report = sthToRender();
}else{
if(report === 2){
fetchNowFromHere();
let report = sthToRender();
}else{...Imagine the previous code but every sthToRender() with the report render, so every report repeated a lot of components and styles, here was the time of doing reusable components for all the reports and load them dynamically.
Here comes the magic…!
React Loadable is a wonderful package which let you to load the component you need at the time you need, this is called code-splitting and helps the application to load faster and just with the needed assets.
Just install it with npm and it will do the magic for you!
I let the application to choose which component to render depending on the module by passing and formatting the name, then I used Loadable importing the component selected, adding a placeholder like the next image (I added a timeout so the placeholder always appear at least a second).
Tip: Add placeholders for the components which last longer so the user knows something is happening, also is beautiful.
In the wrapper component it’s demonstrated how is used the loadable function, after testing different way I reach to the conclusion of calling the function in the constructor so it is loaded just one time when the component is created, then assigned to a variable and rendered.
Keep in mind you should modify your configuration to make the code splitting possible, in my case I use webpack and I had to add chunckFilename: '[name]/bundle.js' in the output property at the webpack config file. Also install and add dynamic-import-webpack babel plugin.
Make your code beautiful
Last but not least is the way you write your code, remember the code you write for sure will be read by other programmers and also by your future version so keep in mind to write it tidy and follow some rules created by your team, you or someone else. Write some beautiful and readable code for other programmers.
If you don’t know where to start, the next link will lead you to a very useful guide created by airbnb which you can follow.
Conclusion
The React world is constantly changing, thanks to the community we have a lot of possibilities, coding styles and packages to use, you just have to use the one is better for you and your project. Don’t be afraid of testing new things and adding it to your applications.
Now I’m excited about hooks and add it to my refactor, I think it will break the internet!
