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
920
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
160
What's Coming After ES6
btholt
2
570
DPL Graduation, October 2016
btholt
1
160
Teaching with Empathy
btholt
5
920
ES6 + React
btholt
3
890
Other Decks in Programming
See All in Programming
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
6
2.1k
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
13
4.5k
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
53
18k
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
240
Domain-Driven Transformation
hschwentner
2
1.9k
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
110
Honoとフロントエンドの 型安全性について
yodaka
7
1.4k
PHP ステートレス VS ステートフル 状態管理と並行性 / php-stateless-stateful
ytake
0
110
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
880
PRレビューのお供にDanger
stoticdev
1
220
Rails アプリ地図考 Flush Cut
makicamel
1
130
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
200
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Raft: Consensus for Rubyists
vanstee
137
6.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Code Review Best Practice
trishagee
67
18k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
500
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Why Our Code Smells
bkeepers
PRO
336
57k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Automating Front-end Workflow
addyosmani
1368
200k
Agile that works and the tools we love
rasmusluckow
328
21k
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