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 modelos de HTML. LitElement é uma classe base simples para criar componentes da Web com modelos lit-html.
Se você vem acompanhando os projetos, provavelmente sabe o que são o lit-html e o LitElement. Se quiser, pule para o final. Se você não conhece o lit-html e o LitElement, continue lendo para ter uma visão geral.
lit-html: uma biblioteca pequena e rápida para modelos HTML
O lit-html é uma biblioteca JavaScript pequena (com pouco mais de 3 mil pacotes, minificado e gzip) e rápida para modelos HTML. O lit-html funciona bem com abordagens de programação funcional, permitindo que você expresse a interface do seu aplicativo de maneira declarativa, como uma função do estado.
const myTemplate = (name) => html`
<div>
Hi, my name is ${name}.
</div>
`;
É simples renderizar um modelo HTML em lit-html:
render(myTemplate('Ada'), document.body);
A rerenderização de um modelo atualiza somente os dados que foram alterados:
render(myTemplate('Grace'), document.body);
O lit-html é eficiente, expressivo e extensível:
- Eficiente. O lit-html é muito rápido. Quando os dados são modificados, o lit-html não precisa fazer nenhuma diferenciação. Em vez disso, ele se lembra de onde você inseriu as expressões no modelo e só atualiza essas partes dinâmicas.
- Expressive. O lit-html oferece toda a capacidade de JavaScript, interface declarativa e padrões de programação funcionais. 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 da linguagem à sua disposição. O lit-html oferece suporte nativo a muitos tipos de valores: strings, nós DOM, matrizes e muito mais. Os modelos em si 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, ou seja, seu próprio kit de construção de modelo. As diretivas personalizam a forma como os valores são tratados, 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.
Várias bibliotecas e projetos já incorporaram o lit-html. Há uma lista de algumas dessas bibliotecas no repositório awesome-lit-html no GitHub.
Se você só precisa de modelos, comece agora mesmo com os documentos do lit-html (em inglês). Se quiser criar componentes para usar no seu app ou compartilhar com sua equipe, leia este artigo para saber mais.
LitElement: uma classe base de componente da Web leve
LitElement é uma classe base leve que facilita a criação e o compartilhamento de componentes da Web.
O LitElement usa lit-html para renderizar componentes e adiciona APIs para declarar propriedades e atributos reativos. Os elementos são atualizados automaticamente quando suas propriedades mudam. E elas são atualizadas rapidamente, sem diferenças.
Confira um componente LitElement simples do 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 ótima API JavaScript básica.)
Isso cria um elemento que você pode usar em qualquer lugar em que usaria um elemento HTML normal:
<name-tag name="Ida"></name-tag>
Se você já usa Web Components, vai gostar de saber que agora eles têm suporte nativo no Chrome, Safari e Firefox. O suporte de borda será lançado em breve, e os polyfills são necessários apenas para versões legadas do navegador.
Se você não conhece o Web Components, experimente! Com os componentes da Web, você estende o HTML de maneira a interoperar com outras bibliotecas, ferramentas e frameworks. Por isso, eles são ideais para compartilhar elementos da interface em uma grande organização, publicar componentes para uso em qualquer lugar na Web ou criar sistemas de design de interface, como o Material Design.
Você pode usar elementos personalizados em qualquer lugar em que use HTML: no seu documento principal, em um CMS, no Markdown ou em visualizações criadas com frameworks, como React e Vue. Também é possível misturar e combinar componentes LitElement com outros componentes da Web, sejam eles escritos com tecnologias da Web comuns ou criados com a ajuda de ferramentas como o Salesforce Lightning Web Components, o Stencil do Ionic, o 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ê tiver interesse em usar o lit-html sozinho ou em integrar modelos lit-html a outro projeto, consulte os documentos do lit-html:
Como sempre, conte para nós o que você achou. Entre em contato pelo Slack ou Twitter. Nossos projetos são de código aberto, e você pode relatar bugs, enviar solicitações de recursos ou sugerir melhorias no GitHub:
- lit-html no GitHub (em inglês)
- LitElement no GitHub (em inglês)