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
4k
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
420
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
450
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
470
Other Decks in Programming
See All in Programming
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
hokaccha
5
2.8k
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
13
4.4k
TypeScript Custom GitHub Action Development Tips
peaceiris
5
650
教えて!スクラムコーチ品質とスピードのバランスはどうすりゃいいの?
pinboro
0
140
TypeScriptでもLLMアプリケーション開発 / LLM Application In Typescript
rkaga
5
1.3k
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
430
Namespace, What and Why
tagomoris
3
700
An adventure of Happy Eyeballs
coe401_
1
250
Docker_OSS_ホスティング入門
satokoki645
0
140
The test code generator using static analysis and LLM
mikik0
1
190
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
520
戦略的DDDは重いのか? / Is strategic DDD heavy?
pictiny
3
2.1k
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
69
8.6k
YesSQL, Process and Tooling at Scale
rocio
165
13k
Designing the Hi-DPI Web
ddemaree
276
33k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Robots, Beer and Maslow
schacon
PRO
155
8k
A designer walks into a library…
pauljervisheath
201
23k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1.1k
BBQ
matthewcrist
80
8.8k
Six Lessons from altMBA
skipperchong
22
3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
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