Managing Quality inthe Front End World

Moscaritolo Marco Vito

/me

• Web developer *• Consulente partime **• Cazzeggiatore partime ***• Mobile addicted

(chevvordì? Senza il cell non sopravvivo)

• SparkFabrik GMBH founder

* Ormai molto meno** Il che vuol dire abbastanza “tempo libero”*** Usando il tempo libero da **, soprattutto per “sperimentare cose nuove”

Il ciclo di lavoro

Richiesta

Progettazione

Sviluppo

Test

Rilascio

Bug fixing

PROGETTAZIONEFigata, ma….

In realtà qui il grigio è un po’ più grigio del grigio che trovi in home, ma un po’ meno grigio del grigio del footer che trovi nella splash page.. Insomma quasi uguale al grigio nei bordi del form che trovi nella pagina contact us!Whaaaat??

SVILUPPOFigata, ma….

Whaaaat??

BUG FIXING :-(

OK……e quindi?

LIVE STYLEGUIDE

• Kss-nodehttp://kss-node.github.io/kss-node/

• Syledoccohttps://github.com/jacobrask/styledocco/

• SC5 Styleguidehttp://styleguide.sc5.io/

• http://styleguides.io/

VISUAL REGRESSION TESTING

– Diffuxhttps://github.com/diffux/diffux

– Dpxdthttps://github.com/bslatkin/dpxdt

– PhantomCSShttps://github.com/Huddle/PhantomCSS

PhantomCSS

PERFORMANCE MONITORINGhttp://sitespeed.io/

(style guide + visual regression test + performance test ) * CI = 1 / bugs

Non vi ho convinto?

Provateci, è più facile di quanto possa sembrare…

…e lavorerete più felici