Unidade independente que pode ser composta com outros componentes para formar um sistema mais complexo
Introducing the new UX and UI for Google News platform George Kvasnikov · 10/2014
http://googlenews.gkvasnikov.com
Coleção de padrões que permitem encapsular, compor e reusar código na plataforma web
Web ComponentsDefinição
Web Components are here to fundamentally change the way we think, build, and consume our web apps.
Eric Bidelman Google
<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
<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
<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
<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
/** @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
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
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
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
<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
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
<head> <title>My funny document</title> <link rel="import" href="dangerous.html"> </head>
<script> document.getElementById = function () {} </script>
dangerous.html
HTML
<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
<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
.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
<gmaps-address locale="Porto Alegre"> <div data-address-modal> Auditório do SENAC <!-- --> </div> </gmaps-address>
♥HTML
document.registerElement('twitter-timeline')
Elementos são registrados diretamente através de JavaScript
<script src="http://twitter.com/timeline.js"> </script>
timeline.js
HTML
<template> <!-- --> </template>
<script> document.registerElement('twitter-timeline') </script>
<link rel="import" href="http://twitter.com/timeline.html">
timeline.html
HTML
<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
if ($('body').is('.page-product')) { $('[data-draggable]').draggable() $('[data-comments]').comments() }
if ($('body').is('.page-checkout')) { $('[data-draggable]').draggable() $('[data-datepicker]').datepicker() }
JAVASCRIPT
<img src="diego.jpg" alt="Tableless Guy">
<script> document.querySelector('img').src = 'diego.jpg' </script>
HTML
var newsItemProto = Object.create(HTMLElement.prototype)
newsItemProto.attributeChangedCallback = function (attr, oldValue, value) {}
var newsItem = document.registerElement('news-item', { prototype: newsItemProto })
JAVASCRIPT
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>
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
• 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
Top Related