Skip to main content

Why React is the Best Front-end Technology?

Posted in Tech on December 6th 2017
author photo
COO and Co-Founder

When Jordan Walke, a software engineer at Facebook, invented React in March 2013, he probably could not imagine how popular it would become in only 4 years. Nowadays, React is the main front-end technology of several famous websites (Facebook, Netflix, New York Times, Dropbox, Airbnb, etc.) and applications (Instagram, Whatsapp, etc.) and even more!

According to a recent survey by State of JS, 53% of developers have used React before and would use again, compared to only 30% when asked about Angular. Nearly a half of developers are not interested in Angular 2 and very few of them would like to use it again.

Interest and Satisfaction of developers on Front-end Frameworks (Source: State of JS, 2016)

According to another survey by Stack Overflow in 2016, React's popularity increased by more than 300% in just one year to become the most loved libraries with 66.9% of developers expressed their interest to continue using React, with AngularJS placing 6th.

Growth Rate of Trending Tech on Stack Overflow (Source: Stack Overflow, 2016)

 

Most Loved Frameworks, Libraries and Other Technologies (Source: Stack Overflow, 2016)

The invention of React is a revolution in both website and application development. Several discussions have been raised to figure out the reasons for React's dramatic growth during the last 4 years. In this article, we have analyzed 4 reasons to explain the huge advantages that React brings to development as a Javascript library.

 

1. Blazing fast thanks to Virtual DOM

Normally, manipulating the DOM takes a long time since each manipulation can trigger layout changes, tree modifications and rendering, which makes it a bottleneck to web performance. Given that our websites become more and more dynamic, it takes even more time and effort to modify the DOM.

To solve this performance issue, React uses a virtual DOM, which is basically "React’s local and simplified copy of the HTML DOM". Whenever we need to dynamically change the web page, the changes will be first reflected on this virtual DOM. Then, the "diffing" algorithm will be used to detect the difference between previous and current states of the virtual DOM and compute the most optimal way to apply these dynamic changes.

By using the virtual DOM, the performance of websites using React as a front-end technology can be significantly improved despite the huge amount of dynamic contents.

Websites and Apps built with React

 

2. Component-based structure, allowing code reusability

While the traditional Model-View Controller (MVC) Architecture has been applied in most server-side and client-side Javascript frameworks, React follows Component-Based Architecture (CBA). CBA has existed before React, but only until React was launched the community realized the superiority of CBA over MVC.

"Components" can be imagined as the small feature that makes up your user interface. A big component may include many small components, which interact independently from one another. Together, these components are what forms the application. Components are highly reusable, which brings a consistent feeling to your application and makes it easier for developers to grow and maintain the codebase.

Despite being overlooked at the beginning, the convenience of Component-Based Architecture has been proved and set React apart from other Javascript frameworks and libraries.

 

3. Javascript centric

Another merit of React is the use of JSX in building components. JSX is a powerful syntax extension that allows the coexistence of XML/HTML-like text with JavaScript/React code.

This technology combines the flexibility of the component-based architecture with the readability of HTML. Whereas the traditional practices tried to bring Javascript to the HTML level, React with JSX is doing exactly the opposite. JSX adds XML syntax to JavaScript, and its usage in React based projects is highly recommended to increase their readability and maintainability.

Using React as the front-end technology on your project, together with JSX helps to standardize your codebase, also makes it consumable and easier to organize and refactor, which is extremely useful for your application in the long run.

 

4. Growing ecosystem with the support of Facebook

(and can be accessed all over the world including China)

React is one of the most advanced Javascript libraries and its ecosystem is expected to expand even more thanks to the effort of the technical experts at Facebook. In 2016, Facebook introduced Yarn - a new package manager for ensuring that the dependencies of the huge codebase in Javascript community are well-managed. Yarn is compatible with the widely used package manager npm but has significant improvements.

Another big news is that Facebook team has completely rewritten React into React Fiber, which is expected to become the foundation of the future improvement and development of this Javascript library. React Fiber is now available in the latest version React 16.0 which has been launched in September. More explanation of React Fiber can be found here.

 

Bonus: React Native

React Native was started in an internal hackathon of Facebook and officially launched in 2015, at React.js Conf. This powerful framework allows you to build native mobile apps with Javascript applying the approach "learn once, write anywhere", meaning that you can use the same methodology and architecture when writing apps for several platforms, rather than learning a set of completely new technologies. React and React Native are quite similar to each other, but there are still some differences.

 

To Wrap up

React is undoubtedly the future of web and app development. With component-based architecture, the development process using React becomes extremely efficient thanks to code reusability. Websites and applications built with React are blazing fast because virtual DOM has replaced the traditional DOM in implementing dynamic changes to the web pages.

JSX contributes to the elegance of React by reversing the process of integrating Javascript and HTML, which optimizes your codebase in the long run.

With the constant support of Facebook, the ecosystem of React is foreseen to grow even faster and continue to disrupt the tech community.

 

 

About the author

Thomas Guillemaud

COO and Co-Founder of IT Consultis

As the COO of ITC, Thomas manages all operations and promotes the adoption of new technologies and philosophies within the company. In addition to raising the efficiency of each project, he invests his time in coaching and mentoring the project management as well as the development team, ensuring they all have standardized knowledge and skills to successfully meet client's expectation.