Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

13,320 views

Published on

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/

Published in: Software

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

  1. 1. ReactJS / FLUX Responsive web with DDD and event-driven design.
  2. 2. Format • ~1 hour talk • ReactJS • Facebook FLUX • Isomorphic Web Apps • Questions any time. • Will show code. • Open discussion afterwards
  3. 3. 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.
  4. 4. 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.
  5. 5. Apply DDD to UI and compose it from reusable visual components aligned with the domain. Capture UI interactions as functional event- driven behaviors.
  6. 6. ReactJS JS library from Facebook with ONE magical feature
  7. 7. 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
  8. 8. –ReactJS “Don’t mutate UI! Re-render entire UI to Virtual DOM on every change!”
  9. 9. 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.
  10. 10. 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
  11. 11. Pure Component var TodoList = React.createClass({ render: function() { var createItem = function(itemText) { return <li>{itemText}</li>; }; return <ul>{this.props.items.map(createItem)}</ul>; } });
  12. 12. 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> ); } });
  13. 13. Questions? Re: ReactJS and UI composition
  14. 14. Pure ReactJS example // show abdullin.com - static site generated with ReactJS
  15. 15. Facebook FLUX Event-driven pattern for client-side web applications
  16. 16. 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
  17. 17. 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.
  18. 18. 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
  19. 19. Questions?
  20. 20. Sample Showtime // Show GTD App
  21. 21. Diffs from FLUX • “Action”(original) -> “Event” • “Action Creator” (original) -> “Event Creator” • Declarative Store Subscriptions (Yahoo Fluxible)
  22. 22. Isomorphic Web Don’t do it, unless justified
  23. 23. 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.
  24. 24. 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.
  25. 25. Sample Showtime // Show GTD App Sources
  26. 26. Questions? @abdullin / http://abdullin.com
  27. 27. 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

×