Post on 29-Jun-2015
description
<web components>
um futurochamado
@zenorocha
@liferay @alloyui
jqueryboilerplate.com
browserdiet.com
os projetosmais popularesvoltados paraclient-sideestão fadadosa morrer
vs
<canvas>
document.querySelector
vs
vs
<input type=”date”>
então quer dizerque tudo vai virar
“nativo” um dia?
o que asprincipais
empresas daweb estão
trabalhando hoje?
getbootstrap.com
facebook.github.io/react
topcoat.io
alloyui.com
purecss.io
como usar um“componente” hoje?
1. Nunca crie! Use um plugin jQuery
2. Copie e cole o código de alguém
3. Torça pra que funcione
Web Components
<braziljs>
braziljs.github.io/braziljs-element
<video is=”camera”>
customelements.github.io/camera-element
Web ComponentsCustom
ElementsImport
TemplatesShadow DOM
Decorators*
CustomElements
<element name="braziljs" constructor="BrazilJS" attributes="onde"> // implementação </element>
<element>
<element name="camera" extends="video"> // implementação </element>
<element>
zno.io/QxNJ
<brazil-js></brazil-js>
usando JS
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() { this.textContent = 'BrazilJS!'; };
document.register('brazil-js', { prototype: proto });
lifecycle•createdCallback
•enteredDocumentCallback
•leftDocumentCallback
•attributeChangedCallback
x-tags.org
polymer-project.org
<polymer-element name="braziljs" attributes="onde"> <script> Polymer('braziljs', { onde: 'Porto Alegre', created: function() { // faça algo } }); </script> </polymer-element>
como usar?
zno.io/QxlZ
Templates
Templatessão blocos
reutilizáveisde código
server-side
mustache
handlebars
liquid
jinja
velocity
savant
client-side
mustache
handlebars
eco
ejs jade
hogan
gambiarra #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>
gambiarra #2
<template>
<template id="meuTemplate"> <img src=""></template>
como criar?
// 1. Acessa o conteúdo do template var t = document.querySelector('#meuTemplate').content;
// 2. Manipula elemento interno do template t.querySelector('img').src = 'logo.png';
// 3. Clona e insere no DOM document.body.appendChild(t.cloneNode(true));
como usar?
ShadowDOM
Shadow DOM esconde os
detalhes de implementação
mas e o<iframe>?
do que é feitoum <video>?
ou um password, textarea, date?
como usar? <h1>Documento</h1> <div id=”cuia”></div>
var cuia = document.querySelector('#cuia') .createShadowRoot();
cuia.innerHTML = '<h1>Mate</h1>';
estilo, marcação e script encapsulados <h1>Documento</h1> <div id=”cuia”></div>
var cuia = document.querySelector('#cuia') .createShadowRoot();
cuia.innerHTML = '<h1>Mate</h1>' + '<style>h1 { color: #f00; }</style>';
como ativar?
Import
como usar? <link rel="import" href="braziljs.html">
jonrimmer.github.io/are-we-componentized-yet
Flags
quero usar hoje,onde eu encontro?
NPM? Bower?
@eduardolundgren
@bernarddeluna
customelements.io
<twitter>
customelements.github.io/twitter-element
<gmaps>
customelements.github.io/gmaps-element
<video is=”camera”>
customelements.github.io/camera-element
<video is=”tracking”>
eduardolundgren.github.io/tracking-element
ou seja...
encapsulamento e reaproveitamento de
código de verdade
A melhor forma deprever o futuro é
inventando ele
e..... camisetas!