Building single page applications
Upcoming SlideShare
Loading in...5
×
 

Building single page applications

on

  • 11,806 views

Learn about Single Page Applications. Learn about various aspects of Single Page Applications, Class Systems, AMD, MVC, MVP, MVVM, Router, MicroTemplates, HTML5, CSS3 Optimization etc ...

Learn about Single Page Applications. Learn about various aspects of Single Page Applications, Class Systems, AMD, MVC, MVP, MVVM, Router, MicroTemplates, HTML5, CSS3 Optimization etc

All the code and video demo of this presentation can be found here - http://rohitghatol.github.com/SinglePageApplication/

Statistics

Views

Total Views
11,806
Views on SlideShare
11,575
Embed Views
231

Actions

Likes
18
Downloads
267
Comments
0

4 Embeds 231

http://rohitghatol.com 226
http://www.linkedin.com 3
https://twitter.com 1
https://www.linkedin.com 1

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

Building single page applications Building single page applications Presentation Transcript

  • Building Single Page Applications By Rohit Ghatol (Director of Engineering @ Synerzip) @TechNext on 21st July 2012
  • Topics• Understanding Single Page Application• Pros and Cons• Typical Architecture• Different Aspects of Single Page Applications• What Frameworks fit where?• Development Life Cycle• Future Developments to Watch out for
  • http://rohitghatol.github.com/SinglePageApplication/
  • http://rohitghatol.github.com/SinglePageApplication/
  • http://rohitghatol.github.com/SinglePageApplication/
  • What are“Single Page Applications”?
  • Characteristics of Single Page Application
  • Characteristics• No Url Change other than #• Back Button works as expected• Book mark able Links• Richer Interaction between UI Components• Ability to go Offline• Single Page is loaded, All UI built by JavaScript• Works with Restful Web Services• More such things…..
  • Pros and Cons
  • Pros and Cons• Faster UI • Bad for SEO• More Interactive • More Complex to built• Can be made Offline • Need JavaScript Skills• UI is just another Client • Diff to choose JS lib• UI can have BI • Post Dev Optimization• Perfect for HTML 5 learning curve is Mobile apps involved
  • Typical Architecture
  • Typical Architecture Single Page ApplicationsModels Views Routers ClassController Templates AMD Presenter Declarative View Model DOM APIs UI Local Web Datastore Sockets StorageLogin APIs CRUD APIs Analytics Notification Restful Web Services Server
  • Different Aspects of SPA
  • JavaScript framework Category MVC MVP MVVM HTML 5 AMD Data Bound Micro Views Template CSS Routers & Optimization History Declarative UI Class System Production DOM Packaging Manipulat Mobile ion Apps
  • ClassSystem
  • Test your JavaScript Skillsfunction foo(){ bar = “hello”;}foo(); Helloalert(bar); Any things without an var is a global variable.
  • Key thing about JavaScriptJavaScript is an Object Oriented Language!But JavaScript does not have any classes!
  • Defining Classes
  • Function Approachfunction Animal(){ this.name="cat"; this.getInfo = function(){ return this.name; } cat cat}var anim = new Animal();alert(anim.name);alert(anim.getInfo());
  • Prototype Approachfunction Animal(){ this.name="cat";}Animal.prototype.getInfo = function(){ return this.name; catcat}var anim = new Animal();alert(anim.name);alert(anim.getInfo());
  • Closure Approachfunction Animal(){ var name="cat"; Private  this.getInfo = function(){ return name; } undefined cat}var anim = new Animal();alert(anim.name);alert(anim.getInfo());
  • Class Systems• Framework define their own Class Systems• Own ways of – Inheritance – Abstractions• Lets see some examples! 
  • Backbone Model DefinitionPerson = Backbone.Model.extend({ initialize: function(){ alert("Welcome to this world"); }});var person = new Person({ name: "Thomas",age: 67});
  • Sencha’s Class DefinitionExt.define(FirstApp.model.Place,{ extend:Ext.data.Model, config:{ fields:[id,recordId,name,icon,vicinity] }})
  • MVC MVP MVVMReference - http://joel.inpointform.net/software-development/mvvm-vs-mvp-vs-mvc-the-differences-explained/
  • Model View Controller Passes View Calls to Fires Controller Event Modifies Model
  • Model View Presenter Passes View Calls to Updates Presenter Fires Event Modifies Model
  • Model View ViewModel View Modifies Fires Event View Model Fires Modifies Event Model
  • AMDAsynchronous Module Definition
  • JavaScript Class Dependency View depends dependsApp Controller Model Store
  • Typical HTML file<head> <script src=“model.js” …></script> <script src=“store.js” …></script> <script src=“view.js” …></script> <script src=“controller.js” …></script> <script src=“app.js” …></script></head>
  • With AMD<head> <script src=“require.js” type=“…” data-main=“app.js”></script></head>
  • JavaScript Class Dependency View depends dependsApp Controller Model Store
  • Define Module//Model.jsdefine(function(){ return { "name":"Todo Model" };});
  • JavaScript Class Dependency View depends dependsApp Controller Model Store
  • Define Module//Store.jsdefine([„Model‟],function(model){ return { “create”:function(){..}, “retrieve”:function(){..}, “update”:function(){..}, “delete”:function(){..}, };});
  • JavaScript Class Dependency View depends dependsApp Controller Model Store
  • Import Module//View.jsdefine([‟jQuery‟,‟Model‟,‟Store], function($,model, store){ store.update(model); //render $(“.view”).html(…); return ..; }) ;
  • JavaScript Class Dependency View depends dependsApp Controller Model Store
  • Import Module//Controller.jsdefine([‟jQuery‟,‟View‟,‟Store], function($,view, store){ view.setStore(store); $(“#placeholder”).html(view.el()); return ..; }) ;
  • JavaScript Class Dependency View depends dependsApp Controller Model Store
  • Import Module//app.jsrequire([„jQuery‟,‟Controller‟], function($,controller){ $(“#loading”).html(“”); controller.initialize(); }) ;
  • History& Routers
  • History
  • RouterRouters
  • MicroTemplateBackbone Underscore Example
  • <div id="search_container"></div><script type="text/javascript"> SearchView = Backbone.View.extend({ initialize: function(){ this.render(); }, render: function(){ // jQuery to put in html snippet in DOM $(this.el).html(“<label>Search</label><input type=“text” id=“…….”); // Load the compiled HTML into the Backbone "el" this.el.html( template ); } }); var search_view = new SearchView({ el: $("#search_container") });</script>
  • <div id="search_container"></div><script type="text/javascript"> SearchView = Backbone.View.extend({ initialize: function(){ this.render(); }, render: function(){ // Compile the template using underscore var template = _.template( $("#search_template").html(), {} ); // Load the compiled HTML into the Backbone "el" this.el.html( template ); } }); var search_view = new SearchView({ el: $("#search_container") });</script><script type="text/template" id="search_template"> <label>Search</label> <input type="text" id="search_input" /> <input type="button" id="search_button" value="Search" /></script>
  • <div id="search_container"></div><script type="text/javascript"> SearchView = Backbone.View.extend({ initialize: function(){ this.render(); }, render: function(){ var variables = { label: "My Search" }; // Compile the template using underscore var template = _.template( $("#search_template").html(), {variables} ); // Load the compiled HTML into the Backbone "el" this.el.html( template ); } }); var search_view = new SearchView({ el: $("#search_container") });</script><script type="text/template" id="search_template"> <label><%= label%></label> <input type="text" id="search_input" /> <input type="button" id="search_button" value="Search" /></script>
  • DataBoundViews
  • ViewStore AdapterSource
  • Sencha Touch Example DataStore can be populate from Rest, Proxy Source JSONP, LocalStorage ListView DataStore Reader Writer Json or XML Readers Model and Writerse.g List or Grid with Provides CRUD edit capabilities capabilities
  • Demo Time…..
  • DOMManipulation
  • Key Points• jQuery is the biggest name• Zeptojs is an alternative• Xui is another alternative
  • HTML 5
  • Key Points• HTML 5 Features• Feature Detection and fall back• Polyfills• Helpful Sites – www.html5please.com – www.html5test.com
  • CSS 3Optimization
  • Key Points• Sass - http://sass-lang.com/ – Imports – Variables – Nested blocks – functions• Compass - http://compass-style.org/
  • Mobile Apps
  • Key Points• HTML 5 Hybrid Apps – PhoneGap – Trigger IO
  • ProductionPackaging
  • Key Points• Optimizing JavaScript and CSS resources – Minimizing, Concatenation, Obfuscation• Creation of Image Sprite• Example – RequireJS Optimizer – Sencha Touch SDK Tool – etc
  • Not Ready for JavaScript• Don’t have JavaScript skills – Skills not there – Willingness is not there• Enterprise world need proven technology• Want to reuse code client/server side• Need many of the feature discussed above in single package
  • Google Web ToolkitPros• Most Mature Single Page Application Framework• Code in Java, compiles to JavaScript• Commercial Widget Libraries available – Sencha EXT, Smart GWT available• Perfect for Enterprise
  • Google Web ToolkitCons• World will move to JavaScript sooner or later• Including third party JS libraries is possible but time consuming
  • Dart• See the video of Dart on Google IO 2012• Backed by Google• Runs on both Server and Browser• Still early!!