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.
DEFINE
USER AND BUYER
PERSONAS

13.
DEFINE
USER AND BUYER
PERSONAS
DEVICES

14.
DEVICE CENTERED
DEVELOPMENT

15.
BUDGETING ACTIVITIES

16.
BUILD
BRICK BY BRICK

17.
TRY

18.
FEATURE’S DESIGN
TO
REAL STUFF

19.
MINIMUM
VIABLE
PRODUCT

20.
MINIMUM
VIABLE
PRODUCT
CODE

21.
“ MVC: UNPOLISHED, BAREBONE,
TESTABLE, FAILABLE PIECE OF
SOFTWARE ”

22.
YOUR FEATURE DESIGN IS
AN ASSUMPTION

23.
“ANIMATED FONT SIZE ON A
VERTICALLY DISTRIBUTED FULL
HEIGHT LIST…”
display: table?

24.
TRY IT OUT!

25.
Do or do not...
there is no try

26.
Do or do not...
there is no try
He didn’t know
CodePen

27.
CLUNKY!
http://codepen.io/dwightjack/pen/ogwQKz

28.
“LET’S TRY OUT flexbox”

29.
http://codepen.io/dwightjack/pen/azwPzv

30.
YOUR PREJUDICES ARE
ASSUMPTIONS TOO!

31.
“JS NATIVE METHODS
JUST ROCK”

32.
http://jsperf.com/native-vs-for-loops

33.
COOL / SOLID OPTIONS

34.
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

35.
BUILD

36.
TEST PASSED!
LET’S GET REAL

37.
“THERE’S NO BIG
SOFTWARE
JUST BIG MISTAKES”

38.
“Everything is
acompound thing”
First Modular Development
Master in history
“Everything is a compound
thing”
First Modular Development
Master in History

39.
WHY MODULAR
DEVELOPMENT:
SIMPLICITY
ENCAPSULATION
SEPARATION OF CONCERNS

40.
PICK YOUR FLAVORS

41.
FULL STACK
FRONTEND
DEVELOPERS?

42.
CROSSFUNCTIONAL
FRONTEND TEAMS
Semantics + Accessibility
(HTML + ARIA)
Presentation
(CSS)
Interactivity
(JavaScript / BaaS APIs)

43.
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();

44.
“WE NEED TO OUTPUT
15 PAGE TEMPLATES”
- a random PM

45.
STYLEGUIDE DRIVEN
DEVELOPMENT

46.
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)

47.
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>
```
========================================================================== */

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.
COOL / SOLID OPTIONS

50.
CHECK

51.
KITCHEN ISN’T A 3DMAX
RENDER
WEBSITE ISN’T A PSD

52.
CHECK IS LEARNING
DO IT TOGETHER
NOT ONE vs ONE

53.
CODE SHOULD BE
BEAUTIFUL TOO

54.
COOL / SOLID OPTIONS

55.
CODE SHOULD BE
REUSABLE
MODULAR
COMMENTED

56.
CODEREVIEW AS
RETROSPECTIVE

57.
ITERATE
ALL THE TIME

58.
IT’S NOT A GUIDE
IT’S A FRAMEWORK

59.
GET OUT OF
DELIVERY OBSESSION

60.
IT’S A
DECLARATION OF
INDEPENDENCE

61.
13.02.2015 – wedebs - #brainpirlo
THANKS