This document discusses principles of lean frontend development. It advocates for modular, reusable code through techniques like styleguide-driven development and living styleguides. Code quality is emphasized through practices like prototyping with CodePen before building full features, testing options before making assumptions, and code reviews as retrospectives. An agile, iterative process is recommended over focusing solely on delivery.

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