E suap - teconlogie client sperimentate e utilizzate nella piattaforma

1. livinglabs.regione.puglia.it
e-SUAP
Piattaforma integrata di gestione telematica del SUAP

2. Partner Referenti
Ing. Sabino Labarile
Prof. Ing. Vitantonio Bevilacqua
Ing. Michele Martinelli

3. Il Progetto
Cittadini
imprese
professionisti
Ufficio SUAP
Enti PA (ASL, Vigili del Fuoco, etc..)
Cloud

4. e-SUAP
Tecnologie Client

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

6. Single page application
Web application che gira all’interno
di una singola pagina HTML
allo scopo di fornire una UX più fluida,
comparabile a quella
di una applicazione desktop

7. SPA - Caratteristiche
• Chunking
• Controllers
• Templating
• Routing
• Real-time communication
• Local storage
• Testing

8. SPA - Chunking
Ad ogni richiesta il web
server combina HTML e dati
e li invia al client
La pagina web è costruita
caricando piccoli frammenti
di HTML e dati
NoSPA SPA

9. SPA - Controllers
Scripting JavaScript:
•gestione del DOM
•manipolazione dei dati
•logica applicativa
•chiamate AJAX
Separazione degli interessi
grazie a pattern MVC o
MVVM:
•model → logica di dominio
•view → logica di
visualizzazione
•controller → logica di
controllo
NoSPA SPA

10. SPA - Templating
Manipolazione della UI e del
DOM tramite scripting
JavaScript
Binding dichiarativo tra dati e
templates HTML
NoSPA SPA

11. SPA - Routing
Le pagine sono ricaricate ad
ogni richiesta
La navigazione si ottiene
selezionando le view.
Questo preserva
•stato della pagina
•elementi
•dati
NoSPA SPA

12. SPA - Real-time communication
Ogni richiesta è
monodirezionale dal browser
al web server
Tra un'applicazione client e il
web server è possibile la
comunicazione bidirezionale
NoSPA SPA

13. SPA - Local storage
Carichi intensivi di dati dal
server web
Cookie
Capacità di memorizzare
dati su un browser
•maggiori prestazioni
•accesso offline
NoSPA SPA

14. SPA - Testing
Test trial and error
verificando l’effetto nel
browser
Le applicazioni hanno a
disposizione dei framework
di test che permettono TDD
e BDD
NoSPA SPA

15. SPA - Pros & Cons
• User Experience
• Alleggerimento del server
• JavaScript
• Caricamento del client
• SEO
• JavaScript

17. HTML5
HTML è un markup language usato per
strutturare e presentare contenuti per il WWW
Con HTML5 si introducono elementi e attributi
che riflettono il tipico utilizzo dei siti web
moderni

18. HTML5 - What is new?
• Nuovi elementi
• Nuovi attributi
• Supporto a CSS3
• Video e Audio
• Grafica 2D/3D
• Local Storage
• Local SQL Database
• Web Applications

19. HTML5 - What is new?
Multimedia:
•Sostituito il tag generico <object> con i tag specifici
<video> e <audio>
Grafica:
•Nuovo elemento <canvas>
•Possibilità di usare SVG inline
•Supporto a CSS3 2D/3D

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

21. HTML5 - What is new?
Elementi semantici:
Nuovi elementi <header>, <footer>, <menu>,
<section> e <article>
Forms:
Nuovi elementi, nuovi attributi, nuovi tipi di input
e validazione automatica.

23. CSS3
CSS è uno stylesheet language usato per
descrivere l'aspetto e la formattazione di un
documento scritto in un linguaggio di markup.
CSS3 è suddiviso in moduli, ognuno dei quali
aggiunge o estende caratteristiche di CSS2,
mantenendo retrocompatibilità

24. CSS3 - What is new?
• Nuovi selettori
• Nuove proprietà
• Animazioni
• Trasformazioni 2D/3D
• Angoli arrotondati
• Ombreggiature
• Font scaricabili

26. Durandal
Durandal è un framework JavaScript open
source progettato per la realizzazione di Single
Page Application
Comprende un set di tecnologie e convenzioni
per garantire la massima produttività

27. Durandal - Caratteristiche
• Architettura MV*
• Modularità JavaScript e HTML
• Application Lifecycle
• Navigazione
• Programmazione asincrona con i promise
• Ottimizzazione
• Costruito su jQuery, Knockout e RequireJS

29. KnockoutJS
KnockoutJS è una libreria JavaScript open
source che aiuta a creare interfacce utente
complesse con un semplice modello dei dati
sottostante
In pratica implementa il pattern MVVM e
fornisce uno strumento di templating

30. KnockoutJS - Esempio
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

31. KnockoutJS - Esempio
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

32. KnockoutJS - Esempio
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

34. TypeScript
TypeScript è un linguaggio di
programmazione superset di Javascript
Aggiunge tipizzazione statica e
programmazione orientata agli oggetti
basata su classi

35. TypeScript - Esempio
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

37. JS Utils - Underscore
Underscore è una libreria JavaScript open source
che fornisce una marea di helper di programmazione
funzionale senza estendere gli oggetti build-in
Può delegare a funzioni built-in, in modo che i
browser moderni possano utilizzare le
implementazioni native di tali funzionalità

38. JS Utils - Underscore - Esempio
_.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]
…

39. JS Utils - Async
Async è una libreria JavaScript open source
che fornisce potenti funzionalità per lavorare
con l’asincronia in JavaScript

40. JS Utils - Async - Esempio
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.
});

42. Bootstrap
Bootstrap è un insieme di strumenti open
source per la creazione di siti e applicazioni
web
Comprende template HTML+CSS ed
estensioni JavaScript opzionali

43. Bootstrap - Componenti

44. Less
Less (Leaner CSS) è uno stylesheet language
dinamico che adorna CSS con variabili,
annidamento, mixin, operazioni e funzioni
LESS è un metalinguaggio annidato, difatti un
CSS valido è anche un LESS valido e con la
stessa semantica

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

47. QUnit
QUnit è un framework di test per JavaScript

48. 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');
});

49. Alternative

50. Conclusioni
Sviluppare una SPA è più complesso
rispetto allo sviluppo di una classica
applicazione Web

51. Conclusioni
La complessità si sposta sul client

52. Conclusioni
Le tecnologie si stanno raffinando

53. Riferimenti
• 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

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