Choosing a web application design pattern

Multi page application vs single page application?

Web design started in the early 1990s with the use of hypertext documents with static data linked together. The web application era started later on in web history terms and it was helped by the introduction of the forms tag. Nowadays, web applications are replacing desktop applications at an accelerated rate. This is happening because web applications are easier to update, can be used from multiple devices and can be accessed from everywhere.

When approaching the creation of a new web application, there is a question that you need to ask. What design pattern to use: A single page application or multi page application? Both design patterns have their pros and cons but each one of them can be seen as ideal depending on the use case. A strong factor in helping to choose which app model is ideal to use for the web application is to follow a content-first approach. With this approach, you will be required to put the application content before everything else and this is ideal since content is the main reason why users will visit a web application. Knowing the content will help to decide what design pattern is ideal to use since we know what data is submitted and received from the server.

Multi page applications (MPA) are the traditional way of building a web application. For every interaction or change, such as; display data or submit data to the servers, the process requests a new page from the server which will then be rendered in the web browser. Using this approach for simple applications is acceptable, but using it on a web application with a rich and complex user interface, or with a lot of data, is improper. This will lead to a degradation in user experience since, with every request, the server has to generate a new page and transfer it to the end user over the internet where, once received, it has to be rendered into the browser. The use of MPA was improved in the early 2000s when Asynchronous JavaScript and XML (AJAX) was introduced. AJAX gives the developer the ability to refresh only small parts of the web page and also to load data into smaller chunks. This helps when it comes to user experience on the web application but it also adds more complexity to the web page itself.

In 2009, single page application (SPA) was introduced. SPA originated from a combination of MPA and AJAX. SPAs are applications that work inside the browser and on start-up, the process to transform data into HTML is moved from the server to the user’s browser. After the SPA start-up, only data is passed from the server to the browser and it will usually be in JavaScript Object Notation (JSON) format. This process can be done with the help of JavaScript frameworks such as Angular JS, Handlebars and Knockout JS. • SPAs are faster since HTML, CSS and scripts are loaded once throughout the lifespan of the application • Same application can be used as a website and as a hybrid mobile application • Sending and receiving less data

to and from the servers • Better user experience • No code is written that compiles pages on the server To use MPA over SPA or vice versa all depends on the goal of the web application being developed. As previously mentioned, the preferred option is to use a content-first approach. Once you plan all features, data and graphics, you can check if these will fit without overloading in a single page application. If things turn out to be too complex then an alternative approach is multi page application. Clayton James is a software developer at Deloitte Digital. For more info, please visit www.deloittedigital.com.mt/custom-built-software