What is a Single Page Application (SPA)

What is a Single Page Application (SPA)

You see Single Page Applications everywhere. All the big names like Google, Facebook, Twitter, GitHub etc. use this technique to reach out to their users.

SPA could be either a web application or a web page, and it helps you to create dynamic and user-friendly pages to help provide uninterrupted access to users. The biggest advantage of this format is that it is much faster than traditional web pages, so the user doesn’t have to wait for ages to download the page. Another advantage is that the pages do not have to reload during usage. This is done by executing the logic right in the web browser and not on the server.

Once the user downloads the initial page, the entire HTML isn’t sent back and forth, only the data is sent, and this saves on bandwidth. This is possible with advanced Javascript frameworks like Angular, Knockout, Meteor and Ember.

Advantages

1. Speed and responsive

Your users no longer needs to wait for the page to download. Once the HTML, CSS+ scripts are all downloaded, the user doesn’t have to download them again. Only the new data will have to be downloaded when the user asks for it.

2. Reuse the same backend code

Programmers can use the same backed code of a web based app to develop a mobile app. This is because SPA has all the likeliness of an app and looks even less like a website. You don’t have to do anything specially to adapt the design or functionality for mobile devices.

3. It’s quite simple, and there is no need of a server

The development is a streamlined and simple process, and you don’t have to write codes or render pages on the server. You can work on the development process of the page without using servers too.

4. Can work offline too

Thanks to the offline support and caching capabilities all the data will be stored, so there is no need to use the internet all the time. All the data will be cached to the local storage and when there is a request to the server, it will be dispatched. So even when the device loses internet connection, the app can retrieve the data.

5. Ability to streamline testing during web app development

It is possible to separate data and User Interface in the Single Page Application format. And this helps in streamlining the testing process once you’ve completed the development process. This separation also makes it easy to manage integrations in the future. And all this is done without serious repercussions to the interface.

Few issues to combat when you make webpages and apps with this format

1. Requirement of Javascript

To make the pages load, the developer uses JS, so if the user disables this in his page, he wouldn’t be able to properly load or navigate the app. However, developers can come around this issue if they render the page on the server. But that takes a lot of effort and time with HTML and CSS.

2. Memory leaks

Loss of available computer memory is known as memory leak. In the case of SPA, this can happen due to event listeners and event handlers (receiving event notifications like mouse click or keystroke from an event source). However, in certain cases, the events could be unbound incorrectly. The event handler stays in the memory even if you don’t have to execute it.

You will have to remove this manually, using RequireJS or by closing the events or through module loading. The browser doesn’t remove the event handler on its own.

3. Security issues

Creating a single page format could be a little vulnerable because there are hackers who insert their own client side code, and make you run malicious script. This happens due to Cross scripting (XSS) attacks. However, the good news is that you can combat the issue by securing the data endpoints. If you don’t want other people to access all of the codes, you can divide the downloadable JS into different compartments.

4. Scalability problem

It is not possible to call pages made in this format as scalable. If it was a traditional page, you can add content, split it across new pages, but in this case, you would find it difficult. And you cannot add too many features as download time could be affected. However, you can use new Javascript frameworks like Ember, Backbone and Angular to make scalable applications.

5. Presenting the content

It is a challenge to present valuable content on a web page following the SPA format. You have tp include short, simple and informative content, but not too much of it as it will put off the visitors. The visitors should be able to navigate the other features within the app, and it should not be obscured by the content. However, you need to spend some time optimising the content so it will be indexed by the search engines.

Examples of such applications

Google Docs

Google Docs use the SPA element to make sure their page remains dynamically active to users. Even if you type something on the Docs page, make changes to it, the main interface remains unchanged. Only the content that you add in the page will be reflected there.

Trello

Trello is perhaps one of the best web apps around using the SPA format. It’s famous for its dynamic and highly interactive interface around a single view. If the user wants add a new task in Trello, then its possible.

Closing Thoughts

While it is trendy to have SPA for your website and app, it is important to consider your objectives before switching to it. The focus should be on user experience and useful features, so if you feel you cannot fulfill those conditions, you might have to go back to MPA or Multiple Page Applications. MPA works in the traditional manner, with several levels of User Interface and the applications themselves are larger.

Single page applications are perfect for companies delivering a single product or a single service. It cannot handle the requirements of complex services. Also remember, back and forward buttons do not function in such a format; your users will literally have to manage with the single page.

Interesting Articles:
Check More About SPA on Wikipedia
Everything You Need To Know About Single Page Application

Pictures: Flickr.com/ karlnorling/ Johannes

The author: Reema Oamkumar is engaged as a thought leader at www.Software-Developer-India.com which is a part of the YUHIRO Group. YUHIRO is a German-Indian enterprise which provides programmers to IT companies, agencies and IT departments.