Rise of the Single Page Application

Rise of the Single Page
Application

Piyush Katariya
pkatariya@equalexperts.com
© Equal Experts UK Ltd 2011 www.equalexperts.com 1

The traditional web

• Server
• Accept request - controller
• Execute business logic – model
• Render result object from model – view
• Respond to client– The BIG HTML response
• Client
• Wait for The BIG HTML response
• Manage resources engaged in the referrer page
• Load dependencies - .css, .js, .html etc.
• UI Rendering for whole page
• Registering default and custom event for page


The Smart Client design

• Server
• Accept request - controller
• Execute business logic – model
• Respond to client– result object
• Client
• Keep the initial view display ready
• Render response with local template
• UI Rendering for part of logical view
• Registering default and custom event only for
logical view


The Alternatives


The JavaScript Language

• Supported by all web browsers
• Prototypal inheritance
• Supports OOP out of the box
• functional
• Loosely typed, interpreted
• Everything is object, just make it var
• Objects are nothing but collection of key value
pairs


Godfather of JSON says

“ JavaScript is the only language in the world
which has lots of bad parts and good parts and
lots of stuffs which falls in between. But if you
concentrate on only good parts while
development this language has no alternative ! ”
- Douglas Crockford during TechTalk on JS


Good parts - JSON

• Creation
var jsonObject = new Object() ;
var jsonObject = { } ;
var jsonObject = { “awesome” : true };
var jsonObject = Object.create(parentJsonObject);

• Adding properties
jsonObject.propertyName = “value”;
jsonObject[“propertyName”] = “value”;
jsonObject.someFunction = function() { // definition};
jsonObject[“someFunction”] = function() { // definition };


Good parts - functions

• First class objects
• Can be invoked, passed as arg and can be returned
• There is no overloading !
• Definitions
var add = new Function( 'a', 'b', 'return a+b');
var add = function( a, b) { return a+b; } ;
function add(a, b) { return a+b; }
• Blessed with
• this
• arguments


Good parts – function as
a class
function Class() {

var privateMemberVar="I am private member";
var privateMemberFunction= function(){
return "I am private method";
};

this.memberVar = "I am public member";
this.memberFunction = function() {
return "I am public method ";
};
}

var object = new Class();


Good parts - closures
var counterModule = ( function( ) {

var privateCount = 0;

function changeBy(val) {
return privateCount += val;
}

return {
increment : function() {
changeBy(1);
},
decrement : function() {
changeBy(-1);
},
currentValue : function() {
return privateCount;
}
};
} ) ( );


Abstract Browser Engine
Browser

Work Queue

UI Thread DOM

JS Engine Layout Engine

OS

CPU GPU


Enter the SPA

Fragrances and Scents

 jquery – DOM aroma
 require.js – AMD aroma
 Handlebars.js – template aroma
 underscore.js – utility aroma
workshop app url - http://goo.gl/31ho4


Responsive UI – UX

• Resource Loading
• Pre - .css
• Post - .js, iframes, heavy images, flash, adds

• No hard clicks please !
• Flirt with client side templates
• <script> should always be the last child of <body>
• Batch DOM queries by { “type” : [„select‟, „update‟] }
• Have you heard about DocumentFragments?
• Lazy load iframes, avoid them altogether if possible
• Minimize the Reflows and Repaints
• Divide and rule the heavy JavaScript tasks
• Progressive Enhancement and Graceful Degradation


Responsive UI - Application

• Minify the .js
• AMD loaders
• Image Sprites
• Reduce DNS Lookups
• Expires and Cache-Control HTTP Header
• CDN – proximity and bandwidth matters
• gzip it !


If you love our SPA, then do visit again.

Did we missed any fragrances ?


Rise of the Single Page Application

More Related Content

What's hot (20)

Similar to Rise of the Single Page Application (20)

More from Piyush Katariya (8)

Rise of the Single Page Application