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
980
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
580
DPL Graduation, October 2016
btholt
1
170
Teaching with Empathy
btholt
5
940
ES6 + React
btholt
3
910
Other Decks in Programming
See All in Programming
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
Is Xcode slowly dying out in 2025?
uetyo
1
280
効率的な開発手段として VRTを活用する
ishkawa
0
140
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
780
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
5つのアンチパターンから学ぶLT設計
narihara
1
170
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.9k
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
100
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
270
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Docker and Python
trallard
44
3.5k
Unsuck your backbone
ammeep
671
58k
Practical Orchestrator
shlominoach
189
11k
Agile that works and the tools we love
rasmusluckow
329
21k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
We Have a Design System, Now What?
morganepeng
53
7.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Designing for Performance
lara
610
69k
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