Javascript community is exploding. And React is one of the biggest buzz word of it. Everyone is choosing React as their main framework to make any new web app, Android App, iOS App and even TV apps ( Yes, Netflix !).
Why you should choose React for your next project ? What makes it so great ? Some say it’s speed. If you think that’s the reason, you should go use vanilla javascript. Not just vanilla, There are many frameworks that can perform better than React. Mithril is one good example. So if not React, what makes it so popular ?
Components !
One should always write code that is easy to delete, not easy to extend.
When you start thinking your project in terms of small modules, like lego blocks !, everything becomes so easier. With React, one can easily achieve this. In fact the core of React itself is built around modular principles. To think it more clearly, think everything is a component. A button, A slider, A navbar, a sidebar. Everything is a component. There are smaller components which can be reused across anywhere in project. And these components combine to create bigger components. But what advantage does breaking our project into components gives us ?
- It makes code reuse super easy ! Not just inter-project, components can be reused across projects.
- Lesser bugs. Each component is self sufficient. Overlapping is way less.
- Easy to debug. You’ll know easily which component needs tweaking.
- Easy maintainability. Changing something means changing one component. Usually it doesn’t affect other components. Same of adding new components.
It’s a library. Not a framework
React is just a View framework. The V in the MVC. And it’s even pretty good at it. But how does it makes our life easier ? With just V, we have a wide variety of things to choose from. We can choose what we want for model layer. we can choose if we want routing or not. And the way React is made, it’s compatible with almost anything. It’s like oreos. Everything goes with oreos. It gives us liberty to choose the best tools for the job. This also allows us to easily replace one library with the other with less.
In many big frameworks, such liberty is not there. You have to use the same router, it comes with. You have to use the same network library it comes with. Even if you choose to use something else, you cannot get rid of inbuilt tools. It’s there. Always.
This is one of the reasons how React got such a great community. With react as a great View Library, Redux came as a great data handling library. React-Router came as a great routing solution. And so on. More on these later.
So being a library gives us freedom. Which is awesome !
Functional Programming
React uses functional approach for creating UI elements. The core of React is functional. This enables us to make stateless components. You pass data to pure functions, and they return back rendered elements with that data. This makes reusability of components very easy. One can pass different types of data to render similar looking components, sharing the same component. It also helps in easy debugging and great control over the data and it’s flow.
It also enables us in making great dev tools like hot reloading, time travelling etc.
Hybrid Applications
React is great if you are making a client side application. We will always want public (outside authentication walls) apps to be server rendered because of obvious reasons (SEO). But there was a reason that world moved to single page apps (SPAs). It was getting in the way of app performance and user experience.
There is no need to fetch the entire document every time you open a link on the app. In universal apps, Every time you open a page for the first time, the server fetches the data, pass it the React, generates the markup on server itself and finally sends that markup to the browser. So the first page is rendered server side.
All the subsequent views are rendered by the browser itself by making data requests to the API directly.
So this gives us the best of both worlds. A SEO ready app, and a fast rendering, user friendly app.
Enough of why we should use React. Let’s discuss
Why not to use React ?
Speed: React uses Virtual DOM. Which makes DOM manipulations faster. But will it make YOUR app faster ? Does you app does intensive DOM manipulations ? Most of them don’t. Here is an example shown in React.js 2015 conf.
Same app was made using React and Angular. You can see the difference in rendering.
But with changing just one line in angular code, this happens. From this, the biggest learning is that good code and timely optimizations can only make your project faster, not the choice of framework/ library you use.
Learning Curve: React is just a view library. To make a complete new application, a new person needs to learn all the other libraries/modules.
Final words
Use React because of it’s code structure and modularity. That is where a lot of dev productivity is saved. Use React for its ease of server side rendering. Use React for its awesome growing community and support.