View RSS Feed

molendijk

A Single-Page Application without Framework

Rate this Entry
A Single-Page Application is a website that fits on a single page. All necessary code is retrieved with a single page load or dynamically loaded and added to the page as necessary. The page does not reload at any point in the process unless it is manually refreshed. This provides a more fluid user experience.
SPA has been adopted by several javascript frameworks such as AngularJS, Ember.js, Meteor.js and ExtJS. But these frameworks are overkill in regards to what is needed for a SPA to function properly. In fact, we can do without them and create a SPA with only a few lines of code. This dispenses us from learning new things (Angular, Ember etc.) that take a lot of time and aren't needed after all.
In our SPA, the part after the hash symbol in the URL is used to identify a hidden portion of the page whose innerHTML is then inserted into the content area (a div having id="content_area") via a function content_change().
A method for making the content area of our SPA crawlable is provided.
Demo and explanations here.

Submit "A Single-Page Application without Framework" to del.icio.us Submit "A Single-Page Application without Framework" to StumbleUpon Submit "A Single-Page Application without Framework" to Google Submit "A Single-Page Application without Framework" to Digg

Comments

  1. molendijk's Avatar
    I added a SPA-demo where all the 'pages' are retrieved from external files. Insertion is done with the help of a hidden iframe. This is perhaps more elegant than the original demo.