Your SlideShare is downloading. ×
0
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 objec...
www.equalexperts.com
Server
• Controller – Accepts request
• Model – Executes business logic
• Responds to client with the...
www.equalexperts.com
The Alternatives
www.equalexperts.com
• Supported by all web browsers
• Prototypal inheritance
• Supports OOP out of the box
• functional
•...
www.equalexperts.com
“ JavaScript is the only language in the world
which has lots of bad parts and good parts and
lots of...
www.equalexperts.com
• Creation
var jsonObject = new Object() ;
var jsonObject = { } ;
var jsonObject = { “awesome” : true...
www.equalexperts.com
• First class objects
• Can be invoked, passed as arg and can be returned
• There is no overloading !...
www.equalexperts.com
Good parts – function as
a class
function Class() {
var privateMemberVar="I am private member";
var p...
www.equalexperts.com
Good parts - closures
var counterModule = ( function( ) {
var privateCount = 0;
function changeBy(val...
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
...
www.equalexperts.com
• Resource Loading
• Pre - .css
• Post - .js, iframes, heavy images, flash, adds
• No hard clicks ple...
www.equalexperts.com
• Minify the .js
• AMD loaders
• Image Sprites
• Reduce DNS Lookups
• Expires and Cache-Control HTTP ...
www.equalexperts.com
If you love this SPA, do visit again…
Did we miss any fragrances ?
Upcoming SlideShare
Loading in...5
×

EXPERTALKS: Feb 2013 - Rise of the Single Page Application

399

Published on

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.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
399
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. www.equalexperts.com Rise of the Single Page Application Piyush Katariya pkatariya@equalexperts.com
  2. 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. 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. 4. www.equalexperts.com The Alternatives
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. www.equalexperts.com If you love this SPA, do visit again… Did we miss any fragrances ?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×