Slides from presentation at @DDDBE community in Belgium about use of ReactJS and Flux to build responsive client-side applications. Video and source code: http://abdullin.com/talks/2015-01-06-dddbe-facebook-flux-reactjs/

1. ReactJS / FLUX
Responsive web with DDD and event-driven design.

2. Format
• ~1 hour talk
• ReactJS
• Facebook FLUX
• Isomorphic Web Apps
• Questions any time.
• Will show code.
• Open discussion afterwards

4. User Interface
• Ubiquitous language revolves around components.
• Components are focused and reusable.
• Our UI is composed from these components.
• Finding component boundaries is very similar to
DDDesign process.

5. UI Behaviors
• Ubiquitous Language revolves around events.
• Events can originate from user interactions
(TaskChecked) or from environment
(FailedToSaveTaskToServer).
• Multiple components could react in response to a
single Event.

6. Apply DDD to UI and compose it from reusable
visual components aligned with the domain.
Capture UI interactions as functional event-
driven behaviors.

7. ReactJS
JS library from Facebook with ONE magical feature

8. Simple Component
var TodoList = React.createClass({
render: function() {
var createItem = function(itemText) {
return <li>{itemText}</li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;
}
});
// ul and li are components, too

9. –ReactJS
“Don’t mutate UI! Re-render entire UI to Virtual
DOM on every change!”

11. ReactJS Summary
• Decompose UI into reusable components which
render to virtual DOM.
• ReactJS will sync VDOM to real browser DOM.
• JSX format is an optional syntactic sugar.
• ReactJS components encapsulate layout and
behavior in one file.
• Can render on client and server.

12. UI Composition
AppPage
LeftNavBar
AgendaNavItem
InboxNavItem
StarredNavItem
MainViewArea
InboxView
TaskList
TaskItem
TaskCheck
TaskStar
TaskItem
TaskItem
TaskComposer
— owns state
— pure
— pure
— pure
— pure
— pure
— owns state
— pure
— pure
— pure
— pure
— pure
— pure
— owns state

13. Pure Component
var TodoList = React.createClass({
render: function() {
var createItem = function(itemText) {
return <li>{itemText}</li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;
}
});

14. State
var TodoApp = React.createClass({
getInitialState: function() {
return {items: [], text: ''};
},
onChange: function(e) {
this.setState({text: e.target.value});
},
handleSubmit: function(e) {
e.preventDefault();
var nextItems = this.state.items.concat([this.state.text]);
var nextText = '';
this.setState({items: nextItems, text: nextText});
},
render: function() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<input onChange={this.onChange} value={this.state.text} />
<button>{'Add #' + (this.state.items.length + 1)}</button>
</form>
</div>
);
}
});

15. Questions?
Re: ReactJS and UI composition

16. Pure ReactJS example
// show abdullin.com - static site generated with ReactJS

17. Facebook FLUX
Event-driven pattern for client-side web applications

19. Facebook FLUX
• Similar to CQRS
• Compliments ReactJS
• Unidirectional data flow (data flows one-way, unlike
MVC but like CQRS)
• This presentation has 3 diffs from “official” Flux

21. Essentials
• React components bind to stores, render UI and
invoke Event Creators.
• Event Creators are thin (mostly talk to the API).
• All events go through the dispatcher.
• Stores subscribe to events and hold behaviors.

22. Tackling Complexity
• Keep ReactJS components thin and focused.
• All behaviors are event-driven.
• All logic is in the stores (we know how to design and
test them).
• The only way to change something in the stores
(and in the UI) is by publishing an event (no setters)
• console.log

23. Questions?

24. Sample Showtime
// Show GTD App

25. Diffs from FLUX
• “Action”(original) -> “Event”
• “Action Creator” (original) -> “Event Creator”
• Declarative Store Subscriptions (Yahoo Fluxible)

26. Isomorphic Web
Don’t do it, unless justified

27. Isomorphic Web Apps
• Can render on client and server.
• Very fast first page load (time-to-tweet).
• SEO-friendly.
• Server computes state and sends to client with pre-
generated HTML.
• Becomes client-side app after page was loaded.

28. Example: /agenda
1. Invoke event creators associated with route (all API calls
happen server-side).
2. Dispatch events to all subscribed stores in memory.
3. Render route page component in memory.
4. Send HTML to client, serialize and send store state in 1 batch.
5. Client displays HTML.
6. Client loads client-side scripts, wires components and
dehydrates the state.

29. Sample Showtime
// Show GTD App Sources

30. Questions?
@abdullin / http://abdullin.com

31. Rinat Abdullin
Rinat Abdullin is a software engineer who spent 10
years in .NET before deflecting to Linux. Along the
way he learned from awesome people, contributed to
the IDDD book, designed architecture of a social
website and helped to deliver big data analytics for
retail in the cloud.
Rinat helps teams to scale applications and deal with
complex legacy software. He shares his experience
in the blog at abdullin.com