EXPERTALKS: Feb 2013 - Rise of the Single Page Application
Upcoming SlideShare
Loading in...5
×
 

EXPERTALKS: Feb 2013 - Rise of the Single Page Application

on

  • 554 views

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...

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.

Statistics

Views

Total Views
554
Views on SlideShare
554
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    EXPERTALKS: Feb 2013 - Rise of the Single Page Application EXPERTALKS: Feb 2013 - Rise of the Single Page Application Presentation Transcript

    • www.equalexperts.com Rise of the Single Page Application Piyush Katariya pkatariya@equalexperts.com
    • 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
    • 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
    • www.equalexperts.com The Alternatives
    • 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
    • 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
    • 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
    • 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
    • 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();
    • 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; } }; } ) ( );
    • www.equalexperts.com Abstract Browser Engine C P U G P U O S Layout EngineJS Engine UI Thread Browser DOM Work Queue
    • 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
    • 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
    • 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
    • www.equalexperts.com If you love this SPA, do visit again… Did we miss any fragrances ?