Bootstrap, jQuery Mobile, AngularJS, Durandal, Backbone, React…So many frameworks, so little time. Each of these has a place and many are used frequently in the construction of modern mobile sites, particularly those that are being developed in a single page architecture. But what if we really want to simplify the page and not use a framework for page routing and navigation at all? There are those in the developer community who would rather hang up their typing fingers than use something pre-built and to them I say…hey, do what you want. In the case you want to try and build it, it can be done with some HTML5 and CSS and a minimum of JS. Actually it’s kind of pretty…read on for more.
How do we track Single Page Applications?
In the blog we discussed the benefits of Single Page Applications. SPA’s can be used as a marketing tool, for quick dissemination of information or as a landing page.
Since analytics is important to track the user activity and what they are interacting with in these pages, we need to know how many people are viewing the single page.
In this blog I will be discussing how to implement analytics on a single page application as stated in the Google Analytics Single Page Application Tracking article.
There are two ways to track a Single Page Application.
One important question that comes to people’s mind about Single Page Application (SPA) is – “are industries deploying this application and is it really right for businesses?”. The answer is Yes and Yes ! SPA is becoming very popular on the internet and used by many industries including healthcare, financial services, manufacturing and public utilities. Companies that deploy SPA model for their website put into consideration the benefits SPA renders and their goals as concerning online marketing. So, if you are considering a website whereby there will be a lot of user input and interaction, faster loading of web application, and client-side processing like calculation, then, using SPA model will be a very good idea. So far, big companies like Google, Facebook, Twitter, and Gmail make use of SPA one way or the other (Temple, 2014). The ability of SPA to run on a single webpage and to provide similar experience to that of using desktop application has contributed to its huge adoption these days. The shift of the web from static to dynamic web with most of the content on the internet being user-generated, coupled with the necessity to develop applications for web, mobile web, and native mobile users have also increased the adoption of SPA.
Single Page Application (SPA) Demo Site
According to King’s article “How to make a Single Page Website” there are three kinds of Single Page websites. The vertical scroll, horizontal scroll and 2D Scroll.
Our team encourages you to download the code and play with it to see if you can create and awesome SPA website. Also, review the resource to get some additional information on how to get started.
Now that we have introduced Single Page Applications (SPA) and discussed a few of the advantages and disadvantages, the question comes up…is anyone actually using this in production on any decent scale? The answer is yes, absolutely! Here are a few examples, some big and some small, with unique attributes that their organization decided were important to include and utilize with this technology. Go beyond the break to see more.
Now that we have discussed what a Single Page Application (SPA) is, it will be necessary to talk about the benefits SPA has over MPA and vice versa , after all, both are the major design patterns that exist for web application development. So, let’s talk about MPA briefly – it seems to me more like the opposite of SPA though. Anyway, in using a MPA web application, for every time a user interacts with a multi page website, the web application sends request to the server and waits for a response from the server. In a nutshell, it is always a server roundtrip to retrieve HTML data that will be viewed by the user. One other major observation of an MPA is that, it consists of pages with mostly static content that require full page refresh, and as stated previously, it involves data transmission between the client and the server as the user navigate from page to page.
Despite SPA’s numerous advantages and the conclusion that it presents a more fluid user experience, more interactive, faster navigation, more efficient network transfers, and more resource intensive on the client-side than MPA, there are still few challenges faced by SPA. Its disadvantages to MPA are that, SPA requires heavy client frameworks to be loaded to the client; its UI code is not compiled, so it’s harder to debug and it is exposed to potential malicious user. Also, is the SEO (Search Engine Optimization) implications; since pages are built in the browser, the search engine crawler will see a different version of the page than that of the user (Shimanovsky, 2015).
Shimanovsky, S. (July, 2015). Multi page web applications vs. single page web applications. Retrieved from: http://www.eikospartners.com/blog/multi-page-web-applications-vs.-single-page-web-applications
Valdarrama, S. L. (October, 2014). Is a Single-Page Application what you really need?. Retrieved from: https://www.shiftedup.com/2014/10/15/is-a-single-page-application-what-you-really-need
Single Page Application (SPA)
Single Page Applications are simply a web site that fits on a single page and the code is dynamically loaded to the page and dynamic communication with the web server. The page does not reload or open in another page and all the navigation and links are accessible on the single page. You can view the other navigational pages on the single page dynamically. These other pages are called ‘Views’. Views are HTML fragments that make up screens or pages.
Image courtesy of Overview of Single Page Application (SPA)
This type of architecture takes advantage of third party framework construction for easy accessibility and development while remaining open-source. It does however have its design challenge for situations where specific software or interactivity requirements have not caught up with modern development methods. A major discussion point in this blog will be the decision if and when to use a single page application and if so, what if any framework to use. We will also discuss the disadvantages that come along with such a design methodology and how they can impact the organization as well as the user.