Flux: A simple architecture model to build Client-side apps!

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.

Transcript

2. Pedro Nauck FRONTEND DEVELOPER @pedronauck pedronauck.com
3. why we choose MVC?
4. at all times…
5. Because we want to achieve
6. scalability performance adaptability maintainability decoupling }We want
7. App Architecture
8. MVC Controller View Model
10. Tim B. Lee 1991
13. Backend Rulez!
16. what is flux?
17. by
19. Action Dispatcher Store View just a simple model
20. Uniderectional DataFlow
21. focused on client-side APPS
22. Because we want to achieve
23. scalability performance adaptability maintainability decoupling }We want
24. what isn't flux?
25. Framework Library or
26. Action Dispatcher Store View
27. “ The dispatcher is the central hub that manages all data flow in a Flux application. It is essentially a registry of callbacks into the stores and has no real intelligence of its own — it is a simple mechanism for distributing the actions to the stores. Dispatcher http://facebook.github.io/flux
28. ✓ Central hub of your app ✓ Only one dispatcher per application ✓ Manage data based on named actions ✓ Simple way to apply on your app ✓ Register callback to the stores Dispatcher
29. Store All actions are registered on the dispatcher, receives some payload, then are sent to a specific store. Dispatcher Callbacks Store Action Action
30. var Dispatcher = require('flux').Dispatcher; Dispatcher just a simple library
31. The dispatcher exposes a method that allows us to trigger a dispatch to the stores, and to include a payload of data, which we call an action. Actions http://facebook.github.io/flux
32. Actions var AppDispatcher = require(‘flux').Dispatcher; var Action = { createItem: function(text) { AppDispatcher.dispatch({ type: 'ADD_ITEM', data: { text: text } }) } }; creating your action
33. Actions var AppDispatcher = require(‘flux').Dispatcher; var Action = { createItem: function(text) { AppDispatcher.dispatch({ type: 'ADD_ITEM', data: { text: text } }) } }; creating your action require dispatcher
34. Actions var AppDispatcher = require(‘flux').Dispatcher; var Action = { createItem: function(text) { AppDispatcher.dispatch({ type: 'ADD_ITEM', data: { text: text } }) } }; creating your action
35. Actions var AppDispatcher = require(‘flux').Dispatcher; var Action = { createItem: function(text) { AppDispatcher.dispatch({ type: 'ADD_ITEM', data: { text: text } }) } }; creating your action dispatch your action
36. Action Dispatcher When the user handle some action, the view triggers an action to the dispatcher View View triggers
37. Stores contain the application state and logic. Their role is somewhat similar to a model in a traditional MVC, but they manage the state of many objects — they do not represent a single record of data like ORM models do. Nor are they the same as Backbone's collections. More than simply managing a collection of ORM-style objects Stores “ http://facebook.github.io/flux
38. ✓ Just a simple object-literal ✓ Contain the application state and logic ✓ Public interface: getters, no setter ✓ Setup: register with the dispatcher ✓ Emits a change event ✓ Receives data through a payload Stores
39. Payload Store Store receives new data in the form a payload, that is just a object literal registered on the dispatcher. Dispatcher Payloads
40. var _data = []; var Store = { getAll: function(){ return { data: _data }; } }; Stores receiving data
41. var _data = []; var Store = { getAll: function(){ return { data: _data }; } }; Stores receiving data
42. var _data = []; var Store = { getAll: function(){ return { data: _data }; } }; Stores receiving data
43. var _data = []; var Store = { getAll: function(){ return { data: _data }; } }; Stores private data receiving data
44. dispatcherIndex: AppDispatcher.register(function(payload) { switch(payload.type) { case 'ADD_ITEM': _data.push(payload.data); break; case 'REMOVE_ITEM': // logic to remove data break; } }) Stores registering on the dispatcher
45. dispatcherIndex: AppDispatcher.register(function(payload) { switch(payload.type) { case 'ADD_ITEM': _data.push(payload.data); break; case 'REMOVE_ITEM': // logic to remove data break; } }) Stores registering on the dispatcher
46. dispatcherIndex: AppDispatcher.register(function(payload) { switch(payload.type) { case 'ADD_ITEM': _data.push(payload.data); break; case 'REMOVE_ITEM': // logic to remove data break; } }) Stores registering on the dispatcher
47. dispatcherIndex: AppDispatcher.register(function(payload) { switch(payload.type) { case 'ADD_ITEM': _data.push(payload.data); break; case 'REMOVE_ITEM': // logic to remove data break; } }) Stores registering on the dispatcher
48. dispatcherIndex: AppDispatcher.register(function(payload) { switch(payload.type) { case 'ADD_ITEM': _data.push(payload.data); break; case 'REMOVE_ITEM': // logic to remove data break; } }) Stores registering on the dispatcher
49. View A view is updated when the store emit some change event. Store change event Updating Views
50. Stores based on events addChangeListener: function(callback) { this.on('change', callback); }, removeChangeListener: function(callback) { this.removeListener('change', callback); }, emitChange: function() { this.emit('change'); }
51. Stores based on events addChangeListener: function(callback) { this.on('change', callback); }, removeChangeListener: function(callback) { this.removeListener('change', callback); }, emitChange: function() { this.emit('change'); }
52. Stores based on events addChangeListener: function(callback) { this.on('change', callback); }, removeChangeListener: function(callback) { this.removeListener('change', callback); }, emitChange: function() { this.emit('change'); }
53. Stores based on events addChangeListener: function(callback) { this.on('change', callback); }, removeChangeListener: function(callback) { this.removeListener('change', callback); }, emitChange: function() { this.emit('change'); }
54. dispatcherIndex: AppDispatcher.register(function(payload) { switch(payload.type) { case 'ADD_ITEM': _data.push(payload.data); this.emitChange(); break; case 'REMOVE_ITEM': // logic to remove data break; } }) Stores registering on the dispatcher
55. dispatcherIndex: AppDispatcher.register(function(payload) { switch(payload.type) { case 'ADD_ITEM': _data.push(payload.data); this.emitChange(); break; case 'REMOVE_ITEM': // logic to remove data break; } }) Stores registering on the dispatcher emit change to the view
56. Fetching How fetch data from remote source Asynchronous
57. Action Dispatcher Store View
58. Action Dispatcher Store View Server Fetch Action SEARCH_ITEMS SEARCH_ITEMS_SUCCESS
59. var ItemsAPI = require('./ItemsApi'); var AppDispatcher = require('flux').Dispatcher; var Action = { searchItems: function(query) { AppDispatcher.dispatch({ type: 'SEARCH_ITEMS' }); ItemsApi.search(query).done(function(data) { AppDispatcher.dispatch({ type: 'SEARCH_ITEMS_SUCCESS', data: data }); }); } }; Actions fetching data from remote
60. var ItemsAPI = require('./ItemsApi'); var AppDispatcher = require('flux').Dispatcher; var Action = { searchItems: function(query) { AppDispatcher.dispatch({ type: 'SEARCH_ITEMS' }); ItemsApi.search(query).done(function(data) { AppDispatcher.dispatch({ type: 'SEARCH_ITEMS_SUCCESS', data: data }); }); } }; Actions fetching data from remote
61. var ItemsAPI = require('./ItemsApi'); var AppDispatcher = require('flux').Dispatcher; var Action = { searchItems: function(query) { AppDispatcher.dispatch({ type: 'SEARCH_ITEMS' }); ItemsApi.search(query).done(function(data) { AppDispatcher.dispatch({ type: 'SEARCH_ITEMS_SUCCESS', data: data }); }); } }; Actions fetching data from remote
62. var ItemsAPI = require('./ItemsApi'); var AppDispatcher = require('flux').Dispatcher; var Action = { searchItems: function(query) { AppDispatcher.dispatch({ type: 'SEARCH_ITEMS' }); ItemsApi.search(query).done(function(data) { AppDispatcher.dispatch({ type: 'SEARCH_ITEMS_SUCCESS', data: data }); }); } }; Actions fetching data from remote
63. var ItemsAPI = require('./ItemsApi'); var AppDispatcher = require('flux').Dispatcher; var Action = { searchItems: function(query) { AppDispatcher.dispatch({ type: 'SEARCH_ITEMS' }); ItemsApi.search(query).done(function(data) { AppDispatcher.dispatch({ type: 'SEARCH_ITEMS_SUCCESS', data: data }); }); } }; Actions fetching data from remote
64. var ItemsAPI = require('./ItemsApi'); var AppDispatcher = require('flux').Dispatcher; var Action = { searchItems: function(query) { AppDispatcher.dispatch({ type: 'SEARCH_ITEMS' }); ItemsApi.search(query).done(function(data) { AppDispatcher.dispatch({ type: 'SEARCH_ITEMS_SUCCESS', data: data }); }); } }; Actions fetching data from remote
65. Demo https:/ /github.com/facebook/flux/tree/master/examples/flux-todomvc/
66. That's a lot of code, no?
71. http://macgyvermartins.com.br/como-funciona-a-arquitetura-flux-com-react/ Learn more about https://reactjsnews.com/the-state-of-flux/ http://blog.andrewray.me/flux-for-stupid-people/ http://facebook.github.io/flux/docs/overview.html#content
73. https:/ /www.youtube.com/watch?v=KtmjkCuV-EU ReactJS Conf 2015
74. https:/ /www.youtube.com/watch?v=i__969noyAM Facebook engineers
75. https:/ /www.youtube.com/watch?v=LTj4O7WJJ98 Flux Panel
76. I hope you enjoyed
77. Pedro Nauck FRONTEND DEVELOPER @pedronauck pedronauck.com
78. Questions?