How Astro consolidated the Remix philosophy

Astro is one of the many new Javascript frameworks that come out everyday promising to be revolutionary. And in this case, i think it is.

It feels refreshing. I decided to try Astro for building my blog, since it claims to be a good solution for dealing with content-heavy websites, and could not be happier about it.

A lot of frameworks sell themselves as web standards focused, and one that stands out in this aspect is Remix.

Work with, not against, the foundations of the web: Browsers, HTTP, and HTML. It’s always been good and it’s gotten really good in the last few years.
~ Remix docs

Personally, i have not used Remix enough to have a opinion regarding the framework’s DX, but i can say that this is a philosophy that all frameworks should follow. I know, sounds kinda obvious, but sometimes we end up forgetting how the Web as a whole is evolving constantly and over time becomes a super convenient platform to interact with, instead of something we would want to avoid.

For example, did you know that the web has a native dialog API? Aside from being great for accessibility purposes, the native dialog API already implements common functionality like closing on the ESCAPE key.

<!-- Next time you're creating a modal, give the dialog element a try! -->
<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

But, getting to the point now, it is Astro that made me realize how nice going simple can be, and reminded me of reading about Remix’s philosophy. Its HTML-first approach really is refreshing in a world where we try to use React Components even for styling.

The simplicity of a .astro file is powerful. I find it to be similar to a .svelte component. The following is a valid file for both. It can be a component, a route page, and at the end of the day it is just a piece of HTML.

<h1>My title</h1>
<p>My content</p>
<style>
  h1 {
    color: red;
  }
</style>

Besides Astro’s minimal and familiar syntax, i think a real unique aspect of the framework is how we handle the content rendering, scripts and user interaction. Astro uses a zero JS by default approach, in a way that just feels right. I think a nice way to say it is that while most frameworks we use are focused on creating web applications, Astro is focused on creating web pages. And most of the time what we need is a web page, not an application. The main point that gives this static feeling to Astro is how almost everything you write is just going to run at the build time.

You can imagine this being a pain if your page needs to be highly interactive, though. Being honest, there is no universal solution, that covers every case with the same efficiency. If, at the end of the day, what you are building truly is a web app and not a web page (which i think is not true for most cases), then you might want to look into other solutions, like NextJS. But here, you’re crossing a line that represents two things: Bigger bundle and a more complex DX. Note that this does not instantly means bad, it may be needed for your use case, but a lot of times it is not necessary, so think well before sending a whole framework’s bundle to the user’s browser and making the Developer Tasks more complicated.

Besides not being a universal solution, Astro definetively has a well-thought approach for handling interaction when needed. Interaction can be added via using other frameworks components from Astro’s big list of integrations, or by going simple: Just add a script tag.

<!-- This component now sends a script along with the html to the browser, but only when it is used -->
<button id="hibutton">Say hi</button>
<script>
    document.getElementById('hibutton').addEventListener('click', () => {
        alert('Hi!');
    });
</script>

As i said, you can also (Important: in a seamless way) use another framework’s components directly into .astro files. Just import it and you’re good to go. And also, by default they just render at build time! To enable interaction in external components, you use Astro’s client directives.

---
import PreactComponent from '../components/PreactComponent.jsx';
---

<div>
    <h1>Title</h1>
    <PreactComponent /> <!-- Only contains html, rendered at build time, no interaction and no framework bundle -->
    <PreactComponent client:load /> <!-- Is interactive, renders at build time and on the client. Needs the framework bundle to work -->
    <PreactComponent client:visible /> <!-- Nice util and example of Astro's great DX: Only load the component Javascript when scrolled into view -->
</div>

Note: if you use React, i highly suggest to opt for Preact when in Astro, since you have an almost identical API but with a much smaller bundle size.

Well, as you can see, i appreciate Astro’s technical decisions and approaches to the common web problems a lot. But bringing nice solutions, specially in the Software Development world, needs more than that. The solutions that can truly change something also come with an easy path for adoption. Your solution can be the best in terms of performance, but if it is not adopted and used by people, it won’t change nothing.

This is where i believe Astro shines: their technical decisions come with a unmatched Developer Experience. It may be the first time i have felt that the framework i am using is truly getting out of my way and i can just get to do what i want immediately. The framework and the tools around it are intuitive.

As i said, i believe Astro builds gracefully on top of the web standards, and thus when developing Astro projects the documentation you will use the most is probably MDN, instead of the Astro docs.

And this is incredible.

The Remix docs also states how a framework that focus on web standards is more valuable, not only to the user but also to the developer: When i was using Astro, i wasn’t getting better in one framework, i was learning more and getting better as an overall Web Developer. The knowledge you acquire while working with Astro then becomes more valuable.

If you are going to start any web project soon, i strongly recommend to give Astro a try.