Single Page web Application

7,379 views

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,379
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
31
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Slide da mostrare prima di iniziare la sessione – non rimuovere!
  • Ultima slide, obbligatoria
  • Single Page web Application

    1. 1. WEB05 - SINGLE PAGE APPLICATIONS: COME? COSA? PERCHÉ? Roberto Messora roberto@messora.com - @robymes #CDays14 – Milano 25, 26 e 27 Febbraio 2014
    2. 2. Grazie a Sponsor #CDays14 – Milano 25, 26 e 27 Febbraio 2014
    3. 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. 4. Prima di tutto: di cosa non parleremo Mettiamo le mani avanti #CDays14 – Milano 25, 26 e 27 Febbraio 2014
    5. 5. #CDays14 – Milano 25, 26 e 27 Febbraio 2014
    6. 6. #CDays14 – Milano 25, 26 e 27 Febbraio 2014
    7. 7. #CDays14 – Milano 25, 26 e 27 Febbraio 2014
    8. 8. Di cosa parleremo Siamo dev dopo tutto #CDays14 – Milano 25, 26 e 27 Febbraio 2014
    9. 9. #CDays14 – Milano 25, 26 e 27 Febbraio 2014
    10. 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. 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. 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. 13. demo Da zero a SPA in 30 secondi netti #CDays14 – Milano 25, 26 e 27 Febbraio 2014
    14. 14. Come: sicurezza, il mostro della palude Cookies #CDays14 – Milano 25, 26 e 27 Febbraio 2014 Browser Dev Tools
    15. 15. demo Cookies e F12 (no, non sono i biscotti dei Top Gun) #CDays14 – Milano 25, 26 e 27 Febbraio 2014
    16. 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. 17. demo SPA che non sono SPA, piuttosto MPA (Multiple Page Application) #CDays14 – Milano 25, 26 e 27 Febbraio 2014
    18. 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. 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. 20. demo Scheletro strutturale di una solution SPA #CDays14 – Milano 25, 26 e 27 Febbraio 2014
    21. 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. 22. demo Javascript Unit testing #CDays14 – Milano 25, 26 e 27 Febbraio 2014
    23. 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

    ×