js single-page web app essentials
DESCRIPTION
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.TRANSCRIPT
![Page 1: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/1.jpg)
00 Web App EssentialsA complete toolbox set for creation middle-size single-page application (SPA)
bySergey N. Bolshchikov
http://[email protected]
New ProImage, 2012
![Page 2: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/2.jpg)
Outline1. Premises
a. Problems it solvesb. Solutionc. New Problems and Solutions
2. Structurea. Architectureb. Routingc. MVCd. Templating
3. Performancea. UI Renderingb. Modules
i. AMDii. Compilation
4. Library
SPA
Premises(Background)
Structure Performance
![Page 3: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/3.jpg)
SPA Premises
![Page 4: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/4.jpg)
Problems it solves
Bad UX: reload of UI parts Performance
![Page 5: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/5.jpg)
Solution
Navigation Bar - 20%
Menu - 20%
Footer - 10%
Toolbar - 10%
Content - 40%
AJAX
![Page 6: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/6.jpg)
New Problems & Solutions
http://mysite.com
Static address
Problems
Ajax callbacksHTML strings in JS
Spaghetti code
Solutions
http://mysite.com/#/
Routing
MVC
Data-Logic-View
TemplatingJavascript-HTML(Dynamic-Static)
![Page 7: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/7.jpg)
Structure:Architecture
![Page 8: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/8.jpg)
MVC
SPA ArchitectureServer
xhr Routing Ctrl
Ctrl 1
Tpl 1Mdl 1
MVC
Ctrl 2
Tpl 2Mdl 2
MVC
Ctrl 3
Tpl 3Mdl 3
HTML ContainerView 1 View 2
Browser Address Bar
![Page 9: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/9.jpg)
SPA Architecture
MVC
Server
xhr Routing Ctrl
Ctrl 1
Tpl 1Mdl 1
MVC
Ctrl 2
Tpl 2Mdl 2
MVC
Ctrl 3
Tpl 3Mdl 3
HTML ContainerView 1 View 3
Browser Address Bar
![Page 10: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/10.jpg)
Routing: why?
No Page Refreshing
URI: http://www.mysite.com
DirectNavigation
BookmarkLink
Sharing
![Page 11: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/11.jpg)
Routing: how?
http://www.myside.com/#/folder/bolshchikov
Hash-based Solution
http://www.myside.com/folder/bolshchikov
pushState Solution(HTML5 History API)
![Page 12: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/12.jpg)
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);
![Page 13: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/13.jpg)
Routing: who?Almost every modern JS MVC Framework has implementation of routing:
● AngularJS● BackboneJS● JavascriptMVC● EmberJS● SammyJS
![Page 14: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/14.jpg)
Architecture Pattern MVCMVC provides clean separation of concerns of
● data (Model)
● presentation (View)
● user input (Controller)
![Page 15: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/15.jpg)
Model
● Represents knowledge or data
● Talks to the server using RESTful architecture
● Isolated from controllers and views
● Can be gathered into groups (collections)
![Page 16: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/16.jpg)
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]);}
}}
});}
}
![Page 17: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/17.jpg)
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
![Page 18: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/18.jpg)
Controller
● Glue between Model and View
● Handles user interactions
● Might perform business logic role
The role of controller greatly varies from framework to framework
![Page 19: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/19.jpg)
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);
}}
![Page 20: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/20.jpg)
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) doesn't implement MVC pattern in classical way. Each has its own vision.They all are MV*
![Page 21: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/21.jpg)
Templating: before
HTMLDocument
Javascript Document
changes
HTML Code
JS Code
![Page 22: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/22.jpg)
Templating: how?
TemplatingEngine
1.html 2.html n.html...
Data tpl.html
![Page 23: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/23.jpg)
Templating: after
HTMLDocument
Javascript Document
changes
HTML Template
JS Code
retrieve
Separation of Concerns
![Page 24: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/24.jpg)
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>
![Page 25: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/25.jpg)
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● ....
![Page 26: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/26.jpg)
Performance:Module
![Page 27: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/27.jpg)
Modules in JS
Javascript file
Function A
Function B
Function C
Function D
VS
Javascript file
Module A
Function A
Function B
Function C
Function D
Module B
![Page 28: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/28.jpg)
Modules in JS
Defining module
mechanism Importing module
mechanism
Privacy
![Page 29: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/29.jpg)
Modules in JS
Defining module
mechanism Importing module
mechanism
Privacy
![Page 30: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/30.jpg)
Modules in JS
Defining module
mechanism Importing module
mechanism
Privacy
Module Pattern
![Page 31: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/31.jpg)
Modules in JS
Defining module
mechanism Importing module
mechanism
Privacy
Module Pattern
BUT
![Page 32: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/32.jpg)
Modules in JS
Javascript file
Module A
Module B
Module C
Module D
VS
Javascript file
Module A
Javascript file
Module A
Javascript file
Module A
![Page 33: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/33.jpg)
UI Renderingtime
HTML Javascript HTML
![Page 34: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/34.jpg)
UI Renderingtime
HTML Javascript HTML
![Page 35: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/35.jpg)
UI Renderingtime
HTML Javascript HTML
HTML JS Module HTMLJS
ModuleJS
Module
![Page 36: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/36.jpg)
UI Renderingtime
HTML Javascript HTML
HTML JS Module HTMLJS
ModuleJS
Module
![Page 37: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/37.jpg)
UI Renderingtime
HTML Javascript HTML
HTML JS Module HTMLJS
ModuleJS
Module
HTML JS ModuleHTML JS
ModuleJS
Module
![Page 38: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/38.jpg)
UI Renderingtime
HTML Javascript HTML
HTML JS Module HTMLJS
ModuleJS
Module
HTML JS ModuleHTML JS
ModuleJS
Module
![Page 39: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/39.jpg)
UI Renderingtime
HTML Javascript HTML
HTML JS Module HTMLJS
ModuleJS
Module
HTML JS ModuleHTML JS
ModuleJS
Module
HTML JS ModuleHTML
JS Module
JS Module
![Page 40: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/40.jpg)
Async Module Definition
Mechanism for defining modules
and dependenciesNon-blocking
parallel loading
Suits where sync loading causes bad
performance
![Page 41: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/41.jpg)
AMD: who?
● RequireJS
● curl.js
● Almond
● StealJS
![Page 42: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/42.jpg)
Compilation
Check for syntax mistakes
Reduce the script size
(minify, unify)Intellectual
Property (uglify)
![Page 43: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/43.jpg)
Compilation: who?
● Google Closure
● RequireJS
● StealJS
● YUI Compressor
![Page 44: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/44.jpg)
Library
![Page 45: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/45.jpg)
Base Library
Pure JS Example jQuery ExampleVS
![Page 46: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/46.jpg)
Questions?
![Page 47: JS Single-Page Web App Essentials](https://reader034.vdocuments.net/reader034/viewer/2022042623/540558388d7f729b768b4c81/html5/thumbnails/47.jpg)
Thank you