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
950
10 KB or Bust
btholt
0
390
10KB or Bust: The Delicate Power of Webpack and Babel
btholt
2
490
JS Next
btholt
10
1.5k
ES20XX
btholt
1
170
What's Coming After ES6
btholt
2
580
DPL Graduation, October 2016
btholt
1
160
Teaching with Empathy
btholt
5
930
ES6 + React
btholt
3
900
Other Decks in Programming
See All in Programming
Contribute to Comunities | React Tokyo Meetup #4 LT
sasagar
0
460
Empowering Developers with HTML-Aware ERB Tooling @ RubyKaigi 2025, Matsuyama, Ehime
marcoroth
2
730
The Implementations of Advanced LR Parser Algorithm
junk0612
1
320
AHC045_解説
shun_pi
0
540
Chrome Extension Techniques from Hell
moznion
1
160
MCP調べてみました! / Exploring MCP
uhzz
2
2.3k
[NG India] Event-Based State Management with NgRx SignalStore
markostanimirovic
1
160
状態と共に暮らす:ステートフルへの挑戦
ypresto
1
660
gen_statem - OTP's Unsung Hero
whatyouhide
1
200
Strategic Design (DDD)for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
160
タイムゾーンの奥地は思ったよりも闇深いかもしれない
suguruooki
1
680
Golangci-lint v2爆誕: 君たちはどうすべきか
logica0419
1
120
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
69
4.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
104
19k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.1k
For a Future-Friendly Web
brad_frost
176
9.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
Adopting Sorbet at Scale
ufuk
76
9.3k
Designing for humans not robots
tammielis
252
25k
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