Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Lean Frontend Development @ Codemotion Milano 2015

210a2116d2266c84d155f1d8a14f31ef?s=47 FEVR
November 21, 2015

Lean Frontend Development @ Codemotion Milano 2015

Lean Frontend Development @ Codemotion Milano 2015

210a2116d2266c84d155f1d8a14f31ef?s=128

FEVR

November 21, 2015
Tweet

Transcript

  1. 20-21 November 2015 @dwightjack @j8matteo LEAN FRONTEND DEVELOPMENT

  2. 20-21 November 2015 @dwightjack @j8matteo Matteo Guidotto - @j8matteo Digital

    Project Manager @ Trueblue TEDxVerona Co-organizer www.matteoguidotto.com proudly father of FEVR Marco Solazzi - @dwightjack Frontend Developer @ AQuest JavaScript Otaku github.com/dwightjack/ proudly father of FEVR ABOUT US
  3. 20-21 November 2015 @dwightjack @j8matteo ABOUT FEVR www.fevr.it

  4. 20-21 November 2015 @dwightjack @j8matteo AFTER HIGH SCHOOL i loved

    2 things
  5. 20-21 November 2015 @dwightjack @j8matteo 1 HTML

  6. 20-21 November 2015 @dwightjack @j8matteo 2 FOOD

  7. 20-21 November 2015 @dwightjack @j8matteo WHEN I ATE friends said

    “you need to diet!”
  8. 20-21 November 2015 @dwightjack @j8matteo WHEN I ATE mom said

    “you need to diet!”
  9. 20-21 November 2015 @dwightjack @j8matteo WHEN I ATE even my

    girlfriend said…
  10. 20-21 November 2015 @dwightjack @j8matteo WHEN I ATE even my

    girlfriend said… i didn’t have a girlfriend
  11. 20-21 November 2015 @dwightjack @j8matteo SOMETHING SPECIAL marquee table layout

    animated gif
  12. 20-21 November 2015 @dwightjack @j8matteo WHEN I WROTE CODE

  13. 20-21 November 2015 @dwightjack @j8matteo SOMETHING SPECIAL hours merging psd

    and html
  14. 20-21 November 2015 @dwightjack @j8matteo I NEEDED TO DIET MY

    WORKFLOW NEEDED TOO
  15. 20-21 November 2015 @dwightjack @j8matteo HOMEMADE DIET PLAN

  16. 20-21 November 2015 @dwightjack @j8matteo DRINK A LOT EAT LESS

    RUN
  17. 20-21 November 2015 @dwightjack @j8matteo and for work?

  18. 20-21 November 2015 @dwightjack @j8matteo DRINK A LOT beer EAT

    LESS ie6 RUN away from managers
  19. 20-21 November 2015 @dwightjack @j8matteo seriously...

  20. 20-21 November 2015 @dwightjack @j8matteo PLAN

  21. 20-21 November 2015 @dwightjack @j8matteo GET OUT OF NEVERENDING SOFTWARE

  22. 20-21 November 2015 @dwightjack @j8matteo YOU DON’T NEED A BIG

    BRUSH BUT A GREAT BRUSH
  23. 20-21 November 2015 @dwightjack @j8matteo UNICORN TECHNOLOGY DOESN’T EXIST

  24. 20-21 November 2015 @dwightjack @j8matteo

  25. 20-21 November 2015 @dwightjack @j8matteo DON’T USE ANGULAR FOR EVERYTHING

  26. 20-21 November 2015 @dwightjack @j8matteo DEFINE USER AND BUYER PERSONAS

  27. 20-21 November 2015 @dwightjack @j8matteo DEFINE USER AND BUYER PERSONAS

    DEVICES
  28. 20-21 November 2015 @dwightjack @j8matteo DEVICE CENTERED DEVELOPMENT

  29. 20-21 November 2015 @dwightjack @j8matteo BUDGETING ACTIVITIES

  30. None
  31. 20-21 November 2015 @dwightjack @j8matteo TRY

  32. 20-21 November 2015 @dwightjack @j8matteo FEATURE’S DESIGN TO REAL STUFF

  33. 20-21 November 2015 @dwightjack @j8matteo MINIMUM VIABLE PRODUCT

  34. 20-21 November 2015 @dwightjack @j8matteo MINIMUM VIABLE PRODUCT CODE

  35. 20-21 November 2015 @dwightjack @j8matteo “ MVC: UNPOLISHED, BAREBONE, TESTABLE,

    FAILABLE PIECE OF SOFTWARE ”
  36. 20-21 November 2015 @dwightjack @j8matteo YOUR FEATURE DESIGN IS AN

    ASSUMPTION
  37. 20-21 November 2015 @dwightjack @j8matteo “ANIMATED FONT SIZE ON A

    VERTICALLY DISTRIBUTED FULL HEIGHT LIST…” display: table?
  38. 20-21 November 2015 @dwightjack @j8matteo TRY IT OUT!

  39. 20-21 November 2015 @dwightjack @j8matteo

  40. 20-21 November 2015 @dwightjack @j8matteo USE CODEPEN!

  41. 20-21 November 2015 @dwightjack @j8matteo CLUNKY! http://codepen.io/dwightjack/pen/ogwQKz

  42. 20-21 November 2015 @dwightjack @j8matteo “LET’S TRY OUT flexbox”

  43. 20-21 November 2015 @dwightjack @j8matteo http://codepen.io/dwightjack/pen/azwPzv

  44. 20-21 November 2015 @dwightjack @j8matteo YOUR PREJUDICES ARE ASSUMPTIONS TOO!

  45. 20-21 November 2015 @dwightjack @j8matteo “JS NATIVE METHODS JUST ROCK”

  46. 20-21 November 2015 @dwightjack @j8matteo http://jsperf.com/native-vs-for-loops

  47. 20-21 November 2015 @dwightjack @j8matteo COOL / SOLID OPTIONS

  48. 20-21 November 2015 @dwightjack @j8matteo 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
  49. 20-21 November 2015 @dwightjack @j8matteo TEST PASSED! LET’S GET REAL

  50. 20-21 November 2015 @dwightjack @j8matteo BUILD

  51. 20-21 November 2015 @dwightjack @j8matteo “THERE’S NO BIG SOFTWARE JUST

    BIG MISTAKES”
  52. 20-21 November 2015 @dwightjack @j8matteo “Everything is acompound thing” First

    Modular Development Master in history “Everything is a compound thing” First Modular Development Master in History
  53. 20-21 November 2015 @dwightjack @j8matteo WHY MODULAR DEVELOPMENT: SIMPLICITY ENCAPSULATION

    SEPARATION OF CONCERNS
  54. 20-21 November 2015 @dwightjack @j8matteo PICK YOUR FLAVORS

  55. 20-21 November 2015 @dwightjack @j8matteo FULL STACK FRONTEND DEVELOPERS?

  56. 20-21 November 2015 @dwightjack @j8matteo CROSSFUNCTIONAL FRONTEND TEAMS Semantics +

    Accessibility (HTML + ARIA) Presentation (CSS) Interactivity (JavaScript / BaaS APIs)
  57. 20-21 November 2015 @dwightjack @j8matteo 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();
  58. 20-21 November 2015 @dwightjack @j8matteo “WE NEED TO OUTPUT 15

    PAGE TEMPLATES” - a random PM
  59. 20-21 November 2015 @dwightjack @j8matteo STYLEGUIDE DRIVEN DEVELOPMENT

  60. 20-21 November 2015 @dwightjack @j8matteo http://rizzo.lonelyplanet.com/styleguide/ui-components/buttons http://rizzo.lonelyplanet.com/styleguide/ui-components/buttons

  61. 20-21 November 2015 @dwightjack @j8matteo 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)
  62. 20-21 November 2015 @dwightjack @j8matteo Outdated Inaccurate

  63. 20-21 November 2015 @dwightjack @j8matteo 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> ``` ========================================================================== */
  64. 20-21 November 2015 @dwightjack @j8matteo 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> ``` ========================================================================== */
  65. 20-21 November 2015 @dwightjack @j8matteo COOL / SOLID OPTIONS http://www.smashingmagazine.com/2015/04/13/an-in-depth-overview-of-living-style-guide-tools/

    mdcss
  66. 20-21 November 2015 @dwightjack @j8matteo CHECK

  67. 20-21 November 2015 @dwightjack @j8matteo HEY BUSINESS WE SOLD A

    WEBSITE NOT A PSD
  68. 20-21 November 2015 @dwightjack @j8matteo CHECK IS LEARNING DO IT

    TOGETHER NOT ONE vs ONE
  69. 20-21 November 2015 @dwightjack @j8matteo CODE SHOULD BE BEAUTIFUL TOO

  70. 20-21 November 2015 @dwightjack @j8matteo COOL / SOLID OPTIONS

  71. 20-21 November 2015 @dwightjack @j8matteo CODE SHOULD BE REUSABLE MODULAR

    COMMENTED
  72. 20-21 November 2015 @dwightjack @j8matteo CODEREVIEW AS RETROSPECTIVE

  73. 20-21 November 2015 @dwightjack @j8matteo ITERATE ALL THE TIME

  74. 20-21 November 2015 @dwightjack @j8matteo IT’S NOT A GUIDE IT’S

    A FRAMEWORK
  75. 20-21 November 2015 @dwightjack @j8matteo GET OUT OF DELIVERY OBSESSION

  76. 20-21 November 2015 @dwightjack @j8matteo DIET PLANS REQUIRE MOTIVATION

  77. 20-21 November 2015 @dwightjack @j8matteo BE A GREAT DEV REQUIRES

    GREAT MOTIVATION
  78. 20-21 November 2015 @dwightjack @j8matteo THANKS