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
270
Sempre teste mas debug se precisar
larissaabreu
2
200
Guia prático para criação de componentes perfeitos
larissaabreu
1
200
Custom Elements Everywhere
larissaabreu
0
230
JavaScript e o teste filosofal
larissaabreu
0
85
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
74
Dando poder ao seu CSS através de Custom Properties
larissaabreu
0
100
Componentes nativos: uma chance de mudar o futuro!
larissaabreu
0
200
Other Decks in Programming
See All in Programming
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
Honoとフロントエンドの 型安全性について
yodaka
4
250
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.8k
Featured
See All Featured
BBQ
matthewcrist
86
9.5k
Gamification - CAS2011
davidbonilla
80
5.1k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Navigating Team Friction
lara
183
15k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
4 Signs Your Business is Dying
shpigford
182
22k
Typedesign – Prime Four
hannesfritz
40
2.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Rails Girls Zürich Keynote
gr2m
94
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
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