Why is React faster than other JS frameworks such as Angular or Ember? Its implementation of a *virtual DOM* and *synthetic events*

React Virtual DOM and Synthetic Events.md

React's Virtual DOM

-One reason React is so fast

Why are UIs difficult to build?

• Humans are in a loop
• Hard to test, doesn't look/feel right when there's a bug
• Lots of state, seems simple to user, but lots of complexity under the hood
• Tooling mismatch: front-end tools not as good as back-end

Thoughts:

"reliable, predictable software" >> must be simple

• App to fail same way to development as it does in production
• Want to recreate state of application, without too many imperative operations that are difficult to test and reporoduce

State

example: how should a buddy list look after users go offline and online?

• Hard to conceptualize
• What's easier? Object of users and their online states

Data binding

• Makes the UI (a dynamic process) look more like a static program relative to your data model
• Data binding syncs state in your UI with state in your data model so you don't have to

Key-Value Observation

• Common type of data binding
• Implemented by Ember, Knockout, Backbone, Meteor
• Not allowed to use regular JS, have DSL like Handblars and

DOM is stateful

• Example: render sorted list of companies
• Want to update DOM
  • ->Could be a bad experience: DOM refreshing on user
  • ->Wasteful, slow

Solution: Virtual DOM

• Whenever anything may have changed, re-render everything to a virtual DOM representation
• Diff the previous representation with the next one
• Only update the real DOM with what actually changed (19:24 Youtube video)

Why hasn't it been implemented before?

• People thought it wouldn't perform well
• But KVO is not free

Memory usage

• Big O of n --> but it matters what n is. For React, it's the v(iew) only, rather than m(odel) - all of the model with its observables.
• Less memory usage because only keeping track of what's in the view, not all observables

Practical expressivity

"measure of ideas expressible concisely and readily in a language"

---

Source:

Pete Hunt The Secrets of React's Virtual DOM https://www.youtube.com/watch?v=-DX3vJiqxm4

Synthetic Events

• Event handlers passed instances of SyntheticEvents, cross-browser wrapper around the browser's native event
• Result: Events work identically across all browsers

Event Pooling

• SyntheticEvent is pooled
• SyntheticEvent object will be reused, properties nullfied after event callback invoked

performance!

Source

https://facebook.github.io/react/docs/events.html