Post on 07-Aug-2015
Web Components
por João Paulo Seregatte@seregatte
O Drupal está preparado?
João Paulo Seregatte
● Informática Redes de comunicação.● Análise e des. de Sistemas.● Desenvolvedor à 8 anos.● Desenvolvedor Drupal à 5 anos.● @seregatte
Quem sou eu?
Desenvolvedores Front / Back
● Apresentar.● Exemplos.● Desenvolver.● Estimular o estudo.
Level 1 > Sub itemObjetivos
Level 1 > Sub itemObjetivos
Início● 1989: Tim Berners-Lee inventa o HTML.● Março 1993: Lou Montulli entrega o Lynx browser ● Em 1994: The World Wide Web Consortium.● Julho 1994: Especificação HTML 2 ● Novembro 1994: Netscape.
Level 1 > Sub itemHTML > Início
NetScape● November 1994 - Netscape
● January 1997 - Especificação HTML 3.2
Level 1 > Sub itemHTML > NetScape
Level 1 > Sub itemHTML > NetScape
Level 1 > Sub itemHTML > Realidade HTML 4
Level 1 > Sub itemHTML > Tags maravilhosas
Level 1 > Sub itemHTML > Tags maravilhosas
Level 1 > Sub itemHTML > IE
Internet Explorer Version 4.0
1. Release date: September 19972. 60 % market share with IE 4.
Level 1 > Sub itemHTML > IE 5
Level 1 > Sub itemHTML > IE 6
Level 1 > Sub itemItem 1 > Subitem 1Plugins > Necessidade
Suprir a necessidade
1. Animações.2. Dados.3. Mídia
Level 1 > Sub itemItem 1 > Subitem 1Plugins > E vem todos navegadores
Item 1 > Subitem 1HTML5 > Morte aos plugins
HTML 5
1. Independencia de plugins.2. Novos elementos.3. CSS3
Level 1 > Sub itemItem 1 > Subitem 1Web Components
Iniciativa / Padrão
● Custom Elements.● Templates.● Shadow DOM● HTML Imports
Level 1 > Sub itemItem 1 > Subitem 1Web Components > Custom Elements
<x-camera>
https://github.com/casarock/camera/
Level 1 > Sub itemItem 1 > Subitem 1Web Components > Custom Elements
Show me the code!
Level 1 > Sub itemItem 1 > Subitem 1Web Components > Custom Elements
Level 1 > Sub itemItem 1 > Subitem 1Web Components > Custom Elements
http://w3c.github.io/webcomponents/spec/custom/
Level 1 > Sub itemItem 1 > Subitem 1Web Components > Templates
Level 1 > Sub itemItem 1 > Subitem 1Web Components > Templates
Level 1 > Sub itemItem 1 > Subitem 1
Show me the code!
Web Components > Templates
Level 1 > Sub itemItem 1 > Subitem 1
http://w3c.github.io/webcomponents/spec/template/
Web Components > Templates
Level 1 > Sub itemItem 1 > Subitem 1Web Components > Shadow DOM
Level 1 > Sub itemItem 1 > Subitem 1
Show me the code!
Web Components > Shadow DOM
Level 1 > Sub itemItem 1 > Subitem 1
homer-button
Web Components > Demo
Level 1 > Sub itemItem 1 > Subitem 1
http://w3c.github.io/webcomponents/spec/shadow/
Web Components > Shadow DOM
Level 1 > Sub itemItem 1 > Subitem 1
Compatibilidade
● Custom Elements.● Templates.● Shadow DOM
Web Components > Polyfill
Level 1 > Sub itemItem 1 > Subitem 1Web Components > Polyfill
Item 1 > Subitem 1Polymer
● https://polymer-topeka.appspot.com/● http://cds-polymer.appspot.com/● https://polymer-designer.appspot.com/
Level 1 > Sub itemItem 1 > Subitem 1Web Components > HTML imports
Level 1 > Sub itemItem 1 > Subitem 1
Show me the code!
Web Components > HTML imports
Item 1 > Subitem 1Drupal
Item 1 > Subitem 1Drupal > Futuro
Item 1 > Subitem 1Drupal > Futuro
Item 1 > Subitem 1Drupal > Futuro
Item 1 > Subitem 1Drupal > Futuro
Item 1 > Subitem 1Conclusão > Objetivo
Item 1 > Subitem 1Conclusão > Fim
Fim
Item 1 > Subitem 1Conclusão > Perguntas
Perguntas?
@seregatte
https://github.com/seregatte/Palestra_WebComponents