Shoelace 2.0: Uma biblioteca de componentes da Web com visão de futuro

Há alguns anos, lancei uma alternativa leve ao Bootstrap, carinhosamente chamada de Cadarço. O Shoelace era pequeno e rápido devido ao seu design minimalista e à abordagem de CSS puro para a criação de estilos. Ele usava Propriedades personalizadas de CSS extensivamente para permitir personalizações, mesmo quando carregadas via CDN – algo que não é possível fazer com o Sass.

Naquela época, as propriedades personalizadas do CSS ainda eram muito novas.

Passados alguns anos, as coisas mudaram. As propriedades personalizadas do CSS são onipresentes e uma tecnologia relativamente nova, chamada Componentes da Webfoi lançado em todos os navegadores modernos.

Componentes da Web

Se o senhor não conhece os componentes da Web, eles são uma coleção de padrões que nos permitem criar nossos próprios elementos HTML, completos com DOM e encapsulamento de estilo. Acontece que isso era exatamente o que eu estava esperando!

Decidi que era hora de reconstruir o Shoelace do zero, então comecei a versão 2.0 com alguns objetivos em mente:

• Ele deve funcionar com CDNs
• Deve ser fácil de usar e ter uma boa documentação
• Deve ser totalmente personalizável com CSS (sem pré-processamento)
• Deve funcionar com qualquer estrutura (ou sem nenhuma estrutura)
• Deve ser construído com a acessibilidade em mente

Como essas metas eram ambiciosas, recorri à minha ferramenta favorita para a criação de componentes da Web. Stencil é um compilador que gera elementos personalizados compatíveis com o padrão. Gosto dele porque oferece algumas conveniências muito boas, como o TypeScript, uma bela API de componentes, lazy loading (carregamento lento) e vários alvos de saída.

Recomendo fortemente o Stencil se o senhor estiver interessado em criar seus próprios componentes da Web!

Redesenhando tudo

Com os requisitos e as ferramentas fora do caminho, comecei a reconstruir tudo do zero. Cada componente foi cuidadosamente redesenhado com uma nova experiência de usuário e uma API reimaginada. Até adicionei alguns componentes novos, incluindo utilitários para animação, usando o API de animações da Webvalidação de formulário, usando o API de validação de restrições; e incorporações responsivas.

Basta dizer que estou muito satisfeito com o resultado. Conheça o Shoelace 2.0

E, no que diz respeito às minhas exigências, todas elas foram atendidas!

• ✅ A maneira preferida de usar o Shoelace é via CDN
• A documentação é bastante extensa e inclui muitos exemplos de trabalho
• O senhor pode personalizar os componentes em um alto nível com Propriedades personalizadas do CSS e em um nível baixo com Partes do CSS
• O senhor pode usar os componentes do Shoelace em em qualquer estrutura que o senhor desejar
• Cada componente foi criado com a acessibilidade em mente, e há um esforço contínuo para aprimorá-los ainda mais

Uma experiência melhor para o desenvolvedor

Uma grande vantagem do uso de componentes da Web é que o senhor obtém elementos HTML personalizados reais com uma API familiar. Vamos comparar a marcação de um botão do Bootstrap e de um botão do Shoelace.

<!-- Bootstrap -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Shoelace -->
<sl-button type="primary">Primary</sl-button>

Mesmo com esse exemplo simples, o senhor já pode ver que há menos código envolvido. Isso se torna ainda mais óbvio com componentes complexos. Vamos dar uma olhada nas caixas de diálogo. Aqui está uma caixa de diálogo do Bootstrap.

<!-- Bootstrap -->
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Isso é muita marcação! E há muito espaço para erros com esses atributos aria expostos.

Agora vamos dar uma olhada em uma caixa de diálogo Shoelace equivalente.

<!-- Shoelace -->
<sl-dialog label="Dialog">
  <h3 slot="header">Modal Title</h3>
  Modal body text goes here.
  <sl-button slot="footer">Close</sl-button>
  <sl-button slot="footer" type="primary">Save Changes</sl-button>
</sl-dialog>

É muito mais fácil trabalhar com isso! E há menos espaço para erros, pois o componente lida com seus atributos aria internamente.

Se o senhor achar esse exemplo inspirador, recomendo que navegue no site da Shoelace e veja mais alguns exemplos. Acho que o senhor ficará agradavelmente surpreso.

Por que usá-lo?

A esta altura, o senhor deve estar se perguntando o que diferencia o Shoelace de outras bibliotecas de componentes. Por um lado, ele é agnóstico em relação à estrutura, o que significa que pode ser usado em React, Vue, Angular e em qualquer outra estrutura que o senhor utilizar. Isso é perfeito para equipes que desejam usar diferentes frameworks com os mesmos componentes para obter uma experiência de usuário consistente.

Como os componentes do Shoelace são componentes da Web, eles são criados com base em padrões que os navegadores se comprometeram a suportar por um longo tempo. À medida que as estruturas antigas envelhecem e surgem novas, o senhor não precisará perder tempo reconstruindo botões, entradas e outros componentes de baixo nível. O Shoelace continuará funcionando.

Se o senhor preferir usar a plataforma e evitar totalmente as estruturas, também não há problema. O Shoelace funciona muito bem com HTML+JS simples!

Quase me esqueci: o Shoelace é de código aberto e está disponível sob a licença MIT, portanto, é gratuito e qualquer pessoa pode contribuir com ele!

Saiba mais

Esta foi apenas uma rápida introdução ao Shoelace 2.0 e aos componentes da Web. Espero que o senhor tenha gostado da atualização.

Se estiver interessado em saber mais sobre o Shoelace, aqui estão alguns links que serão úteis para o senhor!