Awwwards Nominee Awwwards Nominee

Single Page Application: A Practical Website Building Choice

by : deepak-chauhan Category : UX/UI,Web Development Date :

The difference between standard websites and SPAs is like the difference between paper books and electronic books. With the latter you get to scroll, just use your thumb to scroll up and down if you’re using a smartphone, to view and read pages, all on the same page, just the same page but different view, but with former, you have to go through the process of holding and turning every page to view and the read the next one. Electronic books are definitely more practical, but not when you don’t have an electronic device to read them on, or no electricity to charge it with. Keeping that example in mind, we’re going to go through the advantages, disadvantages of SPAs and the main points you need to consider before choosing to build a Single Page Application.

Advantages

In an electronic age where you can purchase a flight ticket or buy a one million dollar mansion with a click of thumb, speed and practicality are hugely important. SPA is excellent at both. It helps the user avoiding the time consuming process of clicking and waiting for pages to load, which is the equivalent of holding and turning the page when reading a book or a newspaper, however, unfortunately, it’s not as mechanically simple as that. While holding and turning a newspaper or book page has virtually no variables included but you’re obviously capable hand and a light as feather paper, the loading process of a new webpage depends on far too many variables, and in most cases the most significant variables are out of our hands, like, for example, the speed of the internet.

In some developing countries the browsing speed could be as low as five or seven KB per second. SPAs is a life hack to problems like that because mainly what a SPA does is making all information on a website available with just the scroll or the click of a thumb and without having to go through the process of clicking and waiting. It also renders the visual contents of any website far easier to follow because the user can simply see almost everything in front of them. As compact as it is, it also renders online surfing faster to load. What basically happens with an SPA is that you only load it once and you don’t have to wait any longer, so instead of the dull process of clicking and waiting every time you want to view a certain page on a specific website, you only have to wait once at the beginning and voila, no more waiting required.

Also given that the majority of internet users nowadays use mobile devices and tablets to view online websites, SPA finds itself again as the ideal candidate to build a website. It’s responsive nature and ability to change scale and redraw itself based on the user’s device dimensions makes a far more flexible option when compared to standard websites. Being a single page already, what it simply is adjusting its web content once and that’s all, it doesn’t have to re-adjust every time the user opens another link on the website, which again boosts the speed of the surfing experience.

Also in SPAs you can bypass some of the tedious coding procedures that you had to go through while building standard websites. For example, you no longer have to worry about capturing the user’s location to provide the correct time zone because JavaScript can handle this.

The most extreme and unique advantage of SPAs is that, in some cases, you can actually view the website offline. We mentioned earlier that the entire idea of an SPA is that the website loads only once, which means that if you’re a user and you loaded the website only once, go offline, and keep on browsing without losing any of the date, just like you’re browsing online, which corps away any unnecessary or unwanted data usage in case you’re using a mobile and depending on your provider’s third or fourth generation network to surf the web.

Disadvantages

Like mentioned earlier, as practical as they are, electronic books are definitely useless if you don’t have an electronic device or a program that allows you to view the electronic book on your electronic device. The primarily disadvantage of SPAs is that they’re dependent on JavaScript. If the user doesn’t have JavaScript enabled on their browser SPAs will be useless. Even though nowadays almost every browser comes with JavaScript enabled, it is still a shortcoming for those who are using older browser versions.

Another problem SPA users might face is the single point entry. Unlike standard websites, SPA loads only one page with one URL. If you’re browsing both, an SPA version and a standard version, of the same website, if you click to view any content on the website in its standard version, a new URL will be generated that you can copy and paste to send to a friend, however this is not the case with a SPA based website. Since it loads only one URL so any clicks made will not be reflected in your address bar, thus no matter what you do, that URL you’ll be sending your friend will always lead to the same page. Lately though, websites like Gmail solved this problem by adding hashtags to the URL for identification purpose.

What to Consider before Choosing SPA

There are many points to consider before choosing to build a single page application.

Firstly you will need to consider whether you have the skill to fully build an efficiently working SPA or not, if not then you can pick up the skills from the various open resources online.

Secondly, how big is the content that you’ll website will be showing? You don’t want the website’s users to keep on scrolling forever and you don’t want your single page application to take forever loading as well, even if it loads only once.

Thirdly, security is an important aspect. Before starting you should make sure that you have all security aspects mapped and ready for implementation.

Lastly, you need a really good graphic designer to give your SPA the look it needs.

Conclusion

If you want to build a light, easy to surf and neat website, go for a single page application.

Deepak Chauhan About Deepak Chauhan I am a technology strategist at VOCSO with 20 years of experience in full-stack development. Specializing in Python, the MERN stack, Node.js, and Next.js, I architect scalable, high-performance applications and custom solutions. I excel at transforming ideas into innovative digital products that drive business success.


Further Reading...

We use cookies to give you the best online experience. By using our website you agree to use of cookies in accordance with VOCSO cookie policy. I Accept Cookies