Slide 1
Slide 1 text
O Mágico Mundo
De
Web Components
@mteusortiz
Slide 2
Slide 2 text
@mteusortiz
/mateusortiz
Front-End Developer
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Web Components
Slide 6
Slide 6 text
HTML5 é o Futuro?
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
O Futuro
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
http://mateusortiz.github.io/x-heart/
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Web Components
Shadow DOM
Template
Custom Elements
HTML Imports
Decorators
Slide 13
Slide 13 text
Custom
Elements
Slide 14
Slide 14 text
Antes com
Slide 15
Slide 15 text
Antes com
Slide 16
Slide 16 text
http://goo.gl/GWatuU
Slide 17
Slide 17 text
com JS
var WidgetProto = Object.create(HTMLElement.prototype);
!
WidgetProto.createdCallback = function() {
this.textContent = "BeltraoInTech";
};
!
var Widget = document.registerElement('my-widget', {
prototype: WidgetProto
});
Slide 18
Slide 18 text
Lifecycle Callbacks
createdCallback();
attachedCallback();
detachedCallback();
attributeChangedCallback();
Slide 19
Slide 19 text
Funciona no IE6
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
t
polymer-project.org
Slide 22
Slide 22 text
t
x-tags.org
Slide 23
Slide 23 text
W3C standards platform polyfills
Template shadow dom HTML Imports
Custom Elements
Slide 24
Slide 24 text
Com Polymer
Polymer('x-button', {
color: 'red',
created: function() {
// ...
}
});
Slide 25
Slide 25 text
Lifecycle Callbacks Polymer
created();
detached();
attributeChanged();
attached();
Slide 26
Slide 26 text
Template
Slide 27
Slide 27 text
Templates
são pedaços
inertes de DOM
que podem ser
reutilizados.
Slide 28
Slide 28 text
# GAMBIARRA
existe vários Templates para server-
side e client-side
Slide 29
Slide 29 text
Slide 30
Slide 30 text
como criar?
BeltraoInTech...
Slide 31
Slide 31 text
como usar?
var tmpl = document.querySelector("#template");
tmpl.content.querySelector("img").src = "dog.gif";
document.body.appendChild(tmpl.content.cloneNode(true));
Slide 32
Slide 32 text
Shadow
DOM
Slide 33
Slide 33 text
O SHADOW DOM
encapsula STYLE
e MARCAÇÃO.
Slide 34
Slide 34 text
Slide 35
Slide 35 text
Shadow Dom é a mesma tecnologia usada pelos
fabricantes de navegadores para implemetar as
tags como e .
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
t
mas voltaram atrás
Slide 38
Slide 38 text
exemplo Shadow Dom
var host = document.querySelector(".widget");
var root = host.createShadowRoot();
root.innerHTML = "
Estou dentro da div
";Slide 39
Slide 39 text
Encapsula style, marcação e
script
Slide 40
Slide 40 text
HTML
Imports
Slide 41
Slide 41 text
t
importações carregar
documentos externos
em nossa página.
Slide 42
Slide 42 text
HTML Import
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
Obrigado
TWITTER.COM/MTEUSORTIZ
GITHUB.COM/MATEUSORTIZ