Why I love Astro.JS? (Not Sponsored)
Well, there’s no doubt that the JavaScript framework landscape is crowded—almost as if there are more frameworks than stars in the sky! Conversations often revolve around React vs. Angular, Nest.JS vs Next.JS and occasionally someone will mention Vue.js (PS: I love Vue JS as well).
Having worked with several popular frameworks, Astro caught my attention. I initially scoffed, thinking, Great, another JS framework. But I decided to give it a try.
At first, I found myself confused about how to get started, what the syntax was all about, and how it worked. But after reading the official documentation and using Astro’s boilerplate, I became more optimistic. Creating a new app and testing some initial features felt like a smooth experience.
I then decided to build a real-world application and, along the way, discovered some advanced, life-saving features in Astro. Here are a few of my favorites:
1. TypeScript Support: TypeScript is a necessity in most modern JavaScript frameworks, but Astro's out-of-the-box TypeScript support is particularly impressive. The way Astro manages everything by itself feels effortless and intuitive.
2. Routing: Astro’s routing system is straightforward, working similarly to Next.js with folder- and file-based routes, but with additional improvements that make it even easier to manage.
3. Inbuilt Features: You can basically define everything you expect from Astro in its config file (typically astro.config.mjs). How do you want output to be? SSR, Static or Hybrid, there you go. Do you want compressed HTML, yep you can define, any integrations with the application? Yes, and that's the best and god level thing while developing with Astro - Integrations.
4. Seamless Integrations: The integrations with Astro are a game-changer and there are a ton of integrations available officially. From Markdown Support to React, Vue, Tailwind. You have it all, YES! Explore by clicking here.
5. Lightweight and Static HTML Exports: This might be my favorite feature. Astro allows you to create fast-loading, SEO-friendly static HTML exports without heavy JavaScript bloat. Unlike other frameworks where JS payloads can slow things down, Astro gives you the benefits of a modern site without compromising performance.
Final Thoughts
These features only scratch the surface of what Astro has to offer. I’d absolutely recommend giving this framework a try if you're looking for something lightweight yet powerful. In future posts, I'll dive deeper into getting started with Astro. But it’s all about finding the framework that best aligns with your goals and comfort level.
References/ Credits
- Images (excluding the banner but including the logo in the banner) are sourced from Google or other free-to-use sites. If you wish to remove anything or want to add credits please contact me here.
- Astro official Site
- Astro Documentation
Eu não consigo entender porque estes frameworks se baseiam para criar as rotas em pastas, isso é um bosta, você não consegue automatizar a criaação de código ou fica mais complicado para gerenciar o invés de ter apenas a manutenção das rotas com base no código e não em rotas, simples criou o meu arquivo de rotas e faço o registros dos componentes e suas localização de rota, assim como já faço no vite nada de pasta….. Uma outra questão grave deste frameworks é que você se torna refém da estrutura de código quando precisar mudar para outro da moinha… já éra… seu aplicativo esta totalmente emaranhado na estrutura… Uma outra coisa que vejo em todos frameworks e na hora do build, você faz um esforço para componetizar sua aplicação deixar os componentes auto suficientes, mas quando gerar o build este frame works junta tudo, veja um exemplo eu faço assim : /project-root
├── /public
│ ├── favicon.ico
│ └── styles.css
├── /src
│ ├── /components
│ │ ├── /contato
│ │ │ ├── Contato.tsx
│ │ │ └── contato-styles.ts
│ │ ├── /sobre
│ │ │ ├── Sobre.tsx
│ │ │ └── sobre-styles.ts
│ │ ├── /info
│ │ │ ├── Info.tsx
│ │ │ └── info-styles.ts
│ ├── App.tsx
│ ├── main.tsx
│ └── styles.css
├── index.html
├── package.json
└── vite.config.ts quero que seja gerado assim: public/
├── favicon.hashxxxx.ico
└── styles.hashxxxx.css
components/
├── contato/
│ ├── contato.hashxxxx.html
│ └── contato.hashxxxx.css
│ └── contato.hashxxxx.js
├── sobre/
│ ├── contato.hashxxxx.html
│ └── contato.hashxxxx.css
│ └── contato.hashxxxx.js
├── info/
│ ├── contato.hashxxxx.html
│ └── contato.hashxxxx.css
└── contato.hashxxxx.js
ndex.hashxxxx.html
index.hashxxxx.js
inde.hashxxxx.css desta forma gerado eu tenho mais controle para utilizar service workes, ee realmente fazer e atualizar tela ou dados que que mudar, mas só consigo fazer isto com muito custo com webpack…. este frameworks estão longe de ter clareza quanto você se tornar refém dos mesmo e também não ajuda muito organizar seu código…. O que vejo é muito marketing…..
Apologies, but I do not have an understanding of the language used in the comment but I translated your comment with Google translator. So please pardon if I misunderstood anything.
; Regarding structure, the default structure is always for basic demos only. In my opinion, you must simplify and group every file so that it is accessible for any developer to locate any piece of code required. Furthermore, it must have simple file names and not too large and nested code.
I have worked with React.JS, Vue.JS, and other frameworks, but with Astro, I felt there was no bulky JS in the output only HTML that could be shipped anywhere. If required, you can integrate these and with numerous frameworks supported by Astro. This definitely improves user experience and SEO.