Performant React

Performant React

For Mobile+Web DevCon 2015

3994a1ac47c4a684d7378ef06c1571cd?s=128

Brian Holt

July 15, 2015
Tweet

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. I T ’ S N O T.

  4. F I N B R I A N H O

    LT @ H O LT B T
  5. L O L J K

  6. P E R F

  7. P E R F M AT T E R S

    O N M O B I L E . A L O T.
  8. 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
  9. 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.
  10. None
  11. None
  12. None
  13. hey reddit

  14. lol mobile reddit’s perf is bad

  15. lol mobile reddit’s perf is bad shit

  16. G E N E R A L P E R

    F T I P S
  17. 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 .
  18. C A C H E

  19. 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.
  20. 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 .
  21. 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 .
  22. 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 .
  23. None
  24. G O O D J O B .

  25. 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.
  26. 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!
  27. 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.
  28. R E A C T P E R F T

    I P S
  29. 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.
  30. 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
  31. None
  32. 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.
  33. – 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.”
  34. 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.
  35. 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!
  36. 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.
  37. 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.
  38. 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.
  39. H T T P 2

  40. R E M E M B E R E V

    E RY T H I N G Y O U K N O W ?
  41. I T ’ S W R O N G ,

    L O L .
  42. H T T P 2 • SPDY • Leaves connection

    open, eliminating costly handshakes. • Uses compression inherently. • Multiplexes assets sent down.
  43. 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.
  44. W H E N ?

  45. None
  46. 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+.
  47. 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 .
  48. F I N B R I A N H O

    LT @ H O LT B T