e-SUAP - Teconlogie client

Presentation about the client technologies behind the e-SUAP project. You can find information about Single Page Application, Durandal, Knockout, Typescript, Underscore, Async, Bootstrap, Less and QUnit.

Transcript

1. livinglabs.regione.puglia.it   e-­‐SUAP   Pia6aforma  integrata  di  ges:one  telema:ca  del  SUAP  
2. Partner
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. Domande?
54. 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
55. Grazie
56. Nicola  Sanitate   ApuliaSo=  s.n.c.  per  Code  Architects  s.r.l.   nsanitate@apuliaoso=.com