<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\758211560\46blogName\75Tech+Tips,+Tricks+%26+Trivia\46publishMode\75PUBLISH_MODE_BLOGSPOT\46navbarType\75BLUE\46layoutType\75CLASSIC\46searchRoot\75http://mvark.blogspot.com/search\46blogLocale\75en\46v\0752\46homepageUrl\75http://mvark.blogspot.com/\46vt\75-5147029996388199615', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

Tech Tips, Tricks & Trivia

by 'Anil' Radhakrishna
A seasoned developer's little discoveries and annotated bookmarks.

Search from over a hundred HOW TO articles, Tips and Tricks


Pros and Cons of Single Page Applications (SPAs)

A SPA is a web app contained in a single page – where ‘pages’ are nothing but DIVs being shown/hidden based on the state of the app and user navigation.

Single Page Applications heavily use client side scripting to provide rich functionality to the end user.

Gmail is probably the first well known SPA implementation which has been around since 2004.

ASP.NET MVC 4 provides a basic framework for building SPA applications.

Pros:
The big reasons to do SPA are the 3 R's: Reach, Responsive UX and Reducing roundtrip postbacks.

Cons:

  1. Navigation – SPA’s by nature break the normal navigation mechanism of the browser. Normally, you click a link, it launches off a request and would update the url on the address bar. The response is then fetched and painted. In an SPA however, a link click is trapped in JS and the state is changed and you show a different div (with a background AJAX request being launched).
  2. This breaks Back/Forward navigation and since the URL doesn’t change, bookmark-ability is also broken to boot.
  3. SEO – SEO also breaks because links are associated with JavaScript and most bots cannot follow such links.

A SPA is not a good fit where SEO is important but it can be used for a banking app or an app that shows personalized info where SEO is not required.

Labels:

Tweet this | Google+ it | Share on FB

« Home | Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »

»

Post a Comment