Lean Frontend Development

Apply lean principles on Frontend Development

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