Why Astro Is Winning Developers Over with Sagi Carmel - JSJ 697 - JavaScript Jabber

Episode Transcript
Available transcripts are automatically generated. Complete accuracy is not guaranteed.
Speaker 1 (00:05):
Hey folks, Welcome back to another episode of JavaScript Jabber.
This week looks like I am the host this week.
We usually have a few people, but Steve had something
come up. I think Dan might be traveling, and so
it's me today, Charles max Wood from Top End Devs,
and I have a special guest. This is Sagie Carmel

(00:29):
coming to us from the other side of the world. Sagie,
do you want to let people know who you are
where they might have heard of you?

Speaker 2 (00:38):
Sure, no problem. My name is Segie. I'm thirty years old.
I started developing since seventh grade and then never stopped.
I did thirteenth grade, which is funny thing that you
have in Israel. You can have a specific thirteenth grade
about only development. And then I work for the idea
and the idea if I did programming as well, worked

(00:58):
on some small start up the company companies, and then
now I'm starting again one of my own after being
in a startup company again while trying a variety of technologies,
and generally people would know me from either conferences, small
conferences or meetups that I'm usually trying to attend for
having intending in Israel. And also it's like on YouTube

(01:20):
and some other social media platforms.

Speaker 1 (01:25):
Cool. Okay, So yeah, so today we're talking about ASTRO,
and I know we've talked about it before, but I
think it's been a while. Are there things that are
new at astro or.

Speaker 2 (01:40):
So inherently server server actions, just like next chance, which
is a new feature that was added to as fairly recently.
I genuinely I don't like using it. But one of
the features that I am that is fairly new and
I'm using it quite often is the way that environment

(02:00):
variables are passed to astro. It now allows for we
can add you can go to the astro config dot
js or NJS and then write your environment variables over
there and assigning it to right there. Now it's a
secrets it's a client or service side, and then after
running a small sink, you can import those directly because

(02:22):
the code without doing process dot en or import or
import dot meta. So just allow us to fairly structures
side of code. Then if it doesn't exist, it just
pops an error, which is amazing.

Speaker 1 (02:37):
Gotcha. So yeah, maybe we should just get into the
fundamentals here real quick and just talk about what astro
is and what the difference is between that and maybe
some of the other things that people have used.

Speaker 2 (02:53):
All right, So Astrojas is a service side rendering framework,
just like next js remix next or or when was
that nuts and one else's vel kit. So all those
frameworks are flavored to a certain type of front and
front library. So it's either you get remixed for React

(03:14):
and just for React, and you might get nuxt for
view and s vel Kit for svelt. With the Astrogs,
it's like a service side agnostic framework which does allow
you to incorporate any kind of client side library into
it and make components that could be rendered in the
server or in the client. So if you feel like,

(03:36):
if you feel very creative, you can take your team
and just like say, okay, let's just figure out which
front end library we like the most and even develop
multiple components in multiple different libraries and see what works
for you. So that's a really cool thing about astrogs
that allows you this freedom. I don't recommend having multiple
multiple components in the same multiple front and frameworks in

(03:58):
the same project, but it's sure fun if you're trying
to figure out what's your team So it allows it
and it's amazing.

Speaker 1 (04:08):
So I guess one thing that I'm wondering just diving
into this, right because you know, I've played a little
bit with next I've done some stuff with some of
the others as well. They kind of have this cohesive
idea where everything. I haven't used next JS since they
did server side components, so I don't know how that

(04:30):
all plays, But.

Speaker 2 (04:33):
What did you So I'm curious, what do you use?
What if if you need to run it?

Speaker 1 (04:38):
So my full time job, I work in Ruby. Actually
I'm so so you know, I can't reach for a
jackal or something like that for my, uh, server side stuff,
and then if I need client side stuff, then I'll
just I'll just import something into the front end. But
a lot of times I'm doing rails and so it

(04:59):
you know, it does a back end process and a
front end process, and you know they're different because the
back ends rails in the front end something else. A
lot of times that's hot wire stimulus. But yeah, when
I'm fiddling with something like an next JS, they kind
of have a cohesive way of managing stuff right where

(05:19):
it's like, hey, you kind of do it the next
JS way and it just kind of works and it
sounds like Astro the way that works, and if I
remember right, they've got islands and so you can say
this island does this and this island does that, and
so you can kind of mix and match. So are
their best practices for astro kind of above and beyond
the isolate your pieces or.

Speaker 2 (05:43):
Generally generally not. But that's simplicity to what makes it beautiful.
So let me give you. Let me give you an example.
So in next JAS where you could have rendered service
side component inside clients component, inside server components and sye
side components. That makes this entire ordeal of tracking what

(06:04):
everything in what each file is doing is very complex,
very complexed. It's like just like inside each other. It's
very not understandable.

Speaker 1 (06:14):
Well, I've heard that complaint from React developers just in
general is yeah, you start mixing your server components with
your front end components. In ay, it's not always straightforward
what's going to do what?

Speaker 2 (06:28):
This is very very common and one of the issues
that it suffers from the if for those who did
use nextjs are normally using server actions and then try
to revalidate the information for front end. It needs to
be pretty, it needs to be beautiful, and most of
the issues about revalidation that it just doing the hydration

(06:53):
in its own way. So hydration that is done using
NEXTJS with the revalidation from the service side. Rendering component
must do like a full like swamp of the page,
but it doesn't let you opt in about how you
should do it unless you're doing partial partial pages rendering.
So it's very convoluted and there are many ways. If
you ever saw the docks. If you've ever seen the docks,

(07:14):
those docks are amazing, but like they contain a lot
of information for nested routes and grouping routes and to
have partial rendering and in astral it just like very simple.
Just like if you want to opt out and let
a server component like wait a bit and finish and
then hydrate, you just write server colon deferre on the

(07:37):
component and then what it does that it just hold
the request and just keep this spot with any loading
component that you choose, and then when it's ready, it
just swamps it back. But just learning it for this
specific island. So it's very simple and it's amazing and
the fact that you're just staying in the jobscript ecosystem

(07:59):
allows you to also pass and split code accordingly. So okay,
if you don't want any just I'm just hijacking. This
final question is for something.

Speaker 1 (08:10):
No, you're fine, but let me just make sure that
I understand it. So essentially, what you're saying is is
that if I have a server component that you know,
I need to wait for it to you know, do
something or render something or things like that. ASTRO gives
me a way of kind of controlling the hydration and

(08:31):
rendering cycles so that I don't get lost in kind
of the middle of the Oh. Well, you know, this
is a web front end component versus you know that
has a server component has another thing, and so you know,
I can tell it, hey, just render when you're done,
or you know, hey, you're you're you know, I want

(08:51):
you to manage the life cycle in this way.

Speaker 2 (08:54):
That's that's very correct, And I only talked about sever
de third, which is allowing to server components to be
rendered later. But you can also have client client load
that is being loaded with criterias. For example, for those
who use native HTML, they might be aware that you
can load CSS based on the width of the screen.

(09:18):
So it's immediate story that allows you to load styles
based on the screen to you know, just saves like resources.
You can also do the same thing with astro and
components that they're are rendered in the client side. So
we just talked about severybody for for server components, but clients,
but client components also have their own like ecosystem and

(09:38):
support that works amazing behind the scene and just just works.
And it's clear what it's made. It's not the components.
It's not the responsibility of the component to decide whether
or not it's server or clients. It's whoever calls it
makes the decision. To me, just like under all logical reasoning,

(09:58):
it just makes sense, you know, just sleep.

Speaker 1 (10:00):
Yeah. So so I guess the other question that I
have is what what problems does this solve other than
just you know, kind of knowing you know what's doing
what and when and how and why. You know, it's
one thing to talk about kind of the nitty gritty
of Okay, you know this is going to render at

(10:22):
this time in this way and things like that, but
you know, ultimately usually what we're talking about is user experience, right,
And so the reason I do any of this stuff
is because it either makes my life easier to keep
track of what's going on, or it makes the user
experience easier. So does this solve one problem more than
the other.

Speaker 2 (10:42):
You're talking about the developer experience or the user experience.
I for this specific instance, sounds like you're talking about
the developer experience.

Speaker 1 (10:49):
It could be either one. I guess what I'm saying
is sometimes you do this for user experience right where
it's like, hey, you know, we just render the whole
thing when it's done, instead of hey, you kind of
order rendered, but you're still waiting on this other thing
to render and then it finally renders, and then okay,
you know it's still you know, waiting for something else,
or there's something else you know, and another component that's

(11:09):
gonna you know, it's going to hook into this component
and change things, and and so you know, it sounds
like what Astro's doing is is giving you a good
way to manage a lot of that life cycle and
that that work that flow, you know, whether it's data
or you know, visual components or other things. And so
some of that a lot of times is just down

(11:31):
to it's nice for the user if it just kind
of loads all at once or loads in the right way,
or things like that. And for some of this, though,
when you're talking about, hey, you've gotten tested server components
and for on end components, some of that it sounds
like it just makes it easier for the developer to
track and debug when things are working. So I guess

(11:51):
what I'm driving at is where where do the benefits
usually come in. Is it more developer experience thing or
is it more of a use or experience And when
when do you start making the decision to make these
trade offs.

Speaker 2 (12:05):
So I'll break it down from the beginning. Astro is mainly,
surprisingly enough, the initial intention of astro to be a
content er than framework. So when you when you ever
you're creating blogs, this should be this should be. And
I'm not like I'm obviously biased here, but I'm saying

(12:26):
that to everyone. If you ever wanted to create a blog,
astro jas just provide the best integrations and the best
things to get the blog going. And it's just service
side components with pages and routing the sense most of
it will be translated to HTML, CSS and JavaScript. If

(12:46):
you're doing fine side some client side, then this is
your go to framework. And what makes it so great
obviously that if you just if you don't need the
service side rendering. You want to create static, static apps,
it will just do it. So that's the first thing
that you want to think about when you're trying to
choose Astro. Let's just say, but you want to create
a more complex application with like off and logins and

(13:10):
so one, you need service any So in this instance,
the reason where astro shines is both its usages of
is integration from the developers experience using CSS and obviously
it's speed working to using the Turbo engine behind the scenes.
So it just works amazingly and like many benchmarks has

(13:31):
been done to compare between many frameworks, and astrog just
tends to come on top. It's just because it's so
fast both from build time and obviously showing it because
it's then translate all the code into native no JS code,
it obviously has its own functionality behind it. So it
allows you to both have an amazing developer experience and

(13:53):
an amazing user experience. The issue where it lacks is
currently popularity doesn't community, it just lasts popularity, so the
difference between the two. So it's like I can go
into discord. There is an AI bot that helps me
and a fiber community that helps me with whatever I need.
That masking there usually get a response ten like lie

(14:15):
from a person or a few seconds they using an
AI and that's like where usually it lacks. So this
is one of the disadvantages of why Astro is Like
maybe you're thinking about it, you're not sure, but it's
like Astrogas is kind of lacking on popularity. So when
a person comes to me, he says, well, I don't
know what Astro is, so they most likely won't pick

(14:37):
it because they don't know. But after they do, it's
like I never looked back after choosing Astra from from
my projects.

Speaker 1 (14:47):
Gotcha? Okay, So let's say that I want to get
started with Astro. Then it's like, okay, you know what
you know Soggy, He's smart. He convinced me. He you know,
I'm going to go do this right? So where do
I go from there?

Speaker 2 (15:03):
So the Astra documentation is an amazing place to start.
Normally speaking, that will just tell you you, look, you
need to have like a PNPM or NPM and just
run the CLI. Just like you're starting VAT as a
project or you're starting an HS. They have their own CLO.
Just starting a project, they ask you what template do
you want? Like is that a blog? Is it a

(15:24):
starting side rendering? You just start from there. It just
plops out a template with a basic Astra website. You
sort of fiddling around. It's just like, oh, it's very clear.
This components has this logect. It looks like this, and
it has its own styling and it's favorite. But that's
where you start, and then you can move forward to
whatever your project needs. If you want to move to

(15:46):
more or interaction oriented websites, then you go on and
install the integration with React, viewers, vellop or even not
even just that. You have quick, you have solid, you
have like you have every and then like the world
is your oyster.

Speaker 1 (16:05):
Right, So I guess the other thing that I'm wondering
then is we dive in is how does astro then
interact with React or view or whatever? Right.

Speaker 2 (16:19):
I don't know how they created their adapter, but essentially
you're downloading the React package, but you're also downloading an
adapter for Astro JS. And just like VT where you
can assign integrations to a project like tailwind CSS for
a very used React with with Tailwind knows that the
vat configuration needs to get tail in CSS, which Astro

(16:41):
also supports, and then like it does the same thing
for reacting, and then you just tweet it like a
React act. But once you need to use it in
an Astra component, because you probably will have to, then
you need to either decide if it's a client, if
it's a client component or a server component, and then
you add the client colon low directive which love tails it.

(17:02):
These components now need to have the clind tight interactivity.

Speaker 1 (17:06):
Okay, that makes sense. So you know this is this
goes back to what you were talking about before, where
you know, now it's working with life cycle and you
know all of the other pieces. You have an adapter
there that manages all that and so it it's not
just kind of this, Hey, here's a rapper and we're gonna,
you know, do black magic to make it work. It

(17:27):
actually it knows about React and it knows how React works.
And so at the end, at the end of the day,
in that island, it says, Okay, then this is the
way that I'm going to hook in and manage React
and allow React to do its work exactly. You got it. Yeah,
that makes a lot of sense.

Speaker 2 (17:46):
So it does, right, It doesn't should be that simple.

Speaker 1 (17:52):
So I guess the other question I have is I
hear some people basically say, well, I like Astro because
it lets me use more than one framework, and that
sounds like a headache to me, to.

Speaker 2 (18:01):
Be honest, that's generally.

Speaker 1 (18:04):
That now I have to learn two frameworks plus how
Astro works. And I guess the flip side of the
argument is, well, if I use NEXTGS and I only
have to really know React plus whatever next ads. So
so when should I be reaching for the Hey, I've

(18:26):
got a lower learning curve in next JAS versus I've
got you know, whatever niceties that Astro gives me. Versus Hey,
I've kind of got sources from all kinds of stuff,
and so I I have some Angular stuff and some
React stuff, and so I'm gonna oh, so first, why
do you make that decision?

Speaker 2 (18:47):
So normally speaking, people would I'll separate between those who
knows React and those who don't React, because there is
a small distinction needs to be made. So if you
know React, knowing XJS is pretty simple. The only thing
you need to take control control on is when it's
a server component or what you can and can do

(19:09):
it within a server component and when it's a client component,
and what you can and can do in a client combone.
We start from that. The second thing is if you know,
if you know React, the Astro writing style very similar
to how you write and reacts. It's a jsex style,
but it's not exactly JSX, And I'll explain the distinction

(19:30):
in JSX because well, it's a React framework used to
based on React, and React used to be a front
end library. So if you wanted to write, for example, class,
which is the htmil director for class in CSS, then
you would write class name. The reason behind the reason

(19:52):
behind this is because well, you cannot write the keyword class.

Speaker 1 (19:56):
And React JavaScript so you can't ye because.

Speaker 2 (20:00):
Word in jalousy opted out for a class name. But
in astral you can write class. And the reason is
because it's service side component. It trenders into server and
you're writing like it's very similar. It's a better version
of JSX because you can write class, but you're getting
a raw htmail output from that, and essentially it just

(20:23):
doesn't do any interpolation. However, if you want to do
like let's just say map between an information to components
using htmail what that you normally do is you would
tweet it like React, but you won't write a key
equals to I or something because again you're not running
it in the client. It's javascripted runs in the server,

(20:47):
so when so this is the first operation. So if
you know React, knowing how astral works, it's just amazing.
You just need to get used to the concept that
Astra components are servers side rendered and should mostly. I
never create a client side server a client side component
for Astro, but Astra components should normally and always be

(21:11):
service side. So you don't write so for whoever you
used to write on click on components now it doesn't
work with Astro components because they intended to be on
service now those for no who knows React is amazing.
If you don't know React, generally still using Astro and
understanding of JSX components, it's still simple. Know in JSX

(21:33):
it's not the React framework. You're learning to write code
that maps to HTML in the end, even if you
don't know the JSX style, can still map code that
renders to HTML in the end using the HTML template,
the basic HTML template, and again it should be very
clear of how you do it. It so that answers

(21:55):
both of those questions. So if you do or you don't,
just please try. And I'm pretty sure that you would
like using it without the JSEX syntax if you're not
familiar with it, or with the JX syntax if you are.

Speaker 1 (22:12):
All right, So yeah, I mean I think I'm getting
the picture here. So what kinds of things do people
build with astro or what kinds of things should people
reach for Astro over something like next JSS.

Speaker 2 (22:27):
So again, I use my Astro is my Swiss army knife.
So just like it creates everything from locks to more
interactive websites. And I didn't see any reasons why to
use next JS more than I would like to use Astro.
The main issues that I haves that your vendor locked,

(22:50):
which is one of the most complaints that I hear
about next JS. It's just like you're locked to using
self to fully enjoy all the capabilities of next gess,
which is feels like a cheap move against against developers.
Give me a framework that is open source and allows
me to do whatever I want. Why do I need
to be vendor locked? And I don't really see a

(23:12):
reason why not to use next JS. Unless you have
a really complex, insanely complex website, and the scale might
be something that asked for won't reach, though I think
it would reach. I really don't see a reason why
not to use astro versus nextgs.

Speaker 1 (23:31):
Okay, it sounds like they kind of operate in a
lot of the same space, right they Yeah, they give
you solutions to a lot of the same problems. So
what have you built with astro then?

Speaker 2 (23:47):
So I've created the census for for the CBS, for
censuses for whoever doesn't know. So, census is like a
way that you can gather information about population or everything
that the government wants the people to know, the growth
rate of population within regions or whatever. So I've created

(24:07):
the website that does it within Israel, which is a
census CBS col for whoever is outside of Israel won't
be able to get it. You probably will need a VPN.
But this is the website that I've created. It's very static,
and most of it and most of the same interactivity
was done using CSS, which is another topic that I
haven't really talked about, but it's really important for understanding

(24:30):
why why service side is slightly superior than client site
and we'll get to it. But so I used created
this website which is mostly service side interactivity with the
smidge of client site that I've gotten from connecting the
graphs using Luker, which is a Google product with big Query.

(24:54):
So that's why.

Speaker 1 (24:56):
So this is the official census site for Israel initial.

Speaker 2 (25:00):
God Census, the CBS. It's like the Census Bureau Statistic
CBS something like that.

Speaker 1 (25:08):
Right, So you you said, I want to dig into this.
So you said that a lot of the what animation
was done with CSS, and that was important for how
you're using astro, So you want to explain that.

Speaker 2 (25:28):
So, yes, I would love that. I love it. So
in CSS. Normally people people from a back end experience,
tend to underestimate the CSS. But CSS gives you a
lot of power to do many of what fun and
libraries gives to you. But it does it for free.

(25:49):
So we'll start for animations. Animations you pretty much.

Speaker 1 (25:52):
Get Hang on, I'm going to back you up for
a second, because it doesn't do it for free, but
you don't have to write code. You don't have to
write as much code in JavaScript.

Speaker 2 (26:04):
What do you mean it doesn't do it for free?

Speaker 1 (26:06):
So so CSS has it built in, right, and so
you usually have some style and some of the style
is animate for this long in this way. And I
think what you mean by for free is that beyond that,
you don't really have to do any extra work, right,
you don't have to you don't have to write out

(26:28):
the animation in JavaScript, you don't have to tell it
how to do the transition or anything like that. All
of that stuff's just built into your CSS. And the
other part for free is that the CSS is really
really highly optimized to just work without a lot of
computing overhead, whereas doing it in JavaScript is I mean,

(26:50):
I've seen stuff done in JavaScript that doesn't cost you
a lot in your computing computing resources, but the CSS
is already optimized and does it way more efficiently. Yes,
So I just don't want people thinking it's just you know, automatic,
It feels that way, but yeah, I get it.

Speaker 2 (27:09):
So I'll advert So what I'm saying for free in
this instance is what I'm saying is that for I'll
be explicit about this. So most of the animations needed
to be to most of them, not all, but most
of the animation needed to be to create it to
be created are very simple like you however, like a click,
like a target, like like shaders, like shading behind an element,

(27:33):
so on and so forth. Most of these animations, including scaling,
it's just like you. You get it for CSS and
when I mean, now for free'z just like it's easy,
it's clear and yeah, and like you, you, once you
get into it, you pretty much gathered like most of
the animation needed. Now, sometimes if you need something more complex,

(27:55):
like I just say a confetti, or you want to
have like a more like three animations, whatever, then you
then normally writing it in CSS, though is possible is
not really reasonable, then then you opt out to JavaScript.
And why I'm recommending CSS within astro because there are

(28:17):
front end I'm sorry about it, but there are seven
ways to load CSS into front end, which is external styling,
global styling, module styling, tailwind or any other one of
those tailwind and you have like what it was it
seven and astro you have, you would you probably mostly

(28:38):
used one, which is scope styling. So scope styling essentially
when you create an ASTRO component, it allows you to
create the styling which is being used only for that component.
So let's just say I have a class named button,
so this class that I've created for the button will
only be used for that button. And if I have

(28:58):
a class different player and that does something different, it
just like it's completely separate and it behaves and behaves
like it looks whatever you've decided to be looked. So
so that's what I'm saying with CSS, and now that
you have more exvanced selectors, like for example, the has selector,
which is incredibly popular and thank god it was created,

(29:21):
you would also have the starting style. Do you know,
by the way, for those who doesn't know, starting style
is as a new CSS I would say, I forget
what's the name. It's a query. So when a component
is being rendered to the screen, it creates the animation
from the start of it. So for example, if you're

(29:44):
hiding something and you're showing it using a display, it
would just show up. It will just show up constantly.
And what I'm saying is it's being done for feit
just like people like you would have used like a
bunch of JavaScript to make the animation happens when it's
being loaded, But now you get it for free using
CSS and you don't have to worry about this. This

(30:06):
is what essentially went.

Speaker 1 (30:10):
Yeah, yeah, that makes sense. So so yeah, so you've
got the scope styling, and that's the power that you're
getting as far as CSS goes from your from using
astro right, because then you can say, hey, stuff in
here animates this way. You know, stuff in here hover

(30:32):
it's hover states react in this way, and I can
I can have that same kind of thing. I didn't
like your button example, because usually you want all your
buttons to look more or less the same. But yeah, okay,
well button, a lot of your other Yeah, what you're
talking about here is okay, you know, maybe I have
a menu component and so you know the dropdowns or whatever. Right,

(30:53):
if I hover there, the hover states are going to
be unique to that component. But then if I have
I don't know, graph or a chart and I hover
over a particular data point, then that's going to show
things up differently. Right. It might give me the numbers
and a little box and things like that, but I
don't want it to pop in in the same way
that the menu does. And so you know, I can

(31:17):
set the specific cover states. And sure you can do
that by you know, giving it a class and then
you know, doing a bunch of other wrangling. But if
you've got it scope to just that component and you
know that, okay, any chart component's going to have hover
states and animation states and click states this way, then

(31:37):
then you know that you've got everything kind of set
up that way and you don't have to worry about, Okay,
is this going to bleed over to something else because
it's all scope to just that kind of a component.

Speaker 2 (31:47):
Amazing, you got it.

Speaker 1 (31:50):
Yeah, that's cool. I think I've seen this in other frameworks,
but they wind up doing some of the other CSS
magic to make it work.

Speaker 2 (31:59):
Yeah, and I'm happy that Astra has it. It also
has some cheat sheets which with some shortcuts. So for example,
if you're creating a class. Normally, in order to create
a class and condition whether or not a class would
exist on a component, but just say we're talked about
all the service side rendering and not talking about the

(32:19):
land side, you would have to be like doing string
interpolation over the class. Like usually we would have a
class which is class A, class B, class C, and
you have space between. Right when using Astro, there is
something that is called class list which allows you to
pass on on the rate which is containing all the
name and allows you to condition whether or not a

(32:39):
name of a class would exist, whether or not if
if you condition, it would just say active call on
something that is brilliant, and if it's true, it would
be inserted to as a name of a class, and
if it isn't, it will just it will just disappear.
And it's just like it's a nice shortcut for managing
your components.

Speaker 1 (32:59):
Yeah, I've seen that in some of the things that
I've like, I've I've gotten HTML templates that have ASTRO
in them, and I've seen those directives so.

Speaker 2 (33:09):
Amazing. The next thing what they'll be interesting about is
also the specific one that I've created. I also use HTMX.
I'm not sure if it's within the scope of this conversation,
but if you're curious to hear about this and why
did I use HTMX, I'll be more than happy to do.

Speaker 1 (33:28):
Well. Yeah, I mean it is interesting. We've had Carson
Gross on the podcast talking about HTMX and it's a
it's a tool, or it's almost a patternal anyway, but
it's it's a really handy way of managing a lot
of your state and things like that, and it seems

(33:49):
like with ASTRO it would play pretty nicely because again
you've got these pockets of functionality right that you're managing
as islands, and so HTMX it doesn't think of it
quite that way, but I could see how you could.
You can make a mesh.

Speaker 2 (34:08):
Yes, So about the integration between HTMX and ASPER, it
pretty much nailed the differences that like HTMX would normally
need you to return an HTML template which you can
create using astro. You can create the estra the HTML temple,
just return them so and then it will just swap
them directly into the client to whatever side that you need.

(34:30):
And so you don't even need the client side of
like fiber b for the simplistic stuff, because you would
have HTMX doing all the swapping together with ASTRO. So
ASTRO will hold the state using the database and would
vendor the HTML and HMX will just swap it where
it's needed based on the interaction.

Speaker 1 (34:53):
Yeah, we do something similar with RAILS and Turbo. It's
amazing and so yeah, and it's the same idea, right,
It's like hey, you know, uh, you know, replace or
insert after insert before whatever, right, and you just throw
some HTML back and so RAILS renders the HTML with
the data from the database and yeah, puts it into
the page based on what you're telling it, following the

(35:17):
conventions in Turbo, and I know HTMX basically works the
same way exactly.

Speaker 2 (35:23):
And one last thing that it's important to mention and
why I recommend using astro and why it is so
fun to use astro, which is like a JavaScript both
the front and the back, which is the inherent part
at about code splitting. So let me give you an example.
I'll just say I've created an ID for a component, right,

(35:44):
And let's just say I've created this ID, and I
need this ID to be used in a service side
component and in a client side component. Usually passing those
between the client side and the service side would be
le'll just say headache, especially if you're I mean you're
from Ruby on rails, like do you know how to pass?
Like I just I need this ID and the client
side whateveration because those are two completely different languages. But

(36:06):
in astray it's both on the same. So I create
a constant ideas file and my in the idea is
being shared to the service side components and to the
client side components, so it's will duplicate it to the
server and the client and just being used and it's
interlace and it's amazing.

Speaker 1 (36:26):
That's cool.

Speaker 2 (36:27):
Yeah.

Speaker 1 (36:29):
So I'm a little curious because I think we're kind
of talking around some of the fundamentals of ASTRO and
you know, some of the you know, more common use cases.
Where where do you get more advanced with ASTRO? Where
where do you get into features that I guess maybe
aren't as simple or common but are still powerful.

Speaker 2 (36:53):
Can you give me an example.

Speaker 1 (36:56):
I don't know.

Speaker 2 (36:58):
What will be let's just let's flip the script. What
will be an advance? So what would you consider the
advanced when you're writing rubion rails with whatever front end
frameworks to your front and library with your decision.

Speaker 1 (37:11):
What I mean, usually you're getting into, you know, more
of I guess the optimization stuff, you know, where it's hey,
you know, I'm optimizing the way I access my database,
or you know, maybe I have some really really complicated behaviors.
But I know people generally solve a lot of that

(37:32):
with something like React.

Speaker 2 (37:35):
Wait, you're saying that accessing the database, they're solving it
using React by you No.

Speaker 1 (37:40):
No, No, really complicated interactions on the front end you
handle with React.

Speaker 2 (37:45):
So amazing. If you need complicated interaction. You could just
opt into React and God bless you. Yeah, so it's
just like you have it all like from side to side.
You need the complex stuff you can install, even like
front the libraries like material Lui, schatsy and has a
right integration with aastro Okay, get it for free. You

(38:06):
want something with more tailin do you have flow bite
and obviously and it just works.

Speaker 1 (38:13):
Makes sense. So are there optimizations you need to make
on the back end as far as you know database
or the way you do your queries or things like
that if you're pulling from a data source.

Speaker 2 (38:25):
So normally it would be I wouldn't have an issue
with generally pulling information from the database because again you're
just writing typescript as like back end. It's just like
the difference is that and what that I'm usually trying
to tell to whomever I've worked with on the components.
It's just like not to write the exact queries within
the components. So I would rather have like an entities

(38:48):
file than those entities file you managed like the functions
like getting get all creator and that and then you
call them using the astro component. Not because I'm afraid
of any sort of leakage of the information. But because
I mean like because of how ASTRA works, which is
some people might argue that it is the disadvantage. So

(39:09):
ASPRA is the component of aspro is inherently divided to two,
the logic and the template of the HTML. So you
must either I think you return a response to to
return something else except the HTML template, or you will
let the HTML template decide on whatever it works, right,
So you need to have the logic finish. Most of

(39:32):
the time, you need to have the logic finish. So
that means they can condition is that early bailout which
is something so that they think of early bailt is
like write it if and then return. This might not work.
This might not work because you need to return a component,
so you will write a wrapper around it. It's just
like it's very inconvenient. It's not. It's not convenient to
write it within the ASTRA component. So that's the only

(39:55):
thing which is not that bad all things consider. But
it's just like things to know, just don't write your
selects and inserts and whatever within the astro component. Was
just create a function and then manage.

Speaker 1 (40:08):
Yeah, that's common practice. I've seen with most back end systems,
right you have, Yeah, you've segregated your logic so that
your database access layer is separate from your rendering logic.

Speaker 2 (40:21):
Yeah. What will be another interesting thing to talk about,
which are slots. So if if you don't want I
mean so, in React, normally you would have in order
to pass on, would you say the aid of the
JSX to the next component and to renderative components, you

(40:44):
would have children. So the children components will be whatever
you Let's just say I've created a menu, which is
a component that I've created, and then I will have
like the list of whatever I needs to have inside them.
In so you would have children component within the within
the minu, the definition of the menu would have the
children component. In Astro, you would have slots. And slot

(41:07):
is is an HTML element that a lot of people
don't don't know that exists. That there is a template
HTML attribute, the tag and the slot which are both
like official but the slot, the spot template or the
spot tag allows you to insert components just like a
children would. So what's the difference. Normally The difference would

(41:30):
be that you can give slot's name, So by giving
them name, you can also tell to the parent, Okay.
The parent can say to the kid, okay, I want
this in the spot named the header, I want this
in this in the nameless slot, which is the children,
and I want this in the footer. So normally you
can What did I do with my styling is that

(41:50):
I would have the component, the outer component designed the
entire layout and then the and then inject the inner
components where they need to be fit. What did you
get is an extremely amazing experience that you know that
layup is outside. The father decides on the layouts, and
the components themselves decided on the functionality of themselves. And

(42:14):
this is like, this is one of those things that
it's just very convenient. And I don't know how people
manage without my cashwall. Usually they pass it by the
props and it's just like it looks kind of ugly.

Speaker 1 (42:24):
Yeah, I've seen that, and yeah it gets a little
bit hairy. I've used other component libraries that yeah, you
can basically say, hey, these are the things that go
in the different slots. So Ruby on rails has a
view component library that you know does all the service rendering,

(42:45):
and yeah, you can give it slots and then you
can give it other components to stick in those slots.

Speaker 2 (42:49):
Amazing and view transition. Have you ever heard of hue transition?

Speaker 1 (42:58):
I think I might have heard of it, but I
don't know what it is.

Speaker 2 (43:01):
So the view transition inherently essentially created using it's a
standard web thing which allows you to move between websites
without having a front and library, and it allows you
to fade between pages, so you can, if you want,

(43:23):
us a client site feel feel to something without like
looking at the at the indicator that says that it's
doting when it's trying to move between component A too
component B, or between page A to page B. You
can in astro they give you like a nice, a
nice addition to it, but it's just like you write,
you add the view the view transition, and and then

(43:46):
you like you want to move between page A too,
pah B, just press on the link and you don't
get any indication from the server that it's doted, but
it will be instead faded nicely from one page to another,
which is you can do it also on Ruby Advance.
It's just like it's a website.

Speaker 1 (44:03):
Yeah, yeah, yeah, there are a number of I think
HTMX allows you to do something similar as well, yes,
where you know, you just allows you to yeah, and
so effectively, what you're doing is it's like, okay, I
click the link to load a different page on the
same website, and so it intelligently says, okay, what changed, right,

(44:24):
And then.

Speaker 2 (44:24):
There is a few differences though there's a few difference
So view transition not only that, it does also the
fading between the pages, which HTMX won't unless you explicitly
create animations you CSS.

Speaker 1 (44:38):
So this does it with an animation.

Speaker 2 (44:41):
Not only that, it also allows you to persist certain
elements when you move between pages. Okay, so I'm Fireship
created a video about it way back, which is when
you press the button, a certain element moved from the
center of the page to the top five. But if
r L and the page itself change between page A

(45:05):
to page B and it went through the server, right,
So you pusition is slightly more advanced animation and gives
you like a really client side feel And normally you
would have to do like jump through hoops to create
this animation, and you're sort of getting.

Speaker 1 (45:21):
It for free. Yeah. Yeah, I like that because you know,
and that's that's the kind of UX that's nice, is that,
you know, it's like, hey, now what you had it,
you know, and now it looks like this instead of
what you started with. Exactly super cool. Well, we're kind

(45:43):
of getting a little bit toward the end of time.
If people want to learn more about you or about Astro,
what are the best resources out.

Speaker 2 (45:52):
I mean, I'm just trying to every once in a
while topload to YouTube, maybe post on LinkedIn, but those
two places I'm trying to be I'll try to be
more mindful about it. But this is where I'm currently at.
Until I become an official, official public speaker about Astro,
I wanted to one day just talk about Astra freely and.

Speaker 1 (46:15):
Trash next Chase, So, what's your YouTube channel?

Speaker 2 (46:20):
So I think it's I think it's just my name
in English, but I don't think it's a good idea.
Let's say if I can it says segi at Segi caramel.

Speaker 1 (46:31):
Let's see, and then yeah, on LinkedIn, we can just
look you up by it.

Speaker 2 (46:36):
Yeah, just like a caramel. It doesn't have any It
just added a bunch of numbers in the end. But
it's just so it's like, yeah, it might contain Hebrew.
So if your audience do a Hebrew, but sometimes I'll
try to add I'll try to add stuff in English.

Speaker 1 (46:51):
Right, all right, Well, so the last part of our
show is always picks, and that's just shout outs about
stuff that we like. So I'll go ahead and get
us going for the picks. And I always start my
picks off with with a board game. And so this

(47:14):
board game is it's a variation on Pandemic. So for
the folks that have played Pandemic, if you don't know
what Pandemic is, it's a cooperative game where you're trying
to eradicate diseases from the globe. And so, yeah, you
all have different roles and you move around and right,
you play cards to find cures and things like that.

(47:37):
This one is a little bit more involved. And there's
a variation on Pandemic called Fall of Rome, and so
instead of diseases, you have armies that are marching toward Rome.
This one. This one is Fate of the Fellowship and

(47:58):
it's based on Lord of the Rings. So and I'm
going to be teaching it in about three weeks at
a game board convention. Board game convention anyway, Yeah, my
friend does. He teaches games at the at the convention

(48:20):
every year. He used to be part owner in a
board game store.

Speaker 2 (48:26):
Does he make a living from teaching games? Like, is
he doing it for no?

Speaker 1 (48:30):
Not anymore. So he was getting he was he was
getting paid by the store and his profit share, but
the store closed, so now he's just doing it just
just for fun. So anyway, the way that this works
is you have armies from you know, the different bad
guys and you have armies for like Elvin armies. What

(48:53):
was it it was elves humans And anyway, there are
like three or four different colors of good guy armies
and so you know, you're moving your armies to fight
off the other armies and then you're trying to get
Frodo and the ring to Mount Doom. You have to

(49:14):
complete like I think it was four missions, and the
fourth one is getting frod or Mountain Doom and being
able to play a number of ring cards in order
to destroy the ring. And if you can do that,
you win. We played it twice we lost, so it's
it's not just like this super easy game, but it
was fun. There were four of us playing. Board game

(49:37):
geek says it's best with three, and yeah, so you
play with two characters each and so you know, somebody's
Frodo and Sam and somebody else, you know, and then
they might have another one. I think that the other
character that that person was playing was legless, you know
I was playing was I playing Aoin and Mary and

(49:59):
Pip and anyway, And so you can do different they
have different abilities and you move around the map and
try and manage this stuff. You also have havens that
you're trying to protect, and if you lose havens, then
the hope meter goes down. If you lose hope before
Frodo gets to the then you lose. And it's got

(50:20):
a tower that you roll the dice through that looks
like sour on the eye of Souron tower. You know.
The different missions are you have to take where what's
Saramon's tower you have to take that, you have to

(50:40):
have a certain kind of a battle. I think I
can't remember. I've only played it like twice, but it
was very, very fun, and so Board Game Geek waits
it at two point ninety nine. So Pandemic I think
probably is like a two point one or two point two.
This is a bit more involved because you're moving the
nascul around and trying to you know, you're you're you're

(51:03):
keeping track of a lot of things. Uh. The armies
march are along different paths on the board and so
unlike Fall of Rome, they don't all go to Rome.
The paths go all over the board and so anyway, uh,
just and it's it's it was fun. We really enjoyed
playing it. So I'm going to pick Lord of the

(51:24):
Rings Fate of the Fellowship. Uh, this is a new
game that came out this year. Usually I'm picking games
that you know are a year three old, but this
one's new.

Speaker 2 (51:32):
So.

Speaker 1 (51:33):
Definitely go pick it up. It's one of the more
well put together visual games. So it it's very fun
because all the pieces are are well designed and anyway,
so so it's cool, very cool. So I'm gonna pick that.

(51:57):
My wife and I watched a movie last night. I
didn't love it, but it was it was it was good.
I could have predicted every every plot point in a
movie whatever. But it was called The Christmas Miracle of
Jonathan Toomey and no, it's at the beginning of the movie.

(52:23):
The main character is a ten year old boy. His
father goes off to war. I think it's World War
one and he's killed in action and he has this
nativity set that he put out every year with his
dad and he loses it. And so Jonathan Toomey is
this wood carver.

Speaker 2 (52:45):
And so.

Speaker 1 (52:48):
Anyway, they moved to the town where Toomey lives and
you know, meet with him and you know. Anyway, so yeah,
so you know, and it takes place at Christmas time anyway,
and to me is you know, they commissioned him to

(53:09):
carve a replacement Nativity set. So anyway, it was all right.
I guess it's not a glowing endorsement. But if you're
looking for a movie that you probably haven't seen, and yeah,
it has. There were like two actors in it that
you've seen in other stuff. I'm trying to remember names,

(53:30):
but I'm not very good at remembering celebrities names because
I just don't care. But there was one in particular.
She was like one of the kids that he befriends,
and she was in the Host and a handful of
other movies as an adult, right, and she's a little
kid in this movie. So we ran across it, and

(53:54):
it's got to be twenty years old or something at least,
But anyway, we enjoyed it, so my wife really liked it.
So so if you're looking for that that kind of
a feel good Christmas movie, then then that's right up
your alley. Those ones don't always do it for me,

(54:14):
but I'm a good support. I'll sit through a movie
trying to think, what else.

Speaker 2 (54:23):
Are you thinking about? A pick? Because I have something
as American and people just if they go ahead play it,
it's just sick.

Speaker 1 (54:32):
Do a pick.

Speaker 2 (54:34):
It's just the whole Night Silk song. It's amazing and
if you didn't play it already, you should. It's an
amazing game.

Speaker 1 (54:41):
Which song is it?

Speaker 2 (54:42):
No suck song in the game the video game, it's
a whole night sucks song.

Speaker 1 (54:49):
Okay, so all night?

Speaker 2 (54:51):
Yeah. Yeah, this game crashed the entire internet or the
stores of Nintendo XBO and just crashed it for being awesome.
And it's still amazing and I recommend you all to
play and obviously played the first Hole name. Those games
are just amazing. Team Cherriot just.

Speaker 1 (55:14):
And know what the the graphics for that game, I
I just I love them.

Speaker 2 (55:21):
Hendron not animated, not pixelated, just throwing with all the passion,
just amazing.

Speaker 1 (55:29):
Yeah, it's it's very yeah, simple gameplay, but it's it's
a fun game for sure.

Speaker 2 (55:35):
Simple, my goodness, simply this game, this game is so
goddamn hard because it's hard.

Speaker 1 (55:45):
Oh yeah, I'm just saying. It's like, it's it's how
do I explain it, it's it's somewhere between. And I
I haven't played a ton of it. My son was
really into Night oh and Silk Song. So Silk Song
just came out. Yeah, but yeah, so Hollow Night. You know,

(56:10):
you move through, you do have some basic attack and
things like that. It's almost I mean, you are fighting
through the levels, but it's almost as much a puzzle game,
like how do I get into the right position to
to get through the level right with whatever abilities I have?
As it is an action and fighting game.

Speaker 2 (56:33):
M oh and there is a like a lot of
lord behind it. The generally fun game it is.

Speaker 1 (56:42):
I love the visuals on the game, and it's definitely
a fun game. Like I don't want to sell it short,
but yeah, but I haven't played Silk Song yet, so
I'll have to check that out. I really want to
get the switch to I haven't.

Speaker 2 (56:57):
Don't do it. I don't do it for two reasons.
One the fact that Nintendo gets away for overpricing their
console is unforgivable. There is no reason to buy Anintendo
too just so I like, I wouldn't feel feed to
that market. Secondly, it's uh, the Nintendo Nintendo two doesn't

(57:20):
have like a lot of graphic improvements that if you
already have a Nintendo one, you should just stick to it.
And unless you won the very exclusive game, then I
recommended to stick to the Switch one.

Speaker 1 (57:35):
Right, Are there are there exclusive games to Nintendo or
to the Switch.

Speaker 2 (57:41):
To the Probably yes they are, they are, But again,
if you're not looking for anything specific, and I recommend
it just to stick to the Switch one. I also
have a Switch one that just like, because I do
not that keen of just like up and over and
just buying, Like how much was it eight hundred eight
hundred bucks for the switch? That's nuts.

Speaker 1 (58:03):
I haven't even looked it's nuts. Yeah, it looks like
Mario Kart World, Donkey Kong Bonanza. Oh, there's a Metroid
a Kirby I Rule Warriors. So yeah, there are games
I guess that are exclusive to switch to. But yeah,

(58:24):
I haven't even priced it. I was going to look
and see how much it was for Christmas.

Speaker 2 (58:29):
But now that you'll see the prisl, it's more than a.

Speaker 1 (58:34):
Couple hundred dollars. I'm probably, oh, yeah, it's five hundred
dollars here and that that's a little bit. If my
kids really really deeply wanted it, it'd be like, hey,
this is all you're getting, right for the next three years.

Speaker 2 (58:51):
Oh my goodness. So and again it's like it doesn't
have any significant graphic improvement.

Speaker 1 (58:58):
So just yeah, I guess, I guess I haven't looked
into that either. I have to say too that the
so one of the reasons that I was excited to
get the Switch when it came out was it was
kind of the hybrid, right, it was a console you
hooked to your TV and then you could also like

(59:22):
just put it in your bag and take it with you.
And as far as a handheld system goes, I really
liked it. As far as then hooking it up to
my TV, I felt like it wasn't the best console. Yes,
is that is that a terrible thing to say? I mean, no,
that's that's been my take. So you know, I don't know.

(59:46):
I mean I like this switch.

Speaker 2 (59:49):
The Nintendo for me, just like it was very un
not convenient for me. The hookup. I don't know how
it works with other people. But you get like this
plastic piece printed. It's very like not very convenient. Then
you need to hook that up with your HDMI and
then in order to make it work, so I need

(01:00:10):
to put I need to place this the freaking switch
inside the slot. Right, it's very annoying. Like I wasn't
excited for handhelds. I would recommend the Steam Deck, which
is the better one. That being said, I don't have
the Steam Deck. I just had heard of reviews about
this and just like you get access to a bunch

(01:00:32):
of games and it works pretty pretty well. And if
you're traveling a lot, maybe try the RG Xbox, which
is not really an Xbox hand held. It's a lot
but just look it up. Though the RG Xbox is
more expensive than Nintendo than Nintendo's.

Speaker 1 (01:00:49):
Only Yeah, yeah, I mean the I guess the nice
thing about like because I didn't even know Steam how
to Steam Deck, but it looks like you can play
basically anything you can get on Steam on the Steam Deck,
which is.

Speaker 2 (01:01:07):
Some stuff you can get on Play Pass with the
Xbox that for stuff can also play PC. Right, it's amazing.
It's like it gives you everything now about the About
the quality, my guess it's on par. It's not slightly
better than the Nintendo.

Speaker 1 (01:01:25):
Switch, probably.

Speaker 2 (01:01:28):
Just for assuming because you're optimized for this team.

Speaker 1 (01:01:32):
But yeah, but yeah, my my other issue with the
Switch is that, oh they do have a docking station
for the Steam Deck as well. The other issue that
I had was that the so the little joy cons
like those, we get drift in them, We get all

(01:01:53):
kinds of other issues and then it's okay, well, you know,
the batteries dying on it, so I have to go
slide it onto the switch, and oh when I slid
it on, then it it came off of the dock
just enough for it to kind of glitch out.

Speaker 2 (01:02:08):
Yeah, where it is real, I get, like you know
how many times I got.

Speaker 1 (01:02:12):
But the issue, the issue was always with it when
you were using it as a console on your TV
and not right as a handheld. It was generally better, but.

Speaker 2 (01:02:27):
I have one of the issues, and I have some. Normally,
if you buy a single swhich you get like two
controllers which are two halves, which is essentially one, but
if you want to play with a friend, you have
to hook it up to this sort of yanky plastic
thing that slide it over, and then you would hold
it horizontally instead of vertically with the other one. You

(01:02:47):
have no idea how many times I've messed it up
and I flipped it to the wrong way. And I'm
pretty sure that most of the reason why it strifts
because of me, because of the good because I have
a stupid plastic thing inside the inside the controller. I
got the other ways dominant.

Speaker 1 (01:03:08):
Yeah, yeah, all right, well I'm gonna go ahead and
wrap us up. But this was cool, good conversation about astro,
fun conversation about games and video games.

Speaker 2 (01:03:19):
Thank you for having me.

Speaker 1 (01:03:20):
I think I have it in me somewhere. Eventually I
want to write a video game.

Speaker 2 (01:03:23):
But we'll see if you need somebody to talk to
you on my fresher video games.

Speaker 1 (01:03:28):
So yeah, I know a few people who have built
video games too. So my twenty year old keeps saying
that he wants to be an indie video game developer.
Of course, getting him to sit down and actually do
the work to learn how to do it, that's another story.
But I get the appeal and I think it. I

(01:03:48):
think it'd be fun. So anyway, we'll go ahead and
wrap it up until next time folks max out.

All Episodes

Why Astro Is Winning Developers Over with Sagi Carmel - JSJ 697

Episode Transcript

Popular Podcasts

Dateline NBC

Stuff You Should Know

The Breakfast Club

.css-15opob5{left:0;position:absolute;top:0.8rem;} All Episodes

.css-14f5ked{margin:0;word-break:break-word;display:-webkit-box;-webkit-box-orient:vertical;box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}Why Astro Is Winning Developers Over with Sagi Carmel - JSJ 697