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

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.

Af6a12710770ad9a7cfd08c97efd40d3?s=128

Pedro Nauck

May 14, 2015
Tweet

Transcript

  1. None
  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

  9. None
  10. Tim B. Lee 1991

  11. None
  12. None
  13. Backend Rulez!

  14. None
  15. None
  16. what is flux?

  17. by

  18. None
  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?

  67. None
  68. None
  69. None
  70. None
  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

  72. None
  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?