What is a single page application?

Modern web applications are also called single page applications. What does it mean?

In the past, when the functionality of the browser was far less than it is today, and JavaScript performance was poor, every page came from the server. Every time you click on something, a new request is made to the server, and the browser then loads a new page.

Only highly innovative products can play different roles and try new methods.

Today, applications that are popular in modern front-end JavaScript frameworks such as React are usually built as single-page applications: you only need to load the application code (CSS,JavaScript) Once, when you interact with an application, it usually happens that JavaScript intercepts browser events, instead of making a new request to the server, and then the server returning a new document, but the client requests some JSON or performs operations on the server But the page that the user sees will never be completely erased, and its behavior is more like a desktop application.

Single-page applications are built into JavaScript (or at least compiled into JavaScript) and can work in the browser.

The technology is always the same, but the principles and some key components of the application are different.

Single page application example

Some famous examples:

  • mailbox
  • Google Map
  • Facebook
  • Twitter
  • Google Drive

Advantages and disadvantages of SPA

SPA feels much faster for users, because you can now get feedback immediately without having to wait for the communication between the client and server to happen, and without having to wait for the browser to re-render the page. This is the responsibility of the app manufacturer, but you can have transitions and fine-tuners and any type of UX improvements that are definitely better than traditional workflows.

In addition to making the user experience faster, the server will also consume fewer resources because you can focus on providing an effective API instead of building the layout on the server side.

If you are also building mobile applications based on APIs, then this would be ideal because you can completely reuse existing server-side code.

Single-page applications are easily converted to progressive web applications, allowing you to provide an offline experience with local caching and support services (if users need to be online, better error messages can be provided).

When SEO (Search Engine Optimization) is not needed, SPA is best used. For example, for applications that work after logging in.

Although search engines are improving every day, it is still difficult to index sites built using SPA methods instead of traditional server rendering pages. This is the case with blogs. If you rely on search engines, you can’t create a part of the application even without a server, and you don’t have to worry about creating a single page application.

When writing an SPA, you will write a lot of JavaScript. Since the application can run for a long time, you will need to pay more attention to possible memory leaks-if in the past the life cycle of your page was measured in minutes, now the SPA may stay open for hours . Time and whether there are any memory issues, this will increase the memory usage of the browser even more, and if you don’t pay attention, it will cause an unpleasantly slow experience.

SPA is very useful when working in a team. Back-end developers can only focus on APIs, and front-end developers can focus on using the built-in APIs in the back-end to create the best user experience.

The disadvantage is that single-page applications rely heavily on JavaScript. This may make applications running on low-power devices have a poorer experience in terms of speed. In addition, some of your visitors may simply have JavaScript disabled, and you also need to consider the accessibility of the content you build.

Overlay navigation

Since you got rid of the default browser navigation, you must manage the URL manually.

This part of the application is called the router. Some frameworks are ready for you (e.g. Ember), others need libraries that can do this work (e.g.Reaction router).

What's the problem? Initially, this was a follow-up idea for developers to build single-page applications. This leads to the common "back button" problem: when navigating within the application, the URL remains the same (due to the browser default navigation is hijacked), and then press the back button, this is a common operation performed by the user, you can go to the previous One screen may go to a website you have visited a long time ago.

Can be used nowHistory APIProvided by the browser, but most of the time you will use a library that uses the API internally, such asReaction router.

Download mine for freeJavaScript beginner's manual


More js tutorials: