e-suap - teconlogie client
Post on 28-Jul-2015
56 Views
Preview:
TRANSCRIPT
Il Progetto
Cittadini imprese professionisti
Ufficio SUAP
Enti PA (ASL, Vigili del Fuoco, etc..)
Cloud
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
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.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'); });
Conclusioni
Sviluppare una SPA è più complesso rispetto allo sviluppo di una classica
applicazione Web
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
top related