Matteo Guidotto - Lean Frontend Development | Codemotion Milan 2015

20-21 November 2015 @dwightjack @j8matteo

LEANFRONTEND

DEVELOPMENT


Matteo Guidotto - @j8matteoDigital Project Manager @ TrueblueTEDxVerona Co-organizerwww.matteoguidotto.com

proudly father of FEVR

Marco Solazzi - @dwightjackFrontend Developer @ AQuestJavaScript Otaku github.com/dwightjack/

proudly father of FEVR

ABOUT US


ABOUT FEVR

www.fevr.it


AFTER HIGH SCHOOL

i loved 2 things


1 HTML


2 FOOD


WHEN I ATE

friends said“you need to diet!”


WHEN I ATE

mom said“you need to diet!”


WHEN I ATE

even my girlfriend said…


WHEN I ATE

even my girlfriend said…i didn’t have a girlfriend


WHEN I WROTE CODE


SOMETHING SPECIAL

marqueetable layoutanimated gif


SOMETHING SPECIAL

hours merging psd and html


I NEEDED TO DIET

MY WORKFLOW NEEDED TOO


HOMEMADEDIETPLAN


DRINK A LOTEAT LESS

RUN


and for work?


DRINK A LOT beerEAT LESS ie6RUN away from managers


seriously...


PLAN


GET OUT OF NEVERENDING

SOFTWARE


YOU DON’T NEED A BIG BRUSH

BUT A GREAT BRUSH


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!



USE 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


TEST PASSED!

LET’S GET REAL


BUILD


“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


http://rizzo.lonelyplanet.com/styleguide/ui-components/buttons


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)


Outdated

Inaccurate


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



http://www.smashingmagazine.com/2015/04/13/an-in-depth-overview-of-living-style-guide-tools/

mdcss


CHECK


HEY BUSINESS WE SOLD A WEBSITE

NOT A PSD


CHECK IS LEARNING

DO IT TOGETHERNOT ONE vs ONE


CODE SHOULD BEBEAUTIFUL TOO




CODE SHOULD BEREUSABLEMODULAR

COMMENTED


CODEREVIEW ASRETROSPECTIVE


ITERATE

ALL THE TIME


IT’S NOT A GUIDE

IT’S A FRAMEWORK


GET OUT OFDELIVERY OBSESSION


DIET PLANSREQUIRE MOTIVATION


BE A GREAT DEV

REQUIRESGREAT MOTIVATION


THANKS

Matteo Guidotto - Lean Frontend Development | Codemotion Milan 2015

Technology