Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Criando aplicações componentizadas com Polymer
Search
Felipe Sousa
May 16, 2017
Programming
0
310
Criando aplicações componentizadas com Polymer
Slides da palestra completa que aconteceu no CEJS 2017 em Fortaleza, no dia 13 de Maio de 2017.
Felipe Sousa
May 16, 2017
Tweet
Share
More Decks by Felipe Sousa
See All by Felipe Sousa
DevFest Santiago 2019 - Progressive Web Apps Done Right
felipesousa
0
290
Shared web-components with StencilJS
felipesousa
0
390
Progressive Web Apps Done Right
felipesousa
1
560
Criando aplicações componentizadas com Polymer - C4P CEJS 2017
felipesousa
1
220
Criando Aplicações Componentizadas com Polymer
felipesousa
0
130
Uma introdução a Angular 2
felipesousa
2
360
Other Decks in Programming
See All in Programming
実践サーバーレスパフォーマンスチューニング ~その実力に迫る~ / Practical Serverless Performance Tuning ~A Close Look at its Power~
seike460
PRO
2
230
デバッグの話 / Debugging for Beginners
kaityo256
PRO
8
740
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
250
watsonx.ai Dojo #3 プロンプトエンジニアリング入門
oniak3ibm
PRO
0
410
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
1.2k
20241004 モノタロウ式~ドメインモデリングとリアーキテクチャ
monotaro
PRO
2
680
Новый уровень ML-персонализации Lamoda: Как мы усилили ее в каталоге и перенесли на другие продукты
lamodatech
0
410
CSC305 Lecture 09
javiergs
PRO
0
120
学生の時に開催したPerl入学式をきっかけにエンジニアが組織に馴染むために勉強会を主催や仲間と参加して職能間の境界を越えていく
ohmori_yusuke
2
330
今日で分かる!カスタムコップの作り方
krpk1900
2
270
もう実家に手頃な情シス娘は不要!Bedrockでもう一人の娘を作る
komakichi
2
150
perl for shell, awk and sed programmers
mackee
2
1k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
26
710
Practical Orchestrator
shlominoach
186
10k
Teambox: Starting and Learning
jrom
132
8.7k
What's new in Ruby 2.0
geeforr
342
31k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Scaling GitHub
holman
458
140k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
106
48k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Side Projects
sachag
452
42k
Transcript
Criando aplicações componentizadas com Polymer #cejs17
Felipe Sousa Front End Developer GDG Fortaleza
None
None
None
Aplicação
O que é o Polymer?
Polymer is a JavaScript library that helps you create custom
reusable HTML elements, and use them to build performant, maintainable apps.
O que de ‘novo’ ele traz?
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.
#USETHEPLATFORM
Web Components
Shadow-dom Method of establishing and maintaining functional boundaries between DOM
subtrees and how these subtrees interact with each other within a document tree.
None
Isolated DOM Scoped CSS Simplifies CSS Productivity
const header = document.createElement('header'); const shadowRoot = header.attachShadow({mode: 'open'}); shadowRoot.innerHTML
= '<h1>Hello Shadow DOM</h1>';
Custom Elements Method for create and use new types of
DOM elements in a document.
Create Scope Atributes Life-cycles Callbacks
<flag-icon country=“br”> </flag-icon>
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 */ } }
customElements.define("flag-icon", FlagIcon);
extends HTMLElement {
class PlasticButton extends HTMLButtonElement { constructor() { super(); this.addEventListener("click", ()
=> { // do something }); } }
customElements.define("plastic-button", PlasticButton, { extends: "button" });
<button is="plastic-button">Click Me!</button>
Imports Include and reuse HTML documents in other HTML documents.
<?php require("file.php"); ?>
<link rel=“import” href=“file.html”>
Templates Method for declaring inert DOM subtrees in HTML and
manipulating them to instantiate document fragments with identical contents
<template> <!--your content here--> </template>
Cool, but…
None
Custom Elements v1 Shadow DOM v1 ES6 2 1
<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>
<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
<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
<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
<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!
<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);
Everything is a component!
None
Widgets! Web-components pode ser a solução perfeita para widgets.
None
<link rel="import" href=“components/google-map/google-map.html”> <google-map latitude="37.790" longitude="-122.390"></google-map>
None
Aplicações?
• UI • Properties, variables • Binds • Events/Listeners •
Routes • Requests • Performance • Accessibility • Tests
Progressive Web Apps?! • Offline App • Instalable web app
• …
UI Definition
HTML e CSS
<!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
<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>
Material Design Concept
None
None
None
None
Paper Elements
<paper-tabs selected="0"> <paper-tab>ITEM ONE</paper-tab> <paper-tab>ITEM TWO</paper-tab> <paper-tab>ITEM THREE</paper-tab> </paper-tabs>
App Layout
Header Toolbar Icons
Drawer Menu
Properties, Binds and Methods
<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>
<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>
<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>
<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>
<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>
Life-cycle Events
- created - ready - attached - detached - attributeChanged
Data flow, Custom Events and Listeners.
<my-element> events properties
<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>
<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>
this.fire("custom_event", { // content event })
<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>
<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>
Route
/home /about
<app-route>
1. Captura do estado/url
<app-location>
URL BAR YOUR APP
http://url.com/#/home <app-location route="{{route}}" use-hash-as-path> </app-location>
<app-route>
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>
/home/list {{_data}} = “home” {{_tail}} = “list”
/home/list/all {{_data}} = “home” {{_tail}} = “/list/all
2. Show/hide Component
<iron-pages>
Drawer Menu pages content
<iron-pages> <home-app></home-app> <curiosities-app></curiosities-app> <favorites-app></favorites-app> <about-app></about-app> </iron-pages>
<iron-pages selected="{{_data.page}}"> <home-app></home-app> <curiosities-app></curiosities-app> <favorites-app></favorites-app> <about-app></about-app> </iron-pages>
<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>
<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>
<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>
<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>
Request
R.E.Q.U.E.S.T via HTML!
<iron-ajax>
<iron-ajax id="requestRepos" url="your.api.com/planets" params='{"type":"all"}' handle-as="json" on-response="handleResponse" last-response="{{dataResponse}}"> </iron-ajax>
<template is="dom-repeat" items="dataResponse" as="planet"> <h1>[[planet.name]]</h1> <p>[[planet.description]]</p> </template>
Utils
<template is=“dom-repeat” items=“{{yourdata}} as=“alias” > <p> [[alias.name]] </p> <span> [[alias.age]]
</span> </template>
<template is=“dom-if” if=“{{yourCondition}}> // your conditional true here </template>
Example
> polymer-cli
None
webcomponents.org
None
speakerdeck.com/felipesousa
github.com/felipesousa twitter.com/felipz_sousa
None
THANK`S! #usetheplatform