React JS, why we choose it?
Last years there is a lot of noise in front-end community about react, and there are many people and companies adopting it in their projects. And react continues to gain popularity.
So what makes it so interesting?
What is React?
React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time.
It is not a complete application framework like angular, it is just a view layer. So it is not directly comparable to frameworks like angular.
What makes it different?
DOM manipulation is one of the most complicated and error prone areas in frontend development.
There are a few reasons why it happened to be so:
- it has inconsistent implementations across browser implementations
- it is an inherently complicated thing
- it is slow, and optimizations are often complicated
Most of this issues were solved in different ways across the time, some noticeable are:
- jQuery - much simpler easy-to-use DOM interaction API that works across most of the browsers
- Angular - extends HTML with directives, allowing to develop views in mostly declarative way
React takes a different approach.
It introduces a concept of virtual DOM, which is lightweight description how your HTML should look like - it is very fast to generate, and it can be generated for every data change.
React takes care of rendering virtual DOM into actual DOM.
And it is quite efficient, in this - before applying changes it computes a difference between new and previous virtual DOM and applies only minimal required set of changes.
By using virtual DOM, React provides following benefits:
- no coupling with DOM implementation
- completely declarative
- typically faster
Because React components are declarative, not imperative - they are much simple to write, and to reason about. This immediately results in:
- fewer bugs
- faster development
- less debugging
- and more maintainable code in general
Another great benefit of React is an ability to implement server-side rendering and build so-called isomorphic web applications(the term was introduced by Airbnb).
Generally, speaking an isomorphic web application is an application which executes mostly the same code both server and client side. It has few benefits over typical single-page application, and in fact combines best parts from both single-page and traditional multi-page applications.
Another important feature of isomorphic applications is much faster loading time - in typical single page application you will need to wait while loading scripts, compiling them, fetching initial data, and finally rendering it…). But in an isomorphic web app, actual html content is sent immediately and would be displayed before loading js.
Not just for web applications…
While originally React was created for writing web applications. It is not limited only to the web.
The same approach with virtual DOM can be used on other platforms too - virtual DOM can be rendered using native components, mostly the same way as for HTML.
There is the project: React native from facebook, it is intended to provide React on other platforms, right now it works on iOS, Android and soon it would be available for Windows too.
The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Which means —with React Native the same developers can build native applications for many platforms, why using the same tools and even reusing part of the codebase.
Facebook itself uses React Native in multiple production apps, including Facebook app
If you have any questions or propositions.
Do hesitate to contact us. You are welcome!