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
Componentes nativos: uma chance de mudar o futu...
Search
Larissa Abreu
September 22, 2018
Programming
0
110
Componentes nativos: uma chance de mudar o futuro! - ABCDev 2018
Larissa Abreu
September 22, 2018
Tweet
Share
More Decks by Larissa Abreu
See All by Larissa Abreu
Defesa contra as artes das trevas - Github (2020)
larissaabreu
0
280
Sempre teste mas debug se precisar
larissaabreu
2
220
Guia prático para criação de componentes perfeitos
larissaabreu
1
200
Custom Elements Everywhere
larissaabreu
0
250
JavaScript e o teste filosofal
larissaabreu
0
90
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
77
Dando poder ao seu CSS através de Custom Properties
larissaabreu
0
110
Componentes nativos: uma chance de mudar o futuro!
larissaabreu
0
210
Other Decks in Programming
See All in Programming
Rubyの!メソッドをちゃんと理解する
alstrocrack
1
360
「MCPを使ってる人」が より詳しくなるための解説
yamaguchidesu
0
250
「理解」を重視したAI活用開発
fast_doctor
0
320
Instrumentsを使用した アプリのパフォーマンス向上方法
hinakko
0
250
OpenTelemetryで始めるベンダーフリーなobservability / Vendor-free observability starting with OpenTelemetry
seike460
PRO
0
110
REALITY コマンド作成チュートリアル
nishiuriraku
0
120
最速Green Tea 🍵 Garbage Collector
kuro_kurorrr
1
140
知識0からカンファレンスやってみたらこうなった!
syossan27
5
290
Boast Code Party / RubyKaigi 2025 After Event
lemonade_37
0
110
Cloudflare Workersで進めるリモートMCP活用
syumai
11
1.5k
ぽちぽち選択するだけでOSSを読めるVSCode拡張機能
ymbigo
14
6.5k
ビカム・ア・コパイロット
ymd65536
1
150
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
91
6k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
Raft: Consensus for Rubyists
vanstee
137
6.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Invisible Side of Design
smashingmag
299
50k
Rails Girls Zürich Keynote
gr2m
94
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
620
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
Facilitating Awesome Meetings
lara
54
6.4k
Transcript
uma chance de mudar o futuro! Componentes nativos
@TheSweet_Lari Gamer, future Suicide Girl and Front-end Dev Larissa Abreu
@LarissaAbreu larissaabreu.github.io
Por onde começar?
None
Tecnologias de Base
None
De onde vem? W3C (World Wide Web Consorcium)
Tim Berners-Lee Web HTML Padrões
Quem faz parte? Google Apple Mozilla Microsoft
Vários working groups CSS HTML API (JS)
Working groups? Membros das empresas Membros do próprio W3C Especialistas
convidados
Como é a evolução das tecnologias de base no W3C?
jQuery -> Query Selector Ramda -> Features funcionais* * Está
em discussão junto ao TC-39 para ser implementado no core
Pré-processadores -> Custom Properties * Frameworks -> Grid layout *
Variáveis nativas
Nem tudo são flores
Como funciona o processo atualmente? https://www.w3.org/2017/Process-20170301/
None
None
https://www.w3.org/Style/CSS/current-work
https://www.w3.org/standards/history/css-variables - https://www.w3.org/TR/css-variables-1/ Custom properties 2012 2013 2015 2018 (First
Working Draft) (Working Draft) (Candidate Recomendation) CSS CUSTOM PROPERTIES FOR CASCADING VARIABLES MODULE LEVEL 1 ?
https://caniuse.com/#feat=css-variables
Quanto tempo levará para o Virtual Dom ser nativo?
None
Grande problema do tempo
Como resolver? Deixando os desenvolvedores criarem features nativas sozinhos
Prototype Transpiler Polyfill
Houdini * Atualmente no estágio anterior ao First Working Draft,
Editor Draft
Como criar novas tags de forma nativa?
<abcdev-2018>
import {html, PolymerElement} from '@polymer/polymer/polymer-element.js'; class Abcdev2018 extends PolymerElement {
}; static get template() { return html` <h1>Olá ABC Dev!</h1> `; } customElements.define(‘abcdev-2018’, Abcdev2018); Custom Elements Template Shadow DOM
None
2013
youtube.com/watch?v=7Q0-E_rZ_Cc&t
What is Polymer? By Polymer Team
None
Cross Stack?
None
None
Custom Elements Everywhere custom-elements-everywhere.com/
Who?
+6000 Components
youtube.com/new
twitter.com/AJStacy06/status/857628546507968512
Até onde podemos chegar com os componentes nativos?
None
Thanks! #UseThePlatform @TheSweet_Lari @LarissaAbreu larissaabreu.github.io