Today, I’m going to talk about React. React is a JavaScript library for creating user interfaces. I have been using it for a couple projects. The more I use it, the more I love it. So I’m here to tell you why I think it is awesome, why I am passionate about it, and why I am going to introduce it to you. I am a software engineer, and I understand how you feel for your day to day job as a developer. Before using React, sometimes it just doesn’t feel right with your code, especially when you are building user interfaces. Because there are so many possible states, and it is not possible to test all of them. There is mutable DOM, and users could input something that you are not expected. Or sometimes your UI just doesn’t work, and it perform some unpredictable behaviour, or doesn’t scale for large applications. Because data changes over time. The art of programming, is the art of organizing complexity. React JS, is the library that help you to organize complexity for building UI. What is React? React is the view of MVC, stands for model-view-controller. It is not a complete framework, like Meteor JS. You could use it with flux or react router for full MVC, but this is out of the scope of this blog post. React is developed by Facebook and Instagram (which is also Facebook). And it is used in their production. So if you go to Facebook.com, the comment box you see is a react component. Inside it, it has comment form, and the comment list. Inside the comment list, it’s each individual comment. You can think of UI is a box, inside another box. For Facebook, it is challenging for them to build a scalable UI with the old tools, so that’s why they build React, to solve the problems. Let me explain to you. Why React? We are going to talk about three things. The first is React component. Everything in react, is component based, instead of templating. That means you can break down your view into smaller pieces, that is modularise, that is encapsulated, that is also reusable and unit testable. Secondly, it is fast, because they invented the virtual dom. I will show you some benchmarks later on. Thirdly, it helps you to manage UI with data that changes over time. I will further explain it as well.

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!