JS Single-Page Web App Essentials

  • 2,776 views
Uploaded on

Web App Essentials cover the basic theoretical knowledge which are required for writing small and middle size application. The topics which are covered: …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,776
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
67
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 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. SPA Premises
  • 4. Problems it solves Bad UX: reload of UI parts Performance
  • 5. Solution Navigation Bar - 20% Toolbar - 10% Menu - AJAX 20% Content - 40% Footer - 10%
  • 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. Structure:Architecture
  • 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. 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. Routing: why? No Page Direct Refreshing Navigation Link Bookmark Sharing URI: http://www.mysite.com
  • 11. Routing: how? http://www.myside.com/#/folder/bolshchikov Hash-based Solution http://www.myside.com/folder/bolshchikov pushState Solution(HTML5 History API)
  • 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. Routing: who?Almost every modern JS MVC Framework hasimplementation of routing:● AngularJS● BackboneJS● JavascriptMVC● EmberJS● SammyJS
  • 14. Architecture Pattern MVCMVC provides clean separation of concerns of● data (Model)● presentation (View)● user input (Controller)
  • 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. 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. 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. Controller● Glue between Model and View● Handles user interactions● Might perform business logic roleThe role of controller greatly varies fromframework to framework
  • 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. 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. Templating: before Javascript HTML Document Document changes JS Code HTML Code
  • 22. Templating: how? tpl.html Data Templating Engine 1.html 2.html ... n.html
  • 23. Templating: afterSeparation of HTMLConcerns Template retrieve HTML Javascript Document Document changes JS Code
  • 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. 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. Performance:Module
  • 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. Modules in JS Defining module mechanism Importing module mechanism Privacy
  • 29. Modules in JS Defining module mechanism Importing module mechanism Privacy
  • 30. Modules in JS Defining Module Pattern module mechanism Importing module mechanism Privacy
  • 31. Modules in JS Defining Module Pattern module mechanism Importing module mechanism Privacy BUT
  • 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. UI Rendering time HTML Javascript HTML
  • 34. UI Rendering time HTML Javascript HTML
  • 35. UI Rendering time HTML Javascript HTML JS JS JS HTML HTML Module Module Module
  • 36. UI Rendering time HTML Javascript HTML JS JS JS HTML HTML Module Module Module
  • 37. UI Rendering time HTML Javascript HTML JS JS JS HTML HTML Module Module Module JS JS JS HTML HTML Module Module Module
  • 38. UI Rendering time HTML Javascript HTML JS JS JS HTML HTML Module Module Module JS JS JS HTML HTML Module Module Module
  • 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. Async Module Definition Mechanism for Suits where sync defining modules Non-blocking loading causes badand dependencies parallel loading performance
  • 41. AMD: who?● RequireJS● curl.js● Almond● StealJS
  • 42. Compilation Reduce the scriptCheck for syntax size Intellectual mistakes (minify, unify) Property (uglify)
  • 43. Compilation: who?● Google Closure● RequireJS● StealJS● YUI Compressor
  • 44. Library
  • 45. Base LibraryPure JS Example VS jQuery Example
  • 46. Questions?
  • 47. Thank you