Code quality e test automatizzati con JavaScript
-
Upload
roberto-messora -
Category
Technology
-
view
107 -
download
2
Transcript of Code quality e test automatizzati con JavaScript
![Page 1: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/1.jpg)
WEB05 – Code quality e test automatizzati con JavaScriptRoberto Messora
[email protected] - @robymes
http://blogs.ugidotnet.org/robymes
![Page 2: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/2.jpg)
#CDays15 – Milano 24, 25 e 26 Marzo 2015
Grazie a
PlatinumSponsor
![Page 3: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/3.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
Agenda
• Qualità
• Struttura
• Strumenti
• Build
• Automazione
![Page 4: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/4.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
![Page 5: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/5.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
Code quality
• JavaScript 2015: abbiamo a disposizione molta potenza di fuoco per sviluppare le nostre applicazioni, decine di framework e librerie
• Ma “La potenza è nulla senza controllo”: dobbiamo assicurarci che ilnostro codice sia di qualità• Non presenti gli errori e le criticità più comuni insite nel linguaggio
• Si attenga a pratiche di buon design (patterns, patterns, patterns)
• Sia privo di difetti funzionali e non funzionali (unit & integration testing)
![Page 6: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/6.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
“Questa è struttura”
![Page 7: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/7.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
Struttura della soluzione JavaScript
![Page 8: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/8.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
Patterns
![Page 9: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/9.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
JavaScript design & idiom patterns
• Affidarsi sempre a pratiche di buon design anche per applicazioni di piccola entità
• Sfruttare i pattern idiomatici più importanti di JavaScript• Module pattern
• Scegliere e applicare un presentation pattern come base fondantedello sviluppo della logica client• MVC
• MVVM
• Functional Event Stream (React, Bacon, …)
![Page 10: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/10.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
Strumenti
![Page 11: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/11.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
Node.JS, Npm, Bower
• Node.JS NON è solo un ottimo web server
• Node.JS è ANCHE un ambiente di processo in cui far girare moduli applicativi
• Npm è il package manager più diffuso in ambito sviluppo JavaScript, permette di gestire il download e l’installazione dei moduli applicativi Node.JS
• Bower è uno dei più utilizzati library & framework manager, permette di gestire il download e l’installazionedelle librerie JavaScript di terze parti
![Page 12: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/12.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
demoInstallare gli strumenti e le librerie
![Page 13: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/13.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
“Cerbero, fiera crudele e diversa”
![Page 14: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/14.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
JSLint
• Quando si parla di JavaScript code quality JSLint è il Re dei Re
• Ideato e implementato da Duoglas Crockford forse la massimaautorità mondiale in fatto di linguaggio JavaScript
• Sostanzialmente è un sesquipedale rompiballe fondamentalecontrollore della qualità del codice scritto
• Scova e segnala i più comuni errori• Strutturazione del codice
• Verifica delle specificità del linguaggio (hoisting, …)
• Potenziali criticità legate alle Bad Parts di JavaScript
![Page 15: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/15.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
![Page 16: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/16.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
Jasmine BDD
• Jasmine è uno dei numerosi framework di unit testing per JavaScript
• È fortemente orientato al BDD (Behavior Driven Development)
• Offre un ottimo supporto al mocking e al test-double
• Permette di testare codice asincrono
![Page 17: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/17.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
Karma (adattamento del termine sanscrito kārma (devanagari: कार्म), aggettivo derivante dal sostantivo neutro karman (devanagari: कर्मन)्)
![Page 18: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/18.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
Karma
• Karma è un ambiente integrato di esecuzione di test
• È in grado di eseguire test dei più diffusi framework di unit testing (Mocha, Jasmine, QUnit)
• Permette di testare il codice su tutti i browser più importanti pilotandone l’esecuzione(compreso Phantom.JS)
• Il suo funzionamento è basato su file di configurazione json
![Page 19: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/19.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
demoUnit testing
![Page 20: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/20.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
Build
![Page 21: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/21.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
Processo di build
• Il codice che scriviamo NON è lo stesso che va in produzione (vero?!?)
• Anche solo la minificazione del codice modifica il sorgente che verràinterpretato ed eseguito dal browser rispetto alla versione scrittadallo sviluppatore
• È necessario testare il codice di produzione esattamente come quellodi sviluppo
• Si prospetta quindi un vero e proprio processo di build che coinvolgela minificazione e il test del codice minificato
![Page 22: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/22.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
Automazione
![Page 23: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/23.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
Automazione della build
• Il processo di build è operativamente oneroso e a bassissimo valore aggiunto per lo sviluppatore
• È necessario trovare il modo di automatizzare l’intero processo nelmodo più semplice e ripetibile possibile
![Page 24: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/24.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
![Page 25: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/25.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
Gulp! Devo automatizzare :-S
• Gulp è un ambiente di esecuzione di task di processo
• È basato sul concetto di plug-in ognuno dei quali permette di eseguire una particolare operazione (minificazione, test, rename, copy, … ci sono letteralmente migliaia di plug-in)
• Ogni task si basa su uno stream di file (lista di file sorgente) su cui vengono applicate le singole operazioni sequenzialmente
• Il suo funzionamento è basato su file di configurazione json
![Page 26: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/26.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
demoAutomatizzare il processo di build
![Page 27: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/27.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
Ci sarebbe anche la Page Automation…
• Se volessimo (ma proprio se volessimo) completare il processo di verifica della qualità del codice sarebbe necessario anche testare l’applicazione web finale
• Esistono alcuni tool che permettono di pilotare tramite scripting replicabile le azioni da eseguire sulla pagina web e verificarne ilrisultato• Phantom.JS
• Selenium
![Page 28: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/28.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
Un po’ di autopromozione ;-)
![Page 29: Code quality e test automatizzati con JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a93ec81a28abb5758b491d/html5/thumbnails/29.jpg)
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
Q&A
Tutto il materiale di questa sessione suhttp://www.communitydays.it/
Lascia subito il feedback su questa sessione,potrai essere estratto per i nostri premi!
Seguici suTwitter @CommunityDaysITFacebook http://facebook.com/cdaysit#CDays15