Single Page Ap­pli­ca­tion

In­ter­ac­tive websites are no longer a rarity today; they are simply part of everyday Internet use. Multi page ap­pli­ca­tions were often used in the past. These consist of many different in­di­vid­ual web pages or HTML documents, but, on the contrary, single page ap­pli­ca­tions consist of only one web page.

A single page ap­pli­ca­tion is a very modern way to create dynamic websites. Nowadays, creating static websites is no longer a problem with the help of static site gen­er­a­tors. However, these websites still require several HTML documents.

Dynamic web ap­pli­ca­tions offer a range of in­ter­ac­tion options. When it comes to single page ap­pli­ca­tions, however, the content of the web ap­pli­ca­tion is loaded only once, because a single page ap­pli­ca­tion consists (as the name suggests) of only one web page. This means that there is only one HTML document, which is con­stant­ly ma­nip­u­lat­ed by in­te­grat­ed JavaScript code during user in­ter­ac­tions, to change the design of the website, for example. Because of this, the website does not need to be con­stant­ly reloaded since it works directly in the browser.

In single page ap­pli­ca­tions, the server provides only the initial web page, con­sist­ing 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 par­tic­u­lar­ly important for single page ap­pli­ca­tions 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 pro­gram­ming language.

During a user in­ter­ac­tion, data in JSON or XML format is loaded in the back­ground and is invisible to the user. These are then au­to­mat­i­cal­ly inserted into the DOM of the loaded web page. In this way, the entire pre­sen­ta­tion logic of the web ap­pli­ca­tion 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 ap­pli­ca­tion 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 cor­re­spond­ing 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 ap­pli­ca­tions is rather low.

A single page ap­pli­ca­tion is par­tic­u­lar­ly 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 fre­quent­ly, short runtimes are par­tic­u­lar­ly important. It therefore makes sense, for example, to program computer games that run in the web browser as single page ap­pli­ca­tions. Web ap­pli­ca­tions that are to be available as apps on mobile devices should ideally be designed as single page ap­pli­ca­tions. This makes it possible to use the same backend for the mobile app and website, which reduces the pro­gram­ming effort.

Probably the most obvious advantage of single page ap­pli­ca­tions is the low response time. Since only data has to be requested from the server and no longer entire web pages, dynamic single page ap­pli­ca­tions load much faster. Not for­get­ting the fact that single page ap­pli­ca­tions require fewer resources than multi page ap­pli­ca­tions. Debugging is also a plus with single page ap­pli­ca­tions. This means that de­vel­op­ers can focus on the JavaScript code when debugging and do not have to deal with server-side code. Ad­di­tion­al­ly, most JavaScript frame­works have tools for debugging. Also, as mentioned earlier, tran­si­tion­ing to mobile apps is very simple.

However, single page ap­pli­ca­tions can also reach their limits. Par­tic­u­lar­ly in the area of search engine op­ti­miza­tion, web ap­pli­ca­tions 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. Fur­ther­more, the creation of single page ap­pli­ca­tions is only worth­while if really dynamic content is to be displayed. Single page ap­pli­ca­tions are much more expensive to create than static websites.

There are several frame­works that can be used to implement a single page ap­pli­ca­tion. They are, so to speak, the equiv­a­lent of various static page gen­er­a­tors when de­vel­op­ing static websites. JavaScript frame­works make it easier for de­vel­op­ers to program dynamic single page ap­pli­ca­tions by providing pre-pro­grammed content. Debugging is also made easier by using frame­works. The most popular frame­works used for web de­vel­op­ment with JavaScript are React, Angular, and Vue.

React

React is a JavaScript web framework orig­i­nal­ly 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 in­ter­ac­tive user in­ter­faces and reusable software com­po­nents. However, since React is not a complete frontend framework, it is not possible to create fully-fledged and func­tion­al single page ap­pli­ca­tions 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 de­vel­op­ment of single page ap­pli­ca­tions, but also on cross-platform de­vel­op­ment. Not least because of this, the framework is designed to be platform in­de­pen­dent. In addition to JavaScript, Angular also supports the Type­Script pro­gram­ming language developed by Microsoft, meaning that advanced pro­gram­ming concepts can also be realized. Due to its scope and com­plex­i­ty, the framework is par­tic­u­lar­ly suitable for large companies.

Vue

Vue has set itself the goal of combining the ad­van­tages of the two frame­works Angular and React. The second version of the client-side open source framework, which was released in 2016, is con­sid­ered very easy to get started with, not least because of its com­pat­i­bil­i­ty with other frame­works for single page ap­pli­ca­tions. 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 de­vel­op­ers a lot of flex­i­bil­i­ty.

Using version control systems like GitHub offers a number of ad­van­tages. In par­tic­u­lar, they fa­cil­i­tate the work for the de­vel­op­ment team as well as make it easier to manage different code versions. A single page ap­pli­ca­tion’s code can be easily deployed to a GitHub repos­i­to­ry. Once you’ve committed your code to GitHub, it’s easy to use a server to run realistic live tests during the de­vel­op­ment 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 repos­i­to­ry where your single page ap­pli­ca­tion is located.
4. Now you can keep track of changes to your site live via the IONOS Deploy Now preview URL.