Introdução a componentes Lit

Lit é uma biblioteca que ajuda na criação de componentes web de forma simples e rápida. Componentes Lit fornece uma camada adicional sobre a API de componentes web, já suportada nativamente pelos navegadores.

Para usar a biblioteca podemos, instalar o pacote node:

npm i lit

Com componentes lit podemos criar componentes web com JavaScript ou TypeScript:

// exemplo de Componentes lit com JavaScript

import {html, css, LitElement} from 'lit';

export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  static properties = {
    name: {type: String},
  };

  constructor() {
    super();
    this.name = 'Somebody';
  }

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}
customElements.define('simple-greeting', SimpleGreeting);Code language: JavaScript (javascript)

//exemplo de Componentes lit com TypeScript
import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  @property()
  name = 'Somebody';

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}Code language: JavaScript (javascript)

Como podemos ver, trabalhando com TypeScript simplifica o código, pois algumas funcionalidades são injetadas utilizando as funcionalidades da linguagem TypeScript.

Vantagens de utilizar componentes Lit

Por ser construido em componentes web, Lit não depende de compilação e pode ser integrado em qualquer framework front-end. Outro vantagem de se trabalhar com componentes web é o fato que você não precisa migrar toda a sua aplicação, ela pode ser feita de forma gradual. Além dessas vantagens podemos adicionar os seguintes pontos:

Antecipe as etapas de desenvolvimento – Com base nos padrões de Web Components, o Lit adiciona exatamente o que você precisa para ser feliz e produtivo: reatividade, modelos declarativos e um punhado de recursos inteligentes para reduzir o clichê e facilitar o seu trabalho. Cada recurso dos componentes Lit é cuidadosamente projetado com a evolução da plataforma web em mente.

Biblioteca superleve – Pesando cerca de 5 KB (minificado e compactado), o Lit ajuda a manter o tamanho do pacote pequeno e o tempo de carregamento curto. E a renderização é incrivelmente rápida, porque o Lit toca apenas as partes dinâmicas da sua interface do usuário ao atualizar – não há necessidade de reconstruir uma árvore virtual e diferenciá-la com o DOM.

Interoperável e pronto para o futuro – Cada componente Lit é um componente web nativo, com o superpoder da interoperabilidade. Os componentes da Web funcionam em qualquer lugar que você use HTML, com qualquer estrutura ou nenhuma. Isso torna o Lit ideal para criar componentes compartilháveis, sistemas de design ou sites e aplicativos de manutenção prontos para o futuro.

O que podemos construir com Lit?

Lit é na sua essência são componentes web, que rodam nativamente em todos os navegadores modernos, com Lit podemos criar componentes compartilháveis nas nossas aplicações, Design System e aplicações de forma progressiva.

Se você precisa entregar conteúdo interativo ou recursos que caem em qualquer site, construídos em qualquer stack de desenvolvimento? Como eles são suportados nativamente por navegadores, os componentes da Web são a solução perfeita — e o Lit os torna fáceis de construir.

Um Design System ajuda a criar experiências consistentemente, perfeito para times de larga escala e excelente para sua marca. Mas e se a sua organização usa várias estruturas? Com o Lit, você pode criar um conjunto de componentes que funcione para cada equipe. Uma das empresas que faz isso muito bem é o banco ING da Holanda, eles possuem uma biblioteca de componente compartilhada por todos os produtos da empresa.

Funcionalidade da biblioteca Lit

“Ok fellyph, Você falou de todos os benefícios, quais são os recursos que a biblioteca oferece?” Para responder essa pergunta irei listar os seguintes funcionalidades:

Custom Elements

Os componentes lit são elementos personalizados padrão, portanto, o navegador os trata exatamente como elementos internos. Use-os em HTML escrito à mão ou código de estrutura, produza-os do seu CMS ou construtor de sites estático.

//Componentes Lit simples com typescript

import { LitElement, html } from 'lit'
import { customElement } from 'lit/decorators.js'

@customElement('meu-componente')
export class MeuComponente extends LitElement {
  render() {
    return html`
      <div class="card">
        Meu primeiro componente lit
      </div>
    `
  }
}Code language: JavaScript (javascript)

Estilos com escopo

Lit abrange os seus estilos por padrão, usando Shadow DOM. Assim com o Shadow DOM seu escopo fica apenas internamente ao componente, isso mantém os seus seletores CSS simples e garante que os estilos do seu componente não afetem a aplicação ou outro estilo da página.

//Exemplo de componentes lit com CSS

import { LitElement, html, css } from 'lit'
import { customElement } from 'lit/decorators.js'

@customElement('meu-componente')
export class MeuComponente extends LitElement {
 
 static styles = css`
  :host {
   max-width: 1280px;
   padding: 2rem;
   margin: 0 auto;
  }
  
  h1 {
   color: hotpink;
  }
 ` 
 render() {
    return html`
      <div class="card">
        <h1>Meu primeiro componente lit</h1>
      </div>
    `
  }
}Code language: JavaScript (javascript)

Propriedades reativas

Declare propriedades reativas para modelar a API e o estado interno do seu componente. Toda vez que uma propriedade é atualizada, o componente Lit é re-renderizado com eficiência sempre que uma propriedade reativa (ou atributo HTML correspondente) é alterado.

//Exemplo de componentes lit com Propriedades

import { LitElement, html, css } from 'lit'
import { customElement, property } from 'lit/decorators.js'

@customElement('meu-componente')
export class MeuComponente extends LitElement {

 @property({ type: string })
 mensagem = 'Meu primeiro componente lit';

 render() {
    return html`
      <div class="card">
        <h1>${this.mensagem}</h1>
      </div>
    `
  }
}Code language: JavaScript (javascript)

Com componentes Lit, temos propriedades(@property) públicas onde podem ser acessadas externamente por uma propriedade do componente e estado(@state) para uso interno do componente.

Modelos Declarativos

Modelos Lit nativos, apresentados em literais de modelo marcados, são expressivos e rápidos nativos, apresentados em HTML com marcações de linha. Sintaxe personalizada para aprender, nenhuma compilação necessária.

Conclusão

A 4 anos atrás trabalhei num projeto com web components um dos desafios era a falta de ferramentas para acelerar o processo de desenvolvimento. Quando vi Componentes lit a primeira vez fiquei super-empolgado para trabalhar, mas estava ocupado com outros projetos e não tive tempo de ir a fundo nessa biblioteca.

E as primeiras impressões estão sendo ótimas. Melhor de tudo ele tem como base uma API nativa dos browsers que são web components e a sua versão compactada custa 5 KB extra ao seu projeto, já a sua versão descompactada tem apenas 14 KB algo extremamente leve para os benefícios que a biblioteca fornece.

Para mais conteúdo relacionado a desenvolvimento web confira os posts relacionados: