Componentes
 para a web

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.

C5df370a883b65279af5a7ca94a5eed7?s=128

Jean Carlo Emer

November 08, 2014
Tweet

Transcript

  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

  3. None
  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

  7. None
  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
  20. None
  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

  31. None
  32. None
  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