Web
Components
Descubra o conceito da nova Web
Diego Melo
Full Stack Developer - Universidade Tiradentes
O que é?
O conceito de Web Components é bem simples, basta imaginar que
tenhamos que reaproveitar um conjunto de camadas c...
Como são compostos?
Eles são compostos por 4 especi cações, sendo elas:
Templates
Custom Components
Shadow DOM
Imports
Templates
De nem pedaços de código(HTML) que são totalmente inertes à
página até que seu Javascript os ative, ou seja, o t...
<div class="uma-classe">
<h1>Um título</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
Custom Elements
São elementos customizados, onde permite-nos criar tags diferentes
dos canônicos como "body", "input" ou "...
<top-menu name="Menu principal">
// código do menu
</top-menu>
Shadow DOM
É onde uma parte do código do seu elemento é encapsulada e
escondida pelo browser, ou seja, não é visível no có...
Imports
Uma vez tendo um trecho de DOM isolado, com estilos e
comportamentos independentes de outros componentes, agora
pr...
Exemplo de componente
<login-form></login-form>
Como se
trabalhava antes?
Como se trabalha hoje com
Web Components
Nada mal hein?
Quero usar, mas
por onde
começo?
Webcomponents.org
Polymer
SkateJS
Bosonic
X-tag
AngularJS / Angular 2
Github:
Facebook:
Instagram:
Obrigado! ;)
github.com/diegomelo182
facebook.com/diego.melo.370
@diegomelo182aju
Web components
Web components
Web components
Web components
Web components
Web components
Web components
Próximos SlideShares
Carregando em…5
×

Web components

159 visualizações

Publicada em

Apresentação para os alunos dos cursos técnicos do Pronatec.

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
159
No SlideShare
0
A partir de incorporações
0
Número de incorporações
12
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Web components

  1. 1. Web Components Descubra o conceito da nova Web
  2. 2. Diego Melo Full Stack Developer - Universidade Tiradentes
  3. 3. O que é? O conceito de Web Components é bem simples, basta imaginar que tenhamos que reaproveitar um conjunto de camadas como Controller e View em algum momento na nossa aplicação e ao invés de duplicarmos as mesmas, as agrupamos em um Component para possamos reutilizá-lo quando quisermos.
  4. 4. Como são compostos? Eles são compostos por 4 especi cações, sendo elas: Templates Custom Components Shadow DOM Imports
  5. 5. Templates De nem pedaços de código(HTML) que são totalmente inertes à página até que seu Javascript os ative, ou seja, o template não existirá na página até que você necessite.
  6. 6. <div class="uma-classe"> <h1>Um título</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div>
  7. 7. Custom Elements São elementos customizados, onde permite-nos criar tags diferentes dos canônicos como "body", "input" ou "div" e injetar os templates dentro das mesmas.
  8. 8. <top-menu name="Menu principal"> // código do menu </top-menu>
  9. 9. Shadow DOM É onde uma parte do código do seu elemento é encapsulada e escondida pelo browser, ou seja, não é visível no código normal do DOM, mas que monta todo seu componente “por baixo dos panos”.
  10. 10. Imports Uma vez tendo um trecho de DOM isolado, com estilos e comportamentos independentes de outros componentes, agora precisamos empacotar isso. E para isso servem esses imports que declara os arquivos e dependências do componente para que eles possam ser lidos posteriormente.
  11. 11. Exemplo de componente <login-form></login-form>
  12. 12. Como se trabalhava antes?
  13. 13. Como se trabalha hoje com Web Components
  14. 14. Nada mal hein?
  15. 15. Quero usar, mas por onde começo?
  16. 16. Webcomponents.org
  17. 17. Polymer
  18. 18. SkateJS
  19. 19. Bosonic
  20. 20. X-tag
  21. 21. AngularJS / Angular 2
  22. 22. Github: Facebook: Instagram: Obrigado! ;) github.com/diegomelo182 facebook.com/diego.melo.370 @diegomelo182aju

×