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
250
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
320
Shared web-components with StencilJS
felipesousa
0
500
Progressive Web Apps Done Right
felipesousa
1
600
Criando aplicações componentizadas com Polymer
felipesousa
0
340
Criando Aplicações Componentizadas com Polymer
felipesousa
0
130
Uma introdução a Angular 2
felipesousa
2
400
Other Decks in Programming
See All in Programming
効率的な開発手段として VRTを活用する
ishkawa
0
140
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
Team operations that are not burdened by SRE
kazatohiei
1
310
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
ふつうの技術スタックでアート作品を作ってみる
akira888
1
830
Discover Metal 4
rei315
2
130
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
86
28k
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
890
5つのアンチパターンから学ぶLT設計
narihara
1
170
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building Adaptive Systems
keathley
43
2.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
How STYLIGHT went responsive
nonsquared
100
5.6k
Thoughts on Productivity
jonyablonski
69
4.7k
Making Projects Easy
brettharned
116
6.3k
For a Future-Friendly Web
brad_frost
179
9.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Rails Girls Zürich Keynote
gr2m
95
14k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
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