Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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 ?

Slide 3

Slide 3 text

I T ’ S N O T.

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

L O L J K

Slide 6

Slide 6 text

P E R F

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

hey reddit

Slide 14

Slide 14 text

lol mobile reddit’s perf is bad

Slide 15

Slide 15 text

lol mobile reddit’s perf is bad shit

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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 .

Slide 18

Slide 18 text

C A C H E

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

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 .

Slide 21

Slide 21 text

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 .

Slide 22

Slide 22 text

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 .

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

G O O D J O B .

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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!

Slide 27

Slide 27 text

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.

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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.

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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.

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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.

Slide 35

Slide 35 text

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!

Slide 36

Slide 36 text

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.

Slide 37

Slide 37 text

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.

Slide 38

Slide 38 text

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.

Slide 39

Slide 39 text

H T T P 2

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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.

Slide 44

Slide 44 text

W H E N ?

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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 .

Slide 48

Slide 48 text

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