Sponsors

Socials

Charles Max Wood [00:00:06]:
Hey, everybody. Welcome back to another episode of JavaScript Jabber. This week on our panel, we have Steve Edwards.

Steve Edwards [00:00:14]:
To borrow from AJ, yo yo yo coming at coming at you from a cloudy and cool Portland after having been in Arizona sunny and warm last week.

Charles Max Wood [00:00:24]:
Right. I'm Charles Max Wood from Top End Devs. Yeah. It was rainy last week here, but, looks like it's gonna be a nice day today. So, we have a special guest this week. We have Santosh. I don't know if we have your last name anywhere where I can see it. You wanna introduce yourself and let people know who you are and why we're excited to have you here?

Santosh Yadav [00:00:45]:
My name is Santosh, and, I live in Germany. So I live near Hamburg. I keep telling people that I live in Hamburg, but it's it's a lie because that's an ESSE. So Yeah. People people call me Hamburg. So, and I work for a company called Solonis. So I'm a senior software engineer at Solonis, and I'm involved in multiple communities. So I'm Google Developer Expert for Angular.

Santosh Yadav [00:01:06]:
I'm also a GitHub star. And, I'm also part of Linux Champions program, which is program Linux. And, I'm also cofounder for a community. So we learn we run a community called This is Learning. And this is tech talks or podcast, which we do generally. We have been doing it for quite a year now. And that's what that's what I do. And you might have seen me from the active one to the other one then.

Santosh Yadav [00:01:32]:
Yeah. I'm I'm so much active there.

Charles Max Wood [00:01:35]:
Very cool. Well, the topic I have in front of us, and this might be a little provocative for some people is why, why angular is the best framework for you. And, Yeah. I think just to get us started, it seems like react is kind of the one that far and away people are adopting. And so are you I guess what I'm asking is, are you putting forward that that's a mistake or just not as good a decision as you could make if you go for Angular?

Santosh Yadav [00:02:08]:
And I'm just here to share my point of view by Angular is best for you. Okay. But, yeah, people might I mean, generally, it's like up to you that you to you to decide what what is best for you. But Okay.

Charles Max Wood [00:02:22]:
So why should people use Angular then? Because I know Steve does view just to give a little background and I've done, I've kind of played with them all and I've mostly settled on Stimulus, which isn't a surprise if you're into Ruby on Rails. So, yeah, you you might get a little pushback here or there because neither of us use Angular on a regular basis.

Steve Edwards [00:02:47]:
For what it's worth, I'll throw in this caveat that I did start out with Angular, but it's what is now Angular JS, Angular 1, whatever you wanna call the the first version. So I never I I switched switched over to Vue at the time that it was rewritten into Angular 2, you know, and on, for various reasons, you know, that we can discuss. But so I wasn't that was my Angular was my my initial step into JavaScript coding on the front end.

Santosh Yadav [00:03:19]:
Most people because it was one of the earliest framework. Right? Mean, it came even before React. So most of the people were doing AngularJS and then Angular 2 came in, like, which is the current Angular which we are going to talk about. AngularJS is now end of reached end of life, so it's not even supported by Angular officially. But there are, I think there are few companies who are supporting long term support, but that's another thing. So it's, like, started around Angular 2 when people started moving away from AngularJS to other frameworks. I mean, that was, I would say yeah. That was, very hard time, even for the framework because there are multiple things.

Santosh Yadav [00:03:59]:
Right? When Angular 2 came, Angular teams said they are going to rewrite it in TypeScript and not many people were fan of TypeScript. So if you if you all remember, like, TypeScript, Angular was the first time, but to actually bet on TypeScript. They said, yeah, they they will rewrite everything in TypeScript, and then Microsoft got the, like, good good backing. They even, like, wrote a blog post few years ago that, Google team, our Angular team was a big support behind the types of stability because no one was trying to adopt it, but they did. They wrote a big enterprise framework using TypeScript, and it's by it's been used now by millions of developers. So that was the early start. And, of course, there was no path. I mean, the the another issue was Angular JS to Angular 2.

Santosh Yadav [00:04:46]:
Okay. There were there was no migration path, so everyone was scared. Like, what happens tomorrow? Right? I mean, if once, like, Angular JS is officially dead, how we will able we'll be able to migrate to Angular or the new version. There was no clear path. Of course, now there is a there is a guide there is a guide, like, how you can migrate your Angular JS app to Angular app, and, it's available now. But that was the time actually, there were some bad decisions, I would say, which which caused, like, big panic in the community when the people who were using I don't know, JSIS.

Charles Max Wood [00:05:21]:
Yeah. I remember we were talking to so I I was one of the people that started and hosted for a long time the Adventures in Angular podcast.

Steve Edwards [00:05:31]:
That was your first Angular podcast I ever started listening to, Chuck, was Adventures in Angular.

Charles Max Wood [00:05:35]:
Okay. Yeah. And so we were talking to, Mishko and, a bunch of the other people that were involved in a lot of that. Yeah. There was a lot of anxiety at the time over, you know, where Angular was gonna end up. And, yeah, they made the cut over to TypeScript. Initially, they were trying to come up with their own, script that, you know, transpiled to JavaScript that was similar to TypeScript. And I guess they, got what they wanted from the TypeScript team and made that transition.

Charles Max Wood [00:06:09]:
But yeah. So at this point yeah. Angular is much more modern. It has a lot of other things going for it. But but yeah. Anyway, it was just an interesting time to be involved in that. So

Santosh Yadav [00:06:21]:
That was it was, like, same time I started, like, doing Angular JS around 2015. I mean, I was late Mhmm. Into ecosystem, of course, and then 2017 I think Angular 4 came. That's when I when I picked it up. So, of course, I was lucky not to get into Angular 2. I know a lot of people were actually frustrated with every, like, breaking changes with the new RC and everything. I just keep hearing the story, and then it makes it like, oh, glad I decided not to jump in, write into it, like, when Angular 2 was going on.

Charles Max Wood [00:06:53]:
So what is it about Angular that you think makes it a great choice?

Santosh Yadav [00:06:57]:
Yeah. I mean, there are so many things. Right? I mean, first of first, of course, the current state of Angular. So if you see, like, of course, there was a time when people thought, okay, Angular is going to be dead. Angular is not going moving forward. Like, there are no new features. Even, like, there are no I mean, even they are not listening to the to the community. I mean, if you if you go to the open issues, they were, like, like, 2 top most voted issues which were still open for after 4 years and everyone was frustrated.

Santosh Yadav [00:07:27]:
Even the even the community, was, like, beta for anxious again that what's what's going to happen. And then came Angular 14. So Angular 14 is where all all this new features are the team actually start pushing so many new things. And we think they, they they we keep hearing about Angular and sounds. Right? And that's what happened. So after Angular 14, Angular started moving into different direction. They started listening to the community. So most of the, like, top four features are actually fixed now.

Santosh Yadav [00:08:01]:
I mean, they are they're already, being used by people. And I would say, the kind of shift which Angular has taken. For example, Angular Modules, like there was a there was a time that we, everyone who was actually teaching Angular or learning Angular, they had to actually go ahead and learn about Angular modules. Like, what what are modules? And now, with that, with after Angular 14, team decided to actually remove it. Like, they said, okay, let's make it optional. So they started removing the headaches or I would say the most important, not most important, but I would say most Angular not in option. Okay? They started making, Angular not in softening. Okay? They started making, some changes to adapt to more functional programming.

Santosh Yadav [00:08:56]:
For example, not everyone is more comfortable writing classes in TypeScript. So for example, guards, Angular guards, they used to be all classes. Now they are functions, which enabled, like, there are few changes or there isn't there are new functions which enabled most some of the library of this to actually adopt functional approach. One of the libraries, I think, Maxime may know is Njirix, which is for state management.

Charles Max Wood [00:09:20]:
So Njirix.

Santosh Yadav [00:09:22]:
Yeah. So they started moving most of the code to functional approach to make it, like, more, presheckable, more so more easy to write. So apart from that, of course, now let's talk about SSR. There was, like, long period of time where Angular's team said, okay, they are not going to do SSR. Right? I mean, they are not going to support SSR, and then community came and wrote Angular Universal.

Charles Max Wood [00:09:47]:
Yep.

Santosh Yadav [00:09:47]:
So Angular Universal was something which was driving SSR for a longer period of time. Now, Angular team has actually adopted that Angular New as well as part of the Angular package itself itself. It's called Angular SSR now. And the team is focusing more on SSR. So they're trying to give better experience when you are using SSR. So partial hydration is there. And now they are trying to merge Angular with another framework called BIS, which was actually an inter internal framework within Google. So it's like this is just announced at NGCon this year that they are going to do it to, make SSR more better with Angular.

Santosh Yadav [00:10:25]:
So they have partial iteration. And, of course, there will be, like, more granular label chain instruction, which is also coming with time everything in Angular. So those are the things which makes, I would I would say, the Angular's best framework for you right now because they are actually adopting new features, making learning framework more more more more easy to you. Like, they are removing all the complicated things, more complicated concepts. Yeah. We can talk about more.

Charles Max Wood [00:10:55]:
Yeah. It's it's funny because you're talking about a lot of these things. I mean, I remember when NGRX came out. I remember when Angular Universal came out, you know, we're talking to, you know, the the guys behind all that work. And yeah. It it seems like a lot of these things though anymore just kinda on par with what people expect from a modern framework. Right? I mean, Vue has a lot of these same kinds of options, don't they, Steve? And Vuex and Vue. I don't know how you do SSR with Vue, but

Steve Edwards [00:11:26]:
Yeah. There well, there's Nuxt. I mean, you have the, you know, like, Nuxt or Nuxt. I believe Angular has a meta framework, quote unquote, don't they? What is called?

Charles Max Wood [00:11:35]:
Scully.

Santosh Yadav [00:11:35]:
Ano Analog now. So I think Scully has been I don't know. I haven't heard anything from Scully.

Charles Max Wood [00:11:41]:
That's true. Brandon's been working on analog, hasn't he?

Santosh Yadav [00:11:44]:
Yeah. Yeah. So analog is the meta framework, which is everything.

Steve Edwards [00:11:48]:
So let me ask you one question. You know, one of the like I said, apologize. I haven't really worked in Angular 2X on. One of the features that Vue has that I consistently hear from people who have moved to Vue from Angular, React, or, you know, your framework of choice is the single file templates component, functionality in that, you know, basically, you have your template function, same with view 2 or view 3, or it's just straight HTML. Right? You're not having to put backticks around thing to make sure your quotes are, you know, just right so it can interpret it. It's just very easy to read, and then you plug in any of your attributes and your directives and classes and stuff as regular HTML, which makes it easier for a designer to work with. Now I'm reading Angular docs, and I don't see that capability. I might be missing it because I haven't been studying.

Steve Edwards [00:12:47]:
So how does Angular make the templating portion, easy?

Santosh Yadav [00:12:53]:
So if you go to Angular, of course, single file component is something which is not available in Angular. Right? So Angular's generally due to whenever you start a new project using CLM, So you have to bootstrap and component. So you bootstrap and root component and then green root component, you can render anything. And template is nothing, but you you can actually there are 2 options. So you can create an estimate file, and you can, like, provide it to the component class that, okay, this is the template and where you will have all the HTML files, or you can just write it within, the TypeScript file itself. So you have something called template as a string. So you can just save backfakes and then you can start writing, your HTML. So it's it's different from, others, like, for example, React has JSX, of course, who has dot move file, which is where you can write all the things.

Santosh Yadav [00:13:41]:
But Angular is like plain HTML, so you can just write HTML file and start writing your HTML with the help of, of course, some of the template functionality, which is provided by me. If you need a subc, If you need SFC, you should give it back to analog because they are trying to fill in this gap. So they're trying to adopt, like, all of these features, which is widely asked for, but by by the by the developers who are coming from background of who. Right? So they are, like, thinking about the various SFCs. So, yes, it's available with the hand of just I think, you can go ahead and try it out with the current trays.

Steve Edwards [00:14:21]:
Now with those templates, are you also able how does how is CSS handled? Is that something that's in a separate file that you would import into your component then, or is that something that you can do, like, a style block or something like that inside of your component?

Santosh Yadav [00:14:36]:
Both the options are available. If you want, you can do it in line with style styles properties. So you can just say, okay, this is styles, and then you can write your inline styles. Or if you want the CSS file to be a separate file, you can define it as a string, same as your HTML files, right? So you can create an SCC CSS file or SaaS file, whatever you're using, and you support everything. So you can just define create that file and just give a path. So it will just work.

Steve Edwards [00:15:05]:
But it's a separate file outside of your component. Is that right?

Santosh Yadav [00:15:09]:
You can do both. I mean, you even you can do, like, within your TypeScript file, you can say styles, and then you can start writing in a string.

Steve Edwards [00:15:17]:
But it's a string with backticks around it

Santosh Yadav [00:15:19]:
type of thing. Exactly. Yeah.

Steve Edwards [00:15:20]:
Okay.

Santosh Yadav [00:15:21]:
Yeah.

Steve Edwards [00:15:21]:
Can the CSS be scoped to a particular component, or is it always necessarily global?

Santosh Yadav [00:15:30]:
No. So good thing about Angular is by default. So, whenever you create a new component, like it's scoped to, the current component. So whenever you, like, create a new comp new Angular application, and you run it and you try to inspect any component, and you see the style so that you will find something called n c content appended with this. So it makes sure that yours, like, style sheets are not leaking globally. You can also make it available globally. It's a big so, it's like it's it's it gives you control to you. By default, it's supposed to wrap inside the component, so it doesn't leak.

Santosh Yadav [00:16:02]:
But if you want to, you can just make it available everywhere. That's also possible. Basically, we're writing global scope.

Steve Edwards [00:16:09]:
Now how does Angular handle or what are the options for, state management? Is that something that's built in that comes by default? You know, Vue has Vuex. Actually, with Vue 3, it's pinion now as the default state management tool for Vue 3. Is there, like, multiple options for options you wanna use, or is there a default that's built into Angular or at least maybe one that's recommended? How does that work?

Santosh Yadav [00:16:36]:
Question. Because this is where we can really talk about, signals. Like, signals are everywhere now. So Angular adopted signals, to versions part. So Angular 60, they make it, like, make it as an experimental. So, you know, the signals whole this whole signals idea, like, came long back, but it like, more people started adopting it after SolidJS came up with the solution. Right? And now signals are adopted by Zoom. It's adopted by Svelte, and Angular was also, one of the framework which adopted signals.

Santosh Yadav [00:17:09]:
So to make the state management easier, right, so earlier we had multiple options. So we had our shares, which was where you can actually write your own. So if you want to, like, write, create your own store, you can do it using our shares. Then people more people from the community, they created their own solution as I was talking to Charles and GIS, like, was one of the early library, which is widely used. So it's like, one of 1 out of 6 application in production uses n g r x. Then we have NGXS, which also is pretty good state management framework. And I think there are a few more, like, which are blue. I mean, it's good.

Santosh Yadav [00:17:49]:
I haven't used any any other, but there are few more, which exist. But it comes, and they wanted to make the state management thing easier because why you should always reach out to, state management liability. Maybe sometime you don't need it. And that's why they introduced signals now. So if you want to make your state management easier, now you can actually start adopting signals as well. And signals can live anywhere. Like, it can be it it can just live outside your file. Like, for example, Steve, you said you are coming from who? You are already familiar with Pinion, which uses signals, actually.

Santosh Yadav [00:18:23]:
In kind of signals. I mean, I I I don't know. Let's see. Is it still using proxy or it's it uses signals? But, good thing out of this all, new implementation, which I know did, signals are going to be part of JavaScript now. So it's it's actually being implemented as part of JavaScript specification. So now all frameworks have a like, most of the frameworks have agreed that they they need signals because they are using it. So, Ryan Cognito from SolidJS, he has been but he was the main person behind driving all this. And soon, like, it will be available in a browser.

Santosh Yadav [00:18:59]:
So that's that's the future, I think. I think everyone will be using signals in future.

Steve Edwards [00:19:04]:
Everyone? That's a pretty that's

Santosh Yadav [00:19:06]:
a pretty big statement. Because because it's it's part of JavaScript specification. Right? That's what. Because it's available in your browser now. So even though it's available to everyone, and I think most frameworks are already using it apart from React and and unless they come with some come up with some solution. But I think, yeah, all the frameworks are actually already on signals or give it give it and take because if you say we are not react, but PDF already uses signals as well.

Steve Edwards [00:19:37]:
So all the cool kids are using signals. Is that it? Exactly. Yeah. I've heard about it. And I I know my buddy, Eric Hanchet, did a video with signals and Vue. And, I'm not a big, you know, under the hood guy normally, but from reading about it, it's it's pretty similar to the proxies, if I'm understanding correctly, that that vue 3 uses for me for handling reactivity. Because you mentioned RxJS. And, you know, Chuck, to be honest, I always have flashbacks of some of the older podcasters, Ward and John, where they were talking about RxJS.

Santosh Yadav [00:20:11]:
And they

Steve Edwards [00:20:11]:
dived right in without explaining what up observables were, and it took me a while to get my head around it. But are are you basically saying that observables is state management? Because when I asked about state management, you brought up RxJS. Yep.

Santosh Yadav [00:20:27]:
Was the solution for a long, long time. So because Angular had first class support for RxJS, so every everything was observable. For example, if I'm working with the router, I mean, so every event is nothing but an observable. If we I'm working with HTTP, so it's nothing but an observable. So it was, like, they had, like, 1st class support from day 1, and that's why everyone started, like, building this solution around RxJS. So if you see NGRX, which which I mentioned, it was nothing but, like, IHGS plus Redux pattern, and it was just wrapped around it. But now, as we have signals so in generics have also came up with a new library called in generics signals, which is nothing but state management using signals. So to

Steve Edwards [00:21:12]:
the end developer then is the use of signals versus observables. Is it pretty transparent or is it a change that you have to make in your in your front end code to and how you work with them?

Santosh Yadav [00:21:26]:
Actually, that's it's a very good question because right now, community is very, com I mean, there are things which are very very complicated. For example, RxJS had a pretty good use case. Right? So very good you have events, like, where you want stream of data, you should go with RxJS. But most of the time, you don't need it. Right? You know, why you need a continuous, stream of data in your front end. Of course, there are use cases, but not all this. And that's where actually people wanted some easy solution. Right? And the signals fills that gap.

Santosh Yadav [00:21:57]:
But now you have to move. Like, you have to change your mindset from using r h c s to signals. That's complicated because a lot of developers are still confused. Like, where should your, data fetching go? Right? I mean, you have to at least, you have to face the data at some point in time. Right? And that's where, things are like, I think this is something which will which will be easy or not easy, but it will be easy to understand for the developers after, some people or most of the enterprises. Like, enterprises start adopting signals and they come up with the use cases where they needed signals and where they don't needed, signals. Right now, it's like most of the team members from AgroTeam and, the, JD community and some some of the people who have already worked on signals. They are trying to, like, teach people that how to use signals.

Santosh Yadav [00:22:48]:
But it's it's it's good to the adoption part is going to take some time here. As you said, yes, there are people like, even I was confused, like, why and where to use what. But I think, after reading some of the blogs, after reading some of the, like, after watching some of the videos around signals, it it is becoming easier or, like, easy to understand what where should I where should I use signals and where I should use RxJS. It's not like RxJS is going to go away. You know, as of today, like, 100% of the code base uses our access. So just think about it like removing the RxJS totally. It's just not possible almost. Right? So people have to, think about, like this is where I really like Angular that you don't have to adopt, like, new feature fully.

Santosh Yadav [00:23:33]:
You don't have to replace your entire code. This even for signals, it's like you can start writing your new code with signals, and you can keep your existing code as it is, and it will still work. And then if you want to go doc, you can do incremental migration for your existing code base. Right? So that's that's a very good thing about so you don't have, like, developers don't have to be, like, a dual market, like, when they are adopting new features. That okay. Should I rewrite everything? Migrate to segments and then use RxJS? But that's not difficult. So it will make your life a little bit easier, if you are working on enterprise and you already have access everywhere. I hope, Steve, did this answer your question?

Steve Edwards [00:24:15]:
Yeah. I mean, my understanding, you know, I've never directly used observables myself with the observable pattern, but my understanding from having listened to podcasts or, you know, read about it is that you really have to adjust your code to using observables. It's not like just plug and play. Right? You really gotta rewrite your code in a different structure to use an observable versus not using it, you know, for lack of a better term. So it would seem that moving from observables to signals would not be a minor undertaking.

Santosh Yadav [00:24:49]:
Oh, it it won't be. It won't be. For sure. I mean, if you are using NGRX, I mean, most people do as a set, like, one in 6 apps, in per in, actually in Angular uses NGRX. So Ngrx has some, new functions which are available where you can if you're if you're receiving observables, you can just convert them to signals. So they have new functions available with the new releases. So it will make it can make your, like, or migration a little bit easier. But if you have code base with RxJS, I would suggest don't go there, like, at the start.

Santosh Yadav [00:25:25]:
If you if you want to adopt signals, start adopting with new code which you will write. And then eventually, once you have time, which, which is hard. Right? I mean, this is hard because you have to show the value, to your product team or to your company. That's why we are migrating to signals. So just hold on there. And once you get time and money and energy, then go ahead and start adopting signals. Good thing about Angular, as I said, like, they always take care of, developers as well. They focus more on developer experience.

Santosh Yadav [00:25:56]:
So they have been trying to, provide new functions, which can make your migrations much smoother. For example, in Angular, whenever you have to do input and output, right? So you have input decorator and output decorator. But now you have input and output as available as signals. So they are just function, which gives you signals now. So, of course, once you are once you think that, okay, these are places where I don't need and probably a stream was, like, just signals would be sufficient, you can just start replacing them with the new function. And there also, a new angularj angular slash r h s interop like it, which is created especially for interoperability between signals and rxhms because it's not possible to just rewrite entire code. Right? To make that migration smooth, they also have given some functions which are available as part of framework itself.

Charles Max Wood [00:26:52]:
I also It's been just having having played with both, I found that and and I I can't articulate what the difference is per se, but it feels like in some instances, the way that observables work and the way that, you know, you you kind of put a stream of data through it, you know, it it updates or transforms, you know, depending on what you need versus the way that signals work, you know, where effectively you update a value and then anything that subscribe to it gets the, you know, gets the result. Some some data and some UI seem to lend themselves better to 1 or the other. And so I also see that, I think anybody who's thinking I'm just gonna migrate all of my observables to signals, you may be making things harder in some cases. You're definitely gonna make things easier in other cases. But, you know, I I think there's gonna be some, version of kinda getting a good feel for where signals shine and where you may just wanna keep doing things the way you're doing them.

Santosh Yadav [00:28:03]:
And, by the way, Steve, just to mention, you said you never worked with observables. Observables are actually going to be part of JavaScript specification as well. They're already available. So they're going they're they're behind a feature flag, but it's already available. So it will make probably, yeah, it will probably increase the adoption maybe, for observables. And it will also make one thing, really good, which is, the LHS library. Right? So LHS can just remove observables and just can be a place where you just you just have operators. So, it will be, like, win win for the community as well as the r e c s team

Charles Max Wood [00:28:39]:
who has

Santosh Yadav [00:28:40]:
been driving, this library for a long, long time.

Charles Max Wood [00:28:43]:
Yeah. We've had Ben on the show before to talk about, RxJS.

Steve Edwards [00:28:49]:
Now one of the things I wanted to go back to, one thing you'd mentioned earlier was regarding data fetching, between observables and signals that being moved. I know, you know, working in a huge Vue front end, enterprise application, you know, Vuex is where we do a lot of our data fetching in order to keep the back end and the front end in sync. What are the issues with the data fetching that you mentioned earlier, whether it was a change or whether it was an issue and all? And it was just offhand, and I wanted to clarify that.

Santosh Yadav [00:29:22]:
And, if you see, like, data fetching is always asynchronous. Right? But signal as signals are synchronous. So that's where you have to really, like, understand what you should be using there. And now it's just was a very good use case because you can just say, okay, it's an observable because it's a stream of data, and then you can just wrap it inside an observable and then the stream, which is coming from your back end. But with signals as it's in a synchronous, so asynchronous, it's, if you try to directly take the data, like, in Angular, we use something known as a strictly client service. So if you try to just start or take the data from a strict client and assign it to signals, it will fail. It will fail because it's it's the asynchronous function, which is returning an object to a syn synchronous thing. So it it won't be able to get the data.

Santosh Yadav [00:30:10]:
So this, that was where, of course, I when I tried it, I was, like, really confused. What should I do here? And luckily, I was experimenting with NGINX. So NGINX can fill that gap for me. I don't have to, like, focus too much on that. And I just use the existing NGINX functionality and just use a new, function which they have given. So it's called 2 signal, select signal. So so there is a function called select signal, so which can ramp up or give your stream and convert it to a signal for you without doing anything. I mean, you don't have to do much.

Santosh Yadav [00:30:42]:
You just have to replace your functions, which was earlier observable and just call 2 dot select signal, then that's it. That's it. So that's one thing where, like, a lot of people, a lot of new who have started opting signals will probably struggle.

Steve Edwards [00:30:58]:
So okay. Let me make sure I understand this because the issue is asynchronous is the way to do the data fetching, at least, you know, where I'm used to because you can load your page and not have to wait for a synchronous function of usage. So are you saying that the ngrx wrapper around signals gives you the capability to asynchronous data fetching? There's

Santosh Yadav [00:31:20]:
there's some yeah. Good.

Steve Edwards [00:31:23]:
Good. Yeah. That was my question.

Santosh Yadav [00:31:24]:
Yeah. Yeah. Yeah. So NGX has something called NGX effects, which is which is made which is made which was made for, actually, all these asynchronous events or any any, functionality which which has effects, right, which causes an effect. So it was there from table. And they made it, like, more better, like, 2 2 support signals. So they they just created this new select signal functionality so you can just easily, as I said, like, people who are using n g NGX already, they will have, like, a very not much complicated time by getting to signals. But people who are just using pain, I guess, of course, the interrupt library, which I mentioned, is available in Angular, is there, a day which they which offers the functionality to convert signals to observable and observable to signal.

Santosh Yadav [00:32:14]:
Even I think in generics is using that internally, but you still have to write some code.

Steve Edwards [00:32:19]:
So from a market standpoint, not sure if this is something you're aware of. Where do you see Angular being used ranging from the small one off, you know, hobby project up to enterprise applications. My perception, just from various data points that I've seen around the web, is that it tends to be more of an enterprise application, tool as compared to a smaller or hobbyist, you know, one off type of thing. For instance, my fire department uses a an application and that we use for tracking all of our incidents and medical calls, and it's very large. And it's, you know, it's it's a company that, you know, that provides instances for for different departments, and it's based on on, Angular. If using Angular, you can tell by looking in the code a lot of NG stuff. What's your perception of of where this tool is used in that spectrum?

Santosh Yadav [00:33:27]:
Can you say Angular is used in enterprises? Yes. It is. And that's, that's this is where actually team wants to change the perspective now the perspective now. Right? Because for a longer period of time, I mean, people were thinking about, like, of course, React has Next, who has next. So to do all this as a start, and it makes, like, very easy to play, with, like, new new, frameworks. But when it comes to Angular, I mean, that it was there was no clear way. Right? I mean, there were, like, so many things which we have to learn. For example, RxJS, you have to learn about RxJS.

Santosh Yadav [00:34:00]:
You have to learn about change detection. And now, actually, Angular is trying to move up from there. And the whole idea was although the whole idea is actually to get more adoption, to the new developers as well. That's the idea. So new developers can come easily and start playing around with AngularJS, right, rather than focusing more on concepts that are shares or officer peoples or whatever you call it, and, even modules. So now I think, more people have started talking about Angular because it's becoming, like, more easy, for new developers. I would not say, see, of course, there's nothing called nothing in easy nothing easy in actually programming. That's that's just a buzzword.

Santosh Yadav [00:34:43]:
But I would say as, like, Android grows, or the new feature comes in, and it, the less number of concepts which you have to learn about, it will it will, grow in the adoption as well. And, with introducing signals, which is being adopted by many frameworks, quality center frameworks, where who are using it, I think it will only go in the right direction and more people or more early come early stage companies will also adopt Angular, especially now the buzz around Angular plus base, which which will make it a better framework. I think one of the best, I would say, when it comes to SSR because this has been already being tested heavily within within Google. They have been using it for a long, long time. Even Google search is driven by this. And once that functionality comes to Angular, I think there is no, other framework which stands a chance, I would say. As as I as I said, like, I I like I like cortex and everyone loves that cortex. So this is my outtake that everyone will be doing Angular, if they think about SSM.

Steve Edwards [00:35:48]:
Well, okay. I'll dispute that just based on my knowledge of other frameworks. I'm just curious by way of little background and apologies if I missed this earlier. What's your experience in working with Vue or React or Svelte or some of the other frameworks as compared to Angular?

Santosh Yadav [00:36:07]:
I started with AngularJS early as I started learning React. And then as soon as I started writing JSX, I was like, okay. This is not the framework I want to learn. And then who felt, like, very similar to AngularJS. So I did something, but, once I wrote TypeScript. Right? So as I said, like, in in 2017, no one was doing TypeScript. And I I started writing Angular because of TypeScript. It sort of it was not like I I liked Angular, and I started doing TypeScript because I was a dot net developer.

Santosh Yadav [00:36:36]:
So I came from a dot net background, all the types, language, and I really like TypeScript. So I was like, okay, this is the line. This is the framework. We support TypeScript, so I'm going to just do this. Of course, I I learned, Voo. I mean, when it was Voo 2. I think I did a little bit of Voo 3 as well as I've seen all those things. But, yeah, never worked on it.

Santosh Yadav [00:36:55]:
Mostly, my work has been around AngularJS. And most of them, now I do the next step tools. But

Charles Max Wood [00:37:02]:
So what are the things coming out next in Angular that you're excited about or that people should know about?

Santosh Yadav [00:37:08]:
Of course. One thing which was as selected, a few concepts which is hard to learn about. Right? And one of them was change detection. So if you if you remember, like, Charles, like, early, yeah, Angular JS had Angular JS 1 had one issue. Right? It was, of course, change detection. So it has it used to write, like, do all these checks 10 times for no reason. And then I'm gonna t t 2 came, and team said, okay. We'll try to avoid all these loops which we used to run.

Santosh Yadav [00:37:34]:
But still, there was something known as the inspection, and it used to, like, run-in more, more faster way than the Angular chains. But there was something called NG zone. So we had we still have that, of course. So and this NG zone was actually responsible for catching all the asynchronous defense and then rerendering everything. Right? I mean, it's it's not basically rerendering. It's just, yeah, creating the proxy. Not not proxy, but it's actually rewriting, what what what what has been changed. And this was a big problem when it comes to enterprises because as Steve also mentioned, like, there is saying that Android is already, like, always being preferred for enterprise application.

Santosh Yadav [00:38:16]:
It's true. But when your application grows a lot and this change detection, like, runs most time most of the times, your application becomes slow. So Angular also wanted to tackle this, for a very long, long time. And there were, like, multiple discussion around it, how to do it, how to remove zone, and finally, signals came. As I said, like, signals is a big change because it is also going to change the way change function works in Angular. So now, the change detection can be granular. What I mean by granular is a component can have its own change detection. So you don't have to, like, run change detection on entire application.

Santosh Yadav [00:38:54]:
I can say, okay, if there is a component down the tree somewhere and it can have just its own state using signals. So now signal is going to maintain that for us. And with Angular 18, that is already shipped. So now you can have same section without NG zone and at a granular level. It's not, like, going to impact your entire application. This is what very important for me as well because, of course, I work in enterprise, have a very large application. And sometimes this this causes an issue, right, performance bottlenecks, and then you have to give, show white screens to your end users. And no one likes white white screens.

Santosh Yadav [00:39:31]:
Right? I mean, I of course, as a user, if I'm using it, I will hate it. And, that's that's going to be an amazing thing. But apart from this, like, there are few features I will name. And, for example, standalone components. So no modules, modules are optional. And standard in APIs for, for example, like, for S3DP, we had S3DP client. For router, we had, router, router module. So all these are actually becoming nothing but functions.

Santosh Yadav [00:40:00]:
So they are, like, just a function which you can register and then use it. Signals, of course. And then, you have, of course, with all the signals and RxJS thing, you also have interrupt functions, so it will make your migration smoother. And then, granular level change detection. But best thing about Angular, which I like, is NG Update. So if you have, worked in Angular for some time, you know, there's one thing which Angular team does. They never ship, breaking change. What I mean by that, they never ship breaking change.

Santosh Yadav [00:40:34]:
Of course, there are breaking changes which happens, but Angular team always ships a migration. So, for example, if they're introducing a breaking change, they will also ship a migration script to you, which you can run and migrate your entire purpose. And this is something which is tested, like, on the enterprise application. It's not something which is tested on your demo apps. It's so it's always it always works. Most of the developers out there who have been using Angular, they know that Angular is easy to migrate because of this migration functionality, which is provided out of the box. So you as in like, if you go to enterprises, what they care about, like, of course, they want to make sure that the framework they are using is up to date because there are there are companies which cannot tolerate vulnerabilities. And if your packages are old, of course, they will have vulnerabilities, right, at some point of the time.

Santosh Yadav [00:41:24]:
And then it helps you in that as well because they are offering this automatic migration. And this automatic migration is not only for enterprise applications. There are, like, millions of developers who are building light clicks, who are shipping packages for Angular. It also works for them. So, for example, if I'm maintaining a library, I can just run n g migrate, as, n g update, and then I can migrate my library to the next version and ship a new build to, like, how how how many numbers of users I have. And, that's the amazing thing because this is something which not many frameworks offer in case they are they're moving ahead. So Angular team is making sure that they are moving ahead, but they're also making sure the developers who have been using your frameworks, they're also able to move ahead without, like, going into trouble. With this, like, the migration is cool, but funny problem with migration is you may get stuck because not of Angular, but the 3rd party libraries.

Santosh Yadav [00:42:24]:
It's always like that. Right? I mean, if you use Voo or React, it's always not not React or Voo, but it's 3rd party libraries which you use, which causes issues some some time. And the same applies for Angular. So you have to make sure that, you have less number of third party dependencies as much as you can. Of course, there are things which you cannot avoid, but try to trust on the libraries which are already which are often updated. Right? Because as a satellite, the migration part is very easy. You can just do n g update, and then you are migrated with Next version, which is very good. And another thing is backward compatibility.

Santosh Yadav [00:43:02]:
So as I said, like, of course, we are going towards signals. We are going towards, stand alone components. We are going up towards, stand alone, APIs. But you can still go ahead and write a code, like, with your existing code base and start adopting these new features, which which is really cool about, Angular because you can just leave your old code base as it is. So you don't have to, like, rush into migration to adopt this new feature, and then you can just do this badly. So start writing your, like, new code with signals or stand alone component or with stand alone APIs, and then start slowly slowly migrating your previous code, which is which most of the developers needs. Right? I mean, they they don't want to actually rush and adopt new new features because just they cannot do, without them. For example, if I have to just click adopt signal into my whole codebase first before adopting signals, it will make my life easier life harder even.

Santosh Yadav [00:43:57]:
So those are few, amazing things which are actually happening in admin.

Charles Max Wood [00:44:03]:
Very cool. Steve, did you have any other questions?

Steve Edwards [00:44:12]:
I guess I'm just curious about this migration tool because I'm thinking what exactly does this target? Because, I mean, you could have the same code written 50 different ways in 50 different applications and trying to do have a one size fits all tool that's automatically gonna migrate code seems like all, you know, a whole different framework within itself. So I'm I'm just curious as to what exactly does this this migration tool that you're talking about update it? Just look for certain certain code snippets that, you know, might be of a an an updated feature and try to convert it for you or because I I could just imagine something you were written and then breaking things, you know, somewhere down the line. Obviously, you'd have, like, tests and, you know, maybe TypeScript to catch certain things, But that's not gonna catch everything. So what exactly does this migration tool do for you?

Santosh Yadav [00:45:09]:
So, as you said, like, people can write the port into 50 different ways. That's not true for Angular. So Angular has, like, very, good structure to write the port from day 1. So if you follow those structure, for example, if you have a component class and then you follow the patterns which are actually provided by Angular, there are not not 50 different ways to do this in Angular code base, basically. And that's why, actually, Angular it also makes the life easier for Angular team because they know that, okay, this is the code which I think we have to migrate. For example, as I said, standard on component. Right? So there is a migration which can convert your old code, which has angular modules to stand alone. Because we know that everyone was using module, that there is no other way to do this.

Santosh Yadav [00:45:52]:
And that's where your your migrations can just run and say, okay, this is the component we need to convert to stand alone. Another bit another thing. So if you if you are coming from Zuvo. Right? So you have something called, vu 4 or something. V v 4 or v if. Right? So those are

Steve Edwards [00:46:10]:
Direct address.

Santosh Yadav [00:46:10]:
V n. Direct address. Yeah. So we also had directives. So, of course, we have n g if n g 4. And now Angular is actually has have has adopted something called control flow syntax. So control flow syntax is something which just says at the rate, and then at the rate for, and then you can just write it without without need for any extra wrapper, which is, which is, I think, adopted from Svelte, if I'm not wrong. So it has something similar.

Santosh Yadav [00:46:37]:
And then to migrate, we know that, okay, there is something called n g f, n g 4, which already exists. So in the migration, what it does is it removes n g 4, n g f with the new control for syntax we have. And, if I talk about, like, there is a new migration coming from a STP client module. So everyone uses a STP client module. There's no other way. So they know, like, okay, we have to just replace s t p client module with the new new functionality which we are offering. So this this makes, the life easier for many of the developers as well because if I change a job, I know that this will going to be written in the same way as it was in my previous job. So that makes life easier for everyone even including the library of authors because they know that this is the only way where, like, in which my library will be used.

Steve Edwards [00:47:25]:
So in other words, the fact that that Angular is very highly opinionated in structure is what makes it easy to do migration. That makes sense. I mean, I've seen, maybe you can speak to this a little bit, the hierarchy of opinionation factors amongst the different frameworks. Seems to range from React, which is very unopinionated, and there's, you know, a bazillion different tools, whether it's routing or state or whatever, you know, up to Vue, up to Angular, and then maybe even Amber, if I understood, can be, you know, more opinionated than than Angular. I've heard that before. Does that sound fairly accurate?

Santosh Yadav [00:48:06]:
Angular is opinionated for sure.

Steve Edwards [00:48:08]:
So It

Santosh Yadav [00:48:08]:
says from the table, I think. Mhmm. Because, if you see, like, Angular has, there's no other way to do routing. Right? I mean, of course, there was in Angular GSTs. And now there's just Angular routers. So Angular provides route by default. Even for forms, Angular provide forms, even, as a circulate. For data fetching, Angular has something called S3DP already.

Santosh Yadav [00:48:29]:
So no one else no one is doing actually data fetching using other libraries apart from S3P. So that helps, as I said, as as you also mentioned. So that those are the things which are really cool about Angular.

Steve Edwards [00:48:40]:
Sorry. What is the name of the library that does the data fetching you just mentioned?

Santosh Yadav [00:48:44]:
Anglers /common/stgp.

Steve Edwards [00:48:47]:
Okay. Is that like so is that its own thing from the ground up as compared to maybe, like, a wrapper around Axios or something like that?

Santosh Yadav [00:48:55]:
Okay. So good question. Because Angular, had XML HTTP requests for a long, long time. So they had their wrapper based on it. But now most of the browser supports fetching play.

Steve Edwards [00:49:06]:
Oh, okay. So it's using native batch?

Santosh Yadav [00:49:09]:
So now it's using native batch. So it's like, it's so it's it's not by default. You can enable it. So it's it's still, like, behind some feature. So let's say when you're using HTTP client, you have to just say use Fetch and we'll start using fetch. Okay.

Steve Edwards [00:49:26]:
That makes sense.

Santosh Yadav [00:49:27]:
The default one remains SMS request.

Steve Edwards [00:49:29]:
Yeah. I know for a while, view is the view to compare has had view router. You know, by default, that's maintained by the community, had view x, which was maintained by the community, but you weren't required to use them. You had to opt in to use Vue router. You had to, you know, you had to install it and you had to configure your app to use it, which means that you can use other ones. Now by default, it's much easier to use the one that's more commonly used and and is maintained by the community, but you've always had that option to use, other tools if that will if for, you know, if for some reason you want to. Now what about the last question I have? I know we're getting short on time here, Chuck, is one thing I don't see as much is wrappers for Angular with other tools. Case in point is inertia JS, which is one of my favorites and I've talked about quite a bit, which is basically a plug, a glue layer between your front end and your back end.

Steve Edwards [00:50:34]:
Makes things incredibly fast, very easy to work with because you don't have to use your JavaScript router on the front end. You rely on your back end. You can plug it in with Node or Ruby or Laravel or so on. Or other tools like, Chuck, maybe you can tell me, Fred Shaw, Astro. I don't know if they have an Angular plugin or not, but I don't see plugins for Angular as, you know, with 3rd party integration tools like that as much as I do with React, Svelte, Vue. Do you see that changing in the future as Angular becomes more easy to use and less more for the enterprise level? Or what do you think? I mean, all the cool kids are gonna be using singles signals in Angular as as I get it, you know, from what you've been saying. So I'm just curious about that.

Charles Max Wood [00:51:23]:
I found a, AstroAngular

Steve Edwards [00:51:26]:
Oh, they do? Okay.

Charles Max Wood [00:51:27]:
Deal. Well, it's for analog.

Santosh Yadav [00:51:30]:
Yeah. So

Charles Max Wood [00:51:32]:
I would assume it works just with Angular. But

Santosh Yadav [00:51:36]:
no. That key with Angular doesn't work. So analog JS, Analog has actually a plug in, to work with Okay. Astro. Yeah. I mean, this is where, the meta frameworks can fill the gap still. So now, if, like, let's say once Angular becomes less complicated, like, the the the thing is they have their own, what do you say, Compiler, which makes things a little bit harder for everyone to adopt. But once that compiler becomes easy, I think more people will start adopting it.

Santosh Yadav [00:52:11]:
As of now, like, analog team figured it out, like, how to do it. So they they wrote their entire framework, meta framework using Angular plus Oon. Js. I think that's the, that's the, yeah. I think Oon. Js is one they have used, if I'm not wrong. And Next also uses it. Right? So, they actually took the inspiration from Next team and just made this made a framework.

Santosh Yadav [00:52:36]:
So I think they are like, everybody's working together to get this done. And the only thing which is stopping most of the people is the way Angular compiler works. It's like for a longer period of time, it was 1 liter pack. So it was just a putting web pack. There was no other way to do it. Now it's adopting ES field. So now it's it it actually uses ES field, and, it also uses V. But let's say once in future, let's say, let's just think about so once it's it's support starts supporting V for the production build as well, I think this is where it will become less complicated for the this, authors who are actually creating meta frameworks on top of it.

Santosh Yadav [00:53:15]:
So but it will it will I I think I see a future where it would be possible, but not not right now.

Charles Max Wood [00:53:21]:
Anything else, Steve, before we jump into pics?

Steve Edwards [00:53:26]:
No. That's all I got.

Charles Max Wood [00:53:28]:
Alright. Well, do you wanna start us off with the picks then?

Steve Edwards [00:53:32]:
Yes. We'll start with the, my picks, which are Santosh. In case you weren't aware, the dad jokes of the week are the highlight of every episode.

Santosh Yadav [00:53:41]:
I

Steve Edwards [00:53:41]:
just gotta get a mind up here. I was so busy talking. Okay. So question. Would it let's see. Where did we go? Would it kill the maker of avocados to put a different toy inside? I mean, I already have, like, 50 wooden balls already. The other night, my son, who's younger son, said, dad, there's a monster under my bed. Can I sleep in your room? And I said, look.

Steve Edwards [00:54:17]:
It's you who's after. Why make him my problem too? I was very sympathetic as you can tell. And here's a question for you, Chuck or Santosh. What was more important than the invention of the first telephone?

Charles Max Wood [00:54:35]:
The invention of the second telephone?

Steve Edwards [00:54:38]:
Very good. Thank you. Thank you. I'm impressed, Chuck. You know, without one phone, really nobody to talk to. One of the funniest sketches I ever heard is if you remember Andy Bruni. Chuck, Vermill, Andy Rooney used to do his little bits at the end of, 60 minutes. And he played a bit one time where they supposedly had the the, answer to the first call to Alexander Graham Bell's telephone, and it was, I'm sorry.

Steve Edwards [00:55:08]:
I'm not here to pick up the phone right now, but if we leave a message, you know

Charles Max Wood [00:55:12]:
Right.

Steve Edwards [00:55:12]:
The answering machine to his first phone. It was great. Anyway, Yeah. That's all I got for PIX.

Charles Max Wood [00:55:21]:
Alright. Well, then I'll jump in with PIX. Yeah. This last week I've mostly been doing the political stuff and not the board game stuff. So I'm going to pick 2 games that I've picked before that I played either with my family or my friends. The first one is, and this is one I've been playing with the family. It's called the crew and, it's a card game and you get basically, you get assignments. There's a little log book basically that tells you what to do.

Charles Max Wood [00:55:58]:
So it's like you have to, get these 4 cards and you assign them out, you know, to different people. And then, yeah. Anyway, it's, it's really fun. Board game geek rates, it weights it at 1.95. And, basically, you just have to be old enough or mature enough in your thinking to figure out, okay, how do I play these cards so that the right person gets the right card? And, it's very fun. We really, really like it. And so we're on there I think there are 75, stages that you go through. Right? And the first bunch, you just breeze through them, like, the first 10 or 15.

Charles Max Wood [00:56:45]:
Right? And so then they get progressively harder. So the last one, you have a way of communicating and you couldn't use that communication option until the 3rd trick. And then there were 6 cards that had to be taken, and one of them was assigned to be taken first and the other was assigned to be taken last. And it, it took us a bit of doing to get it with 5 people. So, yeah. Anyway, the crew it's way fun. The other one on Wednesday, me and my buddies got together and we played another round of risk legacy, which is also just, I grew up playing risk. And, so I kind of have this nostalgic love of the game.

Charles Max Wood [00:57:33]:
Risk legacy is if you've played any of the legacy games. Right. So the last game you played and the game before that all impact the current game. And anyway, it's been really, really fun.

Steve Edwards [00:57:47]:
I don't How do you keep track of that?

Charles Max Wood [00:57:50]:
So it has ways of doing, doing that on the board. Right? So, we've played 4 rounds or 5 rounds. I think we've played 5 rounds now. I won the first two. And so now everybody's gunning for me to make sure I don't win again. But I think one of my friends just won their, either one of them won their 1st round or somebody just won their 2nd round. Because I was I was actually eliminated from the game. They, they wiped all of my guys off the board this time.

Charles Max Wood [00:58:25]:
It, it has a board game weight on board game geek of 2.59. But it's been way fun. And then, like I said, I really love playing risk. And so, Yeah. So I'm gonna pick those and then, yeah, Getting the page up for JavaScript Geniuses. You can find find that at javascriptgeniuses.com.

Santosh Yadav [00:58:52]:
And,

Charles Max Wood [00:58:54]:
yeah, I think those are all my picks. Santosh, what are your what are your picks?

Santosh Yadav [00:59:01]:
It can be anything? Or

Charles Max Wood [00:59:02]:
It can be anything. Yep.

Santosh Yadav [00:59:04]:
Yeah. Okay. So we are lot we are, like, posting our new next episode actually, tomorrow on this is Tech Talks. So, the new episode is with the Angular contributors. So in case you are looking forward to contribute to Angular, just go through the episode. And, next one would be, like, I'm I'm I'll be there at Watercann Festival, which is a very big event here in Germany, which connects a lot of open source contributors, open source companies, like, or early stage companies. Just in case you are coming there, yeah, and you're from Germany, just let me know. We can we can meet probably.

Charles Max Wood [00:59:41]:
Cool. And if people wanna find you online, where where are you usually at?

Santosh Yadav [00:59:46]:
So my Twitter handle is Santosh at the dev. I think it's, there's some type over here, but it's Santosh at the dev. You can find me on LinkedIn and Twitter, both places with the same handle.

Charles Max Wood [00:59:55]:
Awesome. Alright. Well, let's go ahead and wrap it up. Thanks for coming. This was a lot of fun.

Santosh Yadav [01:00:00]:
Thank you. Thanks so much.

Charles Max Wood [01:00:02]:
Alright. Till next time, folks. Max out.