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
開発生産性を上げるための生成AI活用術
starfish719
1
170
私はどうやって技術力を上げたのか
yusukebe
43
17k
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.1k
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
870
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1k
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
920
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
450
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
490
Le côté obscur des IA génératives
pascallemerrer
0
120
CSC305 Lecture 04
javiergs
PRO
0
250
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
590
株式会社 Sun terras カンパニーデック
sunterras
0
230
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Balancing Empowerment & Direction
lara
4
680
RailsConf 2023
tenderlove
30
1.2k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
4 Signs Your Business is Dying
shpigford
185
22k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Site-Speed That Sticks
csswizardry
11
880
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
What's in a price? How to price your products and services
michaelherold
246
12k
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