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

Lean Frontend Development @ Codemotion Milano 2015

FEVR
November 21, 2015

Lean Frontend Development @ Codemotion Milano 2015

Lean Frontend Development @ Codemotion Milano 2015

FEVR

November 21, 2015
Tweet

More Decks by FEVR

Other Decks in Technology

Transcript

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

    View Slide

  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

    View Slide

  3. 20-21 November 2015 @dwightjack @j8matteo
    ABOUT FEVR
    www.fevr.it

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  10. 20-21 November 2015 @dwightjack @j8matteo
    WHEN I ATE
    even my girlfriend said…
    i didn’t have a girlfriend

    View Slide

  11. 20-21 November 2015 @dwightjack @j8matteo
    SOMETHING SPECIAL
    marquee
    table layout
    animated gif

    View Slide

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

    View Slide

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

    View Slide

  14. 20-21 November 2015 @dwightjack @j8matteo
    I NEEDED TO DIET
    MY WORKFLOW
    NEEDED TOO

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  18. 20-21 November 2015 @dwightjack @j8matteo
    DRINK A LOT beer
    EAT LESS ie6
    RUN away from managers

    View Slide

  19. 20-21 November 2015 @dwightjack @j8matteo
    seriously...

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  24. 20-21 November 2015 @dwightjack @j8matteo

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  30. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  35. 20-21 November 2015 @dwightjack @j8matteo
    “ MVC: UNPOLISHED, BAREBONE,
    TESTABLE, FAILABLE PIECE OF
    SOFTWARE ”

    View Slide

  36. 20-21 November 2015 @dwightjack @j8matteo
    YOUR FEATURE DESIGN IS
    AN ASSUMPTION

    View Slide

  37. 20-21 November 2015 @dwightjack @j8matteo
    “ANIMATED FONT SIZE ON A
    VERTICALLY DISTRIBUTED FULL
    HEIGHT LIST…”
    display: table?

    View Slide

  38. 20-21 November 2015 @dwightjack @j8matteo
    TRY IT OUT!

    View Slide

  39. 20-21 November 2015 @dwightjack @j8matteo

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  49. 20-21 November 2015 @dwightjack @j8matteo
    TEST PASSED!
    LET’S GET REAL

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  53. 20-21 November 2015 @dwightjack @j8matteo
    WHY MODULAR
    DEVELOPMENT:
    SIMPLICITY
    ENCAPSULATION
    SEPARATION OF CONCERNS

    View Slide

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

    View Slide

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

    View Slide

  56. 20-21 November 2015 @dwightjack @j8matteo
    CROSSFUNCTIONAL
    FRONTEND TEAMS
    Semantics + Accessibility
    (HTML + ARIA)
    Presentation
    (CSS)
    Interactivity
    (JavaScript / BaaS APIs)

    View Slide

  57. 20-21 November 2015 @dwightjack @j8matteo
    BROWSERS ALREADY
    DO THAT

    input[type=”date”]::-webkit-datetime-edit-month-field {
    color: #bada55;
    }
    document.querySelector(‘input[type=”date”]’).checkValidity();

    View Slide

  58. 20-21 November 2015 @dwightjack @j8matteo
    “WE NEED TO OUTPUT
    15 PAGE TEMPLATES”
    - a random PM

    View Slide

  59. 20-21 November 2015 @dwightjack @j8matteo
    STYLEGUIDE DRIVEN
    DEVELOPMENT

    View Slide

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

    View Slide

  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)

    View Slide

  62. 20-21 November 2015 @dwightjack @j8matteo
    Outdated
    Inaccurate

    View Slide

  63. 20-21 November 2015 @dwightjack @j8matteo
    LIVING STYLEGUIDES
    /* ==========================================================================
    Media Object
    ====
    ```



    Media Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



    ```
    ========================================================================== */

    View Slide

  64. 20-21 November 2015 @dwightjack @j8matteo
    LIVING STYLEGUIDES
    /* ==========================================================================
    Media Object
    ====
    ```



    Media Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



    ```
    ========================================================================== */

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  68. 20-21 November 2015 @dwightjack @j8matteo
    CHECK IS LEARNING
    DO IT TOGETHER
    NOT ONE vs ONE

    View Slide

  69. 20-21 November 2015 @dwightjack @j8matteo
    CODE SHOULD BE
    BEAUTIFUL TOO

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide