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
550
7 Habits of Highly Productive Developers
zenorocha
1
370
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
450
What's new in the Liferay Community
zenorocha
0
650
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
540
How Liferay fits into the real of latest technologies
zenorocha
0
550
Estoicismo e JavaScript
zenorocha
3
1.1k
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
890
Como investir em... você!
zenorocha
1
530
Other Decks in Programming
See All in Programming
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
860
時計仕掛けのCompose
mkeeda
1
310
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
190
Ruby on cygwin 2025-02
fd0
0
150
もう僕は OpenAPI を書きたくない
sgash708
5
1.8k
sappoRo.R #12 初心者セッション
kosugitti
0
260
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
6
2k
Introduction to kotlinx.rpc
arawn
0
740
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
CI改善もDatadogとともに
taumu
0
180
Formの複雑さに立ち向かう
bmthd
1
890
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Designing for Performance
lara
604
68k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Building Your Own Lightsaber
phodgson
104
6.2k
Adopting Sorbet at Scale
ufuk
74
9.2k
The Invisible Side of Design
smashingmag
299
50k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Unsuck your backbone
ammeep
669
57k
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