Amphtml: amp-bind: TODO list use case

[choumx]

@sebastianbenz suggested amp-bind support a use case like ToDoMVC. One way to accomplish this is to allow amp-mustache to template using amp-bind state.

This would be a cool addition, though I wonder if allowing Bind to add/remove DOM elements is too powerful. @ericlindley-g mentions that this is an app-like use case that hasn't been prioritized yet.

/cc @cramforce

[sebastianbenz]

Two other use cases for this feature come to my mind:

• adding multiple travellers to a hotel booking
• adding multiple comments to an article

[cramforce]

TODO MVC would be super cool, indeed!

In particular, because the Speedometer benchmark pulls from it

[src-code]

@choumx Is the idea here to allow for mustache templates to render outside the context of a component like amp-list, or would it be to have a component like amp-list rely on state to render its templates rather than requiring an XHR?

[choumx]

Something like the latter is the idea, though it may not involve amp-list specifically. Details haven't been decided yet.

[src-code]

I'd love to see this happen, especially for the commenting use case. Seems like it'd be really powerful to be able to update a small piece of state after a form submission, and then use that local state to re-render the template without requiring a re-fetch of the whole data set.

[kmh287]

Here's a design doc for a new amp component, amp-state-list, that can provide the functionality we need for this. All feedback is welcome. :smile:

[camelburrito]

@choumx - is this being worked on? is there an estimate of when this would be available . It would be super useful for some of the ampstart templates we are building.

[choumx]

@camelburrito It hasn't been prioritized yet pending some design questions and lack of external demand. What templates are you guys building?

[10xjs]

@choumx The template WIP is here https://github.com/metalabdesign/ampstart/commits/travel.

[10xjs]

@choumx The goal is to connect a set of UI form elements as filter controls to a search API. The trouble with the current state of things is that the amp-form component only allows rendering the response data in submit-success and submit-error divs that are direct children of a form.

I wanted to be able to handle the response data with amp-bind to be able to render in arbitrary locations in the dom.

I've managed to approximate this feature by managing the src attribute of several amp-list components to represent a single search request.

see: https://github.com/metalabdesign/ampstart/blob/2f046f7214999c30f5dc1dfa9dd4bc6778163eb0/templates/travel/travel.amp.html#L87-L114

[10xjs]

@choumx @camelburrito @ericlindley-g

We should also consider the motivation for why I am interested in using this feature.

My intent is to use amp-form to act as a source of app state by communicating with a search/filter API endpoint. Is this too far outside what amp-form was designed for? The examples show the action-xhr feature as a way to create an inline signup newsletter signup form.

[choumx]

Closing as there was no elegant solution to do this with amp-bind and a lack of strong demand.

[middle-way-approach]

I implemented a todo app with just amp-bind to show that it is possible. The only caveat is that the max number of todos is determined by the html structure and can not be dynamically increased.
See yourself

[choumx]

@middle-way-approach Nice demo! Turns out that, over time, we did add enough functionality to support this. :)

IIRC at the time, we were considering adding add/remove methods but a data-driven approach like yours is more flexible. Thanks for sharing!

[sebastianbenz]

FWIW, we lack two things before we can submit an AMP version to ToDoMVC:

1. reading/writing localStorage
2. support for URL fragments