Best practices to handle JS modules

[Thomas Hourlier]

Hi,

I am very big fan of global app state. I have tried to write bindings for redux which is a very popular framework for that. 

These bindings are simple :

- one polymer element that should have the redux store as property

- one polymer behavior that is implemented in each polymer element that binds the redux state properties to the element properties

First problem I encountered was the non bower support by redux. I had to do something very hacky by adding this in my bower file :

"redux": "https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.3/redux.js",

Except this ugly import, the bindings seem to be 'well written' and maintabable.

After that, I have written an example available here. And this part was dreadful. 

My actions are stored in `./actions/counter.html`. I import this file via a classic HTML import. But the real problem is that every variable defined is global! Same for `./store/*` and `./reducers/*`.

Moreover, the javascript linter cannot follow these imports and raises a tons of warning about undefined variable.

I don't want to define my actions and reducers in the same file that the polymer element. 

What is the best practices to handle this use case ?

I saw this repository yesterday that have html modules and ES2015 modules. It uses webpack to bundle ES2015 modules and 'inject' it into the root polymer element. I found this approach very convenient and the best part is that allow you to use npm module with polymer.

Is it a good practice ? 

Thanks in advance.