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

E na web?

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

WEB COMPONENTS

Fonte: http://bit.ly/webcps

Status de Implemantação

Polymer

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

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

HTML IMPORTS

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

TEMPLATES

SHADOW DOM

Permite criarmos elementos de DOM independentes e isolados do restante da página.

É a melhor forma de criarmos widgets

SHADOW DOM

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

Considerações

CYNTHIA ZANONI

cyz.github.io cynthiazanoni cynthiazanoni

OBRIGADX#