i tool essenziali per lo sviluppo front-end e le automazioni che fanno la differenza per tutto il team (dove il team comprende anche il cliente).

1. #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

2. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
EGO slide
Alessandro Violini
Retro Computer
Ping Pong
Front-end Developer
Interaction Designer
2

3. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Front-end automation
3
Automatizzazione
di task e operazioni front-end
con lo scopo di velocizzare il nostro lavoro.
COSA

4. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Front-end automation
4
Task Runner
che ci permettono di configurare
ed eseguire i nostri tool
COME

5. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Front-end automation
5
Sentire il bisogno
di essere sollevati da operazioni di routine, avere
meccanismi per lavorare sicuro e condividere le
informazioni con tutto il team
PERCHE’

6. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
La mia esperienza
6
Web App e Web Site
Cross device
Cross platform
Cross browser
Progetti > 6 mesi
Team dinamico
Competenze diverse:
(UX, UI, Front-End, Back-End, Analisti, PManager)
Clienti diversi:
(PA, Giuridico, Finanziario, Aziende Software)

7. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Front-end automation
7
Rispondere al cambiamento
Rispondere a esigenze diverse con massimo riuso
ROI: Return On Investment
Riuso a diversi livelli
Supportare la dinamicità del team
Creare valore e diventare autonomi da subito
Sentirsi sicuri di non fare danni
Riutilizzare il più possibile cose già fatte
Manutenibile
Codice comprensibile a tutti
Nel breve e lungo termine
Obsolescenza dei strumenti e framework
Debito tecnico consapevole e condiviso

8. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Best Practices
8

9. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Best Practices
Struttura file SMACSS
9
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità

10. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Best Practices
OOCSS, Atomic Design, BEM
10
Risponde al cambiamento Manutenibilità

11. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools
11

12. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools
Task Runner: GRUNT
12
Risponde al cambiamento Manutenibilità

13. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools
Gestione delle dipendenze: NPM
13
Risponde al cambiamento Manutenibilità

14. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools
Gestione delle dipendenze: NPM
14

15. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools
CSS pre-processor: SASS
15
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità

16. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools
CSS pre-processor: SASS
16
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità

17. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools
COMPASS
17
Manutenibilità

18. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools
COMPASS: config.rb
18
Manutenibilità

19. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools
Modernizr
19
Risponde al cambiamento Manutenibilità

20. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools
Modernizr + Custom detection
20
Risponde al cambiamento Manutenibilità

21. #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à

22. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools
SVG Assets: SVG Min
22
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità

23. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools
SVG Assets: grunticon
23
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità

24. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools
Living Styleguide: KSS
24
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità

25. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools
Living Styleguide: KSS
25
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità

26. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools
Living Styleguide: KSS
26
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità
…

27. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools
Condivisione della palette colori: Palettable
27
Supporta la dinamicità del teamManutenibilità

28. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools
Pulizia del codice: UnCSS
28
Manutenibilità

29. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools
CSS post-processor: Pleeease
29
Risponde al cambiamento Manutenibilità

30. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Tools
CSS post-processors: Pleeease
30
Risponde al cambiamento Manutenibilità

31. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Test Tools
31

32. #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à

33. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Test Tools
CSS Validation: CSSLint
33
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità

34. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Test Tools
CSS Validation: CSSLint
34
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità

35. #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?

36. #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?

37. #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?

38. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Test Tools
Test Comparativi: Resemble.js
38
Risponde al cambiamento Supporta la dinamicità del teamManutenibilità

39. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Front-end automation
39
Risponde al cambiamento
aiutandomi a strutturare un progetto
malleabile e riusabile
Supporta la dinamicità del team
favorendo la disciplina nel codice e condividendo costantemente
lo stato dell’arte con tutte le figure professionali
E’ manutenibile
permettendo a chiunque di lavorarci
in breve tempo e in modo sicuro

40. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
Facciamo fare al computer
il lavoro da computer
40
Sfruttiamo gli automatismi
per condividere informazioni

41. #IAD15 - Brescia 07/11/2015 @Violo - e-xtrategy.net
GRAZIE!
41
twitter.com/violo
GitHub
github.com/Violo e-xtrategy.net
Twitter Web Site