HTML Addon: por que copiar recursos básicos do navegador fazia todo o sentido

(10 de dezembro de 2020)

O HTML Addon para Storybook faz o que os navegadores modernos vêm fazendo há anos. Ainda assim, é surpreendentemente útil e está se aproximando de 100 mil downloads. Desenvolvedor líder do Whitespace Fredrik Johansson explica o porquê.

Visualização animada do complemento HTML em ação

A ideia teve origem em um projeto de cliente que estávamos fazendo para o fornecedor sueco de plataforma da web Episerver. Nossa equipe estava construindo uma biblioteca de componentes que sua equipe interna de desenvolvedores .Net implementaria em episerver.com. Eles estariam escrevendo os componentes em uma linguagem de template específica para Episerver e queriam um acesso mais fácil ao código HTML – sem lutar com React.

Escrever um addon para o Storybook acabou sendo bastante simples, e há um breve guia sobre como fazer. Em menos de um dia, a primeira versão do complemento HTML estava pronta. Por capricho, adicionei-o ao Github do Whitespace para a chance de que outras pessoas também possam considerá-lo útil. E até agora, em 2020, tivemos quase 100 mil downloads.

O que o HTML Addon faz?

Ele adiciona um painel que mostra o código HTML do componente que você está olhando no livro de histórias. É tão simples quanto isso.

Tecnicamente, o addon usa a API do navegador (especificamente innerHTML) para recuperar o HTML resultante de componentes escritos em diferentes estruturas. Isso é feito automaticamente quando o DOM é atualizado, seja ao alternar entre as histórias ou ao alterar a saída da atual por meio de controles ou botões. A marcação é então processada por meio do mais bonito para torná-la legível.

Captura de tela do painel do complemento HTML

Por que usamos o complemento?

No início, não vi o benefício de fazer um complemento que apenas mostrasse HTML. Durante anos, a marcação de componentes individuais foi visível por meio das ferramentas de desenvolvimento em navegadores modernos, então por que reinventar a roda? Para ser honesto, construir o addon foi mais uma questão de agradar ao nosso executivo de conta.

O tempo, entretanto, provou que (pela primeira vez) eu estava errado.

O addon simplifica três tarefas comuns em espaços em branco:

  1. Transferências. Muitas vezes trabalhamos para empresas de tecnologia com desenvolvedores de back-end internos. Obter acesso direto ao HTML sem ter que configurar o projeto economiza tempo. Além disso, torna nossa entrega completamente independente da escolha de linguagem de templates de nossos clientes.
  2. Auditorias de qualidade. Quando fazemos testes de acessibilidade, nossos especialistas em acessibilidade obtêm acesso direto à marcação HTML.
  3. Solução de problemas. O acesso instantâneo ao HTML torna a busca de bugs muito mais fácil. Não ter que abrir as ferramentas de desenvolvimento do navegador remove um pouquinho de atrito. E se você codifica para viver, ter menos atrito é definitivamente uma coisa boa.

Tudo se resume ao fato de que mais desenvolvedores de IU em Whitespace (e em outros lugares) sabem HTML do que React. E mesmo para um desenvolvedor ávido do React como eu, o HTML costuma ser mais direto. O complemento HTML destila o código à essência e torna o trabalho mais fácil para várias pessoas.

Como faço para instalá-lo?

Adicione o complemento HTML ao seu Storybook com npm :

npm i --save-dev @whitespace/storybook-addon-html

Registre o complemento em .storybook / main.js :

module.exports = {
// ...
addons: [
"@whitespace/storybook-addon-html",
// ...
],
};

Há mais informações no readme no GitHub .

Qual é o plano para a frente?

Estou surpreso e feliz com a recepção positiva do addon. Eu recebo feedback regularmente pelo Github e passo algumas horas por mês corrigindo bugs. Também vimos contribuições de outras pessoas que têm sido uma grande ajuda para mantê-lo atualizado com as novas versões do núcleo do Storybook.

Se você deseja adicionar recursos, não hesite em fazer um pull solicitação – ou me fale no Github ou via Twitter do Whitespace .

Envolva-se

Confira o Catálogo de complementos para obter mais maneiras de personalizar seu Storybook. Para obter os últimos complementos e notícias do Storybook, inscreva-se na lista de discussão do Storybook. Confira o Storybook no GitHub e participe do bate-papo do Discord .

Originalmente publicado em https : //whitespace.se em 10 de dezembro de 2020.