Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Um futuro chamado Web Components
Search
Zeno Rocha
August 22, 2013
Programming
47
26k
Um futuro chamado Web Components
BrazilJS 2013
Zeno Rocha
August 22, 2013
Tweet
Share
More Decks by Zeno Rocha
See All by Zeno Rocha
The Next Generation of Developer-First Products
zenorocha
1
590
7 Habits of Highly Productive Developers
zenorocha
1
390
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
480
What's new in the Liferay Community
zenorocha
0
670
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
550
How Liferay fits into the real of latest technologies
zenorocha
0
590
Estoicismo e JavaScript
zenorocha
3
1.1k
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
960
Como investir em... você!
zenorocha
1
550
Other Decks in Programming
See All in Programming
技術懸念に立ち向かい 法改正を穏便に乗り切った話
pop_cashew
0
830
ソフトウェア品質特性、意識してますか?AIの真の力を引き出す活用事例 / ai-and-software-quality
minodriven
19
6.7k
當開發遇上包裝:AI 如何讓產品從想法變成商品
clonn
0
2.6k
從零到一:搭建你的第一個 Observability 平台
blueswen
0
220
バリデーションライブラリ徹底比較
nayuta999999
1
440
型安全なDrag and Dropの設計を考える
yudppp
5
660
【TSkaigi 2025】これは型破り?型安全? 真実はいつもひとつ!(じゃないかもしれない)TypeScript クイズ〜〜〜〜!!!!!
kimitashoichi
1
300
抽象データ型について学んだ
ryounasso
0
210
primeNumberでのRBS導入の現在 && RBS::Traceでinline RBSを拡充してみた
mnmandahalf
0
250
tsconfigのオプションで変わる型世界
keisukeikeda
1
130
推論された型の移植性エラーTS2742に挑む
teamlab
PRO
0
150
Doma で目指す ORM 最適解
nakamura_to
1
160
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
We Have a Design System, Now What?
morganepeng
52
7.6k
Fireside Chat
paigeccino
37
3.5k
Raft: Consensus for Rubyists
vanstee
137
7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
How to train your dragon (web standard)
notwaldorf
92
6k
Transcript
<web components> um futuro chamado @zenorocha
@liferay @alloyui
None
None
None
jqueryboilerplate.com
browserdiet.com
None
os projetos mais populares voltados para client-side estão fadados a
morrer
vs <canvas>
document.querySelector vs
vs <input type=”date”>
então quer dizer que tudo vai virar “nativo” um dia?
o que as principais empresas da web estão trabalhando hoje?
None
getbootstrap.com
None
facebook.github.io/react
None
topcoat.io
None
alloyui.com
None
purecss.io
None
None
None
como usar um “componente” hoje?
1. Nunca crie! Use um plugin jQuery
2. Copie e cole o código de alguém
3. Torça pra que funcione
Web Components
<braziljs> braziljs.github.io/braziljs-element
<video is=”camera”> customelements.github.io/camera-element
Web Components Custom Elements Import Templates Shadow DOM Decorators*
Custom Elements
<element name="braziljs" constructor="BrazilJS" attributes="onde"> // implementação </element> <element>
<element name="camera" extends="video"> // implementação </element> <element>
zno.io/QxNJ
<brazil-js></brazil-js> usando JS var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function()
{ this.textContent = 'BrazilJS!'; }; document.register('brazil-js', { prototype: proto });
lifecycle •createdCallback •enteredDocumentCallback •leftDocumentCallback •attributeChangedCallback
x-tags.org
polymer-project.org
<polymer-element name="braziljs" attributes="onde"> <script> Polymer('braziljs', { onde: 'Porto Alegre', created:
function() { // faça algo } }); </script> </polymer-element> como usar?
zno.io/QxlZ
Templates
Templates são blocos reutilizáveis de código
server-side mustache handlebars liquid jinja velocity savant
client-side mustache handlebars eco ejs jade hogan
gambiarra #1 <div id="template" style="display: none"> <img src="logo.png" class="logo.png"> </div>
<script id="template" type="text/x-handlebars-template"> <img src="logo.png"> </script> gambiarra #2
<template>
<template id="meuTemplate"> <img src=""> </template> como criar?
// 1. Acessa o conteúdo do template var t =
document.querySelector('#meuTemplate').content; // 2. Manipula elemento interno do template t.querySelector('img').src = 'logo.png'; // 3. Clona e insere no DOM document.body.appendChild(t.cloneNode(true)); como usar?
Shadow DOM
Shadow DOM esconde os detalhes de implementação
mas e o <iframe>?
do que é feito um <video>? ou um password, textarea,
date?
como usar? <h1>Documento</h1> <div id=”cuia”></div> var cuia = document.querySelector('#cuia') .createShadowRoot();
cuia.innerHTML = '<h1>Mate</h1>';
estilo, marcação e script encapsulados <h1>Documento</h1> <div id=”cuia”></div> var cuia
= document.querySelector('#cuia') .createShadowRoot(); cuia.innerHTML = '<h1>Mate</h1>' + '<style>h1 { color: #f00; }</style>';
como ativar?
Import
None
None
None
None
como usar? <link rel="import" href="braziljs.html">
None
jonrimmer.github.io/are-we-componentized-yet
Flags
quero usar hoje, onde eu encontro? NPM? Bower?
@eduardolundgren
@bernarddeluna
customelements.io
<twitter> customelements.github.io/twitter-element
<gmaps> customelements.github.io/gmaps-element
<video is=”camera”> customelements.github.io/camera-element
<video is=”tracking”> eduardolundgren.github.io/tracking-element
ou seja...
encapsulamento e reaproveitamento de código de verdade
A melhor forma de prever o futuro é inventando ele
e..... camisetas!
None