Lean Frontend Development

Our Speech @ WebDeBS About Frontend Framework for working more Lean

Transcript

1. 13.02.2015 – wedebs - #brainpirlo LEAN FRONTEND DEVELOPMENT
2. 13.02.2015 – wedebs - #brainpirlo ABOUT US Matteo Guidotto – Twitter: @j8matteo PM, UX & Frontend Developer, Agile Lover matteoguidotto.com Marco Solazzi – Twitter: @dwightjack Frontend Web Developer - github.com/dwightjack/
3. WE WERE WEBMASTER
4. OUR WORKFLOW WASN’T SO SEXY
5. WE ARE FRONTEND DEVELOPERS
6. WE NEED TO BE LEAN WE NEED TO BE STRONG WE NEED TO BE AGILE
7. PLAN
8. GET OUT OF NEVERENDING SOFTWARE
9. CHOOSE RIGHT WEAPON FOR YOUR WAR
10. UNICORN TECHNOLOGY DOESN’T EXIST
11. DON’T USE ANGULAR FOR EVERYTHING
13. DEFINE USER AND BUYER PERSONAS
14. DEFINE USER AND BUYER PERSONAS DEVICES
15. DEVICE CENTERED DEVELOPMENT
16. BUDGETING ACTIVITIES
17. BUILD BRICK BY BRICK
18. TRY
19. FEATURE’S DESIGN TO REAL STUFF
20. MINIMUM VIABLE PRODUCT
21. MINIMUM VIABLE PRODUCT CODE
22. “ MVC: UNPOLISHED, BAREBONE, TESTABLE, FAILABLE PIECE OF SOFTWARE ”
23. YOUR FEATURE DESIGN IS AN ASSUMPTION
24. “ANIMATED FONT SIZE ON A VERTICALLY DISTRIBUTED FULL HEIGHT LIST…” display: table?
25. TRY IT OUT!
26. Do or do not... there is no try
27. Do or do not... there is no try He didn’t know CodePen
28. CLUNKY! http://codepen.io/dwightjack/pen/ogwQKz
29. “LET’S TRY OUT flexbox”
30. http://codepen.io/dwightjack/pen/azwPzv
31. YOUR PREJUDICES ARE ASSUMPTIONS TOO!
32. “JS NATIVE METHODS JUST ROCK”
33. http://jsperf.com/native-vs-for-loops
34. COOL / SOLID OPTIONS
35. 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
36. BUILD
37. TEST PASSED! LET’S GET REAL
38. “THERE’S NO BIG SOFTWARE JUST BIG MISTAKES”
39. “Everything is acompound thing” First Modular Development Master in history “Everything is a compound thing” First Modular Development Master in History
40. WHY MODULAR DEVELOPMENT: SIMPLICITY ENCAPSULATION SEPARATION OF CONCERNS
41. PICK YOUR FLAVORS
42. FULL STACK FRONTEND DEVELOPERS?
43. CROSSFUNCTIONAL FRONTEND TEAMS Semantics + Accessibility (HTML + ARIA) Presentation (CSS) Interactivity (JavaScript / BaaS APIs)
44. 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();
45. “WE NEED TO OUTPUT 15 PAGE TEMPLATES” - a random PM
46. STYLEGUIDE DRIVEN DEVELOPMENT
47. 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)
48. 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> ``` ========================================================================== */
49. 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> ``` ========================================================================== */
50. COOL / SOLID OPTIONS
51. CHECK
52. KITCHEN ISN’T A 3DMAX RENDER WEBSITE ISN’T A PSD
53. CHECK IS LEARNING DO IT TOGETHER NOT ONE vs ONE
54. CODE SHOULD BE BEAUTIFUL TOO
55. COOL / SOLID OPTIONS
56. CODE SHOULD BE REUSABLE MODULAR COMMENTED
57. CODEREVIEW AS RETROSPECTIVE
58. ITERATE ALL THE TIME
59. IT’S NOT A GUIDE IT’S A FRAMEWORK
60. GET OUT OF DELIVERY OBSESSION
61. IT’S A DECLARATION OF INDEPENDENCE
62. 13.02.2015 – wedebs - #brainpirlo THANKS