November 12, 2025 • 45 mins
Tanstack query is more than just a React library. It's an incredible collaboration to solve really hard problems - like caching - and uses the adapter pattern to implement asynchronous state management for Angular, React, and more! In this episode of the Angular Plus show we welcome Arnoud to the show to tell us about the project, how this solves a lot of challenges for Angular developers, and how the Angular developer is built using a signal-native approach with DI - all the good stuff. Join as we learn more about data as a dependency in Angular components.
Show links
https://tanstack.com/query/latest/docs/framework/angular/overview
https://www.npmjs.com/package/@tanstack/angular-query-experimental?ref=pkgstats.com
https://github.com/TanStack/query/tree/main/packages/angular-query-experimental
https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai?pli=1
More about Arnoud
https://arnoud.dev
https://x.com/Arnoud_dv
https://bsky.app/profile/arnoud.dev
https://www.linkedin.com/in/arnouddv/
Follow us on X: The Angular Plus Show
Bluesky: @theangularplusshow.bsky.social
The Angular Plus Show is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge every year to attend talks and workshops by the Angular team and community experts.
Join
Attend
X
Bluesky
Read
Watch
Edited by Patrick Hayes
Stock media provided by JUQBOXMUSIC/ Pond5
Show links
https://tanstack.com/query/latest/docs/framework/angular/overview
https://www.npmjs.com/package/@tanstack/angular-query-experimental?ref=pkgstats.com
https://github.com/TanStack/query/tree/main/packages/angular-query-experimental
https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai?pli=1
More about Arnoud
https://arnoud.dev
https://x.com/Arnoud_dv
https://bsky.app/profile/arnoud.dev
https://www.linkedin.com/in/arnouddv/
Follow us on X: The Angular Plus Show
Bluesky: @theangularplusshow.bsky.social
The Angular Plus Show is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge every year to attend talks and workshops by the Angular team and community experts.
Join
Attend
X
Bluesky
Read
Watch
Edited by Patrick Hayes
Stock media provided by JUQBOXMUSIC/ Pond5
Mark as Played
Transcript
Episode Transcript
Available transcripts are automatically generated. Complete accuracy is not guaranteed.
Speaker 1 (00:00):
M hm.
Speaker 2 (00:08):
Welcome to the Angular plus Show. We're app developers of
all kinds share their insights and experiences. Let's get started.
Speaker 3 (00:21):
Hello, welcome back to another episode of the Angular Plus Show.
My name is Brian Love and I'm going to be
your host today and I'm joined today by my friend
and Canadian Jay Bell. Jay, how are you doing today?
Speaker 4 (00:33):
I'm good. You did better that you explicitly called me
on as a Canadian today because the last podcast we recorded,
I got lumped in with a bunch of other people
that were a different nationality than me aecast and I
was like, hey, remember.
Speaker 3 (00:47):
I, yes, yes, our good friends to the north here,
and you're like, pretty much do north of me. So
I'm in central Oregon, so you maybe a little a
little off to the right or a little to the east,
but not too much, though not too much. I could
just drove straight norths and I can get to your place.
Speaker 4 (01:03):
Through the cascades. But you'll get there eventually.
Speaker 1 (01:05):
Yeah.
Speaker 3 (01:06):
Yeah, which is exciting right now because we're getting snow. Okay,
today we are joined by a wonderful guest. We've got
are not on the show, and we're gonna be talking
about something kind of interesting. And I'm gonna introduce it.
So don't don't hit the unsubscribe button, don't hit stop,
keep listening. We're gonna talk about Tanstack Query. Now you
might think of that as like a React project or
(01:27):
as React query or something like that, but Tanstak querry
comes with a lot of benefits and it also comes
with an interesting story around Angular and signals, and we're
really excited to bring on are Not onto the podcast
today to talk about that story and to talk about
how Angular is becoming part of the tanstat query. So
I was just checking out the docs. You can go
(01:48):
to tan stack dot com, go to tanstat query and
you'll notice the drop down there's a framework option. They've got,
of course support for a lot of the JSX frameworks
like React and Solid, and then they've got to support
for a view and Spelt and then Angler's in there
as well. So we're really excited to see that happen.
And I know that's been a large open source contribution
(02:08):
kind of a project that are Not and other folks
have been involved in. So we're really excited to have
you on the podcast today.
Speaker 1 (02:14):
Are Not.
Speaker 3 (02:15):
Go ahead and say hello to the for our listeners
and please introduce yourself.
Speaker 1 (02:20):
Yeah, I'm Arnous. I'm a front and architect. I've worked
closely with Angler since Angler JS one point two, so
a long time. I also did some React projects. Then
I came across React query back at the time, and
(02:41):
then then I returned to Angler. I really wanted to
use Danceta Query on Angler and yeah, coincidentally, back then
signals were introduced to Angler, was the ideal opportunity to
to build the learned up there.
Speaker 3 (03:01):
Yeah, that's really wonderful. And where are you located?
Speaker 1 (03:04):
Are not in the Netherlands.
Speaker 3 (03:07):
In the Netherlands, right, Yes, wonderful. I lived. I know
the listeners aren't here for this part, but I lived
outside of the Netherlands, excuse me, outside of Amsterdam for
about five months and I really enjoyed it. So uh,
I kind of on the east side. But anyways, Yeah,
I'm really glad to have you on the podcast. Tell
me a little bit more about your experience with tan
(03:28):
stack query and kind of what are the benefits that
tan stack query brings to the developer, whether you're an
Engler developer or React developer or whatever. Kind of what
are some of the benefits and why might you choose
to use something like tan stack query.
Speaker 1 (03:41):
Yeah, so it's so easy to work with. You have
all these loading statas in there, very easy to use catching.
You don't actively have to fetch data when you need it.
It's it's fetched for you. So you just pass a
(04:02):
function that tells them se quity how to fetch the data,
and then it will fetch the data for you. And
on angler. I see that as actually injecting data as
a dependency. So in your component you'll have usually your
component you have a true inject query. You have to
(04:25):
observer uh, and it will when a new component is
initialized that uses the data, then it will be either
shown immediately if it's cashed, or they'll fetch it for you. Yeah.
It also good to know when it's already available and
it's considered still, which you can configure then it will
(04:48):
also will immediately show it and do a refetch for
you in the background. Also for the for the user,
it's it's it's it's very easy to build a very
nice user experience with MS query.
Speaker 3 (05:05):
That's right. Yeah, it's a wonderful experience. And there's a
couple of things you dropped in there, and I kind
of want to maybe circle back to them a little
bit more, because I think there's some nuggets in there.
So you talked about kind of the idea of data
is being kind of a dependency and injecting data into
your components. You also talked about caching, which I think
(05:26):
there's like a saying right in computer science the two
hardest things are naming and casing, so you you picked
one of those, And then you also mentioned things like
stale data. Of course that gets into caching, refetching, initial fetching,
passion validation, kind of background something showing maybe stale data,
then background fetching, and dealing with the kind of the
(05:48):
things around that. You know, I think it's We've got
a lot to explore there, but I just want to
quickly kind of tee this up a little bit. I
think for some of us as developers, we can kind
of get maybe confused, and we think that, like data
is really not a hard problem to solve. We know
that catching is hard, but like data isn't really that hard.
(06:10):
Like we've got now we've got fetch. It's this globally
available function. I can just go off and get some
data that I need and I'm fine, Like that's it right,
like all I need is fetch, And if you're a
React developer, you might say something like, well, all I
really need is use effect and fetch. And for those
of you that are maybe watching the news and kind
of saw what happened with cloud Flare and what happened there,
(06:31):
I think that's like two or three weeks ago where
they basically dedoss themselves as a result of using use
effect combined with fetch, And so I think that that's
I'm not going to dive into that because I think
we can do a whole show on like why that
is and what happened. And I'm sure people already have.
I think THEO has if you follow him on YouTube.
I don't watch all of his stuff, but I think
that popped up in my feed. And so it's an
(06:54):
interesting thing that I think as developers sometimes we see
data as just kind of like, this is a solved problem.
I don't really need to worry about this. This is
really simple, Uh, no big deal. And you can kind
of maybe take those same words when I said data,
maybe you could slot in something like auth or other
other things that we do. Right, you can say, like
auth isn't that hard, It's just to use the name
(07:16):
and a password, and I asked on in case somebody
and I get a session tooken or a cookie or whatever.
It's like, okay, well yes, but yeah, and that butt
is like following that butt is things like you mentioned,
which is hashing and validation and invalidation of cachine and
fetching and prefetching and background fetching and high all this
stuff hydrating the dom as a result, and like reacting
(07:38):
to that data updates, and so it actually becomes quite
complex quite quickly. It's one of those things that I
think starts out quite small, but exponentially as the graph
kind of ramps up, like as time progresses, the complexity
gets It's not it's an exponential curve, and that it
becomes increasingly more complex that you start to build larger
applications and data that depends on other data and all
(07:59):
this kind of stuff. I mean, So, tan Stak does
a really good job and I will stop talking here.
Tan Sak does a really good job of solving those
hard problems and allowing us to kind of build on
top of that. And so tell me a little bit
more about your experience of kind of building tansta query
for Angular and kind of some of the things that
you guys ran into as part of this process. And
(08:21):
then I'd love to get into some of those other
details if we have time around either cachinge or yeah,
background fetching and some of these other things. But I'm
sure everybody can go to the docks and kind of
see all of that, but tell us a little bit
more about how the project got started and where it's at.
Speaker 1 (08:39):
Yeah, or I thought it would be very easy to do,
but you know, signals were due back then, so I
also needed to learn how signals worked. Yeah, and there
are some complicated things in there, like timing issues. I
still need to solve some of some of them being
(09:00):
compatible with with multiple Angler versions. Yeah, the easiest thing
would be to just say, yeah, I just use the
newest Angler version.
Speaker 4 (09:08):
But the real world doesn't work like that.
Speaker 1 (09:14):
Yeah. One example of that is an cheap packager had
the release and then I don't do the details. But
then it didn't work for me at for for older
Angler versions. So now I just use ease built instead,
and I dropped I had a single componentity there for
(09:36):
the developer tools, I just dropped that and use a provider.
So I can just use the the public Angler API
not depend on on compiled code.
Speaker 3 (09:48):
Very cool.
Speaker 4 (09:50):
Yeah, that's why I relying on like the whole like
Angular compiler, bundler, kind of like packager and stuff like that.
I know there's been some changes over the years in
regards to Engie packager, so I'm not surprised that you
ran into those things, especially like I remember the ivy
switch being particularly bumpy and like the partial compilation states
(10:14):
and like all that kind of stuff. So I'm just
transforming to like with these build I'm sure it's way easier, So.
Speaker 3 (10:22):
I'm not Let's maybe circle back on like data as
a dependency. Tell me a little bit more about that
and how you see that in your world.
Speaker 1 (10:32):
Yeah. So, in most Angular code bases I worked on,
quite complicated services are used to fetch date mad bits
to whatever the front end needs, and then it's seen
as completely separate from the components. And I do agree
(10:55):
that the actual data vetching should be done outside of
the component. But on the other hand, I believe that
a component should be able to declare what data it needs.
This is I think this is new to Angler or
the Angler ecosystem as all. It's something they used to.
Speaker 3 (11:20):
Yeah, I agree, and we're seeing that with the resources API, right.
The resource API is tied to the life cycle of
the component, similar to maybe like the suspense API in React,
and so it allows you to tie that life cycle
to that component and it clean it will clean things
up and also like kind of initiate the fetching. And
so it's a very like the data is very like
(11:43):
first class. I know that's the right approach to say this,
but it's like it's highly coupled to the component, right,
It's like the component has this data and that data
can of course be shared down the children's component just
like you know, state or whatever it is. But it's
highly coupled to the component life cycle. And so the
idea here is that it's a dependency basically, and you're saying,
(12:05):
at this level of my componentry, I need I depend
the upon this data, and so I'm going to create
kind of I believe you guys call it an inject query.
It creates like a and that's what kind of instead
of US query, it's inject query, right, and you wire
that up with a with the HTP service in order
(12:25):
to actually do the fetch whenever tends that query needs
to actually go over the wire and fetch it. And
you've got kind of the same idea here that now
that query is available to be rendered in the template
and it's a signal. Is that correct?
Speaker 1 (12:40):
It's it's a return say object with it signals.
Speaker 3 (12:43):
Yeah, yeah, makes sense. And I fived said correctly or not?
It doesn't currently meet the resources of API or interface?
Is that correct or does it?
Speaker 1 (12:53):
No, it's not completely the same, but that's fine. Yeah,
there's there's much open lap. So uh, for the future,
I would like to uh be completely compatible with angler resource.
Speaker 3 (13:07):
Yes, yeah, that would be great.
Speaker 4 (13:10):
Yeah, it would actually mean what does that mean to
be completely compatible with the with the resources API? I'm
I've never actually used from someone.
Speaker 1 (13:18):
I'm not sure either yet. Yeah, I have to fight. Well,
that's designing APIs. It's quite hard. But I can imagine uh,
perhaps an inject query resource for example, or the methods
on inject query that would uh converted to status. Yeah.
Speaker 3 (13:41):
Yeah, well, I mean it may be. I don't know,
it'd be a breaking change, but I believe like right
now you've got data and that's the signal, which I
think it's fine, But I think uh, the you know,
the a p I. I'd have to look at it again.
I don't have it in front of me. The a
p I for the resource interface, you know, requires certain
methods or certain values to be there, and I think
you've got a lot of them, so it might not
(14:01):
be that hard to switch over the resource API. Don't
quote beyond that, but I was looking. I haven't used
Angular's tan stat query yet, so I'm actually really excited
to learn more about this. But yeah, I think if
you're if you're already working with something like the resource API,
you definitely would want to take a look at tan
stat query and Angular because it's very similar. You've got,
(14:25):
like it is, pending signal, an error signal, a data signal,
and then you whatever that data is, you can kind
of iterate over it. In fact, I think what you
guys have built here and what tant that query provides
is goes even further than the resource API, and you
know when it comes to like caching and all of that,
because the resource API just doesn't get into that, that's
(14:45):
not part of the responsibility of it. And so yeah,
it seems like what you have here is like the
resource API and then some additional like really good features
on top. So as an agultive developer, how do I
get started with using tanstat query with A or digest
install dependency or what's required?
Speaker 1 (15:03):
Yeah, instill install at ten sequary the Angler adapter, so
that's at tense sequary slash Angler Query experimental for the
time being.
Speaker 3 (15:15):
Mhm uh.
Speaker 1 (15:16):
And then you can do in your application configuration you
can do provide ten sequery mm hmm. And then past
new query client and quer client is an import from
tense saquary. So that's it and out of the box.
It's uh, it's a pretty pretty good up the box
(15:38):
configuration for most applications. But you can, yeah, customize pretty
much everything you need, like how long is something cached?
When is it removed from the cash when it's when
is it considered still so it will be cashed and
(15:59):
shown we immediately refetched on the background.
Speaker 3 (16:02):
Mm hmm.
Speaker 1 (16:04):
Yeah, tons of stuff.
Speaker 3 (16:06):
Yeah, it's really nice. And is that all signal based?
So can I provide signals as part of that API
and say, hey refresh when this when this signal emits
or not emits, but yeah, when the signal value changes. Yeah,
very cool. So it's very reactive. I love that so
it makes it a developer ergonomics. You just don't have
to think about things. If you've got to you provide
(16:28):
the signal, it'll it'll monitor that signal and wait for
that change to occur and say, okay, now I need
to invalidate that cash, I need to go out and
refetch or whatever it is. And you don't have to
manually do that. You just bind it up to a
signal and you're good to go. And that's really powerful.
And I assume we're talking a lot about query, and
I know we're not doing something like RPC, but like
(16:50):
it supports all kinds of like gat posts, like it
has queries and mutations and the full range I would imagine.
Speaker 1 (16:58):
Right, Yeah, it's actually completely neutral towards get or post
or even other a p I S, r p C
indeed or what's the word from Facebook.
Speaker 3 (17:15):
Graph? Yeah, yeah, it's agnostic. You can really wire it
up with whatever layer you want.
Speaker 1 (17:22):
Okay. Yeah, it's essentially management, so you could even use
it for a think a p I S. So it's
not even necessarily although that's right.
Speaker 3 (17:37):
Does it This is maybe an off, offhanded question if
you don't know it, that's okay, does it support streaming
and streaming protocols like can you do streaming in chunks
and that kind of thing with it?
Speaker 4 (17:47):
Or is it really?
Speaker 1 (17:48):
Yeah?
Speaker 3 (17:48):
Meant you can.
Speaker 1 (17:50):
The React query has a experimental a p I for that.
Mm hm. That's not Angler yet mm hmm. The streaming
career on there. Yeah.
Speaker 3 (18:02):
Cool, And so that's a work that's currently work in progress.
Speaker 1 (18:05):
Then yeah, if anybody wants to the pr for andler that.
Speaker 3 (18:10):
It would be awesome. Yes, please please. While we're on
that topic, because you mentioned it, tell me a little
bit about the team, and I assume you are open
to having people contribute to the project and collaborate with
You can tell us a little bit about who's involved
and kind of how you might get involved if you're interested.
Speaker 4 (18:30):
Uh.
Speaker 1 (18:31):
Yeah, lots of people come to you. I don't remember
all their names off handbook. Lots of people your or
I have the discussions through Twitter, pms and LinkedIn sharing
ideas on their code base.
Speaker 3 (18:52):
Very cool. We'll get a GitHub, I assume is it
part of the tans that query GitHub or you guys
as a separate repo.
Speaker 1 (19:01):
No, it's uh, it's an official adapter for don se query.
So it's in the.
Speaker 4 (19:07):
Yeah, okay, so people in the show notes for anybody listening.
Speaker 3 (19:12):
Yeah, so we'll get some links time at the bottom
of the show notes. So if you're interested, we're going
to drop some links to the website to get more
information as well as the NPM package information. And then
Jay's going to pull down the GitHub and we'll drop
that in the show notes as well, so that way
you can get involved with the project and and kind
of see where you might be able to contribute. What
a great way to a great project. Honestly, like, maybe
(19:38):
not the most I don't know, I was going to
say data is not sexy like somehow like maybe not
the coolest project to work on, but I imagine a
very exciting project to work on. There's probably some really
fun engineering challenges and things that opportunities to really learn.
So if that's something that excites you, then this would
be a great project to get involved in.
Speaker 1 (19:59):
Yeah, learned a lot about reactivity and Angler and I
kind of disagree that that it's not exciting. Well, data
on itself maybe not, but mm hmm, it's such an
important part for the user experience data fetching. It's a
(20:20):
very important for how fast an application feels yes, totally.
I remember a project that that back end it was
not very responsive, but because of the caching in terms
like query, the front end actually felt very irresponsive. Yes.
(20:40):
For example, when you when you page through a table,
it will refetch the next page mm hmmm. And then
where you click next, well, when you offer over it
it can uh well what I did actually, I think
us when you arrive on the page, it will prefetch
(21:04):
the next page, and the next button it will prefetch
the page after that.
Speaker 3 (21:12):
It's amazing.
Speaker 1 (21:13):
Yeah, felt very far.
Speaker 3 (21:16):
It's really interesting.
Speaker 4 (21:18):
Before you started working on this project, what was your
level of experience or exposure to Angular or did you
kind of just like figure out Angular to work on
this because you were a tan Stack fan.
Speaker 1 (21:29):
Yeah. Well I worked mostly on Angular, just a few
React projects, so I was quite experienced with Angler about
of course, signals were completely new back then, so I
had to learn those.
Speaker 4 (21:44):
Yeah, we're all learning those. We're all still learning signals. Yeah, yeah,
definitely not alone there.
Speaker 3 (21:54):
Okay, I've got I've got a million questions, So give
me if I keep hitting up. What's the testing story?
Speaker 1 (22:00):
Like?
Speaker 3 (22:00):
You know, so does tant that query come with its
own testing story or am I just using is there
a Is there a story here to be told? I
guess I don't know. I'm asking. Yeah, what does it
look like to do testing with tense that query angular.
Speaker 1 (22:15):
Uh while developing the elector or as a user using
it in your application?
Speaker 3 (22:20):
Either yeah, yeah, go ahead inform us or not? I'm
good for either or both. Yeah, whatever you feel like sharing?
Speaker 1 (22:28):
Yeah uh yeah, I did most of testing myself. People,
of course like to contribute new features, so that's that's
most of the prs. Hmm uh. Did receive some bug reports,
so what's those? Yeah, and I pored it thover most
(22:51):
of the react unit tests.
Speaker 5 (22:55):
Good morning. Do you know that moment when your coffee
hasn't kicked in yet, but just like is already blowing
up with Hey did you hear about that new framework
that just dropped?
Speaker 3 (23:04):
Yeah?
Speaker 1 (23:05):
Me too.
Speaker 5 (23:07):
That's why I created the Weekly dev Spur, the newsletter
that catches you up on all the web def chaos
while you're still on your first cup. Oh look, another
anger feature was just released, and what's this typescripts? Doing
something again? Look also through the poor requests and change
slot grama so you don't have to five minutes with
(23:29):
my newsletter on Wednesday morning, and you'll be the most
informed person in your standard.
Speaker 3 (23:35):
Ah.
Speaker 5 (23:36):
That's better the Weekly desper because your brain deserves a
gentle onboarding to the week's tech matness. Sign up at
Weekly Brew dot dev and get your dose of deaf
neews with your morning caffeine. No hype, no clickbait, just
the updates that actually matter. Your Wednesday morning self will
thank you.
Speaker 3 (23:54):
Yeah, very cool.
Speaker 4 (23:58):
What about from the user side, what's it like to test?
Like if I build an application using tense decreer with Angular,
the the Angular adaptor however you refer to it. What's
is there like utilities that I use? Or do I
just use standard you know, testing library or like what what?
Or like being their test bed. I'm assuming Angler test
bed would more than like respect it.
Speaker 1 (24:21):
Yeah, but I would definitely recommend to start with Angler
test bet. Most uses will use ap client from Angler,
so then you can use to M testing support for
that well, interpect very nicely. I did recently add support for.
Speaker 3 (24:44):
Not sure test or.
Speaker 1 (24:50):
Was recently added to Angler. That Bell's Angler that there
is a pending oh zoneless ending fetch going on desks.
Speaker 4 (25:04):
That's okay, Yeah, yeah, yeah, I think that's to support
the Zona's applications because of the whole stuff that Zone
would as would do.
Speaker 1 (25:12):
Yeah yeah, m hmm. That doesn't have to wait until
the thing because you can wait for Angler to be stable.
M hm. So yourself you can just uh await Angler
(25:34):
is stable.
Speaker 3 (25:36):
That's great. Yeah, it sounds like something the testing story
is is. Well, well, if you're already used to writing
tests and you're using the issue to be testing fiant
module or whatever it's called. Yeah, I might have messed
the wording up there.
Speaker 4 (25:52):
If you're already using the test bed, your t D
come on.
Speaker 3 (25:57):
But then there's also you have to inject it's and
it's to be client. It's agent client testing mark. I
don't know whatever it is, I whatever, my my editor
does get a I knows, I don't know. And yeah,
so the story is already there. That's really wonderful, Like
it's already because you're using the Angular ecosystem and dependency
injection and you're using application rep to stable and all
(26:20):
of that. Everything just seamlessly works and you touched on
service side rendering. So I just wanted to confirm if
I'm using service side rendering like tanstat query. This is
all well supported in terms of that, so I can
catch my data on the on the server and render
that all down to the client and and no problems,
(26:40):
I imagine, just kind of works out of the box.
Speaker 1 (26:43):
Yeah. I did test it. Yeah, I think it shoot,
shoot work. Yeah. I don't choose it. I don't choose
it myself, but okay, I tested it and I fixed
some things and as far as I know, it should
work very well.
Speaker 3 (26:59):
Fantastic. Yeah, And that's like, you know, I love your
response there because I can relate to that. You know,
when you're building something like this an open source, like
you can't predict every educase and use case and we're
trying to develop you know, good d X and good
developer tooling and we want to ship and it's all
done open source. It's you know, maybe more passion than
(27:22):
pursuit of revenue or whatever like that. But I love that,
Like you said that, you know, you tested it and
you fix the bugs, and I think that's what's beautiful
about open sources. If you you know, there's a listener,
if you're like, hey, I'm going to pull this down
and I use it with service I rendering and maybe
there is an educase that we haven't haven't been exposed to,
or the the collaborators on this project aren't aware of.
(27:44):
That's what open sources for. So you can file an
issue and even submit a PR to actually help support
those educases and contribute to the project. So, if you
are using, you're looking for a hot, really good data
fetching library. I really dat affecting. I feel like that
doesn't do its surface. It's really just like a data
management library instead of state management. It's like data management. Yeah,
(28:08):
this is a great one.
Speaker 1 (28:10):
It's it's it's just it specialized on acing state management.
Speaker 3 (28:16):
Acing state management. That's exactly right, Yeah.
Speaker 1 (28:19):
Very well with with other state management.
Speaker 3 (28:22):
So tell me a little bit about that. So does
it work with use? What is the ten stack state
management Library? Why can't I think of it? Ten sax store?
Speaker 1 (28:36):
Does it?
Speaker 3 (28:36):
Does it work with tense x store or is it
that's just for React right?
Speaker 4 (28:42):
Uh?
Speaker 1 (28:43):
I think it actually has a angler adapter as well.
Speaker 3 (28:47):
I didn't appeal with that, Okay, so I didn't know that.
Speaker 1 (28:53):
With ten sax store. But it's two signals. I can't
imagine it will grow very well together. I know a
signal store very well together with respect perfect use the
project Yeah for a sink U stance that query for
basically everything else use uh signal store perfect.
Speaker 3 (29:17):
Yeah. I love that. That's a great story. And does
it also expose through dev tools? I think I saw
not on the website. Now maybe I can go back,
but I think it also there's some debugging available. Do
you guys use the REDUCS dev tools or what tools
are y'all using to help support like debugging in terms
(29:39):
of tens that query?
Speaker 1 (29:42):
Yeah, then Secuary has its own deep tools yeah, no.
Speaker 4 (29:50):
Doubt, tanstat query, Dove tools cool.
Speaker 3 (29:54):
See so yeah, I haven't used them yet, so that's
good to know. Very good. Yeah, that I meant, so
this works.
Speaker 1 (30:01):
Uh, you know, when we want to test how does
an error state look like? You know, usually we just
hack some error in there.
Speaker 3 (30:12):
Mm hm.
Speaker 1 (30:14):
You can just tricker an error for a query and
that's it.
Speaker 3 (30:18):
That's really nice. That's really nice.
Speaker 1 (30:22):
Thanks.
Speaker 3 (30:23):
Yeah. What I'm hearing from you or not is that
this is not like an alpha release project. It sounds
to me because a lot because this is an adapter,
so it's using the adapt package, so it's built on
top of the like the core and the fundamentals of
of tandstat query, but out of the box for a
project that I'm not sure when the project actually started.
(30:45):
But it seems like this is production ready and comes
with a lot of developer ergonomics. Is that a Am
I hearing you correctly?
Speaker 1 (30:55):
Yeah? I would choose my cell phone production. I cannot
tell other people if they should use them production m h.
Speaker 3 (31:02):
But it is production, it's stable, You're.
Speaker 1 (31:08):
Actually ready. Yeah, that's a The API may not be
completely stable yet, so some things may change. But okay,
so for interest where minor cool.
Speaker 3 (31:21):
Cool man, I'm very interested. I'm gonna have to kind
of pull this off the shelf next time I get
an opportunity.
Speaker 1 (31:27):
To do so.
Speaker 3 (31:29):
Like I said, I've used tans that query in a
React application. Uh, it's kind of already the application. I
kind of stepped in and I'm helping a lot with
the AI side of things. But tant that query is
in there, and I use it. I just I don't know,
it's already set up and configured it and I just
you know, it's just there, you know what I mean.
So I'm eager personally just to continue to learn more
about this. And I had no idea they had their
(31:50):
own tools. Great, it sounds like I should have known
that a long time ago.
Speaker 4 (31:55):
I feel like an idiot, But it's like my job
can get so much easier now.
Speaker 3 (31:58):
Oh man, it's funny. So I'm gonna have to check
those out as well. So I've learned a lot already. Yeah,
anything else, ja, Do you have any other questions for
are Not?
Speaker 1 (32:11):
Or no?
Speaker 4 (32:12):
I mean, like you you seem to be really interested
in this, like is this gonna be helpful for you
for hashbron? Are you thinking like I remember I saw
a kind of line of thought you were going on
earlier with the whole streaming thing.
Speaker 3 (32:25):
Yeah, I don't know, you know what I mean? So
like hashbron is basically again like uh you you maybe
you could you could almost probably write an adapter on
top of this for an ll M perhaps if you
wanted to, and make it like OLM centric, But hashbron
already does all. It's on internal state management library and
kind of deals with all of the state if you
are a dealing It is really like are Not said,
(32:46):
I think he corrected me in a very good way
that you know, I said. You know, this is like
a data management library that it's kind of an accurate statement,
but I think Arena said is even more accurate. It's
an ASYNC state management library, and so is uh you know,
if you're using something like Brussel's AI SDK or hash
brown or something like that, it also is an acink
state management library. It's just context is narrowed down to lllms.
(33:10):
And then of course that brings in additional challenges. Is
like streaming and some of the things that we do,
which is like eager Jason parsing, because you're getting Jason
streamed from the LM, and that could be over several
seconds or even whatever a minute or you know, really
long time if you want to wait that long to
start start showing stuff to the user. So Hashbrown eagerly
(33:30):
parses the Jason based on the scheme and that you
give it. So that way we can kind of start
parsing immediately as soon as we get completed. Kind of
nodes or whatever you want, won't call them nodes in
the data tree, so you can immediately add that off
to the render or just start rendering in the user interface.
Not much different than what are not is talking about
in terms of data fetching. Very similar in terms of
(33:51):
like eagerly cash, eagerly fetching and being able to show
the user as soon as possible, kind of dealing with
style data and that kind of thing. We don't, you know,
when you're dealing with an LM, you're not getting into
like cash validation and invalidation and we don't really have
that concept, but we do deal with things, and we're
getting more into the weeds on contexts, storage and context
(34:13):
like I want to say, validation, But when you're dealing
with an LM in context now you've got to have
hooks to like trim, to compact, to manage this existing
state of messages and what's going over the wire and
that kind of thing. And so I think you'll see
a new release here from Hashbrown in the next couple
of weeks where we're going to tackle some of those
(34:34):
harder things around lllms and those kinds of things. But
this is a very async state management library that's just
incredibly helpful, and you could probably hook this in if
you didn't want to use something like hashburn, you could
probably hook this into an I don't see why not
and do the streaming and some of that stuff. Maybe
(34:55):
it's not as narrowly scoped, and so you might run
into some more edge cases, some more things around that
if you were to start, you know, heading a back
end that's streaming from an ll M. But I don't
see why you couldn't, you know what I mean, it's
maybe not for that, but yeah.
Speaker 4 (35:14):
The ten stack, well like this adapter specifically, and maybe
query in general and r You can correct if I'm
wrong here, but you can you can realistically hook up
like kind of any source, any kind of data source
that you want, right. It doesn't need to come to
the promise arrest endpoint, it doesn't need to photograph well query,
it's like just a.
Speaker 3 (35:34):
Just a promise, right I think because I think I
said client last value from right.
Speaker 1 (35:40):
Yeah, currently that's that's just promises. So if you have
a obturable you need to convert it. But I do
want to add obsurvable support. Mm hmm. Yeah, separate so
you don't have the heart dependency on RCTs.
Speaker 3 (35:57):
Yes, you have to have a separate Yeah that's right. Yeah,
but now the story, I mean, you can still use
our shift, you just have to have to do like
last or first or from or whatever. Yeah, you've got
to you just got to get a promise. Yeah, but
that's uh, you know, promises are well, we'll see with observables,
but promises are currently like you know, part of the
(36:17):
SPAC and so it makes sense that you would build
the ACYNC handler around that.
Speaker 4 (36:21):
But observables are heading towards being in the they are.
Speaker 3 (36:24):
That's right, been on ben hot again and cold and
yeah I do something like that. I'm not sure it'll
be very intrigued to see what actually happens with that.
It seems like better late than never, I guess, is
what I'll say. Right, it seems like okay, well I
guess you know, like five years ago would have been nice.
(36:46):
But here we are.
Speaker 4 (36:48):
But yeah, I don't know what stage we're at when
I have the proposal here, yeahposal anyway, it's a discussion
to be added to this BAC. So it is that
is get observables at some point.
Speaker 3 (37:02):
Yeah, yeah, I guess maybe one last question. I think
the answer is going to be pretty simple. Here are
not but like fully it's all signals, so it's fully
compliant with zoneless. So if I'm if I'm currently marching
towards zoneless application and migrating kind of going that way.
This works with zoneless right out of the box, I
assume correct.
Speaker 1 (37:22):
Yeah, actually I run all the unit tests.
Speaker 3 (37:25):
Yeah, sweet, cool, very nice, cool man cool. Yeah, let's see.
We asked for collaborators, contributors, anything else do you want
to talk about or not? It's anything else you wanted
to bring up before we start wrapping.
Speaker 4 (37:37):
Up, anything to call out?
Speaker 1 (37:39):
Yeah, if if anybody wants to help out, of course,
prs are welcome. Also if anybody wants to test SERF
right rendering for example or sparing partners are also welcome.
Always so very cool to share and see other people's perspective. Yeah.
Speaker 4 (38:02):
I was gonna say an easy way to contribute to
projects like this is helping with docs. But I gotta
say you're because the dogs are great.
Speaker 3 (38:09):
There's so much here.
Speaker 4 (38:10):
I mean, obviously all docs can always be improved, right, Like,
no dogs are perfect, but like there's a lot of
docks here covering a lot of stuff. Like I'm impressed.
Speaker 3 (38:21):
Yeah, same, Yeah, it's well done, really well done.
Speaker 4 (38:25):
And there's just like only one of the frameworks right, React, Few, Angler, Solid,
and spelled are all supported by this library query specifically.
And then there's obviously the adapters, right, but like, yeah,
I'm impressed.
Speaker 3 (38:37):
Yeah it's really well done. Yeah, it's what a great
community project. And yeah, so definitely we would love to
just take a quick second here and maybe just thank
some of the other folks that are contributing to this project.
I don't have the full list of contributors here in
front of me, but I was just looking down to
the commit history, and yeah, it's great to see. Obviously
(39:02):
I see are not here contributing heavily to the project,
but it's really great to see other folks contributing to
the project and and and all of that. So yeah,
I think for me, I think that's it. Or I
just want to thank you so much. Excuse me, thank
you for your contributions and open source. Thank you for
(39:23):
contributing to the Angular ecosystem and being a part of
it all. And yeah, it's it's definitely a passion to
build something like this, and and it's really wonderful that
you've you've shared that passion with all of us that
way we can take a look at it and play
with it and and also hopefully contribute to it. So
(39:44):
thank you so much for your contributions. Thanks for being
a part of the Angular community, and I'm really excited
to see what you guys are doing with this project.
I hope that people listen to this and they don't
get kind of distracted by Tan Sak or whatever. Excuse me,
I'm joking, And so yeah, definitely for the Angular developer
(40:05):
out there, tan stack is not just a React project.
There's a lot of history that might have been where
it came from, but it's a great open source project
that is, you know, kind of inclusive of a lot
of different frameworks, including an Angular and are not. You're
kind of spearheading a big part of that. So yeah,
definitely tip of the hat and much thanks.
Speaker 1 (40:22):
To you for that.
Speaker 4 (40:23):
I think that's something that dev's could get better at
kind of just overall is not getting hung up on
the origins of projects sometimes, right, we do a lot
of I find that the community gets stuck on the
fact that oldest library was meant for this thing six
years ago, so I'm not going to use it now.
It's like, I'm just sorry, that's thought out words. So
(40:45):
I hope. I don't know if there is a stigma
around the whole it being a React library or not,
but if there is, I hope that like our listeners
can can trust that it's not just a React library,
like it supports all the major frameworks, which is really
really cope.
Speaker 3 (41:00):
See and I just like maybe just the type found
of that. Jay, I just love how angularly. I don't
know if that's a word, but like this just feels
like as an Angler developer, this doesn't feel to me
like this has been bolted on to something else. Does
that make sense? Like, uh, you know, I look at
the code samples, I'm like, yeah, yeah, yeah, Like so
I've used this in React. I'm looking at this now
(41:21):
and it doesn't I don't feel like you just like
took Angular and shoved it on top of a React
project and just like glued it and got it to
work or whatever with a bunch of refs. Like it's
like it actually looks like you've done Like it's very
angular first, right, it's you know, it's using dependency injection,
is used some signals, it's you know, just yeah, obviously
really great typescript just general DX and ergonomics and validation.
(41:46):
It just feels like as an Anglar developer, when I
look at the docs and when I'm I'm kind of
looking at the sample code and all of this, and
it just feels like, oh, yeah, this is something that
I would write. This is just like what I would
write as an Angular developer. I don't have any example
off the top of my head, but there are times
when I've gotten into a library and I'm just like,
I'm not sure who wrote this, And I don't mean
(42:06):
any offense, but it just doesn't feel like it was
written by an Angular developer. It just feels like this
is not very done like the Angular way. Not that
there's any pride associated with that. It's just that you
get used to doing things kind of the way the
Angular community does it, and sometimes that gets missed when
people try to like bridge projects into maybe a different
(42:27):
framework that they just have less familiarity with. I would
be guilty of that. If I tried to build like
a Solid library, I'd probably be like, shit, I got
to learn all the like the nuance and the best
practices and like the ergonomics and what are people doing
in solid, you know? And I'd have to learn all
that to be able to build a library, you know.
Or I guess I could just open codecs and say,
(42:47):
refactor my entire library to support solid and just see
what it comes up with and then ship it, you
know or whatever. I don't know, whenever, choose your favorite
and just be like, you know. But yeah, well, thank
you so much, Arnd, Thank you, Jay. Really appreciate your
(43:08):
time as well. Thanks for coming on the show, Thanks
for teaching us about tan stat query, and yeah, really
appreciate it. Thank you so much, Arnod, thank you for
having me. Yeah uh And to the listener, definitely hit
that subscribe button. We've got lots of great content coming
up for the rest of the season and this is
just another example of I think of how we're just
(43:29):
kind of really leaning into bringing broadly, like really good
front end technologies to the Angular ecosystem to build great
user experiences. And are not hit on that several times
throughout today's episode. Is you know, this is a data
fectin or an ACYNC state management library, but it's really
about the user experience and so it's really wonderful. Angler
(43:50):
Dove agreed, are not If folks want to connect with you,
should they what's the best way to connect with you
on X or blue Sky or LinkedIn, or what's the
best way if somebody wanted to reach out to you?
And connect with you.
Speaker 1 (44:05):
Yeah, either a lot of them or the ten stack
Discord or Angular Discord.
Speaker 3 (44:10):
I'm also there, fantastic, Okay, those are great, great places.
So the Tan Stack Discord, the Angular Discord, and then
we'll grab your your handle, your X or whatever you're
using or LinkedIn. We'll grab those from you and we'll
drop those in the show notes. So folks that want
to connect with Ard can do so. And of course
(44:31):
go check out the GitHub repo and you can always
see the issues and pick up an issue or start
collaborating with are Not and the team. Now again, thank
you so much, Jay, appreciate it, Ard, and to the listener,
we'll see you next time. Bye.
Speaker 6 (44:46):
Hey, this is Pressed on Mine. I'm one of the
NJI Champions riders. In our daily battle to crush out code,
we run into problems and sometimes those problems aren't easily solved.
NJI comp broadcasts articles and tutorials from NDIE champions like
myself that helped make up our developers' lives just a
little bit easier. To access these articles, visit Medium, dot com,
Forward Slash, n gcomm.
Speaker 2 (45:08):
Thank you for listening to the Angular Plus Show, a
ngcoff podcast. We would like to thank our sponsors, the
NGCOFF organizers Joe Eames and Aaron Frost, our producer Gene Bourne,
and our podcast editor and engineer Patrick Kays. You can
find him at spoonful ofmedia dot com
M hm.
Speaker 2 (00:08):
Welcome to the Angular plus Show. We're app developers of
all kinds share their insights and experiences. Let's get started.
Speaker 3 (00:21):
Hello, welcome back to another episode of the Angular Plus Show.
My name is Brian Love and I'm going to be
your host today and I'm joined today by my friend
and Canadian Jay Bell. Jay, how are you doing today?
Speaker 4 (00:33):
I'm good. You did better that you explicitly called me
on as a Canadian today because the last podcast we recorded,
I got lumped in with a bunch of other people
that were a different nationality than me aecast and I
was like, hey, remember.
Speaker 3 (00:47):
I, yes, yes, our good friends to the north here,
and you're like, pretty much do north of me. So
I'm in central Oregon, so you maybe a little a
little off to the right or a little to the east,
but not too much, though not too much. I could
just drove straight norths and I can get to your place.
Speaker 4 (01:03):
Through the cascades. But you'll get there eventually.
Speaker 1 (01:05):
Yeah.
Speaker 3 (01:06):
Yeah, which is exciting right now because we're getting snow. Okay,
today we are joined by a wonderful guest. We've got
are not on the show, and we're gonna be talking
about something kind of interesting. And I'm gonna introduce it.
So don't don't hit the unsubscribe button, don't hit stop,
keep listening. We're gonna talk about Tanstack Query. Now you
might think of that as like a React project or
(01:27):
as React query or something like that, but Tanstak querry
comes with a lot of benefits and it also comes
with an interesting story around Angular and signals, and we're
really excited to bring on are Not onto the podcast
today to talk about that story and to talk about
how Angular is becoming part of the tanstat query. So
I was just checking out the docs. You can go
(01:48):
to tan stack dot com, go to tanstat query and
you'll notice the drop down there's a framework option. They've got,
of course support for a lot of the JSX frameworks
like React and Solid, and then they've got to support
for a view and Spelt and then Angler's in there
as well. So we're really excited to see that happen.
And I know that's been a large open source contribution
(02:08):
kind of a project that are Not and other folks
have been involved in. So we're really excited to have
you on the podcast today.
Speaker 1 (02:14):
Are Not.
Speaker 3 (02:15):
Go ahead and say hello to the for our listeners
and please introduce yourself.
Speaker 1 (02:20):
Yeah, I'm Arnous. I'm a front and architect. I've worked
closely with Angler since Angler JS one point two, so
a long time. I also did some React projects. Then
I came across React query back at the time, and
(02:41):
then then I returned to Angler. I really wanted to
use Danceta Query on Angler and yeah, coincidentally, back then
signals were introduced to Angler, was the ideal opportunity to
to build the learned up there.
Speaker 3 (03:01):
Yeah, that's really wonderful. And where are you located?
Speaker 1 (03:04):
Are not in the Netherlands.
Speaker 3 (03:07):
In the Netherlands, right, Yes, wonderful. I lived. I know
the listeners aren't here for this part, but I lived
outside of the Netherlands, excuse me, outside of Amsterdam for
about five months and I really enjoyed it. So uh,
I kind of on the east side. But anyways, Yeah,
I'm really glad to have you on the podcast. Tell
me a little bit more about your experience with tan
(03:28):
stack query and kind of what are the benefits that
tan stack query brings to the developer, whether you're an
Engler developer or React developer or whatever. Kind of what
are some of the benefits and why might you choose
to use something like tan stack query.
Speaker 1 (03:41):
Yeah, so it's so easy to work with. You have
all these loading statas in there, very easy to use catching.
You don't actively have to fetch data when you need it.
It's it's fetched for you. So you just pass a
(04:02):
function that tells them se quity how to fetch the data,
and then it will fetch the data for you. And
on angler. I see that as actually injecting data as
a dependency. So in your component you'll have usually your
component you have a true inject query. You have to
(04:25):
observer uh, and it will when a new component is
initialized that uses the data, then it will be either
shown immediately if it's cashed, or they'll fetch it for you. Yeah.
It also good to know when it's already available and
it's considered still, which you can configure then it will
(04:48):
also will immediately show it and do a refetch for
you in the background. Also for the for the user,
it's it's it's it's very easy to build a very
nice user experience with MS query.
Speaker 3 (05:05):
That's right. Yeah, it's a wonderful experience. And there's a
couple of things you dropped in there, and I kind
of want to maybe circle back to them a little
bit more, because I think there's some nuggets in there.
So you talked about kind of the idea of data
is being kind of a dependency and injecting data into
your components. You also talked about caching, which I think
(05:26):
there's like a saying right in computer science the two
hardest things are naming and casing, so you you picked
one of those, And then you also mentioned things like
stale data. Of course that gets into caching, refetching, initial fetching,
passion validation, kind of background something showing maybe stale data,
then background fetching, and dealing with the kind of the
(05:48):
things around that. You know, I think it's We've got
a lot to explore there, but I just want to
quickly kind of tee this up a little bit. I
think for some of us as developers, we can kind
of get maybe confused, and we think that, like data
is really not a hard problem to solve. We know
that catching is hard, but like data isn't really that hard.
(06:10):
Like we've got now we've got fetch. It's this globally
available function. I can just go off and get some
data that I need and I'm fine, Like that's it right,
like all I need is fetch, And if you're a
React developer, you might say something like, well, all I
really need is use effect and fetch. And for those
of you that are maybe watching the news and kind
of saw what happened with cloud Flare and what happened there,
(06:31):
I think that's like two or three weeks ago where
they basically dedoss themselves as a result of using use
effect combined with fetch, And so I think that that's
I'm not going to dive into that because I think
we can do a whole show on like why that
is and what happened. And I'm sure people already have.
I think THEO has if you follow him on YouTube.
I don't watch all of his stuff, but I think
that popped up in my feed. And so it's an
(06:54):
interesting thing that I think as developers sometimes we see
data as just kind of like, this is a solved problem.
I don't really need to worry about this. This is
really simple, Uh, no big deal. And you can kind
of maybe take those same words when I said data,
maybe you could slot in something like auth or other
other things that we do. Right, you can say, like
auth isn't that hard, It's just to use the name
(07:16):
and a password, and I asked on in case somebody
and I get a session tooken or a cookie or whatever.
It's like, okay, well yes, but yeah, and that butt
is like following that butt is things like you mentioned,
which is hashing and validation and invalidation of cachine and
fetching and prefetching and background fetching and high all this
stuff hydrating the dom as a result, and like reacting
(07:38):
to that data updates, and so it actually becomes quite
complex quite quickly. It's one of those things that I
think starts out quite small, but exponentially as the graph
kind of ramps up, like as time progresses, the complexity
gets It's not it's an exponential curve, and that it
becomes increasingly more complex that you start to build larger
applications and data that depends on other data and all
(07:59):
this kind of stuff. I mean, So, tan Stak does
a really good job and I will stop talking here.
Tan Sak does a really good job of solving those
hard problems and allowing us to kind of build on
top of that. And so tell me a little bit
more about your experience of kind of building tansta query
for Angular and kind of some of the things that
you guys ran into as part of this process. And
(08:21):
then I'd love to get into some of those other
details if we have time around either cachinge or yeah,
background fetching and some of these other things. But I'm
sure everybody can go to the docks and kind of
see all of that, but tell us a little bit
more about how the project got started and where it's at.
Speaker 1 (08:39):
Yeah, or I thought it would be very easy to do,
but you know, signals were due back then, so I
also needed to learn how signals worked. Yeah, and there
are some complicated things in there, like timing issues. I
still need to solve some of some of them being
(09:00):
compatible with with multiple Angler versions. Yeah, the easiest thing
would be to just say, yeah, I just use the
newest Angler version.
Speaker 4 (09:08):
But the real world doesn't work like that.
Speaker 1 (09:14):
Yeah. One example of that is an cheap packager had
the release and then I don't do the details. But
then it didn't work for me at for for older
Angler versions. So now I just use ease built instead,
and I dropped I had a single componentity there for
(09:36):
the developer tools, I just dropped that and use a provider.
So I can just use the the public Angler API
not depend on on compiled code.
Speaker 3 (09:48):
Very cool.
Speaker 4 (09:50):
Yeah, that's why I relying on like the whole like
Angular compiler, bundler, kind of like packager and stuff like that.
I know there's been some changes over the years in
regards to Engie packager, so I'm not surprised that you
ran into those things, especially like I remember the ivy
switch being particularly bumpy and like the partial compilation states
(10:14):
and like all that kind of stuff. So I'm just
transforming to like with these build I'm sure it's way easier, So.
Speaker 3 (10:22):
I'm not Let's maybe circle back on like data as
a dependency. Tell me a little bit more about that
and how you see that in your world.
Speaker 1 (10:32):
Yeah. So, in most Angular code bases I worked on,
quite complicated services are used to fetch date mad bits
to whatever the front end needs, and then it's seen
as completely separate from the components. And I do agree
(10:55):
that the actual data vetching should be done outside of
the component. But on the other hand, I believe that
a component should be able to declare what data it needs.
This is I think this is new to Angler or
the Angler ecosystem as all. It's something they used to.
Speaker 3 (11:20):
Yeah, I agree, and we're seeing that with the resources API, right.
The resource API is tied to the life cycle of
the component, similar to maybe like the suspense API in React,
and so it allows you to tie that life cycle
to that component and it clean it will clean things
up and also like kind of initiate the fetching. And
so it's a very like the data is very like
(11:43):
first class. I know that's the right approach to say this,
but it's like it's highly coupled to the component, right,
It's like the component has this data and that data
can of course be shared down the children's component just
like you know, state or whatever it is. But it's
highly coupled to the component life cycle. And so the
idea here is that it's a dependency basically, and you're saying,
(12:05):
at this level of my componentry, I need I depend
the upon this data, and so I'm going to create
kind of I believe you guys call it an inject query.
It creates like a and that's what kind of instead
of US query, it's inject query, right, and you wire
that up with a with the HTP service in order
(12:25):
to actually do the fetch whenever tends that query needs
to actually go over the wire and fetch it. And
you've got kind of the same idea here that now
that query is available to be rendered in the template
and it's a signal. Is that correct?
Speaker 1 (12:40):
It's it's a return say object with it signals.
Speaker 3 (12:43):
Yeah, yeah, makes sense. And I fived said correctly or not?
It doesn't currently meet the resources of API or interface?
Is that correct or does it?
Speaker 1 (12:53):
No, it's not completely the same, but that's fine. Yeah,
there's there's much open lap. So uh, for the future,
I would like to uh be completely compatible with angler resource.
Speaker 3 (13:07):
Yes, yeah, that would be great.
Speaker 4 (13:10):
Yeah, it would actually mean what does that mean to
be completely compatible with the with the resources API? I'm
I've never actually used from someone.
Speaker 1 (13:18):
I'm not sure either yet. Yeah, I have to fight. Well,
that's designing APIs. It's quite hard. But I can imagine uh,
perhaps an inject query resource for example, or the methods
on inject query that would uh converted to status. Yeah.
Speaker 3 (13:41):
Yeah, well, I mean it may be. I don't know,
it'd be a breaking change, but I believe like right
now you've got data and that's the signal, which I
think it's fine, But I think uh, the you know,
the a p I. I'd have to look at it again.
I don't have it in front of me. The a
p I for the resource interface, you know, requires certain
methods or certain values to be there, and I think
you've got a lot of them, so it might not
(14:01):
be that hard to switch over the resource API. Don't
quote beyond that, but I was looking. I haven't used
Angular's tan stat query yet, so I'm actually really excited
to learn more about this. But yeah, I think if
you're if you're already working with something like the resource API,
you definitely would want to take a look at tan
stat query and Angular because it's very similar. You've got,
(14:25):
like it is, pending signal, an error signal, a data signal,
and then you whatever that data is, you can kind
of iterate over it. In fact, I think what you
guys have built here and what tant that query provides
is goes even further than the resource API, and you
know when it comes to like caching and all of that,
because the resource API just doesn't get into that, that's
(14:45):
not part of the responsibility of it. And so yeah,
it seems like what you have here is like the
resource API and then some additional like really good features
on top. So as an agultive developer, how do I
get started with using tanstat query with A or digest
install dependency or what's required?
Speaker 1 (15:03):
Yeah, instill install at ten sequary the Angler adapter, so
that's at tense sequary slash Angler Query experimental for the
time being.
Speaker 3 (15:15):
Mhm uh.
Speaker 1 (15:16):
And then you can do in your application configuration you
can do provide ten sequery mm hmm. And then past
new query client and quer client is an import from
tense saquary. So that's it and out of the box.
It's uh, it's a pretty pretty good up the box
(15:38):
configuration for most applications. But you can, yeah, customize pretty
much everything you need, like how long is something cached?
When is it removed from the cash when it's when
is it considered still so it will be cashed and
(15:59):
shown we immediately refetched on the background.
Speaker 3 (16:02):
Mm hmm.
Speaker 1 (16:04):
Yeah, tons of stuff.
Speaker 3 (16:06):
Yeah, it's really nice. And is that all signal based?
So can I provide signals as part of that API
and say, hey refresh when this when this signal emits
or not emits, but yeah, when the signal value changes. Yeah,
very cool. So it's very reactive. I love that so
it makes it a developer ergonomics. You just don't have
to think about things. If you've got to you provide
(16:28):
the signal, it'll it'll monitor that signal and wait for
that change to occur and say, okay, now I need
to invalidate that cash, I need to go out and
refetch or whatever it is. And you don't have to
manually do that. You just bind it up to a
signal and you're good to go. And that's really powerful.
And I assume we're talking a lot about query, and
I know we're not doing something like RPC, but like
(16:50):
it supports all kinds of like gat posts, like it
has queries and mutations and the full range I would imagine.
Speaker 1 (16:58):
Right, Yeah, it's actually completely neutral towards get or post
or even other a p I S, r p C
indeed or what's the word from Facebook.
Speaker 3 (17:15):
Graph? Yeah, yeah, it's agnostic. You can really wire it
up with whatever layer you want.
Speaker 1 (17:22):
Okay. Yeah, it's essentially management, so you could even use
it for a think a p I S. So it's
not even necessarily although that's right.
Speaker 3 (17:37):
Does it This is maybe an off, offhanded question if
you don't know it, that's okay, does it support streaming
and streaming protocols like can you do streaming in chunks
and that kind of thing with it?
Speaker 4 (17:47):
Or is it really?
Speaker 1 (17:48):
Yeah?
Speaker 3 (17:48):
Meant you can.
Speaker 1 (17:50):
The React query has a experimental a p I for that.
Mm hm. That's not Angler yet mm hmm. The streaming
career on there. Yeah.
Speaker 3 (18:02):
Cool, And so that's a work that's currently work in progress.
Speaker 1 (18:05):
Then yeah, if anybody wants to the pr for andler that.
Speaker 3 (18:10):
It would be awesome. Yes, please please. While we're on
that topic, because you mentioned it, tell me a little
bit about the team, and I assume you are open
to having people contribute to the project and collaborate with
You can tell us a little bit about who's involved
and kind of how you might get involved if you're interested.
Speaker 4 (18:30):
Uh.
Speaker 1 (18:31):
Yeah, lots of people come to you. I don't remember
all their names off handbook. Lots of people your or
I have the discussions through Twitter, pms and LinkedIn sharing
ideas on their code base.
Speaker 3 (18:52):
Very cool. We'll get a GitHub, I assume is it
part of the tans that query GitHub or you guys
as a separate repo.
Speaker 1 (19:01):
No, it's uh, it's an official adapter for don se query.
So it's in the.
Speaker 4 (19:07):
Yeah, okay, so people in the show notes for anybody listening.
Speaker 3 (19:12):
Yeah, so we'll get some links time at the bottom
of the show notes. So if you're interested, we're going
to drop some links to the website to get more
information as well as the NPM package information. And then
Jay's going to pull down the GitHub and we'll drop
that in the show notes as well, so that way
you can get involved with the project and and kind
of see where you might be able to contribute. What
a great way to a great project. Honestly, like, maybe
(19:38):
not the most I don't know, I was going to
say data is not sexy like somehow like maybe not
the coolest project to work on, but I imagine a
very exciting project to work on. There's probably some really
fun engineering challenges and things that opportunities to really learn.
So if that's something that excites you, then this would
be a great project to get involved in.
Speaker 1 (19:59):
Yeah, learned a lot about reactivity and Angler and I
kind of disagree that that it's not exciting. Well, data
on itself maybe not, but mm hmm, it's such an
important part for the user experience data fetching. It's a
(20:20):
very important for how fast an application feels yes, totally.
I remember a project that that back end it was
not very responsive, but because of the caching in terms
like query, the front end actually felt very irresponsive. Yes.
(20:40):
For example, when you when you page through a table,
it will refetch the next page mm hmmm. And then
where you click next, well, when you offer over it
it can uh well what I did actually, I think
us when you arrive on the page, it will prefetch
(21:04):
the next page, and the next button it will prefetch
the page after that.
Speaker 3 (21:12):
It's amazing.
Speaker 1 (21:13):
Yeah, felt very far.
Speaker 3 (21:16):
It's really interesting.
Speaker 4 (21:18):
Before you started working on this project, what was your
level of experience or exposure to Angular or did you
kind of just like figure out Angular to work on
this because you were a tan Stack fan.
Speaker 1 (21:29):
Yeah. Well I worked mostly on Angular, just a few
React projects, so I was quite experienced with Angler about
of course, signals were completely new back then, so I
had to learn those.
Speaker 4 (21:44):
Yeah, we're all learning those. We're all still learning signals. Yeah, yeah,
definitely not alone there.
Speaker 3 (21:54):
Okay, I've got I've got a million questions, So give
me if I keep hitting up. What's the testing story?
Speaker 1 (22:00):
Like?
Speaker 3 (22:00):
You know, so does tant that query come with its
own testing story or am I just using is there
a Is there a story here to be told? I
guess I don't know. I'm asking. Yeah, what does it
look like to do testing with tense that query angular.
Speaker 1 (22:15):
Uh while developing the elector or as a user using
it in your application?
Speaker 3 (22:20):
Either yeah, yeah, go ahead inform us or not? I'm
good for either or both. Yeah, whatever you feel like sharing?
Speaker 1 (22:28):
Yeah uh yeah, I did most of testing myself. People,
of course like to contribute new features, so that's that's
most of the prs. Hmm uh. Did receive some bug reports,
so what's those? Yeah, and I pored it thover most
(22:51):
of the react unit tests.
Speaker 5 (22:55):
Good morning. Do you know that moment when your coffee
hasn't kicked in yet, but just like is already blowing
up with Hey did you hear about that new framework
that just dropped?
Speaker 3 (23:04):
Yeah?
Speaker 1 (23:05):
Me too.
Speaker 5 (23:07):
That's why I created the Weekly dev Spur, the newsletter
that catches you up on all the web def chaos
while you're still on your first cup. Oh look, another
anger feature was just released, and what's this typescripts? Doing
something again? Look also through the poor requests and change
slot grama so you don't have to five minutes with
(23:29):
my newsletter on Wednesday morning, and you'll be the most
informed person in your standard.
Speaker 3 (23:35):
Ah.
Speaker 5 (23:36):
That's better the Weekly desper because your brain deserves a
gentle onboarding to the week's tech matness. Sign up at
Weekly Brew dot dev and get your dose of deaf
neews with your morning caffeine. No hype, no clickbait, just
the updates that actually matter. Your Wednesday morning self will
thank you.
Speaker 3 (23:54):
Yeah, very cool.
Speaker 4 (23:58):
What about from the user side, what's it like to test?
Like if I build an application using tense decreer with Angular,
the the Angular adaptor however you refer to it. What's
is there like utilities that I use? Or do I
just use standard you know, testing library or like what what?
Or like being their test bed. I'm assuming Angler test
bed would more than like respect it.
Speaker 1 (24:21):
Yeah, but I would definitely recommend to start with Angler
test bet. Most uses will use ap client from Angler,
so then you can use to M testing support for
that well, interpect very nicely. I did recently add support for.
Speaker 3 (24:44):
Not sure test or.
Speaker 1 (24:50):
Was recently added to Angler. That Bell's Angler that there
is a pending oh zoneless ending fetch going on desks.
Speaker 4 (25:04):
That's okay, Yeah, yeah, yeah, I think that's to support
the Zona's applications because of the whole stuff that Zone
would as would do.
Speaker 1 (25:12):
Yeah yeah, m hmm. That doesn't have to wait until
the thing because you can wait for Angler to be stable.
M hm. So yourself you can just uh await Angler
(25:34):
is stable.
Speaker 3 (25:36):
That's great. Yeah, it sounds like something the testing story
is is. Well, well, if you're already used to writing
tests and you're using the issue to be testing fiant
module or whatever it's called. Yeah, I might have messed
the wording up there.
Speaker 4 (25:52):
If you're already using the test bed, your t D
come on.
Speaker 3 (25:57):
But then there's also you have to inject it's and
it's to be client. It's agent client testing mark. I
don't know whatever it is, I whatever, my my editor
does get a I knows, I don't know. And yeah,
so the story is already there. That's really wonderful, Like
it's already because you're using the Angular ecosystem and dependency
injection and you're using application rep to stable and all
(26:20):
of that. Everything just seamlessly works and you touched on
service side rendering. So I just wanted to confirm if
I'm using service side rendering like tanstat query. This is
all well supported in terms of that, so I can
catch my data on the on the server and render
that all down to the client and and no problems,
(26:40):
I imagine, just kind of works out of the box.
Speaker 1 (26:43):
Yeah. I did test it. Yeah, I think it shoot,
shoot work. Yeah. I don't choose it. I don't choose
it myself, but okay, I tested it and I fixed
some things and as far as I know, it should
work very well.
Speaker 3 (26:59):
Fantastic. Yeah, And that's like, you know, I love your
response there because I can relate to that. You know,
when you're building something like this an open source, like
you can't predict every educase and use case and we're
trying to develop you know, good d X and good
developer tooling and we want to ship and it's all
done open source. It's you know, maybe more passion than
(27:22):
pursuit of revenue or whatever like that. But I love that,
Like you said that, you know, you tested it and
you fix the bugs, and I think that's what's beautiful
about open sources. If you you know, there's a listener,
if you're like, hey, I'm going to pull this down
and I use it with service I rendering and maybe
there is an educase that we haven't haven't been exposed to,
or the the collaborators on this project aren't aware of.
(27:44):
That's what open sources for. So you can file an
issue and even submit a PR to actually help support
those educases and contribute to the project. So, if you
are using, you're looking for a hot, really good data
fetching library. I really dat affecting. I feel like that
doesn't do its surface. It's really just like a data
management library instead of state management. It's like data management. Yeah,
(28:08):
this is a great one.
Speaker 1 (28:10):
It's it's it's just it specialized on acing state management.
Speaker 3 (28:16):
Acing state management. That's exactly right, Yeah.
Speaker 1 (28:19):
Very well with with other state management.
Speaker 3 (28:22):
So tell me a little bit about that. So does
it work with use? What is the ten stack state
management Library? Why can't I think of it? Ten sax store?
Speaker 1 (28:36):
Does it?
Speaker 3 (28:36):
Does it work with tense x store or is it
that's just for React right?
Speaker 4 (28:42):
Uh?
Speaker 1 (28:43):
I think it actually has a angler adapter as well.
Speaker 3 (28:47):
I didn't appeal with that, Okay, so I didn't know that.
Speaker 1 (28:53):
With ten sax store. But it's two signals. I can't
imagine it will grow very well together. I know a
signal store very well together with respect perfect use the
project Yeah for a sink U stance that query for
basically everything else use uh signal store perfect.
Speaker 3 (29:17):
Yeah. I love that. That's a great story. And does
it also expose through dev tools? I think I saw
not on the website. Now maybe I can go back,
but I think it also there's some debugging available. Do
you guys use the REDUCS dev tools or what tools
are y'all using to help support like debugging in terms
(29:39):
of tens that query?
Speaker 1 (29:42):
Yeah, then Secuary has its own deep tools yeah, no.
Speaker 4 (29:50):
Doubt, tanstat query, Dove tools cool.
Speaker 3 (29:54):
See so yeah, I haven't used them yet, so that's
good to know. Very good. Yeah, that I meant, so
this works.
Speaker 1 (30:01):
Uh, you know, when we want to test how does
an error state look like? You know, usually we just
hack some error in there.
Speaker 3 (30:12):
Mm hm.
Speaker 1 (30:14):
You can just tricker an error for a query and
that's it.
Speaker 3 (30:18):
That's really nice. That's really nice.
Speaker 1 (30:22):
Thanks.
Speaker 3 (30:23):
Yeah. What I'm hearing from you or not is that
this is not like an alpha release project. It sounds
to me because a lot because this is an adapter,
so it's using the adapt package, so it's built on
top of the like the core and the fundamentals of
of tandstat query, but out of the box for a
project that I'm not sure when the project actually started.
(30:45):
But it seems like this is production ready and comes
with a lot of developer ergonomics. Is that a Am
I hearing you correctly?
Speaker 1 (30:55):
Yeah? I would choose my cell phone production. I cannot
tell other people if they should use them production m h.
Speaker 3 (31:02):
But it is production, it's stable, You're.
Speaker 1 (31:08):
Actually ready. Yeah, that's a The API may not be
completely stable yet, so some things may change. But okay,
so for interest where minor cool.
Speaker 3 (31:21):
Cool man, I'm very interested. I'm gonna have to kind
of pull this off the shelf next time I get
an opportunity.
Speaker 1 (31:27):
To do so.
Speaker 3 (31:29):
Like I said, I've used tans that query in a
React application. Uh, it's kind of already the application. I
kind of stepped in and I'm helping a lot with
the AI side of things. But tant that query is
in there, and I use it. I just I don't know,
it's already set up and configured it and I just
you know, it's just there, you know what I mean.
So I'm eager personally just to continue to learn more
about this. And I had no idea they had their
(31:50):
own tools. Great, it sounds like I should have known
that a long time ago.
Speaker 4 (31:55):
I feel like an idiot, But it's like my job
can get so much easier now.
Speaker 3 (31:58):
Oh man, it's funny. So I'm gonna have to check
those out as well. So I've learned a lot already. Yeah,
anything else, ja, Do you have any other questions for
are Not?
Speaker 1 (32:11):
Or no?
Speaker 4 (32:12):
I mean, like you you seem to be really interested
in this, like is this gonna be helpful for you
for hashbron? Are you thinking like I remember I saw
a kind of line of thought you were going on
earlier with the whole streaming thing.
Speaker 3 (32:25):
Yeah, I don't know, you know what I mean? So
like hashbron is basically again like uh you you maybe
you could you could almost probably write an adapter on
top of this for an ll M perhaps if you
wanted to, and make it like OLM centric, But hashbron
already does all. It's on internal state management library and
kind of deals with all of the state if you
are a dealing It is really like are Not said,
(32:46):
I think he corrected me in a very good way
that you know, I said. You know, this is like
a data management library that it's kind of an accurate statement,
but I think Arena said is even more accurate. It's
an ASYNC state management library, and so is uh you know,
if you're using something like Brussel's AI SDK or hash
brown or something like that, it also is an acink
state management library. It's just context is narrowed down to lllms.
(33:10):
And then of course that brings in additional challenges. Is
like streaming and some of the things that we do,
which is like eager Jason parsing, because you're getting Jason
streamed from the LM, and that could be over several
seconds or even whatever a minute or you know, really
long time if you want to wait that long to
start start showing stuff to the user. So Hashbrown eagerly
(33:30):
parses the Jason based on the scheme and that you
give it. So that way we can kind of start
parsing immediately as soon as we get completed. Kind of
nodes or whatever you want, won't call them nodes in
the data tree, so you can immediately add that off
to the render or just start rendering in the user interface.
Not much different than what are not is talking about
in terms of data fetching. Very similar in terms of
(33:51):
like eagerly cash, eagerly fetching and being able to show
the user as soon as possible, kind of dealing with
style data and that kind of thing. We don't, you know,
when you're dealing with an LM, you're not getting into
like cash validation and invalidation and we don't really have
that concept, but we do deal with things, and we're
getting more into the weeds on contexts, storage and context
(34:13):
like I want to say, validation, But when you're dealing
with an LM in context now you've got to have
hooks to like trim, to compact, to manage this existing
state of messages and what's going over the wire and
that kind of thing. And so I think you'll see
a new release here from Hashbrown in the next couple
of weeks where we're going to tackle some of those
(34:34):
harder things around lllms and those kinds of things. But
this is a very async state management library that's just
incredibly helpful, and you could probably hook this in if
you didn't want to use something like hashburn, you could
probably hook this into an I don't see why not
and do the streaming and some of that stuff. Maybe
(34:55):
it's not as narrowly scoped, and so you might run
into some more edge cases, some more things around that
if you were to start, you know, heading a back
end that's streaming from an ll M. But I don't
see why you couldn't, you know what I mean, it's
maybe not for that, but yeah.
Speaker 4 (35:14):
The ten stack, well like this adapter specifically, and maybe
query in general and r You can correct if I'm
wrong here, but you can you can realistically hook up
like kind of any source, any kind of data source
that you want, right. It doesn't need to come to
the promise arrest endpoint, it doesn't need to photograph well query,
it's like just a.
Speaker 3 (35:34):
Just a promise, right I think because I think I
said client last value from right.
Speaker 1 (35:40):
Yeah, currently that's that's just promises. So if you have
a obturable you need to convert it. But I do
want to add obsurvable support. Mm hmm. Yeah, separate so
you don't have the heart dependency on RCTs.
Speaker 3 (35:57):
Yes, you have to have a separate Yeah that's right. Yeah,
but now the story, I mean, you can still use
our shift, you just have to have to do like
last or first or from or whatever. Yeah, you've got
to you just got to get a promise. Yeah, but
that's uh, you know, promises are well, we'll see with observables,
but promises are currently like you know, part of the
(36:17):
SPAC and so it makes sense that you would build
the ACYNC handler around that.
Speaker 4 (36:21):
But observables are heading towards being in the they are.
Speaker 3 (36:24):
That's right, been on ben hot again and cold and
yeah I do something like that. I'm not sure it'll
be very intrigued to see what actually happens with that.
It seems like better late than never, I guess, is
what I'll say. Right, it seems like okay, well I
guess you know, like five years ago would have been nice.
(36:46):
But here we are.
Speaker 4 (36:48):
But yeah, I don't know what stage we're at when
I have the proposal here, yeahposal anyway, it's a discussion
to be added to this BAC. So it is that
is get observables at some point.
Speaker 3 (37:02):
Yeah, yeah, I guess maybe one last question. I think
the answer is going to be pretty simple. Here are
not but like fully it's all signals, so it's fully
compliant with zoneless. So if I'm if I'm currently marching
towards zoneless application and migrating kind of going that way.
This works with zoneless right out of the box, I
assume correct.
Speaker 1 (37:22):
Yeah, actually I run all the unit tests.
Speaker 3 (37:25):
Yeah, sweet, cool, very nice, cool man cool. Yeah, let's see.
We asked for collaborators, contributors, anything else do you want
to talk about or not? It's anything else you wanted
to bring up before we start wrapping.
Speaker 4 (37:37):
Up, anything to call out?
Speaker 1 (37:39):
Yeah, if if anybody wants to help out, of course,
prs are welcome. Also if anybody wants to test SERF
right rendering for example or sparing partners are also welcome.
Always so very cool to share and see other people's perspective. Yeah.
Speaker 4 (38:02):
I was gonna say an easy way to contribute to
projects like this is helping with docs. But I gotta
say you're because the dogs are great.
Speaker 3 (38:09):
There's so much here.
Speaker 4 (38:10):
I mean, obviously all docs can always be improved, right, Like,
no dogs are perfect, but like there's a lot of
docks here covering a lot of stuff. Like I'm impressed.
Speaker 3 (38:21):
Yeah, same, Yeah, it's well done, really well done.
Speaker 4 (38:25):
And there's just like only one of the frameworks right, React, Few, Angler, Solid,
and spelled are all supported by this library query specifically.
And then there's obviously the adapters, right, but like, yeah,
I'm impressed.
Speaker 3 (38:37):
Yeah it's really well done. Yeah, it's what a great
community project. And yeah, so definitely we would love to
just take a quick second here and maybe just thank
some of the other folks that are contributing to this project.
I don't have the full list of contributors here in
front of me, but I was just looking down to
the commit history, and yeah, it's great to see. Obviously
(39:02):
I see are not here contributing heavily to the project,
but it's really great to see other folks contributing to
the project and and and all of that. So yeah,
I think for me, I think that's it. Or I
just want to thank you so much. Excuse me, thank
you for your contributions and open source. Thank you for
(39:23):
contributing to the Angular ecosystem and being a part of
it all. And yeah, it's it's definitely a passion to
build something like this, and and it's really wonderful that
you've you've shared that passion with all of us that
way we can take a look at it and play
with it and and also hopefully contribute to it. So
(39:44):
thank you so much for your contributions. Thanks for being
a part of the Angular community, and I'm really excited
to see what you guys are doing with this project.
I hope that people listen to this and they don't
get kind of distracted by Tan Sak or whatever. Excuse me,
I'm joking, And so yeah, definitely for the Angular developer
(40:05):
out there, tan stack is not just a React project.
There's a lot of history that might have been where
it came from, but it's a great open source project
that is, you know, kind of inclusive of a lot
of different frameworks, including an Angular and are not. You're
kind of spearheading a big part of that. So yeah,
definitely tip of the hat and much thanks.
Speaker 1 (40:22):
To you for that.
Speaker 4 (40:23):
I think that's something that dev's could get better at
kind of just overall is not getting hung up on
the origins of projects sometimes, right, we do a lot
of I find that the community gets stuck on the
fact that oldest library was meant for this thing six
years ago, so I'm not going to use it now.
It's like, I'm just sorry, that's thought out words. So
(40:45):
I hope. I don't know if there is a stigma
around the whole it being a React library or not,
but if there is, I hope that like our listeners
can can trust that it's not just a React library,
like it supports all the major frameworks, which is really
really cope.
Speaker 3 (41:00):
See and I just like maybe just the type found
of that. Jay, I just love how angularly. I don't
know if that's a word, but like this just feels
like as an Angler developer, this doesn't feel to me
like this has been bolted on to something else. Does
that make sense? Like, uh, you know, I look at
the code samples, I'm like, yeah, yeah, yeah, Like so
I've used this in React. I'm looking at this now
(41:21):
and it doesn't I don't feel like you just like
took Angular and shoved it on top of a React
project and just like glued it and got it to
work or whatever with a bunch of refs. Like it's
like it actually looks like you've done Like it's very
angular first, right, it's you know, it's using dependency injection,
is used some signals, it's you know, just yeah, obviously
really great typescript just general DX and ergonomics and validation.
(41:46):
It just feels like as an Anglar developer, when I
look at the docs and when I'm I'm kind of
looking at the sample code and all of this, and
it just feels like, oh, yeah, this is something that
I would write. This is just like what I would
write as an Angular developer. I don't have any example
off the top of my head, but there are times
when I've gotten into a library and I'm just like,
I'm not sure who wrote this, And I don't mean
(42:06):
any offense, but it just doesn't feel like it was
written by an Angular developer. It just feels like this
is not very done like the Angular way. Not that
there's any pride associated with that. It's just that you
get used to doing things kind of the way the
Angular community does it, and sometimes that gets missed when
people try to like bridge projects into maybe a different
(42:27):
framework that they just have less familiarity with. I would
be guilty of that. If I tried to build like
a Solid library, I'd probably be like, shit, I got
to learn all the like the nuance and the best
practices and like the ergonomics and what are people doing
in solid, you know? And I'd have to learn all
that to be able to build a library, you know.
Or I guess I could just open codecs and say,
(42:47):
refactor my entire library to support solid and just see
what it comes up with and then ship it, you
know or whatever. I don't know, whenever, choose your favorite
and just be like, you know. But yeah, well, thank
you so much, Arnd, Thank you, Jay. Really appreciate your
(43:08):
time as well. Thanks for coming on the show, Thanks
for teaching us about tan stat query, and yeah, really
appreciate it. Thank you so much, Arnod, thank you for
having me. Yeah uh And to the listener, definitely hit
that subscribe button. We've got lots of great content coming
up for the rest of the season and this is
just another example of I think of how we're just
(43:29):
kind of really leaning into bringing broadly, like really good
front end technologies to the Angular ecosystem to build great
user experiences. And are not hit on that several times
throughout today's episode. Is you know, this is a data
fectin or an ACYNC state management library, but it's really
about the user experience and so it's really wonderful. Angler
(43:50):
Dove agreed, are not If folks want to connect with you,
should they what's the best way to connect with you
on X or blue Sky or LinkedIn, or what's the
best way if somebody wanted to reach out to you?
And connect with you.
Speaker 1 (44:05):
Yeah, either a lot of them or the ten stack
Discord or Angular Discord.
Speaker 3 (44:10):
I'm also there, fantastic, Okay, those are great, great places.
So the Tan Stack Discord, the Angular Discord, and then
we'll grab your your handle, your X or whatever you're
using or LinkedIn. We'll grab those from you and we'll
drop those in the show notes. So folks that want
to connect with Ard can do so. And of course
(44:31):
go check out the GitHub repo and you can always
see the issues and pick up an issue or start
collaborating with are Not and the team. Now again, thank
you so much, Jay, appreciate it, Ard, and to the listener,
we'll see you next time. Bye.
Speaker 6 (44:46):
Hey, this is Pressed on Mine. I'm one of the
NJI Champions riders. In our daily battle to crush out code,
we run into problems and sometimes those problems aren't easily solved.
NJI comp broadcasts articles and tutorials from NDIE champions like
myself that helped make up our developers' lives just a
little bit easier. To access these articles, visit Medium, dot com,
Forward Slash, n gcomm.
Speaker 2 (45:08):
Thank you for listening to the Angular Plus Show, a
ngcoff podcast. We would like to thank our sponsors, the
NGCOFF organizers Joe Eames and Aaron Frost, our producer Gene Bourne,
and our podcast editor and engineer Patrick Kays. You can
find him at spoonful ofmedia dot com
Popular Podcasts
Stuff You Should Know
If you've ever wanted to know about champagne, satanism, the Stonewall Uprising, chaos theory, LSD, El Nino, true crime and Rosa Parks, then look no further. Josh and Chuck have you covered.
Dateline NBC
Current and classic episodes, featuring compelling true-crime mysteries, powerful documentaries and in-depth investigations. Follow now to get the latest episodes of Dateline NBC completely free, or subscribe to Dateline Premium for ad-free listening and exclusive bonus content: DatelinePremium.com
Betrayal: Weekly
Betrayal Weekly is back for a brand new season. Every Thursday, Betrayal Weekly shares first-hand accounts of broken trust, shocking deceptions, and the trail of destruction they leave behind. Hosted by Andrea Gunning, this weekly ongoing series digs into real-life stories of betrayal and the aftermath. From stories of double lives to dark discoveries, these are cautionary tales and accounts of resilience against all odds. From the producers of the critically acclaimed Betrayal series, Betrayal Weekly drops new episodes every Thursday. Please join our Substack for additional exclusive content, curated book recommendations and community discussions. Sign up FREE by clicking this link Beyond Betrayal Substack. Join our community dedicated to truth, resilience and healing. Your voice matters! Be a part of our Betrayal journey on Substack. And make sure to check out Seasons 1-4 of Betrayal, along with Betrayal Weekly Season 1.