Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Preact & Inferno
Brian Holt
January 05, 2017
Programming
5
1.5k
Preact & Inferno
Given for SFJS
Brian Holt
January 05, 2017
Tweet
Share
More Decks by Brian Holt
See All by Brian Holt
btholt
3
580
btholt
0
350
btholt
2
410
btholt
10
1.5k
btholt
1
120
btholt
3
540
btholt
1
84
btholt
5
880
btholt
3
800
Other Decks in Programming
See All in Programming
dulltz
0
410
nbkouhou
1
1k
line_developers_tw
0
970
standfm
0
210
thatjeffsmith
0
350
supikiti
3
1.2k
yumcyawiz
4
610
komagata
1
1.8k
77web
0
210
line_developers_tw2
0
570
anchorcable
1
120
mu2in
0
130
Featured
See All Featured
sferik
609
54k
danielanewman
1
470
smashingmag
283
47k
jensimmons
207
10k
denniskardys
220
120k
chriscoyier
145
19k
lauravandoore
437
28k
nonsquared
81
3.3k
jeffersonlam
328
15k
swwweet
206
6.8k
robhawkes
52
2.8k
iamctodd
17
1.8k
Transcript
B R I A N H O LT – @
H O LT B T – N E T F L I X
None
W H AT ’ S C O O L A
B O U T R E A C T • Components • One way data flow • Shareable components • Predictable location of logic • Performance, most of the time
W H AT ’ S N O T C O
O L A B O U T R E A C T • File size • Performance, sometimes
None
W H Y Y O U M AY U S
E P R E A C T O R I N F E R N O • File size • Performance, sometimes • lol
F I L E S I Z E • Production
build, minified, gzipped • Preact: 3KB • Inferno: 9KB • React (15.4 w/ react-dom): 45KB • Vue: 23KB • Angular (2, without RX): 112KB • Ember (2.2): 111KB
P E R F UI benchmark suite (lower is better)
Taken from infernojs.org
C O M PAT • preact-compat (+5KB) and inferno-compat (+4KB)
• Literally drop in replacement for React and React-DOM
D E M O
None
A L I A S • YOU DON’T EVEN HAVE
TO REFACTOR YOUR CODE • (bottom section nho.lt/react)
W H Y Y O U M AY N O
T WA N T T O U S E P R E A C T O R I N F E R N O • Facebook • Community • Fiber • Sometimes not totally drop in due to dependencies • Almost all the big deps work though, like react-redux and react-router
W H AT P R E A C T /
I N F E R N O L A C K • Mixins • React.createClass • Refs • Synthetic Events (Inferno does some)
P R E A C T V S I N
F E R N O • Preact has a smaller file size • Inferno performs better
H O W M U C H T I M
E Y O U S AV E O N 2 G • Download time for our apps • Preact (6.2KB): ½ second • Inferno (12.2KB): 1 second • React (45.3KB): 4 seconds
O T H E R F R A M E
W O R K S O N 2 G • Just the framework: • Vue (23KB): 2 seconds • Angular (112KB): 9 seconds • Ember (111KB): 9 seconds
@holtbt