Back to Front-End: Why we love ReactJS
We’ve touched upon these questions before! But today, we asked our very own front-end professionals their opinion.
With multiple successful projects under their belt, this is their insight into which Framework they consider the best. Confirming the benefits and the reputation of this tool. We would like to share our conclusions.
Guess which one we’re talking about?
What is ReactJS
Having an illustrious reputation as the go to solution for many tech-giants among which stand: Reddit, Twitter, PayPal, Uber, Instagram, AirBnB just to name a few.
The latest Stack Overflow Development Survey shows that jQuery is still king, but it gradually gives way to other frameworks year after year. You can see React.JS quickly gaining and aiming for that number one spot.
Despite its popularity and unlike its competition, ReactJS is a whole lot less controversial, everyone genuinely agrees that it’s possibly the best solution out there.
React is a lightweight view library, that you use out of the box as is, or coupled with Flux, MobX or Redux libraries to provide a full-featured architecture.
Because those packages are relatively similar, they are more akin to different droplets of water in a pond. In fact, Flux and Redux are useable together within one project, though we discourage it, mostly to avoid violating coding standards and best practices.
How I learned to love React
These and many other reasons are why we chose ReactJS as our favourite:
“The secret to building large apps is never build large apps. Break your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application.”
ReactJS uses a component-based architecture
Awesome! But what does that mean?
Well, components are highly cohesive building blocks of code that loosely couple with other components, they are re-useable, composable and unit-testable. They describe a part of the user interface and they can contain other components and will always roll up to the app component.
Let us take a very simplistic site architecture.
Each part of our site is a separate component. So, header, main content, sidenav and footnote are each their own instance, they all connect to the main root component.
The beauty of the separation into their own components is that you can re-use the same component somewhere else on the site or even within the base without re-writing almost anything. And most of the time just re-use the same code 100%.
We achieve that by compound components, which have a common state with unlimited number of instances, with the same logic in mind.
Components can request states/variables/changes either from each other as siblings or their parents. And act as a parent to their own children. That might sound messy so consider using Redux, to provide some order.
Where as in Class component requires you to extend from React.Component and create render function which returns in React element. Requiring more code but with a higher degree of flexibility and functionality.
Although from version 16.8 and onwards the obvious use of class components shifted in the direction of function components, all thanks to React Hooks!
Finally, because you employ component logic instead of templates, you can easily pass rich data through your application and keep state out of the DOM.
So instead of separating technologies: markup and logic, in their separate files, ReactJS separates concerns with loosely coupled components we talked about. These contain both at the same time.
ReactJS knows that, for ease of use and understanding, rendering logic couples seamlessly with other UI logic: how to handle events, how to state changes, and how data is prepared for display.
It offers us a set of syntax’s to control components’ life cycles – like componentDidMount, componentDidUpdate, or shouldComponentUpdate for Class components. And – useEffect, useCallback, useMemo for Functional components.
Understanding the life cycle of components you can optimize the code for higher performance in addition to what React has to offer, especially so in huge projects.
Just another pin, in “list of reasons why React is awesome”.
And here is the star of the show, and in our opinion the best that React has to offer.
Virtual DOM is a concept where the ideal “virtual” representation of UI resides and is kept in memory, synced with the “real” DOM by the integrated React library. This is what we call reconciliation.
A normal DOM represents a tree of data structure. Changes and/or updates to the DOM are swift and trigger a chain of consequences. Once an element changes, a compulsory re-render of that node and its’ children takes place, keeping the UI up-to-date.
More DOM elements = more re-rendering = slower performance, for every DOM update.
In comes the Virtual DOM (aka VDOM). Enabling the declarative API paradigm of React. It abstracts the attribute manipulation, event handling and manual DOM updating. It’s more of a pattern than a concrete technology.
When you apply new changes to the UI, ReactJS tracks and applies them to the VDOM. Afterwards, it compares (“diffs”) the VDOM to current DOM, and calculates the best possible method to apply these changes en-masse. All of this happens backdoors without any hexes at the UI level. Once calculated, the best mass-update sequence alters the actual (live) DOM, keeping the app functional and up-to-date.
React, also uses internal “fibres” to hold addition info about the component tree.
Fibres increase suitability for areas like animation, layout, and gestures. They allow incremental rendering: ability to split rendering work into chunks and spread out over multiple frames.
As previously mentioned, Function components occupied the role of something called by the community “dumb components”, with simple uses: receive prop>render.
But with the introduction of React Hooks, you can now assign to function components their own state with useState and useRender which turned function components on par with class components.
Massive benefit of using React Hooks is an approach called: write once, use everywhere.
By creating “custom hooks” with their own separate logic you can apply them to multiple components.
Most of the time these are used in conjunction with API to fetch data on the outskirt, rather than writing request code in each component separately. Just assign an appropriate Hook!
ReactJS – 6 key advantages
1. Development efficiency – Less time/higher quality
React allows you to write modular and clean code, breaking the project and its individual components into separate pieces. This enables code recycling, in turn increasing developer velocity and productivity.
2. VDOM – Increased performance for applications
Designed for fast response, the library’s core features, such as the DOM implementation and server-side rendering, enable building large-scale apps which are fast and responsive.
3. Flexibility and ease of maintenance
Originally developed according to modular principles, “React” code is easy to maintain and update. Being highly adaptable and scalable, it helps save time and costs in the long-term.
4. SEO and UX adapted
Back-end rendering helps “ReactJS” projects with better indexation by search engines. Furthermore, high speed and performance contribute to a better overall user experience as well as improved SEO.
5. Open-Source lib Tools and Community
Facebook and a massive community of independent collaborators maintain this platform, and to date it has 3,811,542 live websites. Not to mention a strong corporate backing will and is ensuring its relevance in the industry.
6. React Native
Last but not least is their mobile integration – Understanding and integration with the robust mobile-orientated framework for building cross-platform applications for Android, iOS and UWP.
Where is React used?
Hey but why take our word for it? Just look at these companies!
Written in ReactJS and using Redux to control the app’s state and store downloaded information about TV series and movies, is Disney’s relatively recent addition to their fight for the streaming service market!
Look out Netflix… who by the way ALSO uses ReactJS!
Ah yes, the old beast of mailing services, it has gone through quite a metamorphizes.
The place where you can find arguably the best content on the interwebs. Filled with as many (/r)subs as there are grains of sand on the beaches of California.
With so much information to work with its no wonder they had to go with the best. Not only that but they took full benefit of React Native and its integration to create one of the most robust apps on the mobile market!
The E-commerce giant, tracing it roots to 1999 as the go to Digital-wallet we all know and love. And as a digital wallet they provide full support and assistance in integrating their payment system in your application and they use React. There are multiple examples and tutorials out there for this exact topic!
And they are not the only ones!
Archive.org, Atlassian, AirBnB, American Express, BBC, Buffer, Coursea, Dropbox, Dailymotion, Economist, HBO, Instagram, Imgur, IMDb, Lyft, New York Times, OK Cupid, Uber, Urban Dictionary, Variety, Product Hunt, WhatsApp, and the list just goes on and on…
All this makes sure that ReactJS engineers are currently in very high demand and its a worthwhile investment to learn this amazing library!
Hey but that’s just a theory! A Game-Theo… wait, wrong author, platform, and topic.
Please do so, down in the comment section! Till next time tech nerds!