Aleph.js é um framework JavaScript de código aberto inspirado no estrutura popular Next.js . A estrutura é muito mais recente que Next.js e está atualmente em sua fase alfa.

O framework tem uma comunidade de código aberto dedicada que corrige bugs. Este artigo oferece uma visão geral do Aleph.js e um guia para seus recursos.

Visão geral do Aleph.js

Aleph.js foi desenvolvido com a segurança em mente, então ele usa a estrutura JavaScript/TypeScript Deno para seu ambiente de execução. Usar o Deno significa que os usuários do Aleph.js têm controle total sobre o que seus programas podem usar e devem permitir o acesso explicitamente, seja usando arquivos no servidor ou alterando variáveis ​​de ambiente.

Os desenvolvedores não precisam configurar Aleph.js após a instalação porque ele é construído para simplicidade e faz muito trabalho nos bastidores. Em vez de exigir que um desenvolvedor use um empacotador JavaScript de terceiros, Aleph.js lida com a importação com a sintaxe ES6 padrão que permite aos desenvolvedores colocar e remover peças JavaScript à vontade.

Esse nível de segurança e simplicidade é possível porque Deno é escrito na linguagem Rust e essas qualidades se estendem ao Aleph.js. O Rust foi desenvolvido como uma solução simples para problemas de segurança de desenvolvimento da web , como acesso não autorizado a arquivos e cross-site scripting, portanto, Aleph.js está bem protegido contra esses problemas.

No momento em que este artigo foi escrito, os criadores do Aleph.js declararam explicitamente que a estrutura funcionará nas versões mais recentes do Google Chrome, Microsoft Edge, Mozilla Firefox, Safari e Opera. Ele pode funcionar em outros navegadores também, mas nenhum outro navegador foi verificado pelos criadores do Aleph.js. Você deve ter cuidado com outros navegadores até que eles sejam verificados pelos criadores em uma data posterior.

Recursos do Aleph.js

Aleph.js tem muitos recursos úteis que permitem aos desenvolvedores personalizar suas páginas da web e implementá-las de maneiras dinâmicas. Essa flexibilidade torna o Aleph.js útil para desenvolvedores em qualquer nível de habilidade ou em qualquer trajetória de carreira.

Roteamento

Aleph.js usa uma estrutura de roteamento genérica para construir páginas da web e terminais de API. O endereço de uma página ou endpoint de API vem diretamente de seu nome de arquivo de dados. Essa prática incentiva convenções de nomenclatura simples e claras que ajudam os usuários do site e da API a encontrar o que precisam rapidamente.

Os arquivos de dados podem estar em vários formatos, incluindo JavaScript (.js), arquivos de módulo ECMAScript (.mjs), JavaScript XML (.jsx), TypeScript (.ts), TypeScript XML (.tsx) e Markdown (. md). As rotas podem ser estáticas ou dinâmicas, e a estrutura de roteamento oferece suporte a aninhamento para que os usuários possam criar hierarquias de páginas ou APIs.

A estrutura de roteamento também facilita a internacionalização com uma opção de local. As rotas Aleph.js oferecem uma maneira flexível de direcionar os usuários do site para onde eles são mais necessários.

Suporte SSR e SSG

A estrutura suporta renderização do lado do servidor (SSR) e geração de site estático (SSG). Aleph.js pré-renderiza as páginas por padrão para que o navegador do cliente não tenha que fazer todo o trabalho. Você pode desligar esse SSR se quiser, mas isso pode fazer com que sua página ou endpoint de API seja executado lentamente.

A opção SSG, por outro lado, cria um site independente que pode ser executado em qualquer servidor, mas depende do cliente para fazer o trabalho pesado do JavaScript. O SSG também exige que você redefina as rotas dinâmicas como caminhos estáticos antes de gerar o site. O suporte a SSR e SSG dá ao Aleph.js a capacidade de lidar facilmente com sites grandes e pequenos.

Aleph.js permite a configuração de SSR e SSG em um arquivo chamado aleph.config.js . A configuração por meio desse arquivo exige a gravação de um JavaScript válido, portanto, alguns recursos de SSR e SSG exigem uma codificação cuidadosa.

Por exemplo, excluir caminhos de SSR requer uma declaração de exportação JavaScript:

 export default { "ssr": { "excluir": [ "/caminho/de/raiz" "/caminho/de/raiz/dois/" ] }, ...
}

Da mesma forma, especificar caminhos dinâmicos em SSG requer conhecimento de JavaScript assíncrono e caminhos estáticos para retornar SSR:

 exportar assíncrono padrão ()=> { const data=await (await fetch ("https://.../data")). json () Retorna { ssr: { excluir: [...], staticPaths: data.map (({id})=> `/data/$ {id}`) } }
}

Substituição de Módulo Quente

Aleph.js também contém um recurso chamado Substituição de Módulo Quente com Atualização Rápida, ou simplesmente HMR. Este recurso permite que você atualize suas páginas em um navegador, atualizando o aplicativo Aleph.js em que você está trabalhando no momento. Você pode ver os resultados das alterações nos arquivos JavaScript XML, TypeScript XML e Markdown.

Como o estilo da página também pode influenciar a maneira como os leitores interpretam o conteúdo, o HMR funciona com arquivos CSS e arquivos criados para o pré-processador LESS. Uma grande vantagem de usar o HMR é que você não precisa se preocupar em atualizar seu trabalho em vários lugares ao fazer alterações. Aleph.js economiza seu tempo e garante que você esteja sempre olhando para os resultados mais recentes de seu trabalho.

Personalização fácil

A estrutura oferece muitas opções de personalização, tanto em seu aplicativo JavaScript quanto nas páginas que seu aplicativo gera. Ao personalizar o aplicativo React padrão, você pode controlar a maneira como uma página ou chamada de API é inicializada, usando técnicas como elementos de modelo e tratamento de erros direcionado.

Aleph.js também suporta a injeção de muitos elementos de página importantes, incluindo o cabeçalho da página, scripts em qualquer lugar da página e importações assíncronas. Por padrão, Aleph.js mostra uma tela em branco enquanto as páginas são carregadas, mas você pode personalizar uma tela de carregamento.

Embora a estrutura forneça uma página 404 padrão quando um arquivo não for encontrado, você também pode personalizar a página exibida quando esse erro ocorre com uma função chamada E404. Tal como acontece com a personalização de SSR e SSG, as páginas de erro são especificadas em aleph.config.js .

 exportar função padrão E404 () { retornar 
 Página LogRocket ausente 
}

Configuração e instalação de Aleph.js

Aleph.js requer configuração mínima com dois comandos simples.

1. Instale o tempo de execução Deno. Você pode instalá-lo como um executável ou usando um dos vários programas da linha de comando. Shell do Mac/Linux:

 curl-fsSL https://deno.land/x/install/install.sh | sh

Windows PowerShell:

 iwr https://deno.land/x/install/install.ps1-useb | iex

1. Instale Aleph.js usando Deno na linha de comando. No momento em que este livro foi escrito, o número da versão é 0.2.28.

 deno install-A-f-n aleph https://deno.land/x/aleph@vNUMBER/cli.ts

Conclusão

Aleph.js é uma estrutura JavaScript que está em desenvolvimento ativo, mas mostra-se muito promissora. Sua comunidade se esforça para simplificar a implantação para fácil adoção.

O framework já se destaca pelo foco na segurança, e a comunidade tem planos de continuar essa tendência à medida que adiciona mais recursos. Você provavelmente pode esperar ver Aleph.js surgindo em muitas outras discussões assim que sair de sua fase alfa.

A postagem Primeiro veja Aleph.js: uma nova estrutura React no Deno apareceu primeiro no LogRocket Blog .

Source link