#CDays14 – Roma - 23, 24 e 25 Settembre 2014

WEB02 – Single Page Applications

Roberto Messora

roberto@messora.com - @robymes

#CDays14 – Roma - 23, 24 e 25 Settembre 2014

Grazie a

Sponsor

#CDays14 – Roma - 23, 24 e 25 Settembre 2014

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

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

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

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

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

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

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

demoScheletro strutturale di una solution SPA

#CDays14 – Roma - 23, 24 e 25 Settembre 2014

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

demoJavascript Unit Testing con Jasmine

#CDays14 – Roma - 23, 24 e 25 Settembre 2014

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

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

demoBuild System con Gulp.JS e Karma

#CDays14 – Roma - 23, 24 e 25 Settembre 2014

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

Codice sorgente Demo

• https://github.com/robymes/WebApplicationTesting

#CDays14 – Roma - 23, 24 e 25 Settembre 2014

demoPage Automation con PhantomJS

#CDays14 – Roma - 23, 24 e 25 Settembre 2014

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