Flow architecture with polymer elements

I was thinking about using a Flux template with (polymer) web components. So far, I've come up with three possible solutions, all different from your path, so here they are:

DISCLAIMER I am using the Reflux library, not Facebook.

Actions and Stores as Elements

My first attempt was to create a Flux template into elements so that any view that requires store access and invokes actions will just import them.

<dom-module id="a-view">
  <template>
    <my-actions id="actions"></my-actions>
    <my-store model="{{model}}"></my-store>
    <span>{{model.property}}</span>
    <button on-click="executeAction"></button>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'a-view',
    executeAction: function() {
      this.$.actions.doSomething({});
    }
  });
</script>

      

        
        
        
      

    

<my-actions>

and <my-store>

just encapsulate actions and stores. There are some disadvantages to this method. First, potentially numerous non-visual elements are created, which can negatively impact performance. Also the creation of these elements can be tricky if they are to be Polymer elements because they require a static state. For a complete example see this repo

Flux without flow

I recently figured out what web components are again. With WC, your main API is the browser, namely elements, attributes and events. And Flux is essentially an event driven data stream. So why not use Custom Events to communicate between custom elements? Here is an excerpt from my rogue yesterday

<template is="dom-bind">
  <a-view clicks="[[clicks]]" id="one"></a-view>
  <a-view clicks="[[clicks]]" id="two"></a-view>
  <a-view clicks="[[clicks]]" id="three"></a-view>
  <a-store click-history="{{clicks}}"></a-store>
</template>

<script>
    Polymer({ 
      is: 'a-view',
      properties: { clicks: Object }, 
      fireClick: function() {
        // invoking action is simply firing an event
        this.fire('a-view-click', {});
      }
    });

    Polymer({
      is: 'a-store',
      attached: function(){
        document.addEventListener('a-view-click', function(ev) {
          // do work and update store here
        }.bind(this));
      }
    });
</script>

      

        
        
        
      

    

This is good because it is not limited to Polymer in any way. Custom elements can be created using native API or another library and simply communicate with the browser acting as the dispatcher. Granted, this doesn't give you sync options out of the box, but it's a simple and clean way without any clutter.

As you will see on Plunker, keep the data binding updates. Another possibility is to fire another event, although I'm not sure which would be better or when

Using Polymer Behavior

Finally, I got an idea that improves the first time around by replacing custom action / store elements with behavior. No code yet, but here's a sketch:

var MyActionsBehaviour = PolymerFlux.createActions({ /*...*/ });
var MyStore = PolymerFlux.createStore({ /*...*/ });

Polymer({
  is: 'a-view',
  behaviours: [ MyActionsBehaviour, MyStore ],
  onClick: function() {
    this.behaviourAction.invoke({});
  }
}});

Polymer({
  is: 'a-store',
  behaviours: [ MyActionsBehaviour, MyStore ],
  attached: function() {
    this.behaviourAction.listen(function() {
      // 1. do work
      // 2. update views
    });
  }
}});

      

        
        
        
      

    

I forgot that part of the update has been updated. This will most likely happen by signaling an event, but another possibility will trigger another action (Reflux has a good concept of nested actions ). Also I leave PolymerFlux.createActions

it PolymerFlux.createStore

to your imagination;). The exact internals will depend on the flow implementation you choose.