Lean Frontend Development @ Codemotion Milano 2015

Lean Frontend Development @ Codemotion Milano 2015

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
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