O documento discute os Web Components e como eles permitem encapsular, compor e reusar elementos HTML para o desenvolvimento de aplicações web modernas. Os principais padrões discutidos incluem Custom Elements, HTML Imports, Templates e Shadow DOM. Exemplos práticos de uso de componentes como paper-tabs e paper-radio-button são apresentados.

1. Web Components
e o desenvolvimento de aplicações
web modernas

2. CYNTHIA
ZANONI
cyz.github.io
cynthiazanoni
cynthiazanoni
Ativista Open Source

5. funcionalidades
Componentes
de Software
unidade independente
integração

6. E na web?

7. Coleção de padrões que
permitem encapsular, compor
e reusar elementos HTML
WEB COMPONENTS

8. Fonte: http://bit.ly/webcps
Status de Implemantação

9. Polymer

10. Permite criarmos novos elementos HTML.
Tags code-friend
CUSTOM ELEMENTS
Novos elementos não possuem
semântica!

11. CUSTOM ELEMENTS
Conheça todos os
elementos em:
customelements.io

12. CUSTOM ELEMENTS
diversos componentes

13. CUSTOM ELEMENTS

14. CUSTOM ELEMENTS
Criação de um Mapa

15. paper-tabs
CUSTOM ELEMENTS

16. CUSTOM ELEMENTS
paper-radio-button

17. HTML IMPORTS
Permite fazermos load de outros documento
Problemático no HTTP/1.1 e o JS do doc importado
é executado no mesmo escopo #OMG!!
Funciona muito bem com o HTTP/2

18. HTML IMPORTS

19. TEMPLATES
Permite utilizarmos um mesmo bloco de código
através de JS
Forma (ou tentativa) de padronizar o uso de
templates
Conteúdo só é acessível via JS.
!

20. TEMPLATES

21. SHADOW DOM
Permite criarmos elementos de DOM independentes
e isolados do restante da página.
É a melhor forma de criarmos widgets

22. SHADOW DOM

23. Exemplos
práticos

24. npm install -g polymer-cli
mkdir app-demo
cd app-demo
polymer init
Configuração

25. polymer serve --port 3000 --open
Rodando a aplicação
chamada para o
client
criando o servidor
web e definindo
uma porta
abrir o browser
}
}
}

26. https://github.com/Polymer/shop
Veja o projeto completo

27. Considerações

28. CYNTHIA
ZANONI
cyz.github.io
cynthiazanoni
cynthiazanoni
OBRIGADX#