1 + =Speed



Dave Smith



@djsmith42

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

Engineering

is the

intersection

of

science

and

economics



Science



Engineering



Economics

Performance is hard.

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

--Miško Hevery to me. About this talk. Twice.

“Is RUeascet lfaesstesr QthuanesAtnigounlar?”

React in 90 seconds



Your JavaScript

Code

Application State



Virtual DOM

Plain old JavaScript

objects



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



React Reconciler

and

Renderer



Browser DOM



Optimized DOM operations

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

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

The obvious conclusion?

React all the

things!

It’s not that simple.

React some of

the things?

The Tragedy

New column

Look, a nested list!

So I did some

advanced

performance

mathematics

Slow ng-repeat table

+

Nested ng-repeat

=

Really slow ng-repeat table

wat

React to the

rescue!!!11

Our attempt

● Write a directive that uses React to render each tag list.

● Call the directive inside the ng-repeat markup.



React components

Result:

1+ =

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

Fast forward one year to...

The Glory

?1 + =

Demo

Drawbacks

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

Where React Shines

● Initial DOM load

○ Thanks to innerHTML

● Updating DOM after state changes

○ Small changes ○ Large changes

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.

One more thing...

Angular 2

is fast.

Really fast.

Conclusion

Do your own engineering Measure Observe Decide

@djsmith42

Links

● Angular + React Demo Code: ○ https://github.com/djsmith42/angular_react_directive_example

● Angular2 Demo Code: ○ https://github.com/djsmith42/angular2_calendar

● Video: ○ https://www.youtube.com/watch?v=XQM0K6YG18s