The document discusses web components, covering their creation through various techniques such as custom elements and shadow DOM. It provides examples of defining custom elements using Polymer and jQuery, along with lifecycle callbacks and template usage. Additionally, it shares resources and links to relevant GitHub repositories for further exploration in web component development.

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