O documento discute Web Components e como eles podem tornar o desenvolvimento web mais simples e produtivo usando Polymer. Web Components permitem criar elementos reutilizáveis através de templates, shadow DOM e custom elements que podem ser usados em qualquer página da web. O Polymer fornece uma biblioteca e ferramentas para criar Web Components de forma fácil.

1. WEB COMPONENTS
Mais simples e produtivo com Polymer!

2. Andrew Willard
28 anos, Campinas / SP
Analista de Sistemas
Pós Graduado em Engenharia Software
Líder Técnico de
Front End Web

6. Afinal, o que são os
WEB COMPONENTS?

7. SHADOW DOM
TEMPLATES
HTML IMPORTS
CUSTOM ELEMENTS

8. <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

9. <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

10. Template é um DocumentFragment que pode ser reaproveitado
<template id=”item”>
<img>
<div>
<p class=”title”></p>
<p></p>
</div>
<checkbox class=”star”>
</checkbox>
</template>

11. 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”>

12. 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óprios
elementos!

14. <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>

15. <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>

16. <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>

17. <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>

18. <element-name
id=”element”
greeting=”Hi DevFestNE”>
</element-name>
Hi DevFestNE
<link rel="import" href="element-name.html">

19. this.$.element.greeting=”Hi Again”;
Hi Again
<style>
#element {
--background-color: #38761D;
}
</style>
this.$.element.setGreeting(”Hi Again”);

20. <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

21. +4 MILHÕES DE
WEB PAGES

22. + 500 projetos
6.000 elementos

23. O maior portal de entretenimento do MUNDO!

25. Uma coleção de elementos
criados pela equipe do Google

26. Layout responsivo para estruturar a sua aplicação

27. Layout responsivo para estruturar a sua aplicação
https://ebidel.github.io/material-playground/

28. Toda a complexidade das APIs em simples elementos

29. Progressive Web Apps

30. Offline First
<platinum-sw-register auto-register>
<platinum-sw-cache></platinum-sw-cache>
</platinum-sw-register>

31. 2525
repositórios
1006
autores

33. <script src=”webcomponents-lite.js”>
</script>
Polyfills - 40kb

34. Chrome
76.19%
FireFox
10.59%
Safari
8.12%
IE/Edge
4.72%
Total
99.98%
Opera
0.32%
Outros
0.04%

35. #DevFestNE - talentos@movile.com
andrewillard@gmail.com
andrewillard
andrewillard
andrewillard