Um futuro chamado Web Components

Transcript

1. 1.

   <web components> um futuro chamado @zenorocha

2. 2.

   @liferay @alloyui

3. 3.

   None
4. 4.

   None
5. 5.

   None
6. 6.

   jqueryboilerplate.com

7. 7.

   browserdiet.com

8. 8.

   None
9. 9.

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

   morrer
10. 10.

    vs <canvas>

11. 11.

    document.querySelector vs

12. 12.

    vs <input type=”date”>

13. 13.

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

14. 14.

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

15. 15.

    None
16. 16.

    getbootstrap.com

17. 17.

    None
18. 18.

    facebook.github.io/react

19. 19.

    None
20. 20.

    topcoat.io

21. 21.

    None
22. 22.

    alloyui.com

23. 23.

    None
24. 24.

    purecss.io

25. 25.

    None
26. 26.

    None
27. 27.

    None
28. 28.

    como usar um “componente” hoje?

29. 29.

    1. Nunca crie! Use um plugin jQuery

30. 30.

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

31. 31.

    3. Torça pra que funcione

32. 32.

    Web Components

33. 33.

    <braziljs> braziljs.github.io/braziljs-element

34. 34.

    <video is=”camera”> customelements.github.io/camera-element

35. 35.

    Web Components Custom Elements Import Templates Shadow DOM Decorators*

36. 36.

    Custom Elements

37. 37.

    <element name="braziljs" constructor="BrazilJS" attributes="onde"> // implementação </element> <element>

38. 38.

    <element name="camera" extends="video"> // implementação </element> <element>

39. 39.

    zno.io/QxNJ

40. 40.

    <brazil-js></brazil-js> usando JS var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function()

    { this.textContent = 'BrazilJS!'; }; document.register('brazil-js', { prototype: proto });
41. 41.

    lifecycle •createdCallback •enteredDocumentCallback •leftDocumentCallback •attributeChangedCallback

42. 42.

    x-tags.org

43. 43.

    polymer-project.org

44. 44.

    <polymer-element name="braziljs" attributes="onde"> <script> Polymer('braziljs', { onde: 'Porto Alegre', created:

    function() { // faça algo } }); </script> </polymer-element> como usar?
45. 45.

    zno.io/QxlZ

46. 46.

    Templates

47. 47.

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

48. 48.

    server-side mustache handlebars liquid jinja velocity savant

49. 49.

    client-side mustache handlebars eco ejs jade hogan

50. 50.

    gambiarra #1 <div id="template" style="display: none"> <img src="logo.png" class="logo.png"> </div>

51. 51.

    <script id="template" type="text/x-handlebars-template"> <img src="logo.png"> </script> gambiarra #2

52. 52.

    <template>

53. 53.

    <template id="meuTemplate"> <img src=""> </template> como criar?

54. 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?
55. 55.

    Shadow DOM

56. 56.

    Shadow DOM esconde os detalhes de implementação

57. 57.

    mas e o <iframe>?

58. 58.

    do que é feito um <video>? ou um password, textarea,

    date?
59. 59.

    como usar? <h1>Documento</h1> <div id=”cuia”></div> var cuia = document.querySelector('#cuia') .createShadowRoot();

    cuia.innerHTML = '<h1>Mate</h1>';
60. 60.

    estilo, marcação e script encapsulados <h1>Documento</h1> <div id=”cuia”></div> var cuia

    = document.querySelector('#cuia') .createShadowRoot(); cuia.innerHTML = '<h1>Mate</h1>' + '<style>h1 { color: #f00; }</style>';
61. 61.

    como ativar?

62. 62.

    Import

63. 63.

    None
64. 64.

    None
65. 65.

    None
66. 66.

    None
67. 67.

    como usar? <link rel="import" href="braziljs.html">

68. 68.

    None
69. 69.

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

70. 70.

    Flags

71. 71.

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

72. 72.

    @eduardolundgren

73. 73.

    @bernarddeluna

74. 74.

    customelements.io

75. 75.

    <twitter> customelements.github.io/twitter-element

76. 76.

    <gmaps> customelements.github.io/gmaps-element

77. 77.

    <video is=”camera”> customelements.github.io/camera-element

78. 78.

    <video is=”tracking”> eduardolundgren.github.io/tracking-element

79. 79.

    ou seja...

80. 80.

    encapsulamento e reaproveitamento de código de verdade

81. 81.

    A melhor forma de prever o futuro é inventando ele

82. 82.

    e..... camisetas!

83. 83.

    None