Componentes para a web

Uma visão crítica sobre o hype da vez. Esta palestra tem como norte tirar o ruído e fundamentar (inclusive com exemplos) o
 que realmente importa neste papo de componentes.

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. Elemento de software que encapsula uma série de funcionalidades relacionadas Componente Definição
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. Coleção de padrões que permitem encapsular, compor e reusar código na plataforma web Web Components Definição
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. Permite estender e definir novos elementos de HTML Custom Elements
16. <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
17. Elementos HTML5 podem ser estilizados no Internet Explorer 6 porque nele é possível definir novos elementos https://github.com/afarkas/html5shiv
18. Semântica 1.
19. Acabamos de criar uma série de elementos sem valor semântico fora do escopo do nosso projeto
21. <div itemscope 
 itemtype="http://schema.org/NewsArticle"> <!-- --> </div> Microformats acrescentam significado ao conteúdo HTML
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. <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
24. Utilizar classes e microformats é mais adequado sob a ótica de estilização e semântica que definir novos elementos
25. <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
26. Função dos 
 elementos 2.
27. Alguns elementos possuem funções que ultrapassam a de atribuir semântica ao conteúdo
28. <link href="style.css" rel="stylesheet"> <script src="application.js"></script> <iframe src="content.html"></iframe> HTML
29. <form> <input type="text"> <input type="password"> <select> <option>Option 1</option> <option>Option 2</option> </select> </form> HTML
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. Repositório para fragmentos de HTML a serem utilizados por código JavaScript Template
39. O panorama dos 
 templates na web (
40. <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
41. <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
42. var userData = '<script src="authstealer.js">' el.innerHTML = t.replace('{{name}}', userData) Assim é que sofremos um XSS attack JAVASCRIPT
43. )
44. <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
45. Templates no 
 HTML 3.
46. Não há benefício em ter no documento templates acessíveis apenas pelo JavaScript
47. /** @jsx React.DOM */ var Avatar = React.createClass({ render: function() { return <div> <img src="image.png"/> <div>{ this.props.name }</div> </div> } }) JAVASCRIPT / JSX
48. 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
49. • 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
50. Permite isolar código HTML o mantendo livre de interferências da página Shadow DOM
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. Pequena aplicação de terceiros que pode ser instalada em suas páginas Widgets Definição
53. Shadow DOM de elementos nativos 4.
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. video /deep/ input[type="range"] { display: none; } CSS
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 de CSS 5.
61. <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
62. <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
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. <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
67. Permite carregar documentos HTML de maneira assíncrona HTML Imports
68. Requests 6.
69. Permite isolar as definições de componentes e templates as custas de requests
70. Escopo e dependências 7.
71. Código JavaScript é executado no mesmo escopo de window
72. <head> <title>My funny document</title> <link rel="import" href="dangerous.html"> </head> <script> document.getElementById = function () {} </script> dangerous.html HTML
73. Dependendo da ordem das importações, dependências podem ser sobrescritas
74. <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
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 
 com interfaces 1.
80. <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
81. Personal Content My widget
82. .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
83. Login
84. Shadow DOM permite definir widgets com interfaces
85. <twitter-timeline user="jcemer"> ♥ HTML @jcemer
86. <gmaps-address locale="Porto Alegre"> <div data-address-modal> Auditório do SENAC <!-- --> </div> </gmaps-address> ♥ HTML
87. Componentes 
 e dependências 2.
88. document.registerElement('twitter-timeline') Elementos são registrados diretamente através de JavaScript <script src="http://twitter.com/timeline.js"> </script> timeline.js HTML
89. Nestes casos, um encapsulamento mais flexível pode ser interessante
90. <template> <!-- --> </template> <script> document.registerElement('twitter-timeline') </script> <link rel="import" href="http://twitter.com/timeline.html"> timeline.html HTML
91. Imports permitem melhor administrar dependências
92. <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
93. <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
94. Imports e templates precisam evoluir para solucionar mais problemas
95. Atribuindo comportamento 3.
96. Componentes não devem ser instanciados considerando a página em que estão
97. if ($('body').is('.page-product')) { $('[data-draggable]').draggable() $('[data-comments]').comments() } if ($('body').is('.page-checkout')) { $('[data-draggable]').draggable() $('[data-datepicker]').datepicker() } JAVASCRIPT
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. <img src="jcemer.jpg" alt="Tableless Guy"> HTML
101. <img src="diego.jpg" alt="Tableless Guy"> <script> document.querySelector('img').src = 'diego.jpg' </script> HTML
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. var newsItemProto = Object.create(HTMLElement.prototype) newsItemProto.attributeChangedCallback = 
 function (attr, oldValue, value) {} var newsItem = document.registerElement('news-item', { prototype: newsItemProto }) JAVASCRIPT
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. document.registerElement('news-item', { prototype: newsItemProto, extends: 'article' }) JAVASCRIPT
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. Polymer é uma das alternativas para utilizar Web Components hoje mesmo http://jonrimmer.github.io/are-we- componentized-yet The good parts
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