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.
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Complete toolbox for middle-size SPA creation
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
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
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
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