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

http://e-xtrategy.net


EGO slide

Alessandro Violini

Retro Computer Ping Pong

Front-end Developer Interaction Designer

2


Front-end automation

3

Automatizzazionedi task e operazioni front-end

con lo scopo di velocizzare il nostro lavoro.

COSA



4

Task Runnerche ci permettono di configurare

ed eseguire i nostri tool

COME



5

Sentire il bisognodi essere sollevati da operazioni di routine, avere meccanismi per lavorare sicuro e condividere le

informazioni con tutto il team

PERCHE’


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)



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


Best Practices

8


Best Practices Struttura file SMACSS

9

Risponde al cambiamento Supporta la dinamicità del teamManutenibilità


Best Practices OOCSS, Atomic Design, BEM

10

Risponde al cambiamento Manutenibilità


Tools

11


Tools Task Runner: GRUNT

12



Tools Gestione delle dipendenze: NPM

13



Tools Gestione delle dipendenze: NPM

14


Tools CSS pre-processor: SASS

15



Tools CSS pre-processor: SASS

16



Tools COMPASS

17

Manutenibilità


Tools COMPASS: config.rb

18

Manutenibilità


Tools Modernizr

19



Tools Modernizr + Custom detection

20



Tools SVG Assets: SVGeezy, SVG Min e GruntIcon

21



Tools SVG Assets: SVG Min

22



Tools SVG Assets: grunticon

23



Tools Living Styleguide: KSS

24




25




26


…


Tools Condivisione della palette colori: Palettable

27

Supporta la dinamicità del teamManutenibilità


Tools Pulizia del codice: UnCSS

28

Manutenibilità


Tools CSS post-processor: Pleeease

29



Tools CSS post-processors: Pleeease

30



Test Tools

31


Test Tools Markup Validation: HTML W3C Validator

32



Test Tools CSS Validation: CSSLint

33



Test Tools CSS Validation: CSSLint

34



Test Tools VTDD: Visual Test Driven Development con Galen

35


Complica le cose?



36


Complica le cose?



37


Complica le cose?


Test Tools Test Comparativi: Resemble.js

38




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


Facciamo fare al computer il lavoro da computer

40

Sfruttiamo gli automatismi per condividere informazioni


GRAZIE!

41

twitter.com/violo

GitHubgithub.com/Violo e-xtrategy.net

Twitter Web Site

https://twitter.com/violo

https://github.com/Violo

http://www.e-xtrategy.net

Date post:	09-Apr-2017
Category:	Software
Upload:	extrategy
View:	1,390 times
Download:	0 times