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
Preact & Inferno
Search
Brian Holt
January 05, 2017
Programming
5
1.8k
Preact & Inferno
Given for SFJS
Brian Holt
January 05, 2017
Tweet
Share
More Decks by Brian Holt
See All by Brian Holt
Human React
btholt
3
990
10 KB or Bust
btholt
0
400
10KB or Bust: The Delicate Power of Webpack and Babel
btholt
2
500
JS Next
btholt
10
1.5k
ES20XX
btholt
1
170
What's Coming After ES6
btholt
2
590
DPL Graduation, October 2016
btholt
1
180
Teaching with Empathy
btholt
5
940
ES6 + React
btholt
3
920
Other Decks in Programming
See All in Programming
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
340
チームのテスト力を鍛える
goyoki
3
890
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
470
概念モデル→論理モデルで気をつけていること
sunnyone
3
300
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
私の後悔をAWS DMSで解決した話
hiramax
4
210
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
AIでLINEスタンプを作ってみた
eycjur
1
230
個人軟體時代
ethanhuang13
0
330
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
740
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
510
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Code Review Best Practice
trishagee
71
19k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Statistics for Hackers
jakevdp
799
220k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Gamification - CAS2011
davidbonilla
81
5.4k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Balancing Empowerment & Direction
lara
3
620
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
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