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.

Transcript

1. Componentes 

   para a web
   uma visão sobre tudo aquilo

   que realmente importa
   

   View Slide

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

   View Slide

3. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. View Slide

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

   View Slide

9. HTML
   JavaScript
   CSS
   

   View Slide

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

    View Slide

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

    View Slide

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

    Google
    

    View Slide

13. Web Components
    Debunked!
    

    View Slide

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

    View Slide

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

    View Slide

16. 
    

    Jim Kennedy
    April 23
    What is the core of 

    Palestinian conflict?
    
    26
    312
    216
    
    
    HTML
    

    View Slide

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

    View Slide

18. Semântica
    1.
    

    View Slide

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

    View Slide

20. View Slide

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

    View Slide

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
    

    View Slide

23. 
    
    
    É muito mais flexível e prático utilizar
    classes com nomes relacionados a
    aparência para estilizar
    HTML
    

    View Slide

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

    View Slide

25. itemtype="http://schema.org/NewsArticle">
    

    Jim Kennedy
    

    April 23
    itemprop="name">
    
    26
    312
    216
    
    
    HTML
    

    View Slide

26. Função dos 

    elementos
    2.
    

    View Slide

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

    View Slide

28. 
    
    
    HTML
    

    View Slide

29. 
    
    
    
    Option 1
    Option 2
    
    
    HTML
    

    View Slide

30. MacOS iPad iPhone
    

    View Slide

31. View Slide

32. View Slide

33. Vejamos um exemplo de
    elemento do projeto
    Polymer
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

39. O panorama dos 

    templates na web
    (
    

    View Slide

40. 
    
    {{name}}
    
    Conteúdo será processado e a imagem
    será requisitada para o servidor
    HTML
    

    View Slide

41. <br/><img src="image.png"><br/><div>{{name}}</div><br/>
    Conteúdo é uma string que
    pode expor a aplicação a
    Cross-site scripting
    HTML
    

    View Slide

42. var userData = ''<br/>el.innerHTML = t.replace('{{name}}', userData)<br/>Assim é que sofremos um XSS attack<br/>JAVASCRIPT<br/>

    View Slide

43. )
    

    View Slide

44. 
    
    {{name}}
    
    var t = document.querySelector('template')
    t.content.querySelector('[data-name]')
    .textContent = userData
    document.body.appendChild(
    document.importNode(t.content, true));
    HTML
    JAVASCRIPT
    

    View Slide

45. Templates no 

    HTML
    3.
    

    View Slide

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

    View Slide

47. /** @jsx React.DOM */
    var Avatar = React.createClass({
    render: function() {
    return
    
    { this.props.name }
    
    }
    })
    JAVASCRIPT / JSX
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

51. I’m definitely not a fan of making your
    widget out of a . It is reliable but it’s
    hostile to accessibility, indexing, composition,
    and resolution independence
    Dominic Cooney

    Google
    

    View Slide

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

    View Slide

53. Shadow DOM de
    elementos nativos
    4.
    

    View Slide

54. Shadow Dom
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

60. Encapsulamento
    de CSS
    5.
    

    View Slide

61. 
    Not blue content
    <br/>var root = document.querySelector('.widget')<br/>.createShadowRoot()<br/>root.innerHTML = '<style>' +<br/>'p { color: blue }</style>'<br/>
    As regras definidas no Shadow DOM
    não surtem efeito na página
    HTML
    

    View Slide

62. p { background: red }
    
    <br/>var root = document.querySelector('.widget')<br/>.createShadowRoot()<br/>root.innerHTML = '<p>Content</p>'<br/>
    E as regras de CSS definidas na página
    não se aplicam ao Shadow DOM
    HTML
    

    View Slide

63. O que faz todo sentido
    quando temos um widget
    

    View Slide

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

    View Slide

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
    

    View Slide

66. 
    <br/>p { color: red }<br/>
    Red content
    
    Scoped CSS poderia ser um recurso
    tão interessante (se não só o
    Firefox tivesse suporte)
    HTML
    

    View Slide

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

    View Slide

68. Requests
    6.
    

    View Slide

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

    View Slide

70. Escopo e
    dependências
    7.
    

    View Slide

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

    View Slide

72. 
    My funny document
    
    
    <br/>document.getElementById = function () {}<br/>
    dangerous.html
    HTML
    

    View Slide

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

    View Slide

74. 
    
<br/>$.fn.myPlugin = function () {}<br/>
    
    
    overwrite.html
    HTML
    

    View Slide

75. Web Components
    The good parts
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

79. Encapsulamento 

    com interfaces
    1.
    

    View Slide

80. 
    Personal Content
    
    <br/>document<br/>.querySelector('[data-widget]')<br/>.createShadowRoot()<br/>.innerHTML =<br/>'<div>My widget</div>' +<br/>'<content select="[data-page-content]">' +<br/>'</content>'<br/>
    HTML
    

    View Slide

81. Personal Content
    My widget
    

    View Slide

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
    

    View Slide

83. Login
    

    View Slide

84. Shadow DOM permite definir
    widgets com interfaces
    

    View Slide

85. 
    ♥
    HTML
    @jcemer
    

    View Slide

86. 
    
    Auditório do SENAC
    
    
    ♥
    HTML
    

    View Slide

87. Componentes 

    e dependências
    2.
    

    View Slide

88. document.registerElement('twitter-timeline')
    Elementos são registrados
    diretamente através de
    JavaScript
    <br/>
    timeline.js
    HTML
    

    View Slide

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

    View Slide

90. 
    
    
    <br/>document.registerElement('twitter-timeline')<br/>
    href="http://twitter.com/timeline.html">
    timeline.html
    HTML
    

    View Slide

91. Imports permitem melhor
    administrar dependências
    

    View Slide

92. 
    
    
    timeline.html
    HTML
    Documentos indicados no import
    são incluídos uma única vez
    

    View Slide

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

    View Slide

94. Imports e templates precisam
    evoluir para solucionar mais
    problemas
    

    View Slide

95. Atribuindo
    comportamento
    3.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

100. 
     HTML
     

     View Slide

101. 
     <br/>document.querySelector('img').src = 'diego.jpg'<br/>
     HTML
     

     View Slide

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

     View Slide

103. • Elemento criado 

     createdCallback
     

     View Slide

104. • Adicionado ao DOM 

     attachedCallback
     

     View Slide

105. • Removido do DOM 

     detachedCallback
     

     View Slide

106. • Alterações nos atributos 

     attributeChangedCallback
     

     View Slide

107. var newsItemProto =
     Object.create(HTMLElement.prototype)
     newsItemProto.attributeChangedCallback = 

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

     View Slide

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

     View Slide

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

     View Slide

110. HTML
     itemtype="http://schema.org/NewsArticle">
     

     Jim Kennedy
     

     April 23
     itemprop="name">
     
     26
     312
     216
     
     
     

     View Slide

111. HTML
     class="board-item" itemscope 

     itemtype="http://schema.org/NewsArticle">
     

     Jim Kennedy
     

     April 23
     itemprop="name">
     
     26
     312
     216
     
     
     

     View Slide

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

     View Slide

113. Polymer
     Debunked!
     

     View Slide

114. Polymer é um projeto que
     utiliza Web Components
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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
     

     View Slide

121. Cheers
     @jcemer
     

     View Slide