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
February 12, 2015
Technology
0
4.2k
Lean Frontend Development
Our Speech @ WebDeBS About Frontend Framework for working more Lean
FEVR
February 12, 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
780
BEM
fevr
0
870
The future of Javascript: episode 2
fevr
1
810
Historiae JavaScript
fevr
0
1k
FRONTEND & BACKEND: AN ENDLESS LOVE
fevr
1
840
Responsive images in da house
fevr
0
1.1k
Javascript Test Dummies
fevr
0
790
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
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
190
Delegating the chores of authenticating users to Keycloak
ahus1
0
180
CDK Vibe Coding Fes
tomoki10
1
520
【LT会登壇資料】TROCCO新コネクタ「スマレジ」を活用した直営店データの分析
kazari0425
1
170
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
4.1k
ロールが細分化された組織でSREは何をするか?
tgidgd
1
200
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
2
2k
事例で学ぶ!B2B SaaSにおけるSREの実践例/SRE for B2B SaaS: A Real-World Case Study
bitkey
1
330
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
2
340
TLSから見るSREの未来
atpons
2
230
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
220
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
4
2k
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Balancing Empowerment & Direction
lara
1
440
Designing for Performance
lara
610
69k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Site-Speed That Sticks
csswizardry
10
700
Scaling GitHub
holman
460
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Transcript
13.02.2015 – wedebs - #brainpirlo LEAN FRONTEND DEVELOPMENT
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/
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
DON’T USE ANGULAR FOR EVERYTHING
None
DEFINE USER AND BUYER PERSONAS
DEFINE USER AND BUYER PERSONAS DEVICES
DEVICE CENTERED DEVELOPMENT
BUDGETING ACTIVITIES
BUILD BRICK BY BRICK
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
BUILD
TEST PASSED! LET’S GET REAL
“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
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)
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
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
13.02.2015 – wedebs - #brainpirlo THANKS