Criando componentes interativos em páginas AMP com <amp-bind>

Transcript

1. <amp-bind>
2. instantaneamente
5. JS
7. ➔ ➔ ➔ interações complexas
9. ➔ ➔ ➔
10. ➔ ➔
11. <amp-state id="myState"> <script type="application/json"> { myText: "Hello AMP" } </script> </amp-state>
12. <amp-state id="myState"> <script type="application/json"> { myText: "Hello AMP" } </script> </amp-state> <span [text]="myState.myText"> Hello World </span>
14. <amp-state id="myState"> <script type="application/json"> { "myText": "Hello AMP" } </script> </amp-state> <span [text]="myState.myText">Hello World</span> <button on="tap:AMP.setState({ myState: { myText: 'Hello Binding' } })">SetState</button>
16. <amp-state id="myState"> <script type="application/json"> { "myText": "Hello world AMP" } </script> </amp-state> <!-- change browser history --> <button on="tap:AMP.pushState({ myState: { myText: 'Browser History' } })">SetState</button>
19. ➔ ➔
20. // Returns [1, 2, 3] [3, 2, 1].sort() // Returns 6. [1, 2, 3].reduce((x, y) => x + y) // Object to Array keys(event.speakers).map(x => event.speakers[x])
21. String charAt charCodeAt concat indexOf lastIndexOf slice split substr substring toLowerCase toUpperCase Number toExponential toFixed toPrecision toString Objects keys value Array concat filter includes indexOf join lastIndexOf map reduce slice some sort splice Math abs ceil floor max min random round Global encodeURIComponent
22. <amp-list id="speakers" [src]="keys(speakers).map(x => speakers[x])")> <template type="amp-mustache"> <strong>{{name}}</strong> <span>{{jobTitle}}</span> </template> </amp-list>
23. <amp-bind-macro id="circle" arguments="r" expression="3.14 * r * r" />
24. <amp-bind-macro id="SpeakersBind" arguments="speakers" expression="keys(speakers).map(x => speakers[x])" /> <amp-list id="speakers" [src]="SpeakersBind(event.speakers)")> <template type="amp-mustache"> <strong>{{name}}</strong> <span>{{jobTitle}}</span> </template> </amp-list>
26. <input type="checkbox" [checked]="creditcard._1177" [disabled]="checkeds == 4">
28. <!-- Add/Remove --> <input type="checkbox" [checked]="creditcards && creditcards._1177" [disabled]="checkeds == 4 && !creditcards._1177" on="change:AMP.setState({ creditcards: { _1177: event.checked, }, checkeds: (event.checked ? checkeds+1 : checkeds-1), })">
29. <!-- Change text --> <span [text]="creditcards._1177 ? 'Remover' : 'Comparar'") Comparar </span> <!-- Remove all --> <button on="tap:AMP.setState({ checkeds: 0, creditcards: null })") Remover tudo </button>
35. @muhroots