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
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
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
僕がつくった48個のWebサービス達
yusukebe
20
17k
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
750
Tuning GraphQL on Rails
pyama86
2
1.2k
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
160
Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react
harunatsujita
8
4.9k
ヤプリ新卒SREの オンボーディング
masaki12
0
100
RailsのPull requestsのレビューの時に私が考えていること
yahonda
5
2.6k
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.4k
Quine, Polyglot, 良いコード
qnighy
4
610
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
240
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
420
C++でシェーダを書く
fadis
6
3.8k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
65
11k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
520
Designing for humans not robots
tammielis
249
25k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Fireside Chat
paigeccino
33
3k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
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