come il front-end automation aiuta tutto il team
Transcript of come il front-end automation aiuta tutto il team
#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
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
EGO slide
Alessandro Violini
Retro Computer Ping Pong
Front-end Developer Interaction Designer
2
#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
#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
#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’
#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)
#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
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Best Practices
8
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Best Practices Struttura file SMACSS
9
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Best Practices OOCSS, Atomic Design, BEM
10
Risponde al cambiamento Manutenibilità
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools
11
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools Task Runner: GRUNT
12
Risponde al cambiamento Manutenibilità
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools Gestione delle dipendenze: NPM
13
Risponde al cambiamento Manutenibilità
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools Gestione delle dipendenze: NPM
14
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools CSS pre-processor: SASS
15
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools CSS pre-processor: SASS
16
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools COMPASS
17
Manutenibilità
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools COMPASS: config.rb
18
Manutenibilità
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools Modernizr
19
Risponde al cambiamento Manutenibilità
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools Modernizr + Custom detection
20
Risponde al cambiamento Manutenibilità
#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à
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools SVG Assets: SVG Min
22
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools SVG Assets: grunticon
23
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools Living Styleguide: KSS
24
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools Living Styleguide: KSS
25
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools Living Styleguide: KSS
26
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
…
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools Condivisione della palette colori: Palettable
27
Supporta la dinamicità del teamManutenibilità
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools Pulizia del codice: UnCSS
28
Manutenibilità
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools CSS post-processor: Pleeease
29
Risponde al cambiamento Manutenibilità
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools CSS post-processors: Pleeease
30
Risponde al cambiamento Manutenibilità
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Test Tools
31
#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à
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Test Tools CSS Validation: CSSLint
33
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Test Tools CSS Validation: CSSLint
34
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
#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?
#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?
#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?
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Test Tools Test Comparativi: Resemble.js
38
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
#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
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Facciamo fare al computer il lavoro da computer
40
Sfruttiamo gli automatismi per condividere informazioni
#IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
GRAZIE!
41
twitter.com/violo
GitHubgithub.com/Violo e-xtrategy.net
Twitter Web Site