Choosing the right Tech Stack and React

Choosing the Tech Stack is a crucial part of any project. It has influenced our architecture design and has allowed us to efficiently build the product we envisioned at the start.

Trade-offs are always there — some technologies are fast, robust but may take a lot of time to start with, some would provide good scalability but less features. However, it is possible to assemble a stack that can both meet your needs now and evolve as your company matures.

React

React is an open-source JavaScript library for building user interfaces, started by Facebook as part of an internal project in 2010, and was made open-source in May 2013. We chose React primarily for its speed. React uses Virtual DOM for DOM manipulations. The Virtual DOM was one of React’s main differentiators when it first appeared. It was a big advantage in comparison with previous frameworks, and since then even the newer libraries followed the same approach.

In general, DOM manipulation is heavy. Virtual DOM is a lightweight copy of the actual DOM and updating the Virtual DOM is faster since it does not update everything on the screen. React first compares the incoming changes with the Virtual DOM to get “diffing”, a DOM changeset, and based on this changeset the DOM is updated. This process is fast and saves time as the DOM changes are minimal, directed, and only applied when required.

Some features of interest in React:

• It is open-source and maintained by Facebook., and is constantly updated with new features and enhancements.
• It uses JSX, which is simple and easy to learn.
• CSS styles are bound with the component
• React even comes as a cross-platform mobile development library, known as React Native. So if you are targeting both web and mobile development choosing React and React Native will save a lot of learning time. Also, you can create mini-projects for common components.

Though React is very powerful and popular, it also has some drawbacks like poor documentation or changing libraries with the high paced developments. But you should definitely not use React if your application is very small or requires minimal support from the framework. As the React library is big in size, you are likely to end up with features you will never use. This may lead to relatively longer page-load times.

Redux

Redux is a predictable state container for JavaScript apps Which makes it easy to handle the app state as a whole. It is lightweight, maintainable and easy to debug. To know more about redux, please follow the official documentation.

Redux takes a little bit of learning effort to master it and using the redux concepts was challenging to maintain the code quality such as we had to write mapStateToProps for all the components that wanted to subscribe to the store and handle their data. Also, making a network call and saving the data into the store was not centralized.

To overcome most of these problems, we have created our own config driven framework on top of Redux. We created an HOC which is already wrapped in the connect method and has its mapStateToProps method in place. If there is a need for a component to access the redux store, we wrap it into this HOC and provide some configs (such as the store keys it wants to listen to) and the component starts listening to the store changes.

We have further customized this HOC to centralize the network calls. It only takes some configs and makes the network calls, handles the data, saves it in the store if required and sends the data to the component that is listening to that store key. Each store key has its own status (Loading, Loaded, Error etc.) to indicate what is happening with the store key which helps us in making some decisions such as there shouldn’t be any network call for the store keys which are in loading state.

These customizations have made the developer’s life so easy that even if he is not fully aware of the redux concepts, he can still manage to get data from the store. We will explain the redux framework in detail in our upcoming redux article.

Formik

At CodeParva, we are developing an integrated solution for the global self-storage industry. The industry requires a lot of data inflow and hence lead to heavy use of forms in our application. These forms need to be dynamic and performant at the same time to give our customers a smooth experience.

We researched for a library that would be a good fit with React and can best suit our requirements. Formsy was one of the libraries we started with but as our project grew Formsy was not able to provide us the kind of performance we were looking for.

Performance Comparison — react vs formik vs redux-form.

As per npmtrends, Redux-Form and Formik were two widely used options for form-management. There were many features which Formik provides, but FastField Component was a particular feature which made us use this library.  FastField  is a PureComponent which optimizes the forms and does not let your component unnecessarily re-render. Just by using this component we were able to increase the form performance by 50%.

A tip from CodeParva:  Always keep your business components detached from the third-party components. Use a wrapper component to interact with third party components. As Formik grew and introduced new API we just had to update our wrapper implementation and voila! — our components were ready to use again in the forms with new and improved performance.

Material UI

Material UI is like the bootstrap for React. Just like bootstrap provides nice and simple css-classes, material-ui provides a vast set of react components to be used directly in your React app. It comes with good customization options, like the formats, inputs or the component’s theme. Not only this, but material-ui also provides:

• A good, clean, and easy documentation. The official documentation is organized and easily navigable. Material UI community is also very large, meaning you also get access to tons of examples on the web. Material-UI team is very active on platforms like StackOverflow.
• A consistent appearance. Okay, this is kind of cheating because it’s a library, so of course the appearance is going to be consistent. BUT Material-UI is a HUGE library, and the benefit is you have some choices. Aesthetic preferences for Material Design aside, your web project has a high chance of retaining similarity in appearance and functions all throughout.
• Creative freedom. You don’t have to have a consistent appearance if you don’t want to! There is actually quite a lot of depth to the Material-UI components and the developers encourage customization. Material-UI doesn’t force Material Design style on you, it just offers it.
• One delightful component is the ThemeProvider. Placed at the root of your app, you can change the colors, the typography and much more of all sub-Material-UI components! However, this is optional; Material-UI components come with a default theme.
• Components work in isolation. Material-UI components are self-supporting, and will only inject the styles they need to display. They don’t rely on any global style-sheets such as normalize.css! You only want to use that super cool progress spinner? Grab it! Live your best life!

Final Words:

React, Redux, and Formik together have proven to be of great assistance to us in the UI development. From our anecdotal experience, even developers without knowledge of Redux or Formik have quickly learnt to use them well, even with all our customization.

If you like the idea and want to know more, doesn’t matter if it is the industry or the product, you can always connect with us. Visit Codeparva Technologies to know more about us.

Linkedin | Instagram

References:

1. React JS:  https://reactjs.org/
2. Redux:  https://redux.js.org/
3. Formik:  https://formiik.com/
4. Formik Comparison:  https://www.npmtrends.com/formik-vs-formsy-react-vs-redux-form
5. Material UI:  https://material-ui.com/
6. JS tools & frameworks comparisons:  https://2019.stateofjs.com/