Blog

Back to Front-End: Why we love ReactJS

EBS Integrator
Mar 12, 2021,

For a Front-End developer, one of the most daunting tasks is deciding where to focus your time, nerves, and energy. You already had to learn CSS, HTML and JavaScript, and now the question stands – what do you enhance it with? Do you focus on “Plain” (Why not go Assembler while you’re at it)? Or are you going with jQuery, AngularJS, EmberJS, VueJS, ReactJS, ElmJS, NodeJS or TypeScript? Decisions, decisions…

Choose JS library

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

React vs VUE angry teacher meme

If you’ve been a hardcore fan of ours, you’ll know that this is not our first rodeo into the topic. But for the sake of completeness, lets re-iterate a bit.

ReactJS is an open-source JavaScript library, heavily influenced by XHP, that has its origins as an internal tool by Facebook engineers. In ye olden times of 2011, deployed on “Facebook newsfeed” and a year later, on Instagram. Developed by Jordan Walke, a software engineer at Facebook, ReactJS saw its public release during JS ConfUS, in May of 2013.

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.

React – declarative, efficient, component based, JavaScript library that takes care of user interfaces. It allows simple and quick creation of scalable website front-end structures on the fly.

StackOverflow Framework Trends

Yearly Stack Overflow Development Survey – 2020

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

Dr Strange loves ReactJS

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.”
Justin Meyer

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.

ReactJS Redux

Written as Class or Function. The difference, aside from the syntax, is that a functional component is just plain JavaScript which accepts props as arguments and returns React elements.

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.

JSX – JavaScript Syntax Extension

JSX Hello world

That is JSX, a syntax extension for JavaScript, or the holy union of JavaScript and XML in all its glory. This is what we meant about Class and Function differences, from the point of view of ReactJS those codes are the same thing.

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.

You don’t have to use JSX, but thanks to its design it shows you more useful error and warning messages. Thus most developers find it helpful as a visual aid when working on UI inside JavaScript code.

Just another pin, in “list of reasons why React is awesome”.

Virtual DOM – Virtual Document Object Model

And here is the star of the show, and in our opinion the best that React has to offer.

We’ve explained how JavaScript DOM works before, so what’s V-DOM?

Neo VDOM ReactJS

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.

React Hooks

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

ReactJS 6 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

It includes a plethora of task-specific open-source libraries and toolsets such as React Sight; React Belle; Evergreen; Storybook and many other, which can be found on yarn, npmjs or GitHub.

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.

ReactJS Ecosystem

Where is React used?

Hey but why take our word for it? Just look at these companies!

Disney ReactJS

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!

YahooMail ReactJS

Ah yes, the old beast of mailing services, it has gone through quite a metamorphizes.

From C++ to HTML; then OddPost, Java, Python, JS into Classic PHP, doing a 180 back to JS finally arriving to NodeJS, MicroJS and stopping at ReactJS in 2015 and onwards. Truly a story for the ages with a satisfying conclusion, Yahoo landed on JavaScript due to its massive community and of course V-DOM.

Reddit ReactJS

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!

PayPal ReactJS

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…

“Any app that can be written in JavaScript, will eventually be written in JavaScript.”
Jeff Atwood

All this makes sure that ReactJS engineers are currently in very high demand and its a worthwhile investment to learn this amazing library!

Farewell

Hey but that’s just a theory! A Game-Theo… wait, wrong author, platform, and topic.

That was our opinion, tell us yours! Do you prefer Angular, or Vue? Do you think JavaScript is too confusing? Wanna tell us about a new JS Framework?

ReactJS new framework monthly

Please do so, down in the comment section! Till next time tech nerds!