But I don’t wanna use a framework!

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.

Continue reading “But I don’t wanna use a framework!”

Enhancing Single Page Apps for Search Engine Optimization

We have discussed a lot about Single Page Application (SPA) including its few downsides especially its unfriendly search engine design. It is important for single page websites to be searchable by search engine sites if we want more people to deploy SPA and increase its popularity. Some users out there feel because SPA is not search friendly then all of its benefits are unworthy, and that traditional websites are way better than single page sites. Well, SPA can be optimized to be SEO-friendly if developers  use more effective techniques to develop it. Single page sites are not search friendly because of their pagination structure; also, because they use JavaScript, unfortunately, search engines do not execute JavaScript. Recently, search engine site like Google has recognized the importance of single page sites and created a mechanism for them to not only have their pages indexed, but also optimize their pages specifically for crawlers making SPA even more SEO-friendly than traditional websites (Mikowski, 2013). It is necessary to mention that Google does this with certain restrictions.

Continue reading “Enhancing Single Page Apps for Search Engine Optimization”

How do we track SPAs?

How do we track Single Page Applications?

Analytics can be problematic for Single Page Applications because SPA’s load new page content rather than full page loads. This means that the analytics JavaScript code runs once assuming that the user is still on the same page but SPA is actually loading multiple page views.

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.

Continue reading “How do we track SPAs?”

SPA – Industry Trends… “Is this right for businesses?”

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.

Continue reading “SPA – Industry Trends… “Is this right for businesses?””

Single Page Demo

Single Page Application (SPA) Demo Site

~ Carol

In this blog post, we will demo a simple Single Page Application (SPA) website. The demo site uses HTML, CSS and JQuery/JavaScript code. It’s a 3 step process.

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.

Continue reading “Single Page Demo”

Who is using SPA anyway?

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.

Continue reading “Who is using SPA anyway?”

Comparing Single Page Application (SPA) to Multi Page Application (MPA)

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.

The problem of the full page refreshing every time the server needs to render a new page in the web browser is improved using AJAX. This allows for refreshing part of the page and not the whole page which creates an improved user experience but the shortcoming is the complexity added upon the page. The complexity setback is corrected by the advent of SPA, the concept is the integration of MPA and AJAX design pattern (Shimanovsky, 2015). This is made to work better than the previous model by separating data from the presentation of the data through using a model layer that handles data and a view layer that reads from the models. So that, only the shell page (HTML fragments or template) is generated on the server and all User Interface (UI) is rendered by browser JavaScript code. This is made possible by the creation of new advanced Model-View-ViewModel (MVVM) JavaScript frameworks like Angular.js, Knockout.js etc.

We have discussed SPA in our previous posts and with the little introduction of MPA, it will be easier for us to highlight major benefits and drawbacks of SPA as compared to MPA. The first advantage SPA has over MPA is its faster page loading times and less bandwidth usage since routing of data is handled by client-side application after the initial request to the server unlike MPA which continues to route every data via the server. Second, because SPA separates UI and data, and the data sent are raw data without HTML markup, less data are transferred which makes single page websites very responsive but MPA transfers bulky data. Third, since page changes occur via JavaScript using templates and DOM manipulation made possible by the separation of the  presentation and the application logic layers, the full page loads are avoided in SPA unlike MPA where the page has to refresh causing interruption to the user of the page. Fourth, with SPA, there is no need to write code to render pages on the server as it is with MPA.

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).

Reference

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

What exactly is a single page application?

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.

capture

Image courtesy of Overview of Single Page Application (SPA)

Continue reading “What exactly is a single page application?”

The web in a SINGLE PAGE?!

In the new era of modern, interactive web design comes the design methodology for ‘single page applications’ whereby the information is loaded in the initial view and data may or may not be dynamically updated without an actual page refresh or reload. John Papa(2013), a Google Developer Expert and Technology Evangelist for Microsoft, discusses the myths related to the term single page and how the terminology doesn’t accurately reflect what is going on behind the scenes. From the front end, the users sees a single interactive site with faster load and interactivity, even though there may be information being exchanged on the backend via multiple potential methods including JSON, JavaScript, CSS, etc. Internal navigation is achieve via the use of the location hashtag which can improve usability by simulating the typical web page ‘unload/load’ that users are used to seeing.

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.

Papa, J. (2013, November 30). SPA and the Single Page Myth. Retrieved February 09, 2016, from http://www.johnpapa.net/pageinspa/
Categories SPA