Um futuro chamado Web Components

<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!