React.js: An archaic web-dev war veteran or an evergreen hero?

Web development is one of the most volatile domains, if not the most volatile domain in the field of computer science. Most people have heard of HTML, CSS and Javascript, three topics core to developing and displaying web pages. Surprisingly, React.js has been just as popular a term as these technologies despite not being core to this domain. Before we read more into why it is so popular, let us get a bird’s eye view of some technologies commonly talked about, and a few terms in the field of web development that one needs to know in order to understand the differences between these technologies.

React.js, Angular, Node.js, Vue.js, Javascript, HTML (and Svelte nowadays) sound cool because they are always trending no matter what year it is, and to be honest, they are powerful tools but to speak of them in the same line is to speak of, say cars and roads in the same line. They are related to the same industry but are totally different things.

Frameworks and/or tools like Angular, Vue.js and React.js are used for front-end development. They are used to develop what the end-user sees and interacts with. Node.js, PHP and Spring on the other hand are used for developing an application’s back-end. The back-end is what makes an application function and is mostly connected with databases like MongoDB or MySQL to provide logic which helps the front-end interact with the data stored in these databases.

Almost there, just a quick 101! Elements on a webpage are treated as nodes placed according to defined hierarchies unique to the webpage. This tree of hierarchy is known as the Document Object Model and each element is called a DOM element. In traditional web pages made purely using HTML, CSS and Javascript, every time a user clicks a link to visit another webpage, the DOM for the current page is deleted and replaced with a fresh DOM for the new page. While the most obvious and widely used approach in the early days of the internet, it did have its shortcomings. Speed started becoming a major issue with web pages becoming more complex by the day. Breaking down the DOM and rebuilding it started proving to be a costly affair and research started being done to find out how certain elements of the DOM could be reused. This is where Angular, React.js and other technologies came in.

A big chunk of React.js’ popularity can be owed to the way it renders web pages. Front-end technologies all aim to do the same thing, give users an intuitive and beautiful UI to interact with. What sets one apart from the rest is the speed and efficiency at which they render pages. React.js, unlike the traditional web development we talked about above, relies on something called the Virtual DOM which is basically a copy of the actual DOM. So instead of rebuilding the DOM every time a different page is visited, it compares the virtual DOM belonging to the new page with the one belonging to the previous page, analyses the changes, and refactors only those parts of the actual DOM where a change was detected. 

This was a revolutionary concept and gave rise to Single Page Applications (SPA), which are used in most organisations nowadays. Single Page Applications are pages where a page does not need to reload in order to go to another one. The DOM for the current page is manipulated by diffing algorithms (called reconciliation in the case of React.js) and overall, the user experience becomes faster and much more seamless.

DigiBySR Expert’s Insight:

React.js is currently the most all-rounded framework in the market because although newer frameworks have a glut of features, they lack support. In the current scenario, one can easily browse Github and see React.js bugs being closed at a good rate because it has been in the market since 2013. Newer frameworks like Svelte might be fast, memory efficient and closer to vanilla Javascript, but they lack support and would require a lot of time and effort for them to be used in most use cases efficiently. Another obvious question would be: why not use well-established frameworks like Angular? Or Vue.js? To put it simply, React.js is faster than Angular because its Virtual DOM is faster than Angular’s Incremental DOM. Vue.js is comparable to React.js speed-wise but has a tougher learning curve due to its Angular-esque bi-directional data flow, making React.js make more sense for most projects out there.

To conclude, React.js is not losing its relevance. It is, in fact, stronger than ever.