Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Por onde começar?

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Componentes? No Front-end

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Web Components?

Slide 8

Slide 8 text

index.html Nativo!

Slide 9

Slide 9 text

Como? Especificações W3C

Slide 10

Slide 10 text

Custom Elements Shadow DOM Imports Template

Slide 11

Slide 11 text

Shadow DOM Escopo nativo do CSS

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

O que é Polymer? Pelo time do Polymer

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

???????

Slide 16

Slide 16 text

2013

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Dezembro 2013 Web Components Hype ? ? ? ?

Slide 19

Slide 19 text

O que aconteceu? Por que ninguém conhece?

Slide 20

Slide 20 text

2014

Slide 21

Slide 21 text

Novembro 2014 Polymer 0.5 Experiments ? ? ? ?

Slide 22

Slide 22 text

caniuse.com/#feat=template

Slide 23

Slide 23 text

2015

Slide 24

Slide 24 text

Maio 2015 Polymer 1.0 Ready to production ?

Slide 25

Slide 25 text

Shadow DOM v0 Custom Elements v0 Os Problemas

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Como resolver? Melhorando a plataforma

Slide 29

Slide 29 text

Shadow DOM v1 Custom Elements v1

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

2017

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Como resolver? Olhando para a plataforma

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Último problema! Gerenciamento de dependências

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

github.com/bower/bower/issues/2298

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Hoje

Slide 43

Slide 43 text

Polymer 3.0 Is here! ES

Slide 44

Slide 44 text

Google IO - 09/05/2018

Slide 45

Slide 45 text

Na prática Criando web component (vanilla)

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

index.html

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Utilizando propriedades

Slide 50

Slide 50 text

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);

Slide 51

Slide 51 text

index.html

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Ciclo de vida

Slide 54

Slide 54 text

Slide 55

Slide 55 text

Com o Polymer

Slide 56

Slide 56 text

yarn add @polymer/polymer //12k

Slide 57

Slide 57 text

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`

BrazilJS on the Road [[local]]

`; };

Slide 58

Slide 58 text

Focando na Plataforma

Slide 59

Slide 59 text

boas práticas? web components Como te ajuda com

Slide 60

Slide 60 text

A11y Aria roles Aria states Focus Controle via teclado

Slide 61

Slide 61 text

A11y

Slide 62

Slide 62 text

Testes Unitários Regressão visual Lint

Slide 63

Slide 63 text

Testes

Slide 64

Slide 64 text

boas práticas? Polymer Como te ajuda com

Slide 65

Slide 65 text

Performance Ready () AfterNextRender() LitHTML

Slide 66

Slide 66 text

API estilo Custom properties

Slide 67

Slide 67 text

API JS ReflectToAttribute Observer

Slide 68

Slide 68 text

muito E MAIS!

Slide 69

Slide 69 text

Cross Stack?

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

Custom Elements Everywhere custom-elements-everywhere.com/

Slide 72

Slide 72 text

Design system Valle

Slide 73

Slide 73 text

Suporte?

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

Quem usa?

Slide 77

Slide 77 text

+6000 Components

Slide 78

Slide 78 text

youtube.com/new

Slide 79

Slide 79 text

twitter.com/AJStacy06/status/857628546507968512 

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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