Lean frontend development

13.02.2015 – wedebs - #brainpirlo

LEANFRONTEND

DEVELOPMENT

13.02.2015 – wedebs - #brainpirlo

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

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

WE WERE WEBMASTER

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

BUILDBRICK BY BRICK

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)

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> ``` ========================================================================== */

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> ``` ========================================================================== */

COOL / SOLID OPTIONS

CHECK

KITCHEN ISN’T A 3DMAX RENDER

WEBSITE ISN’T A PSD

CHECK IS LEARNING

DO IT TOGETHERNOT ONE vs ONE

CODE SHOULD BEBEAUTIFUL TOO

COOL / SOLID OPTIONS

CODE SHOULD BEREUSABLEMODULAR

COMMENTED

CODEREVIEW ASRETROSPECTIVE

ITERATE

ALL THE TIME

IT’S NOT A GUIDE

IT’S A FRAMEWORK

GET OUT OFDELIVERY OBSESSION

IT’S A DECLARATION OF INDEPENDENCE

13.02.2015 – wedebs - #brainpirlo

THANKS