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/
2. Format
• ~1 hour talk
• ReactJS
• Facebook FLUX
• Isomorphic Web Apps
• Questions any time.
• Will show code.
• Open discussion afterwards
3.
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.
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
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.
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
20.
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
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.
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