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.
This post looks at the leading technologies for building modern web applications — and precisely why React has taken over from Angular.js as our platform of choice.
We have been building applications with React.js since the project first started — developing a good deal of experience with React in the process. Over the last few years, we have seen React.js become more mature, more stable, and enter mainstream adoption.
Before single-page applications
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.
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
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.
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
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.
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
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.
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 with solutions like GraphQL and Relay. 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.
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.
Launch your idea
Accelerate your innovation. Let's bring your idea to market.Talk to an expert