Transcript from the "Introduction" Lesson
>> 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: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: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: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?