Javascript and Single Page Applications
The traditional way to build a web application in the past was to follow a multiple page application website structure. The name speaks for itself and for all of us who know at least some basics on how websites work are perfectly familiar with the idea behind it: the apps consist of several different pages which get updated upon request. This means that your browser is reloading the entire page from scratch every time you click and try to access new data or want to reach another part of the website. From the very first days of the World Wide Web, this is the traditional way the technology was used.
Back in 2009, the universal standard expectation for a page load time was considered to be two seconds. However, since then, the user expectation has grown a lot higher surprisingly enough.
As of today, after just 2 second of loading time, users start to notice the delayed response time and separate from the experience. After 10 seconds, users will get distracted and will already be thinking about something else and are likely to leave and forget about your web app.
However, the average page load time for all websites across the Internet right now is 11.8 seconds. Needless to say we’ve got room for improvement. Due to this, we grew a need for a better solution that would eliminate at least some of the weak spots in our applications loading time.
This is where the implementation of single page application architecture comes into play. The main idea behind single page applications is to rewrite a particular spot on the current page using AJAX requests to render only the necessary updates instead of re-loading the entire page. SPA takes a single HTML page. While delivering dynamic updates, it allows interacting with the page without refreshing it. Making use of a single page app you can significantly decrease the server load and enhance loading speed for a better UX.
As with any technological advancement, there are pros and cons to everything. 1 downfall to SPAs is in regard to the browser history. An SPA doesn’t save visitors’ jumps between states. This means that when users click the back button, they won’t go back. A browser only takes users to the previous page, not to the previous state in an app. To solve this problem, there’s an HTML5 History API with which developers can equip their SPA frameworks with. The History API offers developers access to browser navigation history via JavaScript. Essentially what this allows is dynamic changes to the URL without page refreshes. Most client side libraries such as React, Vue or Angular make use of the History API.
Another disadvantage to SPAs is in regard to SEO. SEO stands for search engine optimization. It is the process of getting traffic from the “free,” “organic,” or “natural” search results on search engines using search engine web crawlers or “search bots”. Search bots gather information from across hundreds of billions of webpages and organize it in the search index. Based on a users search query into the browser, these search bots are primarily what make a webpage show up based on the query through scanning data on your webpage. However, it’s hard to optimize SPAs for search engines since most pages can’t be scanned by search bots. It is easier to index and rank a static HTML-based web page.
Due to this. Google recently launched a new scheme to increase single-page app SEO optimization. In 2014, Google announced that their Googlebot will attempt to render JavaScript before it commences crawling. But for this, developers need to make sure that their JavaScript files can be indexed by Google.
In terms of the user experience, According to the Design Value Index, design-driven companies can outperform their competitors by as much as 228%.
“If you think good design is expensive, you should look at the cost of bad design.” — Dr. Ralf Speth CEO, Jaguar Land Rover
In conclusion, single page applications are certainly a big step in the right direction when it comes to website load speed and the user experience and interactivity. Keeping the user engaged is necessary for web application growth.
Sources: