- We thought a lot about why ReactJS (or just React whatever) turned out to be so convenient for us. We then decided to share our thoughts on this topic.
- We discovered ReactJS not so long ago and were fascinated by this solution and its simplicity and brevity. The use of React was quite logical after the experience with Angular 2/4.
- Why did we name ReactJS 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 we 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:
- fast access to the document’s tree that is rendered in a browser
- 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 ReactJS, 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 we 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.
FLUX and REDUX
With all the 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.
ReactJS pros and cons
Let’s emphasise the main advantages which our team experienced when using the ReactJS solution:
- Application 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.
ReactJS 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
Talking about 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.
- Help at all stages of development
Thanks to active development community and plenty of created tools testing and debugging of the solution it is possible even in the early stages of your application existence.
Unfortunately, undesirable consequences can await everywhere. ReactJS is no exception.
We noted a few tips on how to avoid them when creating a user interface based on it:
- Decide on the platform and prepare the templates
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.
- Calculate the time
Be prepared that the creation 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 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.
- Think of a reliable basis
Only highly qualified senior software engineers should work on React code, especially at the initial stages. You should not neglect the importance of the initial architecture design and planning all the business flow. That will make a solid documental foundation for the development process.
YSBM team highly recommends using React and will be happy to share our experiences in this area with you!