React js is one of the leading technologies for building modern web applications. In this post we look at precisely why React has taken over as our platform of choice for building websites to dashboards. Fast, scalable and flexible and some of the the best developer tools on the planet.
Before single-page applications
Today’s users expect website and mobile apps to be blazingly fast and highly responsive — and many businesses are starting to compete based on user experience, including site performance.
In the not so distant past, the traditional approach would be to develop applications using server-rendered HTML. Each user interaction would generate a new request to the server (located in the cloud, but often in a different geography to the user) 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 render the entire page layout. As HTML5 is a verbose language, this resulted in slow-loading pages and poor user experience. Due to the higher latency of 3G/4G mobile 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 is updated. This gave users a much faster experience.
While this approach was okay to start with, as applications became more sophisticated, they also became harder to maintain. The same HTML needed to be rendered on the server (using technologies such as ASP.NET) as well as in the browser (using client-side technologies and JavaScript templates).
It meant we needed to build the same 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. Also, we 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 web applications more straightforward, several JavaScript frameworks were born. Some of the most popular include Angular.js (built and maintained by Google), Backbone and Ember.
While these frameworks each have their specialities 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 more substantial and complex applications. The frameworks improved communication between the browser and the server and allowed testing of each element in isolation.
However, a common problem with all of these frameworks was performance — especially when rendering and updating large blocks of content.
Consider an email application. As you read, reply or delete emails you would expect an immediate response. However, this was still not possible with many of the frameworks — instead, you would experience a short but perceptible delay.
As a result, a new approach was required.
ReactJS
React.js 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 uses React on Instagram, as well as many 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 poor performance seen with the previous 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. When the user interacts with the application, the operations are run against the virtual DOM before a composite 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 parts, each with their own isolated state. The structure makes it very easy to develop reusable components and test them.
Small library vs. bloated framework
Many Javascript frameworks are bloated with things that developers don’t often need. By contrast, React is very small and very lightweight. The API can be learned in a day. If you 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 more straightforward. It results in applications that have better code coverage and are more robust. With faster development times, it means complete applications can be released to users more quickly. A new breed of component-based testing tools such as Storybook.js have also emerged.
Supports both client-rendering and server-rendering
React is fantastic on the client-side, but its 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 – which is precisely how we built our website.
Active community
React has a vibrant and active community. There are many open-source packages for everyday tasks such as animation, form validation, testing etc.
Facebook is continuing to develop React further. The best part is that Facebook developers discuss almost everything with the community. They propose an idea and get feedback before releasing a new feature.
Takeaways
React is a robust modern framework suitable for complex and large-scale web and mobile applications. We are developing almost all of our projects using React, including the checkout for global e-commerce store Graham & Brown, business applications embedded in Microsoft Teams, as well as our website.