My Experience with Astro

Monday, February 12, 2024

Astro seemingly blew up a few months ago, and for good reason! Here are my initial thoughts, impressions, and experiences with the framework.

Astro digital wallpaper with colorful arc on dark background

What is Astro?

Astro is a web framework designed for building content-driven websites such as blogs, marketing, and e-commerce sites. It differentiates itself by shipping as little client-side JavaScript as possible, unless otherwise specified by the user. This approach, known as "Islands architecture," allows developers to combine different UI frameworks like React, Svelte, and Vue within the same project.

Astro's focus on content-first, SEO-friendly websites, and its DX (developer experience) make it a compelling choice for building modern static web applications.

My experience with frameworks

While I've worked with React (which is a library) and dabbled with Gatsby and Next, Astro is the first framework I fully dove into. It felt very approachable from the start which made me even more excited to work with it.

I decided to use Astro, Tailwind CSS, and Storyblok CMS for my new portfolio site.

In fact, in my time using Astro, I have learned so much that I am already going back to improve my site by cleaning up the code and taking advantage of what Astro offers. What are some of those offerings?

What Astro Offers

All of these together, plus a great support team and community, excite me to continue working with Astro as it evolves.

Why I love Astro

Writing astro feels like HTML on steroids. Take this snippet from my Conference page, for example:

<Layout title={title} description={description}>
  <main class="flow container mx-auto">
    <Section2XL>
      <SectionXL>
        <h2 class="mb-12 lg:text-center">A little reminder about me</h2>
        <div
          class="flow lg:noflow grid lg:grid-cols-2 lg:place-items-center lg:gap-8"
        >
          <div id="greeting-container" class="flow col-span-1">
            <Image src={profilePicture} alt=`Ryan Furrer` class="rounded-md" />
            <SocialLinks />
          </div>
          <div
            id="greeting-container-verbiage-container"
            class="flow col-span-1"
          >
            <p>
              My name is Ryan Furrer and I am a highly enthusiastic Front-End
              Web Developer, with a focus on Design and UI/UX.
            </p>

From my experience, Astro feels like it has a far lower barrier to entry than other frameworks. Firstly, writing Astro Components is just like writing HTML, as you can see in the code example above - but with some optional extras that can enhance the experience.

Secondly, you get access to frontmatter; frontmatter in Astro can be metadata such as the title, description, og:image, and more. Frontmatter can also be used to define props for components; look at the {title} and {description} attributes in the code above. Those are props I've declared in the Layout.astro component, and defined in the frontmatter for that specific page. Check out the code below to see how it was defined:

---
import Layout from "../layouts/Layout.astro";
import SectionXL from "../components/SectionXL.astro";
import Section2XL from "../components/Section2XL.astro";

import { Image } from "astro:assets";
import profilePicture from "../assets/photos/rf-real-teal-bg.webp";
import SocialLinks from "../layouts/SocialLinks.astro";

const title = "It was nice to meet you!";
const description =
  "If you're visiting this page, we must have met in person, and what a pleasure it was.";
---

title and description are Props that are declared in the Layout.astro file, and must be defined wherever you use said component.

Why do I love Astro? It's ease of use, fantastic docs, and low barrier to entry. If you know HTML and are somewhat familiar with JavaScript syntax, you can use Astro.

What I've learned

Choosing three new tools to learn at once was a lot, but learning by doing is what works best for me. Here are the top three things working with Astro has taught or reminded me.

1. Front-End Framework Syntax

While writing Astro was easier for me than React/NextJS, the syntax and project file structure are similar. I was able to learn how to navigate and find what I needed in a relatively large project, compared to the HTML/CSS/JS projects I have built previously.

2. Make it work, then make it pretty

You could also call this "create an MVP (minmal viable product), then iterate on it." I often get stuck trying to code things to perfection the first time around that I end up wasting time on the project. There is no sense optimizing something if you're just going to do it from an entirely different approach later on.

So, just a reminder, that your project does not need to be perfect the first, second or third time around. Make it work, then make it pretty.

Get it functional, then go back and iterate over it.

3. Read the docs first

Reading the documentation, or docs, of a new coding language or tool is essential for understanding core concepts, avoiding mistakes, and increasing efficiency. In reading the docs I learned about Astro's Image component which is awesome, but naturally did not learn about it until my website was already deployed and out in the world. Why not? Because I did not take the time to read through the docs.

What did I learn? Go through the docs first.

You'll learn about more features of the language/tool you are using, increase your code's efficiency, and save some time by not needing to refactor as much down the road.

Houston, Astro's mascot

Takeaways

Please, learn from my mistakes if you are new to Frameworks, or even just Astro!

1. Read the docs

See above

2. Use Layout Components properly

I made a rookie mistake when developing my site at first, and instead of using a Layout Component, I copied and pasted the same code across all the pages of my site. This is just one of the refinements I am making to my site now, and damn do I wish I had done it before. That goes for other front-end Frameworks as well!

3. You don't need a CMS

Astro comes with fantastic markdown and MDX support out the box. I chose to use a CMS so I could have experience integrating one into my site, but you certainly do not need one.

Moving Forward

I enjoyed using Astro so much that I am going to continue using it for content-heavy and static sites. You can take advantage of Server-Side Rendering (SSR) for places you need it too, just aiding the Astro hype.

I'll continue working with NextJS, but I'm glad I took the time to learn Astro.

Speaking of NextJS, I built incredibly basic (and slightly opinionated) boilerplates for both Astro and NextJS - both using Tailwind, of course. Links are below if you're interested. Just go to the GitHub repo and click the "Use this template" button to get started.

View my Astro & Tailwind Starter

View my NextJS & Tailwind Starter

Conclusion

I hope I taught you a little bit about Astro and maybe even persuaded you to give it a shot. If you're a front-end dev that's new to frameworks, I recommend diving into Astro first!. Let me know if you agree or disagree with me over on X!

Also, don't miss out on these sweet wallpapers Astro has on their website, for free!