Weitere ähnliche Inhalte
Ähnlich wie Rise of the Single Page Application
Ähnlich wie Rise of the Single Page Application (20)
Mehr von Piyush Katariya (8)
Rise of the Single Page Application
- 1. Rise of the Single Page
Application
Piyush Katariya
pkatariya@equalexperts.com
© Equal Experts UK Ltd 2011 www.equalexperts.com 1
- 2. 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
© Equal Experts UK Ltd 2011 www.equalexperts.com 2
- 3. 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
© Equal Experts UK Ltd 2011 www.equalexperts.com 3
- 5. 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
© Equal Experts UK Ltd 2011 www.equalexperts.com 5
- 6. 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
© Equal Experts UK Ltd 2011 www.equalexperts.com 6
- 7. 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 };
© Equal Experts UK Ltd 2011 www.equalexperts.com 7
- 8. 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
© Equal Experts UK Ltd 2011 www.equalexperts.com 8
- 9. 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();
© Equal Experts UK Ltd 2011 www.equalexperts.com 9
- 10. 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;
}
};
} ) ( );
© Equal Experts UK Ltd 2011 www.equalexperts.com 10
- 11. Abstract Browser Engine
Browser
Work Queue
UI Thread DOM
JS Engine Layout Engine
OS
CPU GPU
© Equal Experts UK Ltd 2011 www.equalexperts.com 11
- 12. 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
© Equal Experts UK Ltd 2011 www.equalexperts.com 12
- 13. 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
© Equal Experts UK Ltd 2011 www.equalexperts.com 13
- 14. 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 !
© Equal Experts UK Ltd 2011 www.equalexperts.com 14
- 15. If you love our SPA, then do visit again.
Did we missed any fragrances ?
© Equal Experts UK Ltd 2011 www.equalexperts.com 15