Apresentada no GDG Recife - itshackademic Desbravamos Web Components e Polymer, mostrando as especificação, com muito live code e toda a mágica de Web Components.

1. Desbravando Web
Components
@mteusor)z

2. mateusor3z
@mteusor3z

5. Como "criar" um componente
hoje

6. Google! plugin jQuery

7. Copie e cole o código do plugin

8. Funcionou? Beleza

9. Web Components

10. <gdg-­‐recife>
h"ps://github.com/mateusor3z/gdg-­‐light

12. googlewebcomponents.github.io

13. Live demo

15. <google-­‐map>
h"ps://github.com/GoogleWebComponents/google-­‐map

16. <google-­‐chart>
h"ps://github.com/GoogleWebComponents/google-­‐chart

18. Shadow DOM
HTML Imports
Web Components
Template
Custom Elements
Decorators*

19. Custom Elements
Define novos elementos HTML/DOM

20. Criar Novos Elementos

21. <script>
(function() {
// Creates an object based in the HTML Element prototype
var element = Object.create(HTMLElement.prototype);
// Fires when an instance of the element is created
element.createdCallback = function() {};
// Fires when an instance was inserted into the document
element.attachedCallback = function() {};
// Fires when an instance was removed from the document
element.detachedCallback = function() {};
// Fires when an attribute was added, removed, or updated
element.attributeChangedCallback = function(attr, oldVal,
newVal) {};
document.registerElement('menu-tabs', {
prototype: element
});
}());
</script>

22. <!-- Define your custom element -->
<polymer-element name="menu-tabs">
<script>
Polymer('menu-tabs', {
// Fires when an instance of the element is created
created: function() {},
// Fires when the "<polymer-element>" has been fully prepared
ready: function() {},
// Fires when the element was inserted into the document
attached: function() {},
// Fires when the element was removed from the document
detached: function() {},
// Fires when an attribute was added, removed, or updated
attributeChanged: function(attr, oldVal, newVal) {}
});
</script>
</polymer-element>

23. Usando o elemento
<menu-tabs></menu-tabs>

24. Estendendo elementos existes

25. <!-- Define your custom element -->
<polymer-element name="menu-tabs" extends="nav">
<script>
Polymer('menu-tabs', {
// Fires when an instance of the element is created
created: function() {},
// Fires when the "<polymer-element>" has been fully prepared
ready: function() {},
// Fires when the element was inserted into the document
attached: function() {},
// Fires when the element was removed from the document
detached: function() {},
// Fires when an attribute was added, removed, or updated
attributeChanged: function(attr, oldVal, newVal) {}
});
</script>
</polymer-element>

26. Lifecycle Callbacks Polymer
created();
a"ached();
detached();
a"ributeChanged();

27. Template
Template client-­‐side na3vo

28. HTML Templates
parseado, não é renderizado
conteúdo inerte
Usa Dom como scaffold

29. <template>
...
</template>

30. <polymer-element name="menu-tabs" noscript
attributes="selected">
<template>
...
</template>
</polymer-element>

31. Shadow Dom
Esconder Detalhes de implementação

32. <video src="video.mp4" controls></video>

33. Encapsula style,
marcação e script

34. HTML Imports
Carregar Web Components

35. exemplo
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="font.css">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-tooltip.js"></script>
<script src="bootstrap-dropdown.js"></script>

36. exemplo
<link rel="import" href="bootstrap.html">

37. Suporte a
Web Components

38. jonrimmer.github.io/are-­‐twe-­‐componen4zed-­‐yet/

41. polymer-­‐ptroject.org

42. Google

44. core-­‐elements

45. Visual
<core-­‐toolbar>
<core-­‐header-­‐panel>
<core-­‐drawer-­‐panel>
<core-­‐menu>
<core-­‐icon>
<core-­‐overlay>
....
não Visual
<core-­‐ajax>
<core-­‐localstorage>
<core-­‐range>
<core-­‐shared-­‐lib>
<core-­‐media-­‐query>
<core-­‐iconset>
....

46. hbp://goo.gl/5Tiy9U

47. paper-­‐elements

48. Polymer Paper Elements
bubons
inputs
tabs
cards
panels
....

49. Quem
está
Usando

51. Açúcar Sintá3co
Custom Elements

52. vanilla
document.registerElement('paper-tabs', {
prototype: Object.create(
HTMLElement.prototype
)
});

53. polymer
<polymer-element name="paper-tabs">
...
</polymer-element>

54. Usando
<paper-tabs></paper-tabs>
// document.createElement('paper-tabs');

55. Açúcar Sintá3co
Template

56. vanilla
<template>
...
</template>

57. polymer
<polymer-element name="list-users" noscript>
<template>
<ul>
<template repeat="{{user, i in users}}">
<li>{{user.name}}</li>
</template>
</ul>
</template>
</polymer-element>

58. Açúcar Sintá3co
Shadow Dom

59. vanilla
var shadow = el.createShadowRoot();
shadow.innerHTML = '<h2>I`m a profile-card</
h2>';

60. polymer
<polymer-element name="profile-card" noscript>
<template>
<link rel="stylesheet" href="styles.css">
<h2>I'm a profile-card</h2>
</template>
</polymer-element>

61. Você ainda pode Estender
elementos já existentes

62. polymer
<polymer-element name="x-button" extends="button">
<template>
</template>
<script>
Polymer('x-button', {
});
</script>
</polymer-element>

63. como não se
tornar um zumbi

64. algumas coisas que podem
Ajudar

65. h,p://webcomt ponents.org/

66. h,p://customt elements.io/

67. h,ps://github.com/mateusor)z/twebcomponents-­‐the-­‐right-­‐way

68. como começar um
component

69. github.com/webcomponet nts/polymer-­‐boilerplate

70. h,ps://github.com/webcomtponents/generator-­‐element

71. Em poucas
palavras...

72. encapsulamento e
reaproveitamento de
código de verdade

73. Inventa o Futuro

75. Obrigado
TWITTER.COM/MTEUSORTIZ
GITHUB.COM/MATEUSORTIZ