This presentation was part of EXPERTALKS: Feb 2013 conducted at Equal Experts India on 2nd Feb 2013. Visit http://meetup.com/expertalks to know more... ------------------------------------------------------------------------------------- Don’t you get tired of web applications which reload an entire web page every time you send a request to the server? Traditional web applications, which follow the “Thick Server Thin Client” design, pose a lot of hassles, whether it’s their UX or Responsiveness. This presentation demonstrates how we do away with tradition and adopt the “Thin Server Thick Client” design approach to create a faster, more user-friendly Single Page Application. FOCUS AREAS: * Why Server Side MVC frameworks are a pain. * Single Page Application Architecture * Thick client using JavaScript; learning to love JSON objects. * Best practices for building responsive web page. * Considering Backbone.js as a Client Side framework.

1. www.equalexperts.com
Rise of the Single Page
Application
Piyush Katariya
pkatariya@equalexperts.com

2. www.equalexperts.com
Server
• Controller – Accepts request
• Model – Executes business logic
• View – Renders result object from model
• Responds to client with The BIG HTML response
Client
• Waits for the BIG HTML response
• Manages resources engaged in the referrer page
• Loads dependencies – .css, .js, .html etc.
• Renders UI for the whole page
• Registers default and custom events for page
The traditional web

3. www.equalexperts.com
Server
• Controller – Accepts request
• Model – Executes business logic
• Responds to client with the result object
Client
• Keeps the initial view display ready
• Renders response with local template
• Renders UI for part of logical view
• Registers default & custom events only for logical view
The Smart Client design

4. www.equalexperts.com
The Alternatives

5. www.equalexperts.com
• 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
The JavaScript Language

6. www.equalexperts.com
“ 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
Godfather of JSON says

7. www.equalexperts.com
• 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 - JSON

8. www.equalexperts.com
• 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 - functions

9. www.equalexperts.com
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();

10. www.equalexperts.com
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;
}
};
} ) ( );

11. www.equalexperts.com
Abstract Browser Engine
C P U G P U
O S
Layout EngineJS Engine
UI Thread
Browser
DOM
Work Queue

12. www.equalexperts.com
Fragrances and Scents
 jQuery – DOM aroma
 RequireJS – AMD aroma
 Handlebars.js – template aroma
 Underscore.js – utility aroma
workshop app url - http://goo.gl/31ho4
Enter the SPA

13. www.equalexperts.com
• 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 – UX

14. www.equalexperts.com
• Minify the .js
• AMD loaders
• Image Sprites
• Reduce DNS Lookups
• Expires and Cache-Control HTTP Header
• CDN – proximity and bandwidth matters
• gzip it !
Responsive UI - Application

15. www.equalexperts.com
If you love this SPA, do visit again…
Did we miss any fragrances ?