Why we use React for building high performance single page applications

in Technology   —  

Today’s users expect web application interfaces to be fast loading and highly responsive — and many businesses are starting to compete on the basis of user experience, including site performance.

This post looks at the leading technologies for building a modern web applications — and specifically why React has taken over from AngularJS as our platform of choice.

We have been following React closely since the project first started around 2 years ago — building up a good deal of experience with React in the process. Over the last 12 months, we have seen React become much more mature, and now stable, we are starting to see React enter mainstream adoption.

Before single page applications

In the not so distant past, the traditional approach was to develop all applications using server-rendered HTML. Each user interaction would generate a new request to the server (located somewhere in a remote data center) and would result in the entire page being reloaded.

Each time a user clicked a button on the website, they would need to wait for the new page to load, and for the browser to then render the full page. As HTML is a verbose language, this resulted in slow loading pages and a poor user experience. Due to the higher latency of mobile and 3G networks, this was especially noticeable on mobile devices.

The first step forwards was for developers to sprinkle a few JavaScript requests on top of the server-rendered HTML application. Whenever an application needed to retrieve or store data on the server, a JavaScript request would fire in the background. This approach exchanged a much smaller amount of data (JSON or XML) than was possible with server-rendered HTML, and resulted in only the relevant part of the page being updated. This gave users a much faster experience.

While this approach was fine to start with, as applications became more complex, they also became harder to maintain. The same HTML needed to be rendered on both the server (using server-side technologies such as ASP.NET) and also on the client (using client-side technologies — and JavaScript templates).

It meant we needed to build the same display templates twice. Rendering the HTML on the server was still required for the initial page to load (as well as for SEO) and rendering subsequent interactions on the client gave users a faster application. In addition, we also now needed to share the state of the application (remembering user preferences such as “sort order”) between the two worlds. With duplicate code, application development was becoming messy.

AngularJS and the MVC frameworks

To make building modern web applications much easier, a number of different JavaScript frameworks were developed. One of the most popular is Angular (an open-source JavaScript web application framework built and maintained by Google) and similar frameworks include Backbone and Ember.

While these frameworks each have their own specialties and advocates, they all achieve very similar goals. They bring the model-view-controller (MVC) architectural pattern into browser based applications.

It finally meant we had a clean and consistent architecture for building larger and more complex applications. As well as streamlined communication between the browser and the server, we finally had an architecture that allowed each element to be tested in isolation.

However, a common problem with all of these frameworks (including Angular) is performance — especially when rendering and updating large blocks of content.

Consider an email application. As you interact with the application, read emails, delete old emails or search by keyword, you would expect an immediate response. However, this is not possible with the current crop of Javascript frameworks — instead you would would notice a short but perceptible delay.

As a result, a new approach is starting to become more and more popular.

React by Facebook

ReactJS

React is a high performance library for creating user interfaces. Created as an open-source project by Facebook, it has rapidly become one of the most popular JavaScript libraries in existence today. It has an active community and is well supported. Facebook are using React on Instagram, as well as parts of Facebook.

The “Virtual DOM” is what many developers think of as the main benefit of React but it’s not the complete picture. React provides a very distinct set of benefits for building single page applications

Performance

The sluggish performance seen with the existing Javascript frameworks occurs because they all try to manipulate the HTML document (DOM) directly. As the user interacts with a web application, many elements often need to be updated, which leads to the sluggish response.

By contrast, React works with a virtual representation of the DOM. Now, when the user interacts with the web application, the operations are run against the virtual DOM before the a single set of changes are then rendered into the visible page. This creates a huge performance benefit.

UI components

The main benefit of React is components. React structures your user interface into a set of small individual components, each with their own isolated state. The structure makes it very easy to develop reusable components and test them.

A small library (not a bloated framework)

Many Javascript frameworks are bloated with things that we don't often need, a disadvantage for web applications. By contrast, React is very small and very lightweight. The API can be learned in a day. If you really miss the functionality provided by the larger frameworks, then React with Flux makes an excellent choice.

Easier to test

The use of React components makes testing considerably easier. It results in applications that have better code coverage and are more robust. With faster development times, it means finished applications can be released to users more quickly

Supports both client-rendering and server-rendering (with Node.js)

React is amazing on the client side, but it’s support for server-rendering makes it truly special. Because React uses a Virtual DOM instead of a real browser, it runs perfectly under Node.js on the server, allowing us to render client and server side using the same templates.

Active community

React has a vibrant and active community. There are many open-source packages for common tasks such as animation, form validation, testing etc.

Facebook are using React in production, and they continue to develop React further with new solutions like GraphQL and Relay. The best part is that the Facebook developers discuss almost everything with community. They propose an idea and get feedback, before releasing a new feature.

Takeaways

With React now ready for mainstream adoption, we have already released a number of projects to production which are built with React components. This includes a new highly responsive checkout for ecommerce site Graham & Brown, as well as a new search engine for www.recommendedagencies.com

In the next post I will discuss how these were made.

Read next

ArticleTechnology

Why brands should use the latest image technologies

To deliver a perfect experience across multiple devices it is essential to consider how images are delivered

ArticleTechnology

The pros and cons of mobile app development with Xamarin

With more than one third of the global population predicted to be smartphone users by 2017, it is essential for companies to provide their customers with a smooth and responsive mobile user experience. With more and more companies now looking to compete on the basis of customer experience alone, this is more critical than ever. On the one hand, achieving a world-class mobile experience could mean extensive time and effort being spent to develop native applications across any number of mobile platforms. Yet, there remains a strong argument to be made for using cross-platform development options, either in whole or in part, such as Xamarin, instead.

ArticleTechnology

Comparing five popular frameworks for mobile development in 2016

In part 1 of how to approach mobile development in 2016, we directly compared native vs cross-platform mobile development and highlighted that a hybrid approach can, in some instances, be a solution to provide a seamless mobile experience. In part two, we are going to evaluate some of the popular frameworks you might use when the need arises for cross-platform development, helping you find what is best suited for your project.