Astro é uma ferramenta pra criar sites dinâmicos onde podemos usar um ou mais frameworks enviando zero javascript pro lado do client, ou mesmo usar somente a tríade Html, css e javascript caso você desenvolvedor, não esteja familiarizado com um framework ainda.
Mas se o javascript é compilado no lado do servidor, como fazemos o site ficar interativo?
Bom pra isso o Astro conta com um padrão de arquitetura web chamado ilhas de componente, onde múltiplas ilhas podem existir em uma página, onde cada ilha é renderizada de forma isolada.
Nesse exemplo, nosso header, sidebar e o carrossel possuem interação e o javascript é hidratado no lado do client , mas todo o resto seria renderizado no lado do servidor.
Como começar com o framework
Antes de eu começar a descrever o framework em si e seu funcionamento, aqui vai o que você precisa saber pra conseguir entender essa parte com facilidade:
- Entendimento de html e javascript;
- Saber como usar node / npm;
- Um browser pra testar o framework;
Bom agora que você está por dentro do mínimo necessário pra entender o Astro vamos pra parte legal , pra começar a usar o astro é super simples, você só precisa rodar esse comando no terminal :
npm create astro@latest
Em seguida ele pede pra você escolher um diretório e se você deseja um boilerplate pra te guiar nos primeiros passos, eu altamente recomendo o uso do boilerplate porque tudo fica muito mais fácil de entender
Isso vai gerar um boilerplate bem parecido com o que encontramos em outros frameworks, com a estrutura de pastas como “src/” pra abrigar todo código do projeto, “public/” pro nossos assets locais, e um diretório “pages/” pra abrigar todas as paginas do nosso projeto e por ai vai..
O que salta os olhos ao ver esse diretório é a extensão .astro que os arquivos recebem, mas o que é isso? Pensando em ser o mais simples possível, essa sintaxe de componente nada mais é do que um superset do html puro que já conhecemos.
Ele é composto por 3 partes, sendo essa a primeira cercada por três tracinhos, onde a gente lida com todo o javascript que queremos incluir na página pelo lado do servidor, criando arrays, fazendo request pra apis, ou usando um arquivo markdown local; o html que queremos escrever nesse componente e por fim uma tag style para escrever o nosso css, um exemplo pequeno usando todos os 3 campos seria algo assim.
A única coisa que ainda é estranha para um html e css puro é essa tag Layout que fica em volta do nosso código e o title que a gente passa pra ela, mas é muito mais simples do que parece, pensando na melhor experiência durante o desenvolvimento, essa tag é um componente que abrange tudo aquilo que vai ser reutilizado em todas as páginas. Digamos que a gente tenha uma navbar, footer e uma tag head que todas as páginas compartilham, nosso layout ficaria assim:
Lembra que passamos o titulo da nossa pagina html na tag layout? aqui criamos a variável para ser recebida como props (bem parecido com react) e usamos a variável na tag Title pra dar um titulo a nossa página, e a tag slot cuida do nosso html que é filho da tag layout.
Entretanto a tag layout não precisa ter uma tag head, body, css ou javascript, ela é apenas um componente reutilizável que o framework usa por padrão pra definir a estrutura das páginas html, sinta-se livre pra usar como quiser.
Como usar outros frameworks dentro do astro?
Se o Astro já é um framework, porque eu adicionaria um framework em cima dele? Bom, como a premissa dele é ser server-side-rendering e hidratar o javaScript necessário de forma parcial, você é livre pra escrever seus componentes de UI em qualquer framework que preferir e hidrata-lo quando necessário, dessa forma todo conhecimento de front-end é reutilizado quando estamos escrevendo um webapp com o astro.
Agora que você já sabe como o astro organiza as coisas deve estar se perguntando como adicionar o seu framework favorito nele, como todo o resto é extremamente simples, basta rodar esse comando no terminal:
npx astro add react
Sinta-se livre pra substituir o react por qualquer outro framework que queira adicionar no seu projeto, como o svelte, solid, preact, vue …
Após o passo a passo da instalação do framework, basta você criar um componente com a respectiva extensão e importar em um pagina
Ressaltando que podemos ter um componente de cada framework em um arquivo astro, então caso queira aprender um novo framework eu acho uma maneira legal pra testar suas ideias. Por fim, para utilizar javascript do lado do client, precisamos escolher uma das 3 formas de renderização hibrida do astro.
<!-- Dessa forma o javascript vai ser carregado junto da pagina -->
<MeuComponenteReact client:load />
<!-- Dessa forma ele renderiza somente depois do html ser renderizado -->
<MeuComponenteReact client:idle />
<!-- Só renderiza o javascript caso o componente esteja visivel na tela -->
<MeuComponenteReact client:visible/>
Como eu conheci o framework
Recentemente eu tive a ideia de dar uma repaginada no meu portfólio, eu queria algo meio minimalista mas estava afim de procurar mais inspirações, nisso eu acabei descobrindo um estilo de design chamado neo-brutalismo e eu comecei a desenhar ele no figma pra ver o que saia da minha mente…
Nesse busca de inspirações pro meu portfolio fiquei me perguntando: vou usar o framework next pra fazer ele? Vou usar animações ou não? Preciso de coisas complexas na pagina? eu acabei respondendo não pra todas essas respostas e acabei ficando meio órfão, pois não queria escrever ele em html e css puro, queria uma experiencia de desenvolvimento um pouquinho melhor, pensando nisso eu fui caçar o que eu podia aprender pra construir meu portfolio, e dessa forma eu acabei conhecendo o Astro.
Espero que tenham gostado e entendido um pouco sobre o funcionamento do Astro e seus benefícios, uma grande referencia pra mim foi o vídeo de um canal chamado Fireship que explica da forma mais simples possível o qual vou deixar linkado logo abaixo, meus agradecimentos também ao @felipperegazio por me ajudar revisando esse artigo, até a próxima.
Referências:
https://docs.astro.build/en/getting-started/
https://www.youtube.com/watch?v=dsTXcSeAZq8
https://www.patterns.dev/posts/islands-architecture
Top comments (0)