SlideShare uma empresa Scribd logo
Stefan Horochovec 
• Arquiteto de Software – CISS Software e Serviços; 
• Consultor: 
• Java EE; 
• Cloud Computing; 
• Mobile Solutions; 
• Revisor Técnico – Packpub Publishing; 
• Instrutor/Professor/Palestrante/Autor;
Como programamos em HTML
E quando criamos um componente....
Nada faz sentido
The dead is comming
WebComponents 
• Especificação para implementação de componentes para Web; 
• Sugerida a 4 anos por Dimitri Glazkov; 
• Sugerida a implementação para que navegadores pudessem facilitar a criação e 
importação de componentes dentro de WebApps modernas; 
• A implementação da especificação faz com que o navegador faça o trabalho 
para o desenvolvedor que hoje API’s fazem (jQuery, etc); 
• Apenas o Google Chrome e o Opera dão suporte total a WebComponents;
Especificações 
• CustomElements 
• Esta especificação descreve o método para permitir o autor para definir e usar novos tipos de elementos 
DOM de um documento. 
• Especificação: http://w3c.github.io/webcomponents/spec/custom/ 
• HTML Imports 
• HTML Imports são uma forma de incluir e reutilizar documentos HTML em outros documentos HTML. 
• Especificação: http://w3c.github.io/webcomponents/spec/imports/ 
• Templates 
• Esta especificação descreve um método para declarar inert Subtrees em HTML DOM e manipulá-los para 
instanciar fragmentos de documentos com conteúdo idêntico. 
• Especificação: https://html.spec.whatwg.org/multipage/scripting.html#the-template-element 
• Shadow DOM 
• Esta especificação descreve um método de estabelecer e manter limites funcionais entre as árvores do 
DOM permitindo, assim, o encapsulamento melhor funcional dentro da árvore DOM. 
• Especificação: http://w3c.github.io/webcomponents/spec/shadow/
Suporte
Bibliotecas
Polymer – O que é? 
• http://www.polymer-project.org/ 
• Conceito de criação de web-components para aplicações modernas; 
• Reutilização de componentes em suas Modern Webapps; 
• Mantido pelo Google; 
• Boilerplate: https://github.com/webcomponents/polymer-boilerplate
Criando o seu template
componentes/first-template.html
index.html
Criando o seu primeiro componente
componentes/hub-componente.html
index.html
Componente com serviços
componentes/hub-service.html
componentes/hub-mensagem.html
index.html
mensagem.html
Hands On
Paper Elements
Paper Elements 
• Suíte de componentes modernos implementando o conceito Material Design; 
• Componentes baseados em: 
• Responsividade; 
• Usabilidade; 
• Especificação: http://www.google.com/design/spec/material-design/ 
introduction.html# 
• Elementos - Showcase: https://www.polymer-project.org/components/paper-elements/ 
demo.html#core-toolbar 
• Designer: https://www.polymer-project.org/tools/designer/
Demonstração
Hands On
Obrigado

Mais conteúdo relacionado

Mais procurados

O básico sobre Vue 2. Talk Vue Básico 1/3
O básico sobre Vue 2. Talk Vue Básico 1/3O básico sobre Vue 2. Talk Vue Básico 1/3
O básico sobre Vue 2. Talk Vue Básico 1/3
Danilo Pinotti
 
Guga Alves apresenta Gutenberg fase 2 e 3
Guga Alves apresenta Gutenberg fase 2 e 3Guga Alves apresenta Gutenberg fase 2 e 3
Guga Alves apresenta Gutenberg fase 2 e 3
WordCamp Floripa
 
Profissão Front-end
Profissão Front-endProfissão Front-end
Profissão Front-end
Marconi Pacheco
 
Walker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicaçãoWalker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicação
WordCamp Floripa
 
Por que devo aprender JavaScript?
Por que devo aprender JavaScript?Por que devo aprender JavaScript?
Por que devo aprender JavaScript?
Breno Alves
 
Palestra Netbeans 6 Campus Party
Palestra Netbeans 6 Campus PartyPalestra Netbeans 6 Campus Party
Palestra Netbeans 6 Campus Party
Fábio Augusto da Silva
 
Como encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-endComo encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-end
Jean Carlo Emer
 
Cache em aplicações web
Cache em aplicações webCache em aplicações web
Cache em aplicações web
Jean Carlo Emer
 
Javascript para adultos
Javascript para adultosJavascript para adultos
Javascript para adultos
Guilherme Blanco
 
Aplicações Web - um estudo sobre React
Aplicações Web - um estudo sobre ReactAplicações Web - um estudo sobre React
Aplicações Web - um estudo sobre React
Jean Carlo Emer
 
Workshop - Ionic + firebase
Workshop - Ionic + firebaseWorkshop - Ionic + firebase
Workshop - Ionic + firebase
Stefan Horochovec
 
Lightning Talk: Webdev who?
Lightning Talk: Webdev who?Lightning Talk: Webdev who?
Lightning Talk: Webdev who?
Leandro Nunes
 
Primeiros passos no Vue.js
Primeiros passos no Vue.jsPrimeiros passos no Vue.js
Primeiros passos no Vue.js
Joel Rodrigues
 
CEJS 2014 - KnockoutJS
CEJS 2014 - KnockoutJSCEJS 2014 - KnockoutJS
CEJS 2014 - KnockoutJS
Alberto Monteiro
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
Sérgio Vilar
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
Felipe J. R. Vieira
 
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerryDesenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry
felipebzr
 
Desvendando ASP.NET MVC
Desvendando ASP.NET MVCDesvendando ASP.NET MVC
Desvendando ASP.NET MVC
Vinicius Quaiato
 
Apache Wicket derruba o padrão JSF
Apache Wicket derruba o padrão JSFApache Wicket derruba o padrão JSF
Apache Wicket derruba o padrão JSF
Bruno Borges
 
Micro Front-end + CQRS/ES - JSSP jul/2019
Micro Front-end + CQRS/ES - JSSP jul/2019Micro Front-end + CQRS/ES - JSSP jul/2019
Micro Front-end + CQRS/ES - JSSP jul/2019
Gabriel Rodrigues Couto
 

Mais procurados (20)

O básico sobre Vue 2. Talk Vue Básico 1/3
O básico sobre Vue 2. Talk Vue Básico 1/3O básico sobre Vue 2. Talk Vue Básico 1/3
O básico sobre Vue 2. Talk Vue Básico 1/3
 
Guga Alves apresenta Gutenberg fase 2 e 3
Guga Alves apresenta Gutenberg fase 2 e 3Guga Alves apresenta Gutenberg fase 2 e 3
Guga Alves apresenta Gutenberg fase 2 e 3
 
Profissão Front-end
Profissão Front-endProfissão Front-end
Profissão Front-end
 
Walker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicaçãoWalker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicação
 
Por que devo aprender JavaScript?
Por que devo aprender JavaScript?Por que devo aprender JavaScript?
Por que devo aprender JavaScript?
 
Palestra Netbeans 6 Campus Party
Palestra Netbeans 6 Campus PartyPalestra Netbeans 6 Campus Party
Palestra Netbeans 6 Campus Party
 
Como encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-endComo encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-end
 
Cache em aplicações web
Cache em aplicações webCache em aplicações web
Cache em aplicações web
 
Javascript para adultos
Javascript para adultosJavascript para adultos
Javascript para adultos
 
Aplicações Web - um estudo sobre React
Aplicações Web - um estudo sobre ReactAplicações Web - um estudo sobre React
Aplicações Web - um estudo sobre React
 
Workshop - Ionic + firebase
Workshop - Ionic + firebaseWorkshop - Ionic + firebase
Workshop - Ionic + firebase
 
Lightning Talk: Webdev who?
Lightning Talk: Webdev who?Lightning Talk: Webdev who?
Lightning Talk: Webdev who?
 
Primeiros passos no Vue.js
Primeiros passos no Vue.jsPrimeiros passos no Vue.js
Primeiros passos no Vue.js
 
CEJS 2014 - KnockoutJS
CEJS 2014 - KnockoutJSCEJS 2014 - KnockoutJS
CEJS 2014 - KnockoutJS
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerryDesenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry
 
Desvendando ASP.NET MVC
Desvendando ASP.NET MVCDesvendando ASP.NET MVC
Desvendando ASP.NET MVC
 
Apache Wicket derruba o padrão JSF
Apache Wicket derruba o padrão JSFApache Wicket derruba o padrão JSF
Apache Wicket derruba o padrão JSF
 
Micro Front-end + CQRS/ES - JSSP jul/2019
Micro Front-end + CQRS/ES - JSSP jul/2019Micro Front-end + CQRS/ES - JSSP jul/2019
Micro Front-end + CQRS/ES - JSSP jul/2019
 

Destaque

Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
Horacio Gonzalez
 
Material Design - do smartphone ao desktop
Material Design - do smartphone ao desktopMaterial Design - do smartphone ao desktop
Material Design - do smartphone ao desktop
Hillary Sousa
 
Polymer Starter Kit
Polymer Starter KitPolymer Starter Kit
Polymer Starter Kit
Evaldo Barbosa
 
Web components
Web componentsWeb components
Web components
Evaldo Barbosa
 
Apresentação Google I/O Extended Vitória
Apresentação Google I/O Extended VitóriaApresentação Google I/O Extended Vitória
Apresentação Google I/O Extended Vitória
Fabiano Monte
 
Angular js gtg-27feb2013
Angular js gtg-27feb2013Angular js gtg-27feb2013
Angular js gtg-27feb2013
Nitya Narasimhan
 
WebApps com Web Components
WebApps com Web ComponentsWebApps com Web Components
WebApps com Web Components
Beto Muniz
 
The Beautiful Simplicity of ES2015
The Beautiful Simplicity of ES2015The Beautiful Simplicity of ES2015
The Beautiful Simplicity of ES2015
Brandon Belvin
 
Material design
Material designMaterial design
Material design
David Tiago Conceição
 
Um salve para evolução! construindo uma nova web com polymer
Um salve para evolução! construindo uma nova web com  polymerUm salve para evolução! construindo uma nova web com  polymer
Um salve para evolução! construindo uma nova web com polymer
Marcus Silva
 
Polymer and Firebase: Componentizing the Web in Realtime
Polymer and Firebase: Componentizing the Web in RealtimePolymer and Firebase: Componentizing the Web in Realtime
Polymer and Firebase: Componentizing the Web in Realtime
Juarez Filho
 
Tech talk polymer
Tech talk polymerTech talk polymer
Tech talk polymer
Yanuar W
 
Introduction To Dart (GDG NY Jan 2014 Meetup)
Introduction To Dart (GDG NY Jan 2014 Meetup)Introduction To Dart (GDG NY Jan 2014 Meetup)
Introduction To Dart (GDG NY Jan 2014 Meetup)
Nitya Narasimhan
 
O futuro do Android
O futuro do AndroidO futuro do Android
O futuro do Android
Erisvaldo Junior
 
Workshop de Web Components
Workshop de Web ComponentsWorkshop de Web Components
Workshop de Web Components
Guilherme Ventura
 
Chrome Dev Summit Highlights (NYC GDG Dec 2013)
Chrome Dev Summit Highlights (NYC GDG Dec 2013)Chrome Dev Summit Highlights (NYC GDG Dec 2013)
Chrome Dev Summit Highlights (NYC GDG Dec 2013)
Nitya Narasimhan
 
Polymer Elements: Tudo que você precisa saber para criar a web
Polymer Elements: Tudo que você precisa saber para criar a webPolymer Elements: Tudo que você precisa saber para criar a web
Polymer Elements: Tudo que você precisa saber para criar a web
Beto Muniz
 
Angular 2 overview workshop
Angular 2 overview workshopAngular 2 overview workshop
Angular 2 overview workshop
Denis Gorbunov
 
Angular 2 - a New Hope
Angular 2 - a New HopeAngular 2 - a New Hope
Angular 2 - a New Hope
Sami Suo-Heikki
 
Pensando em UX / UI com o material design
Pensando em UX / UI com o material designPensando em UX / UI com o material design
Pensando em UX / UI com o material design
Thiago Marques
 

Destaque (20)

Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
 
Material Design - do smartphone ao desktop
Material Design - do smartphone ao desktopMaterial Design - do smartphone ao desktop
Material Design - do smartphone ao desktop
 
Polymer Starter Kit
Polymer Starter KitPolymer Starter Kit
Polymer Starter Kit
 
Web components
Web componentsWeb components
Web components
 
Apresentação Google I/O Extended Vitória
Apresentação Google I/O Extended VitóriaApresentação Google I/O Extended Vitória
Apresentação Google I/O Extended Vitória
 
Angular js gtg-27feb2013
Angular js gtg-27feb2013Angular js gtg-27feb2013
Angular js gtg-27feb2013
 
WebApps com Web Components
WebApps com Web ComponentsWebApps com Web Components
WebApps com Web Components
 
The Beautiful Simplicity of ES2015
The Beautiful Simplicity of ES2015The Beautiful Simplicity of ES2015
The Beautiful Simplicity of ES2015
 
Material design
Material designMaterial design
Material design
 
Um salve para evolução! construindo uma nova web com polymer
Um salve para evolução! construindo uma nova web com  polymerUm salve para evolução! construindo uma nova web com  polymer
Um salve para evolução! construindo uma nova web com polymer
 
Polymer and Firebase: Componentizing the Web in Realtime
Polymer and Firebase: Componentizing the Web in RealtimePolymer and Firebase: Componentizing the Web in Realtime
Polymer and Firebase: Componentizing the Web in Realtime
 
Tech talk polymer
Tech talk polymerTech talk polymer
Tech talk polymer
 
Introduction To Dart (GDG NY Jan 2014 Meetup)
Introduction To Dart (GDG NY Jan 2014 Meetup)Introduction To Dart (GDG NY Jan 2014 Meetup)
Introduction To Dart (GDG NY Jan 2014 Meetup)
 
O futuro do Android
O futuro do AndroidO futuro do Android
O futuro do Android
 
Workshop de Web Components
Workshop de Web ComponentsWorkshop de Web Components
Workshop de Web Components
 
Chrome Dev Summit Highlights (NYC GDG Dec 2013)
Chrome Dev Summit Highlights (NYC GDG Dec 2013)Chrome Dev Summit Highlights (NYC GDG Dec 2013)
Chrome Dev Summit Highlights (NYC GDG Dec 2013)
 
Polymer Elements: Tudo que você precisa saber para criar a web
Polymer Elements: Tudo que você precisa saber para criar a webPolymer Elements: Tudo que você precisa saber para criar a web
Polymer Elements: Tudo que você precisa saber para criar a web
 
Angular 2 overview workshop
Angular 2 overview workshopAngular 2 overview workshop
Angular 2 overview workshop
 
Angular 2 - a New Hope
Angular 2 - a New HopeAngular 2 - a New Hope
Angular 2 - a New Hope
 
Pensando em UX / UI com o material design
Pensando em UX / UI com o material designPensando em UX / UI com o material design
Pensando em UX / UI com o material design
 

Semelhante a Componentizando a Web com Polymer

Aula 05 - Java Script Básico
Aula 05 -  Java Script BásicoAula 05 -  Java Script Básico
Aula 05 - Java Script Básico
Fabio Moura Pereira
 
Desenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - IntroduçãoDesenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - Introdução
Fabio Moura Pereira
 
T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)
Carlos Santos
 
Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Se...
Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Se...Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Se...
Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Se...
Renato Groff
 
(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript
Carlos Santos
 
Slide Aula - Curso CakePHP
Slide Aula - Curso CakePHPSlide Aula - Curso CakePHP
Slide Aula - Curso CakePHP
Rangel Javier
 
Source-to-container no mundo real
Source-to-container no mundo realSource-to-container no mundo real
Source-to-container no mundo real
Evandro Silvestre
 
Mean Stack
Mean StackMean Stack
Mean Stack
Bruno Catão
 
Transportando as aplicações entre vários ambientes com Docker
Transportando as aplicações entre vários ambientes com DockerTransportando as aplicações entre vários ambientes com Docker
Transportando as aplicações entre vários ambientes com Docker
Aécio Pires
 
Trabalho jQuery
Trabalho jQueryTrabalho jQuery
Trabalho jQuery
grupoucpel
 
Introdução à Programação Web com Angular
Introdução à Programação Web com AngularIntrodução à Programação Web com Angular
Introdução à Programação Web com Angular
Elmano Cavalcanti
 
Análise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e Zend
Análise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e ZendAnálise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e Zend
Análise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e Zend
Thiago Sinésio
 
Aplicativo aula03
Aplicativo aula03Aplicativo aula03
Aplicativo aula03
Cláudio Amaral
 
Flask e Docker - rumo a AWS!
Flask e Docker - rumo a AWS!Flask e Docker - rumo a AWS!
Flask e Docker - rumo a AWS!
Ryan Padilha
 
LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04
Carlos Santos
 
Curso AngularJS - Parte 1
Curso AngularJS - Parte 1Curso AngularJS - Parte 1
Curso AngularJS - Parte 1
Alvaro Viebrantz
 
Docker de ponta a ponta: do Desenvolvimento à Nuvem - UNICID - Novembro-2019
Docker de ponta a ponta: do Desenvolvimento à Nuvem - UNICID - Novembro-2019Docker de ponta a ponta: do Desenvolvimento à Nuvem - UNICID - Novembro-2019
Docker de ponta a ponta: do Desenvolvimento à Nuvem - UNICID - Novembro-2019
Renato Groff
 
Zend Framework 2 - Desenvolvimento Ágil Competente
Zend Framework 2 - Desenvolvimento Ágil CompetenteZend Framework 2 - Desenvolvimento Ágil Competente
Zend Framework 2 - Desenvolvimento Ágil Competente
Michael Cardoso
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
Jose Berardo
 
Escalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLIDEscalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLID
Ruben Marcus Luz Paschoarelli
 

Semelhante a Componentizando a Web com Polymer (20)

Aula 05 - Java Script Básico
Aula 05 -  Java Script BásicoAula 05 -  Java Script Básico
Aula 05 - Java Script Básico
 
Desenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - IntroduçãoDesenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - Introdução
 
T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)
 
Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Se...
Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Se...Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Se...
Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Se...
 
(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript
 
Slide Aula - Curso CakePHP
Slide Aula - Curso CakePHPSlide Aula - Curso CakePHP
Slide Aula - Curso CakePHP
 
Source-to-container no mundo real
Source-to-container no mundo realSource-to-container no mundo real
Source-to-container no mundo real
 
Mean Stack
Mean StackMean Stack
Mean Stack
 
Transportando as aplicações entre vários ambientes com Docker
Transportando as aplicações entre vários ambientes com DockerTransportando as aplicações entre vários ambientes com Docker
Transportando as aplicações entre vários ambientes com Docker
 
Trabalho jQuery
Trabalho jQueryTrabalho jQuery
Trabalho jQuery
 
Introdução à Programação Web com Angular
Introdução à Programação Web com AngularIntrodução à Programação Web com Angular
Introdução à Programação Web com Angular
 
Análise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e Zend
Análise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e ZendAnálise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e Zend
Análise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e Zend
 
Aplicativo aula03
Aplicativo aula03Aplicativo aula03
Aplicativo aula03
 
Flask e Docker - rumo a AWS!
Flask e Docker - rumo a AWS!Flask e Docker - rumo a AWS!
Flask e Docker - rumo a AWS!
 
LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04
 
Curso AngularJS - Parte 1
Curso AngularJS - Parte 1Curso AngularJS - Parte 1
Curso AngularJS - Parte 1
 
Docker de ponta a ponta: do Desenvolvimento à Nuvem - UNICID - Novembro-2019
Docker de ponta a ponta: do Desenvolvimento à Nuvem - UNICID - Novembro-2019Docker de ponta a ponta: do Desenvolvimento à Nuvem - UNICID - Novembro-2019
Docker de ponta a ponta: do Desenvolvimento à Nuvem - UNICID - Novembro-2019
 
Zend Framework 2 - Desenvolvimento Ágil Competente
Zend Framework 2 - Desenvolvimento Ágil CompetenteZend Framework 2 - Desenvolvimento Ágil Competente
Zend Framework 2 - Desenvolvimento Ágil Competente
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
 
Escalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLIDEscalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLID
 

Mais de Stefan Horochovec

Lei Geral de Proteção de Dados - LGPD
Lei Geral de Proteção de Dados - LGPDLei Geral de Proteção de Dados - LGPD
Lei Geral de Proteção de Dados - LGPD
Stefan Horochovec
 
Arquitetura Serverless na AWS
Arquitetura Serverless na AWSArquitetura Serverless na AWS
Arquitetura Serverless na AWS
Stefan Horochovec
 
Android Study Jam - GDG Dois Vizinhos - Primeira Reunião
Android Study Jam - GDG Dois Vizinhos - Primeira ReuniãoAndroid Study Jam - GDG Dois Vizinhos - Primeira Reunião
Android Study Jam - GDG Dois Vizinhos - Primeira Reunião
Stefan Horochovec
 
Android Study Jams - GDG Dois Vizinhos
Android Study Jams - GDG Dois VizinhosAndroid Study Jams - GDG Dois Vizinhos
Android Study Jams - GDG Dois Vizinhos
Stefan Horochovec
 
GDG Dois Vizinhos
GDG Dois VizinhosGDG Dois Vizinhos
GDG Dois Vizinhos
Stefan Horochovec
 
Primeiros passos - GIT
Primeiros passos - GITPrimeiros passos - GIT
Primeiros passos - GIT
Stefan Horochovec
 
Introdução ao AngularJS
Introdução ao AngularJSIntrodução ao AngularJS
Introdução ao AngularJS
Stefan Horochovec
 
Banco de dados orientado a objetos
Banco de dados orientado a objetosBanco de dados orientado a objetos
Banco de dados orientado a objetos
Stefan Horochovec
 
Gerenciamento de memoria
Gerenciamento de memoriaGerenciamento de memoria
Gerenciamento de memoria
Stefan Horochovec
 
Plataforma Android
Plataforma AndroidPlataforma Android
Plataforma Android
Stefan Horochovec
 
Flash plataform em dispositivos móveis
Flash plataform em dispositivos móveisFlash plataform em dispositivos móveis
Flash plataform em dispositivos móveis
Stefan Horochovec
 
Adobe Flex e Playbook
Adobe Flex e PlaybookAdobe Flex e Playbook
Adobe Flex e Playbook
Stefan Horochovec
 
FlexMania 2010
FlexMania 2010FlexMania 2010
FlexMania 2010
Stefan Horochovec
 

Mais de Stefan Horochovec (13)

Lei Geral de Proteção de Dados - LGPD
Lei Geral de Proteção de Dados - LGPDLei Geral de Proteção de Dados - LGPD
Lei Geral de Proteção de Dados - LGPD
 
Arquitetura Serverless na AWS
Arquitetura Serverless na AWSArquitetura Serverless na AWS
Arquitetura Serverless na AWS
 
Android Study Jam - GDG Dois Vizinhos - Primeira Reunião
Android Study Jam - GDG Dois Vizinhos - Primeira ReuniãoAndroid Study Jam - GDG Dois Vizinhos - Primeira Reunião
Android Study Jam - GDG Dois Vizinhos - Primeira Reunião
 
Android Study Jams - GDG Dois Vizinhos
Android Study Jams - GDG Dois VizinhosAndroid Study Jams - GDG Dois Vizinhos
Android Study Jams - GDG Dois Vizinhos
 
GDG Dois Vizinhos
GDG Dois VizinhosGDG Dois Vizinhos
GDG Dois Vizinhos
 
Primeiros passos - GIT
Primeiros passos - GITPrimeiros passos - GIT
Primeiros passos - GIT
 
Introdução ao AngularJS
Introdução ao AngularJSIntrodução ao AngularJS
Introdução ao AngularJS
 
Banco de dados orientado a objetos
Banco de dados orientado a objetosBanco de dados orientado a objetos
Banco de dados orientado a objetos
 
Gerenciamento de memoria
Gerenciamento de memoriaGerenciamento de memoria
Gerenciamento de memoria
 
Plataforma Android
Plataforma AndroidPlataforma Android
Plataforma Android
 
Flash plataform em dispositivos móveis
Flash plataform em dispositivos móveisFlash plataform em dispositivos móveis
Flash plataform em dispositivos móveis
 
Adobe Flex e Playbook
Adobe Flex e PlaybookAdobe Flex e Playbook
Adobe Flex e Playbook
 
FlexMania 2010
FlexMania 2010FlexMania 2010
FlexMania 2010
 

Último

Como fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptxComo fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptx
tnrlucas
 
Teoria de redes de computadores redes .doc
Teoria de redes de computadores redes .docTeoria de redes de computadores redes .doc
Teoria de redes de computadores redes .doc
anpproferick
 
PRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product ownerPRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product owner
anpproferick
 
Por que escolhi o Flutter - Campus Party Piauí.pdf
Por que escolhi o Flutter - Campus Party Piauí.pdfPor que escolhi o Flutter - Campus Party Piauí.pdf
Por que escolhi o Flutter - Campus Party Piauí.pdf
Ian Oliveira
 
Gestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefíciosGestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefícios
Rafael Santos
 
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Annelise Gripp
 
Orientações para utilizar Drone no espaço Brasil
Orientações para utilizar Drone no espaço BrasilOrientações para utilizar Drone no espaço Brasil
Orientações para utilizar Drone no espaço Brasil
EliakimArajo2
 

Último (7)

Como fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptxComo fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptx
 
Teoria de redes de computadores redes .doc
Teoria de redes de computadores redes .docTeoria de redes de computadores redes .doc
Teoria de redes de computadores redes .doc
 
PRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product ownerPRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product owner
 
Por que escolhi o Flutter - Campus Party Piauí.pdf
Por que escolhi o Flutter - Campus Party Piauí.pdfPor que escolhi o Flutter - Campus Party Piauí.pdf
Por que escolhi o Flutter - Campus Party Piauí.pdf
 
Gestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefíciosGestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefícios
 
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
 
Orientações para utilizar Drone no espaço Brasil
Orientações para utilizar Drone no espaço BrasilOrientações para utilizar Drone no espaço Brasil
Orientações para utilizar Drone no espaço Brasil
 

Componentizando a Web com Polymer

  • 1.
  • 2. Stefan Horochovec • Arquiteto de Software – CISS Software e Serviços; • Consultor: • Java EE; • Cloud Computing; • Mobile Solutions; • Revisor Técnico – Packpub Publishing; • Instrutor/Professor/Palestrante/Autor;
  • 3.
  • 4.
  • 6.
  • 7. E quando criamos um componente....
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 14. The dead is comming
  • 15.
  • 16. WebComponents • Especificação para implementação de componentes para Web; • Sugerida a 4 anos por Dimitri Glazkov; • Sugerida a implementação para que navegadores pudessem facilitar a criação e importação de componentes dentro de WebApps modernas; • A implementação da especificação faz com que o navegador faça o trabalho para o desenvolvedor que hoje API’s fazem (jQuery, etc); • Apenas o Google Chrome e o Opera dão suporte total a WebComponents;
  • 17. Especificações • CustomElements • Esta especificação descreve o método para permitir o autor para definir e usar novos tipos de elementos DOM de um documento. • Especificação: http://w3c.github.io/webcomponents/spec/custom/ • HTML Imports • HTML Imports são uma forma de incluir e reutilizar documentos HTML em outros documentos HTML. • Especificação: http://w3c.github.io/webcomponents/spec/imports/ • Templates • Esta especificação descreve um método para declarar inert Subtrees em HTML DOM e manipulá-los para instanciar fragmentos de documentos com conteúdo idêntico. • Especificação: https://html.spec.whatwg.org/multipage/scripting.html#the-template-element • Shadow DOM • Esta especificação descreve um método de estabelecer e manter limites funcionais entre as árvores do DOM permitindo, assim, o encapsulamento melhor funcional dentro da árvore DOM. • Especificação: http://w3c.github.io/webcomponents/spec/shadow/
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25. Polymer – O que é? • http://www.polymer-project.org/ • Conceito de criação de web-components para aplicações modernas; • Reutilização de componentes em suas Modern Webapps; • Mantido pelo Google; • Boilerplate: https://github.com/webcomponents/polymer-boilerplate
  • 26. Criando o seu template
  • 27.
  • 28.
  • 31. Criando o seu primeiro componente
  • 32.
  • 33.
  • 37.
  • 38.
  • 39.
  • 46. Paper Elements • Suíte de componentes modernos implementando o conceito Material Design; • Componentes baseados em: • Responsividade; • Usabilidade; • Especificação: http://www.google.com/design/spec/material-design/ introduction.html# • Elementos - Showcase: https://www.polymer-project.org/components/paper-elements/ demo.html#core-toolbar • Designer: https://www.polymer-project.org/tools/designer/