reactjs / flux - responsive web with ddd and event-driven design
TRANSCRIPT
ReactJS / FLUXResponsive web with DDD and event-driven design.
Format• ~1 hour talk
• ReactJS
• Facebook FLUX
• Isomorphic Web Apps
• Questions any time.
• Will show code.
• Open discussion afterwards
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.
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.
Apply DDD to UI and compose it from reusable visual components aligned with the domain.
Capture UI interactions as functional event-driven behaviors.
ReactJSJS library from Facebook with ONE magical feature
Simple Componentvar 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
–ReactJS
“Don’t mutate UI! Re-render entire UI to Virtual DOM on every change!”
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.
UI CompositionAppPage 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
Pure Componentvar TodoList = React.createClass({ render: function() { var createItem = function(itemText) { return <li>{itemText}</li>; }; return <ul>{this.props.items.map(createItem)}</ul>; }});
Statevar 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> ); }});
Questions?Re: ReactJS and UI composition
Facebook FLUXEvent-driven pattern for client-side web applications
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
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.
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
Questions?
Sample Showtime// Show GTD App
Diffs from FLUX
• “Action”(original) -> “Event”
• “Action Creator” (original) -> “Event Creator”
• Declarative Store Subscriptions (Yahoo Fluxible)
Isomorphic WebDon’t do it, unless justified
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.
Example: /agenda1. 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.
Sample Showtime// Show GTD App Sources
Rinat AbdullinRinat 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