Domenico Tenace for This is Learning

Posted on Jan 10 • Edited on Oct 6 • Originally published at javascript.plainenglish.io

Astro: the new frontier of Frontend Frameworks 🪐

#astro #javascript #frontend #webdev

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 👇🏻

Domenico Tenace

Passionate about the IT world and everything related to it ✌🏻 Vue and Open Source enthusiastic 🦠

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)

Alex Lohr • Jan 11

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.

Domenico Tenace • Jan 11

Absolutely true!
Astro was born to avoid unnecessary JavaScript use.

It's their philosophy!

Nikola Mitic • Jan 17 • Edited

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.

Frank Dana • Jun 29 • Edited

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.

Nikola Mitic • Jun 29

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.

Domenico Tenace • Jan 19

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.

Petipois • Jan 18

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

Giuliano1993 • Jan 10

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!