From Flux to Relay and GraphQL: a short story

While Flux was slowly catching up as the defacto pattern for "not-so-simple" React applications, Facebook announced Relay and GraphQL this January as a simple plug-and-play framework to make life easier for developers. In this slide deck we will have a look at the ideas behind Flux, how they evolved to Relay and GraphQL, and how easy will it be to switch an application to using this kind of technologies.

Transcript

1. From Flux to Relay and GraphQL a short story @MCirlanaru #LondonReact
2. Mihai Cîrlănaru Software Engineer at State @MCirlanaru
3. What is Flux?
5. Flux pattern facebook.github.io/flux
7. But why Flux?
8. Model View Controller Model View Controller Action
9. Model View Controller in practice Model View Controller Action Model Controller View View View View Model Model
11. Flux explained View Action Store
12. Flux explained View <Statement ...> <StatementUserHeader ... /> <StatementBody ... /> <StatementActionBar ... /> <Respond ...> <Restate ...> <WellSaid ...> </StatementActionBar> </Statement>
13. Flux explained Action var StatementActions = createActions([ 'endorse', ... ]); ... _clickHandler: function(){ StatementActions.endorse( this.props.statementId ); } <WellSaid onClick={ this._clickHandler } />
14. Flux explained Store var ResourceStore = createStore({ init: function(){ this.data = {}; this.listenTo(StatementActions.endorse, this.toggleEndorsement); }, ... toggleEndorsement: function(id) { // Update this.data[id].endorsement_count ... this.triggerAsync(this.data); } });
15. Flux explained View mixins: [ StoreListenerMixin ], componentDidMount: function(){ this.listenTo(ResourceStore, function(data){ this.setState({ statement: data }); }.bind(this) ); }
16. Data fetching?
17. The Flux way
18. Flux way Action Dispatcher Store View Action
19. Flux way Action Dispatcher Store View Server Action
20. The new way
21. Relay way Action Dispatcher Store* View** Server Action * managed by the framework ** Relay wrapped components
22. Relay way Relay Store Component Server GraphQL write GraphQL query GraphQL response props Optimistic update Action* * description on how data should change
23. What is Relay?
24. Relay is a new framework from Facebook that provides data-fetching functionality for React applications. ” facebook.github.io/react/blog
25. What is GraphQL?
26. GraphQL is a data querying language designed to describe the complex, nested data dependencies of modern applications. ” facebook.github.io/react/blog
27. An example
28. Relay and GraphQL explained Component
29. Relay and GraphQL explained Component Relay container props* * props with query results props
30. Relay and GraphQL explained Relay container * props with query results Relay.createContainer(Statement, { queries: { statement: graphql` Statement { creator { name, picture }, body { text, opinions } } ` } }); props* GraphQL
31. Recap Relay Store Component Server GraphQL write GraphQL query props Optimistic update GraphQL response Action
32. Recap Relay Store Component Server GraphQL write GraphQL query props Optimistic update GraphQL response Action
34. Not quite there
35. Not quite there • Routing • Isomorphism • GraphQL spec • ... ?
36. Further reading facebook.github.io/flux bit.ly/Relay-Intro bit.ly/GraphQL-Intro bit.ly/Relay-FAQ
37. Thank you questions? @MCirlanaru