Guia prático para criação de componentes perfeitos

Guia prático para Componentes Perfeitos

@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=“front-in.html”> <front-in></front-in> 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 FrontIn extends HTMLElement { } constructor() { super(); }
customElements.define('front-in', FrontIn); shadowroot.appendChild(h1); const shadowroot = this.attachShadow({mode: ‘open'}); const h1 = document.createElement('h1'); h1.innerText = ‘Front in’; front-in.js

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

Utilizando propriedades

front-in.js class FrontIn extends HTMLElement { constructor() { super(); const
shadowroot = this.attachShadow({mode: 'open'}); const h1 = document.createElement('h1'); const local = this.getAttribute('local'); h1.innerText = ‘Front in ' + local; shadowroot.appendChild(h1); } } customElements.define('front-in', FrontIn);

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

Ciclo de vida

front-in.js class FrontIn extends HTMLElement { constructor() { super(); const
shadowroot = this.attachShadow({mode: 'open'}); const h1 = document.createElement('h1'); const local = this.getAttribute('local'); h1.innerText = 'Front in ' + local; shadowroot.appendChild(h1); } connectedCallback() { // Conectado ao DOM } } customElements.define('front-in', FrontIn);

Com o Polymer

yarn add @polymer/polymer //12k

front-in.js class FrontIn extends PolymerElement { }; customElements.define('front-in', FrontIn); import
{ html, PolymerElement } from '@polymer/polymer/polymer-element.js'; static get properties() { return { local: String }; }; static get template() { return html` <h1>Front in [[local]]</h1> `; };

Focando na Plataforma

boas práticas? web components Como te ajuda com

A11y Aria roles (semantic) Aria states (behavior) Focus Controle via
teclado Testes de acessibilidade

Testes Unitários Regressão visual Lint

Testes

boas práticas? Polymer Como te ajuda com

Performance Ready () AfterNextRender() LitHTML “Do less, be lazy”

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 

https://larissaabreu.github.io/web-components-good-practices/

"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

Guia prático para criação de componentes perfeitos

Guia prático para criação de componentes perfeitos

More Decks by Larissa Abreu

Other Decks in Programming

Featured

Transcript