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

Um futuro chamado Web Components

Um futuro chamado Web Components

BrazilJS 2013

Zeno Rocha

August 22, 2013
Tweet

More Decks by Zeno Rocha

Other Decks in Programming

Transcript

  1. components>
    um futuro
    chamado
    @zenorocha

    View Slide

  2. @liferay @alloyui

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. jqueryboilerplate.com

    View Slide

  7. browserdiet.com

    View Slide

  8. View Slide

  9. os projetos
    mais populares
    voltados para
    client-side
    estão fadados
    a morrer

    View Slide

  10. vs

    View Slide

  11. document.querySelector
    vs

    View Slide

  12. vs

    View Slide

  13. então quer dizer
    que tudo vai virar
    “nativo” um dia?

    View Slide

  14. o que as
    principais
    empresas da
    web estão
    trabalhando hoje?

    View Slide

  15. View Slide

  16. getbootstrap.com

    View Slide

  17. View Slide

  18. facebook.github.io/react

    View Slide

  19. View Slide

  20. topcoat.io

    View Slide

  21. View Slide

  22. alloyui.com

    View Slide

  23. View Slide

  24. purecss.io

    View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. como usar um
    “componente” hoje?

    View Slide

  29. 1. Nunca crie! Use um plugin jQuery

    View Slide

  30. 2. Copie e cole o código de alguém

    View Slide

  31. 3. Torça pra que funcione

    View Slide

  32. Web Components

    View Slide


  33. braziljs.github.io/braziljs-element

    View Slide


  34. customelements.github.io/camera-element

    View Slide

  35. Web Components
    Custom
    Elements
    Import
    Templates
    Shadow DOM
    Decorators*

    View Slide

  36. Custom
    Elements

    View Slide

  37. attributes="onde">
    // implementação


    View Slide


  38. // implementação


    View Slide

  39. zno.io/QxNJ

    View Slide


  40. usando JS
    var proto = Object.create(HTMLElement.prototype);
    proto.createdCallback = function() {
    this.textContent = 'BrazilJS!';
    };
    document.register('brazil-js', {
    prototype: proto
    });

    View Slide

  41. lifecycle
    •createdCallback
    •enteredDocumentCallback
    •leftDocumentCallback
    •attributeChangedCallback

    View Slide

  42. x-tags.org

    View Slide

  43. polymer-project.org

    View Slide


  44. <br/>Polymer('braziljs', {<br/>onde: 'Porto Alegre',<br/>created: function() {<br/>// faça algo<br/>}<br/>});<br/>

    como usar?

    View Slide

  45. zno.io/QxlZ

    View Slide

  46. Templates

    View Slide

  47. Templates
    são blocos
    reutilizáveis
    de código

    View Slide

  48. server-side
    mustache
    handlebars
    liquid
    jinja
    velocity
    savant

    View Slide

  49. client-side
    mustache
    handlebars
    eco
    ejs jade
    hogan

    View Slide

  50. gambiarra #1



    View Slide

  51. <br/><img src="logo.png"><br/>
    gambiarra #2

    View Slide


  52. View Slide




  53. como criar?

    View Slide

  54. // 1. Acessa o conteúdo do template
    var t = document.querySelector('#meuTemplate').content;
    // 2. Manipula elemento interno do template
    t.querySelector('img').src = 'logo.png';
    // 3. Clona e insere no DOM
    document.body.appendChild(t.cloneNode(true));
    como usar?

    View Slide

  55. Shadow
    DOM

    View Slide

  56. Shadow DOM
    esconde os
    detalhes de
    implementação

    View Slide

  57. mas e o
    ?

    View Slide

  58. do que é feito
    um ?
    ou um password, textarea, date?

    View Slide

  59. como usar?
    Documento

    var cuia = document.querySelector('#cuia')
    .createShadowRoot();
    cuia.innerHTML = 'Mate';

    View Slide

  60. estilo, marcação e
    script encapsulados
    Documento

    var cuia = document.querySelector('#cuia')
    .createShadowRoot();
    cuia.innerHTML = 'Mate' +
    'h1 { color: #f00; }';

    View Slide

  61. como ativar?

    View Slide

  62. Import

    View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. View Slide

  67. como usar?

    View Slide

  68. View Slide

  69. jonrimmer.github.io/are-we-componentized-yet

    View Slide

  70. Flags

    View Slide

  71. quero usar hoje,
    onde eu encontro?
    NPM? Bower?

    View Slide

  72. @eduardolundgren

    View Slide

  73. @bernarddeluna

    View Slide

  74. customelements.io

    View Slide


  75. customelements.github.io/twitter-element

    View Slide


  76. customelements.github.io/gmaps-element

    View Slide


  77. customelements.github.io/camera-element

    View Slide


  78. eduardolundgren.github.io/tracking-element

    View Slide

  79. ou seja...

    View Slide

  80. encapsulamento e
    reaproveitamento de
    código de verdade

    View Slide

  81. A melhor forma de
    prever o futuro é
    inventando ele

    View Slide

  82. e..... camisetas!

    View Slide

  83. View Slide