Copyright ©2008-2021 SoftTeco
Tech Review Series: React Native

Tech Review Series: React Native

The React Native framework is one of the most popular tools for cross-platform mobile application development due to its speed and rich functionality.

Assistive Technology: How To Make Your Website ADA-Compliant

Assistive Technology: How To Make Your Website ADA-Compliant

An ADA compliant website means that the website content is accessible to all users, including ones with disabilities, with the help of assistive technology.

Tech Review Series: Ember.js

Tech Review Series: Ember.js

Ember.js is a framework for creating complex web applications and it brings certain challenges to developers who choose to work with it.

SoftTeco Discusses COVID-19 With The UNFPA And The UN Resident Coordinator Office

SoftTeco Discusses COVID-19 With The UNFPA And The UN Resident Coordinator Office

SoftTeco’s CEO Alexey Shevchik participated in an expert briefing dedicated to COVID-19 and organized by the UNFPA and the UN Resident Coordinator Office.

How To Redesign Your Website The Right Way

How To Redesign Your Website The Right Way

The website redesign process includes several steps that one needs to follow in order to meet the business goals and achieve a high level of performance.

State of Google Play Infographic. Trends for 2021

State of Google Play Infographic. Trends for 2021

SoftTeco prepared comprehensive infographics on the Google Play applications and their state, including top trends and a number of daily downloads.

Why Are Google Apps Not Working? Android WebView Crashing [Fixed]

Why Are Google Apps Not Working? Android WebView Crashing [Fixed]

The latest update of Android WebView caused a massive crash of Android applications, mostly the cross-platform ones written in Ionic.

What is a Landing Page? Best Practices 2021

What is a Landing Page? Best Practices 2021

A landing page is a valuable converting tool that can significantly increase the number of your customers and user engagement if designed correctly.

Tech Review Series: Vue

Tech Review Series: Vue

Vue is a very lightweight and efficient framework for frontend development that grants developers a high level of flexibility and speed.

Quick Start to Integrating Stripe In Your Application

Quick Start to Integrating Stripe In Your Application

The Stripe payment system is known for its high level of security and robust protection of customers’ data against possible external threats.

Web development
Tech Review Series: React

Tech Review Series: React

We begin the new tech series dedicated to front-end development and our first technology for review is React. Known for its speed and multiple ways of use, React is one of the most popular front-end development tools out there. 

Whether you are choosing between available options or want to know more about React, this article will serve as a useful and informative guide. Enjoy the reading!

React: a brief history and the current state

React is a library created in 2011 by Facebook - or by Jordan Walke, to be more precise. The Facebook team wanted to make the news feed update in real-time while users use chats. For that, the team needed a dynamic and high-performing UI. At that time, there were no available tools that would correspond to this request. So Jordan Walke proposed putting XHP into the Javascript coordinate system. Surprisingly, it worked, and soon React was deployed on Facebook in 2011. Later in 2012, React was also used on Instagram and the initial public release of React happened in 2013.

Throughout the years, React has seen multiple changes and improvements. One of the most notable is probably React Fiber released in 2017. React Fiber was introduced as an alternative to Stack, the old rendering algorithm of React. The problem with Stack was that it had become too outdated and needed to be replaced. Thus, the development team created React Fiber - a set of algorithms for rendering graphics. 

We also need to mention React Native - an open-source framework for mobile applications that was released in 2015. The reason why Facebook created it was perfectly explained by Mark Zuckerberg who stated that “a company was betting too much on HTML as opposed to native”. This is how React Native came into play and became one of the best tools for building mobile applications due to its speed and efficiency.

As for the current state of React, the numbers look pretty good. In 2020, React was the second most loved web framework according to Stack Overflow’s survey. It has a big community that keeps growing, it’s used by over 8700 industry leaders, and it was at the top of Google Trends in 2020 (compared to Vue and Angular). The list of brands that use React is impressive as well: it features Facebook (obviously!), Atlassian, Airbnb, Dropbox, Skyscanner, and more. And this is actually a solid indication that this library is reliable and has a lot to offer.

React: technology type

React is a component-based Javascript library that helps develop the view layer of the applications. In terms of the MVC model (Model-View-Controller), React belongs to the V part which stands for the View. 

React is based on three pillars:

  1. Component-based

React allows easy building of complex apps by breaking them down into smaller components. These components are independent of each other and can be easily managed, maintained, tested, and debugged.

  1. Declarative style

With declarative style, developers only have to create simple views for each state of an app, and React will take care of the components’ updating and rendering.

  1. “Learn Once, Write Anywhere”

The existing code can be easily reused whenever it’s needed. This reusability also contributes to the ease of code maintenance.

Now let’s have a look at the features that make React so loved by developers. The key features of this library are:

  • Virtual DOM: React uses virtual DOM which means one element can be rendered without the need to render the whole DOM (equals high speed).

  • One-way data flow: implies faster data flow and reduces the boilerplate.

  • Custom renderers: allow building custom implementations.

  • SSR (server-side rendering): improves your application SEO.

As you can see, they are aimed at maximally optimizing the speed of the library while retaining a high level of performance.

JSX

JSX is an XML-like syntax for Javascript that is used by React. JSX allows developers to pass around tree structures that are composed of HTML elements as if they were Javascript values. In other words, JSX makes XML and/or HTML text coexist with Javascript or React code. 

There has been a bit of controversy around JSX in the React community. While some developers claim it makes things more difficult, others say that JSX is an essential tool to use when working with React. It’s not obligatory to use JSX and it can be quite challenging for beginners. However, if you have some experience with React already, you’ll notice how JSX facilitates your work.

The use of React: most common cases

There are many kinds of software applications out there and all of them have different requirements. Like any other tool, React has a certain set of features that make it highly suitable for certain applications that we will describe below.

SPAs

SPA stands for a Single Page Application and is probably the most common use case for React. The core idea behind a SPA is that it updates the content on the page without demanding a user to refresh it. A good example is Gmail: you can see new messages appearing in the mailbox without refreshing the whole page. 

React, in turn,  can display the applied changes without reloading the page. It happens due to the one-way data binding method when the changes made to the model affect the view but not vice versa. In this way, React is perfect for SPAs.

Social networks

In relation to the point above, React is great for working on social networks. Since React is great for building SPAs, it brings the benefits of a SPA to a social network, enabling it to update the content in real-time and boosting user experience. The SSR feature of React is a plus too as it allows doing initial rendering on the server and loading the subsequent pages from the client.

Data visualization

There is no need to repeat ourselves in saying how important data visualization is. Hence, it is also important to choose proper data visualization tools, and React happens to be just one.

The usage of virtual DOM allows React to quickly rerender the needed components and thus display the changing data in real-time. As well, React will take care of coming up with the best way to update the UI while you will only have to supply the data stream through the API.

E-commerce

E-commerce stores tend to have many elements such as filters, APIs, search engines, etc. So it’s a good option to manage these elements as independent reusable components - and that’s exactly what React does.

As well, React components are reusable: meaning, a developer can reuse the component within an app several times without the need to rewrite the code. This contributes to saving time and finances as no new code needs to be written (not always, at least).

React Pros and Cons

Even though React is the most popular front-end tool and receives lots of praise, there are certain disadvantages that one must be aware of. As well, React may not be suitable for certain kinds of applications due to its functionality.

avatar

Expert Opinion

React is a stable and mature technology and is a great library for frontend development. React is easy to learn due to the simplicity of its syntax and well-written documentation. Configuration examples, together with a variety of libraries for variant cases, allow you to start real coding in minutes. As well, your application can have a high unit test coverage and the component-based system really helps with it.

As for performance and speed, virtual DOM does its job - React applications are really fast. But don’t forget to follow certain rules to help the React DOM library perform its job efficiently. Also, keep in mind that React components automatically re-render whenever there is a change in their state or props.

Since React is responsible for the view layer only, a developer has to patch together the rest of the app instead of having a single go-to solution. This is something that one has to keep in mind when working with react. As well, the React world moves quickly and this can result in the code becoming outdated quickly. Such rapid changes can be tiring for developers.

React is a very fast and beautiful solution for small to medium-sized projects. But you need to be prepared for the sharply growing complexity of support for large projects. And if SEO is extremely important to you, you should take a closer look at SSR and the React-based project NextJS.

Igor, Full Stack Engineer

Conclusion

React is among the tools that our development team at SoftTeco uses on a regular basis. However, before starting to work on a project, we carefully estimate every aspect of it to make sure that React would be a suitable solution.

Overall, React shows a great level of performance and helps create swift and robust applications so we definitely recommend it. And in the next article, we will review Angular - a tool that is often compared to React and is another popular choice for frontend development. Don’t forget to sign up for our newsletter and stay tuned!