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
330
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
250
Sempre teste mas debug se precisar
larissaabreu
2
190
Guia prático para criação de componentes perfeitos
larissaabreu
1
190
Custom Elements Everywhere
larissaabreu
0
220
JavaScript e o teste filosofal
larissaabreu
0
84
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
72
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
CSC509 Lecture 07
javiergs
PRO
0
140
組織に自動テストを書く文化を根付かせる戦略(2024秋版) / Building Automated Test Culture 2024 Autumn Edition
twada
PRO
9
3.6k
テスト駆動開発✅️
akitoshiga
1
170
Memory API: Patterns, Use Cases, and Performance
josepaumard
2
200
Workflow automationによるインシデント原因調査の自動化
showwin
1
110
Golang と Erlang
taiyow
7
1.8k
Debugging: A Few Things You Should Know
jmatsu
1
130
自分だけの世界を創るクリエイティブコーディング / Creative Coding: Creating Your Own World
chobishiba
2
2.1k
watsonx.ai Dojo #3 プロンプトエンジニアリング入門
oniak3ibm
PRO
0
410
CSC509 Lecture 06
javiergs
PRO
0
130
急速に利用拡大を続ける飲食店向けサービスで 店内端末同士のローカル通信を追加設定なしで実現した話
whatasoda
0
140
現場から考えるソフトウェアエンジニアリングの価値と実験
nomuson
1
140
Featured
See All Featured
Optimizing for Happiness
mojombo
376
69k
Teambox: Starting and Learning
jrom
132
8.7k
Producing Creativity
orderedlist
PRO
341
39k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
Statistics for Hackers
jakevdp
796
220k
Adopting Sorbet at Scale
ufuk
73
9k
Into the Great Unknown - MozCon
thekraken
31
1.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
5
130
How STYLIGHT went responsive
nonsquared
95
5.1k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
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