Astro 4 with Elian Van Cutsem
===

[00:00:00] Hi there, and welcome to PodRocket, a web development podcast brought to you by LogRocket. LogRocket helps software teams improve user experience with session replay, ever tracking, and product analytics. Try it for free at logrocket. com today. My name is Paul, and joined with us is Ilyan Van Kutsem, and he's here to talk about Astro 4, the big new release with Astro.

Ilyan is currently working as a community manager over at Astro, so I'm sure we're going to get all the juicy details. Welcome to the show, Ilyan.

Yeah. Thank you so much for having me. Yeah. Really excited.

Me too, because Astro has been making a landsweep in the developer community. We've been talking about it here in the podcast on a few episodes. So it's really great to have somebody from the inside right now. We can really get into everything that's come out. And we have routing, the dev toolbar internationalization.

There's so many things that we're going to get into. I don't want to spoil the

Oh yeah. We shipped so much, like all of last year in 2023, we shipped, I think three [00:01:00] majors, so 

Three majors in one year. 

Yeah, 

that's a feat. I mean, I just listed a few, but. For a really brief outline, kind of an elevator pitch, could you give us like some of the top level release notes for Astro 4 so we can just let the listeners know what we're going to be getting into?

yeah, for Astro 4, I think the main features were the Astro Dev Toolbar, which you get now we launched internationalization support for internationalization routing and translation support. We released a the new features for view transitions, APIs like we did a lot of stuff. We redesigned the logging, which is probably one of the more subtle ones.

We redesigned our documentation to feature Starlight which we'll probably get into later as well. And we also launched a couple of experimental features like incremental content caching and such 

Content

caching. Everybody has an opinion about that, especially with the new Next. js releases when they're like very aggressive about content caching. So it's interesting that we have a spectrum there now with all the different [00:02:00] frameworks. So I'm excited to

I know, yeah, the good thing is it's still experimental, so we do have time to fine tune things. But yeah it's impressive to see what we were able to achieve. Like our documentation I was talking about earlier uses Starlight now, and we tried it out just to, to have like, what does the incremental caching looks like on our docs?

And it was like, I think an 80 percentage gain. Yeah, I think it's worth it for now. Yeah.

Well, Iliad, how did you get involved with Astro? Were you just an Astro lover? Were you PR ing stuff up? What

Yeah, it's such a long story and I won't go into too much detail about it, but I was actually PRing stuff into Astro since I, let me think, I think Astro 3. 15 or something. Not three points, sorry, 0. 15. Like it was really early. It was 20, 2021 or 2020, somewhere around that area. I was still finishing up school.

I was studying in uni doing web development and I [00:03:00] was writing up a big paper about performance tools and on how to build your website. And one of those broader features I was looking through was JAMstack websites. And at that time, there weren't really a lot of options out there. Like Gatsby was one of the bigger ones.

You had Eleventy coming up and you had a couple of other ones. And there was like one small tweet I saw, which was basically, it was the Astro website and there was nothing on it except for join discord. That was it. So I joined the discord had great talks. Like the awesome thing at that point was that there was no one in discord.

We were. A couple of people hanging out, discussing things. So I immediately felt part of the project that, that for one and two, like the philosophy that we had at Azure at that time was so familiar to me. Like ship no JavaScript. We don't need JavaScript that much. So let's leave it behind and only ship it to the stuff that you really need.

That was something that really clicked in my mind, in a sense.[00:04:00] And then from there, I just started to contribute. I started using it on my personal website. Then we shipped major one, we shipped major two. And then I started speaking about Astro. I did a couple of meetups here in my local hometown.

Then I got invited to a bigger conference called React Brussels, which is also in Belgium where I live. I went to speak there and met so many amazing people like Tejas and Attila Josh Goldberg. And we had so many great conversations. And then I felt so attracted to the idea of working open source.

That I like all my free time went to open source, all of it. If I had a couple of minutes to spare, I would. I'm going to go into the discord and chat with a couple of people because also no code contributions are contributions to open source. Don't get me wrong there. So I started doing that and then I started PR ing stuff into Astro itself Astro website and all of that stuff.

And then this year in August, I got a message from Fred saying, Hey. Elyon if you want to[00:05:00] we have budget for another person on our team and we would like to have you. Do you want to chat about it? And of course it's my dream job to be honest, so I said yes. And that's how I got to be involved with Astro as being an Astro employee.

So yeah, I think that's where we are.

I like that story because it not only tells us a little bit about you, Iliad, but it also showcases a little bit about Astro itself. Like it's the whole like thing, we don't need any JavaScript. That's. That's home base. That's 

that's exactly the thing where we started, right? You have these awesome websites, but all of them are just basic empty HTMLs, which we have one diff element, which says ID app, and then we load all of those, that JavaScript. And actually probably like for more than 80 percent of that whole page, we don't need any.

Those are all static links or all static content. So what if we could actually just ship all of that statically and only hydrate those components that actually need JavaScript. That was kind of the philosophy. It still is.

still, and [00:06:00] it's glad to hear we still are. And I'd like to, focus on Astro 4 and maybe the things that are not still the way they are or things that are different. So for people who, like yourself, You have your website in Astro, you've already built it, it's up there in prod. What are breaking changes, if any, can people expect with Astro 4 and how do they like migrate, or is there something that people should be looking out to do with

yeah if we get into migrating migrating. Majors and minors in Astro is like the easiest thing ever. Before you had to do it manually, like you had to do the NPM upgrade stuff. And that was a little bit hard in the sense that you had to do install at latest, whatever. We don't ship that much breaking changes.

We do deprecate APIs, but you know that in advance, like a major in advance, you'll know which APIs will be deprecated or changed or whatever. We publish very big upgrade guides, which are very clearly put, like In Astro 3, you did this in Astro 4, this is how you do it. What do I have to change? And then we lay like really [00:07:00] there for you.

So it's really easy to upgrade, but we also published this package, which is called at Astro JS slash upgrade. So if you do NPX or PNPM DLX at Astro JS upgrade, it will check all your packages and all your dependencies and we'll upgrade Astro to Astro 4 or well, the latest Astro version, and we'll take care of everything for you.

Well, tHat sounds like a lot of magic.

Yeah, it is. It is. We have amazing developers. It's insane. Like how could they take care of developer experience just by themselves because they want to take care of our developers and don't want to introduce that much hassle to upgrade because we want everyone to get on the latest release because the latest release is always the greatest release.

If people don't use the upgrade CLI, or maybe they have a monorepo and it's a special configuration or something. What are some deprecated APIs or things like that, that you might want to turn people's attention to? 

Um, ,

One of the things is for instance, that we renamed a couple of APIs. Like for instance, if you were using the [00:08:00] internationalization API in Astro 3, the latest version of Astro 3 had that as well then you have to rename that or de experimentalize it. You have to remove it from the config.

So probably all of that is. Almost always located in just one file. And it's your Astro config file. So it's actually really easy. I've seen people upgrade from Astro 1 to Astro 4 in a couple of minutes without the Astro upgrade command, because they didn't know it existed. So I, I think that we're actually really good in, in doing upgrade guides and making sure that we take care of our users.

We love hearing that because it's not always the case with some of the frameworks out there. Yeah.

Exactly. We won't call names, but we all know

So speaking of nationalization, 

There's New updates for this specifically with routing. Can you talk to us a little bit about what's new out of the box with that?

It's a lot. Actually we started the support for internationalization because we needed it ourselves as in the astro documentation has, I think by [00:09:00] now. If I'm correct, 14 different languages not all pages like a hundred percent translated, but like most of them. And we build really janky custom systems for it.

And that's actually a reason that both Starlight and internationalization exist is that we had to fiddle around in our own documentation and we thought we can do this better. If we bring this to Azure, what would it look like? And then we started thinking, what do we need? We need redirects.

We need translations. We need link handling, all of that. And then we also thought, okay, how can we integrate this in Astro? So then we started looking at that and turns out it was a very highly user requested feature. So then it was almost like, no doubt we need to ship this. Then we started working on it.

And the awesome thing with. um, Internationalization in Astro is that it really takes care of everything for you. Like it's a very easy configurable API. You just set your default language, you set your support languages. , if you use content collections which are a way of authoring content, you can [00:10:00] very easily integrate with, internationalization.

So I could have my content collection dynamically change based on the internal, internalization

Basically, yeah,

Okay. That's very neat. That's very cool.

It is really neat. And also one of the cool things I will mention is that if you use SSR with Astro, which is usable now you can actually automatically detect the user language from the browser and it will automatically redirect you to that page translated. So if you would, for instance you are a Russian and you go to a page in English, it will automatically redirect you to a Russian page.

Which is really neat for us for instance, in documentation, like we always send you to the right page.

Talk to me a little bit about the documentation. So you mentioned you guys are using starlight now. I'm personally not familiar. What is. Starlight, of

All right. It's actually very easy definable. Do you know something like DocuService?

It's 

Docusaurus, I 

it's that better, faster and built upon Astro. So you, one of the big [00:11:00] advantages that you gain by using Starlight is that you get to use all the Astro goodies inside of a very easy easy environment.

One of the things that we what was like our main motivation for, something like Starlight is that. We have done docs very good. Like in general, we can say that Astro has terrifically good docs. And everything that we learned about doing and writing those docs we put into Starlight.

So actually we are giving you a framework which has all these experience from all these docs authors over the last three years of authoring content for Astro. Into one framework and put out for you. That is what I, what Astra Starlight is. And it's amazing. I was really stunned by the first time I used it.

I'm really happy with how it turned out. I must also disclose it's not on its first major yet. It's still, I think by now 0. 15. And we still have a couple of things to do, but it's actually really stable, really usable. Yeah. And it's also [00:12:00] already part of some people's daily stacks.

So it's, it is really usable.

Content collections definitely provide something that you can't really find in other frameworks that I mean, I wasn't familiar with Starlight, haven't used it, but I can just imagine writing a docs website based upon those fundamentals must be a magical experience.

And not just content collection, but also MDX is such a MDX, it's so awesome that you can import a react component, for instance, into a markdown document and then leverage that power. To make your docs interactive. I don't know if you've ever visited our tutorials, but we have tutorials and they are interactive.

We have quizzes in them. And those quizzes are all built in MDX with the power of components imported into them. And if you use Starlet for your own website, you can import those same components and build a known quiz for your own docs.

Oh, we have more goodies to get into, particularly, I'm really Interested in the dev toolbar which we can get into in a sec right before that [00:13:00] though. I just want to remind our listeners that this podcast is brought to you by LogRocket. So for your web application, whatever framework you might be it, if you want to spend less time debugging and more time just building the app, You can check out LogRocket because it uses AI to find and surface issues that you may not have seen.

There's things like heat maps, full session replay across the browser. You do need JavaScript for that, but it's very useful when you're trying to figure out why something in your application is not functioning the way it should. So head over to logrocket. com today and you can try it out for free to not only build your app faster, but make your app faster.

So yeah, Ilyan, I'd love. To talk about the dev toolbar, I think these types of features when frameworks come out with them are just like they're really powerful, even though they might not. Seem immediately useful. Like I remember when next JS, like they cleaned up finally, when they cleaned up the error messages to make a little more sense, like that was massive.

That was huge. So on the developer experience side, can you talk about the dev toolbar? What is it? Why is it awesome?

Yeah the DevToolbar [00:14:00] used to be called the DevOverlay, so sorry if I messed that up, that's because Astro 3 and 4 has a little difference there. The DevToolbar is actually a toolbar, which showcases in your if you run your dev commands, so pnpm dev or npm run dev, whatever, then we show you A, a dev toolbar, which has, I think, two built in apps.

We call them apps, but they're basically like built in plugins or you can imagine something, and they are called audit and inspect will show you what islands that you're using and what file path they are, where they are located, if they are lightweight, 

if they are static HTML, exactly.

Or if they're interactive components. And so you can hover over them and then it will show this the file path will show the client directive and you can just click on them and it will open automatically in your VS in your VS code or your other IDE. And then you just can work on them and see your real time changes.

And then the second one that we have launched is audit, which is basically [00:15:00] a built in accessibility checker. So it will check on your images. Do they have else attributes, do they have misconfigured area attributes and that stuff. Now, the cool thing with the dev toolbar is that it's a fully exposed API.

So you, as you're, as a developer working on another product, you can just build your own in house or open source public own app and import that onto our store. And then you can just install it. For instance, we have Storyblock, which is our official CMS partner. They have built their own, so you can analyze your blocks and your CMS.

While you are still all in the browser and exactly the same for Sentry, which is our monitoring partner. So you can use, I think they call it spotlight. You can check all of that just without leaving your dev window ever. So I think it's a really easy way of working in your development environment and still getting all the benefits that you would have if you ran multiple audits on your production website.

Being able [00:16:00] to see. The islands right there in my layout must be huge because that in my experience being a messy person can kind of get out of hand because I just, I just want to throw islands everywhere,

especially when you're getting into it for the first time, because you're not sure how to like group islands effectively until you do it a bunch of times.

So that's huge. I must be great for learning.

the thing is that Astro, like it doesn't have a really high learning curve, but you can get really deep into not optimizing things as effectively as if they could be in Astro, and especially like you could use multiple UI frameworks all at the same time. For instance, you can use a react component here, a view component there, and it's felt component there.

Like how do you keep track of all of that? For instance, if you're migrating an older SPA over to Astro, this will give you tools to check whether you can replay something with static HTML, whether you need still some library likes felt, or maybe you can just compile it all [00:17:00] down. So I think this is a game changer for basically make migration projects for real.

that's awesome here. I'm excited to check out the dev toolbar. Having point and click things like in the layout are just so powerful because we're visual creatures. So

Can you tell me a little bit about the new view Because this has been slowly creeping its way into all different frameworks everywhere because they're just so fun to use.

Maybe this is a hot take, but I wouldn't say slowly. The thing is that once we released it as being stable in Astro 3 point, I don't know whatever minor it was. People started going all for it. Svelte released it the week after, Nuxt released it as experimental a couple of weeks after, and that's good to see.

Like we were really pushing the web. And it was really interesting. You can do so much cool things with with the browser native view transitions API. And that's the whole cool part. It's browser native. Because your MPA. Can feel like an SPA, like you are not loading any JavaScript, but still you have beautiful [00:18:00] animations and morphing and sliding and fading elements.

All natively in the browser. It's really strong. What we did with Astro 4 was just bring more of all those goodies to you. For instance, you have persistent UI now. So for instance, if you want your whole page to move left and right from the history to like from one page to another you could say that your UI toolbar or your for instance, your sidebar.

Will stay persistent and will keep it state that's totally doable with all browser native APIs. This kind of sad part of the story is that it's not natively supported in all browsers yet. It is being worked on, but, for now we're still working on Safari and I think it's being shipped in the new nightly releases of Firefox, but I'm not quite sure.

But yeah, you can do really cool stuff with it. And now with Astro 4, we can even do better things like form handling. You can do so much cool things with it. Even now we are [00:19:00] supporting natively. Prefetching. So when you hover over a link, which is an astrocyte, it will prefetch that page. And then when you click on it, it will already have preload.

So it's way, way faster. Your animations feel smoother and you really get an SPA like behavior. And then I think one of the other things that we've added is a route announcer, which is good for accessibility, especially for people with visual problems. So they can hear what. route that are going to and also programmatically routing.

So you have an I think it's called navigate, and then you can just call from your JavaScript, navigate to that page. So if you want to build a game, for instance, that uses multiple pages to navigate , you can totally do that. And next to that, I think in Astro 3. 6, we shipped a couple of lifecycle events happening in the view transition, so you can stop view transitions, you can advance them and all of that.

Oh, nice. Okay. Cause I know sometimes the API for like, how can you affect the previews and in all this, sometimes they're not surfaced to it. So it's great to hear that's being brought up and you can [00:20:00] affect them.

We've talked about quite a few new features here. We talked about migrating internet internella's ash.

I'm going to stop trying to say that word. I,

You say 

we talked about yeah. Translations. We talked about a bunch of new features. I think. One interesting take to observe is things that you guys chose. Not to entertain or maybe not to build because sometimes that helps draw the line about what this framework is meant to do and its strengths.

So is there one or two things, issues that got brought up in the community that kind of decided we're not going to do this now, or maybe we'll reconsider it later.

Good question. Actually, I can't give you a direct answer, but what I Can give you is for instance, that we stopped maintaining a couple of things. For instance bun, we never supported bun natively, but bun does support us. But the problem is that we always get issues about people complaining that their bun configuration is not working.

Cause still bun is not like a hundred percent [00:21:00] working backwards compatible with node. But we are a node thing and same with Deno. So we move those adapters back to their original. Creators. Basically we moved our demo adapter to the demo organization and they are now responsible for keeping that updated.

And that's, that was a hard step to do in a big decision. But I think it works out great now. But like to say that there was something that we didn't work on that we didn't choose, I can't give you a direct answer actually, one thing that I. Can say is that we are a fully open source project.

Actually all of our features that we do build or might build in the future are all chosen by our users. So , we have an RFC process, which has three stages, I think. And the first one is to just open a discussion on GitHub, and then we do just discuss about a feature. Do we want it or do we not, for instance, one that's open now that.

So what might be built in the future is incremental server rendering which I know that Next. js does. And people wanted to see that in [00:22:00] Astro. So people just open a discussion about it. It gets voted on and if it gets a couple of votes and we can make the time for it to build in the future, it gets advanced to the next stage.

Then we build it into a full RFC with an example API, and we built it really like well structured, and then we start building on that feature. So if you are an Astro user and you're hearing this podcast, then be sure to check out our roadmap. It's just a GitHub repo and you can give comments there, discuss there, leave your thoughts there.

And it's the best way for us to make Astro better. Because it's a features that you probably will like to use.

That was going to be my next question, Ilyan, is what are people raising? What are they submitting issues for now or RFCs about what's like on the docket for the next one? Incremental server rendering is huge because yeah, other frameworks are embracing that. So it's great to hear Astro's looking

yeah, exactly. That, that was actually the only thing that I could come up with. Probably I could come up with them in a couple of seconds. I know there is so you have incremental [00:23:00] server rendering. You have a couple of features requested for the dev toolbar to ship natively. Of course, there is still some view transition work to be done.

So the first one, the most voted on is exactly like what I thought it's ISR incremental server rendering. We have, for instance, custom header support in Markdown. So you get a better Markdown experience. So you can set random things. It's other frameworks.

There is inline scripting a new reroute API. There is also a thing that some people want CSRF protection. So which is, I thought it's basically a thing that I always associate with PHP development where you do native forms and the form handler has a CRF protection code. Basically that and there is a couple of more but yeah, you can check it out for yourself on our open roadmap.

Awesome. Yeah. That's one thing that's always been great about Astro is a lot of frameworks are Open and they have the the spaces for things to discuss [00:24:00] but Astro it's personable it's a very like friendly community

yeah. And we really take the open source as being open source. Our full governance model is open source. There are a couple of like open source projects out there that are not really open source. The decisions get taken within the team. Uh, Whereas we try to make all decisions collectively as Astro users.

Like we all want Astro to be better. Like, how do we do that? And then we try to engage our whole community into making those decisions. 

Speaking of community if people wanted to join the discord if they're not in there already They can they just go to Google Astro hop on the 

website. It's right there. 

It's called the Astro launch. You probably can find it in discord itself. But we also have a couple of links on the website, but if you wanted to go to it directly, it's Astro dot build slash chat. And that will take you to our discord. 

And Ilyan if people wanted to hear about you and your updates in the Ashera team and in the community. Are you posting on Twitter, Mastodon, any of these places that we can point people [00:25:00] towards?

posting on Mastodon. I'm posting on X slash Twitter. I'm. I'm posting on blue sky. I try to be on as many places as I can be because I want to reach as much people as possible. But if people don't have anything like that, they can still follow me on my website, which is www. alien. codes. There I publish some things and you can probably find me on all of the other platforms as well.

Yeah,

And that's Ilion with an E at the

that's yeah, Exactly. 

right. And what is the, do you have the same handle for your Twitter and Mastodon?

Yes, everything is the same handle. I really was very strict on that. Yeah. It's alien codes. Yes.

Illion codes. Awesome. Illion, thank you so much for your time coming on. I had a great time learning about Astro 4 and the new goodies coming out, particularly that dev toolbar. It seems really powerful.

it is. And I think that it will even be better with people starting to build their own apps on it.

yeah. Like people can just [00:26:00] add integrations you're hoping for. That's awesome. That's going to be exciting to see.

Yeah. Thank you so much for your time. And look forward to having you on in the future again, so we could talk about Astro 5

Who maybe, probably it will be Astra studio, but we can't say too much about it.

stu Ooh. Okay. Thank you again, Illion.

Thank you so much for having me.