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

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

5. Everything is
declarative!

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

13. What else matters?

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