Il processo di maturazione dello sviluppo frontend passa per l'adozione di metodologie agili e lean, vedremo una sequenza di tecniche e di metodologie per alleggerirlo, costruendo il nostro mvp in maniera modulare e realizzando progetti più scalabili

1. LEAN
FRONTEND
DEVELOPMENT

2. 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
27-28 march 2015 @j8matteo

4. OUR WORKFLOW
WASN’T SO SEXY

5. WE ARE FRONTEND
DEVELOPERS
27-28 march 2015 @j8matteo

6. WE NEED TO BE LEAN
WE NEED TO BE STRONG
WE NEED TO BE AGILE
27-28 march 2015 @j8matteo

7. PLAN
27-28 march 2015 @j8matteo

8. GET OUT OF
NEVERENDING
SOFTWARE
27-28 march 2015 @j8matteo

9. CHOOSE RIGHT WEAPON
FOR YOUR WAR
27-28 march 2015 @j8matteo

10. UNICORN TECHNOLOGY
DOESN’T EXIST
27-28 march 2015 @j8matteo

11. DON’T USE ANGULAR FOR
EVERYTHING
27-28 march 2015 @j8matteo

13. DEFINE
USER AND BUYER
PERSONAS
27-28 march 2015 @j8matteo

14. DEFINE
USER AND BUYER
PERSONAS
DEVICES
27-28 march 2015 @j8matteo

15. DEVICE CENTERED
DEVELOPMENT
27-28 march 2015 @j8matteo

16. BUDGETING ACTIVITIES
27-28 march 2015 @j8matteo

17. 27-28 march 2015 @j8matteo

18. TRY
27-28 march 2015 @j8matteo

19. FEATURE’S DESIGN
TO
REAL STUFF
27-28 march 2015 @j8matteo

20. MINIMUM
VIABLE
PRODUCT
27-28 march 2015 @j8matteo

21. MINIMUM
VIABLE
PRODUCT
CODE
27-28 march 2015 @j8matteo

22. “ MVC: UNPOLISHED, BAREBONE,
TESTABLE, FAILABLE PIECE OF
SOFTWARE ”
27-28 march 2015 @j8matteo

23. YOUR FEATURE DESIGN IS
AN ASSUMPTION
27-28 march 2015 @j8matteo

24. “ANIMATED FONT SIZE ON A
VERTICALLY DISTRIBUTED FULL
HEIGHT LIST…”
display: table?
27-28 march 2015 @j8matteo

25. TRY IT OUT!
27-28 march 2015 @j8matteo

26. Do or do not...
there is no try
27-28 march 2015 @j8matteo

27. Do or do not...
there is no try
He didn’t know
CodePen
27-28 march 2015 @j8matteo

28. CLUNKY!
http://codepen.io/dwightjack/pen/ogwQKz
27-28 march 2015 @j8matteo

29. “LET’S TRY OUT flexbox”
27-28 march 2015 @j8matteo

30. http://codepen.io/dwightjack/pen/azwPzv
27-28 march 2015 @j8matteo

31. YOUR PREJUDICES ARE
ASSUMPTIONS TOO!
27-28 march 2015 @j8matteo

32. “JS NATIVE METHODS
JUST ROCK”
27-28 march 2015 @j8matteo

33. http://jsperf.com/native-vs-for-loops
27-28 march 2015 @j8matteo

34. COOL / SOLID OPTIONS
27-28 march 2015 @j8matteo

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
27-28 march 2015 @j8matteo

36. BUILD
27-28 march 2015 @j8matteo

37. TEST PASSED!
LET’S GET REAL
27-28 march 2015 @j8matteo

38. “THERE’S NO BIG
SOFTWARE
JUST BIG MISTAKES”
27-28 march 2015 @j8matteo

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
27-28 march 2015 @j8matteo

41. PICK YOUR FLAVORS
27-28 march 2015 @j8matteo

42. FULL STACK
FRONTEND
DEVELOPERS?
27-28 march 2015 @j8matteo

43. CROSSFUNCTIONAL
FRONTEND TEAMS
Semantics + Accessibility
(HTML + ARIA)
Presentation
(CSS)
Interactivity
(JavaScript / BaaS APIs)
27-28 march 2015 @j8matteo

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();
27-28 march 2015 @j8matteo

45. “WE NEED TO OUTPUT
15 PAGE TEMPLATES”
- a random PM
27-28 march 2015 @j8matteo

46. STYLEGUIDE DRIVEN
DEVELOPMENT
27-28 march 2015 @j8matteo

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)
27-28 march 2015 @j8matteo

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>
```
========================================================================== */
27-28 march 2015 @j8matteo

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
27-28 march 2015 @j8matteo

51. CHECK
27-28 march 2015 @j8matteo

52. KITCHEN ISN’T A 3DMAX
RENDER
WEBSITE ISN’T A PSD
27-28 march 2015 @j8matteo

53. CHECK IS LEARNING
DO IT TOGETHER
NOT ONE vs ONE
27-28 march 2015 @j8matteo

54. CODE SHOULD BE
BEAUTIFUL TOO
27-28 march 2015 @j8matteo

55. COOL / SOLID OPTIONS
27-28 march 2015 @j8matteo

56. CODE SHOULD BE
REUSABLE
MODULAR
COMMENTED
27-28 march 2015 @j8matteo

57. CODEREVIEW AS
RETROSPECTIVE
27-28 march 2015 @j8matteo

58. ITERATE
ALL THE TIME
27-28 march 2015 @j8matteo

59. IT’S NOT A GUIDE
IT’S A FRAMEWORK
27-28 march 2015 @j8matteo

60. GET OUT OF
DELIVERY OBSESSION
27-28 march 2015 @j8matteo

61. IT’S A
DECLARATION OF
INDEPENDENCE
27-28 march 2015 @j8matteo

62. THANKS
27-28 march 2015 @j8matteo