Why React should be your choice for web application development?

Image by Mateusz Dach on pexels.com

This story is created for those developers and managers who are considering to move out from traditional web development and adopt better libraries and framework for their services or products. It discusses about React which a front end library created by Facebook for web UI development and how it provides similar experience to a desktop application.

Table of content:

1. What is React?.
2. How React is different from traditional web development.
3. What is create-react-app.
4. Advantages of using React.
5. Disadvantages of using React.
6. Work around.

So, let’s start.

What is React:

The official documentation of React explains it like this

A JavaScript library for building user interfaces. 

React is a library and it is designed to create user interfaces. Now, most of us might be in an impression of React being a framework. Also, we were cool with creating our user interfaces with HTML and CSS, so why should React be used. Let me explain.

1. Difference between a library and a framework:
   While both of them are designed to make a developer’s life easier and do complicated tasks for them, a library can possibly be a smaller version of a framework which is specialised in doing one thing. A framework on the other hand, brings in more of these libraries together and helps us in solving bigger problems and mostly makes a lot of smart design decisions by themselves. Hence, a library may seem to be more flexible in its implementation, whereas a framework stands rigid and can make you bend to its unique way of solving a problem.
2. An User interface library :
   React provides a declarative way of building user interfaces. This is because you instruct React of what you want to be shown in the browser and React creates the UI for you. A valid argument is HTML is also declarative so how React becomes different. I say, HTML can only be used to generate static content while React can generate dynamic content using a declarative programming approach. Also, what it generates is a Single page application.

How React is different from traditional web development:

To understand how React is different in its approach, let us create an application to see React and traditional web development workings side by side. It will contain two files, one is an HTML file and a JavaScript file. Code is given below. I highly encourage you to see the code in action by yourself.

A short explanation of the code…

We have an HTML file that contains two div , one is manipulated by vanilla javascript and another by the React libraries that are brought from the React CDN. The script.js file has a setInterval call that updates both the div in one second interval. Both divs are similar in terms of what it contains; an input, a paragraph element with the current timestamp, and some text.

Below is an account of what is happening behind the scene when we run the code in a browser.

View from the inspector window

If you look at the render cycle in both the divs during update, the fundamental difference of its working will be clear. While our old method is completely rendering the div, the React library is just rendering the HTML element in the DOM that needs update and leaving the rest intact. This strategy comes in with huge performance improvements in large web applications and creates a foundation for providing desktop app-like experience while inside a browser. I am covering this in the section of Advantages of using React in more detail.

What is create-react-app:

It is a set of libraries combined together using NPM to create a pleasant development experience with React. This includes
1. React Library that helps manipulating DOM elements as shown in the example above and provides a lot of helper utility to optimise your React app for performance and testability.
2. React DOM library to help write to the browser DOM. React cannot write to the DOM on its own.
3. WebPack to provide developer comfort. It brings features like local server, hot reload, project build etc.
4. Babel
5. NPM or Node package manager. With the help of NPM, developers get to add work from other developers hosted in the NPM servers as libraries and improve their productivity. Also, it makes managing those libraries and updating them a breeze.
I believe create-react-app qualifies to be called a framework as it stands rigid in certain approaches. For example, when you type npm start, it fires up the WebPack server and shows up your app in the browser. It provides some cool features like the hot reload but this is not the only (or necessary) way to start a react app. We can work without them.

Advantages of using React:

1. Speed:
   The example above shows how React is very specific while updating DOM elements. This happens through a data structure that React calls virtual DOM. The React library maintains an equivalent object of the DOM tree in memory which it compares while update with the current DOM. After this diffing process, those elements are found which needs update and instructions are issued to update them. The process of creating virtual DOM from real HTML elements is called Rendering in React. The one which writes the real DOM after the diffing process is called Reconciliation. For large codebase where virtual DOM is huge, React employs heuristic based algorithms to bring performance in the app out of the box. Hence, in the majority of the cases in React, your app will be super performant with no additional cost to bear.
2. Rich User experience:
   To understand this point better, I encourage you to move back to the example I provided and try to type in the input in both the divs. I am sure you will be overwhelmed to see that hardly anything can be typed in the first input as the text goes away and the focus is lost etc. But the one maintained by React just works fine. This again shows virtual DOM in action. The entire DOM tree is never updated which is retaining the earlier instance of the input and hence the text never goes away. Now this is a feature that could earlier provided by native applications only, using a thread or so. But while dealing with the single threaded JavaScript, React brings in similar features to your website. This where React bridges the gap between a native desktop app and a web application.
3. Reactive Programming:
   While reactive programming is comparatively new in native app developments , React adopted a reactive style of implementation right from its inception and hence got the name React. This reactive feature has all to do with the virtual DOM. The setState function is there to trigger the Rendering and Diffing process. The process of Reconciliation is so well implemented that the final output gives a near instant update. All these without even a single listener binded or any difficult concept of implementation associated with it. This adds greatly to the developer’s satisfaction.
4. Component :
   A React app is all built with components. They have cool properties like lifecycle methods, props and states that help making the application code base highly modular and reusable. Also, tools like Redux are a great friend when it comes to promote decoupling in the components and single state of information inside the application that makes a huge codebase easier to understand. Also, design patterns like Compound Component patterns (CCP) can improve the overall quality of a React codebase.
5. Cross browser Support:
   React handles a lot of hectic task for you in order to make your app support in multiple browser. One example of this is Synthetic events in React. These are cross browser support around brower’s native events. React’s click event onClick, focus event onFocus etc are all examples of synthetic events provided by the library.
6. How you benefit as a owner:
   React is a UI library and applications created with React uses Ajax calls to fetch data from Server. Hence, you create one single API for all of your client applications like your mobile or desktop apps and your web apps. User experience you get is just fabulous. Also, if you are a startup and thinking of having a mobile app that runs both in android and iOS devices, you do not need a native mobile development expert any more. Your React developer very easily can give you mobile apps using the same skill sets using another technology called React-native. Studies show that companies are saving almost 30% in their development cost when they opt for developers comfortable with frameworks like React-native or flutter. This approach though has some drawbacks which is a huge discussion in itself. Comment and let me know if you want some insight on this.

Disadvantages of using React:

Disadvantages of React are very few. But, they are enough to hit your business like a hammer and you should know about this before you make any decision. React based SPA sucks when it comes to SEO. High chance is there that web crawlers may never get to index your website. This is due to the declarative nature of React. You never create your web pages while working with React. You only instruct them. All the React code you write boils down to a single page which hardly has any content and got mostly JavaScript. Hence, the crawler finds very little or no content to index, hampering the overall ranking of the web app.

Workaround:

Solution to the SEO problem is Server Side Rendering. With server-side rendering, browsers and crawlers get HTML files with all the content hence they can properly index the page.

Server-side rendering is the easiest way to create an SEO-friendly React website. However, if you want to create an SPA that will render on the server, you’ll need to add an additional layer of Next.js.

Conclusion:

React has evolved and reached a level in which it is highly mature and popular. Testing a React app is much easier compared to any other library or framework. If you are an organisation with great vision for your product, React is a must have for you.

If you like the article do share it in your Twitter or LinkedIn.

Find me on Github link below.

Gaurav2048 - Overview