Hasty Treat - Future Tech We're Excited About

Monday. Monday. Monday.

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

CSF

key.

Welcome to Syntax. In this Monday, Hasty Tree, we're gonna be talking about some future libraries, tech, things that are in public or Private betas that you may or may not have heard about, a little bit about what and why they are, and where they fit into this landscape of things, and why we might be excited about them. My name is Scott Talinski. I'm a developer from Denver, Colorado, and with me as always

is Wes Boss. Hey, everybody. Hey, Wes. How's it going, man? Pretty good. Pretty good. I'm up at the full stack shack where kids are on their March break, which is not a March break at all right now, but with the it got pushed.

So and we are also in a major lockdown right now, which is bringing back horrible memories of exactly 1 year ago. Yeah. I am sure. And, I saw those kids in some neat little jumps on their bikes that, that looked pretty sick. Yeah. My my daughters are into making sweet jumps, and my my youngest learned how to do a papa wheelie, which is super sweet. And,

Yeah, man. They're gonna be little, little daredevils. Yeah. Brooklyn's right there with you, man. I she is Landon's scooter, and as long as she has a helmet on, She, like, wants to go down this whole hill. So she'll do, like, a little bit of the hill, and then she'll get on it, and she'll be like, ready. And I'll be like, no. Don't do the don't do that whole hill. You'll Well but, no, she's she's a little daredevil too, so we'll have to get her a little bike. She can pop some wheelies too. Oh, man. Those while we're talking about bikes, are do Do you have one of those balance bikes for your kids? Yeah. The Striders. We we we have one of the Striders for Landon, and he's just now, like, really, really, Really feeling it. Like, before, he, like, didn't quite understand

the push and and glide, but he's cruising on it now. It's unreal that we were teaching kids To ride a bike with training wheels their entire life. Yeah. I think we talked about this, but, essentially, these bikes don't have pedals. They just they're balance bikes, and they just use their feet instead.

And we put our our daughters on them. And then when they picked up actual bikes without training wheels, they were, like, maybe, Like, 15 minutes before they could do it themselves, and I was like, oh, man. Like, why do they even sell kids' bikes with training wheels on them anymore? It's so much easier to Teach them the balance thing. The little gliders. Yeah. I mean, once once he he really picks up some steam and he really glides on that thing, I could see that being a A much easier transition. Oh, that's good to hear.

Yeah. Well, you know what's good to hear? We have a couple of sponsors today. Those sponsors are FreshBooks and LogRocket.

LogRocket is the place where you can see all of your errors and exceptions happen in real time in a scrubbable video replay, Which allows you to reproduce and fix issues faster, meaning that you're no longer going to be guessing what the actual user did. Maybe you, see that they clicked on a button, but now we actually get to see what the state of the application was in a visual headless browser video, Same way they are used to debugging in your local environments.

If this sounds interesting to you, by all means, you're gonna wanna check it out because it is future tech here. Logrocket.comforward/ syntax. One of the coolest services that I've ever used, especially for solving in errors and and finding bugs. You'll get 14 days for free, if you sign up with that link, give it a try. It's definitely one of those visual things that you gotta check out. See to believe, sing is the magic, or whatever, slogan I can invent for that, but, you know, it's really super cool. So check it out, log rocket.comforward/syntax.

We also have FreshBooks as a sponsor, they are the online invoicing and accounting solution that's built for owners and their clients. Both the user and the client love using this thing. You're starting a business. You have some side hustle.

Don't spend any of your sweet, sweet time making invoices and sending them off and and And finding crumpled receipts and and all that stuff. That's that's not the way to go. And it's funny. Even even now when I have, like, a Plumber or someone come to to my house to do some work. Almost all of them are using FreshBooks, and I'm like, thank you for for using this. I don't want, like, a PDF that has been scanned in and sent over to me. I want an online invoice so I can find that, invoice in the future. So myself, both as someone who uses FreshBooks to send invoices, but also to receive them. I'm very happy to see that. So check it out, freshbooks.comforward/ syntax.

Make sure you use syntax in the how did you hear about us section, and thank you FreshBooks for sponsoring. Sick. Alright. So the basic layout of the site here is I think we have 4 projects that I added here that I thought would be interesting to talk about, And these are 4 things you may have heard of or not have heard of. And the way I thought we would do this would be like, here's a thing.

What is it and maybe why we're excited about it. Because some of these things are in private beta. There's not a ton of information out them. So I think a lot of it might be just a discussion about the the nature of some of these projects and Trends that we're seeing here, and I thought this one would be a really good one to start with because if you haven't heard of this thing, it just kinda got Talked about for the 1st time last week when we were recording, this would be, it would have been the week of, like, April 5th or something like that. So it's fairly brand new. I just got access to the private beta, so I'm gonna give this a test. It's called Astro.

Astro dot build is the site. We'll have the link in the show notes, although it's just a a landing page at the moment. And this is being described as sort of a next Gen meta framework, to me, is extremely, extremely exciting in a lot of ways. So this comes to us from A lot of the folks behind Snowpack, and it is basically, you could think of a bridge between frameworks that You know what it really feels like to me, Wes? It really feels like Svelte, but you could use any sort of components interchangeably from any framework. So it's a server side JS framework that combines Svelte, React, and Vue as needed in 1 component using a single file component That that's sort of like a single file component using markdown style metadata. So you have the the front matter metadata at the top that include all sorts of types of things, Then you have your component below it. It feels very much like Svelte in the code snippets. I've even included a Linked to a Twitter thread here showing off some of those code snippets. So you could think of it as the single file component flow.

That means you have 1 component per file, and those files are kind of magic because you they have things like that metadata.

And in this case, it's a dot Astro extension, so it's an entirely new file extension. And to me, it really feels like the perfect bridge between all of these frameworks because you're Basically, using JSX here. It is JSX, and you could throw in a Svelte component into a React app, and It should work. I I actually have no idea how the interflow of any of that would work together. Duh. I I I haven't given this any a try, but if you click on this Tweet thread. There are some really,

really interesting code examples. Have you have you do you check any of these out, Wes? Yeah. I'm just, like, looking at it being like, okay. I understand. Like, some there are some companies where you've got a couple different frameworks, and you wanna maybe use them Changeably, but is that the killer feature in this thing that it's a it's like Next. Js? Like, I I'm assuming that this is sorta like Next. Js where you've got Routing and all that stuff built into it, but you can also

mix and match frameworks. But you're saying that's not the killer feature. That's just, like, A nice feature of it. Okay. I don't think that's the killer feature. So, like, what makes us better than Next. Js then? To me, it's the ease of some of the stuff that we have to deal with in Next. Js. So you might have less feelings about this because you might not have used Svelte as much as I have, but there's some really interesting stuff about Svelte And how single file components work. Oh, yeah. Definitely. Like like seeing that. Yeah. Some of the things here that I really like is that it's Primarily writing HTML. You'll see this kind of the same thing reiterated a lot in some of these things we're talking about, where if you want, This whole thing can just be server side only with no client side JS. So that to me is is sort of the killer feature is that it is A replacement for requiring client side JS and hydration and any of that stuff that is the big complaint, And so everything would be server side rendered if you want it to be. To me, the killer feature is really that it feels like All of the lessons learned from Svelte about ease of use have been come into play here with React. But in more important matters, it seems like they're, like, Able to say, you know what? Hey. You can actually use anything you want here if you want to use it.

Some of the neat things, it's Scoped CSS by default. So if you're writing CSS, instead of having to do styled components or anything like that, it's exactly like what we talked about where where you just have a You just throw it into the the same file as your component? Yeah. You have a style tag. Yeah. Just an HTML style tag. You just throw it into the component. If you want it to be Sass, you just say type Sass. That mean, that's gonna feel very Vue JS like. It basically brings a lot of the the glorious things about Svelte and Vue to the world of React, but not just React. It also gives you API routes, pages via, you know, optional hydration.

You get files I think it's I think it has file based routing, from what I'm seeing. But Like I said, I haven't gotten to use it yet. I'm I'm psyched. I just got into the beta a minute ago, and it looks very, very cool.

One one neat thing that you might find interesting here, There's this really interesting collections import for mark markdown files, and I don't know if they're planning on bringing this to anything else at any point, but I've never seen A whole lot of things like this. Let me post a a code snippet in the show notes here for US so you can take a look at this because this is in the private beta. You know, I got I got exclusive access to this private beta cell. So this is this is I just posted it in here, and it is Basically, the ability to do a mass import of all markdown files. So they have an import .meta.collections, And then they pass in, like, a regex route where you have a wildcard to say, hey. Give me all markdown files inside of this folder. Yeah. And then that becomes instantly available as a variable where you can then, you know, map over it, whatever.

So it gives you access to, basically,

bulk importing of things like markdown files. That's pretty neat. It's funny. There's I see a lot of things that I like from everything. I see a little bit of Gatsby in here. I see a little bit of Next. Js, but I also see a little bit of, server side note, a little bit of jade templating where you can just simply require things inside of a template and then loop over them like you just said.

It Seems pretty nifty. And I think we should also say the reason why we are excited about this is because, one of the devs there's a couple devs behind this thing, but one of the devs It's Frederick Scott, who is the dev behind, Skypack or Snowpack and all that good stuff. Well, he's Skypack. Both of it. And we had him on the show, and he's, like, a next level sort of JavaScript thinker, in my opinion.

And he's one of these types of people that, like, when somebody does When they do something, you pay attention because it's probably gonna be wicked. Totally. Yeah. I I think this is this is gonna

this really feels like that simplistic web that we so dearly want where everything is just a little bit easier to get up and running. And, again, it could be all server set if you wanted to. So I would imagine that, like, maybe data loading and stuff will be easier too. And this is gonna be a theme you'll see across Just about all of these projects because the very next one I wanted to talk about was Vitkit.

Now Vitkit is in private beta, And to be honest, I have seen no code examples. I don't know if this thing is cruising or if it exists or or whatever. This is the show of Stuff we're excited about, but haven't seen anything. I was joking with Scott in this chat earlier. Yeah. And and and I don't think that I don't think that's necessarily a problem because there's a lot of really interesting ideas that we're all talking about here. Totally. Yeah. So the Vitkit, ideas that we're all talking about here. Totally. Yeah. So the Vitkit, according to the repo notes, is framework agnostic again. So, again, a theme. So this Vitkit really feels like sort of the exact same thing, but using Vit instead of Snowpack. But what is what is Vit For all everybody who is listening in Vit and Snowpack are both sort of next generation code bundler Tools and development environments. So they give you the ability to use hot module reloading really super easily with, ESM JavaScript modules so that each import you're doing of a file happens as a individual network request in development mode. Meaning that if you make a change to 1 file, the framework only needs to run whatever it needs to run on that, whether it's TypeScript or, You know, compiling the JSX down to normal JavaScript, it runs all of that on that single file and then hot module reloads it in so you get these The 50 millisecond hot reloads, it's it's insanely fast for JavaScript changes, not just CSS. It's it's crazy good. InVIT is is very, very similar.

They're both exceedingly good projects.

In fact, they're very similar. We have we have Vit and Snowpack running side by side for the level of tutorials codebase, and literally either of them work. That's just a change of 1 singular config file. So if at any point I wanted to Switch over from 1 to the other. You could just do you could do 1 or the other. So it is it's very, very good, and they they they're they're very next generation. So The development experience is second to none in either of these things. But so VitKit would include it would be framework agnostic, so you can use whatever framework, which is crazy good, API routes.

So, again, server side routing for API stuff. Again, pages, optional hydration, and adapter from it says adapter, Form and Node. Js. I don't know what that means, but adapter Form Node. Js static, Vercel, CloudFlare Workers, etcetera, inspired by SvelteKit, which will be the the next one we'll talk about. But so there's no information beyond the little blurbs here, but Vitkit is something that's being worked on. It's in private beta, And, again, framework agnostic API routes, server side bit focus, optional hydration.

Man, this is the future to me. If you can't tell that all these projects are springing up, this really seems like the future. And, what what are your thoughts on this? I know you haven't used But it's basically the same thing. Right? I think that

they should call it Veekit because I I know that they came out and said, I I don't know. I saw a tweet from Evan Yu saying that it's pronounced vit, not vit. Yeah. Because it's French, but I took French, and I thought it was Vit, so I don't know.

I I called it Vite Vit. I called it all those things, and I still hear people call it, I do think. If we're doing, like, a a naming review, the name's cool, but, yeah, ain't ain't nobody gonna pronounce that correctly. No one's gonna call it vite. If it's vite. That's gonna be A continual issue until they

spell it v I t. Or you can just, like it's like like moleskin.

You know, it was like, There was a point when Moleskine's got really popular where people were calling it, like, Moleskine.

You know? And it's like, okay. And But, like, Moleskin came out and said, you can pronounce it however you want, which was a good good call. Yeah. Right. Don't get too hung up on it. The next one I wanted to talk about was SvelteKit.

SvelteKit really feels like a pioneer at this point because it's going to be doing all of the things that the other ones Talked about with the exception of, it's not gonna be framework agnostic. It's just going to be for Svelte, which is a fantastic developer experience. Now this Originally came about because there was a project called Sapper that was basically the next JS of Svelte. It did Just about all of the same things except for maybe some of the serverless stuff. I'm not even entirely positive about that, but people were asking exactly about What's the future of Sapper going to be? What's where is it gonna go? And they took the opportunity to say, you know what? Maybe we just rethink this from the ground up, and they built SvelteKit, Which was also originally on Snowpack, but now is on Vit. So bringing Snowpack and Vit back into the mix is gonna be a common theme here. It's very interesting, this project, because I was a big fan of Sapper. My, my project was in Sapper. There were definitely some concerns about Sapper, but I personally never had any. It always just f. Worked well for me. It was easy to get up and running, and SvelteKit really seems like it's built to be the the framework, the way to write Svelte and have it just work with all of the the things that we want, like the paid the the folder based Page routing and things like that. One of the big problems that Svelte has had has been the router situation, And routing in SvelteKit is not something you have to be concerned about. Where in Svelte, in general, or even Zapper, you gotta think about, like, alright. What am I using for my my router here? If I'm gonna fire up a Svelte app, do I have to use? Teen Row is the one that I like to use, or there's some others. But We finally don't have to worry about that. There's going to be a blessed version of this Svelte and all of the little bit more batteries included, which, Again, something I like seeing out of these frameworks because a lot of the stuff we had, React or whatever, that's just like they're tossing you the parts and saying, go do it. Right? But now we get to, you know, have a little bit more more from some of these frameworks. Yeah. That's very much in the, like, ethos of Svelte. Right? Is that like, just Tell me what I should use. Just make it easy. It should all just work together. I don't wanna glue together a 100 things,

and I this is so cool. Like, Svelte's taking it 1 step further of making it like we've said this many times. Svelte is the, like, the easy one. It just works. It works how you think It would be and now they're taking a step further and making an entire framework with routing and server side stuff and all that built into it, so

That is really exciting. Yeah. And it's it's a UI framework that compiles away, so you're just shipping straight up JavaScript and Gmail, which Oh, man. At the end of the day, you're not shipping a library full of code. You're just shipping the stuff that you wrote. So, you know, that's This is pretty sick. I I'm very excited for SvelteKit. I haven't even used the beta yet personally. They do have, like, a how to merge your apps over from Sapper to SvelteKit, something I will be taking a look at considering I have several sapper applications.

And I love this. I love Svelte, and I'm I'm very excited to check this out. Now this next one, you might know a little bit more about than even me. I'm not sure if you do, to be honest, but this one comes to us from the, masterminds behind React Router and React training. It's Michael Jackson and Ryan Florence bringing us Remix dot run, and, this is a full stack React specific framework that uses the platform primarily. Right? There's there's so many, browser based Things that they're taking advantage of here in Remix, and and it's very, very interesting here. Another one of these projects that's really thinking server first. Yeah. We're we're starting to see this. Like

like, the everything we're going over today is these frameworks all in one, and they also take care of the The server story, they also take care of the data fetching story. They take care of routing, all of that good stuff. This one's pretty interesting because it is Closed source and paid only, which, like, a lot of people are saying, like, oh, I'm not I'm not gonna not gonna use a a framework that's that's paid only. And I think they're totally fine with that because those are probably the types of people that complain about like, running a huge open source project is extremely draining and Very time consuming.

So the price doesn't necessarily matter for a lot of companies who are choosing which framework to go ahead and and run with. So I haven't done it my paid it myself, but I'm excited to see like, it's It's not even out yet, but once this thing comes out and when it once it is, like, in production mode, I'm excited to see what types of things They haven't, and what what types of, like, projects are being like, yeah. We moved it over over to Remix. So Yeah. And let's Let's talk about that pricing because the pricing is $250

for 1 year and where you get unlimited projects for that price.

Access to support, free upgrades, cancel at any time, and continue to use your latest version.

So if you sign up and your application's working fine And it's all good. Everything's fine. $250.

That's it. That's the cost. Right? If you want those updates, would you probably only just stick around and pay it every year. And there's a team license where you can get a a much bigger project. This is probably not for anybody who's doing really basic work Work here. This is for legit projects. It's $1,000 a year.

And to me, personally, that doesn't scare me off because if your project's making a ton of money, we're making the type of money that you would have to have this team project, then $1,000 a year is probably not too too big of a deal to be your entire, like, The entire ground of your project. You know? And this thing is the framework is the thing that literally runs your project.

So the pricing to me isn't isn't that scary. Expression engine is a a paid CMS that we used to use all the time, and it's probably the One of the best CMS experiences just because they they have more resources to throw at it. Right? Yeah. And it it comes with support as well. Like, the

People would pay more than Yeah. $1,000 a dev per year. I'm not saying that that it's nothing. Like, there's probably a lot of people listening and be like, there's no no way I would I would be able to convince my partner that I can spend $250 on on something like this. There's some people that that's just not affordable, but Totally. Like to say, there's a lot of businesses that that is a drop in the bucket when you're you're paying Airbnb developer, Make you $300,000 a year paying an extra $1,000 for that. Like, that that's the cost of a flight that some people send to a conference. Right? So It's kinda interesting to see who they're targeting with this. The 2.50 a year certainly isn't

next to nothing for individual developers who are at, you know, their side project that I just wanna toss-up may or may not make money, and that's right now who this is for. Right? This is for people who are who have legitimate, businesses, companies, things that are making money.

I think it's fascinating. 1 of this is low key one of my favorite things about it is that they actually have thought about nested layouts. They wow. A framework that's thought about nested layouts. Unbelievable.

Yeah. That's my hill to Diana. It's good, though. Like, now I I never understood why you wanted nested layouts for so long until it hit me, and they needed it. And I was like, oh, this is why Scott's always talking about

Needing nested layouts. Okay. We're I understand now. Yeah. I know. I bought in hard to the original nested layouts that they did into React Router, and I've never gone back. I've Been a big fan of how they how they did that. So since it is from the folks who brought us React Router, you can be very sure that the routing is going to be nice in this thing. I do really like that they are making great use of standard HTML stuff. Stat status code like, listed under their features as status Status codes, HTTP caching, meta tags. It's like, oh, wow. These are all these things that we, we've had to, like, kind of You build layers on top of to get working correctly the right ways, and it's like now we can use the platform.

This thing is kind of like the Anti Gatsby, I would say, because the whole idea behind Gatsby is that you regenerate all of your pages Yeah. Beforehand.

And the idea with Remix is you just Server render them on demand, and then you send a header along with your render and say, cache this thing for However long you want. And and then if someone comes back to that website, it's cached in their browser.

It uses the web platform. We have The we have a lot of these things built in. And, obviously, there's there's pros and cons to each of them, but using the platform, I'm a big fan of it. Just like you said earlier, you switched Bundlers, and both of them just worked because you used the platform. You used the standard. Right? Yeah. Yeah. And and there's some neat stuff in here too about, like,

fetching data. You know, one of the big complaints about React is that, like, hey.

React doesn't have any, like, Any idea about how you fetch data doesn't care, so, therefore, like, just a 1,000 different ways to do it sprung up. And that's a a plus, but this is definitely has an anointed way The centralized data loading. So it it looks pretty neat that they've they thought about all this stuff, the pain points here. And, again, this is something I wanna spend some serious time with, but I I do really like the looks of it. So another brand new project. So that's 4 brand new projects. If you've never heard of any of things. Give them a check. We have some links in the show notes.

Astro was the first one, Vitkit, Sveltekit, Remix dot run. I think Sveltekit probably has the most available because it's Public beta, then Remix is maybe the 2nd most available. Then Astro, they just started talking about, but there's a really great conference.

Talk about it. We'll we'll share a link to that as well. Fred Fred actually shared that with you on Twitter, right, when you tweeted today. So we'll share a link to that that conference stock as well. You can get a little bit Better idea about some of these projects and what they're doing. And the vidkit, I just saw somebody talking about it. Who knows if it will materialize or not, but it looks really neat. So, Yeah. I'm excited to watch this conference talk. I'm gonna see if my wife wants to watch an hour's worth of next generation frame JavaScript framework talk with me tonight. Yeah. I talk about this stuff so much to Courtney that she probably could at least understand it a little bit. She knows All of the frameworks and stuff. She could even sling sling some code, write a little bit of boilerplate. Oh gosh.

I'm so sorry.

My dear wife.

Alright. Well, I'm excited about the future of these projects. Some of them might flop. Some of them may explode, but there's Clearly something here with the fact that there's so many of these things popping up, so I'm excited to see what that means for Us as developers. The future of server side.

Yeah. It is. We that's a show I think we need to do yet as well, which is, Yeah. The feature we're back on the server. Sorry about that.

Whoopsie oops.

Whoops. It's all server.

Whoops. All server.

Did you see did you see that meme with the Jack Links? Yeah. Oh, no. I whoops. All silica packets. Oh my god. I saw the one about the

The shrimp guy who turned out to be a bad guy, but the shrimp guy was like, whoops, all shrimp tails. Oh, yes.

That's not like oh, that shrimp tails, That that was, something to go down to. That was quite a saga. Yeah. Right? Yeah. It kinda just obviously, the the guy got canceled, and it stopped, But I I'm kinda interested. Like, what happened? Yeah. Where's the, follow-up there? I heard I was reading the replies of that, and the best reply I got was that a rat had got into the flour mixture because the the the guy found, like, floss and, like, shrimp tail. They found random stuff in it, And it was likely because a rat had a like a pack rat. They bring in random stuff. Right? It got under the flower, so gross. Gross, hashtag gross.

Alright. Cool. Well, we will catch you on Wednesday where we have an Outlook episode for you where we answer your questions. It's gonna be a lot of fun. Alright. Thanks for tuning in. Eats. Eats.

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