Building single page applications

13,813 views

Published on

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/

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

No Downloads
Views
Total views
13,813
On SlideShare
0
From Embeds
0
Number of Embeds
408
Actions
Shares
0
Downloads
330
Comments
0
Likes
23
Embeds 0
No embeds

No notes for slide

Building single page applications

  1. 1. Building Single Page Applications By Rohit Ghatol (Director of Engineering @ Synerzip) @TechNext on 21st July 2012
  2. 2. 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
  3. 3. http://rohitghatol.github.com/SinglePageApplication/
  4. 4. http://rohitghatol.github.com/SinglePageApplication/
  5. 5. http://rohitghatol.github.com/SinglePageApplication/
  6. 6. What are“Single Page Applications”?
  7. 7. Characteristics of Single Page Application
  8. 8. 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…..
  9. 9. Pros and Cons
  10. 10. 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
  11. 11. Typical Architecture
  12. 12. 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
  13. 13. Different Aspects of SPA
  14. 14. 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
  15. 15. ClassSystem
  16. 16. Test your JavaScript Skillsfunction foo(){ bar = “hello”;}foo(); Helloalert(bar); Any things without an var is a global variable.
  17. 17. Key thing about JavaScriptJavaScript is an Object Oriented Language!But JavaScript does not have any classes!
  18. 18. Defining Classes
  19. 19. Function Approachfunction Animal(){ this.name="cat"; this.getInfo = function(){ return this.name; } cat cat}var anim = new Animal();alert(anim.name);alert(anim.getInfo());
  20. 20. Prototype Approachfunction Animal(){ this.name="cat";}Animal.prototype.getInfo = function(){ return this.name; catcat}var anim = new Animal();alert(anim.name);alert(anim.getInfo());
  21. 21. Closure Approachfunction Animal(){ var name="cat"; Private  this.getInfo = function(){ return name; } undefined cat}var anim = new Animal();alert(anim.name);alert(anim.getInfo());
  22. 22. Class Systems• Framework define their own Class Systems• Own ways of – Inheritance – Abstractions• Lets see some examples! 
  23. 23. Backbone Model DefinitionPerson = Backbone.Model.extend({ initialize: function(){ alert("Welcome to this world"); }});var person = new Person({ name: "Thomas",age: 67});
  24. 24. Sencha’s Class DefinitionExt.define(FirstApp.model.Place,{ extend:Ext.data.Model, config:{ fields:[id,recordId,name,icon,vicinity] }})
  25. 25. MVC MVP MVVMReference - http://joel.inpointform.net/software-development/mvvm-vs-mvp-vs-mvc-the-differences-explained/
  26. 26. Model View Controller Passes View Calls to Fires Controller Event Modifies Model
  27. 27. Model View Presenter Passes View Calls to Updates Presenter Fires Event Modifies Model
  28. 28. Model View ViewModel View Modifies Fires Event View Model Fires Modifies Event Model
  29. 29. AMDAsynchronous Module Definition
  30. 30. JavaScript Class Dependency View depends dependsApp Controller Model Store
  31. 31. 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>
  32. 32. With AMD<head> <script src=“require.js” type=“…” data-main=“app.js”></script></head>
  33. 33. JavaScript Class Dependency View depends dependsApp Controller Model Store
  34. 34. Define Module//Model.jsdefine(function(){ return { "name":"Todo Model" };});
  35. 35. JavaScript Class Dependency View depends dependsApp Controller Model Store
  36. 36. Define Module//Store.jsdefine([„Model‟],function(model){ return { “create”:function(){..}, “retrieve”:function(){..}, “update”:function(){..}, “delete”:function(){..}, };});
  37. 37. JavaScript Class Dependency View depends dependsApp Controller Model Store
  38. 38. Import Module//View.jsdefine([‟jQuery‟,‟Model‟,‟Store], function($,model, store){ store.update(model); //render $(“.view”).html(…); return ..; }) ;
  39. 39. JavaScript Class Dependency View depends dependsApp Controller Model Store
  40. 40. Import Module//Controller.jsdefine([‟jQuery‟,‟View‟,‟Store], function($,view, store){ view.setStore(store); $(“#placeholder”).html(view.el()); return ..; }) ;
  41. 41. JavaScript Class Dependency View depends dependsApp Controller Model Store
  42. 42. Import Module//app.jsrequire([„jQuery‟,‟Controller‟], function($,controller){ $(“#loading”).html(“”); controller.initialize(); }) ;
  43. 43. History& Routers
  44. 44. History
  45. 45. RouterRouters
  46. 46. MicroTemplateBackbone Underscore Example
  47. 47. <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>
  48. 48. <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>
  49. 49. <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>
  50. 50. DataBoundViews
  51. 51. ViewStore AdapterSource
  52. 52. 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
  53. 53. Demo Time…..
  54. 54. DOMManipulation
  55. 55. Key Points• jQuery is the biggest name• Zeptojs is an alternative• Xui is another alternative
  56. 56. HTML 5
  57. 57. Key Points• HTML 5 Features• Feature Detection and fall back• Polyfills• Helpful Sites – www.html5please.com – www.html5test.com
  58. 58. CSS 3Optimization
  59. 59. Key Points• Sass - http://sass-lang.com/ – Imports – Variables – Nested blocks – functions• Compass - http://compass-style.org/
  60. 60. Mobile Apps
  61. 61. Key Points• HTML 5 Hybrid Apps – PhoneGap – Trigger IO
  62. 62. ProductionPackaging
  63. 63. Key Points• Optimizing JavaScript and CSS resources – Minimizing, Concatenation, Obfuscation• Creation of Image Sprite• Example – RequireJS Optimizer – Sencha Touch SDK Tool – etc
  64. 64. 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
  65. 65. 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
  66. 66. Google Web ToolkitCons• World will move to JavaScript sooner or later• Including third party JS libraries is possible but time consuming
  67. 67. Dart• See the video of Dart on Google IO 2012• Backed by Google• Runs on both Server and Browser• Still early!!

×