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 - C4P CEJS 2017
Search
Felipe Sousa
February 11, 2017
Programming
1
190
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
280
Shared web-components with StencilJS
felipesousa
0
320
Progressive Web Apps Done Right
felipesousa
1
530
Criando aplicações componentizadas com Polymer
felipesousa
0
290
Criando Aplicações Componentizadas com Polymer
felipesousa
0
120
Uma introdução a Angular 2
felipesousa
2
340
Other Decks in Programming
See All in Programming
Anthropic Cookbook のおすすめレシピ
schroneko
7
870
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
180
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
420
Elm Form Validation
bkuhlmann
0
510
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
910
코틀린으로 멀티플랫폼 만들기
pangmoo
0
150
Java 22 Overview
kishida
1
180
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
330
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
Adopting Sorbet at Scale
ufuk
68
8.6k
The Cost Of JavaScript in 2023
addyosmani
16
3.8k
Fireside Chat
paigeccino
21
2.6k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
120
39k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
The Invisible Side of Design
smashingmag
294
49k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
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