Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Back to React
Michael Chan
August 30, 2017
Programming
1
38
Back to React
Given at the 2017 React Rally Conference.
YouTube video:
https://www.youtube.com/watch?v=T9-Mb_axNgA
Michael Chan
August 30, 2017
Tweet
Share
More Decks by Michael Chan
See All by Michael Chan
Tame the Component Multi-verse v1
chantastic
1
1
The World's Most Expensive React Component and How to Stop Writing It v2.1
chantastic
0
33
The World's Most Expensive React Component and How to Stop Writing it (2.0)
chantastic
0
10
JavaScript LA, July 20, Back to React prep
chantastic
2
62
Styling React Components
chantastic
10
1.6k
Inline Styles React Europe
chantastic
15
4.6k
Reactjs on Rails
chantastic
7
560
Reactjs on Rails (slides only)
chantastic
2
270
Other Decks in Programming
See All in Programming
A Philosophy of Software Design 後半
yosuke_furukawa
PRO
10
2.8k
設計ナイト2022 トランザクションスクリプト
shinpeim
11
2k
iOS 16からのロック画面Widget争奪戦に備える
tsuzuki817
0
230
Client-Side Field-Level Encryption for Apache Kafka Connect @ VoxxedDays Luxembourg 2022
hpgrahsl
0
110
Android Compose Component - mapping.
taehwandev
0
140
RFC 9111: HTTP Caching
jxck
0
160
IE Graduation Certificate
jxck
6
4.8k
Java アプリとAWS の良い関係 - AWS でJava アプリを実行する一番簡単な方法教えます / AWS for Javarista
kanamasa
2
1.2k
Swift Regex
usamik26
0
180
Value and Record Types
hschwentner
0
550
開発速度を5倍早くするVSCodeの拡張機能を作った
purp1eeeee
2
150
VisualProgramming_GoogleHome_LINE
nearmugi
1
230
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Building Your Own Lightsaber
phodgson
94
4.6k
Support Driven Design
roundedbygravity
86
8.5k
We Have a Design System, Now What?
morganepeng
35
3k
Six Lessons from altMBA
skipperchong
14
1.4k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
213
11k
Art, The Web, and Tiny UX
lynnandtonic
280
17k
4 Signs Your Business is Dying
shpigford
169
20k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
105
16k
Transcript
BACK TO REACT
BACK TO REACT
5 WAYS TO BE A HAPPY REACT DEVELOPER
START WITH CODE
CATCH FEELS
THE MISSING PIECE Meets the BIG O Crappy Keynote
THE MISSING PIECE Meets the BIG O Crappy Keynote
THE MISSING PIECE Meets the BIG O Crappy Keynote Paraphrased
& abridged edition
The Missing Piece sat alone…
waiting for someone to take it somewhere.
Some fit but couldn't roll.
Others rolled but didn't fit.
Some had too many pieces missing.
Others had too many pieces, period.
Then, one came along that fit just right …
None
Until the Missing Piece began to grow.
None
Then one came along that looked different.
"I was hoping that I could roll with you…"
"I'm not missing a piece."
"So, you can't roll with me,"
"But you could roll by yourself."
None
None
None
None
None
None
None
None
SO, BACK TO REACT
None
The V in MVC™
None
None
None
None
None
REACT IS A GOOD MISSING PIECE
2014 (MY BIG O MOMENT)
None
None
None
“prop drills”
async/shallow setState “prop drills”
async/shallow setState “prop drills” styling
async/shallow setState “prop drills” styling (Context)
async/shallow setState “prop drills” styling (Context)
async/shallow setState styling (Context) big components + better patterns
styling (Context) big components + better patterns RTFM + nothing
else existed
(Context) big components + better patterns RTFM + nothing else
existed inline-styles + CSS
(Context) big components + better patterns RTFM + nothing else
existed inline-styles + CSS HIGHER TOLERANCE FOR JIT SOLUTIONS
(Context) big components + better patterns RTFM + nothing else
existed inline-styles + CSS MAINTAINABILITY
(Context) big components + better patterns RTFM + nothing else
existed inline-styles + CSS NOBODY ASKS ME ABOUT IT
2015 (THE YEAR REACT BLEW UP)
None
None
None
REACT
REACT++
None
INSTEAD OF MOVING FAST…
WE WERE MANAGING DEPENDENCIES…
CLARIFYING DESIRED PRACTICES
WE WENT BACKWARD
WHAT CHANGED?
REACT
REACT
#JAVASCRIPTFATIGUE
REACT
—Edsger Dijkstra (On the nature of Computer Science) “Simplicity is
a great virtue but it requires hard work to achieve it and education to appreciate it. And to make matters worse: complexity sells better”
HERE
BEFORE
HERE
FIVE LIBERATING CONSTRAINTS
1 KNOW WHO’S DRIVING
1 KNOW WHO’S MOUTH YOU'RE IN
REACT
<script src="./react.js"></script> <script> React.render( React.DOM.div({}, "Hello World!"), document.body ) </script>
REACT REDUX REACT ROUTER
REACT REDUX APP REACT ROUTER
REACT REDUX APP REACT ROUTER REACT-ROUTER-REDUX
REACT FLUX APP REACT ROUTER REACT-ROUTER-FLUX
WHAT ROLE DOES REACT PLAY IN YOUR APP?
2 OPTIMIZE FOR CHANGE
<RANT />
None
KEEP IT LIVE
DON'T PERF W/O METRICS
3 KNOW YOUR SHAPES
3 MASTER THE PATTERNS
None
KNOWING & UNKNOWING
COMPONENT/RENDER PROP
COMPONENT/RENDER PROP
COMPONENT/RENDER PROP
HIGHER-ORDER COMPONENT
HIGHER-ORDER COMPONENT
HIGHER-ORDER COMPONENT
HIGHER-ORDER COMPONENT
HOC VS CALLBACKS
KNOW BOTH
4 AVOID THE EDGE
–Ryan Florence “Don't forget it's not the edge that's bleeding,
it's you.”
None
<div style={{ padding: "2rem" }}>
<div css={{ padding: "2rem" }}>
<div className="p-3">
CHOOSE TOOLS YOU CAN MASTER
5 PARTNER. DON'T DEPEND
None
STOP DELEGATING
WHEN YOU NPM INSTALL, THAT'S YOUR CODE NOW
GET GOOD
SHARE
REACT IS AMAZING
UNITY
GUARD OUR STACK
1 KNOW WHO’S DRIVING
2 OPTIMIZE FOR CHANGE
3 KNOW YOUR SHAPES
3 MASTER THE PATTERNS
4 AVOID THE EDGE
5 PARTNER. DON'T DEPEND
None
@chantastic
@chantastic LEARNREACT.COM
None