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
290
Sempre teste mas debug se precisar
larissaabreu
2
220
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
92
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
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
iOS開発スターターキットの作り方
akidon0000
0
200
AI Ramen Fight
yusukebe
0
120
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
240
AIともっと楽するE2Eテスト
myohei
9
3.1k
What's new in AppKit on macOS 26
1024jp
0
180
新しいモバイルアプリ勉強会(仮)について
uetyo
1
110
20250708_JAWS_opscdk
takuyay0ne
2
150
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
17
6.1k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
280
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
160
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
710
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Code Reviewing Like a Champion
maltzj
524
40k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Visualization
eitanlees
146
16k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
BBQ
matthewcrist
89
9.7k
Done Done
chrislema
184
16k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.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