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
410
7 Habits of Highly Productive Developers
zenorocha
1
270
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
300
What's new in the Liferay Community
zenorocha
0
550
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
440
How Liferay fits into the real of latest technologies
zenorocha
0
390
Estoicismo e JavaScript
zenorocha
3
870
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
750
Como investir em... você!
zenorocha
1
460
Other Decks in Programming
See All in Programming
Apache Hive 4 on Treasure Data
ryukobayashi
1
450
Docker_OSS_ホスティング入門
satokoki645
0
110
AmperとFleetを使ったAndroidアプリ
yoppie
0
280
Introducing Kotlin Multiplatform in an existing mobile app - Workshop Edition | AndroidMakers Paris
prof18
0
170
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
12
4.2k
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
1k
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.3k
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
700
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.3k
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
1.1k
Sheets API使ってみた
toshi0383
2
170
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.7k
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
From Idea to $5000 a Month in 5 Months
shpigford
378
45k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
A Tale of Four Properties
chriscoyier
153
22k
Agile that works and the tools we love
rasmusluckow
325
20k
What's new in Ruby 2.0
geeforr
337
31k
Adopting Sorbet at Scale
ufuk
69
8.6k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Designing Experiences People Love
moore
136
23k
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