Because of this, we have collected all the opinions and created an A-Z guide on single page applications. The one and only article you need to read to learn everything about SPA, its pros, and cons, the development time, and some successful examples of single page applications. Enjoy!
What are single page applications
Single page applications are web applications or websites that, as the name suggests, literally have one page. They connect to the server only once and then just restore and reload the data they received. That is why key elements of the page stay the same, while just a couple of fine details update when the user clicks, scrolls or switches betweens tabs.
Long story short, instead of loading new pages from a server, single page applications rewrite the content on the same one, keeping the main interface untouched.
So what exactly do single page applications look like? Imagine when you browse through your mail app and emails, there will always be elements like the sidebar with folders, a header, and logos that do not change no matter how far you scroll. That is a SPA!
Examples of single page applications
Actually, many companies prefer to start building their solutions from a SPA because of its speed and responsiveness. There are many famous single page applications that we use on a daily basis without even recognizing them. Here are only a few well-known examples.
- Gmail
Yes, Gmail is a single page application. Once you open it, you see a progress bar that means the page is downloading from the server. When it is done, the left and right sidebars and a header stay the same, while you read and write emails.
Gmail, like many other email web apps, is a single page application.
- Google Docs
Actually, many Google services are single page applications as well. Another example is Google Docs. Whether you are typing or switching between tabs, the header with text settings and the left sidebar with headings will remain the same. The app just reloads the last edit times and new comments.
Google Docs is an example of SPA that we all use every day.
- Netflix
Surprise-surprise, but Netflix is a single page application as well despite the amount of content it contains. Just go to your account, try to scroll the page down or switch between categories, and you will notice the header with the logo everywhere no matter how far you browse through its content.
Yes, when you watch Netflix, you also use a single page web application.
There are a lot of discussions if Facebook can actually be called a single page app. The truth is that it is partially SPA.
Remember the news feed page?You can scroll, check your friends’ posts, comment on them, and you don’t need to refresh the page to see new posts as it loads data dynamically. As soon as new publications are available they will pop up on the page. Moreover, if you turn your airplane mode on or lose internet connection, downloaded parts, like photos or captions, will still be visible, because they are cached in a browser.
The architecture of Facebook’s news feed uses an SPA idea.
By the way, do you follow us on social media? We share tips and tricks on UI/UX design and MVP development. Check it out!
- Airbnb
The traveling app is another classic example of an SPA that we use on a daily basis. If you go searching for apartments, browse results and open a stay profile, you will notice that the header on the top with the logo, a search bar, and your profile info on the top left will remain untouched the entire time.
Even when we choose a flat on Airbnb, we also use a single page application.
Pros of single page web applications
Why do all these major companies prefer single page applications for their solutions? Here is a short overview of the benefits of an SPA.
- Quick and responsive.
- Reusability of the code.
- Enhanced User Experience.
Let’s dive deeper into the list and break down each of the six main advantages of SPAs!
1. Speed and responsiveness. The best and brightest advantage of single page applications is the load time. As we mentioned, SPAs have no need to entirely reload the page while being used. Instead, they establish the initial connection with the server once, and then just download individual components when it is necessary.
Load time matters a lot because as page load time goes from 1 second to 3 seconds, users are 32% more likely to leave an app according to Google. Another similar research showed that every 0.1 second of load delay costs Amazon 1% of sales, which is billions of USD, while for Google Search, an extra 0.5 seconds in search page generation time reduced traffic by 20%.
So for single page applications, it takes less time to load, and the absence of delays pays dividends leading to an increase in customer satisfaction and retention.
2. Reusability of the code. Another benefit of single page applications is that it is possible to quickly develop a large-scale application based on it. Thus, if you decide to expand your web solution in the future and turn it into a mobile application, part of the backend code could be reused instead of having to rework it from the ground up.
3. Enhanced UX. Such apps are linear and, therefore, more understandable from a user’s point of view. Also, since it is a single page, it is much easier to create a robust and responsive interface to engage users.
Cons of single page web applications
We are not going to lie: single page applications do have some cons as well. Here are five of the key disadvantages:
- Not SEO-friendly.
- Longer initial load times
- Back buttons are a little hassle.
- Security issues.
1. SEO. Single page applications are not particularly SEO-friendly. When it comes to content optimization, it is difficult to put all SEO keys on one page and is impossible to create different optimized URLs.
However, the website ranking problem can be solved with Server Side Rendering.
SSR (Server Side Rendering) is a way of rendering a single page application on the server side, when an already rendered page is sent to the user’s browser.
The solution will remain a single-page application, and the main load will be put on the server. During the first download, the application will receive a ready-made page from the server with the necessary SEO elements.
Important to know: if you decide to implement this technology, the cost of SPA development can increase.
2. Initial load speed. When a user uses an app for the first time, it might seem a bit long to download the page from the server. But once it is done, all other content takes less time. This is more of a trade-off rather than a disadvantage as a whole.
However, if the SPA architecture was built by professionals, then users will not face all these problems. Since they initially will download only the necessary components, instead of the whole app, then the solution will simply reload individual components on-the-go.
3. Back buttons. As it is only one page, when a user hits a back button, the browser will take them to a previously open website, rather than taking them one step back within an app. Obviously, it can influence a user’s experience with your app.
Is it possible to solve the problem of back buttons at the development stage? We will answer this in one word: ‘routing.’
Page routing is an important feature for the smooth navigation in a single page application. It allows you to configure routing within the application so that the user can travel through the history of one tab without reloading the entire page.
4. Lack of security. Single page web applications can be more vulnerable to cross-site scripting (XSS) software attacks. With XSS, hackers can insert client-side code to the page and deliver the malicious scripts to users’ browsers.
However, this problem can be solved by securing data endpoints, so developers should be extra careful with the data security on the initial page.
Why is SPA a trend in 2021?
Even before 2021, it was clear that speed equals income. Research has shown that more than half of all web traffic came from mobile devices, but conversions were lower on mobile devices than on desktops.
With the outbreak of the pandemic, users began to spend more time on the Internet: they browse social networks, order food delivery and chat on Zoom. Therefore, the requirements for speed and UX have also evolved: users expect pages to load quickly, and they can buy and reach what they want in a couple of clicks.
Statistics show that page load time is directly related to the bounce rate, when users leave without a purchase. For example, if the download time increases from 1 to 5 seconds, then the bounce rate increases by 90%. And if from 1 to 10 seconds, then the chances of losing a client increase by 123%.
Single page applications are a handy solution for MVP development in 2021. It allows you to create a simple and responsive interface that will load quickly without having to spend millions and years developing a solution.
When should you choose a single page application
Single page applications have both advantages and disadvantages, so your choice of the way of the MVP development should be based on your personal goals and metrics. Before deciding to build an SPA, we recommend determining how it will suit the business needs of your startup.
So what types of companies need to build a single page application? Here is our selection of reasons:
-
- Startups that need a dynamic platform and small data volume. SPAs are often used for Software-as-a-Service (SaaS) platforms, social networks, storytelling websites, and closed communities. For example, for solutions like Google Apps, Netflix, Trello or Slack.
- Startups for which SEO is not a key metric. SEO for single page applications might be tricky. But if indexing and ranking by search engines is not exactly what you need for the success of your idea, then SPA is a good option for your startup.
- Startups with big plans. In the future a single page application can be easily turned into a mobile application and parts of the code can be reused to cut costs and times of the scale-up.
- Startups that have their own API to build an app on. If you have a ready-to-use API (application programming interface), you can build a single page application around it.
- Startups with the focus on the client-side functionality. Single page applications contain a generous, user-oriented interface to catch the attention and make users not only stay on your web app but also make actions and interact with the solution. If you are seeking ways to grab users’ attention, SPA is a perfect architecture type for your app.
To wrap things up
Today single page applications are everywhere and we take advantage of them every day without noticing. Globally known major players such as Google, Netflix, Facebook, and Airbnb use SPAs in their practice.
Why do major services choose single page applications? Because SPAs perform fast without making users wait, and help to create a flexible and interactive interface for the solution.
To start
When you choose an approach for your application, ask yourself:
- What your website will look like
- How much content you will be posting
- How will users interact with the content on your page
- What benefits users will get from the content on your web page
Single page applications work the best for SaaS platforms, social networks, landing pages storytelling websites and closed communities.
What’s next?
SPAs are not for all types of services and products, but they certainly can be a perfect solution for those who want a dynamic and fast platform with small amounts of data.
If you decide to start executing your idea and developing single page applications for your startup, check out our guide to learn where to find a developer for your solution and what step to take next.
At Purrweb, we help build an MVP in 3 months to validate the idea and get feedback from real users on the market. We work with different types of architecture, including single page applications, with a focus on cutting-edge UI/UX design.
Want to know more about how your startup will benefit from a single application page? Fill in this quote and get a word from our experts.
[wpim]
