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.

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

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

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 code
http://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 has
implementation of routing:
● AngularJS
● BackboneJS
● JavascriptMVC
● EmberJS
● SammyJS

14. Architecture Pattern MVC
MVC 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 role
The role of controller greatly varies from
framework 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) doesn't
implement MVC pattern in classical way. Each has its own
vision.
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: after
Separation of HTML
Concerns 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 bad
and dependencies parallel loading performance

41. AMD: who?
● RequireJS
● curl.js
● Almond
● StealJS

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

43. Compilation: who?
● Google Closure
● RequireJS
● StealJS
● YUI Compressor

44. Library

45. Base Library
Pure JS Example VS jQuery Example

46. Questions?

47. Thank you