lean frontend development
TRANSCRIPT
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