Web Components: fazendo do futuro uma realidade através do JS

Web components Fazendo do futuro uma realidade através do JavaScript

@TheSweet_Lari Gamer, future Suicide Girl and Front-end Dev Larissa Abreu
@LarissaAbreu larissaabreu.github.io

Por onde começar?

Componentes? No Front-end

Web Components?

index.html <!doctype html> <html> <head> </head> <body> </body> </html> <link
rel="import" href=“brazil-js.html”> <brazil-js></brazil-js> Nativo!

Como? Especificações W3C

Shadow DOM Escopo nativo do CSS

O que é Polymer? Pelo time do Polymer

???????

youtube.com/watch?v=7Q0-E_rZ_Cc&t 

Dezembro 2013 Web Components Hype ? ? ? ?

O que aconteceu? Por que ninguém conhece?

Novembro 2014 Polymer 0.5 Experiments ? ? ? ?

caniuse.com/#feat=template

Maio 2015 Polymer 1.0 Ready to production ?

Shadow DOM v0 Custom Elements v0 Os Problemas

https://caniuse.com/#feat=custom-elements

https://caniuse.com/#feat=shadowdom

Como resolver? Melhorando a plataforma

Shadow DOM v1 Custom Elements v1

https://caniuse.com/#feat=custom-elementsv1

https://caniuse.com/#feat=shadowdomv1

Maio 2017 Polymer 2.0 Do less magic ? ES6 Classes
Modo Híbrido

https://caniuse.com/#feat=imports

Como resolver? Olhando para a plataforma

ES Modules import myComponent from ‘./my-component.js' jakearchibald.com/2017/es-modules-in-browsers

ES https://caniuse.com/#feat=es6-module

Último problema! Gerenciamento de dependências

De volta para 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

Hoje em dia VS Management dependencies Solve version conflicts Flat
dependencies tree Active Community Management dependencies Solve version conflicts Flat dependencies tree Active Community

Polymer 3.0 Is here! ES

Google IO - 09/05/2018

Na prática Criando web component (vanilla)

class BrazilJs extends HTMLElement { } constructor() { super(); }
customElements.define('brazil-js', BrazilJs); shadowroot.appendChild(h1); const shadowroot = this.attachShadow({mode: ‘open'}); const h1 = document.createElement('h1'); h1.innerText = 'BrazilJS on the Road'; brazil-js.js

index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body>
</body> </html> <brazil-js></brazil-js> <script type="module" src="brazil-js.js"></script>

Utilizando propriedades

brazil-js.js class BrazilJs extends HTMLElement { constructor() { super(); const
shadowroot = this.attachShadow({mode: 'open'}); const h1 = document.createElement('h1'); const local = this.getAttribute('local'); h1.innerText = 'BrazilJS on the Road ' + local; shadowroot.appendChild(h1); } } customElements.define('brazil-js', BrazilJs);

index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body>
<brazil-js local="Belo Horizonte"></brazil-js> <script type="module" src="brazil-js.js"></script> </body> </html>

Ciclo de vida

brazil-js.js class BrazilJs extends HTMLElement { constructor() { super(); const
shadowroot = this.attachShadow({mode: 'open'}); const h1 = document.createElement('h1'); const local = this.getAttribute('local'); h1.innerText = 'BrazilJS on the Road ' + local; shadowroot.appendChild(h1); } connectedCallback() { // Conectado ao DOM } } customElements.define('brazil-js', BrazilJs);

Com o Polymer

yarn add @polymer/polymer //12k

brazil-js.js class BrazilJs extends PolymerElement { }; customElements.define('brazil-js', BrazilJs); import
{ html, PolymerElement } from '@polymer/polymer/polymer-element.js'; static get properties() { return { local: String }; }; static get template() { return html` <h1>BrazilJS on the Road [[local]]</h1> `; };

Focando na Plataforma

boas práticas? web components Como te ajuda com

A11y Aria roles Aria states Focus Controle via teclado

Testes Unitários Regressão visual Lint

Testes

boas práticas? Polymer Como te ajuda com

Performance Ready () AfterNextRender() LitHTML

API estilo Custom properties

API JS ReflectToAttribute Observer

muito E MAIS!

Cross Stack?

Custom Elements Everywhere custom-elements-everywhere.com/

Design system Valle

Suporte?

Quem usa?

+6000 Components

youtube.com/new

twitter.com/AJStacy06/status/857628546507968512 

"Ter componentes acessíveis, testados e performáticos é o primeiro passo
para que sua aplicação também seja!" - Larissa Abreu

Thanks! #UseThePlatform @TheSweet_Lari @LarissaAbreu larissaabreu.github.io

Web Components: fazendo do futuro uma realidade através do JS

Web Components: fazendo do futuro uma realidade através do JS

More Decks by Larissa Abreu

Other Decks in Technology

Featured

Transcript