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
570
7 Habits of Highly Productive Developers
zenorocha
1
380
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
460
What's new in the Liferay Community
zenorocha
0
670
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
540
How Liferay fits into the real of latest technologies
zenorocha
0
570
Estoicismo e JavaScript
zenorocha
3
1.1k
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
940
Como investir em... você!
zenorocha
1
550
Other Decks in Programming
See All in Programming
爆速スッキリ! Rspack 移行の成果と道のり - Muddy Web #11
dora1998
1
150
SLI/SLOの設定を進めるその前に アラート品質の改善に取り組んだ話
tanden
2
710
WordPress Playground for Developers
iambherulal
0
120
ニックトレイン登壇資料
ryotakurokawa
0
140
PHPUnit 高速化テクニック / PHPUnit Speedup Techniques
pinkumohikan
1
1.2k
データベースエンジニアの仕事を楽にする。PgAssistantの紹介
nnaka2992
9
4.2k
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
230
なぜselectはselectではないのか
taiyow
2
290
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
170
バックエンドNode.js × フロントエンドDeno で開発して得られた知見
ayame113
5
1.3k
Fluent UI Blazor 5 (alpha)の紹介
tomokusaba
0
140
remix + cloudflare workers (DO) docker上でいい感じに開発する
yoshidatomoaki
0
120
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Music & Morning Musume
bryan
46
6.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
7
610
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
51
2.4k
Fireside Chat
paigeccino
37
3.3k
Thoughts on Productivity
jonyablonski
69
4.5k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
22
2.6k
Making Projects Easy
brettharned
116
6.1k
Into the Great Unknown - MozCon
thekraken
36
1.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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