Astro IS SO GOOD

Key Takeaways

I got the chance to talk with Fred the co-creator of Astro and of course CEO of HTML and he sat down with me and showed me why Astro is blazingly fast and I would like to say I'm amazed I actually really enjoyed it uh wait till you see what I have to show you and at the end of this video there is a q a with Fred so if you're excited slap that like button right now also we just got done doing a 24-hour charity with TJ and Bash Bunny and it was a lot of fun we raced to build an interpreter I chose rust which was a bad decision and I had a blast but I did want to take a quick second say hey thank you thorsten ball for matching every single book bot donating to the charity big thank yous and all the other people there's too many names to name thank you so much for participating and making a real difference in kids lives alright so let me show you a little bit around Astro alright so first off inside of Astro there's like the three main files in which Pages your named pages are the pages in your route your index is just your slash page if I go in there you can do things like this where you can actually Import in and this will be executed on the server then you can just craft HTML now this is obviously react right here in which we have a button that if you click and it says me Daddy and then we just build that return it along with the div with an ID of Foo now this is where it gets wild are you ready for this let's go over to our site I'm gonna do a little refresh right here we're running in Dev mode so there will be some extra printing but when I push this look what happens nothing happens why let's look at our Network console remember this is Dev so there's extra things being pushed down but do you see react here no there's no react here that means we rendered it on our server but our client has nothing it's just HTML so that means if I wanted to make this actually do that we could do an add a little client load here let's make this really work out uh D2 right there we go and I'll do that so we have one that client loads one that doesn't client load when we go back here you'll see these two if we go to the console if I click D2 nothing happens but if I click deegence look at that click me Daddy so you get to choose what you want to execute and what you don't want to execute and it works with felt it works with solid it works with react I believe it works with view it works with all of it doesn't work with wasm I did ask can we build a wasm project and Fred said no hurt my feelings I told him he sucks but then I followed up with I like you still you know you're a pretty good guy Fred now obviously looking at the tab you can see right here we have the react stuff all in here but let's just say you didn't want to have react all right so I'm going to delete that other button and I'm going to jump over here and delete client load now remember our button loads up two things a button and of course a div with ID Foo so I'm going to paste this quick script right here which effectively just goes and grabs the button and does a small amount of interactivity I know I'm mixing react on the server and just client-side logic don't mind that I just wanted to show you this now what it does is it takes a list of names and allows you to kind of just randomly cycle through them but now here's the cool part I'm gonna run a quick build on this kill my Dev server and then I'm going to launch up the server right here it's gonna be on 3000 I'm going to refresh this and what I want you to look at is the network look at this 628 bytes that is it I have a little bit of interactivity a little bit of HTML you can write blog sites amazingly blazingly fast because you're just shipping the JavaScript you want to ship you're just executing what you want to execute and you can have this as pure HTML with a little bit of your own script and it does support react solid.js view it's felt and one thing that I think is super awesome just markdown so I just took their example pasted it in markdown.md built the site launch the server now notice that I'm just launching the server that means that if you want to host your own you're not bound to be on some sort of service in which you have to be you don't have to be on netlify you don't have to be on for sale you can just go to lenode and look at this look at this markdown page 361 bytes and that is markdown that means you can serve a blazingly fast blog without the kitchen sink in loaded you won't need a megabyte of JavaScript just to have a pretty button you can just hand style it if you want to or you can bring in the kitchen sink if you would like to I love something that is well built and put together so clean you know I often do not Rave about a front-end framework you know this about me I don't love node I think it can be useful and this is one of those cases where I could see myself writing my personal site in Astro so if you have a weekend free you're an art user why don't you go give it a try see how it feels go launch one up on lenode and experience the Blazing speed that is Astro before we go to Fred CEO of HTML and do the Q a I did want to say a quick thing this is a new series I've been thinking about trying to bring on the creators the co-creators of these new Frameworks coming out we have turbo pack on its way interview them find out about it make a cool video about it and then have like a q a where hopefully some of your questions can get answered if you like this style send me those rhythmic signals hit the like button press the Subscribe button if you're not a part of it because I mean what kind of ridiculous person isn't actually about 45 of you are that person I I don't know what's wrong with you press it and of course leave a comment down below of things you want me to explore people you want me to talk to because I don't know what you guys are interested in I only know what I'm interested in and I'm gonna just talk to the people that I know the Q a with Fred was of course held live on twitch.tv slash the primagen so if you want to be a part of the next q a make sure you are on there take it away me in the past all right so let's let's move into a a new part of this which is just like an open q a some questions that would you like to field some questions yeah let's do it okay so the first question I thought was actually really really good which is is Astro usable as a perfect web dev beginner yeah so I don't know what a perfect web dev beginner is but I assume this person has never typed a piece of code they're perfectly you don't even need to be perfect um you can be a normal laptop beginner okay um yeah that's it's one of the things I'm most proud of with what we built like we took a while like this is probably 16 months in development before we hit our V1 and that was all about like really like do we feel comfortable with this dot Astro syntax and the reason I'm so happy with it is that it's just HTML you can obviously do all this really cool powerful stuff we've been doing but like if you're just building a site and you're learning web for the first time we're not going to throw you into like the typescript jsx react file based routing even too much like the idea is it's all just kind of like as simple as possible to start and then you can ramp up the complexity as you need it this whole push towards server components and all this I wrote Falcor for Netflix I spent a great deal amount of time doing caching specifically JavaScript caching requesty duping uh request batching the whole the whole nine yards right so I'm I'm deeply familiar with even when they lightly gave an overview I know of tons of issues that they're likely going to run into how do you feel about this move towards the server uh server components and all that and do you think that we're gonna find ourselves having actually signific significantly like higher traffic traffic or higher pressure on the servers simply do to all these requests being made that are all server and getting kind of get into some bad patterns perhaps yeah it's it's definitely a pendulum that seems to be swinging just constantly like I remember reading an old blog post from Gatsby where like the announced Gatsby V2 or something they're like Gatsby's fast because we do our work on the client like we do all our work on the client in like five years later six years later that's like the exact opposite thinking is that the server is going to be faster more reliable streaming HTML is the answer we definitely are in that camp like you just don't know what device your user is on and yes they're getting faster the Network's getting better but like you're still every line of JavaScript that you're shipping is another potential millisecond tens hundreds of milliseconds that's blocking your user from doing the thing your site exists for them to do so our approach is that like yeah there's probably things if you're at scale to consider around costs over costs certainly but for most developers right now like for sell and now if I they're a fixed cost so as the actual person building site you don't really have to worry about that um I I think it's more of a concern around like yeah Netflix scale obviously you need to be considerate about these things but if you're going by pure user experience I think there's nothing that matches having the server do most of the work and then streaming the results down to the user uh all right is Astro reliable to make bigger apps with lots of modules does it keep the performance yeah we use a v behind the scenes so we are very much powered by V if you've done any time with feed it's this idea of only really compiling and building what you need so that on the dev server it's literally like I did a lot of work with webpack and what webpack would do would take your whole app I'd start at like start time and build it all even though you're just gonna like load one page so it beats really fast it's really good at scaling to large sites um and then obviously that's it's yeah it's really great we've been really happy with it um markdown is the other thing which we didn't really touch on here having a really fast reliable markdown uh build pipeline for people writing blogs also super important to us also something we Benchmark regularly and here we have 10 50 I don't think anyone's broken 100K Post in production but yeah we've definitely bashed this thing against some uh some pretty big scale all right uh what do you feel about turbo pack is there any chance that turbo pack is gonna defeat Veet and even have Astro used turbo pack I mean we we moved from so we started on snowpack which was actually something that we built originally before like snowpack and V early competitors in the in this battle and then we Evan just is awesome and did a good job so we're all right fine we'll use V you all win um we've done the admit transition before it's a lot of work I I don't know how Nexus is doing this um it's going to take a long time for that tool to get stable so we'll cautiously wait what would the difference of using Astro or any other framework let's say the popular super popular react with SSR support invite PS we need more Frameworks the ones currently available aren't enough to build web applications Kappa face I actually don't know what this question is I should have read it beforehand because it sounds like what they just said was exactly what you're trying to do with like every good interview I'm just gonna pivot this into what I want to talk about which is one thing that's really cool about Astra which really surprised us which is kind of along this line of like which framework to pick um you were kind of trying to push us this direction which I love I I definitely like noticed that like you don't really need a framework for a lot of stuff on the front end so the fact that Astro UVM would give you HTML to give you your style tag you can also just put a script tag on the page and if you go to our own homepage every time we've needed something interactive it's been easy enough to just literally open up a script tag and write a little like a couple lines or something or create a web component literally in that script tag and then you have the HTML that's actually using that webcam but like they just like use the platform API thing that is like a lot of people chat about and talk up but like for us literally the fact that it's HTML means you literally can do anything HTML does including just throwing a script on the page that makes them code interactive without even reaching for the 40 60 kilobytes the react is going to put on your page