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
950
ES6 + React
btholt
3
920
Other Decks in Programming
See All in Programming
議事録の要点整理を自動化! サーバレス Bot 構築術
penpeen
3
1.6k
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.2k
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
140
Swiftビルド弾丸ツアー - Swift Buildが作る新しいエコシステム
giginet
PRO
0
1.5k
CSC509 Lecture 01
javiergs
PRO
1
430
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
290
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
170
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
2.3k
株式会社 Sun terras カンパニーデック
sunterras
0
170
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
160
2025年版 サーバーレス Web アプリケーションの作り方
hayatow
23
25k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Writing Fast Ruby
sferik
629
62k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Become a Pro
speakerdeck
PRO
29
5.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
A designer walks into a library…
pauljervisheath
208
24k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Automating Front-end Workflow
addyosmani
1371
200k
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