I discovered React not so long ago, but I was fascinated by this solution and its simplicity and brevity. I decided to try React because I already had experience with Angular 2/4
Why did I name React a ‘solution’? Simply because it is a UI library with a component lifecycle and virtual DOM. If we are talking about this ‘solution’, we should mention that the whole React community follows a modular approach, so every developer can choose and use modules independently.
One main feature that I found very useful was the building of a virtual DOM tree and as a result using the JSX syntax. These two options allow one to solve important tasks such as: 1) fast access to the document’s tree that is rendered in a browser; 2) building HTML mark-up with JSX syntax.
The problem with an ordinary DOM means that the elements’ tree is being re-rendered which causes re-rendering of the whole document.
React on the other hand contains a mechanism for creating an identical tree which is located in the browser’s memory and stores all elements’ positions. Thus, if any of the tree’s nodes were changed, React puts only the part that was changed into the document. This approach of the Facebook development team, the creators of React, give this solution the advantage in the key area of application performance, as far as DOM operations influence mostly the app executing and response time.
Another interesting fact is that subsequently Facebook released React-native technology for creating mobile applications’ UI where they used the component approach. Moreover, any component of which the source code was similar for any programmer rendered by React-native platform into native Android and iOS components, i.e. here we can see the complete usage of the component paradigm when the same component that was created once could be used for different UI (web and mobile). This makes the maintenance of the code easier and increases the speed of UI development, regardless of a platform’s type. For research purposes I even created a MacOS desktop application using that technology, and it worked! It is important to understand that React-native supports the launch of both platforms: MacOS and Windows. Besides, React-native doesn’t use a web-view component but compiles the component into a Java or XCode version.
With all positive effects of the technology, the React Facebook team knew that the problem with different components’ interactions (especially when there are more than 80 of them) remains. They thus developed the pattern of one-way data flow (also called one-way binding) which should have solved the problem of code connectivity from one side and handleability & clarity from the other side. That is how FLUX appeared
The core feature of FLUX is that UI is always a derivative action function from state: UI = f (action, state). FLUX is similar to event bus, when any action invariably leads to application’s change of a state.
Currently there are several implementations of this pattern, but our team chose REDUX. The key specificity of REDUX is a unified single store of the whole application.
As an example: we recently worked on the application for 2 admin dashboards of high-loaded CRM systems for Client management. For such a sophisticated system we used the UI components library which could be used in other projects. The reuse level was up to 80%, which significantly increased speed of development. We only needed to change the styles.
To sum up I would like to emphasise main advantages which our team experienced when using the React solution:
Application’s performance: naturally a lot depends specifically on the programmer’s qualifications, but if one follows best practices and official documentation then the application’s components will work fast.
Community: React is a library just like others but it has a lot of completed solutions and approach options in comparison to other libraries and frameworks. For example, it has Redux, or React Router and Redux Form, which we, by the way, also actively use in our projects.
Better indexation comparing to old MVVM framework AngularJS: React displays the page mark-up at any time which allows search robots to better index the application on the Web.
Cross platform application: If you are looking for a fast solution that should be implemented for different platforms, web and mobile, then React is the right solution for that. With small adjustments, you can reuse the code for different UI that was created once for the application.
Here are some more tips of how to avoid undesirable consequences of using React when creating UI on its basis:
It is quite important to have prepared UX/UI templates at the very beginning. You should also know on what platforms your application will run. Also be prepared that the creating of the application’s architecture and writing components will consume more time during the early stages. However, if you follow the best practices and methodology of React development, you will be able to scale your application quickly and easily.
For example, after creating of the main platform’s UI, its admin dashboard was ready for 60%. We reused basic components and the whole architecture. If you are aiming to scale in the future and want to save some time you should ‘invest’ at the beginning.
Only highly qualified senior software engineers should work on React code, especially at the initial stages. You should not neglect the importance of initial architecture design and planning all the business flow. That will make a solid documental foundation for the development process.
Our team highly recommends using React and will be happy to share our experiences in this area with you!
Sr. front-end engineer,
React team lead
Request free consultation