Web Components 100% reutilizables

LitElements Desarrollando componentes 100% reutilizables

Freddy Montes @fmontes Lead Frontend Developer Web Designer @ DotCMS
• Angular • Node • React • Web Components

¿De qué les voy a hablar hoy? ¿Qué son Web
Components? y que solucionan 1 Como crearlos con LitElement 2 Como usarlos en React, Svelte y Angular 3

Backbone vs Ember vs Knockout

jQuery vs React vs Angular vs Vue

Web Components

Bloque de UI reutilizable que encapsula todo el HTML, CSS
y JavaScript

Sin frameworks

APIs para crear WC Custom Elements Shadow DOM ES Modules
HTML Templates

Beneﬁcios •Permite adoptar rápidamente la última tecnología de frontend •Design
Systems •Es 100% reutilizables

¿En qué se parecen a los componentes de frameworks? •
Pueden o no tener state • Propiedades • Eventos • Encapsulan sus estilos • Lifecycle métodos o hooks

Ok, pero ¿quién lo usa? 5-8% De las páginas cargadas
con Google Chrome

Crecimiento

– Chrome Platform Status Eso convierte a los Web Components
en una de las características de plataforma web más exitosas lanzada en los últimos cinco años

Browser Support

¿No mas frameworks?

En resumen… • Web Components te permite desarrollar componentes reutilizables
• 5 y 8% de todas las páginas cargadas en Google Chrome • Usado por Google, Youtube, Apple, Github entre otros • Soportado por la mayoría de los browsers modernos y polyﬁlls • No reemplaza frameworks sino complementa

LitElement • Usa una librería propia de HTML para renderizar
en el Shadow DOM • Agrega API para administrar propiedades y atributos • Los elementos se actualizan cuando cambian sus propiedades

LitElement

Requerimientos • NodeJS • NPM • Polymer CLI • Rollup,
Webpack, Parcel o lo que quieran

Instalar polymer-cli $ npm install -g polymer-cli

Inicializamos un proyecto • Creamos una carpeta con el nombre
que queramos • Corremos $ npm init -y para crear el: package.json • Instalamos lit element $ npm i lit-element

Estructura de archivos !"" src # $"" app-main # $""
app-main.js !"" index.html $"" styles.css

Index <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta
name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>LitElement</title> <script type="module" src="src/app-main/app-main.js"></script> <link rel="stylesheet" href="styles.css" /> </head> <body> <app-main></app-main> </body> </html> index.html

Nuestro primer Web Component import { LitElement, html } from
'lit-element'; class AppMain extends LitElement { render() { return html` <h1>Hello World</h1> `; } } customElements.define('app-main', AppMain); app-main.js

Corremos nuestro proyecto en dev mode $ polymer serve

Desarrollando Components Templates Styles Properties Events Lifecycle

¿Vemos código?

Templates

render method import { LitElement, html } from 'lit-element'; class
MyElement extends LitElement { render() { return html` <p>template content</p> `; } }

Loops render() { return html` <ul> ${this.myArray.map(i => html`<li>${i}</li>`)} </ul>
`; }

Conditions render() { return html` ${this.myBool? html`<p>Render some HTML if
myBool is true</p>`: html`<p>Render some other HTML if myBool is false</p>`} `; }

Mostrar propiedades render() { return html`<div id="${this.prop2}"></div>` }

Bindear a atributos render() { html` <input type="text" ?disabled="${this.prop3}" />
<input type="checkbox" .value="${this.prop4}"/> `; }

Usar slots render() { return html` <div> <slot></slot> </div> `;
}

Pasarle hijos <my-element> <p>Render me</p> </my-element>

Resultado <div> <p>Render me</p> </div>

Styles

Agregar estilos import { LitElement, css, html } from 'lit-element';
class MyElement extends LitElement { static get styles() { return css` div { color: red; } `; } render() { return html` <div>I'm styled!</div> `; } }

Estilos al component en si static get styles() { return
css` :host { display: block; } :host([hidden]) { display: none; } `; }

Estilos externos my-element { display: inline-block; }

CSS Properties static get styles() { return css` :host {
color: var(--themeColor); } `; }

Propiedades

¿Como funcionan? 1 Una propiedad puede (o no) reﬂejarse en
un atributo del Web Component 2 Cada vez que una propiedad cambia se re-renderea 3 Direct comparison: oldValue !== newValue

Declarar propiedades class MyElement extends LitElement { static get properties()
{ return { mystring: { type: String }, mynumber: { type: Number }, mybool: { type: Boolean } }; } render() { return html`<h1>Hello World</h1>`; } }

Inicializar propiedades import { LitElement, html } from 'lit-element'; class
MyElement extends LitElement { constructor() { super(); // Sin super no se renderea del todo this.mystring = 'Hello World'; this.mynumber = 5; this.mybool = false; } }

Inicializar propiedades desde atributos <my-element mystring="hello world" mynumber="5" mybool></my-element>

Events

Escuchar eventos import { LitElement, html } from 'lit-element'; class
MyElement extends LitElement { render() { return html`<button @click="${this.handleClick}">`; } }

Eventos globales import { LitElement, html } from 'lit-element'; class
MyElement extends LitElement { constructor() { super(); this.addEventListener('DOMContentLoaded', this.handleLoaded); } }

Disparar eventos import { LitElement, html } from 'lit-element'; class
MyElement extends LitElement { mouseoverHandler(e) { let click = new Event('click'); this.dispatchEvent(click); } render() { return html` <div @mouseover="${this.mouseoverHandler}"> Hello World </div> `; } }

Custom Events class MyElement extends LitElement { mouseoverHandler(e) { let
event = new CustomEvent('my-event', { detail: { message: 'Something important happened' } }); this.dispatchEvent(event); } render() { return html` <div @mouseover="${this.mouseoverHandler}"> Hello World </div> `; } }

Escuchar eventos en JavaScript const myElement = document.querySelector('my-element'); myElement.addEventListener('my-event', (e)
=> { console.log(e) });

Lifecycle

Nativos 1. connectedCallback: Se ejecuta cuando se agrega al DOM.
2. disconnectedCallback: Se ejecuta cuando se remueve del DOM. 3. adoptedCallback: Se ejecuta cuando se mueve a un nuevo documento. 4. attributeChangedCallback: Se ejecuta cuando un atributo se agrega, cambia o remueve.

Eventos en Window o Document class MyElement extends LitElement {
connectedCallback() { super.connectedCallback(); document.addEventListener('readystatechange', this.handleChange); } disconnectedCallback() { document.removeEventListener('readystatechange', this.handleChange); super.disconnectedCallback(); } }

LitElement te permite •Usar su template library •Encapsular estilos •Agregar
propiedades •Emitir y escuchar eventos

¿Como los usamos?

Build Publish Install

Demo time!

$ npm install lit-elements-demo

Svelte

Angular

Web Components • Piezas reusables de UI que se pueden
usar con cualquier tecnología Web • Se pueden comenzar a usar hoy sin necesidad de reemplazar tu stack • Se crean usando API nativos del browser • No vienen a reemplazar los frameworks sino a complementarlos

Links • github.com/fmontes/lit-element-demo • lit-element.polymer-project.org • webcomponents.org

Web Components 100% reutilizables

Web Components 100% reutilizables

More Decks by Freddy Montes

Other Decks in Programming

Featured

Transcript