Slide 1
Slide 1 text
20-21 November 2015 @dwightjack @j8matteo
LEAN
FRONTEND
DEVELOPMENT
Slide 2
Slide 2 text
20-21 November 2015 @dwightjack @j8matteo
Matteo Guidotto - @j8matteo
Digital Project Manager @ Trueblue
TEDxVerona Co-organizer
www.matteoguidotto.com
proudly father of FEVR
Marco Solazzi - @dwightjack
Frontend Developer @ AQuest
JavaScript Otaku
github.com/dwightjack/
proudly father of FEVR
ABOUT US
Slide 3
Slide 3 text
20-21 November 2015 @dwightjack @j8matteo
ABOUT FEVR
www.fevr.it
Slide 4
Slide 4 text
20-21 November 2015 @dwightjack @j8matteo
AFTER HIGH SCHOOL
i loved 2 things
Slide 5
Slide 5 text
20-21 November 2015 @dwightjack @j8matteo
1 HTML
Slide 6
Slide 6 text
20-21 November 2015 @dwightjack @j8matteo
2 FOOD
Slide 7
Slide 7 text
20-21 November 2015 @dwightjack @j8matteo
WHEN I ATE
friends said
“you need to diet!”
Slide 8
Slide 8 text
20-21 November 2015 @dwightjack @j8matteo
WHEN I ATE
mom said
“you need to diet!”
Slide 9
Slide 9 text
20-21 November 2015 @dwightjack @j8matteo
WHEN I ATE
even my girlfriend said…
Slide 10
Slide 10 text
20-21 November 2015 @dwightjack @j8matteo
WHEN I ATE
even my girlfriend said…
i didn’t have a girlfriend
Slide 11
Slide 11 text
20-21 November 2015 @dwightjack @j8matteo
SOMETHING SPECIAL
marquee
table layout
animated gif
Slide 12
Slide 12 text
20-21 November 2015 @dwightjack @j8matteo
WHEN I WROTE CODE
Slide 13
Slide 13 text
20-21 November 2015 @dwightjack @j8matteo
SOMETHING SPECIAL
hours merging psd and html
Slide 14
Slide 14 text
20-21 November 2015 @dwightjack @j8matteo
I NEEDED TO DIET
MY WORKFLOW
NEEDED TOO
Slide 15
Slide 15 text
20-21 November 2015 @dwightjack @j8matteo
HOMEMADE
DIET
PLAN
Slide 16
Slide 16 text
20-21 November 2015 @dwightjack @j8matteo
DRINK A LOT
EAT LESS
RUN
Slide 17
Slide 17 text
20-21 November 2015 @dwightjack @j8matteo
and for work?
Slide 18
Slide 18 text
20-21 November 2015 @dwightjack @j8matteo
DRINK A LOT beer
EAT LESS ie6
RUN away from managers
Slide 19
Slide 19 text
20-21 November 2015 @dwightjack @j8matteo
seriously...
Slide 20
Slide 20 text
20-21 November 2015 @dwightjack @j8matteo
PLAN
Slide 21
Slide 21 text
20-21 November 2015 @dwightjack @j8matteo
GET OUT OF
NEVERENDING
SOFTWARE
Slide 22
Slide 22 text
20-21 November 2015 @dwightjack @j8matteo
YOU DON’T NEED A BIG
BRUSH
BUT A GREAT BRUSH
Slide 23
Slide 23 text
20-21 November 2015 @dwightjack @j8matteo
UNICORN TECHNOLOGY
DOESN’T EXIST
Slide 24
Slide 24 text
20-21 November 2015 @dwightjack @j8matteo
Slide 25
Slide 25 text
20-21 November 2015 @dwightjack @j8matteo
DON’T USE ANGULAR FOR
EVERYTHING
Slide 26
Slide 26 text
20-21 November 2015 @dwightjack @j8matteo
DEFINE
USER AND BUYER
PERSONAS
Slide 27
Slide 27 text
20-21 November 2015 @dwightjack @j8matteo
DEFINE
USER AND BUYER
PERSONAS
DEVICES
Slide 28
Slide 28 text
20-21 November 2015 @dwightjack @j8matteo
DEVICE CENTERED
DEVELOPMENT
Slide 29
Slide 29 text
20-21 November 2015 @dwightjack @j8matteo
BUDGETING ACTIVITIES
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
20-21 November 2015 @dwightjack @j8matteo
TRY
Slide 32
Slide 32 text
20-21 November 2015 @dwightjack @j8matteo
FEATURE’S DESIGN
TO
REAL STUFF
Slide 33
Slide 33 text
20-21 November 2015 @dwightjack @j8matteo
MINIMUM
VIABLE
PRODUCT
Slide 34
Slide 34 text
20-21 November 2015 @dwightjack @j8matteo
MINIMUM
VIABLE
PRODUCT
CODE
Slide 35
Slide 35 text
20-21 November 2015 @dwightjack @j8matteo
“ MVC: UNPOLISHED, BAREBONE,
TESTABLE, FAILABLE PIECE OF
SOFTWARE ”
Slide 36
Slide 36 text
20-21 November 2015 @dwightjack @j8matteo
YOUR FEATURE DESIGN IS
AN ASSUMPTION
Slide 37
Slide 37 text
20-21 November 2015 @dwightjack @j8matteo
“ANIMATED FONT SIZE ON A
VERTICALLY DISTRIBUTED FULL
HEIGHT LIST…”
display: table?
Slide 38
Slide 38 text
20-21 November 2015 @dwightjack @j8matteo
TRY IT OUT!
Slide 39
Slide 39 text
20-21 November 2015 @dwightjack @j8matteo
Slide 40
Slide 40 text
20-21 November 2015 @dwightjack @j8matteo
USE CODEPEN!
Slide 41
Slide 41 text
20-21 November 2015 @dwightjack @j8matteo
CLUNKY!
http://codepen.io/dwightjack/pen/ogwQKz
Slide 42
Slide 42 text
20-21 November 2015 @dwightjack @j8matteo
“LET’S TRY OUT flexbox”
Slide 43
Slide 43 text
20-21 November 2015 @dwightjack @j8matteo
http://codepen.io/dwightjack/pen/azwPzv
Slide 44
Slide 44 text
20-21 November 2015 @dwightjack @j8matteo
YOUR PREJUDICES ARE
ASSUMPTIONS TOO!
Slide 45
Slide 45 text
20-21 November 2015 @dwightjack @j8matteo
“JS NATIVE METHODS
JUST ROCK”
Slide 46
Slide 46 text
20-21 November 2015 @dwightjack @j8matteo
http://jsperf.com/native-vs-for-loops
Slide 47
Slide 47 text
20-21 November 2015 @dwightjack @j8matteo
COOL / SOLID OPTIONS
Slide 48
Slide 48 text
20-21 November 2015 @dwightjack @j8matteo
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
Slide 49
Slide 49 text
20-21 November 2015 @dwightjack @j8matteo
TEST PASSED!
LET’S GET REAL
Slide 50
Slide 50 text
20-21 November 2015 @dwightjack @j8matteo
BUILD
Slide 51
Slide 51 text
20-21 November 2015 @dwightjack @j8matteo
“THERE’S NO BIG
SOFTWARE
JUST BIG MISTAKES”
Slide 52
Slide 52 text
20-21 November 2015 @dwightjack @j8matteo
“Everything is
acompound thing”
First Modular Development
Master in history
“Everything is a compound
thing”
First Modular Development
Master in History
Slide 53
Slide 53 text
20-21 November 2015 @dwightjack @j8matteo
WHY MODULAR
DEVELOPMENT:
SIMPLICITY
ENCAPSULATION
SEPARATION OF CONCERNS
Slide 54
Slide 54 text
20-21 November 2015 @dwightjack @j8matteo
PICK YOUR FLAVORS
Slide 55
Slide 55 text
20-21 November 2015 @dwightjack @j8matteo
FULL STACK
FRONTEND
DEVELOPERS?
Slide 56
Slide 56 text
20-21 November 2015 @dwightjack @j8matteo
CROSSFUNCTIONAL
FRONTEND TEAMS
Semantics + Accessibility
(HTML + ARIA)
Presentation
(CSS)
Interactivity
(JavaScript / BaaS APIs)
Slide 57
Slide 57 text
20-21 November 2015 @dwightjack @j8matteo
BROWSERS ALREADY
DO THAT
input[type=”date”]::-webkit-datetime-edit-month-field {
color: #bada55;
}
document.querySelector(‘input[type=”date”]’).checkValidity();
Slide 58
Slide 58 text
20-21 November 2015 @dwightjack @j8matteo
“WE NEED TO OUTPUT
15 PAGE TEMPLATES”
- a random PM
Slide 59
Slide 59 text
20-21 November 2015 @dwightjack @j8matteo
STYLEGUIDE DRIVEN
DEVELOPMENT
Slide 60
Slide 60 text
20-21 November 2015 @dwightjack @j8matteo
http://rizzo.lonelyplanet.com/styleguide/ui-components/buttons
http://rizzo.lonelyplanet.com/styleguide/ui-components/buttons
Slide 61
Slide 61 text
20-21 November 2015 @dwightjack @j8matteo
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)
Slide 62
Slide 62 text
20-21 November 2015 @dwightjack @j8matteo
Outdated
Inaccurate
Slide 63
Slide 63 text
20-21 November 2015 @dwightjack @j8matteo
LIVING STYLEGUIDES
/* ==========================================================================
Media Object
====
```
```
========================================================================== */
Media Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Slide 64
Slide 64 text
20-21 November 2015 @dwightjack @j8matteo
LIVING STYLEGUIDES
/* ==========================================================================
Media Object
====
```
```
========================================================================== */
Media Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Slide 65
Slide 65 text
20-21 November 2015 @dwightjack @j8matteo
COOL / SOLID OPTIONS
http://www.smashingmagazine.com/2015/04/13/an-in-depth-overview-of-living-style-guide-tools/
mdcss
Slide 66
Slide 66 text
20-21 November 2015 @dwightjack @j8matteo
CHECK
Slide 67
Slide 67 text
20-21 November 2015 @dwightjack @j8matteo
HEY BUSINESS WE SOLD
A WEBSITE
NOT A PSD
Slide 68
Slide 68 text
20-21 November 2015 @dwightjack @j8matteo
CHECK IS LEARNING
DO IT TOGETHER
NOT ONE vs ONE
Slide 69
Slide 69 text
20-21 November 2015 @dwightjack @j8matteo
CODE SHOULD BE
BEAUTIFUL TOO
Slide 70
Slide 70 text
20-21 November 2015 @dwightjack @j8matteo
COOL / SOLID OPTIONS
Slide 71
Slide 71 text
20-21 November 2015 @dwightjack @j8matteo
CODE SHOULD BE
REUSABLE
MODULAR
COMMENTED
Slide 72
Slide 72 text
20-21 November 2015 @dwightjack @j8matteo
CODEREVIEW AS
RETROSPECTIVE
Slide 73
Slide 73 text
20-21 November 2015 @dwightjack @j8matteo
ITERATE
ALL THE TIME
Slide 74
Slide 74 text
20-21 November 2015 @dwightjack @j8matteo
IT’S NOT A GUIDE
IT’S A FRAMEWORK
Slide 75
Slide 75 text
20-21 November 2015 @dwightjack @j8matteo
GET OUT OF
DELIVERY OBSESSION
Slide 76
Slide 76 text
20-21 November 2015 @dwightjack @j8matteo
DIET PLANS
REQUIRE MOTIVATION
Slide 77
Slide 77 text
20-21 November 2015 @dwightjack @j8matteo
BE A GREAT DEV
REQUIRES
GREAT MOTIVATION
Slide 78
Slide 78 text
20-21 November 2015 @dwightjack @j8matteo
THANKS