JS Single-Page Web App Essentials

00 Web App Essentials
A 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

Outline
1. Premises
a. Problems it solves
b. Solution
c. New Problems and Solutions
Premises
2. Structure (Background)
a. Architecture
b. Routing
c. MVC
d. Templating
3. Performance
SPA
a. UI Rendering
Structure Performance
b. Modules
i. AMD
ii. Compilation
4. Library

Problems it solves

Bad UX: reload of UI parts Performance

Solution

Navigation Bar - 20%

Toolbar - 10%

Menu - AJAX
20%
Content - 40%

Footer - 10%

New Problems & Solutions
Problems
Ajax callbacks
http://mysite.com HTML strings in JS
Static address Spaghetti code

http://mysite.com/#/ MVC Templating
Javascript-HTML
Routing Data-Logic-View (Dynamic-Static)

Solutions

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

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

Routing: why?

No Page Direct
Refreshing Navigation

Link
Bookmark Sharing

URI: http://www.mysite.com

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 MVC
MVC 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

Javascript
HTML Document
Document
changes JS Code

HTML Code

Templating: how?

tpl.html
Data
Templating
Engine

1.html 2.html ... n.html

Templating: after
Separation of HTML
Concerns Template
retrieve

HTML Javascript
Document
Document
changes
JS Code

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
● ....

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

Modules in JS
Defining
module
mechanism Importing
module
mechanism
Privacy

Modules in JS
Defining Module Pattern
module
mechanism Importing
module
mechanism
Privacy

Modules in JS
Defining Module Pattern
module
mechanism Importing
module
mechanism
Privacy

BUT

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

UI Rendering
time

HTML Javascript HTML

UI Rendering
time


JS JS JS
HTML HTML
Module Module Module

UI Rendering
time


JS JS JS
HTML HTML

JS JS JS
HTML HTML

UI Rendering
time


JS JS JS
HTML HTML

JS JS JS
HTML HTML

JS
Module
JS
HTML HTML
Module
JS
Module

Async Module Definition

Mechanism for Suits where sync
defining modules Non-blocking loading causes bad
and dependencies parallel loading performance

AMD: who?

● RequireJS

● curl.js

● Almond

● StealJS

Compilation

Reduce the script
Check for syntax size Intellectual
mistakes (minify, unify) Property (uglify)

Compilation: who?

● Google Closure

● RequireJS

● StealJS

● YUI Compressor

Base Library

Pure JS Example VS jQuery Example

JS Single-Page Web App Essentials

Recommended

More Related Content

What's hot (20)

Similar to JS Single-Page Web App Essentials (20)

More from Sergey Bolshchikov (14)

Recently uploaded (20)

JS Single-Page Web App Essentials