Lean Frontend Development

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

12. None

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