thinking reactively

! twitter.com/sabinmarcu "facebook.com/sabinmarcu # linkedin.com/in/sabinmarcu $ github.com/sabinmarcu

http://twitter.com/sabinmarcu

http://facebook.com/sabinmarcu

http://linkedin.com/in/sabinmarcu

http://github.com/sabinmarcu

• Startup in Analytics







• Developer (not Web Developer / Java Developer, etc)• 3rd Year – Computer Science @ Southampton Uni• Experience:

๏ Java, C++, PHP, JavaScript ๏ Projects starting from CMS / whole systems, to libraries and experiments









• Web Development since 2009• Node JS since 2011• Angular JS since 2013• React since 2015









• Web Development since 2009• Node JS since 2011• Angular JS since 2013• React since 2015

• HackaSoton director since the beginning






• Overview• Competition


• Facebook’s Reasoning• Comparison with Angular



• Redux• Flux• React




• Examples




• Examples

• Recap• Questions




• Examples


• ???




• Examples


• ???

• Profit

ReactUI Framework

React

UI FrameworkFacebook

Basic Websites / General Website Frontend


Small Scripts / Fiddles



Showing off as a beginner



Showing off as a beginner

NOT to be used as a primary tool with an app

Web applications

Web applications

works with dom / svg at best

Web applications

works with dom / svg at besttwo way data bindings

Web applications


scope tree

Web applications


scope tree

digest loops

ScopeScopeScopeScopeScope

one comment

ScopeScopeScopeScopeScope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

one comment box

author

timestamp

comment

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

one comment box

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

one comment box

Comment form

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

one comment box

Comment form

Comment section

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope Comment Section

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope


Article

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope


Article

Admin

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope ScopeScope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope ScopeScope

Scope Scope

Scope Scope

Workflow

1. Reducers

Workflow

1. Reducers2. Store

Workflow

1. Reducers2. Store

3. Virtual DOM Workflow

1. Reducers2. Store

3. Virtual DOM4. Actual Dom

Workflow

1. Reducers2. Store

3. Virtual DOM4. Actual Dom

5. Action

Workflow

1. Reducers 2. Store

3. Virtual DOM 4. Actual Dom

5. Action 6. Dispatch

Workflow

1. Reducers

Workflow

1. Reducers2. Store

Workflow

Reducers &

Store

1. Initial State Reducers &

Store

1. Initial State2. Reducers

Reducers &

Store

1. Initial State 2. Reducers

3. Final State

Reducers &

Store

Reducers &

Store

1. Initial State 2. Reducers

3. Intermediary State

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

one comment box

Comment form

Comment section

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope ScopeScope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope ScopeScope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope

Scope

Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope ScopeScope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope ScopeScope

Scope Scope

Scope ScopeStore

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope

Scope

Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope ScopeScope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope ScopeScope

Scope Scope

Scope ScopeStore

Dispatch

DiffsOnly changes where it’s needed

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Scope

Scope Scope

Scope Scope

Legend: • Affected • Dispatcher

React (Facebook)

Ember

React (Facebook)

Incremental DOM (Google)

Ember

React (Facebook)

• DOM

• DOM• SVG

• DOM• SVG• Canvas

• DOM• SVG• Canvas• WebGL


…


…• Serverside?


…• Serverside?

AngularJS


…• Serverside?

Incremental DOM


…• Serverside?

Ember


…• Serverside?

jQuery


…• Serverside?

React

React

Flux

Redux

React

FluxRedux

UI

DATA

React

REDUX FLUX

Reducers

Initial state

final state

Redux

Reducers

Initial state

final state

Reducers

Initial state

final state

Flux

Reducers

Initial state

final state

Reducers

Initial state

final state

Reducers

Initial state

final state

Reducers

Initial state

final state

Reducers

final state

Reducers

Initial state

final state

Reducers

Initial state

final state

Redux

Reducers

Initial state

final state

React

Reducers

Initial state

final state

React

virtual dom

Reducers

Initial state

final state

React

REAL dom SVGWEBGL

virtual dom

Reducers

Initial state

final state

React

REAL dom SVGWEBGL

static page rest api

virtual dom

EXAMPLES

Own Projects • http://sabinmarcu.github.io/labs/ • http://sabinmarcu.github.io/labs/react-demo/ • http://sabinmarcu.github.io/labs/sortable-paper/

Canvas & WebGL • http://react.rocks/tag/Canvas • http://react.rocks/tag/WebGL

Serverside Render • https://github.com/mhart/react-server-example

Real life examples • https://www.messenger.com/ • http://react.rocks/

http://sabinmarcu.github.io/labs/

http://sabinmarcu.github.io/labs/react-demo/

http://sabinmarcu.github.io/labs/sortable-paper/

http://react.rocks/tag/Canvas

http://react.rocks/tag/WebGL

https://github.com/mhart/react-server-example

https://www.messenger.com/

http://react.rocks/

thinking reactively

Internet