js single-page web app essentials
Post on 01-Sep-2014
3.249 Views
Preview:
DESCRIPTION
TRANSCRIPT
00 Web App EssentialsA complete toolbox set for creation middle-size single-page application (SPA)
bySergey N. Bolshchikov
http://bolshchikov.netsergey.bolshchikov@new-proimage.com
New ProImage, 2012
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
SPA Premises
Problems it solves
Bad UX: reload of UI parts Performance
Solution
Navigation Bar - 20%
Menu - 20%
Footer - 10%
Toolbar - 10%
Content - 40%
AJAX
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)
Structure:Architecture
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
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
Routing: why?
No Page Refreshing
URI: http://www.mysite.com
DirectNavigation
BookmarkLink
Sharing
Routing: how?
http://www.myside.com/#/folder/bolshchikov
Hash-based Solution
http://www.myside.com/folder/bolshchikov
pushState Solution(HTML5 History API)
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);
Routing: who?Almost every modern JS MVC Framework has implementation of routing:
● AngularJS● BackboneJS● JavascriptMVC● EmberJS● SammyJS
Architecture Pattern MVCMVC provides clean separation of concerns of
● data (Model)
● presentation (View)
● user input (Controller)
Model
● Represents knowledge or data
● Talks to the server using RESTful architecture
● Isolated from controllers and views
● Can be gathered into groups (collections)
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]);}
}}
});}
}
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
Controller
● Glue between Model and View
● Handles user interactions
● Might perform business logic role
The role of controller greatly varies from framework to framework
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);
}}
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*
Templating: before
HTMLDocument
Javascript Document
changes
HTML Code
JS Code
Templating: how?
TemplatingEngine
1.html 2.html n.html...
Data tpl.html
Templating: after
HTMLDocument
Javascript Document
changes
HTML Template
JS Code
retrieve
Separation of Concerns
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>
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● ....
Performance:Module
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
Modules in JS
Defining module
mechanism Importing module
mechanism
Privacy
Modules in JS
Defining module
mechanism Importing module
mechanism
Privacy
Modules in JS
Defining module
mechanism Importing module
mechanism
Privacy
Module Pattern
Modules in JS
Defining module
mechanism Importing module
mechanism
Privacy
Module Pattern
BUT
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
UI Renderingtime
HTML Javascript HTML
UI Renderingtime
HTML Javascript HTML
UI Renderingtime
HTML Javascript HTML
HTML JS Module HTMLJS
ModuleJS
Module
UI Renderingtime
HTML Javascript HTML
HTML JS Module HTMLJS
ModuleJS
Module
UI Renderingtime
HTML Javascript HTML
HTML JS Module HTMLJS
ModuleJS
Module
HTML JS ModuleHTML JS
ModuleJS
Module
UI Renderingtime
HTML Javascript HTML
HTML JS Module HTMLJS
ModuleJS
Module
HTML JS ModuleHTML JS
ModuleJS
Module
UI Renderingtime
HTML Javascript HTML
HTML JS Module HTMLJS
ModuleJS
Module
HTML JS ModuleHTML JS
ModuleJS
Module
HTML JS ModuleHTML
JS Module
JS Module
Async Module Definition
Mechanism for defining modules
and dependenciesNon-blocking
parallel loading
Suits where sync loading causes bad
performance
AMD: who?
● RequireJS
● curl.js
● Almond
● StealJS
Compilation
Check for syntax mistakes
Reduce the script size
(minify, unify)Intellectual
Property (uglify)
Compilation: who?
● Google Closure
● RequireJS
● StealJS
● YUI Compressor
Library
Base Library
Pure JS Example jQuery ExampleVS
Questions?
Thank you
top related