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
790
CSS from the future
fevr
0
570
BEM
fevr
0
650
The future of Javascript: episode 2
fevr
1
600
Historiae JavaScript
fevr
0
710
FRONTEND & BACKEND: AN ENDLESS LOVE
fevr
1
690
Responsive images in da house
fevr
0
830
Javascript Test Dummies
fevr
0
610
METEOR: FULL-STACK JAVASCRIPT FOR REAL-TIME APPS — FROM IDEA TO EXECUTION, FASTER
fevr
1
850
Other Decks in Technology
See All in Technology
Vos logs méritent mieux que la config par défaut
lyrixx
2
300
長文から長文を生成するLLMツールをオープンソースで作ってみた。
tomohisa
2
140
ビジネスロジックを「型」で表現するOOPのための関数型DDD / Functional And Type-Safe DDD for OOP
yuitosato
29
12k
なんで私に登壇依頼が?! ~頼られるエンジニアになるためには~ /
mixi_engineers
PRO
2
200
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
330
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
7
100k
Tohoku.Tech #1 「Cursorを使ったRaspberry Piの開発」by ねこまた
jun2882
0
250
Getting started with controlling LEGO using Swift
hcrane
0
130
技術広報として2023年度に頑張ったこと / What we did well in FY2023 as a DevRel
pauli
5
460
LLM + RAG を使った SORACOM Support Bot の裏側の歴史
soracom
PRO
1
640
ハイパフォーマンスな組織をつくるための開発生産性の考え方 / developer-productivity-high-performer-link-and-motivation
lmi
3
250
AMLD 2024 - Build Your Own GPT
donlelef
1
260
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.3k
Ruby is Unlike a Banana
tanoku
95
10k
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
Being A Developer After 40
akosma
56
580k
Faster Mobile Websites
deanohume
296
30k
Done Done
chrislema
178
15k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
Building an army of robots
kneath
300
41k
Facilitating Awesome Meetings
lara
39
5.5k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
12k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
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