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.7k
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
880
10 KB or Bust
btholt
0
380
10KB or Bust: The Delicate Power of Webpack and Babel
btholt
2
480
JS Next
btholt
10
1.5k
ES20XX
btholt
1
160
What's Coming After ES6
btholt
2
570
DPL Graduation, October 2016
btholt
1
150
Teaching with Empathy
btholt
5
920
ES6 + React
btholt
3
870
Other Decks in Programming
See All in Programming
Increased Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
420
Ebitengineの1vs1ゲーム WebRTCの活用
ponyo877
0
380
Modernisation Progressive d’Applications PHP
hhamon
0
110
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
220
Shinjuku.rb#95:心の技術書紹介
free_world21
1
110
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
230
How to Break into Reading Open Source
kaspth
2
220
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
210
エンジニア1年目で複雑なコードの改善に取り組んだ話
mtnmr
3
2k
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
GraphQL あるいは React における自律的なデータ取得について
quramy
11
3k
オートマトン学習しろ / Do automata learning
makenowjust
3
130
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
Embracing the Ebb and Flow
colly
83
4.4k
Facilitating Awesome Meetings
lara
49
6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
19k
Side Projects
sachag
451
42k
A better future with KSS
kneath
235
17k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Typedesign – Prime Four
hannesfritz
39
2.3k
In The Pink: A Labor of Love
frogandcode
139
22k
Producing Creativity
orderedlist
PRO
340
39k
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