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 proveremo a capire che cosa sia una SPA a partire dal ruolo centrale che riveste Javascript sia in termini di librerie di base che di organizzazione del codice applicativo. Affronteremo anche temi inerenti la UI, i servizi di back-end, lo unit testing, la security, il mobile in modo da offrire un panorama completo di che cosa sia in effetti una SPA HTML5.

1. WEB05 - SINGLE PAGE
APPLICATIONS: COME?
COSA? PERCHÉ?
Roberto Messora
roberto@messora.com - @robymes
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

2. Grazie a
Sponsor
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

3. Agenda
•
Cosa
•
Perché
•
Come
 Considerazioni sulla Sicurezza: il mostro della palude, quando client e
server non possono essere sviluppati a sentimento
 Patterns, patterns, patterns: che barba, che noia
 Test: se ne parla sempre alla fine
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

4. Prima di tutto: di cosa
non parleremo
Mettiamo le mani avanti
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

5. #CDays14 – Milano 25, 26 e 27 Febbraio 2014

6. #CDays14 – Milano 25, 26 e 27 Febbraio 2014

7. #CDays14 – Milano 25, 26 e 27 Febbraio 2014

8. Di cosa parleremo
Siamo dev dopo tutto
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

9. #CDays14 – Milano 25, 26 e 27 Febbraio 2014

10. 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 e complessa
•
Una SPA si caratterizza lato client per l’utilizzo di
tecnologie di ultima generazione:
 HTML5
 CSS3
 Javascript
•
Parlando di SPA non va sottovalutato il back-end lato server
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

11. Perché
•
La ragione principale per scegliere di sviluppare una SPA sta nella
ricchezza dell’esperienza utente erogata:
 L’uso di chiamate Ajax Javascript asincrone verso il back-end permette di
interagire con il server senza fastidiosi refresh della pagina, lasciando percepire
da parte dell’utente l’applicazione web come più responsiva, più veloce
 Le nuove tecnologie visuali web lato client (CSS3, Canvas, ecc.) supportate dai
browser di ultima generazione, permettono una esperienza utente
praticamente identica a quella di un’applicazione desktop
 Praticamente ogni sito web fra i più utilizzati è strutturato come una SPA
(Facebook, Twitter, …), l’utente si aspetta una esperienza utente simile
 Una SPA permette una migliore usabilità di un sito web in formato mobile
perché a seguito del primo accesso permette di ridurre al minimo l’uso della
linea dati perché evita di dover scaricare la UI ad ogni post-back
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

12. Come: una scelta difficile
• Non
SPA:
esiste un modo univoco per sviluppare una
 Esistono decine di framework Javascript su cui è possibile
basare una SPA (fare un giro su http://todomvc.com/ per
rendersene conto)
 Sono molteplici anche le opzioni di tecnologia utilizzabile
lato server, ad esempio varie declinazioni dello stack
ASP.NET (classico + WCF, MVC) oppure Node.JS, quasi
sempre implementati come endpoint di servizi REST/JSON
 Esiste anche la possibilità di utilizzare basi dati non
relazionali che forniscono nativamente un accesso REST
alle proprie funzionalità di query e archiviazione
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

13. demo
Da zero a SPA in 30 secondi netti
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

14. Come: sicurezza, il mostro della
palude
Cookies
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
Browser Dev
Tools

15. demo
Cookies e F12 (no, non sono i biscotti dei Top Gun)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

16. Come: sicurezza, le regole
•
Regola Numero 1: Javascript e sicurezza sono due concetti
estremamente distanti soprattutto quando nel browser hai a
disposizione il tasto F12
•
Regola Numero 2: Qualsiasi decisione di design di una SPA
parte dall’aver imparato la Regola Numero 1
•
Regola Numero 3: Alle luce della Regola Numero 1 e della
Regola Numero 2 si evince che una SPA non è quasi mai
composta da una unica pagina (quindi una SPA non è una
SPA…)
•
Regola Numero 4: usare SEMPRE HTTPS
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

17. demo
SPA che non sono SPA, piuttosto MPA (Multiple Page Application)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

18. Come: sicurezza, difendersi
•
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
•
Difendersi lato client: un modo per mitigare e rendere difficile la vita a
chi volesse forzare la sicurezza o appropriarsi della proprietà
intellettuale è quello della minificazione o della compilazione delle
risorse Javascript
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

19. Come: patterns, patterns, patterns
•
Una SPA può facilmente diventare abbastanza complessa da
richiedere una certa disciplina nello sviluppo Javascript in
termini di:




Organizzazione della codebase
Separazione delle responsabilità
Coding standard: JSLint non è sindacabile
Design Patterns:





Namespace
Self executing functions
Module pattern
AMD: Asynchronous Module Definition (es. Require JS)
Anchor pattern (gestire la cronologia del browser, SEO)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

20. demo
Scheletro strutturale di una solution SPA
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

21. Come: Javascript 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 Phantom JS
 Integrare le suite di Test in ambienti di Continuous Integration
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

22. demo
Javascript Unit testing
#CDays14 – Milano 25, 26 e 27 Febbraio 2014

23. Q&A
Tutto il materiale di questa sessione su
http://www.communitydays.it/
Lascia il feedback su questa sessione,
potrai essere estratto per i nostri premi!
Seguici su
Twitter @CommunityDaysIT
Facebook http://facebook.com/cdaysit
#CDays14
#CDays14 – Milano 25, 26 e 27 Febbraio 2014