Save 37% off PRO during our Black Friday Sale! »

Lean Frontend Development

210a2116d2266c84d155f1d8a14f31ef?s=47 FEVR
February 12, 2015

Lean Frontend Development

Our Speech @ WebDeBS About Frontend Framework for working more Lean

210a2116d2266c84d155f1d8a14f31ef?s=128

FEVR

February 12, 2015
Tweet

Transcript

  1. 13.02.2015 – wedebs - #brainpirlo LEAN FRONTEND DEVELOPMENT

  2. 13.02.2015 – wedebs - #brainpirlo ABOUT US Matteo Guidotto –

    Twitter: @j8matteo PM, UX & Frontend Developer, Agile Lover matteoguidotto.com Marco Solazzi – Twitter: @dwightjack Frontend Web Developer - github.com/dwightjack/
  3. WE WERE WEBMASTER

  4. OUR WORKFLOW WASN’T SO SEXY

  5. WE ARE FRONTEND DEVELOPERS

  6. WE NEED TO BE LEAN WE NEED TO BE STRONG

    WE NEED TO BE AGILE
  7. PLAN

  8. GET OUT OF NEVERENDING SOFTWARE

  9. CHOOSE RIGHT WEAPON FOR YOUR WAR

  10. UNICORN TECHNOLOGY DOESN’T EXIST

  11. DON’T USE ANGULAR FOR EVERYTHING

  12. None
  13. DEFINE USER AND BUYER PERSONAS

  14. DEFINE USER AND BUYER PERSONAS DEVICES

  15. DEVICE CENTERED DEVELOPMENT

  16. BUDGETING ACTIVITIES

  17. BUILD BRICK BY BRICK

  18. TRY

  19. FEATURE’S DESIGN TO REAL STUFF

  20. MINIMUM VIABLE PRODUCT

  21. MINIMUM VIABLE PRODUCT CODE

  22. “ MVC: UNPOLISHED, BAREBONE, TESTABLE, FAILABLE PIECE OF SOFTWARE ”

  23. YOUR FEATURE DESIGN IS AN ASSUMPTION

  24. “ANIMATED FONT SIZE ON A VERTICALLY DISTRIBUTED FULL HEIGHT LIST…”

    display: table?
  25. TRY IT OUT!

  26. Do or do not... there is no try

  27. Do or do not... there is no try He didn’t

    know CodePen
  28. CLUNKY! http://codepen.io/dwightjack/pen/ogwQKz

  29. “LET’S TRY OUT flexbox”

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

  31. YOUR PREJUDICES ARE ASSUMPTIONS TOO!

  32. “JS NATIVE METHODS JUST ROCK”

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

  34. COOL / SOLID OPTIONS

  35. 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
  36. BUILD

  37. TEST PASSED! LET’S GET REAL

  38. “THERE’S NO BIG SOFTWARE JUST BIG MISTAKES”

  39. “Everything is acompound thing” First Modular Development Master in history

    “Everything is a compound thing” First Modular Development Master in History
  40. WHY MODULAR DEVELOPMENT: SIMPLICITY ENCAPSULATION SEPARATION OF CONCERNS

  41. PICK YOUR FLAVORS

  42. FULL STACK FRONTEND DEVELOPERS?

  43. CROSSFUNCTIONAL FRONTEND TEAMS Semantics + Accessibility (HTML + ARIA) Presentation

    (CSS) Interactivity (JavaScript / BaaS APIs)
  44. 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();
  45. “WE NEED TO OUTPUT 15 PAGE TEMPLATES” - a random

    PM
  46. STYLEGUIDE DRIVEN DEVELOPMENT

  47. 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)
  48. 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> ``` ========================================================================== */
  49. 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> ``` ========================================================================== */
  50. COOL / SOLID OPTIONS

  51. CHECK

  52. KITCHEN ISN’T A 3DMAX RENDER WEBSITE ISN’T A PSD

  53. CHECK IS LEARNING DO IT TOGETHER NOT ONE vs ONE

  54. CODE SHOULD BE BEAUTIFUL TOO

  55. COOL / SOLID OPTIONS

  56. CODE SHOULD BE REUSABLE MODULAR COMMENTED

  57. CODEREVIEW AS RETROSPECTIVE

  58. ITERATE ALL THE TIME

  59. IT’S NOT A GUIDE IT’S A FRAMEWORK

  60. GET OUT OF DELIVERY OBSESSION

  61. IT’S A DECLARATION OF INDEPENDENCE

  62. 13.02.2015 – wedebs - #brainpirlo THANKS