come il front-end automation aiuta tutto il team

transcript

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

Come il Front-end automation aiuta tutto il team

Alessandro Violini@violo - e-xtrategy.net

EGO slide

Alessandro Violini

Retro Computer Ping Pong

Front-end Developer Interaction Designer

Front-end automation

Automatizzazionedi task e operazioni front-end

con lo scopo di velocizzare il nostro lavoro.

Task Runnerche ci permettono di configurare

ed eseguire i nostri tool

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

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)

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

Best Practices Struttura file SMACSS

Risponde al cambiamento Supporta la dinamicità del teamManutenibilità

Best Practices OOCSS, Atomic Design, BEM

Risponde al cambiamento Manutenibilità

Tools Task Runner: GRUNT

Tools Gestione delle dipendenze: NPM

Tools CSS pre-processor: SASS

Tools COMPASS

Manutenibilità

Tools COMPASS: config.rb

Manutenibilità

Tools Modernizr

Tools Modernizr + Custom detection

Tools SVG Assets: SVGeezy, SVG Min e GruntIcon

Tools SVG Assets: SVG Min

Tools SVG Assets: grunticon

Tools Living Styleguide: KSS

Tools Condivisione della palette colori: Palettable

Supporta la dinamicità del teamManutenibilità

Tools Pulizia del codice: UnCSS

Manutenibilità

Tools CSS post-processor: Pleeease

Tools CSS post-processors: Pleeease

Test Tools

Test Tools Markup Validation: HTML W3C Validator

Test Tools CSS Validation: CSSLint

Test Tools VTDD: Visual Test Driven Development con Galen

Complica le cose?

Test Tools Test Comparativi: Resemble.js

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

Sfruttiamo gli automatismi per condividere informazioni

GRAZIE!

twitter.com/violo

GitHubgithub.com/Violo e-xtrategy.net

Twitter Web Site