- Rather than writing a lot of imperative code how can we write more straightforward/simpler/consistent code, less prone to bugs.
- Spawned off with needing to solve binding and data store issues when updgrading to Polymer 1.
- Polymer 0.x used the Object observe to update bindings. We referenced a global store using basically an Object.assign function that updated elements referencing those objects.
- Came up with an
inf-store-observercomponent to listen for and bind updates - Working with this more and through this refactor I noticed a couple ways we could simplify data loading and binding
- Make data loading consistent & straightforward
- Reduce complexity/indirection of global data store binding
- Data loading was inconsistent - sometimes happened in main view, sometimes in page views, some in child views.
- Additional boiler plate - most data loading / binding is very simple and we don't care about imperative loading implementation details
- Redundant list components
- Binding related data became inconsistent & required boiler plate
- Setting loading indicators (sometimes it was set in various places too)
- List data & load more indicators, tracking offset positions
- Showing/hiding content when data is available
- Notifying model/object updates to outside components with a global store was not straighforward
Solution - new data loading components
- Use declarative data componets to hide implementation details & bind data to templates
- Make simple composable components rather than one component that does everything
- Simple way to setup new polymer data components for a model or model list (specific to our backend responses)
- Easy way to keep model or lists in sync & binding updated
The Refactors:
-
Query components
-
Composable list components List loadable, data component, sectioned list component