Embed Size (px)
Citation preview
WEB COMPONENTSMais simples e produtivo com Polymer!
Andrew Willard28 anos, Campinas / SP
Analista de Sistemas
Pós Graduado em Engenharia Software
Líder Técnico de Front End Web
Afinal, o que são os WEB COMPONENTS?
SHADOW DOM
TEMPLATES
HTML IMPORTS
CUSTOM ELEMENTS
<video controls poster="poster.png"><source src="video.webm" type='video/webm;codecs="vp8, vorbis"' /><source src="video.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' /><track src="video.vtt" label="Portuguese subtitles" kind="subtitles" srclang="pt-
br" default></track></video>
LIGHTING DOM
<video controls poster="poster.png"><div style="display: none"></div>
<div><div>
<input type="button"><input type="range" step="any" max="70.112"><div style="display: none;">0:00</div><div>1:10</div><input type="button"><input type="range" step="any" max="1"><input type="button"><input type="button">
</div></div>
</div><source src="video.webm" type='video/webm;codecs="vp8, vorbis"' /><source src="video.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' /><track src="video.vtt" label="Portuguese subtitles" kind="subtitles" srclang="pt-br" default></track>
</video>
SHADOW DOM
Template é um DocumentFragment que pode ser reaproveitado
<template id=”item”> <img> <div> <p class=”title”></p> <p></p> </div> <checkbox class=”star”> </checkbox></template>
index.html
<link rel=”import” href=”date-picker.html”><link rel=”import” href=”timezone-date.html”>
date-picker.html
<link rel=”import” href=”moment-import.html”>
timezone-date.html
<link rel=”import” href=”moment-import.html”>moment-import.html
<script src=”moment/moment.js”>
class FlagIcon extends HTMLElement { constructor() { super(); this._countryCode = null; }
get country() { return this._countryCode; } set country(v) { this.setAttribute("country", v); }}
class PlasticButton extends HTMLButtonElement { constructor() { super();
this.addEventListener("click", () => { // Executar uma animação super descolada! }); }}
Crie seus próprioselementos!
<link rel="import" href="another-element.html"> <dom-module id="element-name"> <template> <style> /* Estilos, variáveis e mixers CSS */ </style> <!-- local DOM do seu elemento --> <div>{{greeting}}</div> <!-- data bindings no DOM do elemento --> </template>
<script> // registro do elemento Polymer({ is: "element-name",
// Propriedades e métodos do prototype do seu elemento
properties: { // properties públicas do elemento greeting: { type: String, value: "Hello!" } } }); </script> </dom-module>
<link rel="import" href="another-element.html"> <dom-module id="element-name"> <template> <style> /* Estilos, variáveis e mixers CSS */ </style> <!-- local DOM do seu elemento --> <div>{{greeting}}</div> <!-- data bindings no DOM do elemento --> </template>
<script> // registro do elemento Polymer({ is: "element-name",
// Propriedades e métodos do prototype do seu elemento
properties: { // properties públicas do elemento greeting: { type: String, value: "Hello!" } } }); </script> </dom-module>
<link rel="import" href="another-element.html"> <dom-module id="element-name"> <template> <style> /* Estilos, variáveis e mixers CSS */ </style> <!-- local DOM do seu elemento --> <div>{{greeting}}</div> <!-- data bindings no DOM do elemento --> </template>
<script> // registro do elemento Polymer({ is: "element-name",
// Propriedades e métodos do prototype do seu elemento
properties: { // properties públicas do elemento greeting: { type: String, value: "Hello!" } } }); </script> </dom-module>
<link rel="import" href="another-element.html"> <dom-module id="element-name"> <template> <style> /* Estilos, variáveis e mixers CSS */ </style> <!-- local DOM do seu elemento --> <div>{{greeting}}</div> <!-- data bindings no DOM do elemento --> </template>
<script> // registro do elemento Polymer({ is: "element-name",
// Propriedades e métodos do prototype do seu elemento
properties: { // properties públicas do elemento greeting: { type: String, value: "Hello!" } } }); </script> </dom-module>
<element-name id=”element” greeting=”Hi DevFestNE”></element-name>
Hi DevFestNE
<link rel="import" href="element-name.html">
this.$.element.greeting=”Hi Again”;
Hi Again
<style>#element {--background-color: #38761D;
}</style>
this.$.element.setGreeting(”Hi Again”);
<template is="dom-repeat" items="{{items}}"> <div>#{{index}} - {{item}}</div> </template>
Todas features, nenhum framework!<template is="dom-if" if="{{enabled}}">
<div>I’m enabled!</div> </template>
Plataforma Web
Web Components feitos com Polymer (ou não)
Frameworks JS
Aplicação
+4 MILHÕES DE WEB PAGES
+ 500 projetos6.000 elementos
O maior portal de entretenimento do MUNDO!
Uma coleção de elementos criados pela equipe do Google
Layout responsivo para estruturar a sua aplicação
Layout responsivo para estruturar a sua aplicaçãohttps://ebidel.github.io/material-playground/
Toda a complexidade das APIs em simples elementos
Progressive Web Apps
Offline First
<platinum-sw-register auto-register><platinum-sw-cache></platinum-sw-cache>
</platinum-sw-register>
2525 repositóri
os
1006autores
<script src=”webcomponents-lite.js”></script>
Polyfills - 40kb
Chrome
76.19%
FireFox
10.59%
Safari
8.12%
IE/Edge
4.72%
Total
99.98%
Opera
0.32%
Outros
0.04%
