Lean 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

12. None

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

18. None

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