Rethinking Best Practices
- 3. Give it five minutes.
http://37signals.com/svn/posts/3124-give-it-five-
minutes
- 8. Rethinking Best Practices
• Prerequisite
– Combine DOM generation and display logic
• React’s design
– Re-render the whole app on every update
• React’s implementation
– Virtual DOM and synthetic events
- 13. Coupling is:
“The degree to which each program
module relies on each of the other
modules.”
http://en.wikipedia.org/wiki/Coupling_(computer_science)
- 14. Cohesion is:
“The degree to which elements of a
module belong together.”
http://en.wikipedia.org/wiki/Cohesion_(computer_science)
- 16. “View model” tightly couples
template to display logic.
[{“price”: “7.99”, “product”: “Back
scratcher”, “tableRowColor”:
“rgba(0, 0, 0, 0.5)”}]
- 17. Display logic and markup are
inevitably tightly coupled.
How do you find DOM nodes?
- 20. Symptoms that your front-end
technology is underpowered:
Reliance on primitive abstractions
(like {{> }} and {{#each }}).
- 21. Symptoms that your front-end
technology is underpowered:
Inventing lots of new concepts
(that already exist in JavaScript).
- 22. From the Angular directives docs:
“However isolated scope creates a new
problem: if a transcluded DOM is a child of
the widget isolated scope then it will not be
able to bind to anything. For this reason the
transcluded scope is a child of the original
scope, before the widget created an isolated
scope for its local variables. This makes the
transcluded and widget isolated scope
siblings.”
http://docs.angularjs.org/guide/directive
- 23. The framework cannot know how
to separate your concerns for you.
It should only provide powerful,
expressive tools for the user to do it
correctly.
- 24. This tool is a React component.
A highly cohesive building block for
UIs loosely coupled with other
components.
- 25. Use components to separate
your concerns.
With the full power of
JavaScript, not a crippled
templating language.
- 33. Just don’t write spaghetti code.
“With great power comes great
responsibility” – Uncle Ben in
Spiderman
- 37. JSX is an optional preprocessor
to let you use HTML-like syntax.
<a href=“http://instagram.com/floydophone”>
@floydophone on Instagram
</a>
- 38. JSX is an optional preprocessor
to let you use HTML-like syntax.
React.DOM.a(
{href: „http://instagram.com/floydophone‟},
„@floydophone on Instagram‟
)
- 41. 2. Re-render the whole app on
every update
The key design decision that makes
React awesome.
- 42. Building UIs is hard because
there is so much state.
Lots of UI elements · Design
iteration · Crazy environments ·
Mutable DOM · User input · etc etc
- 44. “Our intellectual powers are rather geared to
master static relations and our powers to visualize
processes evolving in time are relatively poorly
developed. For that reason we should do (as wise
programmers aware of our limitations) our utmost
to shorten the conceptual gap between the static
program and the dynamic process, to make the
correspondence between the program (spread
out in text space) and the process (spread out in
time) as trivial as possible” – Dijkstra
- 45. In the 90s it was easier.
Just refresh the page when the data
changes.
- 46. When the data changes, React re-
renders the entire component.
- 47. That is, React components are
basically just idempotent functions.
They describe your UI at any point in
time, just like a server-rendered
app.
- 49. Re-rendering on every change
makes things simple.
Every place data is displayed is
guaranteed to be up-to-date.
- 52. Re-rendering on every change
makes things simple.
No more explicit DOM operations –
everything is declarative.
- 53. “Re-render on every change?
That seems expensive.”
“And doesn’t it mess up form fields
and scroll position?”
- 55. You can’t just throw out the DOM
and rebuild it on each update.
It’s too slow and you’ll lose form
state and scroll position.
- 56. So we built a virtual DOM (and
events system).
Optimized for performance and
memory footprint
- 57. On every update…
• React builds a new virtual DOM subtree
• …diffs it with the old one
• …computes the minimal set of DOM
mutations and puts them in a queue
• …and batch executes all updates
- 68. It’s fast!
Can do all this at 60fps, even in a
(non-JIT) UIWebView on the
iPhone.
- 69. The virtual DOM lets us do fun
things.
It can run in Node.js (new in 0.4)
- 70. The virtual DOM lets us do fun
things.
Optimizations based on app
structure
- 73. The virtual DOM lets us do fun
things.
Running the whole app in a Web
Worker (experimental)
- 78. Thanks for Rethinking Best
Practices with me!
http://reactjs.org/
#reactjs on Freenode IRC
reactjs on Google Groups
Editor's Notes
- No fb
- SarcasticNot a tutorial
- Or: mixing markup and display logic
- Or: mixing markup and display logic
- PARTIALS
- Jab ember?
- Dismiss syntax
- “You want me to generate my markup in JavaScript!?”
- ----- Meeting Notes (8/22/13 16:30) -----which places in the page do i have to update my like count
- ----- Meeting Notes (8/22/13 16:30) -----easy to unit test
- ----- Meeting Notes (9/9/13 12:00) -----nowhere in this example is the dom node for count explicitly updated
- Two-way data binding talk