Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Pedro Nauck

May 14, 2015
Tweet

More Decks by Pedro Nauck

Other Decks in Programming

Transcript

  1. View Slide

  2. Pedro Nauck
    FRONTEND DEVELOPER
    @pedronauck
    pedronauck.com

    View Slide

  3. why we
    choose
    MVC?

    View Slide

  4. at all times…

    View Slide

  5. Because we
    want
    to achieve

    View Slide

  6. scalability
    performance
    adaptability
    maintainability
    decoupling
    }We want

    View Slide

  7. App
    Architecture

    View Slide

  8. MVC
    Controller
    View Model

    View Slide

  9. View Slide

  10. Tim B. Lee
    1991

    View Slide

  11. View Slide

  12. View Slide

  13. Backend Rulez!

    View Slide

  14. View Slide

  15. View Slide

  16. what is flux?

    View Slide

  17. by

    View Slide

  18. View Slide

  19. Action
    Dispatcher
    Store
    View
    just a simple
    model

    View Slide

  20. Uniderectional
    DataFlow

    View Slide

  21. focused on
    client-side
    APPS

    View Slide

  22. Because we
    want
    to achieve

    View Slide

  23. scalability
    performance
    adaptability
    maintainability
    decoupling
    }We want

    View Slide

  24. what isn't flux?

    View Slide

  25. Framework
    Library
    or

    View Slide

  26. Action
    Dispatcher
    Store
    View

    View Slide


  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

    View Slide

  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

    View Slide

  29. Store
    All actions are registered on
    the dispatcher, receives
    some payload, then are sent
    to a specific store.
    Dispatcher
    Callbacks
    Store
    Action Action

    View Slide

  30. var Dispatcher = require('flux').Dispatcher;
    Dispatcher
    just a simple library

    View Slide

  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

    View Slide

  32. Actions
    var AppDispatcher = require(‘flux').Dispatcher;
    var Action = {
    createItem: function(text) {
    AppDispatcher.dispatch({
    type: 'ADD_ITEM',
    data: {
    text: text
    }
    })
    }
    };
    creating your action

    View Slide

  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

    View Slide

  34. Actions
    var AppDispatcher = require(‘flux').Dispatcher;
    var Action = {
    createItem: function(text) {
    AppDispatcher.dispatch({
    type: 'ADD_ITEM',
    data: {
    text: text
    }
    })
    }
    };
    creating your action

    View Slide

  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

    View Slide

  36. Action
    Dispatcher
    When the user handle some
    action, the view triggers an
    action to the dispatcher
    View
    View triggers

    View Slide

  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

    View Slide

  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

    View Slide

  39. Payload
    Store
    Store receives new data in
    the form a payload, that is
    just a object literal registered
    on the dispatcher.
    Dispatcher
    Payloads

    View Slide

  40. var _data = [];
    var Store = {
    getAll: function(){
    return {
    data: _data
    };
    }
    };
    Stores
    receiving data

    View Slide

  41. var _data = [];
    var Store = {
    getAll: function(){
    return {
    data: _data
    };
    }
    };
    Stores
    receiving data

    View Slide

  42. var _data = [];
    var Store = {
    getAll: function(){
    return {
    data: _data
    };
    }
    };
    Stores
    receiving data

    View Slide

  43. var _data = [];
    var Store = {
    getAll: function(){
    return {
    data: _data
    };
    }
    };
    Stores
    private data
    receiving data

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  49. View
    A view is updated when the
    store emit some change event.
    Store
    change event
    Updating Views

    View Slide

  50. Stores
    based on events
    addChangeListener: function(callback) {
    this.on('change', callback);
    },
    removeChangeListener: function(callback) {
    this.removeListener('change', callback);
    },
    emitChange: function() {
    this.emit('change');
    }

    View Slide

  51. Stores
    based on events
    addChangeListener: function(callback) {
    this.on('change', callback);
    },
    removeChangeListener: function(callback) {
    this.removeListener('change', callback);
    },
    emitChange: function() {
    this.emit('change');
    }

    View Slide

  52. Stores
    based on events
    addChangeListener: function(callback) {
    this.on('change', callback);
    },
    removeChangeListener: function(callback) {
    this.removeListener('change', callback);
    },
    emitChange: function() {
    this.emit('change');
    }

    View Slide

  53. Stores
    based on events
    addChangeListener: function(callback) {
    this.on('change', callback);
    },
    removeChangeListener: function(callback) {
    this.removeListener('change', callback);
    },
    emitChange: function() {
    this.emit('change');
    }

    View Slide

  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

    View Slide

  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

    View Slide

  56. Fetching
    How fetch data from remote source
    Asynchronous

    View Slide

  57. Action
    Dispatcher
    Store
    View

    View Slide

  58. Action
    Dispatcher
    Store
    View
    Server Fetch
    Action
    SEARCH_ITEMS
    SEARCH_ITEMS_SUCCESS

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  65. Demo
    https:/
    /github.com/facebook/flux/tree/master/examples/flux-todomvc/

    View Slide

  66. That's a
    lot of
    code, no?

    View Slide

  67. View Slide

  68. View Slide

  69. View Slide

  70. View Slide

  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

    View Slide

  72. View Slide

  73. https:/
    /www.youtube.com/watch?v=KtmjkCuV-EU
    ReactJS Conf 2015

    View Slide

  74. https:/
    /www.youtube.com/watch?v=i__969noyAM
    Facebook engineers

    View Slide

  75. https:/
    /www.youtube.com/watch?v=LTj4O7WJJ98
    Flux Panel

    View Slide

  76. I hope you
    enjoyed

    View Slide

  77. Pedro Nauck
    FRONTEND DEVELOPER
    @pedronauck
    pedronauck.com

    View Slide

  78. Questions?

    View Slide