Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Preact & Inferno

3994a1ac47c4a684d7378ef06c1571cd?s=47 Brian Holt
January 05, 2017

Preact & Inferno

Given for SFJS


Brian Holt

January 05, 2017


  1. B R I A N H O LT – @

    H O LT B T – N E T F L I X
  2. None
  3. 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
  4. 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
  5. None
  6. 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
  7. 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
  8. P E R F UI benchmark suite (lower is better)

    Taken from infernojs.org
  9. C O M PAT • preact-compat (+5KB) and inferno-compat (+4KB)

    • Literally drop in replacement for React and React-DOM
  10. D E M O

  11. None

    TO REFACTOR YOUR CODE • (bottom section nho.lt/react)
  13. 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
  14. 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)
  15. P R E A C T V S I N

    F E R N O • Preact has a smaller file size • Inferno performs better
  16. 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
  17. 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
  18. @holtbt