Hi, I’m Jeremy Lu
@thecat
Founder and builder,
Lovelyreader | Pubulous | Visualmarks | Docknote
Slide 3
Slide 3 text
About React
- Built by Facebook and Instagram
- Battle-tested by millions of users around the world
Slide 4
Slide 4 text
Key Highlights
1. Build Component, not template!
2. One-way Data Flow!
3. Virtual DOM
Slide 5
Slide 5 text
1. Build Component,
not template
1. Build Component, not template!
2. One-way Data Flow!
3. Virtual DOM
Slide 6
Slide 6 text
Build Component,
not template
The Problems
!
- Components are the right way to separate concerns
- Not "templates" and "display logic"
- Markup and the code that drives it are intimately tied
together
- Display logic is often very complex, using template
languages to express it becomes cumbersome
- Think: logic-less template like handlebar
Slide 7
Slide 7 text
Build Component,
not template
The Solution
!
- Generate markup directly from the JavaScript code
- Can use expressive power of programming language to
build UIs
- JSX is the sugar coating (but not required)
It’s reusable
- Stateless
- Encapsulation
- Configurability (pass in data and callbacks via
props during invokation)
Slide 11
Slide 11 text
Slide 12
Slide 12 text
It’s composable
- Build many simple components that does one
thing really well
- Then compose them into a bigger functional unit
- Which allows you to structure the application
better with more flexibility
Slide 13
Slide 13 text
Docknote
Slide 14
Slide 14 text
Dissected
Slide 15
Slide 15 text
Tree
ToolBar
In details
Slide 16
Slide 16 text
Complete Life-Cycle
Methods
for fine-grained control of everything inside the
component
* componentWillMount()
* shouldComponentUpdate()
* render()
Slide 17
Slide 17 text
Easy to Test
- Each component is a unit
- Components sync with system states
- Testcases can easily mock different state and
verify the view conforms
Slide 18
Slide 18 text
Divide and Conquer
- Everyone works on their own set of components
- Components are fully decoupled
- Components can be easily composed to provide
bigger function later
Slide 19
Slide 19 text
JSX is designer-friendly
- They can contribute code too!
- It really strikes a perfect balance between
accessibility of templates and the power of
JavaScript
Slide 20
Slide 20 text
2. One-way Data
Flow
1. Build Component, not template!
2. One-way Data Flow!
3. Virtual DOM
Slide 21
Slide 21 text
One-way Data Flow
- Data changing in time is the root of all evils
- Lot of errors occurred while handling state
changes
Slide 22
Slide 22 text
One-way Data Flow
- What if we could just describe what the ui should
look like at any point in time, and let view take care
of updating itself?
Slide 23
Slide 23 text
One-way Data Flow
- That is how model and data binding work in React
- Whenever model changes, component redraws
itself
* every redraw is like the first draw, only with
different initial values
Slide 24
Slide 24 text
One-way Data Flow
- In short, you take care of the model, view will take
care of the rest
Slide 25
Slide 25 text
One-way Data Flow
But redraw
everytime is
expensive, right?
Slide 26
Slide 26 text
3. Virtual DOM
1. Build Component, not template!
2. One-way Data Flow!
3. Virtual DOM
Slide 27
Slide 27 text
Virtual DOM
- High efficiency handling of diffing and batch
updating DOM
- Eliminating layout thrashing (read/write/read/
write...)
Slide 28
Slide 28 text
Virtual DOM
- No dirty checking on models needed, just redraw
everytime
- No more manual DOM manipulations, everything
is declarative
- Could be even faster with immutable model in
place
Slide 29
Slide 29 text
Virtual DOM
- Native support for server pre-rendering
- SEO friendly
- Serving first page much faster (just like twitter and
facebok)
Slide 30
Slide 30 text
FLUX
Slide 31
Slide 31 text
What’s Flux?
- Not really a MVC framework, but a set of best
practices
Slide 32
Slide 32 text
Problems of MVC
When it begins
Slide 33
Slide 33 text
Problems of MVC
Out of control and burnt
Slide 34
Slide 34 text
Problems of MVC
- When models and views grows complicated,
application become messy and hard to maintain
quickly
- Difficult to debug
- slow to add in new features
Slide 35
Slide 35 text
Flux Workflow
Slide 36
Slide 36 text
In Short
- Flux handles data flow
- React handles view update
- Taking "Single source of truth" to the next level
- by making the workflow uni-directional
Slide 37
Slide 37 text
What’s missing?
- Pick a router and you’re all set
- Flatiron Director recommended
Slide 38
Slide 38 text
Case Study
Slide 39
Slide 39 text
Docknote
- Notebook for developer
- Creat technotes and share with colleagues easily
- Web based, offline-support, code-friendly
Slide 40
Slide 40 text
Docknote
- First version written in Angular
- 65% of the time spent figuring out and fighting the
framework
Slide 41
Slide 41 text
Docknote
- Second version built with React/Flux, completed in
two weeks
- Only spent 1 hour learning the approach, then
deep dive into building the product
- Runs constantly at 60fps while supporting IE8
Slide 42
Slide 42 text
Docknote
[Shameless Plug] Looking for beta testers for
interviewing, drop me a line if interested.
Slide 43
Slide 43 text
Recap
Slide 44
Slide 44 text
- No need to fight the framework
- No black magic, no striking back
- Smooth learning curve
Slide 45
Slide 45 text
- Only two things to take care of
- State
- Component
Slide 46
Slide 46 text
- A much simplified mindset goes a long way
- Faster to develop
- Less human errors
- Unified development approach
Slide 47
Slide 47 text
- Bringing cost down
- Maintenance
- Bug Fixing
- Training (bringing newbie up real quick)
Slide 48
Slide 48 text
- Even better when paired with
- Browserify
- Gulp
- Node.js
Slide 49
Slide 49 text
References
- React introduction - http://goo.gl/7vbhI1
- Flux introduction - http://goo.gl/SZ10b2
- Single source of truth - http://goo.gl/FuwXv