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
610
7 Habits of Highly Productive Developers
zenorocha
1
400
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
510
What's new in the Liferay Community
zenorocha
0
690
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
560
How Liferay fits into the real of latest technologies
zenorocha
0
610
Estoicismo e JavaScript
zenorocha
3
1.1k
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
980
Como investir em... você!
zenorocha
1
570
Other Decks in Programming
See All in Programming
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
880
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
200
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
23
9k
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
1
2.2k
AIエージェント開発、DevOps and LLMOps
ymd65536
1
350
TanStack DB ~状態管理の新しい考え方~
bmthd
2
340
20250808_AIAgent勉強会_ClaudeCodeデータ分析の実運用〜競馬を題材に回収率100%の先を目指すメソッドとは〜
kkakeru
0
210
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
330
Honoアップデート 2025年夏
yusukebe
1
860
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
240
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
730
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.5k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Agile that works and the tools we love
rasmusluckow
329
21k
Being A Developer After 40
akosma
90
590k
How STYLIGHT went responsive
nonsquared
100
5.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Navigating Team Friction
lara
189
15k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Statistics for Hackers
jakevdp
799
220k
Faster Mobile Websites
deanohume
309
31k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
820
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