lean frontend development - codemotion roma 2015

LEANFRONTEND

DEVELOPMENT

ABOUT USMatteo Guidotto – Twitter: @j8matteoPM, UX & Frontend Developer, Agile Lover matteoguidotto.com

Marco Solazzi – Twitter: @dwightjackFrontend Web Developer - github.com/dwightjack/

WE WERE WEBMASTER

27-28 march 2015 @j8matteo

OUR WORKFLOW

WASN’T SO SEXY

WE ARE FRONTEND DEVELOPERS


WE NEED TO BE LEANWE NEED TO BE STRONGWE NEED TO BE AGILE


PLAN


GET OUT OF NEVERENDING

SOFTWARE


CHOOSE RIGHT WEAPONFOR YOUR WAR


UNICORN TECHNOLOGYDOESN’T EXIST


DON’T USE ANGULAR FOR EVERYTHING


DEFINEUSER AND BUYER

PERSONAS


DEFINEUSER AND BUYER

PERSONASDEVICES


DEVICE CENTEREDDEVELOPMENT


BUDGETING ACTIVITIES


TRY


FEATURE’S DESIGNTO

REAL STUFF


MINIMUMVIABLE

PRODUCT


MINIMUMVIABLE

PRODUCTCODE


“ MVC: UNPOLISHED, BAREBONE, TESTABLE, FAILABLE PIECE OF

SOFTWARE ”


YOUR FEATURE DESIGN IS AN ASSUMPTION


“ANIMATED FONT SIZE ON A VERTICALLY DISTRIBUTED FULL

HEIGHT LIST…”

display: table?


TRY IT OUT!


Do or do not... there is no try


Do or do not... there is no try

He didn’t know

CodePen


CLUNKY

!

http://codepen.io/dwightjack/pen/ogwQKz


“LET’S TRY OUT flexbox”


http://codepen.io/dwightjack/pen/azwPzv


YOUR PREJUDICES ARE ASSUMPTIONS TOO!


“JS NATIVE METHODS JUST ROCK”


http://jsperf.com/native-vs-for-loops


COOL / SOLID OPTIONS


ADVANTAGES:

• WON’T CLUTTER YOUR CODEBASE WITH TEST CODE• CLEAN / SANBOXED ENVIRONMENT IN NO TIME• SHARE AND TEST ON MULTIPLE BROWSERS/DEVICES• GREAT FOR PROTOTYPING• WIDE SUPPORT FOR YOUR PREFERRED STACK


BUILD


TEST PASSED!

LET’S GET REAL


“THERE’S NO BIG SOFTWARE

JUST BIG MISTAKES”


“Everything is acompound thing”

First Modular Development

Master in history

“Everything is a compound thing”

First Modular Development

Master in History

WHY MODULAR DEVELOPMENT:

SIMPLICITYENCAPSULATION

SEPARATION OF CONCERNS


PICK YOUR FLAVORS


FULL STACK FRONTEND

DEVELOPERS?


CROSSFUNCTIONAL FRONTEND TEAMS

Semantics + Accessibility(HTML + ARIA)

Presentation(CSS)

Interactivity(JavaScript / BaaS APIs)27-28 march 2015 @j8matteo

BROWSERS ALREADY DO THAT

<input type=”date” required min=”10” max=”100”>

input[type=”date”]::-webkit-datetime-edit-month-field { color: #bada55;}

document.querySelector(‘input[type=”date”]’).checkValidity();


“WE NEED TO OUTPUT15 PAGE TEMPLATES”

- a random PM


STYLEGUIDE DRIVEN DEVELOPMENT


ADVANTAGES:

• shared knowledge base (with teammates and customers)

• every module state and variation is clearly visible• code snippets (how to implement) and visual

output (how it looks)


LIVING STYLEGUIDES/* ========================================================================== Media Object ====

``` <div class="media"> <img src=//placehold.it/150x150 alt="" class="media__image"> <div class="media__wrap"> <h1 class="media__title">Media Title</h1> <p class="media__body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </div> ``` ========================================================================== */


CHECK


KITCHEN ISN’T A 3DMAX RENDER

WEBSITE ISN’T A PSD27-28 march 2015 @j8matteo

CHECK IS LEARNING

DO IT TOGETHERNOT ONE vs ONE


CODE SHOULD BEBEAUTIFUL TOO


CODE SHOULD BEREUSABLEMODULAR

COMMENTED27-28 march 2015 @j8matteo

CODEREVIEW ASRETROSPECTIVE


ITERATE

ALL THE TIME27-28 march 2015 @j8matteo

IT’S NOT A GUIDE

IT’S A FRAMEWORK


GET OUT OFDELIVERY OBSESSION


IT’S A DECLARATION OF INDEPENDENCE


THANKS


lean frontend development - codemotion roma 2015

Technology

j8matteowe need

leanwe need

strongwe need

historywhy modular development

ux frontend developer

frontend developers27

j8matteoyour prejudices

buyer personasdevices27