Upload
sabino-labarile
View
206
Download
3
Embed Size (px)
DESCRIPTION
E suap - teconlogie client sperimentate e utilizzate nella piattaforma
Citation preview
livinglabs.regione.puglia.it
e-SUAP
Piattaforma integrata di gestione telematica del SUAP
Partner Referenti
Ing. Sabino Labarile
Prof. Ing. Vitantonio Bevilacqua
Ing. Michele Martinelli
Il Progetto
Cittadini impreseprofessionisti
Ufficio SUAP
Enti PA (ASL, Vigili del Fuoco, etc..)
Cloud
e-SUAP
Tecnologie Client
Overview
• Single Page Application• HTML5 + CSS3• Durandal• KnockoutJS• Typescript• Utils• Bootstrap + Less• QUnit
Single page application
Web application che gira all’internodi una singola pagina HTML
allo scopo di fornire una UX più fluida, comparabile a quella
di una applicazione desktop
SPA - Caratteristiche
• Chunking• Controllers• Templating• Routing• Real-time communication• Local storage• Testing
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
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
SPA - Templating
Manipolazione della UI e del DOM tramite scripting JavaScript
Binding dichiarativo tra dati e templates HTML
NoSPA SPA
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
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
SPA - Local storage
Carichi intensivi di dati dal server web
Cookie
Capacità di memorizzare dati su un browser•maggiori prestazioni•accesso offline
NoSPA SPA
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
SPA - Pros & Cons
• User Experience
• Alleggerimento del server
• JavaScript
• Caricamento del client• SEO• JavaScript
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
HTML5 - What is new?
• Nuovi elementi• Nuovi attributi• Supporto a CSS3• Video e Audio• Grafica 2D/3D• Local Storage• Local SQL Database• Web Applications
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
HTML5 - What is new?
Applicazioni:•Local data storage•Local file access•Local SQL database•Application cache•Javascript workers•XHTMLHttpRequest 2•Geolocalization
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.
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à
CSS3 - What is new?
• Nuovi selettori• Nuove proprietà• Animazioni• Trasformazioni 2D/3D• Angoli arrotondati• Ombreggiature• Font scaricabili
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à
Durandal - Caratteristiche
• Architettura MV*• Modularità JavaScript e HTML• Application Lifecycle• Navigazione• Programmazione asincrona con i promise• Ottimizzazione• Costruito su jQuery, Knockout e RequireJS
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
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
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
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
TypeScript
TypeScript è un linguaggio di programmazione superset di Javascript
Aggiunge tipizzazione statica e programmazione orientata agli oggetti
basata su classi
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
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à
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]
…
JS Utils - Async
Async è una libreria JavaScript open source che fornisce potenti funzionalità per lavorare
con l’asincronia in JavaScript
JS Utils - Async - Esempio
async.series([ function(callback){ // do some stuff ... callback(null, ’one’); }, function(callback){ // do some more stuff … callback(null, ’two’); }],// optional callbackfunction(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 callbackfunction(err, results){ // the results array will equal ['one','two’] even // though second function had a shorter timeout.});
Bootstrap
Bootstrap è un insieme di strumenti open source per la creazione di siti e applicazioni
web
Comprende template HTML+CSS ed estensioni JavaScript opzionali
Bootstrap - Componenti
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
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
QUnit
QUnit è un framework di test per JavaScript
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');});
Alternative
Conclusioni
Sviluppare una SPA è più complesso rispetto allo sviluppo di una classica
applicazione Web
Conclusioni
La complessità si sposta sul client
Conclusioni
Le tecnologie si stanno raffinando
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