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
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
P E R F
UI benchmark suite (lower is better)
Taken from infernojs.org
Slide 9
Slide 9 text
C O M PAT
• preact-compat (+5KB) and inferno-compat (+4KB)
• Literally drop in replacement for React and React-DOM
Slide 10
Slide 10 text
D E M O
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
A L I A S
• YOU DON’T EVEN HAVE TO REFACTOR YOUR CODE
• (bottom section nho.lt/react)
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
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)
Slide 15
Slide 15 text
P R E A C T V S I N F E R N O
• Preact has a smaller file size
• Inferno performs better
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
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