O documento discute componentes para a web, incluindo a definição de web components como coleções de padrões que permitem encapsular e reutilizar código. Ele aborda elementos HTML personalizados, templates, shadow DOM e a importância da modularidade e reusabilidade no desenvolvimento front-end. Além disso, apresenta desafios e considerações sobre a integração de novas tecnologias, como Polymer, e a necessidade de um olhar crítico sobre inovações tecnológicas.

1. Componentes
para a web
uma visão sobre tudo aquilo
que realmente importa

2. jcemer.com
github.com/jcemer
twitter.com/jcemer
speakerdeck.com/jcemer

4. Definição
Componente
Elemento de software que encapsula
uma série de funcionalidades
relacionadas

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

6. • Independentes
• Intercambiáveis
• Reusáveis
modularidade
e coesão

8. Introducing the new UX and UI for
Google News platform
George Kvasnikov · 10/2014
http://googlenews.gkvasnikov.com

9. HTML
JavaScript
CSS

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

11. • Custom Elements
• Templates
• Shadow DOM
• HTML Imports

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

13. Web Components
Debunked!

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

15. Custom Elements
Permite estender e definir novos
elementos de HTML

16. HTML
<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>

17. Elementos HTML5 podem ser
estilizados no Internet Explorer 6
porque nele é possível definir
novos elementos
https://github.com/afarkas/html5shiv

18. 1. Semântica

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

21. HTML
<div itemscope
itemtype="http://schema.org/NewsArticle">
<!-- -->
</div>
Microformats acrescentam
significado ao conteúdo

22. 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

23. HTML
<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

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

25. HTML
<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>

26. Função dos
2. elementos

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

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

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

30. MacOS iPad iPhone

33. Vejamos um exemplo de
elemento do projeto
Polymer

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

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

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

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

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

39. O panorama dos
templates na web (

40. 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

41. 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

42. JAVASCRIPT
var userData = '<script src="authstealer.js">'
el.innerHTML = t.replace('{{name}}', userData)
Assim é que sofremos um XSS attack

43. )

44. HTML
<template>
<img src="image.png">
<div data-name>{{name}}</div>
</template>
JAVASCRIPT
var t = document.querySelector('template')
t.content.querySelector('[data-name]')
.textContent = userData
document.body.appendChild(
document.importNode(t.content, true));

45. Templates no
3. HTML

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

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

48. JAVASCRIPT
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)
)
}
})

49. JSX JavaScript XML syntax
• 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

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

51. 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 Cooney
Google

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

53. Shadow DOM de
4. elementos nativos

54. Shadow Dom

55. 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

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

57. 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

58. http://videos.clicrbs.com.br

59. Widgets não devem ser
manipulados de maneiras
escusas

60. Encapsulamento
5. de CSS

61. HTML
<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

62. 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

63. O que faz todo sentido
quando temos um widget

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

65. 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

66. HTML
<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)

67. HTML Imports
Permite carregar documentos
HTML de maneira assíncrona

68. 6. Requests

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

70. Escopo e
7. dependências

71. Código JavaScript é executado
no mesmo escopo de window

72. HTML
<head>
<title>My funny document</title>
<link rel="import" href="dangerous.html">
</head>
dangerous.html
<script>
document.getElementById = function () {}
</script>

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

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

75. Web Components
The good parts

76. Web Components
The good parts
Aquilo que humildemente acho legal

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

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

79. Encapsulamento
1. com interfaces

80. 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>

81. My widget
Personal Content

82. HTML
.sign-up::part(login-label) {
color: orange;
}
Shadow DOM permite definir
elementos parts passíveis de
estilização
http://robdodson.me/blog/2013/08/29/shadow-dom-
styles-cont-dot

83. Login

84. Shadow DOM permite definir
widgets com interfaces

85. HTML
♥ <twitter-timeline user="jcemer">
@jcemer

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

87. Componentes
2. e dependências

88. HTML
<script src="http://twitter.com/timeline.js">
</script>
timeline.js
document.registerElement('twitter-timeline')
Elementos são registrados
diretamente através de
JavaScript

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

90. HTML
<link rel="import"
href="http://twitter.com/timeline.html">
timeline.html
<template>
<!-- -->
</template>
<script>
document.registerElement('twitter-timeline')
</script>

91. Imports permitem melhor
administrar dependências

92. HTML
<link rel="import" href="jquery.html">
<link rel="import" href="timeline.html">
timeline.html
<link rel="import" href="jquery.html">
Documentos indicados no import
são incluídos uma única vez

93. HTML
<link rel="import" href="jquery.html">
<link rel="import"
src="http://twitter.com/timeline.html">
timeline.html
<link rel="import" href="jquery.html">
Não resolve o problema em
diferentes domínios

94. Imports e templates precisam
evoluir para solucionar mais
problemas

95. Atribuindo
3. comportamento

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

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

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

99. Custom Elements permitem assistir
ao ciclo de vida de um elemento

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

101. HTML
<img src="diego.jpg" alt="Tableless Guy">
<script>
document.querySelector('img').src = 'diego.jpg'
</script>

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

103. • Elemento criado
createdCallback

104. • Adicionado ao DOM
attachedCallback

105. • Removido do DOM
detachedCallback

106. • Alterações nos atributos
attributeChangedCallback

107. JAVASCRIPT
var newsItemProto =
Object.create(HTMLElement.prototype)
newsItemProto.attributeChangedCallback =
function (attr, oldValue, value) {}
var newsItem =
document.registerElement('news-item', {
prototype: newsItemProto
})

108. Podemos assistir mudanças
nos atributos de um elemento

109. Novos elementos são úteis apenas
para gerenciar comportamento

110. 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>

111. 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>

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

113. Polymer
Debunked!

114. Polymer é um projeto que
utiliza Web Components

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

116. The good parts
Polymer é uma das alternativas para
utilizar Web Components hoje mesmo
http://jonrimmer.github.io/are-we-componentized-
yet

117. Why Web Components Aren’t Ready for
Production… Yet
TJ VanToll
http://developer.telerik.com/featured/web-components-arent-
ready-production-yet

118. • Independentes
• Intercambiáveis
• Reusáveis
modularidade
e coesão

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

120. Seja cético e questione o valor de
cada nova tecnologia (mas não critique
por pura preguiça)
Jean Carlo
não trabalha no Google

121. Cheers @jcemer