Componentes para a webuma visão sobre tudo aquiloque realmente importa

jcemer.com

github.com/jcemer

twitter.com/jcemer

speakerdeck.com/jcemer

Elemento de software que encapsula uma série de funcionalidades relacionadas

ComponenteDefinição

Unidade independente que pode ser composta com outros componentes para formar um sistema mais complexo

• Independentes • Intercambiáveis • Reusáveis

modularidade e coesão

Introducing the new UX and UI for Google News platform George Kvasnikov · 10/2014

http://googlenews.gkvasnikov.com

HTML JavaScript CSS

Coleção de padrões que permitem encapsular, compor e reusar código na plataforma web

Web ComponentsDefinição

• Custom Elements • Templates • Shadow DOM • HTML Imports

Web Components are here to fundamentally change the way we think, build, and consume our web apps.

Eric Bidelman Google

Web Components

Debunked!

Daqui em adiante, você irá se frustrar um pouco, faz parte do processo

Permite estender e definir novos elementos de HTML

Custom Elements

<news> <author uid="jim-kennedy"> Jim Kennedy</author> <time>April 23</time> <title>What is the core of Palestinian conflict?</title> <news-stats> <stats-reads>26</stats-reads> <stats-shares>312</stats-shares> <stats-likes>216</stats-shares> </news-stats> </news>

HTML

Elementos HTML5 podem ser estilizados no Internet Explorer 6 porque nele é possível definir novos elementos

https://github.com/afarkas/html5shiv

Semântica1.

Acabamos de criar uma série de elementos sem valor semântico fora do escopo do nosso projeto

<div itemscope itemtype="http://schema.org/NewsArticle"> <!-- --> </div>

Microformats acrescentam significado ao conteúdo

HTML

Sabemos que não há nenhuma semântica a ser seguida quando atribuímos classes a um elemento

http://nicolasgallagher.com/about-html-semantics-front-end-architecture

<div class="board-item board-item--hightlight"> <!-- --> </div>

É muito mais flexível e prático utilizar classes com nomes relacionados a aparência para estilizar

HTML

Utilizar classes e microformats é mais adequado sob a ótica de estilização e semântica que definir novos elementos

<div class="board-item" itemscope itemtype="http://schema.org/NewsArticle"> <div class="person" itemprop="author"> Jim Kennedy</div> <time itemprop="datePublished"> April 23</time> <div class="board-item__title" itemprop="name"><!-- --></div> <div class="board-stats"> <div class="board-stats__reads">26</div> <div class="board-stats__shares">312</div> <div class="board-stats__likes">216</div> </div> </div>

HTML

Função dos elementos2.

Alguns elementos possuem funções que ultrapassam a de atribuir semântica ao conteúdo

<link href="style.css" rel="stylesheet"> <script src="application.js"></script> <iframe src="content.html"></iframe>

HTML

<form> <input type="text"> <input type="password"> <select> <option>Option 1</option> <option>Option 2</option> </select> </form>

HTML

MacOS iPad iPhone

Vejamos um exemplo de elemento do projeto Polymer

https://www.polymer-project.org/docs/elements/paper-elements.html#paper-dropdown-menu

https://www.polymer-project.org/docs/elements/paper-elements.html#paper-dropdown-menu

https://www.polymer-project.org/docs/elements/paper-elements.html#paper-dropdown-menu

Não reinvente elementos que já existem, os usuários agradecem

Repositório para fragmentos de HTML a serem utilizados por código JavaScript

Template

O panorama dos templates na web (

<div data-template style="display:none"> <img src="image.png"> <div>{{name}}</div> </div>

Conteúdo será processado e a imagem será requisitada para o servidor

HTML

<script type="text/template"> <img src="image.png"> <div>{{name}}</div> </script>

Conteúdo é uma string que pode expor a aplicação a Cross-site scripting

HTML

var userData = '<script src="authstealer.js">' el.innerHTML = t.replace('{{name}}', userData)

Assim é que sofremos um XSS attack

JAVASCRIPT

)

<template> <img src="image.png"> <div data-name>{{name}}</div> </template>

var t = document.querySelector('template')

t.content.querySelector('[data-name]') .textContent = userData

document.body.appendChild( document.importNode(t.content, true));

HTML

JAVASCRIPT

Templates no HTML3.

Não há benefício em ter no documento templates acessíveis apenas pelo JavaScript

/** @jsx React.DOM */ var Avatar = React.createClass({ render: function() { return <div> <img src="image.png"/> <div>{ this.props.name }</div> </div> } })

JAVASCRIPT / JSX

var Avatar = React.createClass({ displayName: 'Avatar', render: function() { return React.DOM.div(null, React.DOM.img({src: "image.png"}), React.DOM.div(null, this.props.name) ) } })

JAVASCRIPT

• Fácil de visualizar a estrutura

• Designers sentem-se confortáveis em fazer alterações

• Previne Cross-site scripting

http://facebook.github.io/react/docs/jsx-in-depth.html

JSX JavaScript XML syntax

Permite isolar código HTML o mantendo livre de interferências da página

Shadow DOM

I’m definitely not a fan of making your widget out of a <canvas>. It is reliable but it’s hostile to accessibility, indexing, composition, and resolution independence

Dominic CooneyGoogle

Pequena aplicação de terceiros que pode ser instalada em suas páginas

WidgetsDefinição

Shadow DOM de elementos nativos4.

Shadow Dom

Hiding Native HTML5 Video Controls in Full-Screen Mode Chris Coyier

http://css-tricks.com/custom-controls-in-html5-video-full-screen

Shadow DOM CSS Cheat Sheet Rob Dodson

http://robdodson.me/blog/2014/04/10/shadow-dom-css-cheat-sheet

video /deep/ input[type="range"] { display: none; }

CSS

Maintainable JavaScript: Don’t modify objects you don’t own Nicholas C. Zakas

http://www.nczonline.net/blog/2010/03/02/maintainable-javascript-dont-modify-objects-you-down-own

http://videos.clicrbs.com.br

Widgets não devem ser manipulados de maneiras escusas

Encapsulamento de CSS5.

<div class="widget"></div> <p>Not blue content</p>

<script> var root = document.querySelector('.widget') .createShadowRoot() root.innerHTML = '<style>' + 'p { color: blue }</style>' </script>

As regras definidas no Shadow DOM não surtem efeito na página

HTML

<style> p { background: red } </style> <div class="widget"></div>

<script> var root = document.querySelector('.widget') .createShadowRoot() root.innerHTML = '<p>Content</p>' </script>

E as regras de CSS definidas na página não se aplicam ao Shadow DOM

HTML

O que faz todo sentido quando temos um widget

Mas perder a identidade da página a cada Shadow DOM geralmente não é a intenção

Não esqueça que conflitos de CSS podem ser evitados com a adoção de um sistema de escrita

http://tableless.com.br/oocss-smacss-bem-dry-css-afinal-como-escrever-css

<div class="widget"> <style scoped> p { color: red } </style> <p>Red content</p> </div>

Scoped CSS poderia ser um recurso tão interessante (se não só o Firefox tivesse suporte)

HTML

Permite carregar documentos HTML de maneira assíncrona

HTML Imports

Requests6.

Permite isolar as definições de componentes e templates as custas de requests

Escopo e dependências7.

Código JavaScript é executado no mesmo escopo de window

<head> <title>My funny document</title> <link rel="import" href="dangerous.html"> </head>

<script> document.getElementById = function () {} </script>

dangerous.html

HTML

Dependendo da ordem das importações, dependências podem ser sobrescritas

<script src="http://cdn/jquery.js"></script> <script> $.fn.myPlugin = function () {} </script> <link rel="import" href="overwrite.html">

<script src="http://cdn/jquery.js"></script>

overwrite.html

HTML

Web Components

The good parts

Web Components

The good partsAquilo que humildemente acho legal

A única alternativa para se criar widgets atualmente é através de iframes

Iframes não permitem gerenciar externamente seu conteúdo e nem aferir sua dimensão

Encapsulamento com interfaces1.

<div data-widget> <h1 data-page-content>Personal Content</h1> </div>

<script> document .querySelector('[data-widget]') .createShadowRoot() .innerHTML = '<div>My widget</div>' +

'<content select="[data-page-content]">' + '</content>' </script>

HTML

Personal ContentMy widget

.sign-up::part(login-label) { color: orange; }

http://robdodson.me/blog/2013/08/29/shadow-dom-styles-cont-dot

Shadow DOM permite definir elementos parts passíveis de estilização

HTML

Login

Shadow DOM permite definir widgets com interfaces

<twitter-timeline user="jcemer">♥HTML

@jcemer

<gmaps-address locale="Porto Alegre"> <div data-address-modal> Auditório do SENAC <!-- --> </div> </gmaps-address>

♥HTML

Componentes e dependências2.

document.registerElement('twitter-timeline')

Elementos são registrados diretamente através de JavaScript

<script src="http://twitter.com/timeline.js"> </script>

timeline.js

HTML

Nestes casos, um encapsulamento mais flexível pode ser interessante

<template> <!-- --> </template>

<script> document.registerElement('twitter-timeline') </script>

<link rel="import" href="http://twitter.com/timeline.html">

timeline.html

HTML

Imports permitem melhor administrar dependências

<link rel="import" href="jquery.html"> <link rel="import" href="timeline.html">

<link rel="import" href="jquery.html">

timeline.html

HTML

Documentos indicados no import são incluídos uma única vez

<link rel="import" href="jquery.html"> <link rel="import" src="http://twitter.com/timeline.html">

<link rel="import" href="jquery.html">

timeline.html

Não resolve o problema em diferentes domínios

HTML

Imports e templates precisam evoluir para solucionar mais problemas

Atribuindo comportamento3.

Componentes não devem ser instanciados considerando a página em que estão

if ($('body').is('.page-product')) { $('[data-draggable]').draggable() $('[data-comments]').comments() }

if ($('body').is('.page-checkout')) { $('[data-draggable]').draggable() $('[data-datepicker]').datepicker() }

JAVASCRIPT

Angular.js e Dojo usam elementos HTML como referência para instanciar componentes

Custom Elements permitem assistir ao ciclo de vida de um elemento

<img src="jcemer.jpg" alt="Tableless Guy">HTML

<img src="diego.jpg" alt="Tableless Guy">

<script> document.querySelector('img').src = 'diego.jpg' </script>

HTML

Nesta trincheira, Custom Elements é infinitamente melhor que tudo que temos até então

• Elemento criado createdCallback

• Adicionado ao DOM attachedCallback

• Removido do DOM detachedCallback

• Alterações nos atributos attributeChangedCallback

var newsItemProto = Object.create(HTMLElement.prototype)

newsItemProto.attributeChangedCallback = function (attr, oldValue, value) {}

var newsItem = document.registerElement('news-item', { prototype: newsItemProto })

JAVASCRIPT

Podemos assistir mudanças nos atributos de um elemento

Novos elementos são úteis apenas para gerenciar comportamento

HTML<news-item class="board-item" itemscope itemtype="http://schema.org/NewsArticle"> <div class="person" itemprop="author"> Jim Kennedy</div> <time itemprop="datePublished"> April 23</time> <div class="board-item__title" itemprop="name"><!-- --></div> <div class="board-stats"> <div class="board-stats__reads">26</div> <div class="board-stats__shares">312</div> <div class="board-stats__likes">216</div> </div> </news-item>

HTML<article is="news-item" class="board-item" itemscope itemtype="http://schema.org/NewsArticle"> <div class="person" itemprop="author"> Jim Kennedy</div> <time itemprop="datePublished"> April 23</time> <div class="board-item__title" itemprop="name"><!-- --></div> <div class="board-stats"> <div class="board-stats__reads">26</div> <div class="board-stats__shares">312</div> <div class="board-stats__likes">216</div> </div> </article>

document.registerElement('news-item', { prototype: newsItemProto, extends: 'article' })

JAVASCRIPT

Polymer

Debunked!

Polymer é um projeto que utiliza Web Components

O Polymer não poderá ser retirado do projeto quando os navegadores derem suporte a Web Components

Polymer é uma das alternativas para utilizar Web Components hoje mesmo

http://jonrimmer.github.io/are-we-componentized-yet

The good parts

Why Web Components Aren’t Ready for Production… Yet TJ VanToll

http://developer.telerik.com/featured/web-components-arent-ready-production-yet

• Independentes • Intercambiáveis • Reusáveis

modularidade e coesão

• Sistema para escrita de CSS • Modularização no JavaScript • Ferramenta para build de código • Custom Elements e Shadow DOM

Seja cético e questione o valor de cada nova tecnologia (mas não critique por pura preguiça)

Jean Carlonão trabalha no Google

Cheers@jcemer