Vinicius Gerevini | GDG POA - Meetup Polymer | 2015

Vinicius Gerevini | GDG POA - Meetup Polymer | 2015
QUEM SOU EU?
Twitter: @vini_gerevini
Github: ViniciusGerevini
Email:
[email protected]
http://br.linkedin.com/in/viniciusgerevini
http://thisisvini.com
POLYMER
Vinicius Gerevini | GDG POA - Meetup Polymer | 2015
POLYMER
- Web components
- Biblioteca Polymer
- Elementos (core, papers)
Vinicius Gerevini | GDG POA - Meetup Polymer | 2015
WEB COMPONENTS
- Custom Elements
- Imports
- Shadow DOM
- Templates
Vinicius Gerevini | GDG POA - Meetup Polymer | 2015
WEB COMPONENTS
Vinicius Gerevini | GDG POA - Meetup Polymer | 2015
WEBCOMPONENTS.JS
- Antigamente platform.js
- Mantido por Webcomponents.org
Vinicius Gerevini | GDG POA - Meetup Polymer | 2015
WEBCOMPONENTS.JS
- Web Components:
- Shadow DOM
- HTML Imports
- Custom Elements
- Dependências
- Weakmaps
- Mutation Observers
Vinicius Gerevini | GDG POA - Meetup Polymer | 2015
WEBCOMPONENTS.JS
- webcomponents-lite.js
-
Custom Elements
-
HTML Imports
- Build Manual
-
https://github.com/webcomponents/webcomponentsjs
Vinicius Gerevini | GDG POA - Meetup Polymer | 2015
POLYMER - BIBLIOTECA
- Sintaxe declarativa
- Two-way data binding
- Property observation
- Suporte a gestos
Vinicius Gerevini | GDG POA - Meetup Polymer | 2015
ELEMENTOS
CRIANDO ELEMENTOS
CRIANDO ELEMENTOS
Uso:
Vinicius Gerevini | GDG POA - Meetup Polymer | 2015
CRIANDO ELEMENTOS
Vinicius Gerevini | GDG POA - Meetup Polymer | 2015
CRIANDO ELEMENTOS
Vinicius Gerevini | GDG POA - Meetup Polymer | 2015
CICLO DE VIDA
CICLO DE VIDA
Spec
Polymer
createdCallback
created
Instância do elemento criada
ready
Elemento Polymer pronto
(SD, observers, listeners, etc)
attached
Elemento inserido no DOM
domReady
Elemento e filhos prontos.
detachedCallback
detached
Instância removida do DOM
attributeChangedCallback
attributeChanged
Atributo adicionado, removido ou
atualizado
attachedCallback
CICLO DE VIDA
Vinicius Gerevini | GDG POA - Meetup Polymer | 2015
EVENTOS
EVENTOS
Declarativo:
Vinicius Gerevini | GDG POA - Meetup Polymer | 2015
EVENTOS
Imperativo:
Vinicius Gerevini | GDG POA - Meetup Polymer | 2015
BINDS E TEMPLATES
BINDS E TEMPLATES
Bind único:
Template Iterativo:
Template condicional:
One time binding:
Vinicius Gerevini | GDG POA - Meetup Polymer | 2015
REDUZINDO REQUESTS
VULCANIZE
- “Concatena um conjunto de web components
em um único arquivo”
- Gera HTML com os componentes utilizados e
suas dependências “inline”.
Vinicius Gerevini | GDG POA - Meetup Polymer | 2015
VULCANIZE
Instalação:
npm install -g vulcanize
Uso:
vulcanize -o resultado.html index.html
Vinicius Gerevini | GDG POA - Meetup Polymer | 2015
RECURSOS
BUILT WITH POLYMER
http://builtwithpolymer.org/
Vinicius Gerevini | GDG POA - Meetup Polymer | 2015
GOOGLE WEB COMPONENTS
http://googlewebcomponents.github.io/
Vinicius Gerevini | GDG POA - Meetup Polymer | 2015
POLYMER PROJECT
http://polymer-project.org
Vinicius Gerevini | GDG POA - Meetup Polymer | 2015
WEBCOMPONENTS.ORG
http://webcomponents.org/
Vinicius Gerevini | GDG POA - Meetup Polymer | 2015
EXEMPLOS
https://github.com/ViniciusGerevini/polymer-elements-examples
Vinicius Gerevini | GDG POA - Meetup Polymer | 2015
OBRIGADO
Vinicius Gerevini
@vini_gerevini
Github: ViniciusGerevini | contato: [email protected] | http://thisisvini.com