• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Rise of the Single Page Application
 

Rise of the Single Page Application

on

  • 768 views

 

Statistics

Views

Total Views
768
Views on SlideShare
768
Embed Views
0

Actions

Likes
0
Downloads
13
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Rise of the Single Page Application Rise of the Single Page Application Presentation Transcript

    • 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© Equal Experts UK Ltd 2011 www.equalexperts.com 2
    • 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
    • The Alternatives© Equal Experts UK Ltd 2011 www.equalexperts.com 4
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • If you love our SPA, then do visit again. Did we missed any fragrances ?© Equal Experts UK Ltd 2011 www.equalexperts.com 15
    • © Equal Experts UK Ltd 2011 www.equalexperts.com 16