Summary: Astro.js can be a great introduction to frontend frameworks. Its simplicity, the ability to opt in to complexity, and the developer experience is what makes it a great option for this. Moreover, you can reflect on your journey to make sure it is the right option for you.
Introduction
Before starting to work with Astro, I had watched some crash course about other frameworks such as ReactJS or Vue.js. But, I had not committed to any framework yet, I had gotten to the point of being aware of some basic concepts and how to execute some type of “Hello World”.
I say this since Astro.js was not my first interaction with Frontend frameworks. But, it was the first one where I committed to building websites such as portfolio or blog ones. Moreover, this is more like an early reflection about my experience so far. As well as, my perspective when it comes to Astro.js and choosing your first frontend framework.
I was talking to a senior developer and that person was curious about why I picked “Astro.js” as the first option. This comes from Astro being new compared to other frameworks, and less popular. Furthermore, it is sometimes debated as an option to pick when it comes to working with other frameworks such as Next.js which is powered by “React.js”.
When not to start with Astro
This is about when to start with Astro as your first frontend framework. Still, like anything that is great at some things, it might not be great at other things. And depending on the context, other frameworks are better options.
While learning, you might be job-hunting and if you want to be more appealing to the job market. And depending on the area, you might have to pick other ones due to popularity and being the dominant in the market. It could be a case that you are learning a framework because you want to create an application that requires lots of interactivity and that you could achieve that using other frameworks in a faster way.
To sum this up, decisions comes with trade-offs. I mean that you should take a look at your journey, why you are picking a framework, and the short and long term benefits that it can provide. Then, you can make the decision for yourself.
Picking Astro as the first frontend framework
Astro is a framework that you can start working with after you have completed some projects using HTML, CSS, and JavaScript. You can start by working with static content websites. And you will only have to get familiar with some concepts. For example, content Collection, page-based routing, component architecture, and Astro’s component syntax.
Besides that, it will be like you are writing HTML, CSS, and JavaScript like you were doing before.
This approach provides a way to build competence before starting to work with other Frontend Frameworks. Astro also has some similarity with other frameworks. For instance, using components, slots which you will find in Vue.js, or Astro’s component having a syntax like JSX which you will find in Reactjs.
So, if you decide to start working with it, then it will be a nice transition. Moreover, you can view Frameworks as tools and learning more than one is useful. It allows you to use the best tool depending on that tool’s strength/weakness and the problem you are trying to solve.
Using the templates provided in the documentation is a great way to start familiarizing with the framework. It allows you to pick apart how the websites are built and how some of its features are implemented. Moreover, the document is nicely created, and you can rely on it whenever you have any doubts.
Freelance is something that you can do while learning. Some small business benefit from having static content websites. So, you can explore this as well to keep learning and knowing the impact on a business a website can have.
Astro’s content-first approach: A better learning surface for newcomers
Static Content websites are a way great to start and build your competence and familiarity to these modern frameworks. Additionally, Astro.js is built in a way that allow you to focus on the content and not so much on things to learn about the framework to make your site works.
Marketing, portfolio, and blog are websites that are mostly static content. Also, some of them expect to be SEO-friendly. Astro.js comes with tools such as the Content Collection API, and Integrations such as Sitemap generators and MDX files support.
The image component also helps with the performance and image responsiveness. These tools are the reason it provides a path with less friction. A path you can use to get familiar with these modern framework concepts, build competence, and keep building.
Developer experience
When you start a project, and you have to start installing and setting up tools, it takes time, and it also adds friction to the process. Some of these tools are part of the current development ecosystem because of the value they provide.
But, when you get to work with Astro, you will find that some of these tools are already supported by default. For example, Astro works with Vite under the hood, it also supports Typescript by default. And the Content Collection API comes with built-in validation powered by Zod. I did not have to install any of this. Still, the building process and validation provided by these tools allowed me to provide a more reliable project.
It also provides the ability to opt in to complexity. This is because the website is statically generated by default. But, you can decide if you later on will benefit more from a server side generated one. Or if you want to build a more interactive website with the benefits from other frameworks, you can apply the island architecture.