DEV Community

Cover image for A first look at Astro, astronomical results
Chris Bongers
Chris Bongers

Posted on

A first look at Astro, astronomical results

Usually, I'm not one to jump on the hype train of new tooling and frameworks. However, Astro sparked my interest.

In its most basic form, it's a framework to build websites.
However, it turns out to be a bit more than that!

The team behind Astro took inspiration from the biggest open source projects around and used their principles in Astro.

Why Astro is so great

  • Full HTML output, no JavaScript unless you need it, and even that comes with options!
  • SEO Focussed, sitemap integrated, RSS feed is done, pagination and collections
  • BYOF approach, choose whatever framework you are comfy with React, Svelte, Vue, or none of those 🤷‍♂️.
  • Components that will turn into static HTML

This makes it like the super combination between an interactive component library like React and a static site generator like Eleventy.

Astro also comes with its files called .astro files. They are very much like .jsx files!
There are some minor differences on which Astro provides an excellent comparison table.

But of course, the main reason why Astro is so great:

Performance

No crazy reason behind it is so good on the speed index. It's a natural cause of having a fully static HTML output.
And I love it.

Of course, Eleventy is also pure HTML output, but not having JavaScript components we can easily reuse.

Getting started with Astro

The best way to get started with any framework or tool is to give it a try.

So let's go ahead and give Astro a run.
The installation is as easy as it gets.

# Create folder and navigate to it
mkdir astro-website
cd astro-website

# Init astro project
npm init astro
# Install all dependencies
npm install
# Start Astro!
npm start
Enter fullscreen mode Exit fullscreen mode

Note: The Astro init gives you super cool options for which template and framework to use!

Astro first look

Data fetching in Astro

Let's look at building a super simple website that will fetch some data from an external API and render some card components.

We'll use the Anime API for today's article, and I choose the top endpoint.

Let's define that on the top of our index.astro file.

---
import Card from '../components/Card.astro'
const remoteData = await fetch('https://api.jikan.moe/v3/top/anime/1').then(response => response.json());
---
Enter fullscreen mode Exit fullscreen mode

Then we want to create a card with the following data from each result:

  • Title
  • Image
  • Episodes
  • Score
  • Href (To link)

Let's go ahead and map all our data objects to cards.

<main class="grid">
  {remoteData.top.map((item) =>
  <Card
    title="{item.title}"
    score="{item.score}"
    episodes="{item.episodes}"
    href="{item.url}"
    image="{item.image_url}"
  />)}
</main>
Enter fullscreen mode Exit fullscreen mode

You can see we added the grid class on the main element, and a cool thing we can do is add a style element.
I've defined the language as SCSS so it can compile correctly.

<style lang="scss">
  .grid {
    margin: 4rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    @media (max-width: 650px) {
      grid-template-columns: repeat(1, 1fr);
      margin: 2rem;
    }
    gap: 3rem;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

Now let's see how this would look at how this Card component looks.

Create a new file called Card.astro in the components library.

--------
export interface Props {
  title: string;
  image: string;
  episodes: number;
  score: float;
  href: string
}

const { title, image, episodes, score, href  } = Astro.props;
--------
<article>
    <img src={image} alt={title} />
    <div class="content">
        <a href={href}><h2>{title}</h2></a>
        <p>📺 Episodes: {episodes}</p>
        <p>⭐️ Rating: {score}</p>
    </div>
</article>

<style>
    article {
        line-height: 1.5;
        background: #fff;
        border-radius: 8px;
        color: #333;
        overflow: hidden;
    }
    img {
        max-height: 290px;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }
    .content {
        padding: 1rem;
    }
    h2 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    ul {
        list-style: none;
    }
</style>
Enter fullscreen mode Exit fullscreen mode

I find this approach super satisfying. We can simply pass data to our component, so it's reusable.

And the component itself is nicely built of a definition part between the three lines --- that includes our actual code.

Then we have a section with HTML where we bind the variables.

And at the bottom, we have a style element to add some basic card styling.

This will result in the following.

Movie app in Astro

You can also view it here:

Astro movie website

(Or on GitHub)

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Discussion (11)

Collapse
daviddalbusco profile image
David Dal Busco

Excellent introduction Chris, thanks for the share 👍

P.S.: The comparison table does not seems to be activate anymore.

Collapse
dailydevtips1 profile image
Chris Bongers Author

Ah yes thanks David, just updated the article with the link to the docs.
They recently went public with the docs ✨

For your convenience:
docs.astro.build/core-concepts/ast...

Collapse
daviddalbusco profile image
David Dal Busco

Thanks for the link too!

Collapse
sharpninja profile image
The Sharp Ninja

So, this is essentially Blazor running in Node.

Collapse
manigandham profile image
Mani Gandham • Edited on

Blazor brought component-based UI architecture to ASP.NET, and now Astro is bringing client/server/partial runtime abilities back to JS frameworks. In a way they're both becoming the same thing with different language stacks.

Collapse
sharpninja profile image
The Sharp Ninja

Well, if you filter TechEmpower's latest benchmark to .Net and Nodejs as the platforms, ASP.Net Core is over 3x faster than the fastest Nodejs base framework. Considering that Blazor can be run either server-side or client side, it looks to me like Astro is just a pretender in the making.

Thread Thread
manigandham profile image
Mani Gandham

There's a lot more to this than just performance, especially TechEmpower's backend requests-per-second throughput tests which have nothing to do with UI components or interactivity. Both are great projects with their own advantages and ecosystems.

Thread Thread
sharpninja profile image
The Sharp Ninja

The backend speed determines how users perceive the responsiveness of the site. That matters. Alot.

Collapse
dailydevtips1 profile image
Chris Bongers Author

Not sure what blazor is?
It's basically a SSG combining the benefits of components with a fully static output.

Collapse
panditapan profile image
Pandita

this is great thankies!! :D

Collapse
dailydevtips1 profile image
Chris Bongers Author

Thanks Pandita! ✨