Lean Frontend Development

210a2116d2266c84d155f1d8a14f31ef?s=47 FEVR
April 23, 2015

Lean Frontend Development

Apply lean principles on Frontend Development

210a2116d2266c84d155f1d8a14f31ef?s=128

FEVR

April 23, 2015
Tweet

Transcript

  1. LEAN FRONTEND DEVELOPMENT 23.04.2015 – FEVR

  2. ABOUT US 1 year BF ( before FEVR) Matteo Guidotto

    Full Stack Developer / Sometimes Project Manager @ Intesys Marco Solazzi Full Stack Developer with attitudes for Frontend Development @ Intesys
  3. Matteo Guidotto - @j8matteo Digital Project Manager @ True Blue

    TEDxVerona Co-organizer www.matteoguidotto.com proudly father of FEVR Marco Solazzi - @dwightjack Frontend Developer @ AQuést JavaScript Otaku github. com/dwightjack/ proudly father of FEVR ABOUT US 1 year AF ( after FEVR)
  4. WE WERE WEBMASTER

  5. OUR WORKFLOW WASN’T SO SEXY

  6. WE ARE FRONTEND DEVELOPERS

  7. WE NEED TO BE LEAN WE NEED TO BE STRONG

    WE NEED TO BE AGILE
  8. PLAN

  9. GET OUT OF NEVERENDING SOFTWARE

  10. CHOOSE RIGHT WEAPON FOR YOUR WAR

  11. UNICORN TECHNOLOGY DOESN’T EXIST

  12. None
  13. DON’T USE ANGULAR FOR EVERYTHING

  14. DEFINE USER AND BUYER PERSONAS

  15. DEFINE USER AND BUYER PERSONAS DEVICES

  16. DEVICE CENTERED DEVELOPMENT

  17. BUDGETING ACTIVITIES

  18. None
  19. TRY

  20. FEATURE’S DESIGN TO REAL STUFF

  21. MINIMUM VIABLE PRODUCT

  22. MINIMUM VIABLE PRODUCT CODE

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

  24. YOUR FEATURE DESIGN IS AN ASSUMPTION

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

    display: table?
  26. TRY IT OUT!

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

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

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

  30. “LET’S TRY OUT flexbox”

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

  32. YOUR PREJUDICES ARE ASSUMPTIONS TOO!

  33. “JS NATIVE METHODS JUST ROCK”

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

  35. COOL / SOLID OPTIONS

  36. 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
  37. TEST PASSED! LET’S GET REAL

  38. BUILD

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

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

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

  42. PICK YOUR FLAVORS

  43. FULL STACK FRONTEND DEVELOPERS?

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

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

    PM
  47. STYLEGUIDE DRIVEN DEVELOPMENT

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

  49. 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)
  50. Outdated Inaccurate

  51. 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> ``` ========================================================================== */
  52. 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> ``` ========================================================================== */
  53. COOL / SOLID OPTIONS http://www.smashingmagazine.com/2015/04/13/an-in-depth-overview-of-living-style-guide-tools/

  54. CHECK

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

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

  57. CODE SHOULD BE BEAUTIFUL TOO

  58. COOL / SOLID OPTIONS

  59. CODE SHOULD BE REUSABLE MODULAR COMMENTED

  60. CODEREVIEW AS RETROSPECTIVE

  61. ITERATE ALL THE TIME

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

  63. GET OUT OF DELIVERY OBSESSION

  64. IT’S A DECLARATION OF INDEPENDENCE

  65. THANKS 23.04.2015 – FEVR