post image

Why ReactJS is better that other JS frameworks - developer’s point of view

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.


JSX


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.


HTML in JavaScript code


 As far as ReactJS builds and stores a virtual tree which is similar to a real DOM tree and re-renders only changes in the document, so as to create the DOM tree’s nodes, it uses a standard JavaScript mechanism. 

That is why the React creators decided to put HTML into the JavaScript code, since HTML is being generated with JavaScript resources in the browser anyway. This is how the JSX syntax appears.


Component approach


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:


1. 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.


2. Community


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.


3. 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.


4. 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.


5. 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. 


Besides, React supports all new Javascript features, both basic (ES6) and experimental (ES7, ES8, ES9).


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:


1. 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. 


2. 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.


3. 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!


CONTACTS

Krakow

Head office

development@y-sbm.com

Rzemieślnicza 1/713 30-363 Kraków

+48 505 012 322

+46 734 817 936

Contact us

© 2014-2019 All Rights RESERVED. YSBM Group sp. z o.o.

KRS: 0000512023 NIP: 6762476939