1 + =Speed
I was going to tell a hilarious joke, but I didn’t know how the audience would … react
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
Optimized DOM operations
React in 90 seconds
Premise: The modern DOM is dangerously unperformant.
● 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
It’s not that simple.
React some of
Look, a nested list!
So I did some
Slow ng-repeat table
Really slow ng-repeat table
React to the
● Write a directive that uses React to render each tag list.
● Call the directive inside the ng-repeat markup.
Why did this fail?
● Because React could not batch its DOM operations.
● Why? ● Because React did not control the “outer”
○ Angular controlled the table and rows.
○ appendChild(), React, appendChild(), React, appendChild(), React...
● ng-repeat is not inherently slow
Fast forward one year to...
?1 + =
● +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...
Do your own engineering Measure Observe Decide
● 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