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
340
Shared web-components with StencilJS
felipesousa
0
540
Progressive Web Apps Done Right
felipesousa
1
630
Criando aplicações componentizadas com Polymer
felipesousa
0
350
Criando Aplicações Componentizadas com Polymer
felipesousa
0
130
Uma introdução a Angular 2
felipesousa
2
410
Other Decks in Programming
See All in Programming
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
980
開発生産性を上げるための生成AI活用術
starfish719
3
560
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
1k
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
400
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
210
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
710
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
540
Go言語はstack overflowの夢を見るか?
logica0419
0
230
Devoxx BE - Local Development in the AI Era
kdubois
0
130
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.3k
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
150
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
810
Featured
See All Featured
It's Worth the Effort
3n
187
28k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Being A Developer After 40
akosma
91
590k
How to Think Like a Performance Engineer
csswizardry
27
2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Unsuck your backbone
ammeep
671
58k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Writing Fast Ruby
sferik
629
62k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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