The reason for the emergence of front-end libraries is to enable more efficient maintenance and management of dynamic web pages. Here you are wondering what a static, dynamic web page is.
A static page is a page received by passing an HTML document already stored in the web server to the client. If it is a page that introduces a company, the user’s interaction can be viewed as an insignificant element because it is for the purpose of simply delivering company information. In this case, you can create a nice enough web page with just the composition of HTML and CSS.
On the other hand, a dynamic page is a page in which the composition of a web page needs to be changed according to the user’s behavior flow. In other words, the client receives the HTML document produced after processing the user’s request information.
In these days, when dynamic pages are dominated, there are a lot of state changes to handle user interactions, so that the term web application rather than a web page fits better. To make this a natural user interface, a front-end library/framework appeared.
So, what does the frontend library/framework help?
As it is called a web application, if the project size grows and various user interactions are delivered, it is the same as that the DOM elements must also change. Changing DOM elements is like having to go through the process of recreating the render tree, calculating the element’s style, configuring the layout, and painting it. In the end, as much as user interaction is delivered, this process has to be repeated.
However, the more this process is repeated, the more computations the browser has to perform, which leads to inefficiencies of the overall process. Also, managing the changes of many DOM elements yourself will come as a burden.
In the end, the front-end library/framework minimizes DOM management and state change management, and helps developers focus more on only function frontend development and user interface. With this purpose, each front-end library/framework was born.
Then, why React?
Each frontend library/framework has different directions and features. (Since this article focuses on React, the features of other frontend libraries/frameworks will be replaced with this article.)
So, what are some of the features of React we’re going to use?
Write component unit
A component is an individual view unit that composes a UI, and if the UI is developed as Lego, the component acts as a block. It’s like assembling these blocks to create a single finished product. This feature allows one component to be used in multiple parts. For example, if you need a button in several places in a web application, you can create a button component in common and use that component where you need it. You can hire React.JS developers for detailed knowledge.
These features facilitate productivity and maintenance. For the tricky task of updating complex logic in which changes in one element affect changes in other elements, it can be supplemented with a component’s reuse function.
JSX
JSX (Javascript + xml) is an extension syntax for javascript frontend framework that provides elements in React. The advantages are very diverse. The advantage is that if a developer is simply familiar with markup code, that alone can easily adapt to constructing components through JSX.
Virtual DOM
When a state change occurs due to user interaction, the rendering process is repeated according to the browser operating principle. Virtual DOM was created to minimize the inefficiency caused by this process.
The concept of Virtual DOM doesn’t exist at all. Also, it’s not the only front-end library/framework to apply the concept of Virtual DOM. However, React can be said to be a starter to successfully apply the concept of Virtual DOM.
How Virtual DOM works
If the view changes due to user interaction and 10 nodes need to be modified, 10 times layout recalculation and 10 times re-rendering are required.
When a change occurs in Virtual DOM, it is first applied to the Virtual DOM before it is applied to the actual DOM. You may think that applying it directly to the real DOM or applying it to the Virtual DOM will require the same operation cost, but since the Virtual DOM does not require a rendering process, the operation cost is lower than the actual DOM.
After these operations in Virtual DOM are done, the final changes are delivered to the real DOM. In other words, 10 tasks are grouped together and delivered only once. Of course, the scale of the layout calculation and re-rendering process will increase, but reducing the number of times makes the computation cost low enough.
In addition, Virtual DOM automatically identifies what has changed and what has not, allowing you to update only the DOM tree you need.
Conclusion
We have summarized the advantages and features of React among the backgrounds in which React appeared and various frontend libraries/frameworks. Of course, there are many advantages not mentioned above, but we have summarized three of the best.
React must be super fast and provide performance optimization tips for React! I can think. That’s the reason why you must consider hiring React.JS developers for your next project. However, while you must understand that React is more focused on maintenance, remember that it is a fast enough frontend library.
