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
120
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
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
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
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
450
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
330
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
360
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.4k
Le côté obscur des IA génératives
pascallemerrer
0
150
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
1k
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
580
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
110
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
530
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
400
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
330
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Scaling GitHub
holman
463
140k
How STYLIGHT went responsive
nonsquared
100
5.8k
Speed Design
sergeychernyshev
32
1.2k
How GitHub (no longer) Works
holman
315
140k
Rails Girls Zürich Keynote
gr2m
95
14k
Site-Speed That Sticks
csswizardry
12
900
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
We Have a Design System, Now What?
morganepeng
53
7.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
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