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
A magia dos componentes nativos
Search
Larissa Abreu
January 31, 2018
Programming
2
340
A magia dos componentes nativos
Larissa Abreu
January 31, 2018
Tweet
Share
More Decks by Larissa Abreu
See All by Larissa Abreu
Defesa contra as artes das trevas - Github (2020)
larissaabreu
0
270
Sempre teste mas debug se precisar
larissaabreu
2
210
Guia prático para criação de componentes perfeitos
larissaabreu
1
200
Custom Elements Everywhere
larissaabreu
0
230
JavaScript e o teste filosofal
larissaabreu
0
85
Web Components: fazendo do futuro uma realidade através do JS - Brasília
larissaabreu
0
120
Web Components: fazendo do futuro uma realidade através do JS
larissaabreu
0
74
Componentes nativos: uma chance de mudar o futuro! - ABCDev 2018
larissaabreu
0
110
Dando poder ao seu CSS através de Custom Properties
larissaabreu
0
100
Other Decks in Programming
See All in Programming
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
2
220
Amazon Bedrockマルチエージェントコラボレーションを諦めてLangGraphに入門してみた
akihisaikeda
1
160
⚪⚪の⚪⚪をSwiftUIで再現す る
u503
0
120
技術を改善し続ける
gumioji
0
180
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
750
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
340
Domain-Driven Design (Tutorial)
hschwentner
13
22k
Swift Testingのモチベを上げたい
stoticdev
2
200
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
250
SwiftUI移行のためのインプレッショントラッキング基盤の構築
kokihirokawa
0
170
Google Cloudとo11yで実現するアプリケーション開発者主体のDB改善
nnaka2992
1
110
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
130
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
11
540
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
GitHub's CSS Performance
jonrohan
1030
460k
Become a Pro
speakerdeck
PRO
26
5.2k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Writing Fast Ruby
sferik
628
61k
4 Signs Your Business is Dying
shpigford
183
22k
Side Projects
sachag
452
42k
Transcript
` E a magia dos componentes nativos
` @TheSweet_Lari Gamer, future Suicide Girl and Front-end Dev Larissa
Abreu @LarissaAbreu [complete aqui] Nem eu!
Antes
Antes Hoje
Antes Comunidade
@valledevs
Components? In FrontEnd
Web Components?
index.html <!doctype html> <html> <head> </head> <body> </body> </html> <link
rel="import" href=“harry-potter.html”> <harry-potter></harry-potter> Native!
How? W3C specifications
<link rel="import" href=“harry-potter.html”> <harry-potter></harry-potter> Custom Elements Shadow DOM Imports Template
None
What is Polymer? By Polyme Team
None
???????
2013
youtube.com/watch?v=7Q0-E_rZ_Cc&t
December 2013 Web Components Hype ? ? ? ?
After? Why didn't I know?
2014
November 2014 Polymer 0.5 Experiments ? ? ? ?
caniuse.com/#feat=template
2015
May 2015 Polymer 1.0 Ready to production ?
Shadow DOM v0 Custom Elements v0 The Problems
youtube.com/watch?v=7Q0-E_rZ_Cc&t
youtube.com/watch?v=7Q0-E_rZ_Cc&t
How to solve? Improving the platform
Shadow DOM v1 Custom Elements v1
youtube.com/watch?v=7Q0-E_rZ_Cc&t
youtube.com/watch?v=7Q0-E_rZ_Cc&t
2017
May 2017 Polymer 2.0 Do less magic ? ES6 Class
Hybrid Mode
youtube.com/watch?v=7Q0-E_rZ_Cc&t
How to solve? Look at the platform
ES Modules import myComponent from ‘./my-component.js' jakearchibald.com/2017/es-modules-in-browsers
ES youtube.com/watch?v=7Q0-E_rZ_Cc&t
Last problem! Management dependencies
Back to 2013 VS Management dependencies Solve version conflicts Flat
dependencies tree Active Community Management dependencies Solve version conflicts Flat dependencies tree Active Community
github.com/bower/bower/issues/2298
Today VS Management dependencies Solve version conflicts Flat dependencies tree
Active Community Management dependencies Solve version conflicts Flat dependencies tree Active Community
Today
Polymer 3.0 Preview ES
Final support? https://www.webcomponents.org/
None
Why Polymer?
Cross Stack?
None
Custom Elements Everywhere custom-elements-everywhere.com/
DEMO
Who?
+6000 Components
youtube.com/new
twitter.com/AJStacy06/status/857628546507968512
Community
None
#UseThePlatform
Thanks! #UseThePlatform