come il front-end automation aiuta tutto il team
TRANSCRIPT
![Page 1: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/1.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Come il Front-end automation aiuta tutto il team
Alessandro Violini@violo - e-xtrategy.net
1
![Page 2: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/2.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
EGO slide
Alessandro Violini
Retro Computer Ping Pong
Front-end Developer Interaction Designer
2
![Page 3: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/3.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Front-end automation
3
Automatizzazionedi task e operazioni front-end
con lo scopo di velocizzare il nostro lavoro.
COSA
![Page 4: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/4.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Front-end automation
4
Task Runnerche ci permettono di configurare
ed eseguire i nostri tool
COME
![Page 5: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/5.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Front-end automation
5
Sentire il bisognodi essere sollevati da operazioni di routine, avere meccanismi per lavorare sicuro e condividere le
informazioni con tutto il team
PERCHE’
![Page 6: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/6.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
La mia esperienza
6
Web App e Web SiteCross device
Cross platformCross browser
Progetti > 6 mesiTeam dinamico
Competenze diverse:(UX, UI, Front-End, Back-End, Analisti, PManager)
Clienti diversi:(PA, Giuridico, Finanziario, Aziende Software)
![Page 7: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/7.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Front-end automation
7
Rispondere al cambiamentoRispondere a esigenze diverse con massimo riuso
ROI: Return On Investment Riuso a diversi livelli
Supportare la dinamicità del teamCreare valore e diventare autonomi da subito
Sentirsi sicuri di non fare danni Riutilizzare il più possibile cose già fatte
ManutenibileCodice comprensibile a tutti Nel breve e lungo termine
Obsolescenza dei strumenti e framework Debito tecnico consapevole e condiviso
![Page 8: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/8.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Best Practices
8
![Page 9: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/9.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Best Practices Struttura file SMACSS
9
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
![Page 10: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/10.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Best Practices OOCSS, Atomic Design, BEM
10
Risponde al cambiamento Manutenibilità
![Page 11: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/11.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools
11
![Page 12: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/12.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools Task Runner: GRUNT
12
Risponde al cambiamento Manutenibilità
![Page 13: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/13.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools Gestione delle dipendenze: NPM
13
Risponde al cambiamento Manutenibilità
![Page 14: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/14.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools Gestione delle dipendenze: NPM
14
![Page 15: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/15.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools CSS pre-processor: SASS
15
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
![Page 16: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/16.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools CSS pre-processor: SASS
16
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
![Page 17: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/17.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools COMPASS
17
Manutenibilità
![Page 18: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/18.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools COMPASS: config.rb
18
Manutenibilità
![Page 19: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/19.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools Modernizr
19
Risponde al cambiamento Manutenibilità
![Page 20: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/20.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools Modernizr + Custom detection
20
Risponde al cambiamento Manutenibilità
![Page 21: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/21.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools SVG Assets: SVGeezy, SVG Min e GruntIcon
21
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
![Page 22: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/22.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools SVG Assets: SVG Min
22
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
![Page 23: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/23.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools SVG Assets: grunticon
23
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
![Page 24: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/24.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools Living Styleguide: KSS
24
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
![Page 25: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/25.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools Living Styleguide: KSS
25
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
![Page 26: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/26.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools Living Styleguide: KSS
26
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
…
![Page 27: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/27.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools Condivisione della palette colori: Palettable
27
Supporta la dinamicità del teamManutenibilità
![Page 28: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/28.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools Pulizia del codice: UnCSS
28
Manutenibilità
![Page 29: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/29.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools CSS post-processor: Pleeease
29
Risponde al cambiamento Manutenibilità
![Page 30: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/30.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools CSS post-processors: Pleeease
30
Risponde al cambiamento Manutenibilità
![Page 31: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/31.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Test Tools
31
![Page 32: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/32.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Test Tools Markup Validation: HTML W3C Validator
32
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
![Page 33: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/33.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Test Tools CSS Validation: CSSLint
33
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
![Page 34: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/34.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Test Tools CSS Validation: CSSLint
34
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
![Page 35: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/35.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Test Tools VTDD: Visual Test Driven Development con Galen
35
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
Complica le cose?
![Page 36: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/36.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Test Tools VTDD: Visual Test Driven Development con Galen
36
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
Complica le cose?
![Page 37: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/37.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Test Tools VTDD: Visual Test Driven Development con Galen
37
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
Complica le cose?
![Page 38: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/38.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Test Tools Test Comparativi: Resemble.js
38
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
![Page 39: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/39.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Front-end automation
39
Risponde al cambiamentoaiutandomi a strutturare un progetto
malleabile e riusabile
Supporta la dinamicità del teamfavorendo la disciplina nel codice e condividendo costantemente
lo stato dell’arte con tutte le figure professionali
E’ manutenibilepermettendo a chiunque di lavorarci
in breve tempo e in modo sicuro
![Page 40: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/40.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Facciamo fare al computer il lavoro da computer
40
Sfruttiamo gli automatismi per condividere informazioni
![Page 41: come il front-end automation aiuta tutto il team](https://reader034.vdocuments.net/reader034/viewer/2022042707/58e938551a28ab84768b4fbb/html5/thumbnails/41.jpg)
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
GRAZIE!
41
twitter.com/violo
GitHubgithub.com/Violo e-xtrategy.net
Twitter Web Site