Web Componentse o desenvolvimento de aplicações web modernas
CYNTHIA ZANONI
cyz.github.io cynthiazanoni cynthiazanoni
Ativista Open Source
funcionalidades
Componentes de Software
unidade independenteintegração
Coleção de padrões que permitem encapsular, compor e reusar elementos HTML
WEB COMPONENTS
Fonte: http://bit.ly/webcps
Status de Implemantação
Permite criarmos novos elementos HTML. Tags code-friend
CUSTOM ELEMENTS
Novos elementos não possuem semântica!
CUSTOM ELEMENTS
Conheça todos os elementos em: customelements.io
CUSTOM ELEMENTS
diversos componentes
CUSTOM ELEMENTS
Criação de um Mapa
paper-tabs
CUSTOM ELEMENTS
CUSTOM ELEMENTS
paper-radio-button
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
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.!
SHADOW DOM
Permite criarmos elementos de DOM independentes e isolados do restante da página.
É a melhor forma de criarmos widgets
Exemplos práticos
npm install -g polymer-cli mkdir app-demo cd app-demo polymer init
Configuração
polymer serve --port 3000 --open
Rodando a aplicação
chamada para o client
criando o servidor web e definindo
uma portaabrir o browser
} } }
https://github.com/Polymer/shop
Veja o projeto completo
CYNTHIA ZANONI
cyz.github.io cynthiazanoni cynthiazanoni
OBRIGADX#