The document discusses technologies for developing single-page applications (SPAs). It describes frameworks like Durandal and KnockoutJS that use patterns like MVVM and support features such as routing and real-time communication. It also covers languages and libraries that support SPAs including HTML5, CSS3, TypeScript, Underscore, Async, Bootstrap, Less, and the QUnit testing framework. Developing SPAs is more complex than traditional websites due to moving more logic to the client and refining technologies.

1. livinglabs.regione.puglia.it
e-SUAP
Integrated platform for SUAP electronic management

2. The project
Citizens
Companies
Professionals
SUAP Office
PA Institution (ASL, VVF, etc..)
Cloud

3. e-SUAP
Client Technologies

4. Overview
• Single Page Application
• HTML5 + CSS3
• Durandal
• KnockoutJS
• Typescript
• Utils
• Bootstrap + Less
• QUnit

5. Single page application
SPA is a web application fitting on a single
web page with the goal of providing a more
fluid user experience akin to a desktop
application.

6. SPA - Features
• Chunking
• Controllers
• Templating
• Routing
• Real-time communication
• Local storage
• Testing

7. SPA - Chunking
The web server combines
HTML and data and sends
them to the client every time
it receives a request.
The web page is constructed
by loading chunks of HTML
fragments and data.
NoSPA SPA

8. SPA - Controllers
Scripting JavaScript:
• DOM management
• Data manipulation
• Application logic
• AJAX calls
Views and Models
separation thanks to MVC o
MVVM patterns:
• model → domain logic
• view → presentation logic
• controller → control logic
NoSPA SPA

9. SPA - Templating
UI and DOM manipulation by
using Javascript scripts.
There is declarative binding
of data to HTML templates
NoSPA SPA

10. SPA - Routing
Pages are reloaded at each
request.
Selection of views and
navigation (without page
reloads).
This preserves:
• Page state
• elements
• data
NoSPA SPA

11. SPA - Real-time communication
One-way request
communication between
browser and server.
Two-way communication of
a client application and web
server replaces one-way
requests from a browser.
NoSPA SPA

12. SPA - Local storage
• Intensive data loads only
on web server.
• Cookies use.
Capabilities of storing data
on a browser for
performance and offline
access replace cookies and
intensive data loads from
web server.
NoSPA SPA

13. SPA - Testing
“Trial and Error” testing
technique is used.
TDD and BDD approach are
adopted by using specific
testing frameworks.
NoSPA SPA

14. SPA - Pros & Cons
• User Experience
• Server-load reduction
• JavaScript
• Client-load increasing
• SEO
• JavaScript

16. HTML5
HTML or HyperText Markup Language is the
standard markup language used to create web
pages.
HTML5 introduces new elements and attributes
for complex web applications.

17. HTML5 - What is new?
• New elements
• New attributes
• CSS3 support
• Video and Audio
• 2D/3D graphic support
• Local Storage
• Local SQL Database
• Web Applications

18. HTML5 - What is new?
Multimedia:
• Generic<object> tag is replaced by <video> and
<audio> specific tags.
Graphic:
•<canvas> tag is introduced
•Ability to use inline SVG
•CSS3 2D/3D support

19. HTML5 - What is new?
Applications:
• Local data storage
• Local file access
• Local SQL database
• Application cache
• Javascript workers
• XHTMLHttpRequest 2
• Geolocalization

20. HTML5 - What is new?
Semantic elements:
New elements are introduced: <header>, <footer>,
<menu>, <section> e <article>
Forms:
New elements, new attributes, new input type and
automatic validation.

22. CSS3
Cascading Style Sheets (CSS) is a style sheet language
used for describing the look and formatting of a
document written in a markup language.
CSS3 is divided into several separate documents called
"modules". Each module adds new capabilities or
extends features defined in CSS 2, preserving backward
compatibility.

23. CSS3 - What is new?
• New selectors
• New properties
• Animations
• 2D/3D transformations
• Rounded corners
• Shading
• Downloadable fonts

25. Durandal
Durandal is a lightweight JavaScript framework
designed to make building Single Page
Applications (SPAs) simple and elegant.

26. Durandal - Features
• MV* Architecture support
• JavaScript and HTML modularity
• Application Lifecycle
• Navigation
• asynchronous programming by using Promises
• Optimization
• Based on jQuery, Knockout and RequireJS

28. KnockoutJS
Knockout is a JavaScript library that helps
you to create rich, responsive display and
editor user interfaces with a clean underlying
data model.
It implements MVVM patterns and allows
templates using.

29. KnockoutJS - Example
function ViewModel() {
this.firstName = ko.observable();
}
ko.applyBindings(new ViewModel());
<html>
<head>
<script type=”text/javascript”
src=”knockout-3.1.0.js”></script>
<script type=”text/javascript”
src=”myscript.js”></script>
</head>
<body>
<input data-bind=“value: firstName”>
My name is
<span data-bind=“text: firstName”></span>
</body>
</html>
myscript.js mypage.html

30. KnockoutJS - Example
function ViewModel() {
this.firstName = ko.observable();
this.lastName = ko.observable();
this.fullName=ko.computed(function() {
return this.firstName()+’ ‘+this.lastName();
});
}
ko.applyBindings(new ViewModel());
<html>
<head>
<script type=”text/javascript”
src=”knockout-3.1.0.js”></script>
<script type=”text/javascript”
src=”myscript.js”></script>
</head>
<body>
<input data-bind=“value: firstName”>
<input data-bind=“value: lastName”>
My name is
<span data-bind=“text: fullName”></span>
</body>
</html>
myscript.js mypage.html

31. KnockoutJS - Example
function ViewModel() {
this.list = ko.observableArray([
{item: ’item1’},
{item: ’item2’},
{item: ’item3’},
]);
}
ko.applyBindings(new ViewModel());
<html>
<head>
<script type=”text/javascript”
src=“knockout-3.1.0.js”></script>
<script type=”text/javascript”
src=”myscript.js”></script>
</head>
<body>
Todo list:
<ul>
<!-- ko: foreach list -->
<li data-bind=“text: item”></li>
<!-- /ko -->
</ul>
</body>
</html>
myscript.js mypage.html

33. TypeScript
TypeScript is a free and open source
programming language developed by Microsoft.
It is a strict superset of JavaScript, and adds
optional static typing and class-based object-
oriented programming to the language.

34. TypeScript - Example
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return ‘Hello, ‘ + this.greeting;
}
}
var greeter = new Greeter(‘world’);
var button = document.createElement(‘button’);
button.onclick = function() {
alert(greeter.greet());
}
document.body.appendChild(button);
var Greeter = (function () {
function Greeter(message) {
this.greeting = message;
}
Greeter.prototype.greet = function () {
return ‘Hello, ‘ + this.greeting;
};
return Greeter;
})();
var greeter = new Greeter(‘world’);
var button = document.createElement(‘button’);
button.onclick = function () {
alert(greeter.greet());
};
document.body.appendChild(button);
myscript.ts myscript.js

36. JS Utils - Underscore
Underscore is a JavaScript library that provides a whole
mess of useful functional programming helpers without
extending any built-in objects.
Thanks to it modern browsers can use the native
implementations of forEach, map, reduce, filter, every,
some and indexOf.

37. JS Utils - Underscore - Example
_.map([1, 2, 3], function(num){
return num * 3;
});
=> [3, 6, 9]
_.reduce([1, 2, 3], function(memo, num){
return memo + num;
}, 0);
=> 6
_.filter([1, 2, 3, 4, 5, 6], function(num){
return num % 2 == 0;
});
=> [2, 4, 6]
…

38. JS Utils - Async
Async is a utility module which provides
straight-forward, powerful functions for
working with asynchronous JavaScript.

39. JS Utils - Async - Example
async.series([
function(callback){
// do some stuff ...
callback(null, ’one’);
},
function(callback){
// do some more stuff …
callback(null, ’two’);
}
],
// optional callback
function(err, results){
// results is now equal to ['one', 'two']
});
async.parallel([
function(callback){
setTimeout(function(){
callback(null, ’one’);
}, 200);
},
function(callback){
setTimeout(function(){
callback(null, ’two’);
}, 100);
}
],
// optional callback
function(err, results){
// the results array will equal ['one','two’] even
// though second function had a shorter timeout.
});

41. Bootstrap
Bootstrap is a free collection of tools for
creating websites and web applications.
It contains HTML and CSS-based design
templates for typography, forms, buttons,
navigation and other interface components, as
well as optional JavaScript extensions.

42. Bootstrap - Components

43. Less
Less (Leaner CSS) is a dynamic stylesheet
language that provides the following mechanisms
for CSS: variables, nesting, mixins, operators and
functions;
The indented syntax of LESS is a nested
metalanguage, as valid CSS is valid LESS code
with the same semantics.

44. Less
@base: #f938ab;
.box-shadow(@style, @c)
when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%)
when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
mystyle.less mystyle.css

46. QUnit
QUnit is a JavaScript unit-testing framework.

47. QUnit
QUnit.test('a basic test example', function (assert) {
var obj = {};
assert.ok(true, 'Boolean true'); // passes
assert.ok(1, 'Number one'); // passes
assert.ok(false, 'Boolean false'); // fails
obj.start = 'Hello';
obj.end = 'Ciao';
// passes
assert.equal(obj.start, 'Hello', 'Opening greet');
// fails
assert.equal(obj.end, 'Goodbye', 'Closing greet');
});

48. Alternative

49. Conclusions
Developing SPAs is more complex than
creating a classic web application.

50. Conclusions
A SPA moves logic from the server to the
client.

51. Conclusions
The technologies are refining themselves

52. References
• w3.org/TR/html5
• w3.org/TR/css3-*
• durandaljs.com
• knockoutjs.com
• typescriptlang.org
• underscorejs.org
• github.com/caolan/async
• getbootstrap.com
• lesscss.org
• qunitjs.com

53. Ing. Sabino Labarile
Code Architects s.r.l.
slabarile@codearchitects.com