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