The document outlines three key advantages of using React, a JavaScript library for building user interfaces: reusability and testability of components, improved performance through the virtual DOM, and effective handling of data changes via one-way data flow. It contrasts these benefits with traditional approaches that face challenges like poor separation of concerns and inefficient re-rendering. The document emphasizes React's component-based architecture and its capabilities for server-side rendering to enhance SEO.

1. 3 Reasons to Love React
A JavaScript library for building User Interfaces

3. “The art of programming is
the art of organizing
complexity”
- Edsger W. Dijkstra

4. What is React?
View in MVC
CommentBox
- CommentForm
- CommentList
Comment

5. Why React?
1. Reuseable & Testable - React Component
2. Performance - Virtual DOM
3. Build UI with data changes over time -
One-way data flow

6. 1. Reuseable & Testable
React Component

7. Challenges in Traditional Approach
1. No business logic in templates
- Need more flexibility than {{#each}} and {{#if}}Poor
- Separation of Concerns
Server
(Rails)
ERB template
Client
(Backbone)
Handlebars template
React Components React ComponentsIsomorphic!

8. React Components - basic building blocks
providing attributes specifies the textContent.

9. JSX - XML-like syntax extension to JavaScript
Note:
- class is discouraged as XML attribute, use className instead
- JSXTransformer to JS

10. Render Component

11. Server-side Rendering - Great for SEO

12. 2. Performance
Virtual DOM

13. Challenges in Traditional Approach
2. Re-render the whole UI aggressively

14. Virtual DOM
● Diff - the new one from the old one
● Reconciliation - knows to only update the
changed parts
● Minimal DOM manipulation
● Put in queues, batched reads & writes

15. Benchmarks - @ 25 items
Key-Value
Observing
(Ember/Meteor)
Virtual DOM
Initial render ~ 5 ms ~ 6 ms
Warm updates ~ 2 ms ~ 2 ms
Steady state
memory
(force CG)
~ 11.8 mb ~ 7.8 mb

16. Benchmarks - @ 10k items
KVO
(Ember/Meteor)
Virtual DOM
Initial render ~ 540 ms ~ 18 ms
Warm updates ~ 215 ms ~ 4.5 ms
Steady state
memory
(force CG)
~ 30 mb ~ 9 mb

17. Complexity (perf) comparison
KVO
(Ember/Meteor)
Virtual DOM
(React)
CPU
(on update)
O(1) O(v)
Memory
(steady state)
O(m)
size of your model
O(v)
size of your view
m >> v

18. 3. Build UI with data
changes over time
One-way data flow

20. 3. Complicated two-way data binding
Challenges in Traditional Approach
model 1
model2
model3
view 2
view 3
view 1

21. Unidirectional Data Flow
- State is mutable vs Prop is immutable
(Idempotence)
Parent Component
Children Components
- manage the state
- Pass its state down via props

22. State - top level data, change when setState()

23. Props - Pass data down, cannot be modified

24. Events - re-render itself after setState()
camelCase naming convention

25. Why React?
1. Reusable & Testable - React Component
2. Performance - Virtual DOM
3. Build UI with data changes over time -
One-way data flow

26. @victorleungtw
Don’t call me, I’ll callback you. I promise!