Guia do desenvolvedor para compreender as cadeias de Markov em IA
9 de março de 2024
Simplifique as linhas de comando do Linux e do Docker com a conclusão do Bash
9 de março de 2024
Nesta postagem, explicarei como construir um componente incorporado StackBlitz leve para o seu site Astro usando Qwik. Usarei o StackBlitz JavaScript SDK, que pode ser usado para incorporar seus projetos em páginas da web.
Se você não está familiarizado com StackBlitz, é um ambiente de desenvolvimento completo que roda no navegador. Cada tipo de projeto que você possa imaginar está a apenas um clique de distância e você pode executá-los em segundos.
Conforme mencionado acima, o SDK JavaScript do StackBlitz pode ser usado para incorporar projetos StackBlitz em páginas da web – ou, no meu caso, postagens de blog de autoria em MDX.
Aqui está uma captura de tela do meu site onde estou usando um componente incorporado StackBlitz em uma de minhas postagens.
Por que incorporar StackBlitz?
Para mim, redator técnico, isso quase se tornou uma necessidade. Escrevo muitos artigos e guias técnicos, cada um geralmente exigindo um link para um repositório GitHub; e em muitos casos, uma visualização ao vivo do exemplo finalizado.
Mas estou ficando sem lugares para colocar essas coisas. Compreensivelmente, o Netlify tem um limite de quantos sites você pode implantar em seu plano inicial gratuito. Tudo bem, mas antes de atingir esse limite, quero investigar algumas alternativas.
Incorporar um projeto StackBlitz em minhas postagens parece uma boa solução. Mesmo no plano gratuito oferece projetos e coleções ilimitadas. O que é uma ótima notícia para mim!
Mas há um problema. Incorporar um projeto StackBlitz nas postagens do meu blog provavelmente afetará o desempenho.
Preocupações de desempenho
Como você provavelmente sabe, o Astro não envia nenhum JavaScript para o cliente por padrão, mantendo o tamanho da página pequeno e a velocidade de carregamento rápida, portanto, inserir um iframe que precisa carregar um monte de coisas pela rede não é a melhor ideia.
Mas só para você saber, aqui está uma maneira de carregar um projeto StackBlitz usando um iframe (Caramba, o que é isso, anos 90?).
Veja o código no Gist.
E para ser justo, esse problema não é específico do StackBlitz – incorporar qualquer coisa em uma página da web que exija uma solicitação HTTP para carregar o conteúdo pode ter um impacto na velocidade de carregamento da página.
No entanto, como também uso o Qwik em meu site, posso carregar lentamente o código necessário – e mais do que isso – posso torná-lo consciente da “janela de visualização”.
UseVisibleTask$() do Qwik
useVisibielTask$() é um pouco parecido com o do React useEffect (com uma matriz de dependência vazia), que é executada “na montagem”. Mas onde useVisibleTask é diferente é que ele possui um Intersection Observer integrado que o Qwik usa para determinar se o componente está dentro da janela de visualização.
Isso é muito útil no caso de incorporações, que podem aparecer em qualquer lugar do corpo de uma postagem ou artigo; e naturalmente, você não vai querer carregá-lo até que o usuário possa realmente vê-lo.
Além disso, em qualquer postagem de blog ou artigo que eu escrevo, posso exigir várias incorporações para comunicar vários conceitos.
Se, no carregamento da página, todas essas incorporações fizerem solicitações HTTP para carregar o conteúdo, isso realmente afetaria a experiência geral do usuário/leitor e possivelmente contribuiria para taxas de rejeição mais altas – portanto, use as incorporações com cuidado!
Escrevi um pouco mais sobre useVisibleTask em meu site aqui: Como usar useVisibleTask$ do Qwik. E usarei uma abordagem semelhante para criar a incorporação do StackBlitz.
Como construir um componente incorporado StackBlitz
O primeiro passo é instalar a integração @qwikdev/astro. O README no repositório explica como fazer isso e é super direto, então não vou abordar isso novamente aqui.
A segunda etapa envolve a criação de um componente Qwik e a garantia de que ele possa ser “importado automaticamente” e usado em arquivos MDX.
Como usar a importação automática do Astro com MDX
Instale o astro-auto-import. Novamente, o README no repositório explica como fazer isso, então não vou explicar novamente. No entanto, explicarei rapidamente como configurei a integração pronta para o componente incorporado StackBlitz.
Veja o código no Gist.
Com o astro-auto-import instalado, agora você pode configurar quais importações apontam para quais componentes.
No trecho de código acima, estou fornecendo um caminho para o componente StackBlitz e definindo o nome pelo qual a importação é conhecida, por exemplo StackBlitze o tipo de exportação que estou usando no componente, default.
O uso deste componente quando usado em um arquivo MDX seria semelhante ao mostrado abaixo.
Veja o código no Gist.
O componente incorporado StackBlitz
Para criar o componente, você precisará instalar o StackBlitz JavaScript SDK. As instruções podem ser encontradas nos documentos.
Permita-me explicar o método embedprojectId. Em sua forma mais simples, seria algo parecido com o código abaixo. O método aceita três argumentos, que são:
- O nome do elemento HTML para “injetar” o ambiente StackBlitz;
- O nome do projeto StackBlitz a ser exibido;
- E um objeto de opções.
Veja o código no Gist.
Aqui está o componente finalizado:
Veja o código no Gist.
Além dos bits usuais do TypeScript, as principais coisas a serem observadas são:
- A declaração do componente, que usa o método componente$ especial do Qwik.
- A importação assíncrona @stackblitz/sdk, que está agrupada em useVisibleTask$.
Aqui está um trecho de JavaScript mais simples para que você possa ver com mais clareza:
Veja o código no Gist.
O uso seria semelhante ao abaixo. Dependendo da funcionalidade que você acha que precisará, determinará quais acessórios passar para o objeto de opções.
Veja o código no Gist.
Dois recursos muito úteis que estão funcionando bem para mim são o view e file opções.
Visualizar
A opção de visualização permite determinar qual visualização o StackBlitz exibirá. As opções são as seguintes e você pode ler mais sobre essas opções na documentação: UiViewOption.
- padrão
- visualização
- editor
Veja o código no Gist.
Captura de tela das opções de visualização do componente StackBlitz Embed.
Arquivo
A opção de arquivo também é muito legal! Quando usado com o view definido como default ou editor você pode abrir o StackBlitz em um arquivo específico.
Veja o código no Gist.
Captura de tela das opções de arquivo do componente StackBlitz Embed.
Os resultados
E aqui estão algumas capturas de tela do meu site que usam essa mesma abordagem.
Antes de um usuário rolar o componente incorporado para visualização, o tamanho da página é ~241kb.
Depois que a página é rolada e o componente entra na janela de visualização e é carregado pelo Qwik, o tamanho da página é ~42 MB!
Há também uma outra opção que você gostaria de explorar. O objeto de opções aceita clickToLoad. O que ainda carregará o material essencial do StackBlitz, mas impedirá a instalação/carregamento de todo o projeto.
No meu exemplo, com esta opção, defina como true o tamanho da página é ~1,7MB.
Veja o código no Gist.
Finalizado
E é por isso que você precisa de uma solução educada para carregar componentes incorporados. A ~42MBo tamanho de carregamento da página inicial é inaceitável e, embora 1,7MBé melhor ainda não estar ótimo, mesmo na casa do Elon Musk, onde imagino que ele tenha uma conexão de internet muito rápida.
Então aí está. Seja educado, mantenha o Qwik e experimente o StackBlitz. Acho que é uma solução muito legal para escritores técnicos.
A postagem Como construir componentes incorporados com Astro, Qwik e StackBlitz apareceu pela primeira vez em The New Stack.
