#CDays14 – Milano 25, 26 e 27 Febbraio 2014

WEB05 - SINGLE PAGE APPLICATIONS: COME? COSA? PERCHÉ?

Roberto Messora

roberto@messora.com - @robymes

#CDays14 – Milano 25, 26 e 27 Febbraio 2014

Grazie a

Sponsor

#CDays14 – Milano 25, 26 e 27 Febbraio 2014

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

Prima di tutto: di cosa non parleremoMettiamo le mani avanti

#CDays14 – Milano 25, 26 e 27 Febbraio 2014

#CDays14 – Milano 25, 26 e 27 Febbraio 2014

#CDays14 – Milano 25, 26 e 27 Febbraio 2014

#CDays14 – Milano 25, 26 e 27 Febbraio 2014

Di cosa parleremoSiamo dev dopo tutto

#CDays14 – Milano 25, 26 e 27 Febbraio 2014

#CDays14 – Milano 25, 26 e 27 Febbraio 2014

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

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

Come: una scelta difficile• Non esiste un modo univoco per sviluppare una SPA: 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

demoDa zero a SPA in 30 secondi netti

#CDays14 – Milano 25, 26 e 27 Febbraio 2014

Come: sicurezza, il mostro della palude

Browser Dev Tools

Cookies

#CDays14 – Milano 25, 26 e 27 Febbraio 2014

demoCookies e F12 (no, non sono i biscotti dei Top Gun)

#CDays14 – Milano 25, 26 e 27 Febbraio 2014

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

demoSPA che non sono SPA, piuttosto MPA (Multiple Page Application)

#CDays14 – Milano 25, 26 e 27 Febbraio 2014

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

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

demoScheletro strutturale di una solution SPA

#CDays14 – Milano 25, 26 e 27 Febbraio 2014

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

demoJavascript Unit testing

#CDays14 – Milano 25, 26 e 27 Febbraio 2014

Q&ATutto 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