Single Page Application

Interactive websites are no longer a rarity today; they are simply part of everyday Internet use. Multi page applications were often used in the past. These consist of many different individual web pages or HTML documents, but, on the contrary, single page applications consist of only one web page.

A single page application is a very modern way to create dynamic websites. Nowadays, creating static websites is no longer a problem with the help of static site generators. However, these websites still require several HTML documents.

Dynamic web applications offer a range of interaction options. When it comes to single page applications, however, the content of the web application is loaded only once, because a single page application consists (as the name suggests) of only one web page. This means that there is only one HTML document, which is constantly manipulated by integrated JavaScript code during user interactions, to change the design of the website, for example. Because of this, the website does not need to be constantly reloaded since it works directly in the browser.

In single page applications, the server provides only the initial web page, consisting of an HTML document. In addition to the basic structure of the website and the design, which is specified with CSS, this document also contains a DOM element. This is particularly important for single page applications to function. It is the Document Object Model, which contains all the code that ensures the website works properly. This is written in the JavaScript programming language.

During a user interaction, data in JSON or XML format is loaded in the background and is invisible to the user. These are then automatically inserted into the DOM of the loaded web page. In this way, the entire presentation logic of the web application is executed directly on the client’s side, namely in the browser. The server only provides data, not entire web pages.

An example of a popular single page application is the social network Twitter. When the user accesses the site in the browser using the URL, the browser as the client sends a request to the server. The website is loaded and displayed to the user. If the user now interacts with Twitter - for example, to access a profile - only the corresponding JavaScript code is executed, meaning that there is no need for a detour via the server. The content of the website is only reloaded step by step. Therefore, the server load for single page applications is rather low.

A single page application is particularly helpful when the server load is to be reduced. This can be useful not only for large websites like Facebook or Twitter, but even for smaller online stores. If it’s a website that users access frequently, short runtimes are particularly important. It therefore makes sense, for example, to program computer games that run in the web browser as single page applications. Web applications that are to be available as apps on mobile devices should ideally be designed as single page applications. This makes it possible to use the same backend for the mobile app and website, which reduces the programming effort.

Probably the most obvious advantage of single page applications is the low response time. Since only data has to be requested from the server and no longer entire web pages, dynamic single page applications load much faster. Not forgetting the fact that single page applications require fewer resources than multi page applications. Debugging is also a plus with single page applications. This means that developers can focus on the JavaScript code when debugging and do not have to deal with server-side code. Additionally, most JavaScript frameworks have tools for debugging. Also, as mentioned earlier, transitioning to mobile apps is very simple.

However, single page applications can also reach their limits. Particularly in the area of search engine optimisation, web applications that are based solely on a single web page achieve poorer results. This is because it is much more difficult for search engines to crawl JavaScript code. Furthermore, the creation of single page applications is only worthwhile if really dynamic content is to be displayed. Single page applications are much more expensive to create than static websites.

There are several frameworks that can be used to implement a single page application. They are, so to speak, the equivalent of various static page generators when developing static websites. JavaScript frameworks make it easier for developers to program dynamic single page applications by providing pre-programmed content. Debugging is also made easier by using frameworks. The most popular frameworks used for web development with JavaScript are React, Angular, and Vue.

React

React is a JavaScript web framework originally launched by Facebook. The framework has been available as open source since 2013. React provides a JavaScript library that makes it possible to create both interactive user interfaces and reusable software components. However, since React is not a complete frontend framework, it is not possible to create fully-fledged and functional single page applications with this tool alone.

Angular

Angular is a JavaScript framework from Google. The open-source framework, which was released in 2016, not only focuses on the development of single page applications, but also on cross-platform development. Not least because of this, the framework is designed to be platform independent. In addition to JavaScript, Angular also supports the TypeScript programming language developed by Microsoft, meaning that advanced programming concepts can also be realised. Due to its scope and complexity, the framework is particularly suitable for large companies.

Vue

Vue has set itself the goal of combining the advantages of the two frameworks Angular and React. The second version of the client-side open source framework, which was released in 2016, is considered very easy to get started with, not least because of its compatibility with other frameworks for single page applications. Only knowledge of HTML and JavaScript is required. In addition, the framework is very small with less than 100 KB required memory. Vue can also be combined with various libraries, giving developers a lot of flexibility.

Using version control systems like GitHub offers a number of advantages. In particular, they facilitate the work for the development team as well as make it easier to manage different code versions. A single page application’s code can be easily deployed to a GitHub repository. Once you’ve committed your code to GitHub, it’s easy to use a server to run realistic live tests during the development process.

In just a few steps you can deploy your web project to Deploy Now from IONOS.

1. First, connect your GitHub account to IONOS Deploy Now.
2. Next, start a new project.
3. Import the GitHub repository where your single page application is located.
4. Now you can keep track of changes to your site live via the IONOS Deploy Now preview URL.