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
360
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
300
Sempre teste mas debug se precisar
larissaabreu
2
230
Guia prático para criação de componentes perfeitos
larissaabreu
1
210
Custom Elements Everywhere
larissaabreu
0
260
JavaScript e o teste filosofal
larissaabreu
0
94
Web Components: fazendo do futuro uma realidade através do JS - Brasília
larissaabreu
0
130
Web Components: fazendo do futuro uma realidade através do JS
larissaabreu
0
80
Componentes nativos: uma chance de mudar o futuro! - ABCDev 2018
larissaabreu
0
120
Dando poder ao seu CSS através de Custom Properties
larissaabreu
0
110
Other Decks in Programming
See All in Programming
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
160
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
930
A Gopher's Guide to Vibe Coding
danicat
0
180
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
2
270
パッケージ設計の黒魔術/Kyoto.go#63
lufia
2
310
為你自己學 Python - 冷知識篇
eddie
1
280
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
190
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
150
Honoアップデート 2025年夏
yusukebe
1
870
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
130
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
300
兎に角、コードレビュー
mitohato14
0
160
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Six Lessons from altMBA
skipperchong
28
4k
Embracing the Ebb and Flow
colly
87
4.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
For a Future-Friendly Web
brad_frost
179
9.9k
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