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.
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
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.
As a result, a new approach is starting to become more and more popular.
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. 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.
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)
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.
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.
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.