Lean Frontend Development @ Codemotion Milano 2015

Lean Frontend Development @ Codemotion Milano 2015

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