00 Web App EssentialsA complete toolbox set for creation middle-size single-page application (SPA)                        ...
Outline1. Premises   a. Problems it solves   b. Solution   c. New Problems and Solutions                                  ...
SPA Premises
Problems it solves   Bad UX: reload of UI parts   Performance
Solution Navigation Bar - 20%                        Toolbar - 10% Menu -                                 AJAX 20%        ...
New Problems & Solutions                              Problems                                          Ajax callbacks    ...
Structure:Architecture
SPA Architecture        Server                     Browser Address Bar       xhr                             Routing Ctrl ...
SPA Architecture        Server                     Browser Address Bar       xhr                             Routing Ctrl ...
Routing: why?     No Page         Direct    Refreshing     Navigation                     Link    Bookmark        Sharing ...
Routing: how? http://www.myside.com/#/folder/bolshchikov            Hash-based Solution  http://www.myside.com/folder/bols...
Routing Example$.Controller(Routing, {           init: function() {                $(.header).explorer_header_create();   ...
Routing: who?Almost every modern JS MVC Framework hasimplementation of routing:●   AngularJS●   BackboneJS●   JavascriptMV...
Architecture Pattern MVCMVC provides clean separation of concerns of● data (Model)● presentation (View)● user input (Contr...
Model● Represents knowledge or data● Talks to the server using RESTful  architecture● Isolated from controllers and views●...
Model Example$.Model(Explorer.Models.Tree,    {        data: [ ],        init: function() {              var self = this; ...
View● Considered to be specific element of UI  ○ Table record might be view  ○ Composite views● Is generated from Template...
Controller● Glue between Model and View● Handles user interactions● Might perform business logic roleThe role of controlle...
Controller Example$.Controller(Explorer.List.Create,   {       init: function(el, folder) {            ...       },       ...
MVC: who?Major player in the world of JS MVC Frameworks:● AngularJS● Backbone (MV*)● EmberJS● Dojo● JavascriptMVC● Knockou...
Templating: before                         Javascript     HTML                Document    Document               changes  ...
Templating: how?                                    tpl.html Data                 Templating                   Engine     ...
Templating: afterSeparation of              HTMLConcerns                  Template                                retrieve...
Template Example (EJS) <tbody>  <% for (var i = 0; i < this.length; i++) { %>    <tr>     <td><%= this[i].uid%></td>     <...
Templating: who?A lot.●   UnderscoreJS templating    <li><%= name%></li>●   Handlebars                 <li>{{name}}</li>● ...
Performance:Module
Modules in JS   Javascript file            Javascript file    Function A                 Function A                       ...
Modules in JS         Defining         module        mechanism     Importing                       module                 ...
Modules in JS         Defining         module        mechanism     Importing                       module                 ...
Modules in JS         Defining    Module Pattern         module        mechanism       Importing                         m...
Modules in JS         Defining     Module Pattern         module        mechanism        Importing                        ...
Modules in JS                          Javascript file   Javascript file                            Module A     Module A ...
UI Rendering                               time HTML      Javascript   HTML
UI Rendering                               time HTML      Javascript   HTML
UI Rendering                                              time HTML            Javascript            HTML         JS      ...
UI Rendering                                              time HTML            Javascript            HTML         JS      ...
UI Rendering                                                       time HTML             Javascript                  HTML ...
UI Rendering                                                       time HTML             Javascript                  HTML ...
UI Rendering                                                            time HTML             Javascript                  ...
Async Module Definition  Mechanism for                          Suits where sync defining modules    Non-blocking      loa...
AMD: who?● RequireJS● curl.js● Almond● StealJS
Compilation                   Reduce the scriptCheck for syntax         size            Intellectual   mistakes         (m...
Compilation: who?● Google Closure● RequireJS● StealJS● YUI Compressor
Library
Base LibraryPure JS Example   VS   jQuery Example
Questions?
Thank you
Upcoming SlideShare
Loading in …5
×

JS Single-Page Web App Essentials

3,934 views

Published on

Web App Essentials cover the basic theoretical knowledge which are required for writing small and middle size application. The topics which are covered:
spa premises,
spa architecture,
mvc pattern and framework,
templating,
module pattern,
ui rendering,
amd,
base libraries.

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

No Downloads
Views
Total views
3,934
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
92
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

JS Single-Page Web App Essentials

  1. 1. 00 Web App EssentialsA complete toolbox set for creation middle-size single-page application (SPA) by Sergey N. Bolshchikov http://bolshchikov.net sergey.bolshchikov@new-proimage.com New ProImage, 2012
  2. 2. Outline1. Premises a. Problems it solves b. Solution c. New Problems and Solutions Premises2. Structure (Background) a. Architecture b. Routing c. MVC d. Templating3. Performance SPA a. UI Rendering Structure Performance b. Modules i. AMD ii. Compilation4. Library
  3. 3. SPA Premises
  4. 4. Problems it solves Bad UX: reload of UI parts Performance
  5. 5. Solution Navigation Bar - 20% Toolbar - 10% Menu - AJAX 20% Content - 40% Footer - 10%
  6. 6. New Problems & Solutions Problems Ajax callbacks http://mysite.com HTML strings in JS Static address Spaghetti codehttp://mysite.com/#/ MVC Templating Javascript-HTML Routing Data-Logic-View (Dynamic-Static) Solutions
  7. 7. Structure:Architecture
  8. 8. SPA Architecture Server Browser Address Bar xhr Routing Ctrl Ctrl 1 Ctrl 2 Ctrl 3 MVC MVC MVC Mdl 1 Tpl 1 Mdl 2 Tpl 2 Mdl 3 Tpl 3 View 1 View 2 HTML Container
  9. 9. SPA Architecture Server Browser Address Bar xhr Routing Ctrl Ctrl 1 Ctrl 2 Ctrl 3 MVC MVC MVC Mdl 1 Tpl 1 Mdl 2 Tpl 2 Mdl 3 Tpl 3 View 1 View 3 HTML Container
  10. 10. Routing: why? No Page Direct Refreshing Navigation Link Bookmark Sharing URI: http://www.mysite.com
  11. 11. Routing: how? http://www.myside.com/#/folder/bolshchikov Hash-based Solution http://www.myside.com/folder/bolshchikov pushState Solution(HTML5 History API)
  12. 12. Routing Example$.Controller(Routing, { init: function() { $(.header).explorer_header_create(); $(#toolbar).explorer_toolbar_create(); $(#tree ul li).explorer_tree_create(null); $(.footer).explorer_footer_create(); }, "/folder/:name route": function(data) { $(#content).empty(); $(#content).append(<div id="folder"></div>) $(#folder).explorer_list_create(data.name); } });new Routing(document.body);
  13. 13. Routing: who?Almost every modern JS MVC Framework hasimplementation of routing:● AngularJS● BackboneJS● JavascriptMVC● EmberJS● SammyJS
  14. 14. Architecture Pattern MVCMVC provides clean separation of concerns of● data (Model)● presentation (View)● user input (Controller)
  15. 15. Model● Represents knowledge or data● Talks to the server using RESTful architecture● Isolated from controllers and views● Can be gathered into groups (collections)
  16. 16. Model Example$.Model(Explorer.Models.Tree, { data: [ ], init: function() { var self = this; $.ajax({ url: json/structure.json, dataType: json, success: function(data) { for (var i=0; i < data.length; i++) { if (data[i].type === folder) { self.data.push(data[i]); } } } }); } }
  17. 17. View● Considered to be specific element of UI ○ Table record might be view ○ Composite views● Is generated from Template● One model might have multiple views
  18. 18. Controller● Glue between Model and View● Handles user interactions● Might perform business logic roleThe role of controller greatly varies fromframework to framework
  19. 19. Controller Example$.Controller(Explorer.List.Create, { init: function(el, folder) { ... }, a click: function(a, ev) { var el = null; for(var i = 0; i < list.data.length; i++) { if (list.data[i].name === a.text()) { el = list.data[i]; break; } } $(.modal).explorer_details_create(el); } }
  20. 20. MVC: who?Major player in the world of JS MVC Frameworks:● AngularJS● Backbone (MV*)● EmberJS● Dojo● JavascriptMVC● Knockout (MVVM)All of them (probably, besides JavascriptMVC) doesntimplement MVC pattern in classical way. Each has its ownvision.They all are MV*
  21. 21. Templating: before Javascript HTML Document Document changes JS Code HTML Code
  22. 22. Templating: how? tpl.html Data Templating Engine 1.html 2.html ... n.html
  23. 23. Templating: afterSeparation of HTMLConcerns Template retrieve HTML Javascript Document Document changes JS Code
  24. 24. Template Example (EJS) <tbody> <% for (var i = 0; i < this.length; i++) { %> <tr> <td><%= this[i].uid%></td> <td><img class="thumb" src="img/<%= this[i].type%>.png" /></td> <td><a href="#"><%= this[i].name%></a></td> <td><%= this[i].size%></td> <td><%= this[i].owner%></td> <td><%= this[i].ctime%></td> </tr> <% } %> </tbody>
  25. 25. Templating: who?A lot.● UnderscoreJS templating <li><%= name%></li>● Handlebars <li>{{name}}</li>● Mustache <li>{{name}}</li>● Google Closure Templates <li>{$name}</li>● EJS <li><%= name%></li>● DustJS● ....
  26. 26. Performance:Module
  27. 27. Modules in JS Javascript file Javascript file Function A Function A Module A Function B VS Function B Function C Function C Module B Function D Function D
  28. 28. Modules in JS Defining module mechanism Importing module mechanism Privacy
  29. 29. Modules in JS Defining module mechanism Importing module mechanism Privacy
  30. 30. Modules in JS Defining Module Pattern module mechanism Importing module mechanism Privacy
  31. 31. Modules in JS Defining Module Pattern module mechanism Importing module mechanism Privacy BUT
  32. 32. Modules in JS Javascript file Javascript file Module A Module A Module B VS Javascript file Module A Module C Javascript file Module D Module A
  33. 33. UI Rendering time HTML Javascript HTML
  34. 34. UI Rendering time HTML Javascript HTML
  35. 35. UI Rendering time HTML Javascript HTML JS JS JS HTML HTML Module Module Module
  36. 36. UI Rendering time HTML Javascript HTML JS JS JS HTML HTML Module Module Module
  37. 37. UI Rendering time HTML Javascript HTML JS JS JS HTML HTML Module Module Module JS JS JS HTML HTML Module Module Module
  38. 38. UI Rendering time HTML Javascript HTML JS JS JS HTML HTML Module Module Module JS JS JS HTML HTML Module Module Module
  39. 39. UI Rendering time HTML Javascript HTML JS JS JS HTML HTML Module Module Module JS JS JS HTML HTML Module Module Module JS Module JS HTML HTML Module JS Module
  40. 40. Async Module Definition Mechanism for Suits where sync defining modules Non-blocking loading causes badand dependencies parallel loading performance
  41. 41. AMD: who?● RequireJS● curl.js● Almond● StealJS
  42. 42. Compilation Reduce the scriptCheck for syntax size Intellectual mistakes (minify, unify) Property (uglify)
  43. 43. Compilation: who?● Google Closure● RequireJS● StealJS● YUI Compressor
  44. 44. Library
  45. 45. Base LibraryPure JS Example VS jQuery Example
  46. 46. Questions?
  47. 47. Thank you

×