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. Pedro Nauck
    FRONTEND DEVELOPER
    @pedronauck
    pedronauck.com

    View full-size slide

  2. why we
    choose
    MVC?

    View full-size slide

  3. at all times…

    View full-size slide

  4. Because we
    want
    to achieve

    View full-size slide

  5. scalability
    performance
    adaptability
    maintainability
    decoupling
    }We want

    View full-size slide

  6. App
    Architecture

    View full-size slide

  7. MVC
    Controller
    View Model

    View full-size slide

  8. Tim B. Lee
    1991

    View full-size slide

  9. Backend Rulez!

    View full-size slide

  10. what is flux?

    View full-size slide

  11. Action
    Dispatcher
    Store
    View
    just a simple
    model

    View full-size slide

  12. Uniderectional
    DataFlow

    View full-size slide

  13. focused on
    client-side
    APPS

    View full-size slide

  14. Because we
    want
    to achieve

    View full-size slide

  15. scalability
    performance
    adaptability
    maintainability
    decoupling
    }We want

    View full-size slide

  16. what isn't flux?

    View full-size slide

  17. Framework
    Library
    or

    View full-size slide

  18. Action
    Dispatcher
    Store
    View

    View full-size slide


  19. 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 full-size slide

  20. ✓ 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  23. 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 full-size slide

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

    View full-size slide

  25. 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 full-size slide

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

    View full-size slide

  27. 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 full-size slide

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

    View full-size slide

  29. 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 full-size slide

  30. ✓ 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. 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 full-size slide

  37. 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 full-size slide

  38. 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 full-size slide

  39. 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 full-size slide

  40. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. 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 full-size slide

  47. 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 full-size slide

  48. Fetching
    How fetch data from remote source
    Asynchronous

    View full-size slide

  49. Action
    Dispatcher
    Store
    View

    View full-size slide

  50. Action
    Dispatcher
    Store
    View
    Server Fetch
    Action
    SEARCH_ITEMS
    SEARCH_ITEMS_SUCCESS

    View full-size slide

  51. 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 full-size slide

  52. 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 full-size slide

  53. 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 full-size slide

  54. 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 full-size slide

  55. 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 full-size slide

  56. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  59. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  63. I hope you
    enjoyed

    View full-size slide

  64. Pedro Nauck
    FRONTEND DEVELOPER
    @pedronauck
    pedronauck.com

    View full-size slide