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. 3.
  2. 7.
  3. 8.

    Introducing the new UX and UI for Google News platform

    George Kvasnikov · 10/2014 http://googlenews.gkvasnikov.com
  4. 10.

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

    na plataforma web Web Components Definição
  5. 12.

    Web Components are here to fundamentally change the way we

    think, build, and consume our web apps. Eric Bidelman
 Google
  6. 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
  7. 17.

    Elementos HTML5 podem ser estilizados no Internet Explorer 6 porque

    nele é possível definir novos elementos https://github.com/afarkas/html5shiv
  8. 20.
  9. 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
  10. 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
  11. 24.

    Utilizar classes e microformats é mais adequado sob a ótica

    de estilização e semântica que definir novos elementos
  12. 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
  13. 31.
  14. 32.
  15. 43.

    )

  16. 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
  17. 47.

    /** @jsx React.DOM */ var Avatar = React.createClass({ render: function()

    { return <div> <img src="image.png"/> <div>{ this.props.name }</div> </div> } }) JAVASCRIPT / JSX
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 64.
  26. 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
  27. 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
  28. 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
  29. 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
  30. 83.
  31. 107.

    var newsItemProto = Object.create(HTMLElement.prototype) newsItemProto.attributeChangedCallback = 
 function (attr, oldValue,

    value) {} var newsItem = document.registerElement('news-item', { prototype: newsItemProto }) JAVASCRIPT
  32. 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>
  33. 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>
  34. 115.

    O Polymer não poderá ser retirado do projeto quando os

    navegadores derem suporte a Web Components
  35. 116.

    Polymer é uma das alternativas para utilizar Web Components hoje

    mesmo http://jonrimmer.github.io/are-we- componentized-yet The good parts
  36. 117.

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

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

    • Sistema para escrita de CSS • Modularização no JavaScript

    • Ferramenta para build de código • Custom Elements e Shadow DOM
  38. 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