reactjs overview
Post on 14-Apr-2017
333 Views
Preview:
TRANSCRIPT
ReactJS Overview
09/14/2015
Ping-Wen (Mark) Hsu Full-Stack Developer
Controller
View
Model
Initial fetch
Model
View
Initial fetch
Model
View
User Interaction
Initial fetch
Model
View
User Interaction
Model Model
View View
Initial fetch
Model
View
User Interaction
Model Model
View View
Initial fetch
Model
View
User Interaction
Model Model
View View
Initial fetch
Model
View
User Interaction
Model Model
View View
Initial fetch
Model
View
User Interaction
Model Model
View View
Real-Time
Single source of truth
Thinking in components
Always redraw (Virtual DOM)
Single source of truth
Thinking in components
Always redraw (Virtual DOM)
Model
View
View
Model
Model
ViewModel
ViewModel
ViewModel
View
Controller
Controller
scope
scope
Controllerscope
Controllerscope
Controllerscope
scopeController
Component
Component
Props
Props
ComponentProps
ComponentProps
ComponentProps
StateComponent
Single source of truth
Thinking in components
Always redraw (Virtual DOM)
Style
Template
Functionality
Style
Template
Functionality
Backbone.css
Backbone.html
Backbone-model.jsBackbone-view.js
Angular.css
Angular.html
Angular-service.jsAngular-ctrl.js
Style
Template
Functionality
Style
Template
Functionality
Backbone.css
Backbone.html
Backbone-model.jsBackbone-view.js
Angular.css
Angular.html
Angular-service.jsAngular-ctrl.js
StyleTemplate
Functionality
component.js
Item.js
Functionality
Template
Style
Single source of truth
Thinking in components
Always redraw (Virtual DOM)
Item.js
Update state
Always redraw with new state
Component
Component
Props
Props
ComponentProps
ComponentProps
ComponentProps
StateComponent
Component
Component
Props
Props
ComponentProps
ComponentProps
ComponentProps
StateComponent
Actions
Flux
So, why React?
So, why React?
Why not?
Q & A
top related