In the recent project we were building analytics platform using web components.
At the beginning of the project we have chosen Polymer framework to build our custom web components.
After 3-4 month of work we have discovered several downsides of the framework:
1) it's not mature enough and we still have issues with basic functionality. For example dom-repeater element is for sure basic structure but for some reason it doesn't update child element correctly all the time.
2) Polymer gives us 2-way data binding which in big projects could give performance issues.
3) 2 way data binding system complicates developing (you have to place conditional guarders literally in every watch function) and debugging process.
To solve all mentioned above problems we decided to use Redux state management system. How Redux can help us:
1) Easy debuging including time-travel debugging and hotswapping state
2) Redux devTool app for Chrome allow to investigate your state after each action.
3) separation of logic from ui renderers. Our views can listen to changes to various pieces of Redux state and update the DOM accordingly.
How to use Redux with Polymer:
There is 'connection bridge' between Polymer and Redux - polymer-redux behavior
Using this behavior Polymer elements can listen to the State changes and render themself accordingly. It means that all the logic would be moved to Redux reducers and Polymer elements would be responsible only for rendering and internal 'dumb' logic.
As Redux state is read-only we can not use Polymer 2-way data binding to connect to the state. The only way to change the state is to dispatch actions. Doing this we eventually will use 1-way data binding which is easier to understand and debug.
After 2 month working with Redux we have concluded that this is the right way to go but we have still some issues with Polymer basic functionality which make us think that React + Redux might be a better solution.
1) it's not mature enough and we still have issues with basic functionality. For example dom-repeater element is for sure basic structure but for some reason it doesn't update child element correctly all the time.
2) Polymer gives us 2-way data binding which in big projects could give performance issues.
3) 2 way data binding system complicates developing (you have to place conditional guarders literally in every watch function) and debugging process.
To solve all mentioned above problems we decided to use Redux state management system. How Redux can help us:
1) Easy debuging including time-travel debugging and hotswapping state
2) Redux devTool app for Chrome allow to investigate your state after each action.
3) separation of logic from ui renderers. Our views can listen to changes to various pieces of Redux state and update the DOM accordingly.
How to use Redux with Polymer:
There is 'connection bridge' between Polymer and Redux - polymer-redux behavior
Using this behavior Polymer elements can listen to the State changes and render themself accordingly. It means that all the logic would be moved to Redux reducers and Polymer elements would be responsible only for rendering and internal 'dumb' logic.
As Redux state is read-only we can not use Polymer 2-way data binding to connect to the state. The only way to change the state is to dispatch actions. Doing this we eventually will use 1-way data binding which is easier to understand and debug.
After 2 month working with Redux we have concluded that this is the right way to go but we have still some issues with Polymer basic functionality which make us think that React + Redux might be a better solution.
