Overview
In the historical period in which we live, the frontend world is saturated with frameworks: Vue, React, Angular, just to name the most famous.
All technologies focused on making the developer's life much easier, without really caring too much about performance.
In recent years, frontend frameworks have been emerging that focus on performance and speed: Astro is part of this generation of technologies.
In this article will show you what is Astro and how it works.
Let's start! π€
What is Astro?
Astro is the web framework for building content-driven websites like blogs, portfolio, and e-commerce.
With Astro, the way has been opened for a new frontend architecture to reduce the overhead and complexity of JavaScript when loading web pages, making the site fast and SEO friendly.
The five principles of Astro's philosophy
Astro was designed based on five fundamental principles to explain the need that led to its development and the problems it needs to solve:
- Content-driven: Astro was designed to give its all when developing content-focused products.
- Server-first: websites run faster when they render HTML on the server.
- Fast by default: Astro is all about performance, which is why it is very difficult to create a slow product.
- Easy to use: You donβt need to be an expert to build something with Astro.
- Developer-focused: the developer has everything he needs for his work at his disposal.
Main features
Astro includes everything you need to create a website, built-in. There are also hundreds of different integrations and API hooks available to customize a project to your exact use case and needs.
Some highlights include:
- Islands: a web architecture based on "isolated" components that load JavaScript only when needed.
- UI-agnostic: supports many frontend frameworks, liks React, Preact, Svelte, Vue, Solid, Lit, HTMX, web components.
- Zero JS, by default: JavaScript is loaded only if necessary.
- Content collections: organize, validate, and provide TypeScript type-safety for your Markdown content.
- Customizable: easily integrated with many of the most popular plugins.
Conclusion
Astro is a new content- and performance-driven frontend framework that is easy to use and has everything you need to start developing a new project.
We will hear a lot about it in the future.
Happy coding!β¨
Hiππ»
My name is Domenico, software developer passionate of Vue.js framework, I write article about it for share my knowledge and experience.
Don't forget to visit my Linktree to discover my projects π«°π»
Linktree: https://linktr.ee/domenicotenace
Follow me on dev.to for other articles ππ»
If you like my content or want to support my work on GitHub, you can support me with a very small donation.
I would be grateful π₯Ή
Top comments (17)
Astro is a great choice when you have a lot of static content. The ability to use different framework's components is also immensely helpful for migrations. However, if neither of those are the case, it is merely overhead.
Absolutely true!
Astro was born to avoid unnecessary JavaScript use.
It's their philosophy!
Thank you for the introduction βΊοΈ
Question π€ Why is it a frontend framework when the emphasis is on shipping zero JS? (Which I think is great btw)
I'm getting very confused with the naming out there recently.
It's a frontend framework because it's used for building the frontend of a website -- the content that the user sees. A backend framework would be used to build the business logic that drives the frontend.
A web frontend can run on the client (by serving client-side JS that runs the frontend), or on the server (by running server-side code -- which doesn't have to be JS -- that produces and serves a primarily-HTML frontend).
The frontend/backend split is different from the client-side/server-side split. Anything to do with displayed content and the UI is frontend, wherever it runs.
Hm interesting take. For me this still feel like a web framework not frontend. More of a Full stack as where code runs is important. The goal of a a framework is important.
Will have to sit on your comment for a while as you make good points.
Hi!
it was a pleasure!
Regarding your question, I can tell you that although an Astro project in production does not use JavaScript unless necessary, during development this language is present and is part of many constructs!
For this reason it can be considered a frontend framework.
I absolutely love Astro. I recently created a YouTube tutorial series called Canva to Astro, converting a canvas template to astro 4. Absolutely great framework.
Thanks for the article
I really like Astro, I haven't tried it yet but I'm planning to use it for building some side-projects page! Still, great article, gives a nice overview of Astro and now really feel even more like build something with it!
Thank you @giuliano1993 for feedback β¨
Astro is amazing tech for frontend developer.
Try it, it's simple!
π
Great for building jam powered websites. Nice work
jamstack.org/
Developers can be female too.
Developers can be any gender! (There's more than just two.)
ohhοΌthat is goodοΌ
Thank you!
Is Astro similar to Ruby on Rails and Django? Sounds like a throwback to server rendering of static HTML, with accommodations for JS.
I don't know if Astro is similar to Ruby on Rails or Django, because I don't know these technologies, but you might be right about the second part.