Unpack the stack with Elian Van Cutsem

[Music] foreign [Music] [Music] thank you hello everybody we are walking our way into Astra with alien so yes um this is unpack the stack and in these streams we actually dive deep do some codes we nerd out or we gig out whatever you want to call it what do you call it alien geeking or nerding I call it geeking yeah me too it's it's a little little fancier right so um we are here with alien so dude tell us about yourself what do you do where you're from what are we gonna do so um I'm helium I'm 24 years old which is interesting to most people yeah every conference people come to me and say hey how old are you again um because that like for instance at jazz world I I told people when I graduated which was only last year how come you're you're here talking and speaking at this big event and I tell them it's just luck um um but I'm alien I'm from Belgium um I work at V bridge as a software engineer full-time um view bridge is a cloud architecture company clouds native app development um serverless architecture those things but also at the bridge we invest highly in giving workshops and trainings um which is where I'm coming from so um this is kind of my native way of doing things I love education um and yeah that's um the thing of feebridge of course and then on the side I also do open source um for Astro mainly at this moment I'm an astro Ambassador which just means I do some devrel stuff some content writing technical writing documentation um and that stuff awesome so I did see you at Fuji's Amsterdam and I was totally impressed and I didn't think about your age I don't know it just it worked and I was happy and so here we go yeah and I just realized how old I am compared to you but age doesn't stop that's the best one anyways so let's talk a little bit about Astro because it's I'm not sure it's no longer the new kid on the Block but in the approach to building websites it is and you know what I just talked about how old I was right I used to build websites the Astra way before it existed I build websites before jQuery even existed it's just you have to put some HTML in JavaScript on the page how are we going to do it maybe we have some sort of static side Builder or we have some CMS that spits it out this was the way to go and then we went all the way to the other direction and so in your words what is Astro and how does it basically go back to the good old days of the hyper performance simple pages but with modern tools tell us about it yeah well that's different difficult question for me because when I graduated I learned View and react at school um so for me it's a whole different experience than for instance for you you just have to do it with the basic stuff exactly I never had to learn well I had to learn jQuery but it also was already kind of old and outdated well it's still a very valuable tool and we all should still use it sometimes um but Astro takes exactly like you said and an old approach to new technology for instance actually asteroids kind of based on the on the typical um file based routing multi-page application stuff um whereas we exactly like you said saw that react for instance and um next and next and all those things actually take a single page application approach but right now we have new movement which asteroids is part of and quickest part of um they're trying to solve the same problem but in a different way where we use multi-page applications and ship as less JavaScript as possible to keep the like time to First Bite as low as possible as quick as possible without making it boring exactly because you still want to use the tools that you're used to which are so good now right so this is a question I always used to ask anybody who would come into my team when I still worked at an agency I would actually interview them I'm going to give it to you because you're young but you are working with Astro a lot so tell me in your words what is Progressive enhancement there we go it's different it depends Bruce oh Bryce sorry sorry sir it depends um Progressive enhancements well does that make sense in the modern world with all our tools now does it actually resonate with you it does okay cool it does but I'm thinking about it because how would you translate Progressive enhancement it's it it can mean a lot right yes um he's going to chat GPT now which I can use like for instance we in the past we shipped like um websites built for um desktops then we transition to building websites for mobile and now we have like the mobile first approach which is part of like the progressive enhancement and now we're shipping applications which are whole like for instance webassembly what a crazy thing that is we can like build homes applications completely in the browser for instance figma or or photoshop tools how insane are those and yeah Progressive enhancement it's it's so broad I don't really know what I can say about it well how about I give you my definition and see how that fits Astro because to me when you have Progressive enhancement you build the simplest thing possible that essentially works everywhere and then you look at the features of the browser or the user's device and based on those features that they support you turn on things and in that sense even the internet is a feature right and then your screen size or the fact that you have touch or the fact that you have anything you have JavaScript that's a feature we're going to turn on and then when you look at how well Astro is now built you can use all the fancy stuff that you want but what comes out is essentially a very very simple thing and if you want you can hydrate it if you want you can add some state if you want you can do an SSR render that's Progressive exactly the feature and to me that is my native way of in the Old Times building because we used to build like these huge um how do you call this like campaigns for Nike for example or for Chanel all the fancy Brands they wanted all the features like I remember building for the FIFA 2012 games they needed some fancy fancy features because everything had to have animations and whatever and so what we tended to do back then is just build all the fancy stuff so it looks great and then realize oh boy in Internet Explorer doesn't work let's add some code and then another browser doesn't work let's add some code and then Hey Kevin I'm just putting some people on the screen here and there Hey Kevin what that means is that that was bad because you add more code to make it work everywhere and if you look at the the idea of asteroids you add less unless you need it and I love that part well exactly it's it's like you're basically in a sense you're writing HTML on superpowers which then get compiled down again to just HTML and if you want to you can enable some specific features you need um but still we ship HTML and we decide to ship HTML because it works everywhere and that's really cool and that's what actually resonated with me and why I started trying out asteroid I came from a PHP World it makes sense to me to to use multiple pages and and losing state in between Pages um so yeah the definition you gave is probably the best one I can come up with even better nice luckily you still have it and so yeah how does this mean like of course if you're just shipping the simple things right so you you're basically using the power that is the browser because the browser has a lot of features for let's say lazy image loading like all the object fit related things with media so how do you if you look at Astro you guys probably didn't build like a fancy Astro image stack right or did you um there is one but it's it's a package you can enable and you don't have to use it and still even if you use it it gets compiled down to an to an asset that you statically use so exactly so it's a totally native image tag that comes out with all without the extra fancy JavaScript for instance like preload or whatever yep there are a lot of people who say hey it's kind of weird and normal that you can just use an H an a tag to navigate to Pages whereas next or in next you have to use nux Link or next link is I do all the fancy stuff with the pre-fetching and the complicated stuff that makes it cool but you also it's just a different approach to it and so yeah talk to me about what do you what in your words is Island architecture hmm okay um there is a lot to this because Island architecture is Big um to me for one it means that every component you build you define on its own so um in next story next we build little react or view components that we all put on the screen together and all compile down to one to a one page or whatever but in Astro those islands which we call Astro Islands can be framework agnostic so you can build one in view you can build one in react and if you decide to not hydrate it which will probably come back to later yeah um that still would mean that you're just chipping HTML without any JavaScript by default now you can use it I also don't recommend mixing and matching Frameworks just because you can yeah I guess your bundle will be bigger right of course if you decide that you need JavaScript then you you'll have to ship the bundle of course but in the case that you're compiling the all down statically you will see no like um no delay on your browser if you're just shipping HTML and so if I ship an island let's say that has a little little bit of JavaScript just whatever let's say a button that listens to a click and it doesn't alert you wouldn't do that but imagine so that's like a almost like a one-liner right well how actually X oh sorry go on no I I was I was saying there there is actually a use case for that because you're you're saying you wouldn't actually do yeah there is a specific use case for example my website has only one hydrated component it's the button on mobile to open up the menu That's all yeah everything else is statically so there is exactly what you're saying so you can that's awesome and when you have that how much overhead in extra JavaScript does Astro add to hydrated to make the island something how many lines does it add but I I think it's about like three kilobytes it's it's really not that much but maybe you can answer that better Dan help us out for an answer yeah but it's not we're just gonna we're gonna build something soon so we might be able to just see it you can try it out exactly well of course there is the thing if if you're writing that component that you just said that listens to a click it's written in react and of course you'll have to ship like the base of react to render it out if you're writing it native JavaScript then it gets compiled down to a script and you're not really shipping any bundle you're just using the browsers JavaScript renderer to to use it yes and so it would so does it do like the ugly fi thing that we used to have back in the day I don't think so like does it like does it compile or is it just HTTP 2 so it's fine and it's the reason there is an opt-in and opt out for that yeah okay okay that actually is so there's a tiny bit of JS to enable Islands much smaller than three kilobytes so I'm assuming you're using browser native modules for these islands right I would think so I think soon not yet but soon we'll just build something and then we'll see what these islands do take a look at it right yeah why not yeah because I'm quite excited by the fact that you can also do Native web components like for example on my website currently it's not built in Astra because I had to dive into another direction to learn other things okay yeah so Dan is saying you're using feed so that makes a lot of sense yeah and here we have Joshua what's up everybody's here I like it um so what I built earlier it was like a next website but I had a YouTube video player component that I found somewhere and then changed it a lot and it was just a native web component you just whack on any everywhere and it just works because it's scoped down to its own thing and I kind of like that and so it gives you enough like little hooks to do cool things not like few and react but it's close it's it's a really interesting thing um to be able to add that to Astro as well yeah and that's that's the whole part of the like the framework agnosticity if you want to use Elite element you want to use alpine.js you want to use preact react whatever Alpine yes really yes yes yes yes of course oh wow I'm just giving Dan our twitch link uh because he said he said he saw that we're also on Twitch so it's it's on my personal account on Twitch there you go um so if you had to build your website now with Astro what is your preference of how to build it what's the approach I wrote a blog post on that actually not so long ago um because at jazz world I got so inspired that I rebuilt my entire website from scratch again um using Astro and using Astro V2 um and actually my preferred way of writing in Astro is just I started with one HTML component which is just like the index page and then I build a layout which we can reuse over separate pages then I add like for instance the footer and the reusable components I've built them all in Astro and the moment that I see hey this should be interactive and this should be built with a UI Library I start adding those features in but really we don't have to because you can still use Astro components or you can use your whole website you can build your whole website using view components but I personally don't do so I personally prefer writing Astro components over UI components but of course if you're porting a website over from for instance let's say next there's a whole different use case exactly it's for that interesting yeah and also if you think about like where I work at uniform we shouldn't go too deep into that but it's essentially you're able to content edit like your design system and then add external sources to it and uniform just outputs one composition with all your design components dollar props and then all the data comes from external and what we also do though what is very interesting is oh I'm just getting this lovely comment here that actually my twitch is not software really uh that's not good because I probably have it at just chatting or something that's not good at all okay I cannot change that in my life I think because we're doing it through stream yard but um thank you for that comment I will be fixing this for next time um what I was saying is like at uniform for example we have an SDK that queries that stuff for you and just renders it on the page which is very nice it kind of helps you it's a little front-end SDK but you can imagine these sdks are sometimes a bit more Rich because they're used in knocks the next apps and we do things like personalization so we have different content we rehydrate the component with different content based on your location or some other fun stuff yeah so if I have this extra State carrying SDK related things can I actually use Astro with Islands or do I have to make my whole page essentially one Island no you can actually use your your Island should be so small that you can just like choose which one to hydrate and which not so for instance you could start let's call it the layout in the layout you can require your whole Json API output yeah and then you can prop it down two different components and only the component which should be interactive you can shift JavaScript too um so it's definitely doable yeah so that's something I'm quite excited about to check whenever we have time we're going to obviously build an astro SDK because this thing is hot it's so much fun I build it myself probably and then release it open source and we make it better but that's another story um before we actually dive in and code something so you're going to teach me um what is the difference between Astro 1 and 2. well there is a couple of differences and one of the the main things I keep saying is upgrades mostly are painless um there is not much cases where V1 to V2 upgrade is is not really working mostly it works maybe in the case I showed you just before the stream that's a little hacky I think it will probably die that might break but that's exactly what you said it's quite hacky um but there is a there is a couple of things and what I also wanted to say is like when I first started speaking about Astro we were at version 0.16 and like wow a month ago we're already at version 2.1 so um things are going fast at Astro um and that's really cool to see um yeah I'm leveraging on that um but for instance um at V2 um version 14 for node got dropped um so right now it's version 16 18 whatever there is content collections which is a way of altering content and writing markdown or MDX but also using zot for type validation so there is completely types offering content which is really cool we're going to dive into that for sure um we made the upgrade to V4 um there is a better error templating so because we're highly inspired on developer experience and we really want to give the the developer the best experience there is um there is also now hybrid rendering I think that was a thing API routes and mixed with server side generation is also new in video I'm excited about that because could we potentially make a server-side route let's say on for sale or wherever there is a combination but like one is the server-side route and the other one is just static stuff that would work yep that's it for instance I I played around with this like last week where my whole site is statically generated except for the OG images they get fetched like every X time um it's really cool we're getting the most fun emoticons here um before we go on um actually this is a really nice one like to me Island architecture or is kind of a progressive enhancement so that's exactly what alien and I were just talking about what Progressive enhancing actually is and so it's literally unusable without JavaScript uh yeah so to me coming from many many years ago we build websites that just worked without JavaScript and if you had it on top it's more fun it just get more fun things but like we would have like checkout buttons to buy add something to bag we made that work without JavaScript by just posting a form to the back end and now we can do AJ calls and all the fun stuff but if you have built that way it's so much easier because you learn the browser and what I love about Astro is you're going back to that so you're teaching people more about the already awesome ecosystem that you have right you don't have to recreate your the new alphabet in your new architecture because the browser already gives you everything it's very interesting yeah that's true let me see there's another one a lot of people think that the site must be fully functional without JS for to have Progressive enhancement probably not true you can yeah you're right it's like um we had when I worked at Agency for these big customers we had different tiers tier one two and three tier one features had to work without JavaScript but two and three just had to look a certain way or had to be progressively hands a certain way and that is the it's kind of find that way to go of course it always depends nothing is ever real exactly it depends um so you mentioned um sword I think so does that mean that everything is typed in in type in in um there is an option um so you'll see that later when you create an astro project there is a Houston with a bot in the CLI who will help you create your project and he will ask you are you planning on using typescript not are you are you writing typescript no it's just like are you planning on using typescript then you have a couple of choices and even if you turn it off if you say no I'm just I just want to use JavaScript whatever it will still use typescript under the hood um okay but for instance not everything is fully typed of course you don't have to but no exactly of course we have judging chat so we should say everything is tight everything is type Josh we know now but the thing is if you're you're basic your core your skeleton is typed I think we're good to go like you don't have to always write typescript in your front end because you can just infer from these API calls that you're using and this is the way I like it like I've projected like I recently learned to do typescript and react because I'm a few persons so I've had to learn a bit my front end doesn't have much typescript because all the sdks I use are types I'm good to go like the most I do is like add string or it's it's a Boolean and maybe some of my component props have certain types that I just like to be inverted exactly it's nothing for me it's kind of the same I just use my types in props for instance to make sure the validation goes right and such and then maybe API calls but everything else there you go exactly and stories are right it's a great intro to typescript I think that's a really nice approach to it because if you have not done it like I've written JavaScript for like 15 years or maybe probably longer by now without typescript and then you make some crazy mistakes if you look back like holy crap right but if you then have to go into a complicated react project that's full force with all the crazy stuff it's not a nice bridge to learn let's say exactly exactly that's true so are you ready to just maybe shall I just go some stuff and you can oh yeah let's let's just start building yeah sure so as we have a pretty um uh active chat what I'll do is I'll make my screen with our stream slightly smaller I put it to the right so when I stream when I share my screen we might see it but that means we can also see the chat which is important because you guys are going to help me with alien oh yeah let me share my screen share screen entire screen because um I have used Astro once I made a video on YouTube it had version really it was not version one yet and probably 0.20 24th it wasn't like that yeah and it I was excited about it because I did like react in few components or something like most videos back then when we did a new astro project with that but now we're so much so far in I'm ready to rock so we have as we see here a support squat which I like yes exactly um let me just put this on the Stream So you see us a little bit on the right here and you see all the chat so let's see if if I make that smaller how does it look oh perfect all right um I like this website by the way because there's a bit of grain inside this color it's so I'm such a nerd anyways is this the best way to start oh it seems like I might have lost alien for a second um what that means is I'll just continue until he comes back oh there is my internet disconnected I'm sorry no not a problem at all um I live on the countryside I'm doing this on a 4G box I know exactly how you feel all right we're gonna go back in back to our previous setup so we're looking at the chat we have everything on um am I sharing everything I am okay cool yeah so you can see your screen perfect honestly this website is killer it looks really cool and this is kind of fun this is just good it's amazing designers it's just next three because this is really quite slow like when I build the next three website now out of the box and I don't do crazy stuff I score high higher than this so I'm always excited to see what this means and I know it's HTTP archive and lighthouse yep it's making more sense because next two has a lot of payload payload um files that are always loaded and time to interactive is slightly high I know this next three not so much but like for example of course like in in next three they're they're still experimenting with stuff like for instance yes the now newer lazy hydration principle they're introducing um it's very interesting to them also going that route but if you look at this website I released this last week this is on next GS because I had to learn so I was like why not of course this scores a hundred in lighthouse in everything like this I can show you this and this is without any optimizations like look my rum is literally a hundred for all the people going here on their mobile and this is out of the box next so I love these kind of graphs but I always take them with a grain of salt but this is not to say anything bad I just sometimes you just and then you know kind of read this report because I shared this report today in my newsletter because it's a really good report I love it it's really well written it is yes anyways let's get away from that this is all fine yes um um that's it I'm just gonna do this yeah okay cool should work should work I love that um I know it works we go okay so what will happen now I'll just give you like a little narration is yes you'll download of course the create Astro tool but it will also introduce one um Houston to you who is our little famous Bob um yes who was also here in China look at this this is so cute and he will ask you a couple of questions um so I I guess you just go ahead and answer them as you like um where should we create your new project actually I just made a folder so I'm assuming you can just dot slash them exactly that's what I thought cool here we go empty or what do you what I was going to say let's let's go empty because to show off how easy this is and how how quickly pickable it is I like that this is some CLI look at this yeah it's really great at building apis uh building clis yeah but that's the thing like I love the the DX for this kind of stuff like if it works well it's like the Astro team is really putting a lot of work into that in the whole developer experience what I love about is that the design comes back right when you look at this and you look at this it's the same thing which is just Epic uh right then there's the library I'm assuming yes yeah yeah go ahead and install the dependency while that happens let's have a look at the check yeah Dan just said um Nate has um made the library based on this work and that's true it's it's called Clank am I right it's something like that cool and here is that loading gradient thing available in the Standalone util everybody World should be able to use the exactly I would honestly love to just be grabbing that and put it in my own CLI I'll look it for a moment I think it's neat um my 4G is still installing but we're good no no go ahead do you plan to use Tire fruit how about yes yes exactly are we gonna go strict um we can make a new git repositor because we might want to actually publish this to let's say for sale or Netflix so that's cool yeah that's a good idea lift off confirmed but this is so cool I love it well there is actually a discussion going on in going on in Astro right now um that is changing the default port to 4321 which is actually a crazy idea there you go that's really fun yeah Astro is really good in like making puns and jokes about the web space but I'm wondering why this wasn't filled with with the um it should be oh no no it's not because you didn't give it a name you just created it in dot slash you were right I said dot slash right yep so okay it doesn't I heard the name all good though okay so let's just npm run Def and and let's take a look at it yeah we did npm yeah cool yeah you used 10 pm but that's okay that's all right I forgive you all right well all right so now we can see Astro which is just the index page right um still works there is no JavaScript at all exactly I like it yes cool okay let's have a look at how this was actually created I'm assuming there's just a page yeah exactly yep so there is just one page now it's just an H1 so you can change this as you can see it's it's like just HTML don't focus on the three dashes at the top right now we're going to get into that um so when I do this do we have oh there's actually a really good of course mobile reload because this is this is feed right based on V4 yes exactly yeah so yeah it's really fast okay that's great all right and this looks to me like where you put like the the stuff in like yml or Yama yes right so this is what we call the front matter just like we do that's the word yes the front matter and that's actually the place where we put all server-side code in Astro well all services executed code so you could just put a console.log there for instance oh this is going to show right now here we go so it reaffiliated immediately because feed is very fast this is very cool and it's not showing up in the browsers log no and that's that's of course the whole point that's exactly exactly that's the whole point truth and it directly set up workbooks or is this something I was still having local meetings yeah wait that's something that you'll have it you'll be having uh here we go let's just oh look ma it's a little full well and exactly that's the reason why I believe we should change the default Port yeah exactly because I have a whole bunch of stuff running that's always three thousand yeah same problem yeah okay perfect okay what do you want me to do okay what do you think is the best approach you do your first one to like build a layout and then go from there or I would love to try first I'm thinking is this like I have this here so I'm doing a lot of conference talks and so I just have a little API for me that I'm running as a microservice on for sale that returns all my talks you can see I've been busy that's quite a lot yeah this is like uh it's crazy I I do too many talks but I love doing it so there you go and there's also some upcoming stuff right we are developers then I'm going to Athens a few years London whole bunch of stuff wow um shall we just query this thing with the native patch which I assume will probably be probably filled in the back end of Astro I don't know actually if it's polyfilled but there is it's it's native fetch is browser it's not actually no back end right it's not back-end that's true and there is also by the way um let's say access to top level of weight so you can just do away and then fetch exactly yeah because I'm assuming this is top level await style that just works yep correct like that right so now maybe just console log it for instance yep maybe we can do this then this should be something well that should be exactly something at least I I don't even think I have to re refresh my browser no you don't okay so I'm sorry it is then it's fully filled so it works extremely well super easy beautiful so maybe let's render it out as a list exactly so what is the way to do that here exactly and actually Astro uses a way in between GSX and HTML so actually here you can use jsx like you're used to with react so now you can just open up the brackets exactly and then do result.n map [Music] my brain out she know it to me a map always needs to be assigned to a const and then you do something with the const but of course in jsx this comes out as a return so it makes sense I know uh the first time I did jsx I was also like why isn't this a 4-H wait maybe I can do it even easier yeah you can just do it like that and then return whatever you like so and list elements yes and if you now want to speak to a variable exactly like you do yeah I just have to check what my my variables are I think it was let's do a conference or conference whatever so should why is this should work probably because it's just any yeah ah wait we can do a quick thing here well I have to do this exporter yeah you just can use use type or just interface locally and don't well probably you have to export it because you probably are going to want to reuse that yeah I think we can just oh I don't think slug exists no I don't know why I did that oh data somehow an object oh and then we have to make a time for that let's let's just yeah keep it simple for now your attack should be a list of strings as well I think oh yeah you're right um he doesn't like it though conference Josh help us out who's here let me see if everything is still working yeah we seem to be good to be seen to be good yeah we seem to be good um you know what for now because I just want to get something on the screen oh there's yours help us [Laughter] this should make sense no um I think so it's already fixed I was oh yeah of course you made it you made it an area of course yeah well it's an array of talks but that's that's actually the result rather than the thing itself okay so we're good to go yep all right let's see what we get oh ooh let's have a look at the soul because it could be that we have an extra that the object is different that it should be talks or something yeah I have some result prop or something yeah I hear items items exactly yeah exactly awesome I cannot believe how easy this is yeah it's really cool and because maybe I'm thinking yes there's zero boilerplate here Beam not at all of course there is one downside you should keep track of and that is that because you're rendering or generating service side at this moment at built-in your API will get get called only once so if you're pushing this to for instance versal and you're never rebuilding your website your content will never get updated exactly SSG or whatever you want to call it nowadays exactly yep of course there are ways around this with like building with nightly or stuff yeah because now when you look at next GS for example they have an endpoint that's called revalidate and you can just make a web who connect to one URL and just revalidate that one and it just rebuilds it but that's a for sale feature obviously yeah exactly and I do use that with with my own website for instance I display a list like you do for for my events and that's nightly built yeah oh you just build it every night yeah I might just do the same thing but that then that's an easy fix because what you can also do is like right now these talk are coming from contentful so I can actually make um a web hook incontentful that when I actually publish it just rebuilts my website in for sale okay so um right now this is extremely simple but it's it's good enough um how what is the next thing you we should do well what do you want to do do you want to add Styles or do you firstly want to get into for instance using a front-end framework or both at once can be done so when you say use styles let's say I like something like Tailwind or something or like what well maybe not what I say well how would you add styles to a project like this because to me well CSS file and we're good to go right it depends it depends um mostly because I want I want to make reusable Styles but of course you have reusable components so you can go anyway but the easiest to me still to use Tailwind or actually I prefer Uno CSS um but with utility Styles so let's call it just utility Styles okay would you do CSS scoped styles to a component for let's say [Music] shall we just make a little component yes that is the LI which is the toss and then we do a scope style in there that's a very good idea let's do that and let's also make it typesafe you have to put that one in Source folder by the way yes awesome oh I might not even need this for now or you will I will exactly you because you want to make a type safe well I want to make it type safe we should so what you do here is just type interface and then just talk for instance we can also import the type talk and then just give the whole talk as a prop yeah that I like that because then we can add the date and whatever we want right I think you just should extract the type which is now in yep you should extract that to a different I guess type typescript yep exactly and now import that in both components in the front matter so you can just type in import like you would normally I have the feeling that maybe the the few DS setup script has looked at this because this feels basically the same but this came before I think so maybe can I just do this yeah it depends do you have the I don't think that will work because it's lowercase where's my types oh wait it's lower it's lowercase yeah and it's it's only one level up right it knows types oh it's never used oh yeah yeah okay but that doesn't if hmm that might just be like a Bergen the vs code Syntax for now ah oh yeah of course you have to import time yeah thank you guys thank you so much um oh but then now this is not happy um it's probably because you have to add dot JS I think well it's a it's a TS file I know wait in the past we you can use the dot TS right exactly already included oh it's just types that's what we have you cannot use types yep yep just do it like that normally that should work you know what it could very well be that my vs code is just annoyed so it says in ready or already included file name difference from the file name types of TS oh maybe it's because you did like imported it uppercase in a lowercase maybe that's something you know what the bug it's one of those I knew it yeah it's gone okay yeah because it's probably keeping a vs code conflict or like something in the cache it I've seen that before okay so we're making sense again cool yeah so now we have to import the type as well in our other one yep okay so but we also have to ex we don't have to really export the type but we have to make an interface which is called props to make our props type safe so let's just add interface props with a uppercase which is then um don't don't have the equal sign just start the the brackets thing yep and then you just have to say like talk type talk like this yeah just like you normally would use string you just use talk I guess but this could be like okay this makes sense yeah yeah that makes sense so um how do we actually load this component well there is of course still one thing you have to do because in tog.astro that file yeah um you still have to use talk so as you can see right now you have the talk variable yeah we are never assigning it so yourself to destructure that from astro.props so right now you have to like add const brackets you have oh yeah the square how do you call them in English again the accolades I call them like Curly but I don't think that's a real word braces totally braces right wasn't it something like this um yes it is but you have to replace the from by just an equal sign that's the course and then just replace the three dots squiggly wigglies that's that's a good one Josh thanks um it has to be lowercase and then you can just ask props which is then the interface okay yes that's awesome so now we have our complete type safe Astro little Astro component so as you go back to the Wiggly on the on the chat sorry I just had to do it it's too good right so now you can go back to the index yeah so you can go back to the index and I don't think you have set up aliases in your TS config I didn't do anything so let's yeah then you don't so you just have to import the component like you normally would just like with any framework just import and then the default so talk from this is not gonna work that is going to work and because it's the same as the title oh then it's not going to work we probably have to change this then you don't I think so I I don't think you have to change it depends on what it exports I think it just exports default so oh just then we're together in that case we're good so now you can just exactly right there just use the talk item and then have to give the prop oh no we have to go back to jsx here we go yeah you have to use this quickly weeklies but this should be okay yeah that should work and right now you should go back to your browser and you should see exactly the same and still no JavaScript being shipped except for uh you didn't restart the dev server um but you still should see some JavaScript because the V Dev server is running of course yeah exactly it's a local server right look how fast that loaded it's ridiculous yeah that's insane exactly awesome um this was actually like our the struggle was a little bit like hey what what are the props and how does the typescript work but actually there's not much to this no it's actually very easy it's some kind of learn curve but you get everything if you know J is X this is as easy it gets and if you didn't use typescript it was even less exactly I love this the fact that this is all server side and whatever comes out is just your template which is close to how I natively like this kind of stuff yeah exactly and there is also like no restriction in sense of like for example viewware in a template you have to use one top level component there is no restriction in this you can use whatever you like exactly go there we go very cool it's it's you can see how terrific design but it works um okay how do we there is to this yeah you just add a style component that's it just like you normally would you just have to add style and then you can do it well you don't have something fancy here well if you want to use post CSS or CS scss or whatever um you do have to install it of course but there is no um there is no extra thing required just because just except for the language itself I'm doing whatever oh that really works that's very easy and so oh wait now I want to see how this actually gets CSS oh there we go so this is the scope class name yep and so what comes out in as the CSS here so there are some feed stuff oh it's just inlined yeah there is I think there is a way around it to use yeah oh yeah by the way that's who what brighter we don't need to ask quotes Okay no in in Astro all cells by default are scoped but there isn't there is an opt out by using is is global so talk to me about why that is because in CSS itself that's not the case right well I guess it's just a choice it's just easy to use yeah and and also I think it came out of the the thing of using style components and making reusable components it would be quite logical to to do it this way it actually makes sense because exactly it's my only grope with or gripe with this kind of stuff is that new developers don't actually understand the cascading bit of CSS anymore but this is maybe just me being grumpy and old Maybe let's let's just do that let's say that okay so list style is none so I can just whack it here anywhere you can just walk it there no problem at all you can also use it at the top if you like you can use it at the bottom if you like okay in between components I haven't used normal CSS in a while I'm always but you can add stillwind if you like and it's actually just one command yeah you just have to stop the dev server and just add npx Astro ad or just npm brand Astro but I guess to add and yeah and then just still win just still wind if I'm correct I think so yep uh yep that's the DX I was talking about this is it it's very good yeah exactly it will show you what packages it's installing it will generate it will update the Styles it will add um your config and it will actually also this update is where Astro is winning honestly I think so too and there is a lot of of effort put into this oh and it knows the astrophiles and a few files and this felt why not everything you can use is there yep so now you can just go ahead and you still win you don't even have to like import a global CSS you can do that you don't have to let's say oh there's some Emmett going on here that I didn't expect okay I'm doing a block level inside the list I'm sorry but we'll just go for it foreign now we have a mix of Steel wind and whatever we have here and if I'm correct that should just work I'm assuming yeah there we go it still looks very bad but it really works it's working oh yeah and of course I'm Zoomed In by a lot I think that's also doesn't really help us we are not here to make an awesome design however no we're just showing off the functionality so this works really really well yeah and works almost out of the box like this as close as essentially so now that we have this what I actually want to do is render these list items in in few or should we do something else no I'm all for it okay let's render this in few so I'm assuming I'm just typing oh npx that's it that's just it this is so easy it's crazy it is so easy in the meantime let me just have a look at all right yeah and by the way I have a very small bladder so I'm doing the toilet stop here yeah I'll be installing this stuff continue okay let's just install some things run it again okay let's have a look in our uh convict Okay so we've installed few now but do I just make a component called wait let's just try something what's up Mark how are you doing and then we also have Kevin um solid we can do solid after this I'm quite excited um so Mark now that you're here we just we are literally adding a few DS components now to an astro native build and I'm quite excited to see how it works but I might actually just have to you know go to the docs because alien is in the toilet phew okay we added few let's have a look yeah yeah I'm back I'm back oh yourself amazing amazing yeah I thought like I made a few files and I thought why not just you know okay what are you trying to do oh wow fancy stuff well essentially I want to replace this one for now with a few few components essentially well then just start writing your view component like you normally would do exactly the same oh okay oh I forgot now you have to look at the view Docs been a while oh this this is very bad because I've been working on few for so many years [Laughter] but we need props where's the search I might just ah here just commands Okay oh yeah you're right but this is what I was looking for we don't need a Raph yet we just need props and this is for your talk object why is this complaining it's not completely I was thinking probably it should be Lang TS because you're writing typescript oh and I actually I don't know if you've seen it but I actually wrote complete guide to using Astro as a view Jazz developer um like oh really cool oh we're gonna have to have a little new Mastery oh on film Mastery even oh you've passed to the the awesome people then oh yeah well sweater look sponsored oh there it is you see I've actually gone there before yeah I think I I DM the empty the link yep there it is so there if you're not quite sure on how to do this you can always like go back and always go here I'm totally done with that but for now we're here so I've made this into I don't actually need props is enough to be fair I think it is but it probably will say it's in any type exactly but let's let's stick it like this just first yeah let's just don't care for now just for now so what I'll have to do is actually just do yeah just change it up by using honestly if this works this is too crazy if this works because we're actually calling a few item with jsx here you are but few in jsx does work oh I know I know it works that's the whole that's the whole mind-blowing thing it's it's so easy to to use components reuse components and mix and match them it's it's a very native way of of doing things this is just painfully easy with that in mind okay now we're going oh yeah go ahead go for the craziest things you can I've never done solid but Kevin just asked us to add it okay okay okay okay but we we have the the Astro support Squad in chat so that's exactly because I've never even used solid but Kevin you're gonna help us right well if you're familiar with react kind of familiar and are willing to look up some things you'll you'll get quickly on the on hands with with solid okay let's do it and if we have that in chat still he's also a solid core member oh really is it just is it the TS file or a solid file TSX just like like you would write okay cool hey wait I think what we should do is just yeah probably so what you want to do in yourself I just want like a simple component with props so it's literally just a react component I imagine that's almost the same syntax yep something like this yep well it's exactly like that you just have to yeah remove them I don't eat this right no yep that's and you probably have to export it as well something like this that should work I think yeah exactly you still have to to rename your your item they're in the props.name you have to change that up props.name yeah it's gone by now it's okay um yeah it's in any type probably you can import the type as well exactly this is so cool if this works it will work and where are my types more level of types yep okay hey we have to go jsx obviously obviously exactly and now everything goes well you just have to change your extension again I think you do have to yeah do JS there I don't it doesn't or is it just I I think that's documented in the docs I I think I mean she's going like this yeah I think so too I hope it's not gonna grab few now okay something happened at least something happened exactly oh wait so it's not lagging something here oh I guess no that's diffusing okay well you don't have to do that I think it's it's exporting a type wrong or importing a typo wait what's What's Happening Here talk is not the signup type string dog item I think you have it's we need where is it this one oh yeah uh all right [Laughter] but will that fix it probably not because you didn't export default oh you're right that's not actually the problem um this is not complaining this seems to be totally fine this is actually also solid that well but I'll take a look at the dogs well because they're going to help us in any way so essentially it should be this prop's name oh these are the well yeah exactly so you have to change the props or maybe you should just destructure the props just put it yes this might be it that might work this is not a thing that's not going to work this is a thing though will that work in that way I'm not quite sure no I need my colleagues to take a look more and what if you change up just to props.talk just to check if that works oh like this okay thanks Joshy let's try this oh the three dots well where this oh that's a lot of talks on one page it's yes oh wow really yeah it's talk talk I got all of this yeah not complaining now well I exactly I don't see any errors so so I'm just restarting it because I'm I'm old cool yeah that works thank you Josh okay awesome so essentially this worked out of the box without any issues I was just slowing down except for knowing the UI framework itself of course okay so if we just this is going to be identical I think so yes but you probably have to remove the solid integration because I think oh you think it might be um annoying yeah because they both yeah they both use the dot ESX extension so that would be kind of oh look now it's becoming real react you see that's cool so in solid it was not complaining and in react to this which so now you're probably using the react renderer but I'm thinking there's just smart defaults in Astro so it just worked but I'm assuming this is not really a normal use case you would probably do this you probably won't do that that's true and of course you're also reusing the same component literally um that wouldn't be a use case in most normal sites and so when I look at the job so okay so this is of course Tailwind has been just injected well the best way to to check this theme is to run a build and then check what's in the disk folder and this is what I like this flying by the way so let's um let's do a build and see what comes out so if you never run an npm run preview just like you would in in wheat yeah now you're checking the real example this is the actual output yeah yes we like this and this is basically just Tailwind just in time compiler with only what we need essentially exactly all the CSS you aren't using is being perched away it's very clean and beautiful exactly Josh well all of this is going to be terrible wait there's only two well exactly SEO is probably going to be not really good not really gonna do what we wanted no but of course this is going to come out well because there's no JavaScript we because we didn't add an island there is nothing no so this is fine yeah this is still slow but is my local so let's not this doesn't count um time is flying so I kind of want to do one last thing is add an island and maybe we can just add like a click Handler or something yeah let's go for a click Handler or just like a counter is my typical go-to to show off yeah but we have a component right so let's just add it in here yeah of course should we just do something nasty well let's do it in few yeah because you're probably more a view expert than I am so go ahead and do the review it by now I don't what I I don't know what I am anymore you know what let's just keep it in react because we're there now anyways I think it's like this yep and then you have terrible well you have to to put an event in so it's it's a function so yeah you put brackets and then yeah an anonymous function oh like this yep yep there you go and now you can do the alert or it comes a log whatever I I love how live streams show how how good I'm at typing or oh same I'm actually not a really good programmer there we go I'm just a generalist that gets away with stuff yeah exactly okay so out of the box this should do nothing that shouldn't work exactly but did it actually end well no no because there is also no Dev server burning you're still running your preview you're totally right foreign yes perfect nothing came out because this is this is totally cool this is how it should work so now do we just well you're importing the component into your index page so you would go over your Island architecture right over there um I could just do um there's a quick Copy here we can add client directives yep and you can see them right away and they also yeah they give you a really good example of what they are by just telling you in inside of vs code in intellisense what they do it's very cool you shouldn't use client only I just want to try I know well client only is completely opt out of the renderer and it doesn't it does work in a different way now you have to do an equals and then um add react as as a value actually yeah it's client local and visible client um Idol those are the ones that that casually just work out of the box invisible is actually the best one for actually almost all use cases yeah because it just loads the island once it's in screen essentially yeah but so tell me do you use an event Observer somehow of course it is the intersection Observer intersection that's it yeah it does have to because otherwise you have no no way of knowing it's inside but if you want to do an intersection Observer you need a domino to assign that to well you can you add a Dom note no you don't how does that work that's magic I think it's just in line in the islands oh it's the island itself that you assign it to nice I'm assuming I I think so too I I guess you gotta talk to the compiler people to be sure of this but I think so this this is a native JavaScript component I imagine yeah and you give all the props to it yes exactly so my only issue with this is potentially your Dom gets huge will it of course it then again go here and check this out well I was going to look at this one look compared to all the data in a script deck here right exactly so it's the same thing so this is just in the dorm and otherwise it's in a script I guess that's not the worst in the world different use case and the thing is it's not more nodes it's just more attributes it's not so bad that's true and so let's just refresh this okay we have the chunks when I screw up Scroll nothing happens because it's all loaded in a chunk yep okay so this is coming out okay of course it needs to have react now of course so you have to ship the the library itself [Music] I'm sorry that's the reason why why I always prefer to go with just regular Astro components before I start with anything else exactly because now when we have a look at this um there is like 1.3 megabytes of stuff coming off of the wires you're still in Def mode so maybe we should do a comparison a comparison in between because you're still just using the react component right the The View component and such aren't loaded no it's just react now okay yep okay so now we've done a build so 228 kilobytes everything you know what I'm not upset about that well this actually is quite a lot but it's still reacts So you you're depending on that okay so now we might have to keep calling it items now we get it from Astro so it has Java cream because we haven't oh we didn't we didn't put the on click in there and you had an error as well but yeah I saw that later now you're going for Native JavaScript of course yes you've noticed it's possible been a while I think this is fine that should work yes oh yeah you're using double double quotes you should use of course of course right but what was the mistake that it had oh that seems oh yeah yeah you have to to use a different import statement I think um it's a diff export oh this is the wrong one it's it's a disaster you're loading in right so that should work um it's maybe we can just remember it as default yeah probably if there is an error the the error overlay of Astro will show you what it is a really good one actually yeah it seems to work I'm refreshing the thing but it's so fast but actually the on click is not working oh maybe we just do this well yeah of course we're two years we're too used to GSX and there's no need for it this okay so this works perfect and somehow doesn't want to build though oh look there's some stuff going on oh yeah of course you're hydrating an eye an astro component Astro components never should be hydrated they're not intended to use that way I think that version one you could but it's a deprecated function now there we go nice and normally you shouldn't chip any JavaScript right now well it no because it's just an on all it's in line exactly so very cool and the CSS is so tiny also it's super small it's like 400 bytes exactly so um time was flying and people were really helping us and I'm super excited by that uh this is so cool and people are actually still watching us while we are struggling through this and you know what it wasn't really a struggle it was actually super easy it's just solving little bugs along the way yeah it's just as we introduced ourselves exactly so final thoughts on your well of course you know my opinion on Astro I I think it's it's super super cool what they're doing and how they're doing it um and I think it's it's a really cool way of solving problems we have created by using Spas exactly but for instance I think I can say this um there is one thing on the roads on the roadmap for version three well I don't know is it's actually version three but one of the next versions and it's actually an SBA mode um inside of Astros so there are things moving and coming and it's it's trying to do different things um but I one of the main things that still draws me to Astro is its amazing developer experience and it's amazing Ducks um I think that's that's one of the key features that keeps people so well inside of the Astro ecosystem it's because they can look up everything and they find their information that they need um yeah um super stable and I kind of like I have a bunch of experience as a developer and I kind of just assumed certain things and they actually worked which means people that built this thing have the same assumptions and that's smart defaults is everything yeah and I think next and few are doing that really well as well um having recently learned next and react it's a little bit less like that because it's so low level right you you do JavaScript through jsx and it's kind of it's just a different approach to it it's not bad or good it's just I had to adapt to business exactly and since it's it's just HTML and super powers with a bit of jsx in between it feels very easy to learn and it's not such a high learning curve if you want to build reusable components you can do that in like two days with someone who has never used react before never has used Vue before whereas if you're trying to build a Next Step you kind of have to know certain things like for instance the the router links and how they work and you don't have that learning struggles with Astro you know what in the end if you look at this back in like half a year or something or a year they're all kind of aligning a little bit and it's just definitely and this one um I think I love this and I think it's very interesting I just want to see what happens when um react server components come out when they stream server components to the edge with next app directory how that is going to change the game because they're going to be native SSR now you have to say use clients to be able to go client so it's it's not really Islands but it's a different approach to it so I'd love to see how that compares once that's stable yeah I'm very excited as well to see like for instance view 3 with their um lazy hydration things and yes that's cool and stuff well the next three sorry and and then the u3 with their Vapor mode um yeah also really cool to see that everyone is trying to solve the same problem in a very different way um yeah so yeah I'm very excited for the future of Frameworks exactly and it has been like this for a while but it's just going so fast now so to end where can people find you online um I think that the easiest should be Twitter which is just art alien codes as you can see right here in the bottom um or just on my website yeah thank you um or just on my oh you spelled it wrong I saw that I'm picturing it um or just on my website which is www.alion.com perfect and otherwise you probably will find me on GitHub or or just in the Astro Discord um which is also if you're interested in Astro you should go there um there is a support Squad dedicated to just helping people out and stuff um that's awesome you should actually um I'm not in that Discord okay but I will join because I'm starting to look at doing more projects and different things and this will definitely be on the on the list then spelled is also on the list but maybe you can do that through Astro oh yeah you can you can exactly you can do something with Astro exactly thank you so much for joining I had a lot of fun working with you and like we're almost one and a half hours in and there's still a bunch of people watching so this was very exciting and very cool awesome um dude thank you so much and I'll see you soon cheers yeah no problem at all thanks for inviting me bye