js single-page web app essentials

00 Web App EssentialsA complete toolbox set for creation middle-size single-page application (SPA)

bySergey N. Bolshchikov

http://[email protected]

New ProImage, 2012

http://bolshchikov.net

http://bolshchikov.net

mailto:[email protected]



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

Privacy

Module Pattern

Modules in JS

Defining 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 JS Module HTMLJS

ModuleJS

Module

UI Renderingtime



ModuleJS

Module

HTML JS ModuleHTML JS

ModuleJS

Module

UI Renderingtime



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

http://jsfiddle.net/bolshchikov/LD4H9

http://jsfiddle.net/bolshchikov/LD4H9

http://jsfiddle.net/bolshchikov/uQCnR/

http://jsfiddle.net/bolshchikov/uQCnR/

Questions?

Thank you

js single-page web app essentials

Technology

http

view

modules

module

content

problems

model

controller