Tj_Vantoll:
Hey everybody and welcome to another episode of React Roundup. I am your host today, TJ VanToll, and with me on the panel is Jack Harrington.
Jack_Herrington:
Hey, TJ.
Tj_Vantoll:
Hey. And our special guest today, we are joined by Fred K. Schott. Fred, welcome to the show.
Fred_Schott:
Oh my god, thanks for having me. Excited to be here.
Tj_Vantoll:
Cool. Well, why don't you start by telling people a little bit about yourself, who you are, why you're famous, that sort of thing.
Fred_Schott:
I'm not famous. I'm famous to a very small group
Jack_Herrington:
Hahaha.
Fred_Schott:
of internet nerds, myself included. Yeah, if you have seen anything I've done, it's in the open source tool space. Really been focused on building tools for front-end developers. So Astro is my latest project, which I built with a couple of people. But before that, Snowpack was this kind of cool front-end build tool before,
Jack_Herrington:
A snowpack!
Fred_Schott:
yeah, before
Jack_Herrington:
Yes!
Fred_Schott:
V came on the scene, there was Snowpack. We were like the...
Jack_Herrington:
Oh yeah, great
Fred_Schott:
the
Jack_Herrington:
stuff.
Fred_Schott:
early growing pains of the ESM world. And before that, Pico was kind of this cool, researchy type of umbrella project that I just threw a lot of projects at. Before that, I worked on Polymer within Google. So, I've
Jack_Herrington:
Oh yeah.
Fred_Schott:
had a long history in open source, which has been a lot of fun. But Astro is what I'm working on now, and I'm super excited about it because it's a really cool story, especially for React developers, which sounds appropriate for this podcast.
Tj_Vantoll:
Very cool.
Jack_Herrington:
Just a little.
Tj_Vantoll:
Yeah, there's a quote that I really like. I can't remember who said it, but the quote is, I'm a very big deal in very small rooms.
Jack_Herrington:
Ha ha ha
Tj_Vantoll:
I kind of like that one a lot.
Fred_Schott:
I like
Jack_Herrington:
nice
Fred_Schott:
that.
Jack_Herrington:
everybody when you ask that of everybody and everybody's like oh, I'm nothing You know I'm not I'm not that good.
Fred_Schott:
You're just buttering me up
Jack_Herrington:
I mean
Fred_Schott:
as a guest,
Jack_Herrington:
I want
Fred_Schott:
making
Jack_Herrington:
somebody
Fred_Schott:
your
Jack_Herrington:
that
Fred_Schott:
guest
Jack_Herrington:
wasn't me
Fred_Schott:
feel
Jack_Herrington:
to come
Fred_Schott:
special.
Jack_Herrington:
on and be like Oh, yeah, I'm famous because
Fred_Schott:
Hehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehe
Jack_Herrington:
you everybody knows me. Yeah, whatever
Tj_Vantoll:
So you've got a lot of stuff we could talk about, but I think Astro is probably top of mind. We've discussed Astro a few times on the show already, but why don't you start by just giving us the pitch? What is Astro? What does it do? Why might you be interested in using it?
Fred_Schott:
Yeah, so Astro is a, we call it a web framework. You can think of it similar to a Next.js or a SvelteKit or a Nuxt, but, or remix for a React audience. But we also take a lot of inspiration from the kind of earlier wave of static site builders. So like Hugo or 11D, we really try to be, or we focus on this kind of content focused marketing site, blogs, personal websites. We're really optimized for that scenario. So if you've ever like used Next.js and you create your Hello World. and you actually go to view what your browser's doing, and there's like three megabytes of JavaScript. I'm being very dramatic, but there's, you did your Hello World and this whole JavaScript application got shipped to your browser. That's really cool for some use cases, but for a lot of other ones, it's super overkill, and it also gets in the way, especially if performance is a really big issue for you. So any site that cares about performance, we are basically this other option that's designed around a really interesting architecture, which we can talk about, it's island architecture. So
Jack_Herrington:
Hmm
Fred_Schott:
it's a pretty new, unique take on the space that still lets you bring a great developer experience. So we've taken a lot of great things from Next.js. We see them as a great inspiration, a great project, but lets you also use React and the output is much more minimal and much more kind of streamlined. We leverage HTML over JavaScript where we can help it. So the majority of your site will end up being server-side rendered and then shipped out to the browser as pure static HTML. So. If you've ever been experimenting with a server-first architecture, even taking some inspiration from PHP and Rails and Django
Jack_Herrington:
I didn't
Fred_Schott:
with
Jack_Herrington:
notice
Fred_Schott:
Python.
Jack_Herrington:
like a hint of PHP in there.
Fred_Schott:
Yeah,
Jack_Herrington:
That's okay.
Fred_Schott:
there's
Jack_Herrington:
That's
Fred_Schott:
this
Jack_Herrington:
okay.
Fred_Schott:
meme
Jack_Herrington:
Don't worry.
Fred_Schott:
of
Jack_Herrington:
It's
Fred_Schott:
the...
Jack_Herrington:
fine. It's
Fred_Schott:
No,
Jack_Herrington:
fine.
Fred_Schott:
no, no, we lean into it. We lean into it. There's
Jack_Herrington:
Yeah.
Fred_Schott:
this meme, which I say this like
Jack_Herrington:
It's still
Fred_Schott:
it's a
Jack_Herrington:
JavaScript.
Fred_Schott:
meme going around.
Jack_Herrington:
It's JavaScript. It's not PHP. It's
Tj_Vantoll:
Thank
Jack_Herrington:
not the
Tj_Vantoll:
you.
Jack_Herrington:
language. It's just...
Fred_Schott:
Yeah, the meme going around is the the Scooby-Doo like pulling the mask off the villain and
Jack_Herrington:
It was BHB
Fred_Schott:
pulling
Tj_Vantoll:
Haha,
Fred_Schott:
the
Tj_Vantoll:
yeah.
Jack_Herrington:
all the
Fred_Schott:
astro
Jack_Herrington:
time!
Fred_Schott:
mask off it. It ends up actually feeling a bit like PHP, which I learned web development PHP. I think a lot of us did. So for us,
Jack_Herrington:
Oh,
Fred_Schott:
it's
Jack_Herrington:
PHP's
Fred_Schott:
definitely a
Jack_Herrington:
made
Fred_Schott:
love
Jack_Herrington:
a lot
Fred_Schott:
letter.
Jack_Herrington:
of people
Fred_Schott:
Yeah.
Jack_Herrington:
a lot of money. You know,
Tj_Vantoll:
I'm
Jack_Herrington:
it
Tj_Vantoll:
also
Jack_Herrington:
was good.
Tj_Vantoll:
a PHP fan. I think like PHP's downfall is sometimes like it's APIs can get bonkers. Like it can be all over the place, but the actual language, you just feel so powerful using it. So I have like
Fred_Schott:
Yeah.
Tj_Vantoll:
being
Jack_Herrington:
except
Tj_Vantoll:
like
Jack_Herrington:
that it's
Tj_Vantoll:
PHP.
Jack_Herrington:
like a hybrid of like 10 different languages, like a monster mash of languages, like a little bit of C++, a little bit of this, a little bit of that, and it's like
Tj_Vantoll:
Yeah,
Jack_Herrington:
nothing's,
Tj_Vantoll:
but because
Jack_Herrington:
I think quite right.
Tj_Vantoll:
you can just get a code snippet from the internet and it probably works and does something amazing.
Fred_Schott:
Yeah, so,
Jack_Herrington:
Actually,
Fred_Schott:
I mean, I don't know.
Jack_Herrington:
that was a great thing by the PHP that documentation site. Oh my God. Like any any like function in there is like the comment section was just like bang, bang, bang, bang, bang, bang, bang. And you're like, oh,
Tj_Vantoll:
Yeah,
Jack_Herrington:
there's
Tj_Vantoll:
they're
Jack_Herrington:
exactly
Tj_Vantoll:
beef.
Fred_Schott:
So
Jack_Herrington:
what I need. There's
Fred_Schott:
some
Jack_Herrington:
exactly
Fred_Schott:
of the code,
Jack_Herrington:
the
Fred_Schott:
the code
Jack_Herrington:
copy right
Fred_Schott:
I
Jack_Herrington:
now.
Fred_Schott:
was writing with PHP, I mean, I would make a database call and then I would like exit PHP and go into HTML and create my table and then I'd
Jack_Herrington:
Yeah!
Fred_Schott:
reenter PHP
Tj_Vantoll:
Hehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehe
Fred_Schott:
and like map
Jack_Herrington:
Oh yeah!
Fred_Schott:
over those things. And I'd go back to it was a mess, but there was a
Tj_Vantoll:
And,
Fred_Schott:
real expressiveness
Jack_Herrington:
That was a mess.
Fred_Schott:
of it.
Jack_Herrington:
That was, that was BHB.
Tj_Vantoll:
well, then you'd
Jack_Herrington:
That's like how they taught you to do it.
Tj_Vantoll:
FTP it up to your web server
Fred_Schott:
Oh
Tj_Vantoll:
because
Fred_Schott:
god.
Jack_Herrington:
Oh yeah.
Tj_Vantoll:
your web server you're paying like two bucks a month for because PHP was dirt cheap. And all of a sudden you've got like a professional web app out there.
Fred_Schott:
Okay,
Tj_Vantoll:
Like,
Fred_Schott:
now I feel
Tj_Vantoll:
yeah.
Fred_Schott:
like I have to go the other way, which is that we aren't actually PHP,
Tj_Vantoll:
Uh.
Jack_Herrington:
Fine,
Fred_Schott:
but
Jack_Herrington:
fine,
Fred_Schott:
we are trying
Jack_Herrington:
fine.
Fred_Schott:
to take inspiration
Jack_Herrington:
Yeah.
Fred_Schott:
from how
Jack_Herrington:
Okay.
Fred_Schott:
seamless and unproductive you feel with that. So there's
Tj_Vantoll:
Yeah,
Fred_Schott:
definitely
Jack_Herrington:
Let me try
Fred_Schott:
some
Tj_Vantoll:
yeah.
Fred_Schott:
inspiration.
Jack_Herrington:
and get this conversation
Fred_Schott:
Ha
Jack_Herrington:
back on
Fred_Schott:
ha
Jack_Herrington:
the rails here.
Fred_Schott:
ha.
Jack_Herrington:
So I brought my Hawaiian shirt today because I want to talk about islands. But before we talk about, I think in order to set that up, let's go and take the perspective of like somebody who's in create react app or next JS and kind of talk about what Astro is in comparison to that. I mean, you mentioned static site. Is it only a static site generator? Like how do tell me.
Fred_Schott:
Yeah, so that's where we started. Like v0 was purely like ssg jam stack. That's all we care about. But it's been 16 months now we just hit our v1 last month and in that time we actually added full SSR. So I would think of it more as an XJS alternative than a 11E alternative. But um, maybe somebody else saw the like, the markdown benchmarks exactly. Zach Leatherman was doing from 11E of like, how does remix versus next JS versus 11E all compare on markdown? Like, That's still something that we care about. Like we have a really nice first party, markdown experience, MDX, where an XJS or remix would say, oh, that's like, do that if you want to, but like, that's kind of an other thing. For us that like content story is really important. So we feel like an XJS from a developer experience, but our focus, like the type of site that we're best at is much more of a, yeah, a content site, a blog, a personal site, a marketing site, a homepage, anything that isn't super dynamic dashboard-y interactive.
Jack_Herrington:
Right, right, that did seem to me like if you're gonna do like every page is 100% dynamic, well Next.js or a spa, that's your bag probably.
Fred_Schott:
Yeah,
Jack_Herrington:
You know,
Fred_Schott:
yeah,
Jack_Herrington:
and then
Fred_Schott:
the way.
Jack_Herrington:
if it, yeah.
Fred_Schott:
No, sorry, God.
Jack_Herrington:
No, no, no, hey, you know, go, you're
Fred_Schott:
The
Tj_Vantoll:
Yeah.
Fred_Schott:
way
Jack_Herrington:
the inward.
Fred_Schott:
it's been described, Theo, who's a content creator, I think some of us know who's a big streamer, and the way he's described it as Next.js for your application, Astro for your kind of front-end marketing site. So that idea of that's really where we fit in. If you have a web app, Next.js is still a great fit. That's not really what we're going after. But if you care about converting your users, anything that is back in your user, coming from Google, quick experience, super productive language to work in, that's Astro.
Tj_Vantoll:
Yeah, we've, it sounds like it fits a really nice niche cause we've ran into that too, where sometimes you have a marketing site and you're like, oh, well I need something simple next is going to be really overkill for this.
Fred_Schott:
Yeah.
Tj_Vantoll:
But then you quickly realize, oh, well my marketing site like does need some stuff. Right. It's you keep adding this functionality and suddenly, uh, cause we ran into this at blues where we're pushing Hugo to its limits, where we
Jack_Herrington:
Hm
Tj_Vantoll:
have
Jack_Herrington:
hm.
Tj_Vantoll:
this crazy,
Fred_Schott:
Yeah.
Tj_Vantoll:
like it started off at the start, Hugo was great. It did exactly what we needed. It served this, this static site really well. Then as more features, more pages, more requirements started to come in, it's like, oh crap, we have so much more we need to do. And it starts to fall apart at some point. So I feel like Astro is pretty smart for just being that sort of middle ground where it's a content site that is beyond just a really, really simple render.
Fred_Schott:
Yeah,
Tj_Vantoll:
So.
Fred_Schott:
yeah.
Jack_Herrington:
I just you guys are kind of missing the boat. I mean, maybe you don't even know. But like I come out of the e-commerce world and I think it's great for ecom too, because
Fred_Schott:
Yeah.
Jack_Herrington:
I think, you know, like the home page of an e-commerce site is pretty much static. You want that server real fast. I mean, I'm in mind. I'm thinking like the Nike site, because that's just where I was. And, you know, it's whatever shoes for whatever area you're at. Right. And then you go into the, you know, the shoe page. Right. And it's also 90 percent static. Right. There's
Tj_Vantoll:
Yeah.
Jack_Herrington:
the cart and the product selector basically. And then there's comments and that those are the two dynamic sections. The rest of the page is like dead.
Fred_Schott:
Yeah. Yeah. E-commerce I think is that's so I tweeted this a while ago. I should really kind of drum this back up because nothing gets people angrier than like charting everyone in the world on a chart and like telling them
Jack_Herrington:
Oh,
Fred_Schott:
where they
Jack_Herrington:
you like,
Fred_Schott:
live.
Jack_Herrington:
are you a front-end developer or a back-end developer? Decide now!
Tj_Vantoll:
Which circle do you fit in?
Fred_Schott:
Yeah, exactly.
Jack_Herrington:
Right? Oh, I hate that. Yeah.
Fred_Schott:
It's if anyone who's the engagement hack I'll share with you. I'll just put every framework on a graph and every framework author will complain and amplify you and you'll get
Tj_Vantoll:
Hehehehe...
Fred_Schott:
a million followers.
Jack_Herrington:
Oh,
Fred_Schott:
Everyone
Jack_Herrington:
I like
Fred_Schott:
will hate
Jack_Herrington:
it!
Fred_Schott:
you.
Jack_Herrington:
Oh, okay. I'll do that tomorrow.
Fred_Schott:
But my version on this was a spectrum of just like if holotypes I think is how Jason Miller from the preact team has called it like What is like if you could chart every website in the world on a spectrum? what would be the axis and what I the way that Astor really thinks about it is like content focused versus like interactive state focused and you could think of like the furthest on the contents focus is like just like a Blog a page of markdown. It's like very limited personal And all the way on the interactive is like a game, like running in the browser. But
Tj_Vantoll:
Yeah.
Fred_Schott:
along that access, I think you have different, you know, like CNN.com. Okay, that's a blog. It's mostly about the content, but obviously there's more going on there. And Facebook, it's all this interactive data, comments, state, the news feed updates, all this thing, you know, very interactive there. And along the spectrum, I think e-commerce just fits right in the middle, where it's still about getting content to the user. Like that's the first thing it needs to do is get you to see the thing that you wanna buy. But then on the exact other side of the spectrum, the second most important thing is you then click the buy button. Like the interaction with the site is ultimately the thing that matters if you're building an e-commerce site. So I think e-commerce is perfect because it's right in the middle of the spectrum. It's probably as far down the spectrum that we'd go coming from the content side. Like that's our goal is to still be a great tool for e-commerce. But e-commerce is like, it's so interesting because it really is, you need to do both well. You can't just be only content focused. So that's where Astro. we have that ability to kind of hook in interactive React components like we're, we're building for that world, right? Is mostly static, but that by button experience is still lightning fast and you don't
Jack_Herrington:
Yeah,
Fred_Schott:
feel
Jack_Herrington:
the
Fred_Schott:
limited.
Jack_Herrington:
buy button. But then this is the really tricky thing about e-commerce architecture is the search page is 100% dynamic, basically. And then the cart checkout, cart checkout experience, that is also 100% because it's totally dependent on your user identity and blah, blah, blah, credit cards and yada, yada. So I mean, I can. Like the Nike architecture was every one of those apps was basically self-contained. And the cool thing was you could have Next.js for one app and then you could have a spa, you know, for a different app. It's fine. You know, let Akamai do all the routing between them and there you go. It works.
Fred_Schott:
Yeah, no, it makes a ton of sense. I think that's where, oh God, we could, there's so much interesting stuff going on there. Cause I think that's where for on our end on Astro, something that really came out of our V1 launch was, I don't know if anyone knows Fireship, but like their video was just seems like Astro's
Jack_Herrington:
Mm-hmm.
Fred_Schott:
great. The one feature I want is like, I want it to feel like an SBA. I want to feel like there's that kind of like client side, JavaScript app. I click a thing and my browser's like running the transitions for me.
Jack_Herrington:
Mm-hmm.
Fred_Schott:
That's the thing that Next.js does that we stay away from. but like the feedback was like, can you give me that without going fully into JavaScript app world and all the performance costs and all the complexity?
Tj_Vantoll:
Yeah.
Fred_Schott:
And there is stuff we can do on that end. And so from our end, there's features. And then from the browser's end, there's this really cool shared elements transition API, which is fairly new. It's behind the flag in Chrome, but it's essentially this idea of like, can pages transition and feel dynamic even if it's actually behind the scenes the browser is requesting a new page of HTML. It's super like
Jack_Herrington:
Oh,
Fred_Schott:
cutting
Jack_Herrington:
I gotta
Fred_Schott:
edge.
Jack_Herrington:
look
Fred_Schott:
So
Jack_Herrington:
into
Fred_Schott:
like,
Jack_Herrington:
that.
Fred_Schott:
yeah,
Jack_Herrington:
That
Fred_Schott:
we're
Jack_Herrington:
sounds
Fred_Schott:
still.
Jack_Herrington:
wicked cool, except of course, it
Fred_Schott:
Yeah,
Jack_Herrington:
can be Chrome
Fred_Schott:
it's so
Jack_Herrington:
only,
Fred_Schott:
cool.
Jack_Herrington:
but whatever.
Fred_Schott:
It's like people will do these demos and like videos. That's like, oh my God, this is great. How do I try this out? It's like, well, you have to go into your Chrome flags, enable a flag.
Jack_Herrington:
Enable
Fred_Schott:
It's like,
Jack_Herrington:
this
Fred_Schott:
all right.
Jack_Herrington:
flag.
Tj_Vantoll:
Yeah.
Jack_Herrington:
Yeah, right. Yeah,
Fred_Schott:
Yeah.
Jack_Herrington:
it's okay. You'll have your customer do that. No
Tj_Vantoll:
Well, this is still cool, at least eventually, because this is one of the, I used to do a lot of stuff around when I was doing like React Native, NativeScript type of stuff,
Jack_Herrington:
Oh yeah.
Tj_Vantoll:
like mobile versus web stuff. And page transitions was honestly towards the top of my list of like number one things that mobile can do that the web can't. Like the reasons that the web struggles to create as good of an experience as native, because just on mobile platforms, there's just handy little methods built right into the platform. says, oh, take me from one page to another with this like built-in OS level, silky smooth transition.
Fred_Schott:
Mm-hmm.
Jack_Herrington:
Mm-hmm.
Tj_Vantoll:
And on the web, meanwhile, we're like changing the URL that was invented in
Jack_Herrington:
Night.
Tj_Vantoll:
1990, and then like tricking these DOM APIs into trying to like create a hardware smooth transition. And it's just
Fred_Schott:
Yep,
Tj_Vantoll:
a bunch
Fred_Schott:
yep,
Tj_Vantoll:
of hacks.
Fred_Schott:
yep.
Tj_Vantoll:
So
Jack_Herrington:
History.push
Tj_Vantoll:
it's exciting to see that at
Jack_Herrington:
Sure
Tj_Vantoll:
least someone's trying to do something about this.
Fred_Schott:
Yeah, well, I mean, the it's there's a philosophical battle going behind the scenes between like, not even like the web versus native, but also like Google versus Apple as companies like Google believes in the web, Apple believes in their, their kind of walled garden iOS. And they're constantly kind of battling this out where if that story that you just described, Google sees that as like a web problem, like the browsers need to support that if the web is going to survive, it's essentially like the holy war that the browser developers are leading. So. It's interesting to see that kind of play out and to be a part of that story where like, okay, we see where they're going and we think we can build something for that future.
Jack_Herrington:
I've got to say, if you're doing electron, you're probably doing Chrome. So I wonder if you could actually just enable that in Chrome, in that embedded Chrome.
Fred_Schott:
Yeah.
Jack_Herrington:
And then now it looks great.
Tj_Vantoll:
I
Jack_Herrington:
And
Tj_Vantoll:
think
Jack_Herrington:
you can control that.
Tj_Vantoll:
the other thing interesting in that debate is that both sides have reasonable arguments. It's not one of those. Even as somebody, I'm a long-time web developer, so I usually side on the side of the web. But there are arguments for, well, we don't want to bloat up the web. The web is its own unique thing. We shouldn't necessarily try to make it into just a mobile-friendly platform and do mobile-specific things, too. I think that's a reasonable argument. Browsers are also getting crazy complicated. I mean, having page transitions, like, I don't know how it works, but there has to be some means of recognizing something as pages or things that you're going to transition
Fred_Schott:
Yeah.
Tj_Vantoll:
between. And that's more
Fred_Schott:
You know.
Tj_Vantoll:
APIs that's like, you know, there's already so many conflated weird CSS APIs and this would add to it. So it's, you know, it's, it's, it's not a clear cut case.
Fred_Schott:
Yeah, you would love to read the description of how this works. Cause I, as I understand it, it literally takes a screenshot of the old way of the site looked and
Jack_Herrington:
Oh,
Fred_Schott:
then a screenshot of the new one. And then
Jack_Herrington:
oh,
Fred_Schott:
if you
Jack_Herrington:
oh,
Fred_Schott:
wanted something to tree heads,
Jack_Herrington:
wow,
Tj_Vantoll:
Well,
Fred_Schott:
don't
Tj_Vantoll:
but...
Fred_Schott:
look at how it's implemented. Don't worry
Tj_Vantoll:
Eheheheh.
Fred_Schott:
about that.
Jack_Herrington:
whoa, party
Fred_Schott:
It's
Jack_Herrington:
foul.
Fred_Schott:
a really cool API to look and do cause
Jack_Herrington:
You
Fred_Schott:
it's
Jack_Herrington:
know, but
Fred_Schott:
pretty
Jack_Herrington:
I'll
Fred_Schott:
weird.
Jack_Herrington:
be honest,
Tj_Vantoll:
I think,
Jack_Herrington:
they probably do the same thing on Android.
Tj_Vantoll:
I was just gonna
Jack_Herrington:
Yeah,
Tj_Vantoll:
say that I believe they
Jack_Herrington:
yeah.
Tj_Vantoll:
literally do that on mobile
Fred_Schott:
Oh,
Tj_Vantoll:
platforms
Fred_Schott:
there you go.
Tj_Vantoll:
because
Jack_Herrington:
Yeah.
Tj_Vantoll:
like,
Jack_Herrington:
What else you gonna
Tj_Vantoll:
I mean,
Jack_Herrington:
do?
Tj_Vantoll:
that's all you're doing. You're just taking the old one and moving it out of the way. So it's,
Jack_Herrington:
Yeah,
Tj_Vantoll:
you know.
Jack_Herrington:
yeah. You just bit bleeding from gaming, you know, whatever. OK,
Tj_Vantoll:
So,
Jack_Herrington:
so one of the things. Oh, sorry.
Tj_Vantoll:
no, you go, Jack. I think you're
Jack_Herrington:
Well.
Tj_Vantoll:
going the same place I am.
Jack_Herrington:
Oh, really? OK, we'll see.
Tj_Vantoll:
Go for it.
Fred_Schott:
Stayed at the same time.
Jack_Herrington:
Islands,
Tj_Vantoll:
Islands!
Jack_Herrington:
islands. Let's talk islands. Yes. OK, what? Tell us about islands. Is if I'm a five year old who didn't know what an island was other than like an atoll or whatever, something
Fred_Schott:
So
Jack_Herrington:
sitting in
Fred_Schott:
yeah,
Jack_Herrington:
a sea.
Fred_Schott:
so islands are kind of island architecture. I'd say it's our secret sauce. It's what makes Astro unique in this pulp space. No one else is doing this as far as I know. It's not something that we actually came up with. We're actually going back to 2019 where the Etsy front end lead, Katie, I'm gonna blank on her last name. This is worth looking up because Jason Miller of Preact ended up writing the article about it, but really Katie deserves the credit. He's basically just quoting her. in his article. Let me see if I can type as fast as
Jack_Herrington:
And here we
Fred_Schott:
I
Jack_Herrington:
are
Fred_Schott:
talk.
Jack_Herrington:
in another e-commerce world, right?
Fred_Schott:
Katie
Jack_Herrington:
So, okay.
Fred_Schott:
Seiler Miller.
Tj_Vantoll:
Yep.
Fred_Schott:
So coined this phrase and they were trying to migrate from a PHP stack and trying to bring in, like how can we incrementally bring in modern front end react components in their case?
Jack_Herrington:
Mm-hmm. Mm-hmm.
Fred_Schott:
And what they coined was this idea of, well, the page can continue to be server generated, but we can start to kind of create these islands of interactivity so that after the page loads, we kind of behind the scenes without anyone noticing we hydrate it. So similar to what Next.js does with your whole page, but instead of hydrating your whole page with JavaScript, you're just doing these little isolated islands. So going back to the e-commerce example, right? You mentioned there's like mostly just like an image and some text and then the buy button and maybe a carousel and maybe a couple other things. But the way that every web framework, like modern web framework of the last decade has treated that is let's ship the whole page as JavaScript. and the whole page will hydrate. And then now the whole, your whole page is a JavaScript application. Everything's interactive. And Asterisk takes instead, the whole thing is static HTML and just the bits that need to be interactive are interactive. They're loaded in isolation. So you're not sending down all the unused stuff that isn't actually interactive. You're only sending down the super critical by button, the carousel, the code for those islands. So they actually end up acting like these interactive islands on a sea of static HTML. So that's where React and Asterisk fit together. You use React to build those front-end components. You can also use Vue or Svelte or Solid or Preact where you're super unopinionated because we just treat it as this island that you're gonna hydrate, not the end all be all, everything all the way down the stack, to do your hello world you don't need to learn. React if you don't want to, but we give it to you as your tool for when you need to step in interactive world. That's your tool.
Jack_Herrington:
So conceivably I could have React and Preact on the same page.
Fred_Schott:
You can see the examples. You can have every framework interacting on the
Jack_Herrington:
What
Fred_Schott:
same page.
Jack_Herrington:
the who?
Fred_Schott:
Yeah.
Tj_Vantoll:
Mmm.
Jack_Herrington:
It's
Fred_Schott:
So
Jack_Herrington:
a heavy page, but okay. Ha ha ha
Fred_Schott:
I wouldn't recommend it,
Jack_Herrington:
ha
Fred_Schott:
but
Jack_Herrington:
ha.
Fred_Schott:
there's a couple of stories
Tj_Vantoll:
I'm...
Fred_Schott:
where it is interesting. One is the micro front-ends world, loves that idea
Jack_Herrington:
Mm-hmm.
Fred_Schott:
of implementing everything in isolation. So who cares how it's implemented? It's an island. The other is if you're migrating. So it's a really important story if you're thinking long-term. Right now, if you're building an XJS site, but you hear about SolidJS or QUIC, or any one of these new technologies you want to use. Maybe even just Svelte. Maybe you're like, you've just bought into this Svelte hype train. You're done with CSS and JS. You want the Svelte styling built in. Today in every other framework, because they choose React and they go all the way down, you have to basically throw out your site and start from scratch. Astro lets you go page by page or even component by component and reimplement that, component by component in Svelte. So you add one Svelte component and then two, and you're slowly whittling away your old framework and you're slowly coming up with your new one. There's a really cool migration story that doesn't tie your entire future tech stack to one framework that gives you that flexibility.
Tj_Vantoll:
Do you have like a really cool internal unit test that loads like seven different frameworks and like builds a button with all of them just to like make sure that continues to work
Fred_Schott:
I don't
Tj_Vantoll:
just
Fred_Schott:
even think
Tj_Vantoll:
be.
Fred_Schott:
it's internal. I think so astro.new I'll just plug as our like launch pad for all of our templates and examples. I think there's one just called kitchen sink. Yep. Multiple frameworks. So you can load that up astro.new look for kitchen sink
Tj_Vantoll:
Oh, I've got
Jack_Herrington:
Hehehehehe
Tj_Vantoll:
it. I'm
Fred_Schott:
and
Tj_Vantoll:
loading
Fred_Schott:
hello
Tj_Vantoll:
it.
Fred_Schott:
from react. Hello from preact. Hello from solid.
Jack_Herrington:
And you know, you mentioned, I think on the documentation, that you can share a state between, you know, and any of these
Fred_Schott:
Yep.
Jack_Herrington:
using
Fred_Schott:
Yep.
Jack_Herrington:
a really cool state manager that I'd never heard of, which is unusual. I thought I'd seen everything, but of course that I think is impossible, called NanoStores.
Fred_Schott:
Yeah, NanoStore feels like it was designed for us. I really
Jack_Herrington:
Hahahaha
Fred_Schott:
need to reach out to the author. Like what, cause it's this framework agnostic state management. So you basically plug in your preactors felt like you plug in your adapter so that it all works nicely, but the core of it is the same across all these frameworks. So they all get to actually share state using one common state management. We'll probably build like Astro slash store at some point, but, um, for now, it's this really nice thing. Of course, if you're only using one framework, you can just use whichever one you like. Like. Svelte has its own built-in stores. You don't need to reach outside of that unless you're trying to share with some other framework, in which case you can.
Tj_Vantoll:
So I can report back from the kitchen sink. The MPM install took quite a while,
Fred_Schott:
Shocking, shocking.
Tj_Vantoll:
which I find very hilarious, but it loaded up fine and I see hello world. So kind of cool.
Jack_Herrington:
That is impressive. In a weird way, I don't know.
Fred_Schott:
It's weird because it's this incredible feature of Astro, but to really recommend that, it's like, wait, so you want me to put five frameworks on one page? No, no, no, no, no.
Tj_Vantoll:
Okay.
Fred_Schott:
It's
Jack_Herrington:
Yeah.
Fred_Schott:
like inspiration. It's something you could do, whether you do it yourself.
Jack_Herrington:
so hesitant to do anything about inspiration because everybody takes it literally. Like, are
Fred_Schott:
Yeah.
Jack_Herrington:
you serious? And you're like, no, please. And you just want to take it down. You're just like,
Fred_Schott:
Yeah.
Jack_Herrington:
well, nobody takes inspiration.
Fred_Schott:
There's a couple,
Jack_Herrington:
So.
Fred_Schott:
you know, I'll say there's a third use case. It's really useful. Like in this even on our own doc site, the Algolia, we use Algolia search bar for our own doc site.
Jack_Herrington:
Oh, okay.
Fred_Schott:
And I think they've, they've kind of fixed this, but when we found Algolia, great search experience, only a react front end component. So we'd actually built the couple, you know, the dark mode toggle that was pre act. We'd been really good about using pre act where we could, and all of a sudden. What are we going to do? This like, this thing is only React. That's the only way it's shipped. Like if we were building Svelte and Vue, it would have been the same problem. So we were able to just, okay, well that doesn't actually matter. It's Astro. We're just going to put the React component on the page. We'll pay the cost of loading React for the first time because it's our first React component, but it doesn't actually block us from shipping this thing. So there's a cool, like if you're working with third-party tools, SuperBase just launched some cool auth components. Like if you weren't using React, you just can't use them. That's kind of the story right now. But. with Astor UK.
Jack_Herrington:
Nice.
Tj_Vantoll:
So back to the more like, some of these we're talking about are somewhat edge cases. So let's go back to like the super common use case. Let's say I'm interested in this islands architecture. I'm building out my blog. Most of my blog is just content, right? But I've got, I'm building this super fancy comments section, right, which is gonna be definitely interactive. So how am I designating the islands? Like what is your like internal convention for like. Presumably I have like just a normal markdown file for like the content of my blog post, but how am I designating, okay, this is the interactive bit.
Fred_Schott:
So it's totally up to you and your site design. I'll share one funny story, which was Ryan Carniato and I were doing a live stream together where he was looking at Astripp for the first time. And if you don't know Ryan, he created Solid.js. So he was super curious. All right, let's put these things up. He also built Marco, which is, or at least maintains Marco, or used to maintain Marco at eBay, which has a really, really impressive performance story. Like still, even though it's fairly old at this point, still ranks highest and a lot of performance benchmarks. So he was like, Let's put Astro through the... Like basically came in like I think, you know, not that he was like
Jack_Herrington:
Let's put it
Fred_Schott:
ill
Jack_Herrington:
through its
Fred_Schott:
willed
Jack_Herrington:
faces.
Fred_Schott:
or ill natured. Yeah. But like was like,
Jack_Herrington:
Oh yeah,
Fred_Schott:
I'm
Jack_Herrington:
I
Fred_Schott:
going
Tj_Vantoll:
Hehehehe.
Jack_Herrington:
know.
Fred_Schott:
to kind of put Astro in its place. Like
Jack_Herrington:
Ha!
Tj_Vantoll:
Mm-hmm.
Fred_Schott:
I've built the fast things. I know
Tj_Vantoll:
Hehehehe.
Fred_Schott:
how this works. And
Jack_Herrington:
Well, he's also, he's doing solid starts, so you're in a sense a competitor, a little bit.
Fred_Schott:
Yeah, yeah, going that I think he's, yeah, I don't know actually, probably a little bit. But we ended up basically the way it was, the way he kind of ran Astro through its faces was Hacker News using that as like a demo app because he
Jack_Herrington:
Oh, everybody,
Fred_Schott:
had
Jack_Herrington:
yeah,
Fred_Schott:
one for
Jack_Herrington:
classic.
Fred_Schott:
Next.js and Remix. Yeah, it's kind of become the new to-do app. And Astro ended up performing best of any framework. I think like on a 3000 comment post still got like a 95, 96 Lighthouse score.
Jack_Herrington:
Nice!
Fred_Schott:
And the reason was because even though it's a comment section with you know. ability to post the thing that gets everyone stuck is the like, how do I toggle the collapsibility of a hacker news comment and an Astro like that's actually where the island was like the island was just that like toggle button essentially. And so you're not hydrating the whole component, you have 3000 of them. You're basically just hydrating this little button. And then even further than that, we let you control when it loads, we were able to kind of delay loading. It's not super essential. You know, we basically let you minimize your JavaScript to such a point where it wasn't even that it had to load a lot of JavaScript, but then didn't actually have to run a lot of JavaScript either. So
Tj_Vantoll:
And I imagine
Fred_Schott:
it totally
Tj_Vantoll:
too,
Fred_Schott:
depends,
Tj_Vantoll:
like,
Fred_Schott:
yeah.
Tj_Vantoll:
even if you had like, so you have the collapsible section and presumably each post usually has like, the Hacker News will have like an up vote, down vote. But presumably those are also like inactive if they're collapsed, or maybe not even present in the DOM at all, if they're collapsed more or less, because I think that would probably help as well.
Fred_Schott:
Yeah, that's the really cool thing, less edge casey and much more like what island architecture enables is that idea of once you break your page down into components and individual components that you can control in isolation, those islands can be controlled. So you can say, this thing isn't super essential. This is the collapsing component. That's not gonna, don't block the page for this, right?
Jack_Herrington:
Hehehe
Fred_Schott:
You can basically say like, hey, load that when the browser has a second, when it can catch its breath or. come to your point, load this component and actually render it only once it becomes visible. So if it's collapsed and hidden, don't even bother running it. That's a really cool thing that again, if you're shipping an entire JavaScript app, it's really hard to do that because the whole thing has to load. React server components is another take on this, but we're essentially solving the problem by removing the code and then giving you that control. So when you wanna kind of say, this is an island, I wanna hydrate it, when you do that, you basically tell Astro. how high the priority is, when should it hydrate. And
Jack_Herrington:
Yeah,
Fred_Schott:
that's the control we give you.
Jack_Herrington:
there's a client only client load. You can get out a lot of options. You have the advantage over some server components about existing.
Fred_Schott:
being real
Jack_Herrington:
Being
Fred_Schott:
at
Jack_Herrington:
real,
Fred_Schott:
this moment.
Jack_Herrington:
we could actually use it today. But anyway, I digress. So yeah, I mean, let's give a quick, so the feel is that I create like an astrophile. In that astrophile, there's a block at the top where I import my React component. And then there's kind of JSX, I guess. Basically HTML below that. And I can just invoke my React component just like any other kind of tag. And then there is options on the, in addition to all the properties, I would normally give it. I would give it some asterisk specific property of a, if I wanted to be something that would run, run on the client, in addition to running statically or SSR, how you figured you'd say like client only, meaning it would just only run the client or client load. I think there's another one where it's like loaded on the client. Yeah. So does that sound right? Right. Did it give, they give a decent
Fred_Schott:
Yeah,
Jack_Herrington:
walkthrough there?
Fred_Schott:
yeah, so that's kind of the walk, the line that we walk is this idea of use React as much, like you can write your whole component, your whole site basically is one React component, if that's what you wanna do. But this
Jack_Herrington:
I
Fred_Schott:
Astro
Jack_Herrington:
don't know what advantage
Fred_Schott:
component,
Jack_Herrington:
you get out of that.
Fred_Schott:
yeah, exactly, you lose that advantage, now your whole page is one app, right? You're kind of back to that problem.
Jack_Herrington:
Yeah.
Fred_Schott:
So what Astro lets you do and where we push you towards is using this Astro component, which it's kind of like JSX, we try to be actually compliant HTML, so in the way that like JSX like just totally breaks if you don't. close your image tag or your link tags.
Jack_Herrington:
Oh right, yeah.
Fred_Schott:
We try, like, we really want to be this idea like anything you paste in as an HTML snippet will parse successfully. So we are actually HTML compliant in a way JSX isn't. But to your point, we give you the like nice little, you know, you can map over an array. You can give the kind of, what do you call it? Curly brace and then move into a JavaScript expression. So it feels a lot like JSX. So that's the Asterisk syntax in a nutshell. And yeah, it basically is your. foundation that you can plug React components into whenever you need that in your activity. Otherwise, it's just a very HTML-like templating language.
Tj_Vantoll:
I do like looking over the docs that for CSS you allow for scoped styles with a style tag, which is, I like a lot that's very like spelt style. Angular does that as well. I
Fred_Schott:
Yeah.
Tj_Vantoll:
prefer
Fred_Schott:
Yeah, the
Tj_Vantoll:
that
Fred_Schott:
way.
Tj_Vantoll:
to like the default react way of just not doing anything to help you.
Fred_Schott:
Yeah,
Jack_Herrington:
You're on your
Fred_Schott:
we felt
Jack_Herrington:
own!
Fred_Schott:
like we had to do a bit more than that. But yeah, the way we talk about this is like getting started with it is actually a real focus. Like we want this to feel familiar. And so the JSX like expression, that's very intentional. A React developer should feel right at home, but it's also a single file component, much more like a viewer as felt. And yeah, the fact that we do styling at all, that should feel really familiar to us felt about developer. So we try to basically have something for everyone to kind of hook their teeth into to get comfortable in Astro. quickly.
Tj_Vantoll:
It's kind of like web frameworks, the good parts, like, cause I,
Fred_Schott:
Yeah,
Tj_Vantoll:
like
Fred_Schott:
yeah.
Tj_Vantoll:
it's,
Jack_Herrington:
Hahaha!
Tj_Vantoll:
it's interesting to see. Cause I, I can definitely see like the, the actual component you write feels a lot like react, but then there's definitely some view influences and you see some stuff from some other frameworks, which I consider just a good thing, right?
Fred_Schott:
Yeah.
Tj_Vantoll:
Cause why not take the parts that work from all of these
Fred_Schott:
Yeah.
Tj_Vantoll:
when you're creating something. So it's kind of
Fred_Schott:
But
Tj_Vantoll:
fun.
Fred_Schott:
what really gets powerful is this idea that Aster components are never gonna run in the client. We are fully server first. Like you use React when you need something to be interactive in the client. Our framework components, like the Aster component is just for server and your HTML, which lets us do a lot of cool things. So the, yeah, the, the PHP mask off, like
Jack_Herrington:
Heh
Fred_Schott:
that
Jack_Herrington:
heh
Fred_Schott:
idea
Jack_Herrington:
heh.
Fred_Schott:
of like literally call your database in your Aster component, like go for it. There's actually no risk there in the way an XJS or remix became popular for this loader concept, right? get static props, loaders. Like if you actually really break it down, all of those concepts are trying to get around this fact that your code might be running in the browser. So you have to design
Jack_Herrington:
Right.
Fred_Schott:
for that limitation. And Astra is really explicit. Like this is only ever gonna run the server. Talk to your database, put in your like end secrets. Like it's all okay. Don't put your secrets into the code, but like you can reference them because this isn't going to the
Tj_Vantoll:
Yeah.
Fred_Schott:
browser. Like there's no security risks there. Top level of weight fetch, like it's all designed.
Jack_Herrington:
Yeah, it's
Fred_Schott:
for
Jack_Herrington:
really
Fred_Schott:
this
Jack_Herrington:
nice.
Fred_Schott:
like really, you realize how much complexity we're bringing in from this JavaScript app model once we remove it.
Jack_Herrington:
Yeah, you just basically like if you need a server API, you just like, oh, I'm just fetch it
Fred_Schott:
Yeah,
Jack_Herrington:
right there.
Fred_Schott:
just fetch,
Jack_Herrington:
And I just
Fred_Schott:
just
Jack_Herrington:
got
Fred_Schott:
fetch
Jack_Herrington:
the data.
Fred_Schott:
top level.
Jack_Herrington:
I just,
Tj_Vantoll:
Yeah,
Fred_Schott:
Yeah.
Tj_Vantoll:
that
Jack_Herrington:
yeah,
Tj_Vantoll:
sounds, as someone
Jack_Herrington:
fall
Tj_Vantoll:
who's
Jack_Herrington:
through.
Tj_Vantoll:
spent a good amount of time in the last week or two doing server-side stuff in Next.js,
Jack_Herrington:
Ugh.
Tj_Vantoll:
I can sympathize because it's very powerful. I will say that. You can do a whole lot. There's a reason why Next is popular. It's really cool and really amazing what you can do, but it also can get complex because it's not just get server-side props. There's other methods in Next, and the way they work is somewhat confusing. And it's, it can be easy to series of interest in what I have to say, but it,
Fred_Schott:
I'm serious. Yeah.
Jack_Herrington:
Always.
Tj_Vantoll:
but it can get very confusing, just because like there is so much complexity there and the complexity is there to handle different use cases. But if you're just, if you just need to get some data from a database, it's refreshing to just be able to just, I don't know, do it.
Fred_Schott:
Yeah, yeah. It's again, next to us, it's great for certain use cases. We just think that Astro is great for other use cases, ones that aren't really well served. There's kind of like a Gatsby story here in who we're talking to. Like if you've used Gatsby in the past and like got stuck, like just the maintenance costs cut up or the performance, like we're kind of trying to tell that story in a very different way, um, where next to us, I think became this de facto for everything because it was just such a great developer experience, but the web's starting to catch up. We think that we actually can. Yeah, it's a very similar developer experience, but for a very different use case than what Next is good at.
Jack_Herrington:
You
Tj_Vantoll:
Do you have
Jack_Herrington:
know.
Tj_Vantoll:
an underlying confusing system that's entirely driven by GraphQL? That's
Fred_Schott:
No,
Tj_Vantoll:
it.
Fred_Schott:
no, that was the big learning for us was
Jack_Herrington:
Oof.
Fred_Schott:
keeping it simple, keeping it small. Fetch is actually pretty cool and
Jack_Herrington:
Yeah!
Fred_Schott:
using other content providers, SDKs is also very cool and not sending it all through your own proprietary GraphQL.
Tj_Vantoll:
That's,
Fred_Schott:
Yeah.
Tj_Vantoll:
that was a Gatsby reference for anybody that didn't get it just cause they use graph QL quite a bit under the hood, or at least that's what I was trying to get at because I like Gatsby and a lot of what they do. But like when I start doing advanced Gatsby stuff and you start getting into like these graph QL APIs and it gets, it can get messy.
Fred_Schott:
Yeah, yeah,
Jack_Herrington:
Yeah.
Fred_Schott:
I mean, Gatsby, yeah, it's super impressive, but I can't imagine a worse place to debug integrations and the data layer. And that was always when I maintained them, like, all right, I just update this integration and my data layer is now completely whack. How do I debug this?
Jack_Herrington:
I mean, it's also a ding on, I think RedwoodJS, his GraphQL. Yeah.
Tj_Vantoll:
at.
Fred_Schott:
Also, in case this comes up, I always have to be very careful. It's graph QL. Very cool. Just
Jack_Herrington:
Oh
Fred_Schott:
the
Jack_Herrington:
yeah,
Fred_Schott:
idea
Jack_Herrington:
for
Fred_Schott:
of
Jack_Herrington:
sure, for
Fred_Schott:
sending
Jack_Herrington:
sure.
Fred_Schott:
everything
Jack_Herrington:
Oh, totally.
Fred_Schott:
through it is always the risk. I think Redwood does a little bit more of a a concerted approach on that.
Tj_Vantoll:
Yeah, it depends on how you're using it and how well you're abstracted from it. I felt like with Gatsby, I was getting into the internals a little bit too much. I don't know. But it's also a personal preference type of
Jack_Herrington:
Yeah.
Tj_Vantoll:
thing too.
Fred_Schott:
Well that's my shameless plug. If you've tried out Gatsby and got stuck, try out Astro. You won't
Jack_Herrington:
And
Fred_Schott:
get
Jack_Herrington:
you will not
Fred_Schott:
stuck.
Jack_Herrington:
get stuck
Fred_Schott:
That is a
Jack_Herrington:
very,
Fred_Schott:
guarantee.
Jack_Herrington:
very, very
Tj_Vantoll:
Heheheheh...
Jack_Herrington:
good,
Fred_Schott:
That's
Jack_Herrington:
very,
Fred_Schott:
a promise.
Jack_Herrington:
very quick. So you mentioned microfinance there for a little bit. I have a slight interest in microfinance. Um, especially, I, and I coming out of the, the e-commerce world, right? You know, the, the header and the footer are basically your microfinance. Cause you want it like those I mentioned, you have like different teams deploying different parts of the site and you want to be able to update, for example, like the header on, you just bought, you know, dynamically, right? And so folks are looking at module federation as a way to do this. So you basically dynamically load the data and the code for the header. Um, SSR is a bit of a problem there, but whatever anyway. So you're coming out of like the ESM world and, uh, snow, uh, was it snow?
Fred_Schott:
Snowpack and Skypack,
Jack_Herrington:
Snowback,
Fred_Schott:
oh yeah,
Jack_Herrington:
right? Sorry.
Fred_Schott:
early
Jack_Herrington:
Well, I don't
Fred_Schott:
ESM.
Jack_Herrington:
know what it was blanket on that. Uh, awesome stuff is, is there a potential here to have? basically, hey, import this URL, you know, or import this bundle dynamically and then run it on the server and then because that I mean, that would be that bang, you'd be done. Like
Fred_Schott:
Yeah.
Jack_Herrington:
you just everybody would be using you for ecommerce. Like it was just bang. You'd
Fred_Schott:
So
Jack_Herrington:
be done.
Fred_Schott:
we are limited by what node and Veed support. So Veed is our
Jack_Herrington:
Hmm.
Fred_Schott:
internal build engine and node is our actual runtime for JavaScript. Neither of those, well, so Veed supports an ESM import, but I think it just does that by like ignoring it. And if you're trying SSR,
Jack_Herrington:
Hehehehehehehehe
Fred_Schott:
it passes it to node and the node doesn't ignore it, it actually crashes. So you're kind of stuck there. I think node is doing experimental. I know they wanna go this route, so they're getting there. I think what
Jack_Herrington:
That
Fred_Schott:
would
Jack_Herrington:
was
Fred_Schott:
be
Jack_Herrington:
Den-O,
Fred_Schott:
more
Jack_Herrington:
I
Fred_Schott:
interesting
Jack_Herrington:
guess.
Fred_Schott:
Yeah, I was going to say Deno seems really worried or excited, maybe is the other way, all of a sudden
Jack_Herrington:
Worry,
Fred_Schott:
of getting Node.js support.
Jack_Herrington:
okay
Fred_Schott:
And there's a world where Astro could run on Deno. It's probably not there yet, but once they get Vite support
Jack_Herrington:
Wait,
Fred_Schott:
figured
Jack_Herrington:
I thought,
Fred_Schott:
out, I think
Jack_Herrington:
I thought
Fred_Schott:
that's
Jack_Herrington:
Astra did
Fred_Schott:
on our
Jack_Herrington:
run
Fred_Schott:
end.
Jack_Herrington:
on Denno.
Fred_Schott:
So good, good point. We can deploy to Deno so we can actually build your
Jack_Herrington:
Oh.
Fred_Schott:
thing to run on Deno in production. But like when you run Astro Dev and start the dev server, that's very much, there's a lot of node happening there. That Yeah, if Deno can figure out their NPM node ecosystem kind of solution, then there's a world where we could move to Deno and then those imports are gonna run. Cause we're also very TypeScript friendly. Like we, an Astro component has TypeScript enabled in the front-end, you can't turn it off. You can like have really relaxed TypeScript, you know, TS config. So you don't see any warnings
Jack_Herrington:
so they'll
Fred_Schott:
really,
Jack_Herrington:
feel
Fred_Schott:
unless
Jack_Herrington:
it,
Fred_Schott:
you
Jack_Herrington:
right,
Fred_Schott:
do something
Jack_Herrington:
exactly.
Fred_Schott:
really bad. Yeah,
Jack_Herrington:
Everything's at
Fred_Schott:
but
Jack_Herrington:
A,
Fred_Schott:
like,
Jack_Herrington:
whatever.
Fred_Schott:
yeah, exactly. Use any, like go for it. But we're pretty TypeScript. on a pro in favor so Deno actually is a pretty good fit for us.
Tj_Vantoll:
So just so I understand it correctly, it sounds like you can't use Deno because you're, it sounds like dependencies you're using like for like underlying in Astro just aren't like, you can't import them, can't run them. So it's like still some dependencies.
Fred_Schott:
Yeah,
Tj_Vantoll:
Don't work
Fred_Schott:
right now
Tj_Vantoll:
more or less.
Fred_Schott:
it's just a really simple VEAT won't run on DENNO.
Tj_Vantoll:
Oh,
Fred_Schott:
I know
Tj_Vantoll:
okay.
Fred_Schott:
they're working on that. I think it might work in some cases now. So not yet at the stability we need, but they're getting there. Once that box is checked, then it's on our end. Like then we have 10 other dependencies to look at and we need to be tracking those. So we've kind of been able to just shrug and be like, I don't know VEAT, like we're not moving off VEAT, VEAT's great. Like, but
Tj_Vantoll:
Yeah.
Fred_Schott:
VEAT's so big now and DENNO sees it as their window into the node ecosystem. Like huge adoption for them if they can figure out VEAT.
Tj_Vantoll:
Yeah.
Fred_Schott:
So we're kind of just banking on everyone else figuring this out for
Jack_Herrington:
Hehehehehehehehe
Fred_Schott:
us.
Tj_Vantoll:
No, it makes sense. It's going to be interesting to watch this space because it's, it's been such a expectation for the entire JavaScript world for so long that like you start any sort of project or like any sort of new computer while you install node and NPM.
Fred_Schott:
Yeah.
Tj_Vantoll:
That's like
Fred_Schott:
Yeah.
Tj_Vantoll:
the very first thing you do. And like for decades and spanning all like all facets of JavaScript. And so undoing that is going to be
Fred_Schott:
Yep.
Tj_Vantoll:
a challenge. Like I, but I mean, if there's real benefits. I mean, the JavaScript world is very speed conscious. So in some ways it's surprising that it hasn't changed up so much in just given the amount of time.
Fred_Schott:
Well, we're in a really interesting position too, where you run Astro Dev to start your dev server and Astro Build to build your site. Like the user actually doesn't know it's known behind the scenes. It's pretty obvious because
Tj_Vantoll:
And again.
Fred_Schott:
it's just the defector, like you said, but there's a world where if Denno becomes a better option for Astro, and we can figure out a really clean migration story, like invisibly behind the scenes, we can almost migrate. It wouldn't be invisible, but like we kind of control all that complexity behind the Astro layer, so.
Tj_Vantoll:
Yeah.
Fred_Schott:
We would just be picking the best tool for the job at that.
Tj_Vantoll:
Yeah, I'm guessing you'd probably just have to have people install something before they run the Astro dev.
Fred_Schott:
Yeah,
Tj_Vantoll:
Cause
Fred_Schott:
yeah.
Tj_Vantoll:
right now you could probably more or less assume people probably have node. So you
Fred_Schott:
Yeah.
Jack_Herrington:
Mm, yeah.
Tj_Vantoll:
still
Fred_Schott:
And right
Tj_Vantoll:
have to
Fred_Schott:
now
Tj_Vantoll:
handle
Fred_Schott:
we are
Tj_Vantoll:
if it's
Fred_Schott:
in NPM
Tj_Vantoll:
not there,
Jack_Herrington:
But
Fred_Schott:
dependency,
Tj_Vantoll:
but
Jack_Herrington:
then it
Tj_Vantoll:
yeah.
Jack_Herrington:
was a pretty
Fred_Schott:
UMPM
Jack_Herrington:
easy install.
Fred_Schott:
install Astro.
Tj_Vantoll:
Yeah. What was that Jack? I missed it.
Jack_Herrington:
Oh, Deno is a pretty easy install. So there's that. They make everything easy because they obviously want to get that adoption fighting against the massive node wave.
Fred_Schott:
Yeah.
Tj_Vantoll:
So Fred, one other thing I wanted to ask you about is Markdown. Because you, Astro had a fairly big shift recently, right? When just you're, the way you implemented Markdown and like MDX, right? Like for 1.0. Do you want to explain a little bit about like what went into that and what that change was about?
Fred_Schott:
Um, yeah. So our markdown story, it's probably one of the first things we implemented in Aster was like, all right, we're coming from this like inspiration of stack site builders. That means we need markdown support. Um, but we knew we had this like islands component idea coming. Like that was probably those two together were our first two features. So from day one, we really wanted an idea of adding your components to mark down. And we thought like, no one's doing this well. Like, you know, like famous last words, like this will be
Tj_Vantoll:
Hehehehe.
Fred_Schott:
easy. And then 16 months later, like still the majority of our bugs were coming from this like idea of we could build our own markdown syntax in addition to everything else we were doing. But it was really cool. This idea of using your components in your markdown and essentially MDX, but the astro flavor of it. And then we realized MDX is actually pretty great. Let's just use MDX. So
Jack_Herrington:
MDX is the
Fred_Schott:
it was
Jack_Herrington:
rocks.
Fred_Schott:
kind of this like last minute, like ninth inning, just kind of a switch that we made, which was tough. But at the same time, like, We weren't offering a great experience either. So it was a kind of, you know, we had to choose the best of, of two, you know, not perfect options, but luckily MDX is a great community. So like since making that switch, it's actually been really nice. Like their dev tools is pretty okay. Their support for different, you know, they have a repo that they own and operate. So like any issues can kind of go through there. It's been really nice to collaborate with a worm on Twitter is named Titus and that ecosystem. So it's been a nice partnership kind of instead of us having to do everything ourselves, just. trying to work with more people.
Tj_Vantoll:
Yeah, I use MDX a lot
Jack_Herrington:
Mm-hmm.
Tj_Vantoll:
and it's powerful. It still is a little bit frustrating. Just like I feel like the tooling, it's an inherently hard problem. I feel like it's like Markdown that's also like this rich component model or what it's
Fred_Schott:
Yeah.
Tj_Vantoll:
going for. So it's like inherently a weird thing to solve for.
Fred_Schott:
Yeah.
Tj_Vantoll:
But I feel like it's also becoming more common too. I know. we use it extensively, so.
Fred_Schott:
Yeah, it's one of those things where it's like everyone needed an answer to this. And I think, I think the next team is actually trying to do their own version of MDX as well. So like everyone tries to solve it. Um,
Tj_Vantoll:
Yeah, yep.
Fred_Schott:
I think MDX definitely could be better. Um, but it's not bad. It's like, it's perfect for what we're trying to do. Like I think everything that I might disagree with as a design choice, it's. Okay. That's not how I would have done it, but like, okay, I'll, I can stomach this thing that isn't the perfect for, you know, I'm, I'm not that smart.
Tj_Vantoll:
Yeah, it's
Fred_Schott:
I'd rather
Tj_Vantoll:
it's
Fred_Schott:
use something with some ecosystem behind it.
Tj_Vantoll:
Yeah, it's the classic like, well, then even if it's not perfect people, it's like PHP, right? PHP is not perfect. But if I Google anything on PHP, I find that Doc site with the huge paragraphs and the comments and I'll at least
Fred_Schott:
Yep.
Tj_Vantoll:
be able to figure it out.
Fred_Schott:
Yep, exactly.
Jack_Herrington:
They're saying
Fred_Schott:
We
Jack_Herrington:
I-
Fred_Schott:
made one other mistake, which was to do our Aster support in dot MD, which means it meant compiling every dot MD file,
Jack_Herrington:
Mmm.
Fred_Schott:
whether you use components or not, like had to go through this whole chain of dependencies through our build pipeline, because who knows, there might be an Aster component in there. Yeah, we it took us a long time to get to this final story, but we're pretty happy.
Tj_Vantoll:
Fred, this has been great. Are there any things that we have not touched on? Any topics, any Astro features you'd wanna share, anything you want our audience to know about?
Fred_Schott:
Um, just that Astro is great for react. Um, it's something that we really care about. Um, yeah, we work with everyone. So it's kind of this idea of getting out there and just showing how great it can be for react, react dependencies, react ecosystem. Um, so let me come on like this has been, has been great. Um, I'd say our discord. So I always forget to do this. If anyone can go, if this has been exciting and you're still listening to the podcast, um, our repo is with Astro. You can Google get up Astro and you'll find it. Um, Give us a star, we're trying to get to 20K stars, we're trying to race to 20K with a couple other frameworks. We'd love any support anyone listening can give there.
Jack_Herrington:
Oh yeah, who are you racing against? I don't even
Fred_Schott:
Like for
Jack_Herrington:
know.
Fred_Schott:
some reason there's
Jack_Herrington:
Remove
Fred_Schott:
like a bunch
Jack_Herrington:
my star
Fred_Schott:
of frameworks
Jack_Herrington:
from.
Fred_Schott:
all very close and we want to be first. Remixes at 19k,
Jack_Herrington:
No.
Fred_Schott:
Redwood is coming up there, there's another one I'm forgetting. But yeah, obviously GitHub Star is the most important meaningless number ever.
Tj_Vantoll:
You,
Fred_Schott:
We want to be the best meaningless number.
Tj_Vantoll:
we'll give you the react roundup bump. Well,
Fred_Schott:
Yes, exactly.
Jack_Herrington:
Right.
Tj_Vantoll:
I just put in a star, so I mean,
Fred_Schott:
Nice.
Jack_Herrington:
Whoo!
Tj_Vantoll:
the numbers, it's looking
Jack_Herrington:
There
Tj_Vantoll:
up
Jack_Herrington:
it
Tj_Vantoll:
already.
Jack_Herrington:
is. Nice.
Fred_Schott:
More seriously, Astro.build is our website and Astro.build slash chat is our Discord. We do a super good job of just being around on Discord. We do events, we do a lot of our kind of development in the open. So we just published our roadmap for the rest of the year, which I won't spoil the surprise, but you can go there to find that. There's a lot of other cool stuff going on in that Discord.
Jack_Herrington:
You know, I gotta tell you, the DX on Astro is just sweet. It really is. I mean, it just works well and it's really nice. Yeah.
Fred_Schott:
Oh, thank you. It means a lot. Yeah, it's, it's, you'd be surprised in the early days, we were like, is anyone going to want to write this like.Astro component or are people just going to want to get into React as quickly as possible? And humbling experience to get here. But at the same time, we're starting to see more and more people like, you know, I grabbed this for React and I really only ended up writing like one or two React components. Like
Jack_Herrington:
Mm-hmm.
Fred_Schott:
the normal Astro component is like kind of all I need. It's got the styling. It feels like JSX. It's been really cool seeing people actually start to play with it now. And, and, you know, that. Not perfect, but seeing people fall in love with it has been really fun.
Tj_Vantoll:
a good time to move into our picks. So we pick just fun thing from our lives or from tech or from movies or whatever. And Jack, do you want to kick us off today?
Jack_Herrington:
Yeah, so I got a... well, okay, fine. We'll do cooking again.
Tj_Vantoll:
Hahaha.
Jack_Herrington:
Yeah, I got a new cookbook, pizza, the ultimate cookbook, which is kind of complements the pizza oven that we got a while back. And yeah, it's been really good. I tried out the 24 hour focaccia recipe and it came out, it came out very professional, which is kind of cool. I mean, very,
Tj_Vantoll:
Did
Jack_Herrington:
it
Tj_Vantoll:
wait,
Jack_Herrington:
felt
Tj_Vantoll:
did
Jack_Herrington:
like
Tj_Vantoll:
you say
Jack_Herrington:
it came
Tj_Vantoll:
24?
Jack_Herrington:
out.
Tj_Vantoll:
Did you say 24 hours?
Jack_Herrington:
Yeah, yeah, yeah. Well, you basically you do the dough and then you know, you let it sit in the fridge for 24 hours
Tj_Vantoll:
Oh,
Jack_Herrington:
until you
Tj_Vantoll:
okay.
Jack_Herrington:
use it the next day. And there's a 48 hour you think that's that's something there's 48 hour, you know, whatever. But
Tj_Vantoll:
Is
Jack_Herrington:
it
Tj_Vantoll:
it the
Jack_Herrington:
can't
Tj_Vantoll:
type of dough that determines the hours? Or
Jack_Herrington:
Um, it was, it's interesting. Having read through the book, there's like all kinds of stuff about like gastric stuff. It's like, you know, the longer you let it go
Tj_Vantoll:
Oh.
Jack_Herrington:
and the longer you let it prove, the better it is on your digestive system. I'm like, wow, I didn't know any of this. But apparently
Fred_Schott:
This
Jack_Herrington:
this
Fred_Schott:
is the
Jack_Herrington:
is a thing.
Fred_Schott:
ultimate pizza guide. This is, yeah,
Jack_Herrington:
It
Fred_Schott:
this
Jack_Herrington:
is.
Fred_Schott:
is what it's supposed to
Jack_Herrington:
It
Fred_Schott:
go into.
Jack_Herrington:
is huge,
Tj_Vantoll:
Yeah, this isn't...
Jack_Herrington:
by the way. It is the size of like older Franklin, Frank Herbert novels. I mean, it is big or Harry Potter novels. Fine. Whatever. You
Fred_Schott:
So
Jack_Herrington:
know,
Fred_Schott:
Jack,
Jack_Herrington:
it's big.
Fred_Schott:
I have a pizza oven also, and my problem is
Jack_Herrington:
Mmm. Mm-hmm.
Fred_Schott:
I'm always like, I want pizza tonight. And then it's like, well, you should have thought of that yesterday. It's like,
Tj_Vantoll:
Hehehehe...
Jack_Herrington:
Ahahahahahah!
Fred_Schott:
the prep time, I'm just
Tj_Vantoll:
Hehehehe...
Fred_Schott:
never
Tj_Vantoll:
Hehehehe...
Fred_Schott:
ahead of myself.
Jack_Herrington:
Well, you don't have to. I mean, you can always go. Yeah. If you if you know in the morning, you can still make a really nice, good tasting dough. I will say uni. I don't know if you have an uni or not, but the uni recipe list is great. And they have a beer dough, which is phenomenal. You basically just take a bunch, take a can of beer, throw it into some flour and some salt and bang, you're done. Basically. That's tasty. Very, very tasty.
Tj_Vantoll:
Awesome. My pick is not food related. I'm gonna
Jack_Herrington:
Yay!
Tj_Vantoll:
pick a podcast. I'll pick the Vergecast, which
Jack_Herrington:
Oh!
Tj_Vantoll:
has been my go-to. I like having a podcast that keeps me informed in just general tech stuff. So not any, they're not talking React or web development or anything like that, but it's iPhone reviews, laptop reviews, just news, what's going on in the tech world. And it's kind of my way of just keeping tabs on that sort of thing. And the hosts are really good. The show is really entertaining. It's like an hour each week, but it's a great way to just keep up to date on that sort of stuff.
Jack_Herrington:
That's cool.
Tj_Vantoll:
So that is my pick and Fred, what picks do you have for us?
Fred_Schott:
Um, I, this is a totally random one, but I just started watching this and finished it a couple nights ago over the garden wall. Has anyone seen that? Okay.
Tj_Vantoll:
I
Jack_Herrington:
No,
Tj_Vantoll:
have not,
Jack_Herrington:
I'm
Tj_Vantoll:
no.
Jack_Herrington:
wow.
Fred_Schott:
That's cause you're grownups and adults. It's a cartoon,
Jack_Herrington:
Oh, there
Tj_Vantoll:
I
Jack_Herrington:
you
Fred_Schott:
but
Jack_Herrington:
go.
Fred_Schott:
it is a kind of like a limited series that ran on Cartoon Network a while ago now. Very interesting animation style, very much like paying homage to like early animation, but it has this really like good sense of humor. It's you know, like 10, 10 minute episodes. You can actually get through it pretty quickly. Really like weirdly unexpectedly funny and touching story and from one or two of the early Adventure Time animators who are just an incredible team. So
Jack_Herrington:
Cool,
Tj_Vantoll:
Nice.
Jack_Herrington:
nice.
Fred_Schott:
I'm
Jack_Herrington:
That
Fred_Schott:
a grown up, I watched some cartoons, I laughed,
Jack_Herrington:
was
Fred_Schott:
I
Jack_Herrington:
fine.
Fred_Schott:
had a good time. Some
Jack_Herrington:
Yeah, my daughter's in the infinity train now. And
Fred_Schott:
oh yeah.
Jack_Herrington:
yeah, yeah, that's really good too. 20 minutes, you know. That's just
Fred_Schott:
That is what I
Jack_Herrington:
fairly
Fred_Schott:
think that came
Jack_Herrington:
intriguing
Fred_Schott:
out of the Adventure Time
Jack_Herrington:
watching.
Fred_Schott:
as well. There's this
Jack_Herrington:
Oh,
Fred_Schott:
one
Jack_Herrington:
that
Fred_Schott:
show
Jack_Herrington:
makes
Fred_Schott:
called
Jack_Herrington:
sense.
Fred_Schott:
Adventure Time that basically like every animation now came
Jack_Herrington:
Ha ha ha
Fred_Schott:
from that original team. It's wild.
Tj_Vantoll:
Hehehe
Fred_Schott:
Like nothing has had more influence on animation
Jack_Herrington:
That was
Fred_Schott:
in a
Jack_Herrington:
the
Fred_Schott:
while.
Jack_Herrington:
sourdough starter of
Fred_Schott:
Exactly.
Jack_Herrington:
animation.
Fred_Schott:
Exactly.
Jack_Herrington:
Adventure time. Yeah. Cool.
Tj_Vantoll:
Awesome. Well, Fred,
Jack_Herrington:
This has
Tj_Vantoll:
this
Jack_Herrington:
been
Tj_Vantoll:
has
Jack_Herrington:
great.
Tj_Vantoll:
been a lot of fun.
Jack_Herrington:
Yeah.
Tj_Vantoll:
My last question to you, people want to follow you, keep up with Astro, what are some good, like where should people follow you or follow Astro?
Fred_Schott:
Um, Twitter is always where we are causing trouble and making noise. So Fred K shot on Twitter and Astro dot build spelt out. So DOT build, um, are the two handles that we use and discord is Astro dot build the website, so actually use a period slash chat. Um, and that's where we're mainly hanging out when we're not posting on
Jack_Herrington:
You guys are a fun
Fred_Schott:
Twitter.
Jack_Herrington:
follow on Twitter, for sure. Hahahaha
Fred_Schott:
Yeah, we're trying to figure it out. You know, there's like. For the last 12 months, it's just gonna silent, you know, every two months we'll just do like a new change log Try to have a bit more fun with it. So
Jack_Herrington:
Yeah,
Fred_Schott:
we'll see how that goes
Jack_Herrington:
exactly. Yeah, well, and I guess I think we're missing out. We need to let folks know about our discord and had to show up there and talk with us on the React Roundup Discord. Let us know how we did and yeah, give us feedback.
Tj_Vantoll:
Yeah, let us know if you're using Astro.
Jack_Herrington:
Oh absolutely, yes please.
Fred_Schott:
What's the, how do I find it? I will literally join it right now.
Jack_Herrington:
Oh wow, look at you!
Tj_Vantoll:
It is go to our website. We should have this faster. We didn't expect the, uh,
Fred_Schott:
Well, this was kind of, I was kind of trying to feed you a plug, but...
Jack_Herrington:
Oh, yeah. Well, you know, I mean, we need to
Fred_Schott:
People
Jack_Herrington:
start
Fred_Schott:
will
Jack_Herrington:
it.
Fred_Schott:
find it, I guess
Jack_Herrington:
Yeah,
Fred_Schott:
is
Jack_Herrington:
exactly.
Fred_Schott:
the thinking.
Jack_Herrington:
No,
Fred_Schott:
Okay,
Jack_Herrington:
it'll be in the show notes for sure.
Tj_Vantoll:
It'll be in the show notes.
Fred_Schott:
cool.
Tj_Vantoll:
I don't have it handy. You scroll down in whatever player
Jack_Herrington:
Hahahaha
Tj_Vantoll:
you're in, find the link that says Discord and click it. That's
Fred_Schott:
I'll be there.
Tj_Vantoll:
the place to go.
Jack_Herrington:
There you go.
Tj_Vantoll:
Cool, well
Jack_Herrington:
Awesome.
Tj_Vantoll:
thanks again, Fred. This is a lot of fun.
Fred_Schott:
Yeah, thanks for having me on.
Jack_Herrington:
Thanks, Fred.
Tj_Vantoll:
Cool. See everybody next week.