O documento descreve como criar componentes interativos em páginas AMP usando a tag <amp-bind>. A tag <amp-bind> permite criar estado mutável e vinculá-lo a elementos da página através de expressões, permitindo interações complexas sem usar JavaScript customizado. O estado é definido usando <amp-state> e pode ser atualizado com AMP.setState ou AMP.pushState.

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

2. Accelerated Mobile Pages
Possibilita criar páginas que
sejam atraentes, fáceis e
carregadas quase que
instantaneamente para os
usuários.

3. AMP HTML
É basicamente HTML estendido com propriedades AMP personalizadas
AMP JS
Biblioteca JS que implementa todas as melhores práticas de desempenho
da AMP, gerencia o carregamento de recursos e fornece as tags
personalizada
AMP CACHE
O Google AMP Cache é uma rede de entrega de conteúdo baseada em proxy
para entregar todos os documentos válidos de AMP.

4. NÃO É PERMITIDO
JSCUSTOMIZADO

6. ➔ <amp-iframe>
➔ Pull request no Github
➔ <amp-bind>
Como criar interações
complexas em páginas
AMP?

8. <amp-bind>
O <amp-bind> possui três
componentes principais:
➔ State
➔ Expressions
➔ Binding

9. State
➔ É um objeto JSON mutável
no escopo do documento.
➔ É possível especificar uma
URL CORS.

10. State
<amp-state id="myState">
<script type="application/json">
{ myText: "Hello AMP" }
</script>
</amp-state>
O estado do <amp-bind>
pode ser inicializado
através do componente
<amp-state>

11. State
<amp-state id="myState">
<script type="application/json">
{ myText: "Hello AMP" }
</script>
</amp-state>
<span [text]="myState.myText">
Hello World
</span>
Para melhor desempenho e
evitar saltos de conteúdo na
página, o amp-bind não
avalia expressões no
carregamento da página.

12. AMP.setState
AMP.setState mescla um
objeto no estado do
<amp-bind>.

13. <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>

14. AMP.pushState
AMP.pushState é
semelhante a AMP.setState,
exceto que também altera o
histórico do navegador.

15. <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>

16. Expressions

17. Expressions
São expressões semelhantes às
do JavaScript, mas com
algumas diferenças
importantes.

18. Expressions
➔ Não têm acesso as globais como
document e window
➔ Variáveis undefined e array-index-out-of-
bounds retornam NULL em vez de
undefined ou throw error

19. // 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])

20. 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

21. <amp-list id="speakers"
[src]="keys(speakers).map(x => speakers[x])")>
<template type="amp-mustache">
<strong>{{name}}</strong>
<span>{{jobTitle}}</span>
</template>
</amp-list>

22. Expressões podem ser
reutilizadas definindo um
amp-bind-macro.
<amp-bind-macro id="circle"
arguments="r"
expression="3.14 * r * r" />
Reutilizando Expressions

23. <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>

24. Binding

25. Binding
São atributos [property] que
vinculam a propriedade de
um elemento a uma
expressão.
<input type="checkbox"
[checked]="selecteds._1177"
[disabled]="checkeds == 4">

26. https://goo.gl/wcxCR
6

27. <input type="checkbox" [checked]="cards && cards._1177"
[disabled]="checkeds == 4 && !current._1177"
on="change:AMP.setState({
cards: {
_1177: event.checked,
},
checkeds: (event.checked ? checkeds+1 : checkeds-1),
})">
<span [text]="cards._1177 ? 'Remover' : 'Comparar'") Comparar </span>
<button on="tap:AMP.setState({ checkeds: 0, cards: null })") Remover tudo </button>

28. Debbuging
Adicione esse fragmento de código
na URL para destacar avisos e erros
durante o desenvolvimento.
#development=1

29. AMP.printState()

30. https://goo.gl/wy2FJ
T

32. Murilo Siqueira Ferreira
FrontEnd @ Foregon
@muhroots