Introduction

[00:00:00]
>> So I am Jason Lengstorf. I am very excited to be here talking to you today about Astro. Astro is a new-ish framework, it's been around for a couple years. It is built on a lot of really exciting modern tech. And the thing that I like about it the most is just kind of what it unlocks without asking for too much.

[00:00:20]
So we'll talk a little bit about what all those things mean. But yeah, I guess let's just dive right in. So what is Astro? Astro is a web framework, first and foremost. It allows you to build websites and web apps. It ships zero JavaScript by default, which is probably the thing that I think is the most novel about it when you compare it to other frameworks today.

[00:00:47]
And it relies on this concept called partial hydration. And so what partial hydration means is that you're able to say, here's my website. And for the vast majority of websites, not that much of it moves, right? You've got a lot of content and that content isn't interactive. It's not dynamic, it doesn't change while the page is loaded.

[00:01:09]
But historically what we've done is if we wanna build with modern developer experience tool chains like React or Svelte or Vue or any of those, you end up with this problem where a bunch of static content ends up needing to be run by JavaScript. So you've got a lot of dynamic stuff on the page that never actually does anything dynamic.

[00:01:29]
And so the tradeoff there is that you get this nice developer experience, but for people consuming the website, they're loading and executing a lot of script that doesn't actually do anything, right? So what Astro does is it takes all of that dynamic script, and by default, moves it to just HTML and CSS.

[00:01:50]
So if you take an Astro site, you get to build it using Astro components, or you can plug in React or Svelte or Vue or whatever. And those components will be compiled on the server, turned into HTML and CSS, and by default, just shipped as is. And for the vast majority of websites and the vast majority of web pages even on dynamic websites, that is the right choice, because most of that content, again, isn't changing.

[00:02:14]
It's not dynamic, it's not interactive, so you don't wanna ship that extra page away. You want something that just lists things on a page, and HTML and CSS is the best way to do that. If you want something to be interactive, this is where partial hydration comes in.

[00:02:29]
You can mark an individual component in Astro as interactive by saying client load or client only or something like that, which is a signal to Astro to take just this one piece and make it interactive again. So this is a really powerful way to work because it allows you to, by default, make the best decision possible for both, or I guess, for not just both, but for maintainability, for deliverability, for consumability, for performance, for lack of complexity.

[00:03:00]
And all of those things just work, it just happens by default. And when you need it, you say, hey, I need this part to be dynamic, and Astro lets you do that. It lets you bring in that dynamic content with just one extra attribute on any given component.

[00:03:16]
It's also UI agnostic, I talked about this a little bit, but it's designed in such a way that you can put any UI framework that you're comfortable writing. So if you if you like to write React, you can write React components in Astro and still get all of these benefits.

[00:03:30]
You can write Vue, Svelte, Solid. I think Lit works in here. So anything that you wanna use, you can probably find a plug-in to run it in Astro. And again, by default, that's only going to be for the developer experience, and what you get out the other side is static HTML and CSS.

[00:03:48]
So why should you use it? One of the things that I think is most exciting about Astro is that it's extremely fast to get started. We're gonna start from a starter repo today to get some of the the CSS and things that we don't wanna spend a lot of time writing, but the getting started experience with Astro is run by CLI, and it's magical.

[00:04:08]
I'll demo that in a little bit. It's very fast to build. Because Astro doesn't ship a lot of moving parts, you are capable of getting something up and running in extremely short turnaround times. If you wanna get a landing page up today, you can probably do it. And because of how it only ships HTML and CSS by default, you can also get it shipped to production.

[00:04:31]
Today you can build the whole thing. The thing we're gonna build today is a very full featured site that we will deploy by the end of today, and we're gonna deploy it on, mostly, just a static CDN, with a little bit of dynamic content to handle the pieces that are actually dynamic.

[00:04:50]
It's very fast to deploy. You can deploy it to just about any platform because it, again, by default, only needs a CDN. So you are able to deploy it to AWS, to CloudFlare, Netlify, Vercel, wherever you wanna go, it works. It's very fast to adopt incrementally. And this is probably the part that I think is not the most exciting, but maybe the most relevant to a lot of folks, is a lot of these frameworks, when you see somebody talk about it, they're talking about them from the context of, you're going to start from scratch.

[00:05:23]
You're going to all-in adopt this framework and change everything over to it, and that's how you get the benefits. And if you only incrementally adopt it, when you have problems, a lot of these frameworks will tell you, well, yeah, you have to fully adopt the framework to get the benefits.

[00:05:39]
And the thing that I find really exciting about Astro is that Astro is a per page benefit. You can adopt Astro one page at a time in your stack, and those pages will benefit from using Astro. So it's really nice, and because it works with whatever UI framework you're probably already using at work, you can bring these pages over without having to rewrite all the functionality of your app.

[00:06:02]
You can take the existing React components and bring them into an Astro page and just migrate your homepage to start, or a particular landing page or whatever it is. And use a reverse proxy or something to make that one page run on Astro, and everything else runs on your existing stack.

[00:06:21]
So it's a really nice way to incrementally move to a modern stack if you're currently working in something that would be way too big to try to migrate all at once to a new stack. It ships web standards. Most of what you're gonna be working with in Astro is just stuff that's documented on MDN.

[00:06:41]
You're not going to be using a whole lot of custom invented stuff on Astro.. What Astro has done is they've assembled things that are just web standards and put them together in a way that allows you to mostly use knowledge you already have. And again, because you're combining your web standards knowledge with your framework UI knowledge, you kind of just come in knowing how Astro works.

[00:07:03]
There's only a handful of things you have to learn to be able to use Astro really effectively. And like I said earlier, it can be deployed anywhere. By default, it's HTML and CSS. There's nothing more versatile than HTML and CSS. And when you do get into that JavaScript part, depending on whether you're shipping it server-side rendered or client-rendered, if it's client-rendered, again, any CDN can host an Astro site.

[00:07:27]
You don't need specialized hosting. You don't need to pay the company that builds the framework to run your hosting. You can put it on S3 with CloudFront and run it for just about nothing. Netlify, Vercel, Cloudflare, they all host it. You can also run it in a server full environment.

[00:07:44]
You can put it on render or fly or whatever you want, and it'll work there as well. Question?
>> Yeah, could you compare it to Eleventy at all?
>> Yes, so Eleventy and Astro share a lot of the foundational philosophy. And one of the things that I really, really like about Eleventy is that it took the philosophy of, do as little as possible to give the user the least amount of work to do to consume your content, right?

[00:08:14]
And Astro is similar in that both of them, by default, are not putting out any JavaScript. You're writing pages, those pages get compiled down to HTML and CSS, and they ship to the browser. Where they differ is that Astro is a little less restrictive about JavaScript. So Eleventy kinda has a stance of, don't use JavaScript.

[00:08:37]
It's stance on JavaScript is, if you want it, you can use it, but you're on your own. You have to write custom JavaScript and put it into your Eleventy templates, and Eleventy, it just ignores them, it passes through. So that can be a good restriction to put in place, depending on what you're trying to build.

[00:08:55]
But in a lot of real-world scenarios, that's where people start to say, well, Eleventy doesn't do what I need to do because I need a login form, I need this other thing. And so Eleventy has some ways of dealing with that that I'm not gonna get into. But Astro took a different approach, which is, we're not against JavaScript, we just think you should use only the tools that you need, right?

[00:09:16]
All you actually need for this job is HTML and CSS, so that's all we're gonna ship. If you need JavaScript, of course, we're gonna ship JavaScript. We'll compile your React and put it up on the page and rehydrate it for you and make it work, just like Gatsby or Next or Remix or any of these other frameworks would do.

[00:09:31]
But they only do it when you need it. And that's the big tradeoff between a Next and a Remix or one of those, those frameworks are saying you must go all in on JavaScript without doing a lot of work to turn JavaScript off. Eleventy says you can't have JavaScript unless you write all of the JavaScript yourself.

[00:09:48]
And Astro is kind of in the why not both category, where you don't have to use JavaScript, and in fact, won't unless you specifically ask for it, but when you ask for it, it is a first class citizen in the framework. And so that's really why I think Astro is exciting.