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

Ing. Sabino Labarile

Code Architects s.r.l.

slabarile@codearchitects.com