Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Jean Carlo Emer

November 08, 2014
Tweet

More Decks by Jean Carlo Emer

Other Decks in Technology

Transcript

  1. Introducing the new UX and UI for Google News platform

    George Kvasnikov · 10/2014 http://googlenews.gkvasnikov.com
  2. Coleção de padrões que permitem encapsular, compor e reusar código

    na plataforma web Web Components Definição
  3. Web Components are here to fundamentally change the way we

    think, build, and consume our web apps. Eric Bidelman
 Google
  4. <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
  5. Elementos HTML5 podem ser estilizados no Internet Explorer 6 porque

    nele é possível definir novos elementos https://github.com/afarkas/html5shiv
  6. 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
  7. <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
  8. Utilizar classes e microformats é mais adequado sob a ótica

    de estilização e semântica que definir novos elementos
  9. <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
  10. )

  11. <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
  12. /** @jsx React.DOM */ var Avatar = React.createClass({ render: function()

    { return <div> <img src="image.png"/> <div>{ this.props.name }</div> </div> } }) JAVASCRIPT / JSX
  13. 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
  14. • 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
  15. 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
  16. 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
  17. 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
  18. <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
  19. <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
  20. 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
  21. <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
  22. <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
  23. <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
  24. var newsItemProto = Object.create(HTMLElement.prototype) newsItemProto.attributeChangedCallback = 
 function (attr, oldValue,

    value) {} var newsItem = document.registerElement('news-item', { prototype: newsItemProto }) JAVASCRIPT
  25. 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>
  26. 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>
  27. O Polymer não poderá ser retirado do projeto quando os

    navegadores derem suporte a Web Components
  28. Polymer é uma das alternativas para utilizar Web Components hoje

    mesmo http://jonrimmer.github.io/are-we- componentized-yet The good parts
  29. Why Web Components Aren’t Ready for Production… Yet TJ VanToll

    http://developer.telerik.com/featured/web-components- arent-ready-production-yet
  30. • Sistema para escrita de CSS • Modularização no JavaScript

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