Transcript

Cassidy Williams 0:07
I am excited to show you everything that I can show you about Astro in the time that we have as an introduction to myself, my name is Cassidy Williams, you can find me at cassidoo on most things. You could also Google Cassidy Williams, and you’ll find me and a Scooby Doo character. And I’m not the Scooby Doo character. And currently I work at Netlify. And it’s a very fun place to work. And and I mostly focus on new frameworks, open source stuff and a lot of React things. And Astro was something that kind of came on my radar, somewhat, somewhat recently, and when I saw that it was announced, it seemed like something that would solve a lot of problems that I had. And so I’m excited to talk about it. And I also am excited to show you that I totally know how to use PowerPoint, because whenever someone tells me how to use slides, I’m like, oh, yeah, I can totally do all kinds of cool stuff with slides. I know how to use slides a ton. And I love doing presentations with slides. Check that out. Yeah. Anyway, versus a presentation about Astra and those are all the slides I have. I’m not very good at using slides tricked.

Cassidy Williams 1:23
Yeah. Huh, huh. So I’m going to be showing you some code instead. Because that makes more sense to me. So I’m going to be pulling up a starter project that I made for Astro it is based on the actual Astro starter project that comes with the framework with a few other little things built in. And so if you’d like to actually check out Astro for yourself, you can go to Astro.build. And Astro dot build is something that I will plop in the chat. And once again, if you have questions throughout the presentation, please feel free to ask them and I will try to answer all of them. But if you would like to actually see the starter projects that I’m using, it’s under my GitHub, which once again, it’s github.com/cassidy. Cassidy was my handle for all the things and then I made sure that I Oh, I tried to make updates to it so that it could be the most recently updated repo. Let me just go Astro in here. It is not that one. It is Astro Netlify. Starter. And so if you go to Astro Netlify, starter, on my GitHub, github.com/cassidy Astro Netlify. starter, that is the project that it will be based on. And also this is an updated Oh, it is okay. It’s fine. It’s just some of the files haven’t been updated. We’re gonna just roll with this. Because I’m not sure what’s happening there. Anyway. Okay. So, Astro nella phi starter, there’s this this project, it is a Astro starter project. And all it is, is it shows you this plain page right here. And so this this plain page right here, it has a simple react counter that goes up and down. And it shows you the folder structure. And that is it. And so I wanted to talk through all of the different parts of this project, as well as just Astro in general, the current version of Astra is point. It’s like zero point 20 point 11. And so it’s it’s still very early, we haven’t hit v1 yet. But I do think v1 is coming out very soon. And it’s really kind of like a hot new framework where it’s all about shipping less client side JavaScript.

Cassidy Williams 3:40
And when it comes to shipping, less client side JavaScript, this is something near and dear to my heart. Because as much as I love react again, I talked about how I really like using React, if you ever want to make like a React single page application that has a lot of JavaScript that has to run into the run in the browser and to make a page function. And it’s like a div that is loaded, and then JavaScript that populates it. And then if you use a framework like next, for example, next is very cool, you can generate some really great static sites with it. Then some more enhanced sites with it. But it ships a lot of JavaScript to the browser by default, and Astro ships, no JavaScript to the browser by default, which is something that kind of threw me off as I was experimenting with it. But it’ll it’ll make sense a little bit as we continue to go on. So for what comes out of the box, it actually comes with quite a bit without you having to install anything. And the first thing that I want to talk about is Astro style components. And so Astro style components, I’m actually going to make a new one in here just to explain it and I’m going to call this demo dot Astro because I am not creative, apparently. Okay, so there are two areas of an Astra component I like to call them just area A and Area B to keep it clean. So, area A starts with just this little bit of frontmatter, kind of like in a lot of markdown files, where you might have some frontmatter. To explain what type of blog post you have or something, you have a frontmatter section. And in here, you could do something like, import my component from and then I don’t know, my component dot Astra, I don’t know something like that I’m making this up. And then I could say, let name is equal to Cassidy, let food is some kind of array, and we’ll just say, pizza, and cake, because what other food is there. And so anyway, in this format, or area A, you put your JavaScript and you can, you can run all kinds of neat JavaScript expressions. And it’s, it’s, it’s pretty nice. Area B after this is the HTML. And so you can have a plain HTML file, where inside of here, you could say like, you want to have a head and inside of the head, you’ll have your title. And then I’ll just say, Hello World, like this.

Cassidy Williams 6:16
And I just saw that the IDE is a little pixelated, let me know if I should make my font a little bit bigger or anything I’m happy to. Okay. So anyway, you have all of this HTML in here. And what’s cool about it, is you can actually use the JavaScript that you’ve that you’ve created up here. And so because I have named Cassidy, I could say, have an h1 in here and say name. And then Cassidy was here will render on the page. And actually, I’m going to comment this import out. So that way, we can show this page and I’m gonna go to slash demo. Look at that. It works. It’s exciting. Ah, okay. So it’s just, it’s just HTML enhanced with some JavaScript expressions. So it’s, it’s a lot like JSX. It’s not exactly JSX. But it’s like JSX. And I can do more stuff. That’s JavaScript as well, where are JSX II as well, where let’s just say I want to make some kind of list. And then inside of this list, I’m going to have food dot map. And then inside of here, I’m going to render Oh, look at that. Thanks, GitHub copilot. You’re the best. And then look at that pizza and cake. That’s not what’s supposed to happen. We want to have, you know, this is why AI isn’t that good. Okay, there we go. Pizza and cake. Voila. So anyway, you can render your JavaScript expressions and it will work on the page and it will be beautiful. And once again, you can import different components as well. And so I mentioned that I have a counter component. I can import counter from counter like that. Oh, God. JSX Why are you yelling at me? Because I didn’t name you. Right. Okay. Stop Yellin, this should work. You know, never do anything live kids. Okay, I’m just gonna copy this, I’m gonna do this. Let me make sure that the tour works. Okay, the tour works, this is my fault, then. I’m gonna try counter one more time. Sorry.

Cassidy Williams 8:37
Counter then that JSX. That should just work. It does. It was just mad. Okay. And so then I can put the counter on the page. And look at that. It’s a simple react counter. So pizza cake does sound intriguing. You’re right eka, and I am interested in it, but we don’t have time. So like you’ve seen right here, there’s area A and area B. area A is your JavaScript where any kinds of scripts can happen. And then area B is your HTML, what renders on the page. And the frontmatter up here is fully compatible with both JavaScript and TypeScript. And so you can import any components, any Astro components, any JSX components, view components, React components, svelte components, it’s all just built in. And that part is really, really cool. And this is run at builds time. And so when you are, if you deploy this, and your site is building, anything that runs in here is going to be run as the site is building. It doesn’t run when the user hits your page. And so if you want to query an API, let’s just say you want to get a list of Pokemon from the Pokemon API, you can do it inside of this frontmatter. It’ll happen at build time. And it’ll already be rendered to the page whenever your users at the page so they don’t have to query that API either. Which is great. And so lots of very cool stuff built in And they’re directly into that area A. And like, once again, Area B, it’s HTML. Until it’s not, you can add in any components that you import. Once again, I did a React counter here, but let’s just say I did do that tour, or I did import tour from and then my Oh, components and then tour dot Astro like this tour like this, these are just side by side, Astro and react are completely different things. And yet these components can work together. And so if I wanted to do view, which I’m not going to right now, because I’m not confident in my abilities with view, I could have view and react living side by side in the exact same page, which is very, very neat, then you can think about how you can hydrate pages with all kinds of really interesting concepts by having these frameworks live side by side. And so I think that’s very cool. I’ll get into more of this later.

Cassidy Williams 10:59
But Astro components can also take in props, they can pay attention to what the URL is, there’s there’s a lot of really interesting things that happened here. Now, one thing that I’d like to touch on is how it actually renders things on the page, because it is showing this react counter. But I haven’t clicked the buttons yet. And when I click the buttons, nothing works. And that is because once again, react or Astro ships, no JavaScript by default. So React is rendering this component. But it’s not actually interactive, because there’s not JavaScript here, it’s just showing the HTML. And so you have to hydrate it, and you have to make it happen, there’s a few different ways that you can do that. I’m gonna make this a little bigger and show you all the different ways. So with this counter, you have a prop called client. And with this client, it can take in different types or modes, I guess, of rendering. And so I could do client load. And if I do client load, then when I load the page, it will work. And so this, this renders this component on page load, and that is it, it’s kind of plain and simple there. There’s also idle. And so if you want to render this page, and and once the main thread is free in the browser, then this loads or this works, it’s very simple. There’s also client visible. And what’s cool about this one is that the JavaScript doesn’t load until it’s actually visible on the page.

Cassidy Williams 12:40
Now, in this particular instance, it doesn’t really matter because it’s visible on the page, because it’s a very short page. But let’s just say I added fish, and carrot. And actually, let’s not make an entire list of food. I’ll just zoom in on the page. Oh, I can’t zoom in that much. Okay, start naming foods. Ah, okay, let me say it’s a pineapple, and coconut. And this is definitely an A plus demo. I’m glad you’re all still here with me. Okay. Is this a long enough thing? You know what, I’ll just add more words somewhere else. I’m going to make this a very big thing. Cassidy was here, again. Okay, so we have all these headings. This is not on the page. I’m going to show you the Network tab here. Okay, so as I load this, did you see that? Did you see that? I’m going to do it one more time. Killam reload the page. We you’re not seeing the counter on the page at all. But then it’s on the page and the JavaScript loaded? Ha. Okay. So that is what the visible part does, is when when the actual counter is visible on the page, when the JavaScript enabled thing is visible on the page, then the JavaScript actually loads. I think that is so neat. I when I first discovered that I was like, oh, it’s like mysteries hidden. It’s so exciting. So anyway, that was a lot of me talking about food, but at least you got at least some of that working. Okay. I’m gonna take out these names. Okay. So you have load idle invisible, and I’m going to mark those here in case you missed them load idle, visible. Okay. The next one is client, media equals and then some query like this. That’s all I’m gonna do. Media. Then is query, I’m not going to demo this right now, because you just saw me trying to come up with food names, you get it. With this client media query, it will hydrate the component and let the JavaScript load when the browser meets a certain media query. And this part I think, is particularly cool.

Cassidy Williams 15:20
So let’s just say instead of a counter, you have some kind of sidebar on your application. And in your sidebar, with all of the rest of your layouts, you might be pulling for data every few seconds, let’s just say you’re pulling in a new Pokemon every single time in your sidebar. If your pages nice and big and wide, you have that data loading and just like, oh, great, that’s excellent. I love my beautiful sidebar. But let’s just say you’re on your phone, and you can’t actually see the sidebar, you’re just scrolling through the page, you don’t actually want that component in the sidebar to keep loading a bunch of different Pokemon that you’re not even seeing. You’re you’re you’re not looking at the sidebar, you’re looking at the content on the page. This is where the media query can come in, you could say, Okay, I only want the JavaScript to load for this particular component, if a certain myriad media queries hit. And so now you can have much faster and smoother layouts, depending on the size of your browser or, or the content of your browser. All that media queries are able to be and I think this is particularly powerful, because media queries, they’re very powerful in CSS, but they were kind of made for a different time, where you were dealing with kind of just layouts, and not all of the hydration that JavaScript does on a given page at any given time. And so by having media queries done on the JavaScript level, outside of the CSS, you can do a lot of really interesting things with it. So anyway, that is what media query does is it hydrates the component when you have a certain media query that you pass in, to to this component. And then finally, the last one here is called only, only is something that isn’t actually recommended in the docs to use very much. It’s it should be avoided. But it skips rendering at builds time entirely. And so that means that the typical rendering of HTML, which again, like this whole thing happens at builds time and the HTML is loaded, and then the JavaScript is hydrated at any given point.

Cassidy Williams 17:33
That doesn’t happen when you have only all of it happens at runtime, not at build time. Sometimes that might be necessary, where you just wanted to run a build time, let’s just say you want to have an Astra component that has an entire single page application, in that you might want that type of only thing to occur. I think it’s a good thing that it exists as an option. But I wouldn’t necessarily recommend it, especially if you’re building a mostly static site, but it’s a possibility. Okay, to review, oh, I know, query isn’t defined calm down. Okay. I’m just going to comment this better as a group. Okay. It’s because it’s HTML, and I was doing this in a JavaScript the way. Okay, so I’m going to walk through each of these one last time. And again, let me know if you have any questions. So load, it means it runs on page load. Idle means that it runs as soon as the main thread is free. Visible means once again, when the component is visible. Media, when it matches, oh, look at when the media is loaded, know, GitHub when the given query matches, so like when the given media query matches, and then only means that it only runs at runtime, not at build time. Not that builds time. Okay, come back here. Okay. Errors, am I right?

Cassidy Williams 19:16
So anyway, these are these are the different times when components can be loaded with JavaScript on the page. I think that this is so cool, because it just means that your bundles are so small when they actually go to your users. And I think that’s just such such a powerful thing. And it’s, it’s so simple to make it just conditional like this. I love it. Okay, so anyway, that is that is how the rendering works in those in an astro for loading JavaScript. Now, once again, it renders react view svelte Preact, and I think a few other things to it. It does a lot under the hood, and it does that by default. If you don’t want it to, you can say hey, only work with React and that is totally because as you do run an astro site at build time, it’ll check. Okay, are there any spelled things are there any new things and it will load those, those renderers in your in your bundle, at least to make it work. And so you can say, I’m not using view, I’m not using salt, I’m only using React, and you can tell it to there’s a configuration for that. Or you could just use all of the frameworks. You’re the world’s your oyster. Okay.

Cassidy Williams 20:28
Also, it comes with a component that I think is incredible. And, honestly, I’m very, very excited about it. Because it’s so simple. And that is a markdown component. Because how many times have you tried to configure markdown in again, react and in view, and all this stuff where you have to add all kinds of different loaders and stuff built into Astro is import, mark down. From I think it’s just Astro slash components. C for yells at me seems to be working. Great. That’s it. Now you can use markdown. And so let’s just say I want to have inside of my body here, a bunch of markdown. Now I can be just like, what was she really here? Nobody knows. This is a list. Look at that. It’s the exact same thing as the HTML, except it’s markdown. How neat is that, and it can, it can render all kinds of really cool things. And so if I wanted to do for example, a code sample, I could do elders to console dot log hello, world, oh, look at you, once again, get help you’re trying to make be helpful, but you’re not look at that. It renders it, it’s just done. I think that is so so neat. Because it, you can just use markdown, and it’ll once again, run at build time, not at runtime. And so it’ll just render the HTML. And so you can import all kinds of markdown content, let’s just say you get marked down from a CMS that you’re using it just render that. And and it’s great. And I can’t tell you, this is this has really saved my bacon a few times to be able to just write stuff and not have to format everything. I think that’s that’s so so powerful. So anyway, that’s that’s the markdown component that I think that is very cool. So I’ve talked a lot about what Astro can render. But you might have noticed I made a demo page. And all of this has been living in a demo page. Also folks have said that the stream has paused. Let me know if it has unpaused. Because I’m sorry to hear that.

Cassidy Williams 22:56
Okay, reload in his back. Okay. Sorry about that, everybody. We’re now going to be talking about route IQ. Okay, so I made this demo file, it’s in the pages directory. And it’s it’s just demo dot Astro in there, that creates a page and it’s done. You don’t have to have Astro in here, if you wanted, if you wanted, you could actually do let’s just say I’m going to call it pizza cake. We’re already doing this pizza cake.md. You can have a fully markdown page raw. Like that. And now if I were to go to slash pizza cake. Supposedly it’ll work. It’s been a little slow. That’s okay. But know that it should be fully marked on page named pizza cake. There it is. Okay, sorry about that. That’s just my browser. Okay. So hey, pizza cake, it’s done, you have a fully markdown page. And so you don’t have to use Astro components. If you don’t want to inside of the pages directory. Anytime you put a dot Astra or a.md file that automatically becomes a route. And so you can have fully marked down pages. You can do some styling and stuff, if you’d like to make it all pretty, but it just works. And that is pretty nice. And if you want to point your routes at a different directory, you can. It’s fully configurable. But I just think that part is really neat. And also I’m going to change this pizza kake.md to a pizza cake that Astro for a second. And I want to show something where let’s just say I want to do HTML and then I’ll do my head again. And I’ll do a body and be like oh Wait, this is just area B. That’s right. Now, this is just area B, with Astro. Everything is optional. And so if I wanted to just do plain HTML and a dot Astro File, I can. And it just works. If I wanted to do just area A, for whatever reason where I just do the frontmatter of lead, pizza cake equal forever. If I wanted to get rid of all of this and just have the JavaScript run, that is that is allowed to, everything is optional. Everything is configurable. It’s very, very exciting. It’s, it’s, it just works. And that part is really, really neat. So you might be wondering, though, what if I don’t know all of my route names, because right now I have index dot Astro demo dot Astro pizza Kake, dot Astro. But what if I want to, for example, have a folder in here called posts. And I want to host my blog in here. But I don’t want to name every single one of my blog posts in here, I could, if I don’t want to pull from a CMS, I could just put markdown files in there and have it work. But what if I want to pull it from a CMS and I don’t know all the route names or anything. Don’t worry, it’s covered for you. I’m going to call it blog dot j s. But it’s going to be in brackets. And so in case you didn’t see that, I’m actually going to just put it in here so you can see it loud and proud.

Cassidy Williams 26:34
It’s going to be blog. Jas, in the brackets here. So it’s a funky, it’s a funky name for a file. If you have used Next.js. Before, you might recognize this because this is how next Jas does their dynamic routes, where they they name it inside of these brackets here. So now when I go to slash posts, and then slash whatever the title is, it will match it. And I’m just gonna keep typing inside of this doc. So that way you can see nice and clearly what I’m talking about. So with this blog that Jas and actually I’m going to do, oh, cancel, it’s going to be blocked out Astro. I think Jas works. But I’m going to stick with the thing with the with the theme blog that Astro, it will just work. And so let’s be by saying that you have a dot slash pages slash posts slash and then this again, blogs. Dot Astro, look at that. It’s trying to make me do pizza cake. Job GitHub, calm down. Okay. So by doing that the types of routes that this matches is, let’s just say it’s it’s pizza kake.com. This is my brand. Now you’re with pizza kake.com/posts. And then anything in here, it could be one, or pizza cake, slash posts, slash my great blog, or whatever, it linebreak it’s going to match all of these different URLs based on this dynamic route name. And so it generates that at this path whenever you create the folder, and then the dynamic route name. And so it’s it’s it’s the end, yes, I see that there’s a question. Does it have catch all routes? Kind of like index js? Yes, it does. Good question. Okay, so I’m going to go into this blog dot Astro thing in here. And let’s just say, Okay, I’m going to say this is a great blog post or something. So inside of here, you could also create components within components. And so I could make a layout component that does some of this for me, but I’m busy talking too fast. And so I’m not doing that right now.

Cassidy Williams 29:05
So inside of here, title, and I’m going to say my blog for now. I’m going to say this is a blog. Okay, cute. It works. So if I were to go to localhost 3000, slash posts, slash, whatever. It says that we need to actually populate this with data, which we expected that’s fine. This function gets static pads, believe it or not, I did want to show this to you is get static pads is a function which you might recognize from next Jas as well. It’s a function that you run to generate the routes that you want to populate with your Astro applications. And this actually changed and I actually don’t know I’m going to go to the docs really quick, just because I’m curious now and again, we’re doing this live, which should be fine, right? Yeah, totally. Um, So with a with Astro as that has been changing, and morphing, there have been a lot of changes, it has definitely gotten much more steady over time, where there’s not as many giant changes, they used to have a really cool collections API where you would generate a collection of pages. And voila, that’s how it worked. Then they renamed it to get static pads. And it makes a lot more sense. It’s something that I think it makes a lot more sense, at least to someone like me coming from next and coming from other frameworks. It’s, it’s just better named, and everything. But this is this is relatively new compared to what used to be. But anyway, with get set of pads, you export a function, hey, I’m just going to copy this here, because I can try to stop me, you can’t, you won’t. Until you have all of these different parameters that you can pass into this URL and those parameters, it takes in some kind of ID. And you can then use that to define your routes inside of here.

Cassidy Williams 31:07
And so let’s just say that i want i What were the pages that I defined, I think the pages I defined was like pizza cake and my cool blog, or something. I don’t know, let’s let’s just say, we’ll we’ll do an ID of one for now. And then props. I’ll pass to the page, because I want to show you how that works. Props will pass the page and I’ll do pizza cake is true. Or something like that. No, I’ll do pizza cake is forever. Okay, so this is confusing and how it’s nested. So let me clean this up for you for a second. Okay, that stop it. Okay. So why are you telling me I’m just going to take this away? We’ve got our params and our props. It’s an array because it expects more than one. And we close that and it’s fine. Okay, so now, when I go in here, this page is not found because it has an ID of one. What if I did whatever? acity. Why do you ever do anything live? That’s what I’m saying. Okay, so I’m gonna just do a little bit of live coding, where I pretend to know what I’m doing. And I promise I prepared for this talk. I’m going to pull in the ID from here. And I’ll do the ID is equal to Astro dot request dot params. And in theory, I should be able to just get whatever from here. And so I’ll do this as a blog. ID. Thank you all so much for bearing with me. Cool, that’s fine. What did I miss? This is let’s see, this is a array of objects to determine which pass will be predetermined by Astro, I already did that. This should be fine. I have a feeling that I am missing something dumb. And once again, I’m doing this live. So I’m sorry. Let me try one call. And what am I missing? Astro function is required static site builder. I know that params is required props. Yes. Totally. Did that to return an array of objects? Determine which paths will be in there? Yeah, did that great. Pizza kake.com has already registered. Oh, that is a shame. Also, a Astro only has static site generation not SSR. So all routing and routing related data happens at build time. Is that correct? That is correct. Yes. That yes, that is absolutely correct. Should the params be blog? Whatever? Yes, it should. That’s absolutely what it should be. Because I’m a fool. Thank you so much. Okay. Look at that. That’s definitely what it is. Thank you. Problem. You’re great.

Cassidy Williams 34:23
Okay, so that was just a file naming issue of my own issue. Okay. So cool. This is a blog, the blogs name is whatever, I’ll do my blog named log. Then be just like this is a blog named log in here. So much fun. Graph got a look at that. Okay, this is a blog doing whatever, so much fun, loving it. And so I can do this again, where I could add another one in here and so instead of the blog being named whatever, then I could say the blog is being named something that matters. And then pizza cake is here is questionable. Okay, and so now if I go to the route, something that matters, this is a blog name something that matters so much fun. A Okay, once again, thank you so much for saying blog, because that’s definitely what it was supposed to be. My bad, I apologize. Okay. So anyway, that is how you do dynamic routes with Astro and I promise, it’s the, if you actually know what you’re doing, and you’re not live coding, it will be much easier for you than it was for me just now. But you can also take in parameters as well. And so notice how I did Astra dot request dot params. I could also pull in pizza cake. From Astro dot request dot props. Okay, and then we could get the cake doesn’t like that does it? Once again, really, really proven to you that live demoing is not my expertise. Okay? It should be though. Also, all of my ducks are in Spanish. That’s fun. I’m going to pull in props one more time, because I could have sworn that’s all you do prop with props. It’s just astroturf props. That’s my bed.

Cassidy Williams 36:33
Cool. Rocks. A questionable. This is so much fun. And it’s questionable. I’m glad you think so. And then again, if I go to whatever, now pizza cake is forever. So anyway, that’s, uh, that’s how you pull in the request parameters. And that’s how you pull the props to get dynamic data. And yes, there are catch all routes as well. So Oh, okay. Those are the main features that I wanted to talk about outside of styling and state management. And I don’t want to get too deep into that just because of time constraints. And I want to make sure that I answer a bunch of your questions. But, um, styling and state management, I think it’s still relatively early in the implementation of Astro. But there’s quite a bit supported already, which is exciting out of the box, global CSS is supported. And there’s some limits around scoped CSS and CSS modules, but it works. And the fact that I can just use my CSS modules, it’s great. And so for example, I have my counter dot JSX that I showed you before, back when I wasn’t on a dynamic route, down here. And then also in demo, I’ll go to that one. Well, she really here, nobody knows. Okay, so we have, we have our simple react counter that we showed before. That’s, that’s this. But you’ll notice that we have our styles coming from a CSS module. It’s very basic, I added margins, I could do something like color is green. And look at that the color is green, it does some nice hot module reloading super, super fast. But yeah, CSS modules supported out of the box. There are other styling things that are also supported out of the box. I personally, almost always just use CSS modules anyway. And so I’m happy to see it supported and it works. In terms of state management, it’ll depend on the library that you’re using. The context API for React works totally fine. A recoil works. Joe tie works. I last I checked, I think Redux was only partially supported. But maybe it’s fully supported. Now. View has a view X support, spelt has full svelte stores support, all of all of this state management things are either supported, partially supported, or will be fully supported very, very soon, which is really, really exciting to see. Now, once again, on my GitHub, you saw the Astro Netlify. Starter. That’s what I’ve been working with right here. But I also did a little Astro react and view demo in here, which I’m not going to, you can try to look it up if you want to, I mostly just want to show you the components. I made a view counter. See, I know how to use some view, where it’s very simple. You do plus and minus subtract and add and it’s a view component. And then I also did a React component, which is pretty much what you see here, very simple React component. And then, inside of the pages, I was able to make the view and React components live side by side. And because they can take in props. I could create a variable that passes something to view and react. So you could add actually share state amongst view and react and have a full on application that uses both. I think that is so so cool. Because there are some things that just each framework does a little bit better the answer will always be it depends for what should I use for a particular thing.

Cassidy Williams 40:18
But for example, the way event bubbling works and and how props are moved around and changed in the different frameworks and libraries that it sometimes makes for a better mentality to use one over the other. For example, if I’m making a to do list, if you’ll forgive the very simple explanation, I might want a to do list item to be able to delete itself and react, you can’t do that. But in view, you can. But overall, let’s just say I want the entire To Do app to be in React. In theory with Astro, depending on how I structure stuff. I could have an Astra component that has a react to do list that utilizes view to do items that can delete themselves. It’s probably going to be messy. That’s probably definitely not recommended. But you can and because you can, you definitely should. That’s how Jurassic Park works, right? It applies. Do you want to use reacts Filter View? Yes, exactly. And it’s really exciting to see an end. Astro is built on this concept of islands architecture where you have different islands of information that kind of talk to each other, but sometimes they don’t. And and that’s that’s really where it shines. And I think it does a great job and it renders very, very fast. And again, because there’s not JavaScript by default on the client. It’s just a really nice and speedy framework. Now, with the latest version of Astro coming out soon. It’s I’m particularly excited because if you don’t know Astro was created by the creators of snowpack, great bundling tool, it’s awesome. They’re switching it to Vite next. And if you’ve used VT, it’s I used to think it was pronounced vite. It is Vite because of French words for fast. It bundles so fast. And I’ve only played around with it a little bit with that with like the not even Beta Alpha extra early experimentations with the new VT stuff, but it bundles so fast that it won’t feel like your site has to do a really long build time that it feels like it doesn’t have to be a concern, just because it goes so fast.

Cassidy Williams 42:40
And so overall, I’m particularly happy with Astro, I think that it’s something where it allows you to be very flexible, very configurable, let’s just say you want to add support for another framework that I haven’t mentioned yet, you can, it adds all kinds of options for configuration. And escape hatches for pulling in other options were the world’s your oyster. And I’m really, really excited about that. And so I want to talk about one more example that I’m not going to build because we don’t have time, but I want to kind of explain. So let’s just say you have some application where you have a marketing site for your website. And then you want to have a fully dynamic application once a user logs in. And you want the user to be able to log in, log out all that jazz, with Astro. That can all be one gigantic site, which is cool while still having this islands architecture. So it feels like microservices or micro sites. But it’s still kind of monolithic, which is mind bendy, but particularly cool, where let’s just say Netlify. As an example, I work there, I’ll be a shell for a second. If you go to netlify.com, you’ll run into our marketing site, our marketing site is actually its own repo, it’s built with I think, eleventy and view. And then when you log in, you go to the Netlify app. And that’s its own separate repo. And that is using React. And it’s using React and a lot of SPI and React Router state style of application. And we have all of these different repos for managing different parts of the marketing site of the of the React app, the actual Netlify app, as well as the duck site and that that site is built on something else to lots of different frameworks and everything with Astro that could all live in one place if you wanted it to. And that part is particularly neat. And so I could make my marketing site again, let’s just say I have a very simple application. Let’s just say I have a marketing page. I could create my login page when someone logs in. I could have someone log in and I can have a full react application on a single route or or make multiple routes. And I could have my logout page, I could have my Doc’s page. And it could all live in one application if I wanted it to. And the flexibility there, I think is very, very neat. Because I could use view for my marketing site, I could use React for another one. And I’m starting to repeat myself. But the I think that power and emphasizing it is particularly important, because it’s just neat. This is this is the type of stuff that I’ve been looking for in a framework for a long time. And so I’m excited about it. But I see that there are questions and there are 10 of them. So I’m going to start going through a bunch of them. And Hello, Brian, welcome. Hey,

Brian Rinaldi 45:42
yeah, I was gonna help you go do that. But you, you could do it yourself. Yeah, so first of all, that was that was awesome. I think everybody in the in the chat is like, they’re all like, some of them might have left to go start coding their site and Astro. So what, let’s see, I’m gonna go through the questions with you, if you don’t mind. Does Astra yet have the functionality needed for on first visit rebuilding a pages that then become static? I think he’s talking about like, like talking about, like, TPR type thing?

Cassidy Williams 46:21
Yeah. For for that kind of Yeah. Distributed persistent rendering, just distributed, static generation, and all of those things where you can build like part of a static site without deploying the whole thing. It does not have that at this time. It just serves everything statically

Brian Rinaldi 46:40
you can use on demand filter, right?

Cassidy Williams 46:44
Yes, that’s true. You could you could use an on demand builder on nullify, and I think I think that Cloudflare is starting to implement something like that, too. But I’m not sure where you could implement something like that. an on demand builder function that would build a page separately.

Brian Rinaldi 47:06
Yeah. Okay. Cool. I wonder I mean, everybody seems to be adding this. So it seems to be like something that we can probably expect to come be coming soon. No surprise. We just need to agree on a term because now we’re DPR, DSG, and ISR? Right?

Cassidy Williams 47:25
Yeah, I think we’ve definitely been talking about combining the DPR and DSG, once and just going in that direction. But

Brian Rinaldi 47:34
I’ve started just calling it deferred rendering, which Yeah, that’s okay. All of them are just like render it later. Right. So anyway, okay, so should have done this. And I didn’t. Why would I? Why would I use this over lemoney? What are the benefits compared to other static site generators?

Cassidy Williams 47:58
So I think the I kind of emphasize this more towards the end here where there’s a, there’s no need to configure any frameworks that you might want to use with it. So you don’t need to configure view or react or svelte or Preact or anything with it, it just automatically works. And you can just run with it. You can add whatever opinions you want to it, and it will work. And so that is that is. What’s cool about it is it’s both lets you have opinions, or it could have opinions for you. And I think that’s great. And using something like this over lemon tea. It really does come down to preference. If you want to use it, go for it. It’s a great framework. I have no qualms with it. But I like that so much is built in that I if anything, I can just take things away from it and add add stuff as needed.

Brian Rinaldi 48:51
They’ve said what’s that project for? 11 needed the kind of? It’s like an astro. Yeah,

Cassidy Williams 48:58
it’s it’s got a funny name. Yes. It’s like sprawling or something. It’s not, but it’s a funny name like that.

Brian Rinaldi 49:07
Yeah, the guy who created it was even speaking attempts that cough and now I’m totally blind. It was banned, right? I think yes, it has been banned holes, right?

Cassidy Williams 49:18
Yep. And then I’m just gonna find it right now might

Brian Rinaldi 49:22
wake at somebody put it on TV. That’s what spanking is. If you want to use 11 Yeah, you could use slinky. Yes. Okay, so next question is, how does this compare to something like svelte

Cassidy Williams 49:39
once again, and this this might have been a question earlier, because I’ve kind of touched on it but basically, and also all the people in the chatter like come on slinky. Thank you. Comparing it to something like spelt it lets you use spelt. If you want to just use spelt you can and that would be totally cool. But then you’re just using spell this lets you use anything that you want. Right?

Brian Rinaldi 50:05
How does Astra work with Gatsby in the next day? Um, gets me really separate. It’s a different.

Cassidy Williams 50:12
It’s a different different approach. Yeah. Yeah, combine it. Right, you wouldn’t combine it. Gatsby next are specifically react frameworks. Astro is a framework that can use React or any of these other frameworks and libraries.

Brian Rinaldi 50:29
I’m super excited that because I’ve like stuck with some of the mortars. Like, I still use Hugo a lot, in fact, that sites built with Hugo, but partly because I just didn’t want to shove JavaScript framework down people’s throats when like, I didn’t really need it. There’s only a minimal amount of JavaScript going on. I mean, there’s the login and some other stuff is like, I don’t need a whole framework for that. So this is really exciting for me. Does extra work with React components that use context?

Cassidy Williams 50:59
Yes. It fully supports the context API and state sharing with context.

Brian Rinaldi 51:05
Awesome, easy answer. Can we use an LFA on demand builders with Astro, we answer that? Yes. Yes. I mean, it’s not there’s nothing built in.

Cassidy Williams 51:15
It’s gonna say it’s not built in. But maybe that could be a feature request for the team.

Brian Rinaldi 51:20
Awesome. Yeah. Does does markdown, own it? Okay. So does language. Yeah. So I think it does. Right.

Cassidy Williams 51:30
I probably should have demoed that. I’m pretty sure that it does. And then I think you can customize that as well.

Brian Rinaldi 51:37
Yeah, I think somebody mentioned it in uses the code coloring that I usually use, I’m blanking on it, but I can everything. I can’t remember names of anything today.

Cassidy Williams 51:50
That’s what happens when you’re in front of a

Brian Rinaldi 51:53
good thing. I remembered your name, because I had to introduce you and everything, you know. Yeah.

Cassidy Williams 51:57
I guess it’s a very good comment, not managing a Webpack config is an incentive. Correct? Like you can you can set up a config that does a bunch of stuff. I love not having to.

Brian Rinaldi 52:09
Yeah, yeah. I think just even like being able to use markdown without having to modify a config and create a loader and all this other stuff. It’s just, you know, the number of times I’ve done that, it’s like, why, why do I have to do this? It seems like boilerplate. It’s a pain in the butt. So Oh, prism is the CSS?

Cassidy Williams 52:30
Oh, yeah. And there’s also Shiki. I think there’s one and there’s highlighter anyway. Yeah. Yeah. Yeah, says prism. Just be sure to add a theme.

Brian Rinaldi 52:41
Right. So so just built in, I guess, how would you make an API request to iterate over your blogs use Fetch in the frontmatter?

Cassidy Williams 52:50
Yes. fetching the frontmatter. Done?

Brian Rinaldi 52:54
Okay, so the frontmatter, you can put whatever JavaScript isn’t there’s no

Cassidy Williams 52:57
limitations on what you can JavaScript expressions totally work.

Brian Rinaldi 53:02
That’s, that’s super cool.

Cassidy Williams 53:04
Yeah, it’s, it’s so nice and simple. I rather intuitive for anyone who’s done web dev.

Brian Rinaldi 53:11
Right. Nick asks, is there any image optimization or compression at build time?

Cassidy Williams 53:17
I don’t think so built in. But what I would suggest to you, Nick, is to check out something like cloudinary. I, I appreciate the concept of image optimization, compression and stuff at build time. But if you use something like cloudinary, as a service that does that as their jobs, then you don’t have to manage your own images, they do all of the compression and optimization, you just query it from their API’s. That’s, that’s my personal preference. But that’s all about the decoupling of it all.

Brian Rinaldi 53:47
Yep, yep. I’ve used I’ve used cloudinary. Myself, I actually do use, like, on this side, I use Hugo’s, like Asset Management for all the images, just because I used to have to resize everything. It’s easy enough. I mean, I don’t have I don’t have most of the images, like it’s just one, the banner. So like, it just does all the different sizes for me.

Cassidy Williams 54:08
Yeah, and Netlify does have a build plugin for that kind of stuff. Thank you, Lindsay for the plug, because probably should have mentioned that one too. But then also like, like with some other frameworks, where it’s built in. I won’t throw shade at specific names. I don’t particularly like their implementations of it out of the box, where it like, it works for developers mostly. But then if JavaScript is disabled for some reason, or something like that, it kind of falls apart. And so yeah, that’s why I like not doing it in my own code base.

Brian Rinaldi 54:43
Yeah, I’ve tried to get it working in next and constantly I felt like I’m paying and I’m like, What am I doing wrong? Directions. I’m like, it just airs out every freaking time. You know, so anyway, Is it possible to do cross component props communication, say between a React and a spelt component.

Cassidy Williams 55:06
So, you couldn’t do like a React component inside of spelt at this point, but kind of like what I showed with my view and react demo. You can have an Astra component that passes variables to each of those components, and they live inside of the Astro page or the Astro component. And so, yes, it’s funky. But it’s possible.

Brian Rinaldi 55:33
Okay, that’s, that’s B, maybe Deepak you can do a blog post about this. I’d love to hear somebody experiment with this. Sorry, I know you said earlier, but what is the repo link? So I can see a few with Astromon. Title?

Cassidy Williams 55:51
Oh, yes. The it’s the net, the Netlify starters, what I’ve been working with. Yeah, okay. Why it’s the starter is if you go into the readme, it has like a command where you can use this as a template. And the reason why you could use it as a template is if you click Deploy to nullify, or if you if you run it for whatever reason, it has the Netlify dot Tamil built in, which has the automatic builds commands that make it just work without any config on Netlify. To run.

Brian Rinaldi 56:19
Okay. And we’re down to the last question this Astra right inline style or ship, external CSS file.

Cassidy Williams 56:30
You know, I always just use CSS modules for pretty much everything. But hey, look at that. There’s a guide on styling that talks about this in the Astro docs. If you go to Doc’s that Astro dot builds that will dive into that a bit deeper, but it supports lots of things. And I think that it ships external CSS files, if I’m thinking correctly.

Brian Rinaldi 56:58
Okay. All right. So that’s all the questions. That was awesome. I clearly, you know, I’m excited to try it. Everybody in the chat seems excited to try it. So I think we’re, we’re all just very excited now.

Cassidy Williams 57:18
It’s just so fun.

Brian Rinaldi 57:21
It does seem fun. I have like my personally I’d like a first I’m going to redo my crappy old checkup blog. I think it gets checked. Well, I still think Jekyll is great, but my It’s just that my blog is old and crappy.

Cassidy Williams 57:34
I get it. My I have an old blog in Jekyll that’s sorely neglected.

Brian Rinaldi 57:39
Yes. And then I was thinking like, bigger. Like, Can I redo CFE? That would be awesome. So you know, it seems like a perfect kind of fit for, for what that site does. So, yeah. Anyway, when I find all that,

Cassidy Williams 57:56
yeah, everyone, all that free time. All of my friends that I’ve shared Astra with or who I’ve seen play with Astro has just completely fallen in love with it, because it’s it just works. And it’s so simple. And I think on my team, a grand majority of my team’s demos are just using Astro now because some do specialize in React some specialized and viewed stuff like that, but they can say, oh, I’ll just whip this up here. And then they can share the repo with the team and they can just use the same codebase and write in what they’re comfortable in and it’s great.

Brian Rinaldi 58:29
Yeah, that’s that’s awesome.