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
590
7 Habits of Highly Productive Developers
zenorocha
1
390
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
480
What's new in the Liferay Community
zenorocha
0
670
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
550
How Liferay fits into the real of latest technologies
zenorocha
0
590
Estoicismo e JavaScript
zenorocha
3
1.1k
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
960
Como investir em... você!
zenorocha
1
550
Other Decks in Programming
See All in Programming
TypeScript だけを書いて Tauri でデスクトップアプリを作ろう / Tauri with only TypeScript
tris5572
2
540
複数アプリケーションを育てていくための共通化戦略
irof
2
740
【TSkaigi 2025】これは型破り?型安全? 真実はいつもひとつ!(じゃないかもしれない)TypeScript クイズ〜〜〜〜!!!!!
kimitashoichi
1
300
Javaのルールをねじ曲げろ!禁断の操作とその代償から学ぶメタプログラミング入門 / A Guide to Metaprogramming: Lessons from Forbidden Techniques and Their Price
nrslib
1
290
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
140
がんばりすぎないコーディングルール運用術
tsukakei
1
180
バリデーションライブラリ徹底比較
nayuta999999
1
440
What Spring Developers Should Know About Jakarta EE
ivargrimstad
1
610
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6.1k
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
nekoya3
0
240
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
5
1.1k
「兵法」から見る質とスピード
ickx
0
200
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
KATA
mclloyd
29
14k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Gamification - CAS2011
davidbonilla
81
5.3k
Scaling GitHub
holman
459
140k
Become a Pro
speakerdeck
PRO
28
5.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Bootstrapping a Software Product
garrettdimon
PRO
307
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