Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/1KRPXlL. Brian Holt talks about what is React and is desirable; what are some specific things to pay attention to for performance when writing React; some general web performance tips; what are some lessons learned while helping write m.reddit.com using React. Filmed at qconsf.com. Brian Holt is Senior UI Engineer at Netflix.

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 – B R I @ N H O . LT

2. InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• News 15-20 / week
• Articles 3-4 / week
• Presentations (videos) 12-15 / week
• Interviews 2-3 / week
• Books 1 / month
Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations/
react-reddit-mobile

3. Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide
Presented at QCon San Francisco
www.qconsf.com

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

5. I T ’ S N O T.

6. F I N
B R I A N H O LT
@ H O LT B T

7. L O L J K

8. P E R F

9. P E R F M AT T E R S O N M O B I L E .
A L O T.

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

11. W E B P E R F O R M A N C E
B R I A N H O LT
@ H O LT B T

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

16. hey reddit

17. lol

18. mobile reddit’s
perf is bad

19. ****

20. G E N E R A L P E R F T I P S

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

22. C A C H E

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

24. H T T P C A C H I N G I S N ’ T A S G R E AT A S Y O U T H I N K
• IE, Chrome, Safari and Firefox only keep ~200MB of cache on hand.
• Android keeps 80MB of cache.
• Mobile Safari has no HTTP cache.

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

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

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

29. G O O D J O B .

30. 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!

31. 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 (especially with Babel) you use.
• e.g. with lodash, only include methods you use.
• Dedupe your dependencies.

33. W E ' D L I K E T O I M A G I N E T H AT T H E WAY A W E B PA G E
L O A D S I S T H I S :
1. Browser opens connection to yoursite.com, does DNS/TCP/SSL setup.
2. Browser downloads the document (HTML).
3. As soon as the browser is done downloading the document, the browser
starts downloading all the document's sub resources at the same time.
4. Browser parses the document and fills in the necessary sub resources
once they've been downloaded.
source: nateberkopec.com/2015/11/05/page-weight-doesnt-matter.html

34. H E R E ' S W H AT A C T U A L LY H A P P E N S :
1. Browser opens connection to yoursite.com, does DNS/TCP/SSL setup.
2. Browser downloads the document (HTML).
3. Browser starts parsing the document. When the parser encounters a subresource, it opens a
connection and downloads it.
4. Parse the document? Nah man, I'm gonna wait for this script to download and execute. If the
subresource is an external script tag, the parser stops, waits until it the script has downloaded,
executes the entire script, and then moves on.
5. As soon as the parser stops and has to wait for an external script to download, it sends ahead
something called a preloader. The preloader may notice and begin downloading resources if it
understands how to (hint: a very popular Javascript pattern prevents this).
source: nateberkopec.com/2015/11/05/page-weight-doesnt-matter.html

36. W H AT T O D O
• Don't stop the parser.
• Get out of the browser preloader's way.
• Utilize HTTP caching - but not too much.
• Use the Resource Hint API.
source: nateberkopec.com/2015/11/05/page-weight-doesnt-matter.html

37. R E S O U R C E H I N T S
• preconnect – A neat little trick to let the browser know about things that it
couldn’t otherwise. A good example would be a script tag you’re going to
inject later.
• prefetch – Great for grabbing resources for the next page the user is going
to hit. If you’re in a funnel and you know where the user is going next,
prefect those resources.
• prerender – Grab and actually pretender an HTML resource. Great for
something like Google Instant Pages.

38. U S E A S Y N C A N D D E F E R AT T R I B U T E S O N Y O U R
S C R I P T TA G S
normal
async
defer
source: growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

39. W H AT AT T R I B U T E W H E N
• Typically you want to use async where possible, then defer then no
attribute. Here are some general rules to follow:
• If the script is modular and does not rely on any scripts then use async.
• If the script relies upon or is relied upon by another script then use defer.
• If the script is small and is relied upon by an async script then use an inline
script with no attributes placed above the async scripts.
source: growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

40. D E F E R G U A R A N T E E S O R D E R O F
E X E C U T I O N .
A S Y N C D O E S N O T.

41. I F Y O U R T R A C K I N G O R A N A LY T I C S A R E N O T
A S Y N C , Y O U M A K E K I T T Y S A D

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

43. R E A C T P E R F T I P S

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

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

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

48. – 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.”

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

50. 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!

51. W E B PA C K
• Webpack can break your page into chunks that get loaded only on the
necessary page.
• Import only modules that you need.
• 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.

52. R O L L U P. J S
• YAJSP™ (yet another JavaScript packager, like Browserify or Webpack)
• … the resulting bundle is always smaller than the Browserify or Webpack
equivalent, because ES2015 modules are inherently more efficient than
CommonJS modules. You can even eliminate unused library code with
tree-shaking.

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

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

55. H T T P 2

56. R E M E M B E R E V E RY T H I N G Y O U K N O W ?

57. I T ’ S W R O N G , L O L .

58. H T T P 2
• SPDY
• Leaves connection open, eliminating costly handshakes.
• Uses compression inherently.
• Multiplexes assets sent down.

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

60. W H E N ?

62. 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+.

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

64. F I N
B R I A N H O LT
@ H O LT B T

65. Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/react-
reddit-mobile