The negative side of React and ES6 in general

| In Articles | 1st July 2020

While React is a great framework, it can put down many developers and companies for many reasons. I will try to list a few negative sides I had to live with, along my experience with them.

The negative sides of REACT and ES6 and the need of Webpack

Time to learn

Any developer switching to React from other frontend technologies will have to deal with the time to learn how to and how not to do with React. A good time will be spent like example with understanding the use of local vs global state and Redux (a state manangement library) or other similar libraries, or simple how store data in a local state, at the Component level. You need to be carefully and plan in advance, otherwise you can find later that the data stored locally is also needed at a different level of the app, than the initial component and the possibility to send data as props will not exist or will be to difficult to apply.

The need to learn Webpack

First, once with React and ES6, the need of using a compiler like Webpack will come in need. The code will be compiled from a format that browsers do not understand into a format that browsers can understand.

The use of:

require require('bootstrap-sass');

import import React from 'react'

export export const isDate = d => d instanceof Date; and fat function

constants created outside the project, into the Webpack configuration file, to be included at the compilation time into the project

new webpack.DefinePlugin({
       REACT_APP_API_URL : JSON.stringify('http://url-api.com')   
    })

will make the use of Webpack a must, while developing with React and ES6.

Now, one of the negative side of using React and ES6 is time spent on development. Webpack is taking time while is compiling the code and it can do that in 2 ways:

On demand, when you use the comand

run npm development

but manually compiling code from time to time is not something that you want while writing the code. This is a command to be used more when you need a final version for development or production code

So you will end by using npm run server which, as the name is saying is a server that is compiling the code at each save action you do.

Compilation time of code written in React with ES6 sintax

The computer used by the developer must be very powerful. A simple 7 core and 16G or RAMs will still make your compiling time to be a few seconds. It also depends on the size of the project, how many libraries you are including, how the code is written, but in a nutshell, all of this little things together are adding time to the compilation.

The compilation time and it's result can be improved if you decide to use chunks. Chunks is when a large file that it suppose to be your final compiled project is split in many other files depending on their use.

If you have a component that is only using 1 of 10 libraries from your project, and this component is building one single page accessed from the browser (one page app can still have multiple pages), then only one or a few chunks, related to this component, will be created on the compilation time and used into the browser.

This means automatic calls will be created and inserted into the generated HTML with the new names of this chunks (the name of this files will always be different automatically generate, to avoid cache at the browser level).

This will reduce drastically the compilation time, because the server will only watch the code that is changing and will only generate the files in need.

But even with all of this advantages given by the new technologies, and ES6 functionalities, spending so much time to wait for the code to be compiled and changes visible into the browser can be frustrating and a much stronger computer will be one of the first requirements when starting such a project.

Time spent on development with React and ES6

A negative side of React mainly can be the time spend to deal with the global state and props. You can easily lose track of props in a complex app where props are sending values from a parent Component to a child Component and from child to parent, and saving them into a local or global state, to be after remapped into the same initial component once data is changed or returned as a response from an API call.

The way to store sensitive data in session

While React Global State is a way to store data to be reused on a different location on the app at a different moment in time, this way to store is not safe for sensitive data and it can not be equalized with server session (like the PHP is using). The use of values in session is done with the help of the browser session, cookies or localStorage (which again is not a safe file). And even if the possibility to encrypt sensitive values exist on frontend, the key for encrypting/decrypting them will still be saved on the JS side which means that will be accessible to bad intended software or people.

The best app where React can be tested

An another big concern I always had in relation to React it was the way Facebook app is working on both web and standalone applications (on Android or IOS devices). This app, built most of it with React is many times to slow. Is something that me and other people realised. Still I would not blame the technologies completely and maybe the Facebook app itself is doing to many things at once (like API calls and big volume of data sent and retrieved) when you ask for a simple thing, like seeing your profile.

Conclusion

With all of this being said, React, ES6 and Webpack are still some great technologies that I will always choose to use because of their power, the flexibility they give and how much you can do with them. Webpack is a multifunctional software that is not only compiling the code, so the excuse of still using it still valid. Once you are learning the most important things about this technologies and what to do and what to avoid doing, the time spent on developing a project using them, can be the same as writing in PHP only or less, but you can do so much more with them.