Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
A future called Web Components
Zeno Rocha
December 17, 2013
Programming
27
3.8k
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
0
120
7 Habits of Highly Productive Developers
zenorocha
0
49
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
43
What's new in the Liferay Community
zenorocha
0
390
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
270
How Liferay fits into the real of latest technologies
zenorocha
0
170
Estoicismo e JavaScript
zenorocha
3
610
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
530
Como investir em... você!
zenorocha
1
290
Other Decks in Programming
See All in Programming
もしも、 上司に鬼退治を命じられたら~プロジェクト計画編~
higuuu
0
260
ゴーファーくんと学ぶGo言語の世界/golang-world-with-gopher
iwasiman
1
140
New Relicを使った Observabilityの実現方法と活用例 / gocon 2022 spring after talk
budougumi0617
0
880
競プロへの誘 -いざな-
u76ner
0
320
書籍『良いコード/悪いコードで学ぶ設計入門』でエンジニアリングの当たり前を変える
minodriven
3
1k
Micro Frontends with Module Federation: Beyond the Basics
manfredsteyer
PRO
0
300
Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022
manfredsteyer
PRO
0
280
既存のプロジェクトにKMMを導入するための対応策
martysuzuki
2
280
Let's make a contract: the art of designing a Java API
mariofusco
0
150
WindowsコンテナDojo:第2回 Windowsコンテナアプリのビルド、公開、デプロイ
oniak3ibm
PRO
0
130
Reactでアプリケーションを構築する多様化
sakito
4
2.9k
Keep Your Cache Always Fresh With Debezium
gunnarmorling
0
170
Featured
See All Featured
Clear Off the Table
cherdarchuk
79
280k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
From Idea to $5000 a Month in 5 Months
shpigford
372
44k
Embracing the Ebb and Flow
colly
73
3.3k
BBQ
matthewcrist
74
7.9k
Typedesign – Prime Four
hannesfritz
33
1.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
Teambox: Starting and Learning
jrom
121
7.6k
What's new in Ruby 2.0
geeforr
336
30k
Stop Working from a Prison Cell
hatefulcrawdad
261
17k
Atom: Resistance is Futile
akmur
255
20k
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