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

Performant React

Performant React

For Mobile+Web DevCon 2015

Brian Holt

July 15, 2015
Tweet

More Decks by Brian Holt

Other Decks in Programming

Transcript

  1. W R I T I N G R E A

    C T F O R T H E M O B I L E W E B C A S E S T U D Y: B R I A N H O LT @ H O LT B T
  2. W H Y I S W R I T I

    N G R E A C T D I F F E R E N T F O R T H E M O B I L E W E B ?
  3. F I N B R I A N H O

    LT @ H O LT B T
  4. P E R F M AT T E R S

    O N M O B I L E . A L O T.
  5. W R I T I N G P E R

    F O R M A N T R E A C T B R I A N H O LT @ H O LT B T
  6. P E R F M AT T E R S

    • Data speed • Data cost • Battery drain • Bad UX • Longer load time is LESS ****ING MONEY.
  7. U S E I M A G E S S

    PA R I N G LY. O P T I M I Z E T H E O N E S Y O U D O U S E .
  8. C A C H E • Cache images as long

    as possible. • Consider separating scripts and styles that change frequently from scripts and styles that remain the same. • e.g. Separate your vendor code like Bootstrap from your app code. • Use naming conventions to invalidate cache.
  9. D O N ’ T U S E A W

    E B F O N T. T E L L Y O U R D E S I G N E R T O * * * * O F F I F H E / S H E WA N T S T O .
  10. I C O N F O N T S A

    R E * * * * T O O . T H E Y ’ R E B I G A N D T H E Y ’ R E H A R D T O M A K E A C C E S S I B L E .
  11. Y O U ’ R E S L O W

    I N G D O W N Y O U R W E B S I T E T O M A K E I T L E S S A C C E S S I B L E .
  12. F I L E S I Z E • Having

    just gone to China where data was real expensive to use, CUT DOWN YOUR ****ING FILE SIZES. • Only include polyfills (particularly with babel) you use. • e.g. with lodash, only include methods you use. • Dedupe your dependencies.
  13. C R I T I C A L R E

    N D E R I N G PAT H • This is a psychology game. You want the fastest perceived page load. • Defer anything not critical to the first paint to after it. • However, once you have had your first paint, starting loading everything as fast as you can!
  14. A N I M AT I O N S •

    Use sparingly. • Hard to do good, accessible UX with animations anyway. • JavaScript animations are only performant if the main JS thread is not occupied. • CSS animations can be better because they’re not on the JS thread. Investigate using the GPU to further enhance performant. • Tend to burn battery.
  15. S H O U L D C O M P

    O N E N T U P D AT E • React components have a lifecycle method called shouldComponentUpdate() that React runs in order to tell if it should re- render the component or not. • For components that never re-render, always return false. • For perf bottlenecks, implement your own shouldComponentUpdate. • For other components, leave them alone. It can introduce hard-to-find bugs.
  16. R E A C T P E R F T

    O O L I N G • printInclusive – include lifecycle methods • printExclusive – exclude lifecycle methods • printWasted – TIME/BATTERY YOU ARE WASTING YOU IDIOT
  17. R E N D E R F E W E

    R I T E M S • reddit has this problem and Facebook had it. • One feed item has many tiny components and each page has many feed items. • By only rendering the feed items visible on the page, you save React a significant amount of re-rendering. • Hidden menus / actions? Only render them when shown.
  18. – J O R D A N WA L K

    E ( R E A C T C O R E T E A M ) “The amount of data you have, should remain independent from the amount of data rendered.”
  19. D R A W W I T H I N

    T H E L I N E S • Stop abusing lifecycle methods. • Use refs only when what you want cannot be done another way. • When you must listen for DOM events, be sure to clean up after yourself in componentWillUnmount.
  20. R E A C T F U L R E

    A C T • Careful what you stick on state. State should be reserved for mutable data that the component needs to react to changes for. • There is a point where you’re breaking a component into too small of components. • Sometimes is just better to have a button with a style class and that’s it!
  21. W E B PA C K • Webpack can break

    your page into chunks that get loaded only on the necessary page. • Webpack does tree shaking dead code elimination. • If you can’t switch to Webpack, uglify can at least get you dead code elimination. • Otherwise npm dedupe can help you do it by hand.
  22. S V G S I N R E A C

    T A R E E X P E N S I V E • Use sparingly. • Don’t make them React components if you can help it.
  23. W R I T E T H E A P

    P F I R S T • Don’t spend too much optimizing code preemptively or code that isn’t really a bottleneck. • Prefer readability when possible. • After getting readable code down then go back and optimize and hack around the bottlenecks. • Document hacks well.
  24. R E M E M B E R E V

    E RY T H I N G Y O U K N O W ?
  25. H T T P 2 • SPDY • Leaves connection

    open, eliminating costly handshakes. • Uses compression inherently. • Multiplexes assets sent down.
  26. H T T P 2 A N T I PAT

    T E R N S • Concatenating files. • Spriting images. • Serving statics from a separate domain. • Minifiying assets.
  27. S P D Y / H T T P 2

    S U P P O R T • All mobile browsers (except Opera Mini and Blackberry) support it. • Yeah, even the stock Android browser. Weird. • Firefox, Chrome, and Opera since forever. • IE 11+ and Safari 8+.
  28. T H AT ’ S ~ 8 0 % O

    F G L O B A L U S E R S . A N D J U S T A B O U T A L L M O B I L E U S E R S .
  29. F I N B R I A N H O

    LT @ H O LT B T