A Single-Page Application without Framework
by
, 07-05-2016 at 08:26 PM (42731 Views)
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.