Hasty Treat - What's the deal with Astro?

Monday. Monday. Monday.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest CSS, web development treats coming in hot. Here is Wes, Barracuda, Boss, and Scott El Toro Loco Tolinski.

CSF.

Welcome to Syntax.

And this Monday, hasty treat, we're gonna be talking about Astro.

What's the deal with Astro? Astro dot build.

It's, gonna be pretty neat, and I'm very excited to talk about it. I've been doing some Astro lately. My name is Scott Got Polinsky. I'm a developer from Denver, Colorado, and with me as always is Wes, boss.

Hey, everybody. I'm excited about this. I've been checking out. Sort of been keeping my eye on Astro, and then this morning, I kinda went through some of the sample apps. So I'm excited to hear a little bit more. I Intentionally, I was asking Scott all these questions. I was like, wait. Wait. Wait. Let's wait till the podcast. Yeah. I'm working on a well, I've already finished recording a one zero one course So I've been doing quite a bit. And it's funny. We actually use the Syntax API for the course.

So, yeah, that's like a great use case for it. It's beautiful because we won't change it on you, and

Yeah. You don't have to worry about the API going changing on you. I can't imagine that's going to be changing anytime soon or at least not anything that we're using from it. We'll version it. Yeah. Either way, this episode is sponsored by 2 amazing companies, Linode and Sentry. Now Linode would be a great place to host an Astro app, And Sentry would be a great place to have error and exception handling tracking for that application.

Now Sentry is the service that allows you to track, log, Store all of your errors and exceptions that happen on your website, any platform where there's the API, the server side, the client side, anything, really. And you can attach information, like, contextually, what user did this apply to, what browser, and all this stuff did this come from, what release did this come from. That way, you can say, This was fixed in release 3.1.4, and then you can get that little email that says there was a regression when you inevitably pushed up some code that didn't actually fix the bug. So check it out at century.i0.

Use the coupon code tasty treat, all lowercase, all one word, and you'll get 2 months for free. Thank you so much for Century for sponsoring. I'm gonna talk about Linode. Linode is the Linux cloud host you know and love. I'm gonna talk about one of their products that I don't think I've ever mentioned before, and that is Some images, not the actual, like, taking a photo of something. They do do that as well, but you can take an image of your application, All the code, the database, literally anything in it, and you can put that image on Linode.

And you can use that to Deploy across different data centers or a snapshot your application in a specific state.

You can mirror it from your local machine to the cloud. Some pretty, pretty cool stuff. Check it out at linode.comforward/syntax.

That's gonna get you a $100

In free credit, you can use that to host your Astro app like Scott was saying. Thank you, Linode, for sponsoring. Cool. Okay. Yeah. So I I thought we'd get into it a little bit with some basics one on ones. What is it? Who is your daddy? What does he do? That type of stuff. So what is it and what does it do? It's a framework that is basically Server first using a lot of this componentized JavaScript that we've seen before, and this is a JavaScript framework. You are writing JavaScript code here, although there is ASTRO files, which are not JavaScript files. They're their own thing. So either way, it's a framework for server first static apps Using JavaScript, you can use any front end framework with this that you'd like. In fact, you just drop in a specific renderer. So let's say You wanted to use Svelte in this thing, you could just drop in Svelte renderer. I think the the maybe the one it comes with, I think, by default is Preact. I'm I could be wrong on that, but This gives the option of Preact, React, Vue, Solid, any of that stuff that you might want to use. And the other key highlight of this thing is that it does not Chip, any client side JS, unless you very explicitly tell it to and the reason why this is important is because You're writing the whole thing in JavaScript.

Yeah. And there is no automatic hydration unless you say, hey. This component, You should be hydrated on the client side. So the big big big picture is that it's a static site generator.

It uses all JavaScript to do straight up HTML,

and it is super duper duper fast. Okay. So if I'm understanding this Correctly. It's a JavaScript framework that runs server side but also can rehydrate on the client.

It does things like and we're gonna get into this, but it does things like routing and CSS and scoping styles, and it does all of that stuff. So In that regard, it's similar to Svelte or Next. Js or or any of these sort of, like, full frameworks or something like Gatsby.

But The sort of the difference that you said there is you can use any front end framework. So meaning that, like, you still have to use Astros routing and and CSS and scoping and all that. But Mhmm. If you wanted to render out a React component and a Svelte component in the same application,

It can do that via renderers? Yep. So at its most bare bones, you have dot ASTRO files, which do not include any client side JS are all static. Okay. And dotastro files feel very much like a hybrid of Svelte and React, where it's a single file component.

You have sort of a magic section up top that allows you to write some JavaScript. You have scoped CSS, and then you have your component template code, which is basically JSX.

So you have these dot astro files, and they do not ship any client side at JS.

And if you want to use client side JS, you then bring in A front end framework, and you do so by bringing in that renderer

and then just importing a dot Svelte file and then using that as a component in a ASTRO file. Okay. Okay. So I know you're gonna get into this, but I think I'm just trying to ask the questions I think people are thinking right now. Like, what's the point of this? Like, what's the killer feature? Why don't you just use Next. JS, or SvelteKit, or

Gatsby, or something like that. The killer feature is that you can write componentized Websites, essentially. You can write componentized websites in a flow that feels very super modern. Right? Exactly well like what we're used to, And then end up shipping no JavaScript whatsoever or just tiny little fractions of JavaScript. Okay. That's the killer feature. I see. I see. Yeah. The killer feature is just how little client side JS you need to bring in. You know, it's, like, it it's so funny because we have these client side frameworks, and they're awesome at what they do. Right? They give us that interactivity really easily, but they also make it really easy to just write your entire app in JavaScript. And Things that shouldn't or don't have to be in JavaScript all of a sudden become reliant upon JavaScript where Yeah. This thing is saying, no. This thing this part of it doesn't need to be reliant on JavaScript. Only this interactive stuff does. So, therefore, you're we're gonna make the default to be static, and then the exception exception will be shipping the client side JS, which gives you way, way, way, way, way less client side JS. In fact, it's crazy how much we're able to accomplish in the, Like, in our course, like, we're building the syntax site, you can get extremely far. In fact, we don't even need a client side JS component until we start with the audio player, And the only reason Yeah. We need that is because you wanna have that interactivity where you you change the speed or that kind of stuff. Yeah. But if you didn't have any of that, you wouldn't even need Client side JS for that. And you can opt in to client side on a component basis rather than a page basis. Right? Correct. That's awesome. Yeah. Because a page by default in well, not by default. A page by definition in Astro is either a dot Astro file Or it's a dot markdown file, both of which are supported out of the box. So it's either a markdown file as a page. Like, in your routing, you can have it be a markdown file. It'll just work. Or you can have it be an ASTRO file, and neither of those have any client side. They don't have state. They don't have anything like that. But If you bring in a Svelte component, say, you import a Svelte component, you then have to specify in the component how this thing Interacts with the client side. So for instance, if you had a Svelte component that just output an h one that says hello world, that's it. Right? Super basic. That thing, even if it's a Svelte component, will ship no JavaScript unless you say client colon load on the component. Yeah. So you have these directive type of deals or these properties that you have on your your front end framework components, whether it's client colon load, Which hydrates after load. Client idle hydrates after the main thread is free. Client visible hydrates when it's in the viewport, so it's lazy loading. You have client media when it this component is only hydrated at a specific media query, which is Neat. And then you have client colon only, which means that that component will only render on the client. But if you don't specify any of those, It just server side renders it, ships no JavaScript. It's neat. And this is

more for, like, a website versus an app. Right? Much more so. Yes. You can still do app y things. Like, I think the Syntax website is a great example that you have for your course because the Syntax website is a website, But it also is kind of an app because it has, like, a player built into it, and you can change pages while you still play whatever

podcast you're listening to. That's the, like, the exact approach is, like, you don't need, like, client side JS for all this stuff. Yeah. And because of that, it is extremely fast. It is, you know, all the server side rendered well, statically built stuff, and it's really neat. You know, with some really cool things that come out of that, Wes, is that, Like, to generate a site map, it's you just say in the config file, hey. Give me a site map. And then it's like, okay. Sure. We have your routing structure. We have the whole thing statically built. We can write you a sitemap for you. Does it generate your website

at build time or On demand as they request those pages. Okay. That's actually one thing that Gatsby 4 changed. Really? Because, like, one of the huge downsides to Gatsby is It takes forever to build when you have a big website.

So they have switched to being able to do it on demand, which will really speed up build times. I didn't know that. Yeah. So you could run, like, a node process, and then when somebody requests it, then go fetch your data and and whatnot. Yeah. So this thing would be very good Or, essentially,

websites. If it's a personal site, that's a great use case scenario for this because, again, there doesn't need to be a server side component. It's all static. It's all fast. It's all great. You know, in the CSS picture so let's talk about the CSS picture. It's basically the same way that Svelte does it. You have a style tag in your single file component, and that style tag is scoped to that component by default. You can write some global CSS. You can import CSS from CSS modules, all that stuff as well. But by default, you have a style tag you can just write in your component as it is, and it just works scoping it. It's also SCSS is baked in. Really nice and easy to use that. Let's see what else. Data data fetching. So in dotastrocomponents, You have the section of the top of the component. It's front matter. So if you've written a markdown blog before, chances are You've written some front matter, which is basically metadata for a markdown file. What Astra said is, like, wouldn't it be neat if there was front matter in single file components, Some, like, metadata about a component. And this ends up being where you write your server side JavaScript, the build time JavaScript.

And the whole front matter section is top level await. So if you wanted to just await a fetch inside of that, you just await a fetch inside of that, assign it to a variable, and then use that variable in your template, and it's all available at build time.

So you use fetch, and you use it in an ASTRO file, and that's the Primary way in which you do data fetching. Awesome. I like that a lot.

That's one neat thing that I would love to see come to Gatsby is that it would just detect A fetch request because right now, you have to run everything through the the GraphQL API, which in most cases is kinda what you want because then you have a single data source, and you can literally pull anything you want. But something that you have to do is like, on my Gatsby course, We wanna do client side data fetching. Mhmm. And with that case, you have to totally switch your approach to fetching. You have to we just switch from the Gatsby s. Be data to, like, a fetch request. Right? And it'd be kinda cool just like it always use or if if it also recognize fetch requests,

And then you could you could either prerender them or client render them. Yeah. And that's interesting because this it is. It's very much like, here's the way you do it. It's Not only is it easy, but it's the, you know, the the browser API that you know and love. There's no fancy function. There's no weird things that you have to remember. It's just literally a Fetch call. So that that part of it is great. It's like, here's how you get data. You just use fetch. It's available at the build time. There it is. Yeah. So So I guess if you were comparing this to something, you'd be comparing it to any of the static site crop, whether that is, like, SvelteKit with a static site generator or Gatsby SPE, or Next, 11 d anything that's outputting a static site. Yeah. And that's really the main use case for it. But, again, this type of thing, if you're if you want the data available On the server in the HTML, it has to be available at build time, which makes, like, user auth stuff. I don't know what the, like, the picture for, like, a user auth situation is unless none of that stuff is going to be server side rendered or or statically built, I should say, available for you. So that's really the trade offs there. But, again, it's really neat because it does feel very much like, okay. Here's some ideas from felt that are really nice. Here are some ideas from React that are really nice.

And you know what? It'd be really nice if we took those 2 I'm gonna just say nice again, ideas and Made it into a, basically, JavaScript less server framework, and it's really neat in that regard. I was pretty shocked at how fast everything is, especially Because there is no, like, client side routing aspect to this, you know, you have anchor tags. They're linking to pages that's sending HTML down the line that's Going to be cached, but it ends up being extremely fast.

Some things I'm I'm curious about is what about when you do need a little bit of, Like server side logic, I'm assuming like, is there anything set up for using either a serverless function as well as Like, I don't think I was reading this on comparison to Gatsby's.

There's no currently image component in this thing. Right? It is. It's pretty fresh. I mean, there's a it's a It's definitely, like, not done done, but it's it's very good as is. Like, if you were saying, I wanna build my personal site in astro.build right now Yeah. I don't know if they have any plans for that type of thing. I don't necessarily even know how that would fit into this because it does very much feel like They're trying to get away from some of that stuff. I don't know if there's going to be a server component to this. May maybe there will be, but right now, it feels very much like When I say server, I mean like a serverless Like a serverless function. You need to do something, proxy some tweets or Instagram or whatever. There's also the idea of themes in here, which is more like the Gatsby version of themes where they're starter kits. That's just stuff you can get off of their site or their their repost. But, again, When they say themes in their website, that's, like, really just like like what you'd have with a Gatsby theme. It's it's basically starter kits. They have a really nice One of some other cool things there, there's a really nice CLI for it that allows you to generate things. We kind of mentioned this is very very I'm just kinda scattered going her through the notes here. TypeScript Baked in. No effort. You just use TypeScript, and it works.

Like, you don't have to set up a config. You don't have to even tell it That you're planning on using TypeScript and just start writing TypeScript. And it's like, okay. Cool. That's fine. Beautiful. I was just looking up what the serverless function Thing is and Netlify has a tutorial on how to host it, of course, and then they show using serverless functions just with their their Netlify serverless functions. So That's a good option as well as wherever you host it,

likely, we'll be able to run your serverless functions so you could figure that out. You know what Astra does really well is, like, the Smart defaults. Yeah. It's, like, something I feel like is such a problem with so many projects. Occasionally, we'll we'll we'll just, like but, like, of course, you can do Everything in the entire world, and it's all based in configuration, and you just have to get bogged down configuring every every project from the jump. And Astra is like, hey. You want Sass? No big deal. We got you. You want TypeScript? Sure. No worries. You don't have to touch it. You want, like, a host of markdown plug ins? I mean, you're probably gonna have to use them anyways, so we might as well give you all these markdown plug ins too. So, like, that's a whole thing is that Configuring markdown plug ins is The worst thing in the world? It's the worst, and it yeah. It is the worst. And so what's neat about this is there's a markdown component In Astra, there's a several built in components, things like a markdown inside of Astra files instead of having to have a a dot MD file to use markdown. But, yeah, across all of these, your markdown plug ins will work, and it's like Remark is baked in.

Let's see. Astro comes with GitHub flavored markdown support, footnote syntax, smarty pants, Remark slug, And syntax highlighting automatically with Prism.

So, like, that's what you need. They have a code component, and you just drop in the code component. You Tell it what language it is, and it just does it as opposed to having to configure all of that stuff yourself, which anybody who's ever had to do that knows it's a PIA every single time. Every time.

Yeah. Yeah. I was very thankful when I I popped this open and saw that code component. I was just like, Alright. Okay. Cool. This sounds like a great way to build a personal website or a little blog, something like that. Yeah. Yeah. I know. Especially with those markdown plug ins where it does things like automatic linking to headings and stuff like that. So, yeah, if you're interested in anything that we talked about here, give Try. You know, I I thought this was really, really nice. I thought it was interesting. It's easy enough to pick up that if you've worked in front end frameworks, it doesn't feel like anything too scary despite the Fact that you're working and it's a unique file type, I found the whole development flow, everything to be just a nice process, and I really enjoyed working in it. So it's cool Cool project. Awesome. Yeah. There's a nice little Astro extension for Versus Code that'll give you highlighting right out of the box. So that's nice. I'm very curious if my a. Oh, it does work. I'm just checking that Emmet works inside of the CSS.

Emmet.

So it works right out. That's one frustrating thing to me is that when you, like, use a new a new, like, syntax or something like that, and you have to, like, I have to make sure all my snippets and everything work. Oh, yeah. And it looks like everything just works with us, which is good. Cool. Cool. Yeah. This is exciting. I was just talking to Scott before this. I I was like, I feel like we're in, like, a bit of a 3rd wave of JavaScript.

Like, there obviously, there's been more than that. But, like, the big first one was jQuery. The 2nd big one was JavaScript frameworks like React, and I feel like the third one now is we're starting to see more frameworks that Do everything for you, are way more simpler, require less setups.

Astro, Svelte, I I put Next. Js in that that category as well. Yeah. Things are just getting getting to be pretty good. It's a good live serverless. I put that in that category as well. Yeah. We we need, like, a a name for For that, it doesn't have to be so hard Renaissance.

Yeah. It can be easy. It can be easy.

Yeah.

That's good. Well, then go tweet us what you think. Do you really need this stuff? Dot j s. Yeah. Alright. That's it. Thank you so much for tuning in. Let us know if you, enjoy astro@syntaxfm, and we'll catch you on Wednesday. Peace. Peace.

Head on over to syntax.fm for a Full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.