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
A future called Web Components
Search
Zeno Rocha
December 17, 2013
Programming
27
4.2k
A future called Web Components
HTML5 LA
Zeno Rocha
December 17, 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
600
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
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
0
230
Jakarta EE Meets AI
ivargrimstad
0
630
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
250
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
1.7k
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
280
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
270
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
5
580
画像コンペでのベースラインモデルの育て方
tattaka
3
1.4k
AI Ramen Fight
yusukebe
0
130
iOS開発スターターキットの作り方
akidon0000
0
240
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
1
250
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
0
520
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
750
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Speed Design
sergeychernyshev
32
1.1k
Adopting Sorbet at Scale
ufuk
77
9.5k
GitHub's CSS Performance
jonrohan
1031
460k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Done Done
chrislema
185
16k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Statistics for Hackers
jakevdp
799
220k
How GitHub (no longer) Works
holman
314
140k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Transcript
None
I’m from Brazil!
None
None
None
None
None
None
None
the most famous client-side projects are fated to die
None
None
None
so you think everything will become “native" one day?
what the major web companies have been working on?
None
None
None
None
None
None
None
None
None
None
None
None
None
how do you create a “component” nowadays?
1. Never create! Just use a jQuery plugin
2. Copy and paste someone’s code
3. And hope it works
None
<html5-la>
<video is=”camera”> eduardolundgren.github.io/video-camera-element
None
None
<element name=“html5-la“ constructor="HTML5LA" attributes="where"> // content goes here </element> <element>
<element> <element name="camera" extends="video"> // content goes here </element>
None
using JS <html5-la></html5-la> var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function()
{ this.textContent = ‘HTML5 LA!'; }; document.register(‘html5-la', { prototype: proto });
lifecycle • createdCallback() • enteredDocumentCallback() • leftDocumentCallback() • attributeChangedCallback()
None
None
how to use it? <polymer-element name=“html5-la" attributes="where"> <script> Polymer(‘html5-la', {
where: ‘Santa Monica’, created: function() { // do something } }); </script> </polymer-element>
lifecycle • created() • enteredView() • leftView() • attributeChanged()
None
Templates are reusable blocks of code
Templates are reusable blocks of code
None
None
attempt #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> attempt #2
None
how to create it? <template id="myTemplate"> <img src=""> </template>
how to use it? // 1. Access template’s content var
t = document.querySelector('#myTemplate').content; // 2. Manipulate internal element t.querySelector('img').src = 'logo.png'; // 3. Clone and append in the DOM document.body.appendChild(t.cloneNode(true));
None
Shadow DOM hides the implementation details
what about <iframe>?
what’s a <video> made of? or password, textarea, date?
how to use it? <h1>Foo</h1> <div id=”elem”></div> var elem =
document.querySelector(‘#elem'); var elemShadowDOM = elem.createShadowRoot(); ! elemShadowDOM.innerHTML = '<h1>Bar</h1>';
markup, style & script encapsulated <h1>Foo</h1> <div id=”elem”></div> var elem
= document.querySelector(‘#elem'); var elemShadowDOM = elem.createShadowRoot(); ! elemShadowDOM.innerHTML = ‘<h1>Bar</h1>’ + ‘<style>h1 { color: red; }</style>’;
None
None
None
how to use it? <link rel="import" href="myelement.html">
None
None
None
None
where can I find them? NPM? Bower?
None
None
None
<twitter-button> zenorocha.github.io/twitter-button
<google-maps> eduardolundgren.github.io/google-maps-element
<video is=”camera”> eduardolundgren.github.io/video-camera-element
<video is=”tracking”> eduardolundgren.github.io/video-tracking-element
in other words…
encapsulation and code reuse for real
the best way to predict the future is to create
it
None
thanks! zenorocha.com