Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Criando aplicações componentizadas com Polymer ...
Search
Felipe Sousa
February 11, 2017
Programming
1
220
Criando aplicações componentizadas com Polymer - C4P CEJS 2017
Felipe Sousa
February 11, 2017
Tweet
Share
More Decks by Felipe Sousa
See All by Felipe Sousa
DevFest Santiago 2019 - Progressive Web Apps Done Right
felipesousa
0
290
Shared web-components with StencilJS
felipesousa
0
390
Progressive Web Apps Done Right
felipesousa
1
560
Criando aplicações componentizadas com Polymer
felipesousa
0
310
Criando Aplicações Componentizadas com Polymer
felipesousa
0
130
Uma introdução a Angular 2
felipesousa
2
360
Other Decks in Programming
See All in Programming
Subclassing, Composition, Python, and You
hynek
3
190
CSC509 Lecture 06
javiergs
PRO
0
130
Quarto Clean Theme
nicetak
0
220
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
110
Vue SFCのtemplateでTypeScriptの型を活用しよう
tsukkee
3
930
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
210
本編では話さない Zig の話
andpad
2
120
How to debug Xdebug... or any other weird bug in PHP
dunglas
2
1.5k
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
1.2k
offers_20241022_imakiire.pdf
imakurusu
1
130
CSC509 Lecture 07
javiergs
PRO
0
140
UnJSで簡単に始めるCLIツール開発 / cli-tool-development-with-unjs
aoseyuu
2
380
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
Fireside Chat
paigeccino
32
3k
What's new in Ruby 2.0
geeforr
342
31k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Making Projects Easy
brettharned
115
5.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Facilitating Awesome Meetings
lara
49
6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Transcript
Criando aplicacoes componentizadas com Polymer. @felipz_sousa ~ ~
Felipe Sousa Front End Developer GDG Fortaleza @felipz_sousa
Web!
PLATAFORMA QUE MAIS CRESCE DO MUNDO!
Patterns Especifications Definitions
None
back to the past…
Frameworks!
exemplo de frameworks
Components
Estrutura Estilo Funções
Menu Post Sidemenu
Web Components
Shadow-DOM Custom Elements Imports Templates { Web Components
Shadow-DOM Esconde detalhes de implementacao.
Custom Elements Criacao do seus proprios elementos HTML.
Imports Importacao de arquivos .HTML
Cria o escopo de um elemento customizado. Templates
None
Library > 1.8/2.0-preview Like a Web Components Open Source
#UseThePlatform
<link rel=“import” href=“../polymer/polymer.html”> <dom-module id="my-personal-component"> <template> <style> :host { …
} </style> <h1> Hello! I’m a personal component! </h1> </template> <script> Polymer({ is: “my-personal-component” }); </script> </dom-module>
<link rel=“import” href=“../polymer/polymer.html”> <dom-module id="my-personal-component"> <template> <style> :host { …
} </style> <h1> Hello! I’m a personal component! </h1> </template> <script> Polymer({ is: “my-personal-component” }); </script> </dom-module> Imports
<link rel=“import” href=“../polymer/polymer.html”> <dom-module id="my-personal-component"> <template> <style> :host { …
} </style> <h1> Hello! I’m a personal component! </h1> </template> <script> Polymer({ is: “my-personal-component” }); </script> </dom-module> Custom Elements
<link rel=“import” href=“../polymer/polymer.html”> <dom-module id="my-personal-component"> <template> <style> :host { …
} </style> <h1> Hello! I’m a personal component! </h1> </template> <script> Polymer({ is: “my-personal-component” }); </script> </dom-module> Templates
<link rel=“import” href=“../polymer/polymer.html”> <dom-module id="my-personal-component"> <template> <style> :host { …
} </style> <h1> Hello! I’m a personal component! </h1> </template> <script> Polymer({ is: “my-personal-component” }); </script> </dom-module> Component!
variables/properties Properties
Repeats
Conditions
Progressive Web Apps
Re-engageable Connectivity- independent Installable App-like Responsive Linkable
https://shop.polymer-project.org
Who is using Polymer? https://github.com/Polymer/polymer/wiki/Who's-using-Polymer%3F
None
None
None
polymer-cli https://www.polymer-project.org/1.0/docs/tools/polymer-cli >
Use the Platform!
Available in: speakerdeck.com/felipesousa
THANK’S! github.com/felipesousa