1920-700_hero-image

What React is and how it can cut the cost of website development

What is React?

Reaсt is a library that was created in 2013 and is responsible for building the website user interface. As early as 20 years before this event, the idea came up that the Internet of the future should not consist of dull static HTML and CSS, as in the mid-1990s, but should become much more active and cheerful. To translate this into reality, it was necessary to develop a language with simple rules easily understood primarily by interface designers and curious Internet users, not programmers. Something similar to Java, but less complex. Even Python was a candidate to become such a language but there emerged JavaScript under the direction of Brendan Eich.

JavaScript introduced interactive elements, dynamics, and various events to the web design. What is it all about? About being able to hit the Like button, just for example. Or send a completed contact form. Or work with maps packed full with infographics. Or deal with an admin panel in an online shop where the product, basket, and payment process can have several states. All these elements and states are small programs developed in JavaScript and executed by the user’s browser.

Thus, if one user’s action on the site must bring about any changes, the changes will take place according to specific scenarios – these very scripts. React is used to allow the developer to create a web app containing a large amount of JavaScript code faster and in a more convenient way.

React’s competitors

The more complex the site interface is, the slimmer is the chance to create it without using the React library and its main competitors – Angular and Vue.js frameworks.

Google’s Angular is the oldest in this trio as its first version was released in 2010. The framework is used in Google, Forbes, PayPal, Upwork and other majors.

The Vue framework came out in 2015. Its author is a former employee of Google Creative Lab, currently an independent developer Evan You. Though Vue cannot boast of the same patronage of major western companies the way its big brothers do, it has enough eastern users, such as Alibaba, Tencent, and Xiaomi.

screenshot_1

Statistics of Angular, React, and Vue downloads during the past year.
Source: https://www.npmtrends.com/angular-vs-react-vs-vue 

Let's briefly explain the difference between React, Angular, and Vue. First of all, Angular and Vue are frameworks, while React is a library. A library gives the developer more freedom and control over the process, while a framework decides for itself how the written code will behave. This is the architectural concept called the inversion of control. You might say that a React developer is more responsible for the outcome and thus must have a better command of JavaScript and architectural patterns.

In the second place, Angular suits better for the development of large corporate applications, while the entry barrier of React and Vue is lower and these tools are used to create MVP, small- and medium-scale projects. 

And please, don’t mix up React with React Native. Their difference is that React Native is a platform used to develop mobile iOS and Android applications. The platform includes not only React, but also its own components, while React is used to develop only web applications. 

RELATEDBuilding a Single Page Application with Vue.js [Step-by-step guide]

Features of React.js

Let’s say a few words about the principles that underpin the React philosophy and ensure the speed and convenience of web application development. 

Component-Based Architecture

Components are building materials written in JavaScript for the interface of a React application. They work independently of one another, each based on its own logic. Divert your attention from the article and look through this page from top to bottom: logo, header, search box, head image, author’s photo, order form, footer – if our site was written in React, each of the elements listed would have been counted as one of its components. You can use recurring components many times instead of writing them again for every new page. 

Props and state objects

These are JavaScript objects which represent raw data models. Props is the data coming to the component from the outside and state is the data the component already stores inside it and can pass to other components. The contents of these objects determine what the user will see on the screen and what functions will be available.

One-way data binding

React components forming the data model are divided into parent and child components. Developers write them from top to bottom because they know about the One-Way Data Binding paradigm according to which data is sent from parent to child components through props. This gives the developers more control over the application. 

JSX

JSX is a JavaScript extension that allows creating React components from HTML. These components store both the page layout and the application logic, which simplifies the developer’s work. The browser and the engine interpreting JS code do not understand the JSX syntax, which is why it has to be converted to JS using, for instance, Babel transcompiler.

Virtual DOM

Probably, this is the key peculiarity of React that needs to be presented in some more details.

How does JavaScript interact with the pages? Any web page – if you can read its code – consists of the objects which seem to be nested into each other. For instance, a page consists of the head area including the header, styles, font size, and other technical information, and the body area for the main content. What you get is sort of a branching tree made of HTML and CSS objects which is called DOM (Document Object Model). DOM structure for JavaScript is the interface these programs and scenarios use to make static HTML and CSS objects “move”.

But the problem is that classic DOM is not designed to create dynamic interfaces, which is why the JavaScript code executed on the page slows down its rendering. However, React (same as VueJS) suggests that you should first create a lighter DOM imitation called Virtual DOM, then change only the objects affected by the user’s actions in this copy, and apply these changes to the real DOM. For instance, if the website built on React has a chat, the browser won’t update the page with each message sent. 

Advantages of React applications

  1. The server load and development time are reduced. The site performance is improved: the pages open faster and the interface responds to users’ actions quicker. In contrast to a typical web application that returns HTML layout with CSS upon the browser request to let the browser display the page, React applications make the browser download the set of scripts first and then execute them on the user’s device. This reduces the server load and improves performance.
  2. It’s not necessary to develop the whole website in React, if dynamic blocks occupy just a small part of the website. While static pages are working as usual, you can make a specific block in React and insert scripts so that they could be executed only in this block. There are companies that ended up rewriting their product in React after many years. It’s not necessary to do this migration at once, but from the perspective of development this may turn out to be more convenient.
  3. In contrast to standard websites, websites built on React have a clearer architecture, where it is easier to detect and eliminate bugs and which is more convenient to maintain. The developer controls data streams, layout, and styles and, ideally, knows the programming patterns that allow building applications quicker and more flexibly.
  4. If the frontend and backend teams prepare documentation in advance describing the format of data receipt and data sending between the parts of the application, the teams can work simultaneously: while the server part is being developed, frontend developers simulate – based on the documentation – the data coming from the server.

React.js and single-page applications 

If the server load is reduced, the load on the user side increases. However, according to the statistics, client machines have sufficient random-access memory to paint the pages of a React-based website in the browser.

Nevertheless, if you need to get the quickest response from the interface, you should use the single-page application (SPA) approach. Essentially, it treats the entire website as a single page constantly repainted by React. But not completely.

How is the transition from one page to another usually performed in a simple application? When jumping to a new page, the user sends a request for this page to the server, while the server returns the layout, styles, and script files (i.e. HTML, CSS, and JavaScript).

With SPA, users navigating through the website sections are formally staying on the same page. They already have the script files and styles, so it’s only necessary to download the missing elements. For example, if the same header is used on all pages and only a certain block of the page is changed, it’s not necessary to paint the header again. This saves resources and provides a faster and more responsive interface. The owners of online shops have to treasure every moment, as clients can be lost if they have to wait for 5-10 seconds after clicking a button.

The website of one of our clients, a service for work with Instagram influencers Influize is a typical example of SPA with the headless Drupal architecture. 

812_02

React and search engine optimization

Search engine optimization is the weak spot of React applications. The harm poor SEO does to the business is obvious – if search engines don’t see your website, it doesn’t exist.

That’s why there exists the server-side rendering (SSR) approach. Let’s describe it based on our projects – the above-mentioned Influize and the website of scrap car disposal service Scrapi. A part of the work on the websites painting is carried out on the server (yes, we’ve arrived exactly at what we tried to leave behind). This is the task of Next.js, a React-based framework. When the browser sends a request, the server returns a page painted in advance, which is ready and seemingly complete. After that, the elements start behaving as React components on the client side.

Thus, what the user sees are the pages partially painted on the server and partially built in the browser. Otherwise, the website pages would have been indexed less well.

In combination with the SPA approach, this gives what the web developers community knows as isomorphic applications. The users of such applications get a responsive interface and fast content display in an application which is already downloaded. The second advantage is that SEO issues are solved: if a search engine finds the page, it will receive its layout and will be able to index it without waiting until the scripts are executed. But an isomorphic application differs from a standard one in that, as soon as the user jumps from one page to another, the application works as SPA. 

Search engines won’t be satisfied with Next.js only though - it’s also about CX (customer experience) and UX (user experience). Your clients or website visitors don’t think how cool this framework is but they do anticipate fast page load and a streamlined user flow. Hence, last but not least, make sure your in-house or external front-end developers optimize and maintain your application. They have to do the code refactoring and check if there’s room for performance improvement. See what should be done regularly here

Well-known websites and applications built on React.js

Billions of people deal with the results of React.js’ work on a daily basis. Among them are the following:

  • WhatsApp;
  • Uber;
  • Netflix;
  • New York Times;
  • Yahoo! Mail;
  • Dropbox;
  • Codecademy;
  • Atlassian;
  • Zendesk;
  • Asana.

Conclusion

JavaScript turns a simple site into a useful working tool. However, it will be more expensive for you if the team uses the classical approach to web development. The team that knows React will save your money. This library works greatly for applications with a large number of interactive elements and allows the developer to work faster and fully control events on the client side.

You might also like

React.js components

What are React.js components?

React follows the principles of component-oriented programming that added the notion of component — a reusable part of code — to the developers’ vocabulary. The high speed of development on React the React is favored for is based exactly on the components.