Tech Webinar: Come ottimizzare il workflow nello sviluppo di Web App

Luciano MurruniComtaste S.r.l

Senior Software Developer @jimilucio

[email protected] www.comtaste.com

Come ottimizzare il workflow

di web app con Javascript

http://www.comtaste.com

2

Argomenti trattati:- Strumenti e tool a disposizione per velocizzare e migliorare la

scrittura e la qualità del software

- Cos'è Yeoman e come si può usare per la nostra applicazione

- Cos'è Bower e perché diventa fondamentale per gestire le dipendenze di progetto

- Cos'è Grunt/Gulp, ed in che modo ci aiuta ad automatizzare i nostri task

- Come si effettua il test del nostro codice

- Come si crea un pacchetto ottimizzato per il rilascio in produzione

Come ottimizzare il workflow di web app con javascript

3

Frameworks


PatternCoding

Test Optimizzation

Version control

Dependency Analysis

Planning

Docs

Build

Continuous Integration

Management

4


5


Come migliorare il workflow per lo sviluppo?

• Snellire la fase di inizializzazione e configurazione di un nuovo progetto

• Utilizzare strumenti per gestire tutte le dipendenze

• Applicare le best practices

• Preparare i tool di sviluppo

• Evitare che si creino casi di regressione del codice

• Ottimizzare i processi di rilascio

6

Il fattore chiave per lo sviluppo di una buona applicazione è il tempo di realizzazione.


7


Automatizzare tutte le attività ripetitive durante la fase di sviluppo di un’applicazione

diventa fondamentale!

8


Ottimizzando il processo di sviluppo si risparmia del tempo che possiamo investire

in altre attività per migliorare la nostra app.

9

Come ottimizzare il workflow di web app con javascriptTool a disposizione

per velocizzare e migliorare scrittura e qualità del software

10

Yeoman


11


Yeoman è composta da 3 “core-tools”

• yo: strumento che offre un ecosistema di framework e template specifici, chiamati generators.

• bower è usato per la gestione delle dipendenze del progetto, quindi la gestione è completamente automatizzata.

• grunt/gulp è usato per preview, controllo del codice, compressione, test del progetto, etc.

12


Prerequisiti per il funzionamento di Yeoman

• Applicazione Stand-alone

• Utilizza V8, motore javascript di Chrome

• Abilita il comando ‘npm’

Sito ufficiale: http://nodejs.org/

http://nodejs.org/

13


Installazione di Yeoman

Sito ufficiale: http://yeoman.io/

Direttamente da riga di comando dopo aver installato node:$ npm install -‐g yo bower grunt-‐cli gulp

http://yeoman.io/

14


Generatori di YO

Altri generatori: http://yeoman.io/generators/

Aggiungere il generatore di AngularJS$ npm install -‐g generator-‐angular

$ npm uninstall -‐g generator-‐angular

Rimuovere il generatore di AngularJS

http://yeoman.io/generators/

15


Uso del generatore Angular

Lista completa dei comandi: https://github.com/yeoman/generator-angular

Iniziare un nuovo progetto con il generatore angular$ yo angular

$ yo angular:route myroute

Aggiungere un nuovo routing al progetto

$ yo angular:controller mycontroller

Aggiungere un nuovo controller al progetto

https://github.com/yeoman/generator-angular

16


Comandi per l’utilizzo di Bower

Sito ufficiale: http://bower.io/

Installazione da repository bower$ bower install —save-‐dev <package>

Installazione da repository git$ bower install git://github.com/user/package.git

Rimuovere una dipendenza$ bower uninstall —save-‐dev <package>

http://bower.io/

git://github.com/user/package.git

17


Utilizzo di Grunt

Sito ufficiale: http://gruntjs.com/

Installazione di un plugin$ npm install grunt-‐contrib-‐jshint -‐-‐save-‐dev

Inclusione di un plugin nel Gruntfile.jsgrunt.loadNpmTasks('grunt-‐contrib-‐jshint');

http://gruntjs.com/

18


Utilizzo di Grunt

Creazione di un task nel Gruntfile.jsjshint: {

options: {

jshintrc: '.jshintrc',

reporter: require('jshint-‐stylish')

},

all: [

'Gruntfile.js',

'<%= config.app %>/scripts/{,*/}*.js',

'!<%= config.app %>/scripts/vendor/*',

'test/spec/{,*/}*.js'

]

},

19


Utilizzo di Grunt

Come lanciare un task$ grunt jshint

20


Vantaggi nell’uso di Yeoman

• YO ha più di 1350 generatori

• YO ci consente di creare il nostro generatore

• Bower gestisce le dipendenze del progetto

• Grunt compila Sass, Less, CoffeeScript, etc.

• Grunt minimizza e concatena CSS, JS, HTML

• Grunt ottimizza immagini (jpg,png,gif)

• Grunt crea un semplice web server nella directory corrente

21

Differenza tra Grunt e Gulp


vs

22


• Semplice da configurare

• Molto più veloce nell’esecuzione dei task

• I task sono eseguiti in modo asincrono

• Basato sul concetto di stream build, non crea .temp file

• Fase di configurazione articolata

• I task sono eseguiti esclusivamente dai plugin installati

• Vanta numerosissimi plugin ed una community vasta

GruntGulp

https://github.com/substack/stream-handbook

Differenza tra Grunt e Gulp

https://github.com/substack/stream-handbook

23

Scrittura del codice

Scegliamo l’editor di testo più adatto alle nostre esigenze!

WebStorm

Coda

SublimeText

Eclipse

Notepad++


24

Semplici motivi per utilizzare Sublime Text

• E’ gratuito

• Interfaccia semplice ed intuitiva.

• Estremamente veloce, si apre e si richiude in meno di 10 secondi

• Disponibile per OS X, Windows, Linux

• Consente di installare componenti aggiuntivi in modo semplice

Link al sito web: http://www.sublimetext.com/


http://www.sublimetext.com/

25

Package Control: https://packagecontrol.io/

Sublime Text - Package Control

Command + P (OS X) o Control + P (Linux/Windows)


https://packagecontrol.io/

26

Sublime Text - JSHint Gutter

JSHint Gutter: https://packagecontrol.io/packages/JSHint%20Gutter


https://packagecontrol.io/packages/JSHint%20Gutter

27

Sublime Text - JS Beautify

JS Beautify: https://packagecontrol.io/packages/Javascript%20Beautify


https://packagecontrol.io/packages/Javascript%20Beautify

28

Sublime Text - GIT

JS Beautify: https://packagecontrol.io/packages/Javascript%20Beautify


https://packagecontrol.io/packages/Javascript%20Beautify

29

Effettuare il test dell’applicazione

Jasmine

CasperJS

jQ Unit Karma

Selenium


30

Tipologia dei Test

• Unit Testing

• Visual regression testing / e2e test


31

Unit test con Karma

Karma: http://karma-runner.github.io/


Installazione a livello locale$ npm install karma -‐-‐save-‐dev

Plugin necessari per il test dell’app$ npm install karma-‐jasmine karma-‐chrome-‐launcher -‐-‐save-‐dev

Installazione globale di Karma$ npm install -‐g karma-‐cli

http://karma-runner.github.io/

32

Configurare Karma


// karma.conf.js

module.exports = function(config) {

config.set({

basePath: '../..',

frameworks: ['jasmine'],

//...

});

};

Configurazione di Karma : http://goo.gl/DLiYm8

http://goo.gl/DLiYm8

33

Unit test con Karma


Jasmine: http://jasmine.github.io/

http://jasmine.github.io/

34

E2E test con Protractor

Protractor: http://angular.github.io/protractor/#/


Installazione globale di Protractor$ npm install -‐g protractor

Installare i componenti grunt$npm install —save-‐dev grunt-‐protractor-‐runner

$npm install —save-‐dev grunt-‐protractor-‐webdriver

http://angular.github.io/protractor/#/

35

Configurazione di Protractor


36

Grunt-Protractor


protractor: {

options: {

configFile: ‘referenceConf.js',

keepAlive: true,

noColor: false,

args: {// Arguments passed to the command}

},

your_target: {

options: {

configFile: 'test/e2e.conf.js',

args: {} // Target-‐specific arguments

}

},

},

37

Grunt-Protractor


grunt.registerTask('e2e-‐test', ['protractor_webdriver', 'protractor']);

Registrare il task per gli e2e test

$ grunt e2e-‐test

Lanciare il test

38

Altri strumenti per gli e2e test


39

Documentazione del codice


JSDoc Docco doxx

YUIDoc

40

ngDoc per la doc del codice AngularJS


Link al sito web: https://www.npmjs.com/package/grunt-ngdocs

$ npm install grunt-‐ngdocs -‐-‐save-‐dev

Installare il componente

grunt.loadNpmTasks('grunt-‐ngdocs');

Load del task all’interno del Gruntfile.js

ngdocs: {

all: ['src/**/*.js']

}

Istruire il task nel Gruntfile.js

https://www.npmjs.com/package/grunt-ngdocs

41

Il rilascio in produzione con Grunt


$ grunt serve:dist

Basta lanciare il task con la build

42

Brunch


Link al sito web: http://brunch.io/

• Semplice da installare e configurare

• Ancora ha pochi generatori

• Non ha un supporto e una community vasta

• Usa grunt

http://brunch.io/

43


Ci aiuta a costruire siti web ed applicazioni in modo rapido. • Solo per OS X • Compila Coffeescript, Sass, etc. • Autorefresh del browser • Usa Bower • No command line and zero setup

Link al sito web: https://incident57.com/codekit/

Codekit

https://incident57.com/codekit/

44


• Supporta sass, CoffeeScript, HAML & Markdown.

• Ottimizza il sorgente prima della pubblicazione

• Auto Reload

Hammer for Mac

Link al sito web: http://hammerformac.com/

http://hammerformac.com/

45


• Compila LESS, Sass, Stylus, CoffeeScript, Jade e molto altro.

• Ha un server integrato per test cross-browser.

• Funziona su Windows, Mac e Linux

Prepos.io

Link al sito web: https://prepros.io/

https://prepros.io/

46


• Compila Less, Sass e CoffeeScript, etc.

• Molto efficiente per lo sviluppo di web application.

• Funziona su Windows, Linux e Mac.

Koala-app

Link al sito web: http://koala-app.com/

http://koala-app.com/

Luciano MurruniComtaste S.r.l

Senior Software Developer @jimilucio

[email protected] www.comtaste.com

Grazie!

http://www.comtaste.com

Tech Webinar: Come ottimizzare il workflow nello sviluppo di Web App

Technology

Transcript of Tech Webinar: Come ottimizzare il workflow nello sviluppo di Web App