I2I: "protocol adapters" for client side data massaging. #26474
Description
summary
The objective is to solve the protocol adapters use case. We want to allow developers to perform arbitrary client side transformations to an api response before handing it to an amp component, essentially trading UX for DX.
Since amp-script is already capable of performing xhr requests, data manipulations, and can call AMP.setState, it is close to being fully capable of servicing this use-case.
assumptions
- I2I: Allow amp-list to render from amp-state initially #26473 lands
- We are willing to make initialization from amp-state wait a window of time for data to appear.
basic amp-list w/ refresh example
<html>
<head>...</head>
<body>
<amp-script script="animals-script">
<button id="refresh-button"> Refresh data </button>
<amp-list src="amp-state:animals">...</amp-list>
</amp-script>
<script type="text/plain" target="amp-script" id="animals-script">
function fetchAnimalData() {
fetch('url-with-data.json')
.then(res => res.json())
.then(transform)
.then(array => AMP.setState({ animals: { items: array } }));
}
document.getElementById('refresh-button').addEventListener('click', fetchAnimalData);
fetchAnimalData(); // first load
</script>
</body>
</html>motivation
- Many frontend developers do not have control over their backend APIs. In order to play nicely with
amp-list, they create proxy servers. This is a poor DX for something that could easily be solved via a sprinkling of JS. - It is currently impossible to take advantage of alternative data sources, i.e. websockets or rtc data connections.
caveats
amp-scripthas a nontrivial initialization cost. If after we perform measurements we deem it too high to release this feature, there are opportunities we can pursue for speeding up init, especially for this use case.- inlining the worker js into a string variable.
- creating a lightweight version of worker-dom (without dom access, but with the ability to perform xhr and call AMP.setState).
- We'll need further work to allow for
reset-on-refreshbehavior (solvable by exposing amp actions within amp-script).