All Things Astro

All right, all right. Hello, everyone. How is everyone doing? Not too tired? Make some noise. Make the people that are back there, yeah, awesome. Good.

So, who am I? Of course, I was introduced by Nathaniel. Thank you, Nathaniel. I'm Elian. I'm in the developer experience team at Astro, core member. I work at React Brussels and BGS as a conference ambassador and podcast co-host. Those are the conferences that we do in Belgium. Where are all my Belgians at, by the way, because there were a lot. Only one? How are we the biggest? Okay, but it's fine. Belgium is a small country, anyways. I also do my own meetups, devs.gent in Gent, Belgium. And you can find me online with Elian Coates.

But yesterday I got a really funny email and I'll read it to you. Meet the luminary of the Astro universe, Elian van Kutsem, that's me, the driving force behind the core Astro team. A seasoned presence conference and Elian's enthusiasm for Astro 4 is boundless. So I'm totally fine if you don't call me Elian but just the luminance of Astro.

So what is Astro? Who has used Astro before? Okay, nice. A couple of people. Awesome. And who hasn't? All the other hands. Okay. That's good because I'm here to teach you about it. I'm here to hype you up about it because Astro is actually really, really great. Think of Astro as a comparable framework to Nuxt or Nuxt, a meta framework, as you will like. We had a big discussion about, should it be called a meta framework? Well, I'm calling it that for today. The discussion is for another time.

Astro is very comparable to Nuxt and Next from a standpoint that it's a foundation. But it has a couple of twists and tweaks that you might not be aware of. It has this amazing thing called the Astro syntax. And it's really easy to understand. Like you see the area, the front matter at the top there between the dashes there? It's just basic JavaScript or TypeScript, if you will. Nothing else more. And then everything below that, the body, as you will, is just JSX. You import components, you use them as components, you loop over them, just as you usually would.

Well, Astro is ideal for content-driven websites, both SEO-wise and performance-wise. And one of the things that makes that possible is that it ships 0 kilobytes of JavaScript by default. How do we take a look at that? Well, this is what you get when you ship a Next application or a Nuxt application or even just React or anything else. It's basically just all components that are wrapped within JavaScript. And that doesn't really make sense. And why is that? Well, do you see all those footer links there? They're just static anchor links. Why do I need to ship JavaScript to that component if I'm never going to use interactivity that JavaScript offers? Well, we offer you a solution for that. Actually, we want something more like this, where we only select the components that need JavaScript or need interactivity and ship JavaScript just to those components. This is way, way, way faster.

Well, we call this concept islands, as being their own hydrated island. The good stuff that you get with that in Astro is that you can use your own favorite front-end library on top of that, being it Vue, React, Svelte, Preact, Solid and many, many, many more. You can just import them into Astro and use them as an island. So you want a button in React, you want a button in Vue. You can set them next to each other or even compile them down to just static HTML. Isn't that awesome? Ah. I need some noise in the audience. Yes. That's it. That's it. And this makes that your website can go really, really, really, really fast. And this past year has been crazy. 2023 was crazy.

We launched Astro 2 back in January and it brought a lot of improvements to an already very good framework called Astro 1. It featured this new CLI. This is what our CLI looks like. Very, very good. And until today, this is loved by a lot of people. And because it's so good, we released it as an open source library called Clack for you to use in your own projects. That's the beauty of open source. It can be framework agnostic and it can be very accessible.

With Astro 2, we shipped content collections. Content collections offer this way of authoring content with something like Markdown or MDX in a complete type safe way. We use a well-known library for that called Zod and it actually will look like this. Just all out of your Markdown. Really, really easy. For you as a developer, that is.

Next we brought you hybrid rendering. And hybrid rendering meant that you could use middleware, you could improve your rendering performance for the pages that get visited frequently or you just want to add an API to a very static website. It's all possible with hybrid rendering. And with the use of Vite 4, we were able to get a performance improvement of 33%, which is a lot. Of course, there are a couple of other things.

Astro 2 also featured a new design. Not just a design for our brand and our branding pages, marketing pages, everything like that, but also for you. A benefit for you as a user of Astro would be better errors. First we always get them, we want to Google them and then you get zero results returned. That's annoying. Well, we just guide you towards the error. If I can read this correctly, it says, your blog, astrotutorial.mdx, which is the content file, the front matter does not match your scheme. There is something wrong. It's title. You are forgetting your title. And even today, in all the other frameworks, we're still driving the error messaging forward.

And it's very good that we see frameworks like Nuxt and, I think, Svelte, hopping on the train of delivering better error formatting.

Then in August, which is not that long ago, we released Astro 3, the most exciting launch and major of Astro that we ever did to that point.

We shipped view transitions. Who has used view transitions? Not in Astro, everywhere. Not that many people. Awesome. Who knows what view transitions are? Okay. That's a lot of people more. Okay, nice.

I can show it to you. Because I can show it to you in a very simple graphic here. I think this says enough, right? View transitions make your multi-page application or MPA, as you will, feel like an SPA. You're shipping JavaScript. This is actually all browser native. So, you are not shipping any JavaScript. And thus, faster and better performance. But the craziest thing about all of this in Astro is that you only have to use two lines of code. Whoa! There we go. Good, good.

So, with Astro 3, we also shipped Edge middleware, so you could deliver even content faster to your end users, creating a way faster response time. We shipped image optimizing, which is really easy to do. It's just import the image, use it in the image component, and you could use that with picture. And the difference with picture is that you could actually use different formats or multiple sizes, whatever, and it will always be optimized. But you, as a developer, get to see or get to use the most quality image that you have. And we'll take care of the rest for you.

By a major refactoring in our internals with Astro 3, we were able to get another 75 performance gain. And that was to Astro 2, which already was 33% faster than Astro 1. And what that refactoring did to our internals is really good, because it made it so that you could use any JSX framework, like Solid, Preact, or React, and you are preserving your state while you're altering a file. So, as you can see, the counter is still running. It's in the state.

But if you type, it stays just keeping updating the state. And we all know how annoying it can be when you're working on a modal and you change something in styles and it just closes automatically. We reopen it again, do it a couple of times until it's good. This gets rid of that. It's called fast refresh. Really, really awesome.

We ship you page partials. Page partials are literally what it says. It's basically a page without any doc type HTML, without any head or any body. And what you get as a developer is that you can get something like HDMX to work. HDMX is now really popular, so it's possible within Astro.

And then we launched Starlight. Who has heard of Starlight? That's way too few people. Yeah, Chris, you have heard of Starlight. That's the creator of Starlight. Round of applause. That's for you, Chris. Really well done. Well, Starlight is not on its first major yet, but already a lot of people are adopting it into their daily stack. And Starlight is a documentation platform built on Astro, which means that you could use all of the goodies that you get with Astro in a better optimized way for documentation. It's everything that we have learned from doing the documentation of Astro in Astro and then put into a framework, like an ideal solution.

And then we had this whole thing called launch week this week, which is why I didn't sleep last night, by the way. This week, we announced Astro 4, the ecosystem fund, community initiatives, and way more. And I'll start with the ecosystem fund. The ecosystem fund is dedicated $100,000 of Astro's money going back into the Astro ecosystem that improves the lives of users every day. For instance, LushaAuth or, I think, what else do we have, Chris? We have Pilckro. We have LushaAuth. Then we have, well, two others. We have Lexington teams, which is just teams built on Astro and a lot of other stuff. And we are dedicated that money to make your life better as a developer.

And let's hope that other frameworks start doing this, too. But of course, we have Starlight now. So we wanted to build our documentation in Starlight. And we did the whole migration and released that this, I think, Monday night. It was really cool. Like, as you can see, it looks super pretty. It is really fast. And thanks to actually doing this and doing Starlight with AstroDocs and AstroDocs with Starlight, we can improve Starlight for our own needs. For instance, that way you as a developer could use expressive code now. It's a plugin for your code samples, and it's already put into Starlight because we needed it in AstroDocs. So it benefits you. And I'm very sure that a lot of more improvements will come.

On Tuesday, we launched Astro 4, the new Astro major. We introduced the dev toolbar. And the dev toolbar is a powerful and enhanced way of working in your browser, in your local dev with Astro. You can see here, like, in your toolbar, you can see which elements are interactive, which elements are lightweight, which are just static HTML. And from the toolbar, you can just click the props, see the props, and you just can click on the component and it opens in your IDE. Really amazing.

Here you can see another tool called Audit. And Audit can run tests against common pitfalls in accessibility. For instance, you can catch images that don't have alt images or a wrong description, misconfigured area attributes and all of that without ever having to leave your browser. Really, really cool.

Then Astro 4 introduces something that's still experimental, but usable. You get to be, like, the developer. I don't know if you want to ship this to production. It's experimental, but still stable. The thing is, with content caching, you can speed up your process of building your website. Especially for static websites. Because a static website takes every page and builds it to static HTML, which can take a long time if you have a lot of pages. And actually, with incremental content caching, we get rid of that recursiveness. And doing that with our own Astro documentation, which is I think about 3,000 pages big, we saw an improvement of around 80%. That's a lot. And of course, that is not everything. I sent a lot of features. I know. I really know. But the craziest part is that we have so, so many more. Like internationalization support, we have logging, we have prefetch, and way, way more. So I'm just giving you a little bit of the intro here. The question is, of course, always, what is next? It's this React framework. You've heard of it? No, I'm kidding. What's next for us? Next for us is that you get to decide.

We have an open roadmap. So if you want to see some feature in Astro, you can just submit it, build an RFC. It's open source. You can vote on things. We can discuss about things. And that really, really works really well for us.

Good. How many Houston's did you count? Someone got an idea? There were little Houston's hidden around the place, and if afterwards, you come speak to me and get the right amount, I'll get you a Houston sticker, which is awesome. Yay, there we go. Cool.

Thank you. That's everything that we brought in 2023. We have a lot more to come in 2024. It was a super exciting year, and thanks for being here. But before I leave the stage, I have one more thing. We're going to do it Apple style. Sometimes we work on secret stuff, and maybe I can give you a little teaser here. What have we been working on? Well, I can say that it is not a CMS. It's also not serverless hosting. It's something completely new and something that will give every Astra user on the planet superpowers. And we can simply wait to show it off. It's called Astra Studio, and it will launch sooner as you think. Early 2024. We'll reveal it to you. All right. That's everything that I really have for now. Thank you so much, everyone. And let's hear your questions. Always exciting to hang out with you. You've been, you're devs.

They've been cranking out. You've been working so much. It's been crazy. The amount of features they ship with the quality they ship, they are amazing. And also your devs are building amazing products. You are helping to craft and build an amazing developer experience, but it feels like the devs also care about developer experience.

Oh, definitely. Because it's like, from beginning, from products to documentation to my computer, developer experience is a priority. Well, we had to slap it into them, but now they care about it.

And what's that like for you? Just like sort of teaching them and like making that a culture in the company. But actually... In the organization. Sorry. Yeah, in the organization. Don't worry. The thing is that actually we have really, really talented devs and they did a lot of all of that on their own. And it's just us guiding them and thinking with them. But we never have to tell them, hey, this is wrong. They are probably even better at it than I am. But one thing that we do to help them is just guide them into writing. For instance, if we do an upgrade like we just did with Astra 3 to 4, we build a whole upgrade guide. And what we do is we actually provide them with templates like, hey, in Astra 3, this feature existed. It doesn't exist anymore or it has changed. In Astra 3, you did this. In Astra 4, you are doing this or you have to change this. So it's really condensed down and it's really easy for them to think about it. Okay, I did that, I built that feature and you have to do that to have the benefits from it. And once you guide that into a document, you suddenly have a complete upgrade guide. Cool. Alright, let's jump into some of the crowd questions.

Make sure you go and you add your questions, your upvote the questions and I'm going to go through them. I'm going to save one of the questions that's at the top for last and I'm going to switch it around. But let's see. So we've got the first one, which is about Astra. You pitched it as it's really good for content driven sites. And is it not a suitable choice for event driven sites? Well, it depends. That's probably the answer. And that's when we get in it depends on stuff. The thing is that it's true, like it's content driven. Yeah, sure. But you can also like build a whole SPA in it if you want. Sure. The question is, what do you need as a developer? If you need something event driven, there is even nothing wrong with going to something like PHP for instance, like Laravel. I know they have a great, great event driven thing. Choose the tool for your work. And if Astra doesn't suit that, that's fine. But if it does, then you stick with it. Is it great for event driven? I would say no, but it's great at other things. Absolutely. And honestly, I think that's a good segue because people are saying like, what's the catch? But honestly, it's like there are things it's good at. There are things maybe that it's not the right tool for. So where would you, for example, if someone's saying, OK, I've got a project, I've got a website I'm trying to build, I'm evaluating a couple of different frameworks. What are some of the questions they should ask themselves that would make them go, OK, yes, Astra is the right choice and maybe they will go, no, Astra is not the right choice in the way it is at the moment? Well, it depends again, right? The thing is, if you need a lot of database backends, all of that, I wouldn't personally choose Astra. But if you need a blog, if you need a personal website, if you need dashboards, even that can happen within Astra. The thing is, there is no catch, except that by default, it's just static HTML. So if you are looking for something that's really, really interactive, really, really frontend-driven, interactive-driven, then you might not look at something like Astra. But I don't see any issues overall. No, absolutely. I think it's like a classic, like, what's the catch with walking? If I have to do it across Germany, it hurts. Exactly.

And then that's why I drive. Exactly. Yeah. So let's go on to the next question. This one says, like, Astra seems to update versions so often. I mean, we've talked about Astra 1, 2, 3, 4. And it feels like you're coming, you're moving along. Is it easy to update Astra to the new versions or should I be worried, like, if I commit now that I'm going to be screwed later? I saw Theo updating his website from Astra 1 to Astra 3 with one command. I think that says enough. We actually have shipped a new command, which is npx.astrags.upgrade, which will take care of everything. The only thing you have to do is reach for the upgrade guide. We don't have a lot of, like, breaking features that will literally break your site. But if there are, they're listed at the top. And it's super, super easy to just follow it. I will say, I've used the upgrade guides before. They are really well documented. So I will also shout out to those as well.

And then this is a kind of question about, like, the organization as a whole. Like, obviously, we live in a capitalist world. How do you make money? How do you, are you able to make such cool products free? It's a classic question that I do get a lot. And the answer is actually really difficult. And I'm probably not the one that should speak about this. I think you should ask Fred, not me.

The product is free. It depends on what product you're talking about. If you're talking about Astra, of course, it's free. It's open source. You can use it whenever you want. If we are talking about Astra Studio, it will be paid, but there is a generous free tier that's already on the website. You can check that out. The Astra technology company as itself right now doesn't make any money. If you're talking about the 100,000 that we give away, that's actually all of our sponsor money. All of our sponsor money goes back into the community. That's a really hard line that we take. And that's the thing. You are helping the sponsors, helping them build the tools, help them build their websites. And they see you as a great investment. And that investment gets to spill to us and all of the little blog sites that we are making. Yeah.

That's quite easy for us as well. And you kind of touched this in that answer just then, because you talked about Astra Studio. I understand that there are things that you know that you can't talk about. Definitely. Are there any breadcrumbs you can drop for us? No. Great answer. Let's just move on. No.

And maybe if you do, just where can people maybe keep track of Astra's journey so that when you do make those announcements, they can be the first to know? Well, actually, we try to be everywhere. We are on Masterdome. We are on X. We are on GitHub. And I think if you choose your platform, you will get notified. Or you follow me. I tweet a lot about Astra. Can confirm. Can confirm. Sorry. No.

And one of the features of Astra that I will admit I haven't tried, but I think is pretty cool, especially now that Astra sort of code for it, was the picture and the image. And this question is kind of, I think, related to that. So Astra, they said, Astra creates multiple images from a single source automatically. Yes. Yes. And so that takes care of a lot of the things. Yeah. The only thing you have to do is specify which formats you want it to be. So you just give it an array being like avif and webp and it will take care of the rest. Impressive. Yeah. It is. I am blown away. And I'm annoyed that I haven't tried that. I told you we have really great devs. That's the whole thing. Absolutely. Absolutely. The next question you've already kind of touched on.

So we'll go on after that. And there are some people who, for example, Astra is quite new in the world, even though new in JavaScript is like six months. But Astra is still relatively new. What about people who maybe aren't sure if Astra is ready for a production enterprise world? It depends. No, it's actually like, what more production like do you want it to be? We have websites running at Google. We have websites. I think the new website from IDX, the IDE in the browser thing is built with Astra. The website from nodeVPN is built with Astra. So is it production ready? I think that's your answer. Yeah. Yeah. So you're defending like everything is enterprise ready if the shoe fits. Right? Yeah, exactly. That's what I mean. It's kind of difficult to say, yeah, production ready. Yeah, of course. No, for sure. For sure.

And the next one's about islands. I've never used any islands outside of React. I only use React. But can you share state across islands? You can? Of course. You can even share a state across different frameworks across islands. So if you have one island in Vue and you have one island in React, you can still like use the same counter value. Interesting. That's very much doable.

Yeah. And also on Astra.new, there is an example. We use a library called Nanostores for that, which is actually also framework agnostic, which we are at the core as well, which is why we needed something. And it's actually really usable and it really looks like you're doing the use state kind of thing from React. I genuinely get excited when I get to. I hope so. Sometimes I'm answering questions and I already know the answer and I know you're going to give it to me. But it is so fun whoever asked these questions. Thank you because I am learning so much new stuff as well.

And the next one is kind of about like developer tool, specifically IntelliJ. Is there a plan to update the IntelliJ plugin so it can work with React? We get a lot of comments about that. The thing is that actually the IntelliJ plugin is developed by JetBrains themselves. So they don't really accept our LSP yet. They intend to change that, but it's not at the moment. So right now I would say actually the best IDE to use Astro with would be VS Code with our LSP. I know you actually can use or you can get the LSP to work in Vim as well. But yeah, the IntelliJ plugin, as long as they don't open up their system, we can do anything about it. Yeah, that's not your kind of thing that you can control.

And the next one's about Starlight, which I am really excited about. I've met the creator now and I'm really going to dive in and find out more as well. So this person has asked, can they use Starlight components in other Astro projects without using the full Starlight integration? Short answer, no. Long answer would be it depends.

You kind of can. I wouldn't do it. It depends on what you're referring to. For instance, the code blocks, we use a different component library called, well, not really a component library, a library for that called Expressive Code, which is also a framework agnostic and you can use that on your own. But you can't like port, for instance, the sidebar over without using Starlight.

Nice, nice. And the next one's about JS stock. Is there a way to integrate JS stock with Starlight? I actually don't know. I'm quickly, yes, there is. And if they want to find a meet, do you mind just standing up and waving? If you have Starlight questions, just feel free after the talk to go and find him and ask him the questions that you have and next one.

So a little bit more about Astro Studio. People are really excited. There's a lot of buzz. Well, go ahead. Yeah, I was going to say, it's good to hear that there is a lot of excitement about Astro Studio and we are dropping something on Twitter tonight. I cannot give any more information about what time it's just a teaser, nothing more. But I can't touch any more than that at this time. But it's good to see so much excitement. It feels like the equivalent of the GTA 6 trailer. For Astro, so I'm really excited. Yes, but we don't get spoiled. No, spoilers. No spoilers. All right.

And the next one is about sort of the community and the kind of business model background for Astro. So what's that like? Actually, I would say one of the big, big things that actually drew me to Astro is the Astro community. The Astro community is amazing. And you can join it by going to the Discord. It's really easy. We do weekly community calls where we just explore what's new in the Astro ecosystem.

We talk a lot about all the stuff there, new features, old features, people porting over websites from something. Support is also there. So I would say, yeah, it's a very stable community. It's a very friendly community. And I love each and every one of them.

Cool. And the next question, which will be our last question because we are running out of time, but is Astro a good choice for migrating legacy? Yes, it is actually the perfect one. We actually have a guide on that. And it's called Embedded SPAs. And it's actually really easy because if you want to migrate an SPA, think Create React app. And what you're doing is you're wrapping everything in the app component, right? But the app component you can import into Astro and suddenly it's an Astro island. And then you can just start porting components out and taking those components in your islands or without islands and just compiling them down to HTML. We have a full guide on that in the docs if you're interested. But I do believe it's a very good thing for migrating SPAs. Definitely. Nice.

And you answered that so succinctly, we have time for one more question. Is it possible to use Astro with headless CMSs like Storybook and Sanity? Yeah. Alexandra is there. You should talk about it with her. Yeah, like Storyblok works really well with Astro. There are guides on that. We have, I think, a guide for seven different CMSs. So it's definitely possible. It works really well. And if you're interested, just go to the docs. There is a full guidance with CMS. Just check it out. Thank you so much. Genuinely, I am really impressed. Really enjoyed this talk. Hopefully, you learned something because I did as well. Can't wait to see this announcement about Astro Studio. And thank you for joining us on stage. Give them a round of applause.