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
The how and why of flexible React components
Search
Jenn Creighton
October 14, 2018
Programming
7
4k
The how and why of flexible React components
Jenn Creighton
October 14, 2018
Tweet
Share
More Decks by Jenn Creighton
See All by Jenn Creighton
Understanding Iterators & Iterables in JavaScript
jenncreighton
0
110
Everything I Know About React I Learned From Twitter
jenncreighton
0
1.1k
React 16, the future & you (December 4, 2018)
jenncreighton
1
160
The How and Why of Flexible React Components
jenncreighton
0
150
React 16, the future & you
jenncreighton
0
190
Other Decks in Programming
See All in Programming
Google Sign-inの移行から始めるCredential Manager活用
clockvoid
0
310
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
420
LangChainの現在とv0.3にむけて
os1ma
4
920
A New Era of Testing
mannodermaus
2
510
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.6k
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
180
全部見せます! クラシルリワードのSwiftTesting移行プロジェクト
uetyo
0
210
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
200
KSPの導入・移行を前向きに検討しよう!
shxun6934
PRO
0
280
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
800
AndroidアプリのUIバリエーションをあの手この手で確認する / Check UI variations of Android apps by various means
tkmnzm
1
180
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
810
Featured
See All Featured
Designing for humans not robots
tammielis
248
25k
Designing with Data
zakiwarfel
98
5k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Gamification - CAS2011
davidbonilla
79
5k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
It's Worth the Effort
3n
182
27k
Fireside Chat
paigeccino
31
2.9k
BBQ
matthewcrist
83
9.2k
Transcript
The how and why of flexible React components THE HOW
AND WHY OF FLEXIBLE REACT COMPONENTS
Hi! I’m Jenn. Senior Frontend Engineer, ClassPass @gurlcode
@gurlcode
flexible @gurlcode
@gurlcode
@gurlcode
with Tooltip withTooltip @gurlcode
with Tooltip with Dot withTooltip withDot @gurlcode
with Tooltip with Dot with Modal withDot withModal withTooltip @gurlcode
<BlockComponent className=“block block-md block—orange” message={message} withTooltip={false} withModal modalProps={modalProps} userId={userId} userName={userName}
withDot={false} experimentRunning experimentId={experimentId} colorChange={false} showMessageOnLoad onModalClose={() => {}} hasRoundedCorners withAnalytics analyticsProps={analyticsProps} /> BEWARE THE APROPSCALYPSE <BlockComponent className=“block block—md block—orange” withTooltip={false} withDot={false} withModal modalProps={modalProps} onModalClose={onModalClose} onMouseOver={onMouseOver} withExperiment experimentId={experimentId} userName={userName} userId={userId} analyticsProps={analyticsProps} roundedCorners /> @gurlcode
@gurlcode
@gurlcode
You have another reservation at this time. @gurlcode
Is the user logged in? State of subscription? State of
class? yes unsubscribed subscribed available unavailable reserved cancelled no join reactivate reserve disable cancel join
None
@gurlcode
reusable !== flexible @gurlcode
Flexibility is about more than reusability. It’s about the ability
understand and augment. @gurlcode
@gurlcode
@gurlcode
<ScheduleCta type={?} /> @gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
Keep business logic out of your components. @gurlcode
@gurlcode
Centralized logic is easier to reason about @gurlcode
Test the component separate from the logic @gurlcode
@gurlcode
<ScheduleCta type={?} /> @gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
None
None
None
@gurlcode
@gurlcode
None
@gurlcode
@gurlcode
@gurlcode
@gurlcode
<ScheduleCta type={?} /> @gurlcode
components[type] @gurlcode
components = { reserve: ReserveCta, join: JoinCta, cancel: CancelCta, disable:
DisableCta, reactivate: ReactivateCta } @gurlcode
const Component = components[type]; @gurlcode
const Component =`${left || right}Sidebar`; @gurlcode
const Component = props.isCard ? ( <Card> <Content /> </Card>
) : (<Content />); @gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
<ScheduleCta type={?} className=“” />
@gurlcode
Decreased prop complexity Use whatever logic we want Use individual
CTAs alone Add & remove CTAs with ease Use whatever logic we want Use individual CTAs alone Add & remove CTAs with ease @gurlcode
CTAs added and removed for A/B tests Removing Disable CTA
on some pages Classnames changed Messaging changed for ReserveCta Ask for specific CTA on specific page @gurlcode
Hmm… @gurlcode
Render Props* *children as a function @gurlcode
… so what if children were a function? @gurlcode
@gurlcode
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ?? ?? ?? ? ? ?? ? ? ? ? ?? @gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
Render Props === state delegate children function === UI handler
@gurlcode
https://reactjs.org/docs/render-props.html https://github.com/paypal/downshift @gurlcode
@gurlcode
you === flexible @gurlcode
@gurlcode
Know your traps. @gurlcode
Kill your darlings. @gurlcode
Start with the ideal API Let the API inform the
component design Decide what level of magic you want Business logic does not belong in components Render Props is awesome (use it!) Be flexible as an engineer (know your traps, kill your darlings) @gurlcode
Thank you! Content by Jenn Creighton Illustrations by Janny Ji
(jannyji.com) @gurlcode