ReactJS - Re-rendering pages in the age of the mutable DOM
Download as PPTX, PDF4 likes948 views
A quick presentation about ReactJS and its benefits - with some discussion of the Flux pattern/architecture at the end. Follow me: https://twitter.com/marcacyr https://github.com/marcacyr
Ad
More Related Content
What's hot (20)
Similar to ReactJS - Re-rendering pages in the age of the mutable DOM (20)
Ad
Recently uploaded (20)
Ad
ReactJS - Re-rendering pages in the age of the mutable DOM
- 1. ReactJS Re-rendering pages in the age of the mutable DOM
- 2. React re-renders entire component whenever data changes • 80s/90s — user input caused re-render of entire web page. Why is this best? • Immutable vs Mutable — mutations can cause complexity to a point where an app is no longer maintainable
- 3. “React components are idempotent functions. They describe your UI at any point in time, just like a server-rendered application.”
- 4. What does React do about Mutable vs Immutable state? • React isolates mutable state as much as possible. • Re-rendering on every change makes things simple - data is guaranteed to be up-to-date • This is w/out magical data-binding, w/out model dirty checking, and w/out explicit DOM operations • Extra note: Why is dirty checking bad? It’s expensive and as your application grows in complexity, it can cause your code to get out of hand quickly
- 6. But how can you re-render every time data changes? Isn’t this too expensive?
- 7. … Enter the Virtual DOM
- 8. What is the v-DOM and how does it work? • The v-DOM is a virtualized representation of the DOM at different points in time (before and after state change) • This virtualization is made up of lightweight JavaScript objects that represent the DOM tree. As such - it is inexpensive to store in memory and allows the diffing algorithm to execute in milliseconds
- 9. On every update… • React builds a new v-DOM subtree • diffs it with the old one • computes the minimal set of DOM mutations and puts them in queue • and batch executes all updates
- 10. It does this in milliseconds
- 11. • React is fast because it computes minimal DOM operations — the DOM is slow, JavaScript is actually very, very fast • React batches read/writes for optimal performance automatically. It does this through use of the v-DOM which is inherently faster than the actual DOM.
- 12. Some other points of interest • Automatic top-level event delegation with cross- browser HTML5 events • React also has a virtual event system in addition to the v-DOM system
- 14. Web crawlers! • One of the big drawbacks to single-page applications that rely on user input is that web crawlers can’t index them the same way they can static pages • React can generate a static HTML page and send it down to the client, and then when render component is called, it looks at the DOM - checks with what was rendered on server... fast initial page load experience and Google web-bots can crawl
- 15. What does that mean… the long paragraph there?
- 16. “React can generate a static HTML page and send it down to the client, and then when render component is called, it looks at the DOM - checks with what was rendered on server... fast initial page load experience and Google web- bots can crawl.”
- 17. What this means… • You can generate a static html page and send it down — something that can be crawled and indexed • Then, when JS boots up, it will replace DOM elements as needed to boot up the UI • Resulting in an indexable page that is fully built on JavaScript
- 18. Let’s pause for a minute to note some key takeaways so far • Build components, not templates • Re-render, don’t mutate • V-DOM is simple and fast
- 19. So where does Flux come in? … also, Relay is coming soon
- 20. As you build apps on React, you will remove models • In most MV* JS frameworks, model is just a JS object that allows you to know when something changes — when data changes (enter two-way data-binding) • Example: • You have a model with Title and Subtitle. When something changes you manually wire up the views to have a node change when the Title changes. • You change the inner text on some node when the Title changes • You have to wire this up yourself completely — in Backbone, you have to wire both ways. In some other frameworks, you only have to wire one way, but this is still a lot of code.
- 21. How is React different in this example?
- 22. With React… • You trigger a state change. • Re-render happens. • Diff happens in background automatically. • View updates without any flashing in the DOM and it happens very, very quickly. • This shortens the amount of code you have to write.
- 23. React can be most powerful without models • This does not mean you don’t have data structure • You use the Flux design pattern (or coming soon, the Relay framework) • This is where stores come in…
- 24. What is a Store?
- 25. Everything’s in Flux • Centralized stores represent UI components • The store is your source of truth for the data of your application • When you ask a store for data, if it doesn’t have it, it fetches it and invokes your callback after it gets it
- 26. This centralizes validation and update logic in one place.
- 27. Think about it.. mutation all over the place is not ideal.
- 29. More on Relay when it becomes available to the public as open-source