Single page applications. Are they a good choice for your project?

Article header
Article header

Open any app on your smartphone. Go through several screens. Have you noticed how smooth the experience is? There are no page reloads. The app responds instantly.

Have you ever thought about how cool it would be to enjoy this same flow when browsing the web? You can do exactly that by building single page applications, or SPAs, instead of traditional multi page websites (MPAs).

What is a single page application?

As you could probably guess, an SPA is a website or app that contains all its content within a single page. Clicking on certain buttons, tabs or links doesn’t force the page to reload. Only the requested content is changed.

In contrast, multi-page websites typically load completely new pages in response to user actions. As a result, the user is forced to wait for the page to load, even if most of the page’s content remains the same.

Replacing pages with states

In MPAs, users switch between separate pages to access the content they are looking for. But in SPAs, users are taken to different states of a single page.

Clicking a link or button in an SPA won’t reload the page. The browser only displays a certain state of the page, and when prompted, only the requested content is changed. The rest remains the same.

This feature is possible due to AJAX, which enables the client to communicate with the server without reloading the page. We’ll go deeper into how SPAs work a bit later in this article.

Reasons to choose an SPA for your project

If you are planning to build a website, you’ve most likely thought about the classic solution – a multi-page application. This technology is well-established, and it doesn’t take a whole lot of effort to find the executors for this project. Moreover, users are used to encountering multi-pagers (and the delay they can cause) in their browsers.

But there are several reasons for you to opt for the less common single page applications.

High response speed of the app

A single page application typically takes a bit longer to initially load than a multi-page one. The reason is simple. During the initial launch the entire website’s HTML, CSS and JavaScript files are downloaded and the page is rendered in the browser. After the first launch, though, every following action in the app runs smoother and is almost instantaneous.

Traditional websites request HTML files from the server to render new pages in the browser. But an SPA doesn’t need to request any HTML file, since everything has already been downloaded. As a result, only the actual data is sent to the app through the internet. This means a faster app response speed.

A natural flow contributes to user-experience

Because the app doesn’t have to request HTML for every interaction, it doesn’t need to render the page in the browser from scratch. The HTML layout is already loaded, so the only thing that needs to change is the content requested from the server.

This takes less time and feels more natural for the user.

Low network requirements

Users in countries with poor or expensive internet connections will certainly appreciate it if you opt for a single page website. Even with poor internet quality, an app like this loads in seconds. Because it only uses the network to obtain particular server information instead of requesting an entire page reload, the SPA is a perfect solution for countries with the slow or expensive internet.

You should strongly consider SPA development if:

  • You target countries in South Asia, South America, and Oceania, where internet connection is generally very poor and expensive;
  • You target a market within the USA where the internet connection is slow due to a monopoly or outdated infrastructure;
  • You target countries with very expensive 3G/4G connections. These include developed countries in North America (including the USA and Canada), the rich countries of the middle East (Qatar, United Arab Emirates, Kuwait, etc.), and several poor African countries.

Of course, single page applications are not faultless. You should weigh their several disadvantages before deciding to build an SPA. To help, we have prepared an article to make you aware of all possible single page applications issues. Of course, we’ve also included efficient solutions to these problems. Don’t miss it!

Which projects are SPAs good for? - Any!

Well, not literally. It’s probably pretty obvious that an e-commerce website or a marketplace will never fit a single page. Their main features rely on their multi-page design.

But SPA technology can provide nearly endless possibilities. Just take a look at the variety of web apps you are almost certainly using every day. You may not have even realized they are built as single page applications!

Gmail

Google’s free email service fits within a single page. When you browse through your inbox or drafts, when you compose a new letter, read a recent email, even chat with someone in hangouts…you never leave the initial page. See for yourself next time you check your email. You never have to wait for the app to reload the page.

Google Maps

Google’s legendary maps application is also single page. While it can take some time to load the first time, after that, it responds instantly. The page never reloads, even if you request an optimal root for two cities on opposite sides of the globe. Even so, every page state can be shared via a deep link, a feature users definitely appreciate. The back button even returns you to the location you previously viewed.

Facebook

Even good old Facebook is a partially single page app. Remember the news feed? You can scroll through it forever, and it continuously requests the next several posts from the server, all without reloading the page. Chat, checking your list of friends online, and viewing recent notifications can all be done from a single page. Facebook’s newsfeed offers a smooth user experience.

Often, websites combine SPAs and MPAs. You can, for example, choose to build an SPA describing your company and its services, but then add an extra page with a corporate blog promoting your company’s expertise.

Technologies required to build an SPA

Like every functioning website, a single page application has both a frontend and backend. On the frontend, it uses HTML and CSS to make it look good and JavaScript to make it work good.

JavaScript frontend frameworks

It’s important to choose a reliable JavaScript framework. This choice can make or break your application. Almost every JS framework can be used to build a good SPA, but most developers opt for Angular, React.js or Vue.js.

Our comparison of the most popular JavaScript frameworks will help you to make the right choice based on your particular case.

AJAX

AJAX, or Asynchronous JavaScript And XML, is a technology that enables exchanging data with the server “behind the scenes”. This means the user doesn’t notice any reloads – only requested content is changed. The page, as a whole, remains untouched. AJAX is the central technology behind every single page app.

Backend frameworks

Developing a single page app’s backend isn’t any different from building the server-side for any other type of web application. Most consider JavaScript-based technologies Node.js, Meteor.js, and Express.js the best solutions for backend development. They are reliable and work perfectly with the front-end JS. Moreover, in most cases, you can opt to hire a full-stack developer to construct both backend and frontend, allowing you to reduce single page app development time and cost. A PHP-oriented programmer can choose Laravel, Symfony or Yii. Looking for up and coming technologies? Consider using Go.

Our overview of the best backend frameworks will help you make the right choice, regardless of the type of application you plan to build.

Database

Since you’re going to store data in your backend to display to users later, your SPA will require a database. Our developers usually select MySQL and MongoDB. Which is better for your project? This article comparing the databases will help you consider their respective advantages and drawbacks.

Libraries for deep linking

If you need to share links to certain page states, you will have to use specific libraries. SWFAddress and JQuery plugin History are two possible options.

Conclusion

Single page applications are one of this year’s main trends in web development. They are fast and extremely user-friendly. And, moreover, their natural feel and browsing aren’t as affected by connection quality and speed.

Even so, SPAs are consistently described as a technology plagued by disadvantages, but the right approach to possible SPA issues can transform this technology into a perfect web presence for almost every business.

Without a doubt, the single page app is a technology of the future. And we are ready to be your personal guide to this future. Please feel free to reach out to us if you have any questions concerning single page apps or want to learn more about how this technology can fit your business needs.

Liked this article? Sign up to be notified of new blog posts.

You might also like

Web Development Trends in 2018

Progressive Web Apps - The New Word In User Engagement

Frontend frameworks showdown: Angular vs. React vs. Vue

Web development trends are changing rapidly. Yesterday the multi-page websites were popular, today the trend for simplicity brought single-page apps back on the top. Read about other tendencies in web development for 2018.
Asking yourself, what alternatives does the expensive native mobile development have? Doubts aside, try the progressive web apps. They are a combination of fast and cheap web development with traditional app-like features. Find out more!
Starting a new project you definitely have to face the hard choice of the technologies it will be based on. This comparison of three most powerful front end frameworks will help you making the right choice according to your real needs, and not just current trends. Check it out!

Web Development Trends in 2018

Web development trends are changing rapidly. Yesterday the multi-page websites were popular, today the trend for simplicity brought single-page apps back on the top. Read about other tendencies in web development for 2018.

Progressive Web Apps - The New Word In User Engagement

Asking yourself, what alternatives does the expensive native mobile development have? Doubts aside, try the progressive web apps. They are a combination of fast and cheap web development with traditional app-like features. Find out more!

Frontend frameworks showdown: Angular vs. React vs. Vue

Starting a new project you definitely have to face the hard choice of the technologies it will be based on. This comparison of three most powerful front end frameworks will help you making the right choice according to your real needs, and not just current trends. Check it out!