Rise of the Single Page                                    Application  Piyush Katariya  pkatariya@equalexperts.com© Equal...
The traditional web        • Server                     • Accept request - controller                     • Execute busine...
The Smart Client design        • Server             • Accept request - controller             • Execute business logic – m...
The Alternatives© Equal Experts UK Ltd 2011        www.equalexperts.com   4
The JavaScript Language        • Supported by all web browsers        • Prototypal inheritance        • Supports OOP out o...
Godfather of JSON says        “ JavaScript is the only language in the world          which has lots of bad parts and good...
Good parts - JSON        • Creation                     var jsonObject = new Object() ;                     var jsonObject...
Good parts - functions        •     First class objects        •     Can be invoked, passed as arg and can be returned    ...
Good parts – function as                                 a class           function Class() {                   var privat...
Good parts - closures                 var counterModule = ( function( ) {                          var privateCount = 0;  ...
Abstract Browser Engine                                          Browser                                          Work Que...
Enter the SPA        Fragrances and Scents         jquery – DOM aroma         require.js – AMD aroma         Handlebars...
Responsive UI – UX        • Resource Loading                     •        Pre - .css                     •        Post - ....
Responsive UI - Application        • Minify the .js        • AMD loaders        • Image Sprites        • Reduce DNS Lookup...
If you love our SPA, then do visit again.        Did we missed any fragrances ?© Equal Experts UK Ltd 2011   www.equalexpe...
© Equal Experts UK Ltd 2011   www.equalexperts.com   16
Upcoming SlideShare
Loading in …5
×

Rise of the Single Page Application

827 views

Published on

1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
827
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
13
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Rise of the Single Page Application

  1. 1. Rise of the Single Page Application Piyush Katariya pkatariya@equalexperts.com© Equal Experts UK Ltd 2011 www.equalexperts.com 1
  2. 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. 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
  4. 4. The Alternatives© Equal Experts UK Ltd 2011 www.equalexperts.com 4
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. If you love our SPA, then do visit again. Did we missed any fragrances ?© Equal Experts UK Ltd 2011 www.equalexperts.com 15
  16. 16. © Equal Experts UK Ltd 2011 www.equalexperts.com 16

×