Performant React

For Mobile+Web DevCon 2015

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.
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 .
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
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 ?
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