User:JDrewniak (WMF)/notes/MF InfiniteScroller architecture

= Mobilefrontend Gateway/component/infiniteScroller Architecture = The interaction between gateways, components, and the infiniteScoller component is a bit fuzzy in mobilefrontend. Gateways fetch the data and pass it to a component. The infiniteScroller extends the component and adds a custom event that triggers the components load method. The scroller then disables itself after the event is triggered, and the component has to re-enable the event. The component also has to manage the loading spinner.

Responsibilites here are mixed. The scroller disables itself but is re-enabled by an external component. With modifications to the gateways and InfiniteScroller instantiation, the scroller could enable/disable itself, as well as manage its own loading spinner.

= How? = "Promises all the way down."The main technique for separating these responsibilities is to build a promise chain across all three components. The chain starts with the gateway. The gateway creates a function that returns a promise. The component takes that promise and adds a  to handle its own logic. The component then passes that chain to the InfiniteScroller, which adds it’s own  to handle it’s logic. The infiniteScroller then executes the whole chain when necessary.

Gateway                        Component                               InfiniteScroller fetch = promise.then( res ) --> getContent = fetch.then( do stuff ) --> gotContent = getConent.then "Snowball" architecture.

Starting with the gateway
The gateways main “fetch” method always returns a promise.

The infinite scroller
The infinite scroller is is instantiated with a “fetch” method and a DOM element.

The component
The component combines the gateway and the infiniteScroller. The component has a wrapper function around the gateway “fetch”. The wrapper handles the gateway response, and returns the original promise. This wrapper is handed to the infiniteScroller (named  above), and the infiniteScoller takes care of executing that function when necessary. Because the wrapper returns the original promise, the infiniteScroller can attach a  to that promise to handle it’s own enabling & disabling and loading spinner.

infinite scroller component architecture