How to develop “super-efficient” front-end web applications?

Learn how to develop super-efficient web applications on the frontend with the latest trends and techniques. Improve efficiency with these practices.

When we are asked to implement “super-efficient” web applications, it sounds like a very simple requirement that is just asked for in the specifications.

When we talk about the efficiency of a web application, we can mention the impact of different factors on IT projects. We will focus on describing those that allow us to “make the web app fly robustly” with a limited amount of resources. The recommendations we are going to propose will be for heavily used web applications.

There are many circumstances that encompass front-end efficiency factors in applications and back-end efficiency factors. These applications are able to present an optimal user experience, and this requires frameworks that allow us to move views and interact with the components in a fast and agile way.

Front-end efficiency

Today’s web applications act in the same way as our mobile applications, but with different technology and in a much more open way, with some key differences:

• In most cases, our mobile applications currently require a prior installation process, while web applications usually need to be operational from the very first moment, which makes them more efficient.
• Mobile applications usually contain all the expected operations in a single package; in web applications it is better to divide the operations into different pages.
• The installation of new versions of mobile applications is not always automatic and, even if it is, it depends on multiple factors that do not guarantee that the user is using the latest version available. In web applications, it is possible to control the update process remotely.

The model is still a 3-tier client/server model, and in these modern web applications, the client plays a more prominent role.

As web applications have been shifting towards greater interactivity and functionality by clients, maintenance on this end has become more complicated. The road to building this type of modern application is paved of challenges.

At first it is very easy to begin adding functionalities to a web page using a few lines of JavaScript. However, as this functionality increases, so does the difficulty of subsequent maintenance, and this could lead to performance issues, making quality tracking, monitoring and security a must.

At CaixaBank Tech, we consider it a priority to work on the governance of web application development, setting quality standards and monitoring compliance. We are committed to trying to make the most of what is already being used and has proven to work, both in terms of solutions and methodologies.

In terms of clients, there is a strong impact due to the paradigm shift. We have gone from server-side rendering that provided individual views on the frontend with the requested information and links to other views, to a model where client applications are provided to be loaded in the browser and are able to recover information from the servers, interact with the user and display different views.

Measurement of efficiency in web applications

In terms of user-perceived performance, it is important to consider the impact of this model on response times:

• ttfp: Time to First Paint refers to the time it takes from when the user performs an action to when a change occurs on the frontend.
• ttfcp: Time to First Contentful Paint is the time from when the user performs an action to when the page begins to display useful content linked to the action performed.
• tti: Time to  Interaction is the time it takes from when the user performs and action to when they can interact again with the page. 

Part of these times are conditioned by the communications between the client on the frontend and backend.

Practical tips for initial load time efficiency

Optimise web applications: Size and number of resources

Minimise the scripts: eliminate redundancies, comments and optimise the content before distributing it, apply transcodings …, -it is not necessary that the published code is readable by a human-, adapt resolution and quality of images to the use they will have, choose the appropriate file formats, group different scripts that normally load together, eliminate style rules that have no real use…

Optimise web applications: critical path

Identify the essential items for the first interaction and separate them of the rest so they can be loaded as a priority.

Optimise web applications: Postpone the loading of what is not yet needed on the frontend

Loading elements and data that we do not need can interfere with the loading of elements that we do need, so applying lazy loading for elements and data not yet visible usually improves the perception of speed.

Optimise web applications: Anticipate needs

Once we have loaded the priority elements, we can take advantage of the downtime to start to prepare the loading of elements that we do not need yet, but that we anticipate will be needed soon.

Near-native web application performance

WebAssembly, sometimes shortened to Wasm, consists of a portable binary code format originally devised as an evolution of JavaScript, whose function is to allow the execution of code originally written in other compiled programming languages (such as JAVA, C, C++, Rust, Python, etc.) within virtual machines in a JavaScript engine.

The main achievement of WebAssembly is enabling the execution of high performance web applications: the majority of JavaScript execution engines used by today’s major web browsers support this format, which, alongside its greater efficiency compared to traditional JavaScript can facilitate the execution of processes in web applications with a performance similar to that of native code.

The service workers and proxies of your web application

A service worker is a script that runs in the background linked to a web application, which can continue running even when the page it is supporting is closed.

These scripts cannot access the DOM of the page directly, but they can communicate with it via events. Their main function is to serve as the interface in communications between the web application, browser and remote services.

They allow, for example, intelligent management of cached data, or provide support for the management of messages and push notifications, all in a separate JavaScript thread from the visual part.

Evolution of the web application: SPAs, MPAs and micro-frontends

All of the above refers to the user’s perception. It is also important in terms of the evolution of the web application, whether it is built as a single-page app, a multi-page app, or as an ecosystem within which a set of micro-applications coexist and cooperate with each other.

Traditionally, a modern web application is often associated with a single web page that encompasses all views and functionality. This model is often very convenient at first, but it tends to scale poorly and is a challenge in terms of change management, which is sometimes impossible in large teams and applications. The pure SPA model often suffers from high initial loading times and high maintenance costs. SPAs need back-end applications that are robust and independent.  And with that, we have micro-services, which we look at later.

Another model involves dividing the application into multiple interlinked pages, i.e., the MPA (Multiple Page Application) model. This mode facilitates maintenance, especially when the different pages making up the applications are quite disconnected from each other, but they suffer from long page change times and it is difficult to manage the application status.

The micro-frontend model is an evolution of MPAs in which several micro-web applications coexist in a container page. These micro-applications are decoupled from each other, but they have efficient mechanisms to communicate with each other and their development is usually linked to a vertical business approach.

Summary of "super-efficient front-end" web applications

Building a “super-efficient” web application does not depend on a single person; it is a commitment requiring the involvement of the frontend team, the backend team, as well as the rest of the organisation. Absolute efficiency is an expensive goal to be achieved that can be jeopardised by any small change outside the development teams.

Now you know all there is to consider for a super-efficient frontend. Find out in the following article how to achieve efficiency in web application development by optimising the backend.