livinglabs.regione.puglia.it  

e-­‐SUAP  

Pia6aforma  integrata  di  ges:one  telema:ca  del  SUAP  

Partner

Il Progetto

Cittadini imprese professionisti

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’interno di 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 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. });

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

Domande?

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

Grazie

Nicola  Sanitate  

ApuliaSo=  s.n.c.  per  Code  Architects  s.r.l.  

nsanitate@apuliaoso=.com