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
630
7 Habits of Highly Productive Developers
zenorocha
1
410
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
530
What's new in the Liferay Community
zenorocha
0
700
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
570
How Liferay fits into the real of latest technologies
zenorocha
0
620
Estoicismo e JavaScript
zenorocha
3
1.2k
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
1k
Como investir em... você!
zenorocha
1
580
Other Decks in Programming
See All in Programming
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
110
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
200
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
6.9k
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
850
CSC305 Lecture 11
javiergs
PRO
0
270
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
100
Introduce Hono CLI
yusukebe
6
3.1k
Software Architecture
hschwentner
6
2.3k
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
CSC509 Lecture 07
javiergs
PRO
0
240
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.7k
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Side Projects
sachag
455
43k
Speed Design
sergeychernyshev
32
1.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Rails Girls Zürich Keynote
gr2m
95
14k
A Tale of Four Properties
chriscoyier
161
23k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Balancing Empowerment & Direction
lara
5
700
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