Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Lean Frontend Development
Search
FEVR
April 23, 2015
Technology
0
690
Lean Frontend Development
Apply lean principles on Frontend Development
FEVR
April 23, 2015
Tweet
Share
More Decks by FEVR
See All by FEVR
React Native for Better Apps
fevr
1
1k
CSS from the future
fevr
0
760
BEM
fevr
0
850
The future of Javascript: episode 2
fevr
1
790
Historiae JavaScript
fevr
0
980
FRONTEND & BACKEND: AN ENDLESS LOVE
fevr
1
830
Responsive images in da house
fevr
0
1.1k
Javascript Test Dummies
fevr
0
770
METEOR: FULL-STACK JAVASCRIPT FOR REAL-TIME APPS — FROM IDEA TO EXECUTION, FASTER
fevr
1
1.1k
Other Decks in Technology
See All in Technology
ai bot got sick (abc 2025s version)
kojira
0
160
ソフトウェアテストのAI活用_ver1.20
fumisuke
0
240
医療業界に特化した音声認識モデル構築のためのアノテーションの実態
thickstem
0
520
単一Gitリポジトリから独立しました
lycorptech_jp
PRO
0
390
Autonomous Database サービス・アップデート (FY25)
oracle4engineer
PRO
1
750
上長や社内ステークホルダーに対する解像度を上げて、より良い補完関係を築く方法 / How-to-increase-resolution-and-build-better-complementary-relationships-with-your-bosses-and-internal-stakeholders
madoxten
12
5.4k
型システムを知りたい人のための型検査器作成入門
mame
13
3.2k
Generational ZGCのメモリ運用改善 - その物理メモリ使用量、本当に正しい?
tabatad
1
290
実践Kafka Streams 〜イベント駆動型アーキテクチャを添えて〜
joker1007
3
850
バクラクのモノレポにおける AI Coding のための環境整備と {Roo,Claude} Code活用事例 / AI Coding in Bakuraku's Monorepo: Environment Setup & Case Studies with {Roo, Claude} Code
upamune
8
4.8k
Kafka vs. Pulsar: Performance Evaluation by Petabyte-Scale Streaming Platform Providers
lycorptech_jp
PRO
1
340
Long journey of Continuous Delivery at Mercari
hisaharu
0
180
Featured
See All Featured
Become a Pro
speakerdeck
PRO
28
5.4k
Docker and Python
trallard
44
3.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
BBQ
matthewcrist
89
9.7k
Site-Speed That Sticks
csswizardry
9
620
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
2
110
Side Projects
sachag
454
42k
The Cult of Friendly URLs
andyhume
79
6.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Transcript
LEAN FRONTEND DEVELOPMENT 23.04.2015 – FEVR
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
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)
WE WERE WEBMASTER
OUR WORKFLOW WASN’T SO SEXY
WE ARE FRONTEND DEVELOPERS
WE NEED TO BE LEAN WE NEED TO BE STRONG
WE NEED TO BE AGILE
PLAN
GET OUT OF NEVERENDING SOFTWARE
CHOOSE RIGHT WEAPON FOR YOUR WAR
UNICORN TECHNOLOGY DOESN’T EXIST
None
DON’T USE ANGULAR FOR EVERYTHING
DEFINE USER AND BUYER PERSONAS
DEFINE USER AND BUYER PERSONAS DEVICES
DEVICE CENTERED DEVELOPMENT
BUDGETING ACTIVITIES
None
TRY
FEATURE’S DESIGN TO REAL STUFF
MINIMUM VIABLE PRODUCT
MINIMUM VIABLE PRODUCT CODE
“ MVC: UNPOLISHED, BAREBONE, TESTABLE, FAILABLE PIECE OF SOFTWARE ”
YOUR FEATURE DESIGN IS AN ASSUMPTION
“ANIMATED FONT SIZE ON A VERTICALLY DISTRIBUTED FULL HEIGHT LIST…”
display: table?
TRY IT OUT!
Do or do not... there is no try
Do or do not... there is no try He didn’t
know CodePen
CLUNKY! http://codepen.io/dwightjack/pen/ogwQKz
“LET’S TRY OUT flexbox”
http://codepen.io/dwightjack/pen/azwPzv
YOUR PREJUDICES ARE ASSUMPTIONS TOO!
“JS NATIVE METHODS JUST ROCK”
http://jsperf.com/native-vs-for-loops
COOL / SOLID OPTIONS
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
TEST PASSED! LET’S GET REAL
BUILD
“THERE’S NO BIG SOFTWARE JUST BIG MISTAKES”
“Everything is acompound thing” First Modular Development Master in history
“Everything is a compound thing” First Modular Development Master in History
WHY MODULAR DEVELOPMENT: SIMPLICITY ENCAPSULATION SEPARATION OF CONCERNS
PICK YOUR FLAVORS
FULL STACK FRONTEND DEVELOPERS?
CROSSFUNCTIONAL FRONTEND TEAMS Semantics + Accessibility (HTML + ARIA) Presentation
(CSS) Interactivity (JavaScript / BaaS APIs)
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();
“WE NEED TO OUTPUT 15 PAGE TEMPLATES” - a random
PM
STYLEGUIDE DRIVEN DEVELOPMENT
http://rizzo.lonelyplanet.com/styleguide/ui-components/buttons http://rizzo.lonelyplanet.com/styleguide/ui-components/buttons
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)
Outdated Inaccurate
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> ``` ========================================================================== */
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> ``` ========================================================================== */
COOL / SOLID OPTIONS http://www.smashingmagazine.com/2015/04/13/an-in-depth-overview-of-living-style-guide-tools/
CHECK
KITCHEN ISN’T A 3DMAX RENDER WEBSITE ISN’T A PSD
CHECK IS LEARNING DO IT TOGETHER NOT ONE vs ONE
CODE SHOULD BE BEAUTIFUL TOO
COOL / SOLID OPTIONS
CODE SHOULD BE REUSABLE MODULAR COMMENTED
CODEREVIEW AS RETROSPECTIVE
ITERATE ALL THE TIME
IT’S NOT A GUIDE IT’S A FRAMEWORK
GET OUT OF DELIVERY OBSESSION
IT’S A DECLARATION OF INDEPENDENCE
THANKS 23.04.2015 – FEVR