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 full-size slide

  2. @liferay @alloyui

    View full-size slide

  3. jqueryboilerplate.com

    View full-size slide

  4. browserdiet.com

    View full-size slide

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

    View full-size slide

  6. document.querySelector
    vs

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. getbootstrap.com

    View full-size slide

  10. facebook.github.io/react

    View full-size slide

  11. como usar um
    “componente” hoje?

    View full-size slide

  12. 1. Nunca crie! Use um plugin jQuery

    View full-size slide

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

    View full-size slide

  14. 3. Torça pra que funcione

    View full-size slide

  15. Web Components

    View full-size slide


  16. braziljs.github.io/braziljs-element

    View full-size slide


  17. customelements.github.io/camera-element

    View full-size slide

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

    View full-size slide

  19. Custom
    Elements

    View full-size slide

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


    View full-size slide


  21. // implementação


    View full-size slide


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

    View full-size slide

  23. lifecycle
    •createdCallback
    •enteredDocumentCallback
    •leftDocumentCallback
    •attributeChangedCallback

    View full-size slide

  24. polymer-project.org

    View full-size slide


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

    como usar?

    View full-size slide

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

    View full-size slide

  27. server-side
    mustache
    handlebars
    liquid
    jinja
    velocity
    savant

    View full-size slide

  28. client-side
    mustache
    handlebars
    eco
    ejs jade
    hogan

    View full-size slide

  29. gambiarra #1



    View full-size slide

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

    View full-size slide

  31. // 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  34. como usar?
    Documento

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

    View full-size slide

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

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

    View full-size slide

  36. como ativar?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. @eduardolundgren

    View full-size slide

  40. @bernarddeluna

    View full-size slide

  41. customelements.io

    View full-size slide


  42. customelements.github.io/twitter-element

    View full-size slide


  43. customelements.github.io/gmaps-element

    View full-size slide


  44. customelements.github.io/camera-element

    View full-size slide


  45. eduardolundgren.github.io/tracking-element

    View full-size slide

  46. encapsulamento e
    reaproveitamento de
    código de verdade

    View full-size slide

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

    View full-size slide

  48. e..... camisetas!

    View full-size slide