1 of 37

@djsmith42

Dave Smith

+

=Speed

1

2 of 37

I was going to tell a hilarious joke, but I didn’t know how the audience would … react

3 of 37

Engineering

intersection

science

economics

is the

of

and

Science

Economics

Engineering

4 of 37

“I don’t think you are measuring what you think you are measuring.”

​

--Miško Hevery to me.

About this talk.

Twice.

Performance is hard.

5 of 37

“Is React faster than Angular?”

Useless Question

6 of 37

7 of 37

8 of 37

React in 90 seconds

Application State

Virtual DOM

Plain old JavaScript objects

Your JavaScript

Code

React Reconciler�and�Renderer

Browser DOM

Optimized DOM operations

​

https://www.youtube.com/watch?v=x7cQ3mrcKaY

9 of 37

React in 90 seconds

Premise: The modern DOM is dangerously unperformant.

  • Virtual DOM is a pure JavaScript intermediate representation of DOM.�
  • When your app state changes, your code returns a new Virtual DOM.�
  • React diffs the new Virtual DOM against the previous one.�
  • React generates performance optimized DOM operations
    • Batched reads and writes
    • Fewer reflows
    • innerHTML

10 of 37

Links for Later

Pete Hunt explaining Virtual DOM:

https://www.youtube.com/watch?v=x7cQ3mrcKaY#t=1207

​

Virtual DOM diff algorithm:

http://facebook.github.io/react/docs/reconciliation.html

​

Referential transparency:

http://en.wikipedia.org/wiki/Referential_transparency_(computer_science)

http://en.wikipedia.org/wiki/Pure_function

http://www.itu.dk/courses/BPRD/E2009/fundamental-1967.pdf

11 of 37

The obvious conclusion?

12 of 37

React

all

the

things!

13 of 37

It’s not that simple.

14 of 37

React

some of

the

things?

15 of 37

16 of 37

The Tragedy

17 of 37

New column

Look, a nested list!

18 of 37

So I did some

advanced

performance

mathematics

19 of 37

Slow ng-repeat table

+

Nested ng-repeat

=

Really slow ng-repeat table

20 of 37

React

to

the

rescue!!!11

wat

21 of 37

Our attempt

  • Write a directive that uses React to render each tag list.�
  • Call the directive inside the ng-repeat markup.

React components

22 of 37

Result:

23 of 37

+

1

=

24 of 37

Why did this fail?

  • Because React could not batch its DOM operations.
  • Why?
  • Because React did not control the “outer” DOM
    • Angular controlled the table and rows.
    • appendChild(), React, appendChild(), React, appendChild(), React...
  • ng-repeat is not inherently slow

25 of 37

Fast forward one year to...

26 of 37

The Glory

27 of 37

28 of 37

29 of 37

+

?

1

=

30 of 37

Demo

31 of 37

Drawbacks

  • +500KB of code.
  • JSX build step.
  • Two frameworks.
  • You might have to change your i18n (we did).

32 of 37

Where React Shines

  • Initial DOM load
    • Thanks to innerHTML�
  • Updating DOM after state changes
    • Small changes
    • Large changes

33 of 37

Where React is Weak

  • Updating DOM after no state changes
    • In my app, takes about twice as long as Angular1
    • Still very fast in my app (e.g., 27ms vs 13ms)
    • Strategy: don’t re-render all components.

34 of 37

One more thing...

35 of 37

Angular 2

is fast.

Really fast.

36 of 37

Conclusion

Do your own engineering

Measure

Observe

Decide

@djsmith42

37 of 37

Links

  • Angular + React Demo Code:

​

  • Angular2 Demo Code:

​

  • Video: