Criando aplicações componentizadas com Polymer

Slides da palestra completa que aconteceu no CEJS 2017 em Fortaleza, no dia 13 de Maio de 2017.

Transcript

1. Criando aplicações componentizadas com Polymer #cejs17
2. Felipe Sousa Front End Developer GDG Fortaleza
6. Aplicação
7. O que é o Polymer?
8. Polymer is a JavaScript library that helps you create custom reusable HTML elements, and use them to build performant, maintainable apps.
9. O que de ‘novo’ ele traz?
10. Our mission is to make life better for users and developers, by helping developers unlock the web platform’s full potential and by spurring the web platform to evolve and improve.
11. #USETHEPLATFORM
12. Web Components
13. Shadow-dom Method of establishing and maintaining functional boundaries between DOM subtrees and how these subtrees interact with each other within a document tree.
15. Isolated DOM Scoped CSS Simplifies CSS Productivity
16. const header = document.createElement('header'); const shadowRoot = header.attachShadow({mode: 'open'}); shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>';
17. Custom Elements Method for create and use new types of DOM elements in a document.
18. Create Scope Atributes Life-cycles Callbacks
19. <flag-icon country=“br”> </flag-icon>
20. class FlagIcon extends HTMLElement { constructor() { super(); this._countryCode = null; } static get observedAttributes() { return ["country"]; } attributeChangedCallback(name, oldValue, newValue) { this._countryCode = newValue; this._updateRendering(); } get country() { return this._countryCode; } set country(v) { this.setAttribute("country", v); } _updateRendering() { /* update the flag icon */ } }
21. customElements.define("flag-icon", FlagIcon);
22. extends HTMLElement {
23. class PlasticButton extends HTMLButtonElement { constructor() { super(); this.addEventListener("click", () => { // do something }); } }
24. customElements.define("plastic-button", PlasticButton, { extends: "button" });
25. <button is="plastic-button">Click Me!</button>
26. Imports Include and reuse HTML documents in other HTML documents.
27. <?php require("file.php"); ?>
28. <link rel=“import” href=“file.html”>
29. Templates Method for declaring inert DOM subtrees in HTML and manipulating them to instantiate document fragments with identical contents
30. <template> <!--your content here--> </template>
31. Cool, but…
33. Custom Elements v1 Shadow DOM v1 ES6 2 1
34. <link rel=“import” href=“../polymer/polymer.html”> <dom-module id="my-personal-component"> <template> <style> :host { … } </style> <h1> Hello! I’m a personal component! </h1> </template> <script> Polymer({ is: “my-personal-component” }); </script> </dom-module>
35. <link rel=“import” href=“../polymer/polymer.html”> <dom-module id="my-personal-component"> <template> <style> :host { … } </style> <h1> Hello! I’m a personal component! </h1> </template> <script> Polymer({ is: “my-personal-component” }); </script> </dom-module> Imports
36. <link rel=“import” href=“../polymer/polymer.html”> <dom-module id="my-personal-component"> <template> <style> :host { … } </style> <h1> Hello! I’m a personal component! </h1> </template> <script> Polymer({ is: “my-personal-component” }); </script> </dom-module> Custom Elements
37. <link rel=“import” href=“../polymer/polymer.html”> <dom-module id="my-personal-component"> <template> <style> :host { … } </style> <h1> Hello! I’m a personal component! </h1> </template> <script> Polymer({ is: “my-personal-component” }); </script> </dom-module> Templates
38. <link rel=“import” href=“../polymer/polymer.html”> <dom-module id="my-personal-component"> <template> <style> :host { … } </style> <h1> Hello! I’m a personal component! </h1> </template> <script> Polymer({ is: “my-personal-component” }); </script> </dom-module> Component!
39. <link rel=“import” href=“../polymer/polymer.html”> <dom-module id="my-personal-component"> <template> <style> :host { … } </style> <h1> Hello! I’m a component! </h1> </template> <script> </script> </dom-module> Component! - Polymer 2.0 class DomElement extends Polymer.Element { static get is() { return “my-personal-component”; } } customElements.define(DomElement.is, DomElement);
40. Everything is a component!
42. Widgets! Web-components pode ser a solução perfeita para widgets.
44. <link rel="import" href=“components/google-map/google-map.html”> <google-map latitude="37.790" longitude="-122.390"></google-map>
46. Aplicações?
47. • UI • Properties, variables • Binds • Events/Listeners • Routes • Requests • Performance • Accessibility • Tests
48. Progressive Web Apps?! • Offline App • Instalable web app • …
49. UI Definition
50. HTML e CSS
51. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"> <title>Document Title</title> <meta name="description" content="space description"> <link rel="manifest" href="/manifest.json"> <script> window.Polymer = { dom: 'shadow' } </script> <script src="/bower_components/webcomponentsjs/webcomponents.js"></script> <link rel="import" href="my-app.html"> </head> <body> <my-app></my-app> </body> </html> polyfill
52. <link rel="import" href="bower_components/polymer/polymer.html"> <dom-module id="my-component"> <template> <style> :host { /*your css here*/ } </style> <!-- Your content here --> </template> <script> Polymer({ is: "my-component" }); </script> </dom-module>
53. Material Design Concept
58. Paper Elements
59. <paper-tabs selected="0"> <paper-tab>ITEM ONE</paper-tab> <paper-tab>ITEM TWO</paper-tab> <paper-tab>ITEM THREE</paper-tab> </paper-tabs>
60. App Layout
61. Header Toolbar Icons
62. Drawer Menu
63. Properties, Binds and Methods
64. <link rel="import" href="bower_components/polymer/polymer.html"> <dom-module id="my-component"> <template> <style> :host { /*your css here*/ } </style> <!-- Your content here --> </template> <script> Polymer({ is: "my-component", properties: { propertie_name: { type: property_type, value: property_value } } }); </script> </dom-module>
65. <link rel="import" href="bower_components/polymer/polymer.html"> <dom-module id="my-component"> <template> <style> :host { /*your css here*/ } </style> <h1>[[property_name]]</h1> </template> <script> Polymer({ is: "my-component", properties: { propertie_name: { type: property_type, value: property_value } } }); </script> </dom-module>
66. <link rel="import" href="bower_components/polymer/polymer.html"> <dom-module id="my-component"> <template> <style> :host { /*your css here*/ } </style> <h1>{{property_name}}</h1> </template> <script> Polymer({ is: "my-component", properties: { propertie_name: { type: property_type, value: property_value } } }); </script> </dom-module>
67. <link rel="import" href="bower_components/polymer/polymer.html"> <dom-module id="my-component"> <template> <style> :host { /*your css here*/ } </style> <h1>{{property_name}}</h1> <input type=“text” value=“{{property_name::input}}”> </template> <script> Polymer({ is: "my-component", properties: { propertie_name: { type: property_type, value: property_value } } }); </script> </dom-module>
68. <link rel="import" href="bower_components/polymer/polymer.html"> <dom-module id="my-component"> <template> <style> :host { /*your css here*/ } </style> <button on-click=“my_method”>Click here</button> </template> <script> Polymer({ is: "my-component", my_method: function () { // do something } }); </script> </dom-module>
69. Life-cycle Events
70. - created - ready - attached - detached - attributeChanged
71. Data flow, Custom Events and Listeners.
72. <my-element> events properties
73. <link rel="import" href="/polymer/polymer.html"> <link rel="import" href="./my-second-component.html"> <dom-module id="my-component"> <template> <style> :host { display: block; } </style> <my-second-component name="name_property"> </my-second-component> </template> <script> Polymer({ is: "my-component", properties: { name_property: { type: String, value: "CEJS" } } }); </script> </dom-module>
74. <link rel="import" href="/polymer/polymer.html"> <dom-module id=“my-second-component”> <template> <style> :host { display: block; } </style> <p> [[name]] </p> // “CEJS” </template> <script> Polymer({ is: "my-second-component", properties: { name: { type: String, value: "" } } }); </script> </dom-module>
75. this.fire("custom_event", { // content event })
76. <link rel="import" href="/polymer/polymer.html"> <dom-module id="my-component"> <template> <style> :host { display: block; } </style> <button on-click=“my_method”>click here</button> </template> <script> Polymer({ is: "my-component", my_method: function () { this.fire("custom_event", { // your data here }) } }); </script> </dom-module>
77. <link rel="import" href="/polymer/polymer.html"> <dom-module id="my-component"> <template> <style> :host { display: block; } </style> <!-- your content here --> </template> <script> Polymer({ is: "my-component", listeners: { "custom_event": "listen_custom_event" }, listen_custom_event: function (e) { console.log(e.detail); // contain detail os method. } }); </script> </dom-module>
78. Route
79. /home /about
80. <app-route>
81. 1. Captura do estado/url
82. <app-location>
83. URL BAR YOUR APP
84. http://url.com/#/home <app-location route="{{route}}" use-hash-as-path> </app-location>
85. <app-route>
86. App location Response Padrão da rota Dados da Rota Dados da Sub-rota <app-route route="{{route}}" pattern="/:page" data="{{_data}}" tail="{{_tail}}"> </app-route>
87. /home/list {{_data}} = “home” {{_tail}} = “list”
88. /home/list/all {{_data}} = “home” {{_tail}} = “/list/all
89. 2. Show/hide Component
90. <iron-pages>
91. Drawer Menu pages content
92. <iron-pages> <home-app></home-app> <curiosities-app></curiosities-app> <favorites-app></favorites-app> <about-app></about-app> </iron-pages>
93. <iron-pages selected="{{_data.page}}"> <home-app></home-app> <curiosities-app></curiosities-app> <favorites-app></favorites-app> <about-app></about-app> </iron-pages>
94. <iron-pages selected="{{_data.page}}" attr-for-selected="name"> <home-app></home-app> <curiosities-app></curiosities-app> <favorites-app></favorites-app> <about-app></about-app> </iron-pages>
95. <iron-pages selected="{{_data.page}}" attr-for-selected="name"> <home-app name="home"></home-app> <curiosities-app name="curiosities"></curiosities-app> <favorites-app name="favorites"></favorites-app> <about-app name="about"></about-app> </iron-pages>
96. <iron-pages selected="{{_data.page}}" attr-for-selected="name"> <home-app name="home" route="_tail"></home-app> <curiosities-app name="curiosities" route="_tail"></curiosities-app> <favorites-app name="favorites" route="_tail"></favorites-app> <about-app name="about" route="_tail"></about-app> </iron-pages>
97. <iron-pages selected="{{_data.page}}" attr-for-selected="name" selected- attribute="visible" fallback-selection="404"> <home-app name="home" route="_tail"></home-app> <curiosities-app name="curiosities" route="_tail"></curiosities-app> <favorites-app name="favorites" route="_tail"></favorites-app> <about-app name="about" route=“_tail"></about-app> <404—app name="404"></404-app> </iron-pages>
98. Request
99. R.E.Q.U.E.S.T via HTML!
100. <iron-ajax>
101. <iron-ajax id="requestRepos" url="your.api.com/planets" params='{"type":"all"}' handle-as="json" on-response="handleResponse" last-response="{{dataResponse}}"> </iron-ajax>
102. <template is="dom-repeat" items="dataResponse" as="planet"> <h1>[[planet.name]]</h1> <p>[[planet.description]]</p> </template>
103. Utils
104. <template is=“dom-repeat” items=“{{yourdata}} as=“alias” > <p> [[alias.name]] </p> <span> [[alias.age]] </span> </template>
105. <template is=“dom-if” if=“{{yourCondition}}> // your conditional true here </template>
106. Example
107. > polymer-cli
109. webcomponents.org
111. speakerdeck.com/felipesousa
112. github.com/felipesousa twitter.com/felipz_sousa
114. THANK`S! #usetheplatform