HTML5 Single Page Application è il nuovo hype tecnologico: tutti ne parlano, il web ne è pervaso, da GMail a Facebook e Twitter, dal desktop al mobile, dagli Appennini alle Ande. In questa sessione ci occuperemo di tutti quegli aspetti di organizzazione di una solution in termini di codebase, unit testing e processo di build, presentando alcuni strumenti che stanno emergendo fra quelli disponibili. Demo: http://www.communitydays.it/events/2014-Roma/web02/

1. WEB02 – Single Page
Applications
#CDays14 – Roma - 23, 24 e 25 Settembre 2014
Roberto Messora
roberto@messora.com - @robymes

2. Grazie a
#CDays14 – Roma - 23, 24 e 25 Settembre 2014
Sponsor

3. Agenda
• Riassunto delle puntate precedenti
• Riprendiamo un “paio” di concetti
 Cosa, Perchè, Come
 Security
 Design Patterns
 Unit Testing
• Organizzare una solution
• Build System
 L’ecosistema di Node.JS (ma non il web server)
 Task automation con Gulp.JS
 Unit Testing automation con Karma
 UI Testing automation con Phantom.JS
#CDays14 – Roma - 23, 24 e 25 Settembre 2014

4. Nelle puntate precedenti
• 2012 - Javascript avanzato: sfruttare al massimo il web
 http://bit.ly/1rooMbA
• 2013 - Usare Knockout.js
 http://bit.ly/1rooJwv
• 2014 – Single Page Applications: Come? Cosa? Perchè?
 http://bit.ly/1rooGRr
#CDays14 – Roma - 23, 24 e 25 Settembre 2014

5. Cosa
• SPA è l’acronimo di Single Page (Web) Application
• Si riferisce in genere ad un’applicazione web in cui l’intera
esperienza utente è erogata tramite una unica pagina,
spesso ricca di contenuti e della user experience
• Una SPA si caratterizza per l’utilizzo di tecnologie di ultima
generazione:
 HTML5
 CSS3
 Javascript
#CDays14 – Roma - 23, 24 e 25 Settembre 2014

6. Perché
• Si sceglie di sviluppare una SPA per diversi motivi:
 Esperienza utente molto ricca (desktop-like tramite CSS3 e
JavaScript)
 Applicazioni più responsive e veloci grazie al massiccio
utilizzo di chiamate AJAX
 Migliore adattamento all’ambiente mobile anche per
quanto riguarda il ridotto scambio di dati con il server o la
possibilità di eseguire web app offline
 Perchè così fan tutti…
#CDays14 – Roma - 23, 24 e 25 Settembre 2014

7. Come
• Non esiste un modo univoco per sviluppare una
SPA:
 Decine di framework Javascript su cui è possibile basare
una SPA (fare un giro su http://todomvc.com/ per
rendersene conto)
 Molteplici opzioni di tecnologia lato server:
 Stack Microsoft ASP.NET (classico + WCF, MVC)
 Node.JS, quasi sempre implementati come endpoint di servizi
REST/JSON
 Basi dati non relazionali che forniscono nativamente un
accesso REST
#CDays14 – Roma - 23, 24 e 25 Settembre 2014

8. Sicurezza
• JavaScript e sicurezza sono due concetti abbastanza distanti fra di loro
• Usare sempre HTTPS
• Autenticazione & Autorizzazione: partire SEMPRE dal presupposto
che i dati e le richieste che arrivano dal client al server possano essere
fraudolente, quindi predisporre meccanismi di autenticazione e
autorizzazione diversi dal cookie di autenticazione (Anti-Forgery tokens,
OAuth, ecc.)
• Validazione: predisporre SEMPRE la validazione dei dati sia lato client
che lato server
• Mitigare il reverse engineering tramite minificazione e/o compilazione
delle risorse Javascript (Dart, Coffescript)
#CDays14 – Roma - 23, 24 e 25 Settembre 2014

9. Patterns, Patterns, Patterns
• Una SPA può facilmente diventare abbastanza complessa da
richiedere una certa disciplina nello sviluppo Javascript in
termini di:
 Organizzazione della codebase
 Architettura e design: MV* Presentation Pattern
 Coding standard: JSLint non è sindacabile
 Design and Idiom Patterns:
 Namespace
 Self executing functions
 Module pattern
 AMD: Asynchronous Module Definition (es. Require JS)
 Anchor pattern (gestire la cronologia del browser, SEO)
#CDays14 – Roma - 23, 24 e 25 Settembre 2014

10. demo
Scheletro strutturale di una solution SPA
#CDays14 – Roma - 23, 24 e 25 Settembre 2014

11. Unit Testing
• Esistono diversi framework di Unit Testing Javascript, i più
utilizzati sono:
 QUnit
 Jasmine
 Mocha
• Automatizzare il processo di esecuzione delle suite di Test è
possibile tramite ambienti di automazione come Karma che
permettono anche di:
 Eseguire le suite di Test su differenti browser tramite PhantomJS
 Integrare le suite di Test in ambienti di Continuous Integration
#CDays14 – Roma - 23, 24 e 25 Settembre 2014

12. demo
Javascript Unit Testing con Jasmine
#CDays14 – Roma - 23, 24 e 25 Settembre 2014

13. Ciclo di Sviluppo e Delivery
• Il ciclo di sviluppo e delivery di una SPA si può riassumere
come:
 Scrivere codice JavaScript e markup HTML/CSS
 Verificare con JSLint il codice JavaScript
 Scrivere Unit Test
 Eseguire e verificare Unit Test
 Possibilmente rilevare e verificare la coverage degli Unit Test
 Combinare e minificare il codice JavaScript
 Eseguire e verificare Unit Test sul codice combinato e minificato
 Deployare usando il codice JavaScript combinato e minificato
#CDays14 – Roma - 23, 24 e 25 Settembre 2014

14. Parola d’ordine: Automatizzare
• Il ciclo di sviluppo e delivery può essere automatizzato utilizzando un
tool di task automation: Gulp.JS
• Gulp.JS è un modulo di Node.JS e si installa con il package manager
npm
• Gulp.JS offre la possibilità di automatizzare una grande quantità e
varietà di task differenti tramite l’installazione di plug-in dedicati
• Lo Unit Test runner Karma è disponibile come plug-in di Gulp.JS
• Gulp.JS si basa sul principio di funzionamento per cui:
 si eseguono uno o più task sequenzialmente
 Un task è definito da una sequenza di trasformazioni applicate ad uno stream
di file
 Uno stream di file è definito da una lista di file sorgente
#CDays14 – Roma - 23, 24 e 25 Settembre 2014

15. demo
Build System con Gulp.JS e Karma
#CDays14 – Roma - 23, 24 e 25 Settembre 2014

16. E perchè no: Page Automation
• Phantom.JS oltre a svolgere la funzione di Headless
Website Testing a supporto di Karma, può essere
usato per eseguire Page Automation
• Page Automation è un ottimo modo di condurre
User Interface Testing
#CDays14 – Roma - 23, 24 e 25 Settembre 2014

17. Codice sorgente Demo
• https://github.com/robymes/WebApplicationTesting
#CDays14 – Roma - 23, 24 e 25 Settembre 2014

18. demo
Page Automation con PhantomJS
#CDays14 – Roma - 23, 24 e 25 Settembre 2014

19. Q&A
Tutto il materiale di questa sessione su
http://www.communitydays.it/
Lascia il feedback su questa sessione dal sito,
potrai essere estratto per i nostri premi!
Seguici su
Twitter @CommunityDaysIT
Facebook http://facebook.com/cdaysit
#CDays14
#CDays14 – Roma - 23, 24 e 25 Settembre 2014