Um futuro chamado Web Components

BrazilJS 2013

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