Hoje, temos o prazer de anunciar as primeiras versões estáveis das nossas duas bibliotecas de desenvolvimento da Web de última geração: lit-html e LitElement.
O lit-html é uma biblioteca pequena, rápida e expressiva para criação de modelos HTML. O LitElement é uma classe base simples para criar componentes da Web com modelos lit-html.
Se você estiver acompanhando os projetos, provavelmente já sabe o que são lit-html e LitElement. Você pode pular para o final se quiser. Se você não conhece o lit-html e o LitElement, leia este artigo para ter uma visão geral.
lit-html: uma biblioteca pequena e rápida para modelos HTML
O lit-html é uma biblioteca JavaScript pequena (pouco mais de 3 mil pacotes, minificada e compactada) e rápida para criação de modelos HTML. O lit-html funciona bem com abordagens de programação funcional, permitindo que você declare a interface do seu aplicativo de forma declarativa, como uma função do estado.
const myTemplate = (name) => html`
<div>
Hi, my name is ${name}.
</div>
`;
É simples renderizar um modelo lit-html:
render(myTemplate('Ada'), document.body);
A renderização de um modelo só atualiza os dados que foram modificados:
render(myTemplate('Grace'), document.body);
O lit-html é eficiente, expressivo e extensível:
- Eficiente. O lit-html é muito rápido. Quando os dados mudam, o lit-html não precisa fazer diferenças. Em vez disso, ele lembra onde você inseriu expressões no seu modelo e só atualiza essas partes dinâmicas.
- Expressivo: o lit-html oferece todo o poder do JavaScript, da interface declarativa e dos padrões de programação funcional. As expressões em um modelo lit-html são apenas JavaScript, então você não precisa aprender uma sintaxe personalizada e tem toda a expressividade do idioma à sua disposição. O lit-html oferece suporte a muitos tipos de valores de forma nativa: strings, nós DOM, matrizes e muito mais. Os modelos são valores que podem ser calculados, transmitidos para e de funções e aninhados.
- Extensível: o lit-html também é personalizável e extensível, seu próprio kit de construção de modelos. As diretivas personalizam a forma como os valores são processados, permitindo valores assíncronos, repetições de chave eficientes, limites de erro e muito mais. O lit-html inclui várias diretivas prontas para uso e facilita a definição das suas próprias diretivas.
Várias bibliotecas e projetos já incorporaram o lit-html. Confira uma lista de algumas dessas bibliotecas no repositório awesome-lit-html no GitHub.
Se você só precisa de modelos, comece agora com os documentos do lit-html. Se você quiser criar componentes para usar no seu app ou compartilhar com sua equipe, continue lendo para saber mais.
LitElement: uma classe base leve de componentes da Web
O LitElement é uma classe base leve que facilita a criação e o compartilhamento de componentes da Web.
O LitElement usa o lit-html para renderizar componentes e adiciona APIs para declarar propriedades e atributos reativos. Os elementos são atualizados automaticamente quando as propriedades deles mudam. E elas são atualizadas rápido, sem diferenças.
Confira um componente simples do LitElement no TypeScript:
@customElement('name-tag')
class NameTag extends LitElement {
@property()
name = 'a secret';
render() {
return html`<p>Hi, my name is ${this.name}!</p>`;
}
}
Também temos uma API JavaScript vanilla.
Isso cria um elemento que pode ser usado em qualquer lugar em que você usaria um elemento HTML normal:
<name-tag name="Ida"></name-tag>
Se você já usa os Web Components, vai ficar feliz em saber que agora eles têm suporte nativo no Chrome, Safari e Firefox. O suporte para o Edge será lançado em breve, e os polyfills são necessários apenas para versões legados do navegador.
Se você não conhece os componentes da Web, experimente usá-los. Os componentes da Web permitem estender o HTML de uma maneira que interaja com outras bibliotecas, ferramentas e frameworks. Isso os torna ideais para compartilhar elementos de interface em uma organização grande, publicar componentes para uso em qualquer lugar da Web ou criar sistemas de design de interface, como o Material Design.
É possível usar elementos personalizados em qualquer lugar em que você usa HTML: no documento principal, em um CMS, em Markdown ou em visualizações criadas com frameworks, como React e Vue. Você também pode misturar e combinar componentes do LitElement com outros componentes da Web, sejam eles programados usando tecnologias da Web básicas ou criados com a ajuda de ferramentas como Salesforce Lightning Web Components, Stencil do Ionic, SkateJS ou a biblioteca Polymer.
Primeiros passos
Quer testar o lit-html e o LitElement? Um bom ponto de partida é o tutorial do LitElement:
Se você quiser usar o lit-html sozinho ou integrar a criação de modelos do lit-html a outro projeto, consulte os documentos do lit-html:
Como sempre, queremos saber sua opinião. Entre em contato com a gente pelo Slack ou pelo Twitter. Nossos projetos são de código aberto (é claro!), e você pode relatar bugs, enviar solicitações de recursos ou sugerir melhorias no GitHub:
- lit-html no GitHub (link em inglês)
- LitElement no GitHub