SlideShare uma empresa Scribd logo
1 de 28
Baixar para ler offline
Web components
construindo a web em blocos
@evaldobarbosa
php
developer
php
maranhão
gdg
são luís
uma ideia antiga!
reutilização de código
Delphi, Visual Studio,
Delphi 4 PHP
Exemplos de componentização
prototipar é preciso
Componentes no server
é viavel?
3 perguntas
temporalidade e contribuição
os … mais populares
estão fadados a morrer
https://www.youtube.com/watch?v=7Q0-
E_rZ_Cc
A novidade
document.querySelector()
https://angularjs.org/
são diretivas
Componentes no
AngularJS
anatomia de uma diretiva
<menubar></menubar>
nativo, com x-tags ou polymer
A realidade hoje
Ciclo de vida
create
leftDocument
enteredDocument
attributeChanged
exemplo nativo
exemplo x-tags
YEAH!
www.polymer-project.org/docs/elements/material.html
www.polymer-project.org/tools/designer/
seus elementos customizados
exemplo de uso
video-camera-element
perguntas?
obrigado!
twitter.com/evaldobarbosa
br.linkedin.com/in/evaldobarbosa
facebook.com/evaldo.barbosa.902

Mais conteúdo relacionado

Destaque

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 RealtimeJuarez Filho
 
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óriaFabiano Monte
 
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 webBeto Muniz
 
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 polymerMarcus Silva
 
WebApps com Web Components
WebApps com Web ComponentsWebApps com Web Components
WebApps com Web ComponentsBeto Muniz
 
The Beautiful Simplicity of ES2015
The Beautiful Simplicity of ES2015The Beautiful Simplicity of ES2015
The Beautiful Simplicity of ES2015Brandon Belvin
 
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-09Horacio Gonzalez
 
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
 
Tech talk polymer
Tech talk polymerTech talk polymer
Tech talk polymerYanuar W
 
Material Design - do smartphone ao desktop
Material Design - do smartphone ao desktopMaterial Design - do smartphone ao desktop
Material Design - do smartphone ao desktopHillary Sousa
 
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
 
Angular 2 overview workshop
Angular 2 overview workshopAngular 2 overview workshop
Angular 2 overview workshopDenis Gorbunov
 
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 designThiago Marques
 
Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'...
Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'...Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'...
Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'...Intersog
 

Destaque (20)

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
 
Polymer Starter Kit
Polymer Starter KitPolymer Starter Kit
Polymer Starter Kit
 
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
 
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
 
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
 
O futuro do Android
O futuro do AndroidO futuro do Android
O futuro do Android
 
WebApps com Web Components
WebApps com Web ComponentsWebApps com Web Components
WebApps com Web Components
 
Angular js gtg-27feb2013
Angular js gtg-27feb2013Angular js gtg-27feb2013
Angular js gtg-27feb2013
 
The Beautiful Simplicity of ES2015
The Beautiful Simplicity of ES2015The Beautiful Simplicity of ES2015
The Beautiful Simplicity of ES2015
 
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
Material designMaterial design
Material design
 
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)
 
Workshop de Web Components
Workshop de Web ComponentsWorkshop de Web Components
Workshop de Web Components
 
Tech talk polymer
Tech talk polymerTech talk polymer
Tech talk polymer
 
Material Design - do smartphone ao desktop
Material Design - do smartphone ao desktopMaterial Design - do smartphone ao desktop
Material Design - do smartphone ao desktop
 
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)
 
Angular 2 - a New Hope
Angular 2 - a New HopeAngular 2 - a New Hope
Angular 2 - a New Hope
 
Angular 2 overview workshop
Angular 2 overview workshopAngular 2 overview workshop
Angular 2 overview workshop
 
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
 
Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'...
Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'...Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'...
Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'...
 

Semelhante a Construindo a web com componentes

Desenvolvimento web com python e django
Desenvolvimento web com python e djangoDesenvolvimento web com python e django
Desenvolvimento web com python e djangoIgor Sobreira
 
Django - Desenvolvimento web ágil com Python
Django - Desenvolvimento web ágil com PythonDjango - Desenvolvimento web ágil com Python
Django - Desenvolvimento web ágil com PythonIgor Sobreira
 
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...Rio Info
 
Aula demonstrativa sobre DOI e HANDLE
Aula demonstrativa sobre DOI e HANDLEAula demonstrativa sobre DOI e HANDLE
Aula demonstrativa sobre DOI e HANDLESuelybcs .
 
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaAlexandre Tarifa
 
TDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .net
TDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .netTDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .net
TDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .netFabian Gehrke
 
Guião demotécnica
Guião demotécnicaGuião demotécnica
Guião demotécnicaSilvio Dias
 
Guiao demotecnica
Guiao demotecnicaGuiao demotecnica
Guiao demotecnicaSilvio Dias
 
Componentizando a Web com Polymer
Componentizando a Web com PolymerComponentizando a Web com Polymer
Componentizando a Web com PolymerStefan Horochovec
 
Html5 para estudantes universitários
Html5 para estudantes universitáriosHtml5 para estudantes universitários
Html5 para estudantes universitáriosPaullo Norato
 
SimulaRSO - Simulador de Recursos de Sistemas Operacionais
SimulaRSO - Simulador de Recursos de Sistemas OperacionaisSimulaRSO - Simulador de Recursos de Sistemas Operacionais
SimulaRSO - Simulador de Recursos de Sistemas OperacionaisCaio Ribeiro Pereira
 
Criando e Usando Helpers
Criando e Usando HelpersCriando e Usando Helpers
Criando e Usando HelpersJoaoVagner
 
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...iMasters
 
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )Getúlio Strapazzon
 
Javascript levado a serio
Javascript levado a serioJavascript levado a serio
Javascript levado a serioJaydson Gomes
 

Semelhante a Construindo a web com componentes (20)

Desenvolvimento web com python e django
Desenvolvimento web com python e djangoDesenvolvimento web com python e django
Desenvolvimento web com python e django
 
Django - Desenvolvimento web ágil com Python
Django - Desenvolvimento web ágil com PythonDjango - Desenvolvimento web ágil com Python
Django - Desenvolvimento web ágil com Python
 
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
 
Aula demonstrativa sobre DOI e HANDLE
Aula demonstrativa sobre DOI e HANDLEAula demonstrativa sobre DOI e HANDLE
Aula demonstrativa sobre DOI e HANDLE
 
HTML5
HTML5HTML5
HTML5
 
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
 
TDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .net
TDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .netTDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .net
TDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .net
 
Guião demotécnica
Guião demotécnicaGuião demotécnica
Guião demotécnica
 
Guiao demotecnica
Guiao demotecnicaGuiao demotecnica
Guiao demotecnica
 
Componentizando a Web com Polymer
Componentizando a Web com PolymerComponentizando a Web com Polymer
Componentizando a Web com Polymer
 
Django
DjangoDjango
Django
 
Html5 para estudantes universitários
Html5 para estudantes universitáriosHtml5 para estudantes universitários
Html5 para estudantes universitários
 
SimulaRSO - Simulador de Recursos de Sistemas Operacionais
SimulaRSO - Simulador de Recursos de Sistemas OperacionaisSimulaRSO - Simulador de Recursos de Sistemas Operacionais
SimulaRSO - Simulador de Recursos de Sistemas Operacionais
 
W2py pyconpe
W2py pyconpeW2py pyconpe
W2py pyconpe
 
Criando e Usando Helpers
Criando e Usando HelpersCriando e Usando Helpers
Criando e Usando Helpers
 
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
 
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
 
Javascript levado a serio
Javascript levado a serioJavascript levado a serio
Javascript levado a serio
 
HTML 5
HTML 5HTML 5
HTML 5
 
Apresentação ISFramework
Apresentação ISFrameworkApresentação ISFramework
Apresentação ISFramework
 

Mais de Evaldo Barbosa

A partir de hoje #soudev
A partir de hoje #soudevA partir de hoje #soudev
A partir de hoje #soudevEvaldo Barbosa
 
Como ser mais produtivo?
Como ser mais produtivo?Como ser mais produtivo?
Como ser mais produtivo?Evaldo Barbosa
 
Testes unitários com PHPUnit
Testes unitários com PHPUnitTestes unitários com PHPUnit
Testes unitários com PHPUnitEvaldo Barbosa
 
Estendendo o html com angular js
Estendendo o html com angular jsEstendendo o html com angular js
Estendendo o html com angular jsEvaldo Barbosa
 
Dicas de orientação a objetos
Dicas de orientação a objetosDicas de orientação a objetos
Dicas de orientação a objetosEvaldo Barbosa
 
Montagem de equipes de software
Montagem de equipes de softwareMontagem de equipes de software
Montagem de equipes de softwareEvaldo Barbosa
 

Mais de Evaldo Barbosa (10)

A partir de hoje #soudev
A partir de hoje #soudevA partir de hoje #soudev
A partir de hoje #soudev
 
Como ser mais produtivo?
Como ser mais produtivo?Como ser mais produtivo?
Como ser mais produtivo?
 
Web apis
Web apisWeb apis
Web apis
 
Testes unitários com PHPUnit
Testes unitários com PHPUnitTestes unitários com PHPUnit
Testes unitários com PHPUnit
 
Estendendo o html com angular js
Estendendo o html com angular jsEstendendo o html com angular js
Estendendo o html com angular js
 
Dicas de orientação a objetos
Dicas de orientação a objetosDicas de orientação a objetos
Dicas de orientação a objetos
 
Montagem de equipes de software
Montagem de equipes de softwareMontagem de equipes de software
Montagem de equipes de software
 
Angular js 4php
Angular js   4phpAngular js   4php
Angular js 4php
 
Phpub #8 websockets
Phpub #8   websocketsPhpub #8   websockets
Phpub #8 websockets
 
Divulgação 4.php
Divulgação 4.phpDivulgação 4.php
Divulgação 4.php