September 5, 2024 • 51 mins
Dive deep into the latest trends and challenges in the development world. Lucas, Armen, and Subrat Mishra are joined by a special guest, Rakia Ben Sassi, a Google Developer Expert in Angular.
In this episode, they explore the complexities and potential benefits of adopting Zoneless Angular and discuss the critical updates in Angular 18, including improved composability for micro frontends and interoperability with other frameworks. They also cover the technical barriers and performance issues associated with Zone JS, and how its removal could significantly streamline your development process.
They delve into the practical considerations for server-side rendering (SSR) and client-side rendering (CSR), offering a hybrid approach that could be beneficial for large applications. Rakia shares some fascinating use cases, including an e-commerce application example, to illustrate the real-world impact of choosing SSR versus CSR.
They touch on the new features in the Angular Forms API, including a discussion on the new observable for form control events, and its relevance in complex applications.
Finally, they wrap up with some promotional content, where Armen talks about his upcoming book "Modern Angular," Lucas highlights Top End Devs' tech podcasts, Rakia promotes her blog and video courses, and Subrat invites you to check out his YouTube channel.
Social Media
Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.
In this episode, they explore the complexities and potential benefits of adopting Zoneless Angular and discuss the critical updates in Angular 18, including improved composability for micro frontends and interoperability with other frameworks. They also cover the technical barriers and performance issues associated with Zone JS, and how its removal could significantly streamline your development process.
They delve into the practical considerations for server-side rendering (SSR) and client-side rendering (CSR), offering a hybrid approach that could be beneficial for large applications. Rakia shares some fascinating use cases, including an e-commerce application example, to illustrate the real-world impact of choosing SSR versus CSR.
They touch on the new features in the Angular Forms API, including a discussion on the new observable for form control events, and its relevance in complex applications.
Finally, they wrap up with some promotional content, where Armen talks about his upcoming book "Modern Angular," Lucas highlights Top End Devs' tech podcasts, Rakia promotes her blog and video courses, and Subrat invites you to check out his YouTube channel.
Social Media
- Unvoid
LinkedIn @unvoidweb https://www.linkedin.com/company/unvoidweb
Instagram @unvoidweb https://www.instagram.com/unvoidweb - Lucas Paganini
YouTube @lucaspaganiniweb https://youtube.com/@lucaspaganiniweb
LinkedIn @lucaspaganiniweb https://www.linkedin.com/in/lucaspaganiniweb
Twitter @lucaspaganini https://twitter.com/LucasPaganini
Instagram @lucaspaganini https://www.instagram.com/lucaspaganini - Armen Vardanyan
LinkedIn https://www.linkedin.com/in/armen-vardanyan-am/ - Charles Wood
Linkedin https://www.linkedin.com/in/charlesmaxwood/ - Subrat Mishra
LinkedIn: https://www.linkedin.com/in/subrat-k-mishra/ - Rakia Ben Sassi
LinkedIn: https://www.linkedin.com/in/rakiabensassi/
Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.
Mark as Played
Transcript
Episode Transcript
Available transcripts are automatically generated. Complete accuracy is not guaranteed.
Speaker 1 (00:05):
Hey, Welcome to Adventures in Anglar, the podcast where we
keep you updated on all things Angular related. This show
is produced by two companies, Top and Devs and Onvoid.
Top anddves is where we great Top and Devs to
get top and pay and recognition. We're working on interesting
problems and making meaningful community contributions. And Onvoid provides remote
design and software development services on the most client friendly
(00:29):
business model. The clients only pay after the tests are
delivered and approved. In today's episode, we will talk about
what is new in Angular eighteen and we will also
just briefly mentioned because we don't really have a lot
of debt about it yet. We're also going to mention
a bit about Angular eighteen point one. My name is
(00:52):
Lucas Paganini. Your hosts in the podcast. Joining me in
today's episode are the also hosts Arman Vardenian.
Speaker 2 (01:00):
Hello, everyone, Finally back to the podcast.
Speaker 1 (01:04):
Subrad Mischa, Hey, Hey, and our very special guest, which
according to her is not that much just a Google developer,
expert in Angler and a software freelancer, Rakia Ben Sassy.
Speaker 3 (01:25):
Hi everyone, and thanks for having me. Maybe you I
said just because my early background was actually I was
at the beginning of my career Java developer and after
over a decade I became a JdE, which was not
(01:45):
the main maybe expectees or main focus in my career.
Speaker 4 (01:51):
But thanks anyway, never is, never is.
Speaker 1 (01:55):
Thank you for your time, thank you for being here,
and well let's get to it. So there are many
things that were released on Anglar version eighteen, but I
would like to know, Rakia, from your point of view,
what are the most relevant ones and then we can
(02:17):
start from there.
Speaker 4 (02:19):
So for me, maybe not. In the it was.
Speaker 3 (02:25):
Sance a while the featured the failable and they was
very happy to see that it has reached a more
stable face in the VAGIN eighteen and it was also
amazing how companies like built dot com have reached an
improvement in.
Speaker 4 (02:44):
The bundle size.
Speaker 3 (02:47):
With fifty percent thanks to the to using this feature
the failible. Besides this, I'm also excited about the improvement
toward the use of the development of zone less angle
application and which will be hopefully with the use of signal,
(03:12):
will let us avoid a lot of struggle with the
change detection, especially when the applications goes more complicated.
Speaker 1 (03:23):
Yeah, yes, okay, So a couple of very interesting subjects
if if that's okay with you guys, I would rather
start with zoneless because I think there's a lot of
hype in.
Speaker 2 (03:37):
There and it's the start of the show.
Speaker 1 (03:40):
Yes, yes, a lot of vipe and a lot of
people haven't really tried the new experimental zoneless support yet,
And well, I guess we can first start with what
are the uh, maybe the drawbacks that aren't clear to
to those that want that tries a less Maybe there
(04:02):
are things that they don't know that would be problems
if they actually did try it.
Speaker 3 (04:09):
I think that the change detection topic in general looks
like a monster maybe. And also when we need to
go away from zone, we need to get our hands
dirties with the angular conflict for Angular Jason, and yeah,
(04:33):
we need to take care about a lot of things.
Speaker 4 (04:37):
This is just.
Speaker 3 (04:38):
My my my thought on that topic. And maybe a
lot of developer don't know how how component which are
using on push change detection, how they will be impacted
by this and the other components, and if if they
(05:00):
have to migrate everything to signal or not and so on.
So I think everyone needs to feel more comfortable and
have more confidence before they can start on this issue,
(05:20):
what's your idea about all your thought maybe aman or subad.
Speaker 5 (05:27):
I think personally that the community is gonna be sweet
for a while because if you have been developing with
Angular for a while and you haven't paid attention to
what change detection is, you.
Speaker 2 (05:42):
Don't really need to optimize it.
Speaker 5 (05:44):
If you don't care, right, you can just build your
software and it will work fine. I guess in the
end of the day, if you don't know about zone
less and one day it's a less become the standard,
then you're gonna hate it because why do I need
the application works fine? Why do I need to switch
to the orble signals? Blah blah blah. But if you
(06:05):
have been paying attention and you I don't know encounter
like the the hated expression has check changed after it
has been checked error read, and you've been trying to
optimize everything and so on and so.
Speaker 2 (06:19):
On, you probably already took some steps in the.
Speaker 5 (06:23):
Direction of zoneless, for example using signals right, because switching
to signals isn't.
Speaker 2 (06:28):
That hard at the end of the day.
Speaker 5 (06:32):
And now if you know that for you, it's gonna
be an exciting feature. So people are again gonna be
splitting in like two different camps. But what I like
about the way that the team does it is that
that kind of rolling really slowly with it. Okay, now
we have some experimental support for zoneless. Maybe in the
(06:53):
next release we will get some upgrades.
Speaker 2 (06:58):
I don't know.
Speaker 5 (06:59):
It also depends on the library, you know, maintainers, because
you know someoneys can break libraries that don't kind of
work with it fine, and there's lots lots.
Speaker 2 (07:11):
That's consider.
Speaker 3 (07:13):
Well. One expression came to my mind now, So it
was so it was about the on push change detection.
So whenever any developer needs to or think or want
to use the on push change detection, they should be
aware of the code design, and they should be aware
of the immutability issue and so on. So I think
(07:38):
that also for me, as any angle like developer, I
need to be aware what should what should I take
care of on my applications code design when I have.
Speaker 4 (07:51):
To use zones?
Speaker 3 (07:52):
What should they change in my code design? Should they act?
So that's it's about the code design and how much
should I reflect in my application.
Speaker 6 (08:04):
Yeah, I was just thinking the same thing like this
joone less will for focus like people will focus more
who already have on pushing detection strategy on or maybe
maybe if they care a lot about how it how
to change detection works and they will like be eagerly
(08:24):
waiting for this change to go full on. Maybe they
are doing some experimentation in their deb environment with the
experimental feature. Yeah, at the end, I think how ANGELA
might goes is as it backward compatible. It's just like
when everything goes onless. It just works, so you don't
need to worry much about how the jone lists how
(08:48):
to handle it. But yeah, if you're doing on post,
then you are in a good direction.
Speaker 2 (08:57):
Well if you are like uh, thinking about it.
Speaker 5 (09:01):
Actually, just migrating to some one lists is quite simple
in the sense that you just you know, you say,
it provides a lie education, removes zones, and it's.
Speaker 2 (09:11):
Kind of fine.
Speaker 5 (09:14):
If you have already using the on push strategy, you
also probably will be fine. But the thing is, we
don't really know the symptoms of this disease yet because
when people have tried it experimentally, obviously no one uses
this on a production application to really know where they can.
Speaker 2 (09:35):
Have bugs or whatever.
Speaker 5 (09:38):
Like I have a personal website I build with with anger,
I put like experimental zone lists on it, but it's
really irrelevant apps.
Speaker 2 (09:45):
Like it's not doing anything complex, right, And.
Speaker 5 (09:51):
That's why it's kind of hard to create content about
z on list right now, because what are you gonna
say about it. Okay, use this function and remove zone
just from not one whatever, and then you're like, Okay,
it's experimental, don't try it, and then it's over. What
I would really love to discuss is what's kind of
(10:14):
going on internally, what we know about it, because the
people on the team were like very vocal about it.
They even shared like the roadmap, right, I think I
can pull up road map from on somewhere. I'm not
sure though that I can find it.
Speaker 1 (10:29):
Yeah, I mean, I think what you guys said about
libraries is probably the main thing that I don't think
people are realizing. It's not just a matter of oh,
I'm starting a new project, so I'm gonna go zoneless
because then I can just start zoneless from the from
the geck go. But are the libraries the head that
(10:52):
you want to use in your project also supporting zoneless,
because otherwise it's just not going to work. So it's
it's tricky, you know, because at the at one hand,
you want to start using it, at.
Speaker 7 (11:09):
Least I do, but.
Speaker 1 (11:13):
There are just so many other pieces that just don't
feel stable enough yet that I'm not even sure if
if it makes sense to use it at all, Like
unless you're a library author and you're just you want
to make your code work with that new standard, then sure,
(11:36):
But for people that are writing applications, I'm not sure
if it's the right time for that.
Speaker 3 (11:46):
Absolutely, you put to the table avery important point. It's
just like when upgrading it's i'll tell you one of
the hood when well, some projects didn't upgrade to higher
Angular versions because they use a lot of library that
are not ready for the new Angular version.
Speaker 4 (12:08):
This is one point and the other points it's not.
Speaker 7 (12:13):
Stable.
Speaker 3 (12:13):
Some parts are in developer mode. And for me for example,
as maybe poor or someone who has the decision to
add new features to the backlog and to the to
the planning of our experience, I need to be aware
(12:34):
of the business value. It's not when I have a
lot of other features and so on.
Speaker 4 (12:40):
What can I win from it?
Speaker 3 (12:42):
And can I give it a higher priority so that
my developers will spend more time with it, or it's
not the right time for it.
Speaker 1 (12:53):
And also If you look at the official blog post
when Angular EIGHTEAM was released, it was written by Minko.
And when it comes to defining too to announcing right
the new experimental change detection, one thing that he mentions
(13:13):
is improving composability for micro front ends and interoperability with
other frameworks. I think that's really interesting, Like what does
he mean by interoperability with other frameworks? How does zoneless
make Angular more inter interoperable with react or view or whatever,
(13:39):
and even for micro front and front ends for that matter.
Speaker 4 (13:43):
Very good question wants.
Speaker 7 (13:47):
Answer I have. I have a small opinion because outside
library and.
Speaker 6 (13:56):
Then having other places, if you're combining that with for
any micro front ten and you need to have the.
Speaker 7 (14:04):
Running in your in your bunt.
Speaker 6 (14:06):
Maybe if you're doing subside or our client side, then
you were removing the jone and having having the signals
we change the text and everything reduced wait from the
from the micro service. Like first of all, if you're
using the micro service one was with react ones.
Speaker 1 (14:30):
But yeah.
Speaker 2 (14:33):
And yes maybe maybe.
Speaker 1 (14:41):
Super I'm sorry, but your audio in the middle started
to get weird, Like you was sometimes really really good
and sometimes I couldn't hear you.
Speaker 2 (14:52):
Okay, good.
Speaker 5 (14:55):
Now it is.
Speaker 1 (14:57):
It still seems like it's oscillating a bit, but it
is good at this particular moment.
Speaker 6 (15:04):
Yeah, So what I was saying is as the bundle,
so you don't just will be removed from the bundle.
So now you have less load on an overall application.
Maybe it's sub side outline sight and then that that's
how you you can combin you React and Angular and
(15:24):
run together in.
Speaker 7 (15:26):
The project at a single single a single host.
Speaker 1 (15:30):
Oh so it's just a matter of lass of lass polyphils.
Speaker 2 (15:36):
On one point.
Speaker 6 (15:39):
One of the points.
Speaker 5 (15:39):
I can have the bigger point to this because I
worked with Angular elements.
Speaker 2 (15:45):
Everyone knows that. Yeah, and.
Speaker 5 (15:49):
You know when you put it in another application, everything
in your custom element is wrapped inside zone JS.
Speaker 2 (15:59):
Only your top level.
Speaker 5 (16:02):
Components is kind of allowed to emit events or receive
attributes from the top down and so on, and it's
really hard to interact with that stuff. You also, because
of zone jays, you also get poly filled a think
weight and aside the bundle issue, that actually means that
(16:26):
you have two different ways of how your fetch requests work.
Right if you are using acinkaweight in your Angular components,
which I personally think you shouldn't you should stick to
observables and so on. But again it's framework. It supports
you writing a think weight and if you do that
(16:47):
you can get problems if you're using service workers for example. Right,
So there are two more issues, like the issue with
web components. You can't just treat them as HTML elements
because they're wrapped inside zone jes and there are lots
of stuff going on and and that's an issue because
it's kind of marketed as well the customers Tamil element,
(17:10):
but not really when you built it with Angular.
Speaker 2 (17:13):
And the other one is this zone patching.
Speaker 5 (17:16):
There is a bunch of stuff, you know, going on,
and it can really mess up when you sort of
combine it with the other technology is working on the
same page.
Speaker 2 (17:28):
Like I don't have to go far. You can have
jquerry on your page.
Speaker 5 (17:31):
You know, like eighty percent of the web still has
jquerry And if you build let's say a visible component
and put there with Angular zone is can probably mess
up if you use like jQuery plugins that work with
azing stuff because there.
Speaker 2 (17:46):
Are a bunch of plugs. You have no idea where
you're components.
Speaker 5 (17:50):
Beings is kind of a big wrapper that isn't part
of the framework, and it sort of is a barrier
for the outside the world. So also keep in mind,
you know, you will get way more awesome error messages
if anything goes wrong.
Speaker 2 (18:07):
But they improved it for pits.
Speaker 5 (18:10):
With zone, but still there's only just as so much
as you can do about it without zone it will
be just for a clear stake of what happened and
what did.
Speaker 2 (18:20):
Happen got ya.
Speaker 1 (18:21):
So it's kind of like a matter of how scoped
can a component be, And with zone JS it can't
be very scope because zone js itself patches a lot
of global objects, right, so if you rely on it,
even if you're using Angular elements and creating a microfront
and you're still patching a lot of global elements. So
(18:46):
if you go on zoleless then you don't have that.
That's interesting good point.
Speaker 5 (18:49):
If you bring an Angular component into some other application,
you are bringing stuff that is interfering with the window.
Of course, use the symbols and stuff and so on,
but still like your set time out calls are getting patched, okay,
because it listens to racing events like.
Speaker 2 (19:08):
That, you know, performed change detention and so on and yep,
you know, is it a very good idea.
Speaker 3 (19:16):
I think it's an interesting point. I have actually walked
in the past with microphone tents.
Speaker 4 (19:22):
We had also so a communication between those microphone tents,
and we had the global state of global stock for
all of them. But honestly, I don't remember any problem
that I have seen and that I can say, oh,
that problem could be solved now with the.
Speaker 3 (19:42):
Zone less so we had at the time and g
excess as a state management library. But yeah, maybe it
depends from from app to app and from which features
are they. But maybe this intego bullet and the probability
(20:07):
issue could be maybe better explained with concrete examples that
we can show.
Speaker 4 (20:14):
So this is the problem and how it will be
sort of.
Speaker 2 (20:20):
Trust me, no one has ever had that issue. We
just like to pretend in the kid.
Speaker 5 (20:24):
Yeah, because obviously there is hypothetically an issue that can
arise with all those records. But for starters, not very
many people do micro frontas at all, and not very
many people do microphones as were.
Speaker 2 (20:41):
Angular, So it's just a good improvement. It's just not
the main selling point.
Speaker 5 (20:47):
I would sayless, it's great for a bunch of other
stuff and microfonts is just yeah, okay, if you had
any problems there, you probably don't have them now, Okay.
Speaker 3 (20:58):
That's like maybe as a problem that we see often
is that when when you change are not detected, you
you try this CD change detection reference and so on,
and you try a lot of workarounds and maybe a
(21:20):
bit of deity ways, and you feel that it's very
hard to detect the change and you have no clue
why it's not detected though, although you have already considered
the immutability issue and so on. I don't know if
this is one of the main issues that could be
(21:42):
solved with zones.
Speaker 6 (21:44):
I think it will be solved with signal introducing signal,
because I think when people started using signal and on
push the kind of no need to.
Speaker 7 (21:56):
About you just reference and all.
Speaker 6 (22:01):
So I think combinedly, slowly, when we'll have the un
less release with if you see like three four release
back from sixteen small features and combinedly it will help
a lot in the future.
Speaker 2 (22:16):
Actually sorry, but I really would love to at the
point that this new change detection is actually already in.
Speaker 5 (22:24):
The framework and it's kind of stable and it just
works now in parallel with zone. Okay, so now if
you update signals, well, updating a signal is a synchronous action, right,
and in Angular with Zone, we know that the updates
the UI only happened with a thing stuff right, so
(22:44):
set time out, I don't know, promises results and so.
But now you have signals which update synchronously, and with
this new change, detention is already baked in version eighteen.
It will update the UI independent from zone JS. Okay,
you can just end to provide zoneless whatever to say.
Speaker 2 (23:03):
Okay, I don't. It's a less at all for no scenarios.
Speaker 5 (23:08):
Potentially, if you are only using signals, like if you
begin a new application and you say to yourself, okay,
I'm just gonna use signals everywhere, then you probably should
be fine because detecting if a signal has changed.
Speaker 2 (23:24):
Is the way.
Speaker 5 (23:25):
Simpler tasks, right than patching APIs listening to them, listening
to some application rev teg blah blah blah whatever we
have with Zone Now, signals are part of Angular, so
they can easily notify that, okay, my value has changed
if you have to updated. I think I don't remember
who was it on Twitter? But it was really shortened
(23:48):
beautiful explanation. Now, with signals and zoneless, you can think
of the template as being wrapped in an effect of
a signal, and it kind of makes sense.
Speaker 2 (24:01):
Signals would just like with the.
Speaker 5 (24:03):
Effect, signals will say, okay, I've changed update this part
of the UHY. And so of course classical change detection
will just continue to work as it used to. It
will just become granular change detection. Yourself is not changing that.
That's not important for us onsors. The scheduling of change
detection is changing.
Speaker 1 (24:24):
Yep, good point. All right, let's move on to some
of the other stuff that we had on Angular eighteen.
So besides zoneless, what else that is interesting there is
to talk about?
Speaker 4 (24:44):
I think the content.
Speaker 3 (24:48):
Yeah, that's a nice feature actually, especially when we have
some shaped content and it allows me, for example, to
avoid some doub gated code and also to have some
maybe to deliver some content for some some some hosting
(25:10):
component out of the book that they don't need to
push it to.
Speaker 4 (25:16):
Deliver it.
Speaker 1 (25:19):
Yes, that is that is very interesting. It's a it's
a nice quality of life improvement. It's it's doable in
previous versions of Angler, but it's just ugly, like I
have this little snippet of code that you create a
wrapper element around the empty space and then you check
(25:40):
if the inner ATML is empty or not. It's like
you look at it and you think, I don't really
want to write that, but that is actually the safest
way to do this operation. So it's good that now
we can have default fallback content for for energy content.
There's a lot of other things that were experimental or
(26:03):
not experimental, but developer preview and became stable. But I
think the other major thing was actually server side rendering
updates and updates to hydration, event replay. There was a
lot of things around that area.
Speaker 5 (26:21):
I really love, say, seeing the updates to service side rendering,
and I don't care for them in the sense that
I've never actually developed a service side rendering app. We
have like enterprise projects and none of the clients care
about you know, loading times, LCP and.
Speaker 2 (26:39):
All of that stuff.
Speaker 5 (26:41):
But I hate React and I hated that they were
so ahead on the server side story.
Speaker 2 (26:47):
And at least now we're kind of getting back.
Speaker 5 (26:49):
Also, it works kind of fine, although I have encoverned
problems with hydration when I tried a bunch of stuff
on my personal side project, and but but but it's
so very good. It's so very good, and improvements are nice.
I love even to play.
Speaker 3 (27:09):
Yeah, it's a great uh, A good step toward the
interactivity and improvement for the user experience and also avoiding
that the user will feel a bit blocked. Everything is
ready on the on the UI, which could be frustrating
or will lead.
Speaker 4 (27:29):
Maybe to lose some.
Speaker 3 (27:32):
Some business value, especially for very big applications. Maybe even
if they are not handed they are not server side handled,
but maybe they use the high bugget approach with the
mix between s S and the cs A, they could
also benefit from this new feature.
Speaker 5 (27:58):
It's also a step towards resumeability in the future and
the partial iteration too, which is something they I think.
We had another episode with Jess k Yanuk if I
remember correctly, and she was working on the partial liberation
(28:19):
story right, and there were lots of great promises and
it's nice to see them, you know, roll out all
of that stuff really exciting.
Speaker 1 (28:29):
Yes, yes, a lot of things in there. I have
actually built a service side render website which was my
own website actually because it was a blog and I
wanted a good SEO. Then I did service side rendering
on it. And what I think I mentioned this once
(28:51):
in the past, but it's not something that I talk
about a lot, is when I did service side rendering
was on Angular version.
Speaker 7 (29:00):
Four or five.
Speaker 1 (29:02):
I think the first time that I looked Yeah, yeah,
it was very in the early stages. It wasn't even
called like SSR. It was just Angler universal and the
dogs were just an existent.
Speaker 2 (29:19):
It was so tough.
Speaker 1 (29:21):
I remember that when I got this right, and as
soon as I got it right, it started popping up
more articles about how to do it, and part of
me was just thinking, Ah, when I did, it was
so much harder. But it's also good. You know that
(29:42):
the community has evolved so much. It was so painful
at that time to do anything with service side rendering.
And I said Angler four or five, but I'm not
entirely sure if that was it. Maybe it was Angler six.
I just know that it was very very early stages
and there was no doc mentation whatsoever about it. I
remember that was even a person writing a book about it,
(30:07):
but the book never got completed, and I was like
closely watching and waiting for the book to be ready,
and I was able to do it, and the book
was still not already, But yeah, those were the early
stages and we're in a so much better position nowadays.
The fact that you can just do an engine you
(30:29):
and the CLI asks you if you want to do SSR,
that's huge, you know. That really does make it easier
for anyone starting a project to use SSR. Also, some
meta frameworks like analog. Yes, Analog makes it very very easy.
(30:49):
I haven't really used Analog myself, so I can't speak
too much about the developer experience, but I have read
their dogs and I know that's one of the points
that they address.
Speaker 6 (31:01):
So yeah, I think the yes, Sorry please, I was
saying with server side rendering, with the pre rendering as well,
like the SSC, I think the combining, as you said before,
like combining both, uh makes sense for a lot of
development maybe, but I think I was just remembering my
(31:25):
current workflow. We're using Lacto for server side rendering, but
still like for a micro funtained point of view, it
makes sense to to make a lot of sense to
make server side rendering then for enterprise application. Mostly for
the enterprise application you have enterprise user who has quite
(31:49):
fast Internet and also the scope of the application will
be smaller. So so maybe it's better to go with
clients set rendering and with maybe some some preloading stuff.
Speaker 3 (32:04):
I find the hybrid approach also very interesting because maybe
at the beginning we when we think about s SA,
we think about static websites.
Speaker 4 (32:13):
But the hybrid approach.
Speaker 3 (32:15):
Will is a new will give a new chance maybe
or an opportunity for enti rise applications to use also
s S. But we need to decide which parts where
there is for example, no dynamic or real time change
in the dome and so on, those parts could be
(32:37):
sell side grander and the other paths so we'll be
client side grander. And which will be a plus or
an improvement for big scale or large scale applications.
Speaker 6 (32:52):
Yeah, I think as we all here, one thing just
popped to my mind, like maybe maybe it's an off topic,
but how support someone is starting a new application, how
they would decide uh they would a side or CLI
inside if the S the se O is not a
(33:12):
big thing for them, any any thoughts?
Speaker 4 (33:16):
Is it a question?
Speaker 7 (33:17):
Yeah?
Speaker 3 (33:19):
So for example, for example, let's say that they have
maybe a big ecomers application and they have for example,
one of my pages are frequent asked questions. This page
is a kind of static page I can use as
a se for this kind of question or for privacy.
(33:42):
And I don't know such informations for the users, but
let's say that they have some other views. For example,
I have worked once in an application where we had
an editor and the and the applications where the users
(34:03):
could dissect a message so they can select some parts
of the message and extract them as the fields, and
we were actually generating dom elements in depending on the
user interactions. For such kind of features, I cannot use
(34:23):
because the dome will be changed in real time and
it will depend on the user interactions. That's why I
need to be more careful which pages which I am
sure they will stay as they no matter how the
user interacted with them, and which parts will be changed
(34:46):
like for example, I don't know, shopping card, it will
definitely change and show new items and so on or Yeah,
this is just a simplification for how to differentiate between
what is more oriented to as a small audiences.
Speaker 5 (35:12):
I think one maybe a rule of sumbook be Obviously,
this is a business question. If you're building building a
big I don't know, collection of blogs or something, or
a big platform that people use like social media.
Speaker 2 (35:27):
Obviously you need SSR so that people can load your
happen as fast as you can.
Speaker 5 (35:33):
And of course, on the other side, if you're building
like some I don't know, enterprise grade for instance, we
want to build a dashboard for you know, for months
on the dogs that we're working with some paperwork when
loading stuff on the ship, and this is like their job.
They open this app every day and it's cashed on
(35:55):
their I don't know. They use iPads for instance, to
open that one app, and you don't think think about
SSR there.
Speaker 2 (36:03):
So if you know your business case is kind of
easy to decide.
Speaker 8 (36:07):
But if you are not sure if at one point
you will have to have like SSR or not, maybe
if you're just starting the app, it might be a
good idea to just start with SSR.
Speaker 2 (36:19):
Because mostly you won't have to change a lot in general.
But if you already have a big app, switching to
as SR will probably pick up some problems.
Speaker 5 (36:30):
Not that bad obviously, but if you just start in
the SSR, I mean, I don't think it will do
much harm to you. At the end of the day,
you will just develop a round. If you're not doing
like complex dom manipulations. Even if you are doing there
are always like these new functions right after render, after
next lender. You can just rap that stuff. It's always
(36:52):
easier to do that when you're beginning to code instead
of like refactoring it. Still if you're definitely rer app
is just going to be used, you know, like a job,
like an enterprise that then you probably don't need SR
and you will never need sor if that client wants
(37:12):
something you know, public facing, they will probably just want
a new app, not just one page in your enterprise
app puper facing something.
Speaker 3 (37:22):
So we need actually to consider the dome change and
the dome structure, how complex is it and the CEO
how important is it for our app?
Speaker 4 (37:35):
And also the how important for us? Is it more
important for.
Speaker 3 (37:41):
Us that the user will see as quickly as possible
something on the page or that they could be interacted
as quickly as possible, Because with SSL, the user can
see something, but they can't interact until everything will be available,
all the javas, gift and or the events and so on.
(38:03):
So there is an improvement. The time to introduction is
could be slower than C said, but the low the
they can see something quickly, but they can interact with it.
It depends on the applications and on the which kind
of application we are talking about. For some big applications
(38:28):
or some companies, even a delay of maybe yeah, five milliseconds,
I don't yeah, or ten milliseconds could cost them something.
For other applications, it's not so bad to have such
a delay or yeah, it's.
Speaker 6 (38:46):
Also makes sense, like I was just thinking about for
a new startup they're starting up, because if they're starting
with they need to delude a lot of things which
is not related to angle or maybe then it to
deal with the server, how it's handling, how much traffic
it should help because with the clients and rendering, they
(39:06):
are just serving the file maybe from a cian or something.
Speaker 7 (39:10):
But now you need to do a lot of things
you need to you event loopleaques.
Speaker 6 (39:16):
I think a lot of things at that in the
server which you need to we need to know about
if your application might get motorfic. Yeah, so those things
we keep in mind, and Doss says, yeah, I think
we can come back to the topic.
Speaker 1 (39:36):
Yeah, all right, there are still way too many things
to talk about, and we haven't even touched on eighteen
point one, which was released like hours ago, and just
introduce an entirely new operator. But at the same time,
(39:58):
we time really really flew by, and we're already spoken
for forty minutes before we start wrapping up, I want
to make sure that we cover cases that maybe we
didn't talk about that but that might be relevant for Rakia. So, Rakia,
is there anything that we haven't touched on yet? And
(40:22):
perhaps you think that we should like something that is
important enough and we haven't touched So that's kind of
like a catch all question.
Speaker 3 (40:32):
Maybe the improvement in the film's API, the new event
subscribe that would so now we can subscribe and touch
events like Westing events, statos event touched event and value
change event, which is the kind of more refinement in
(40:53):
the film's API.
Speaker 1 (40:55):
Yes, so that specifically, just to make it clear for
the audience, is is it more than just a new
property that was exposed in the form control in the
abstract control or is it because from my understanding that
was it right? It's a new observable that is exposed
(41:18):
and allows you to listen to all sorts of events
that a form that an abstract control can trigger. Is
that correct?
Speaker 5 (41:25):
Yeah?
Speaker 1 (41:26):
Okay, I gotta be honest, I'm still questioning the value
of it. Like I see this as a very good
quality of life improvement, But I didn't saw that announcement
and thought, okay, let me rewrite that component to use that.
(41:50):
You know, it was just okay, we already have that
because we already have the separated observables, right, so we
can listen to the the status changes, and we could
listen to I mean or am I wrong on this?
(42:10):
Like we we already had observables for that, right, they
just weren't unified in a single observable.
Speaker 3 (42:19):
So I think maybe the value of this new improvement
or new observable, it's very well depends on which kind
of components or your I or features we have, because
it will not be relevant the same way for every
farm fields or for every.
Speaker 4 (42:42):
Elements.
Speaker 3 (42:44):
So me too, I have I haven't refacted with anything
in my God in order to use this feature. But
in the past I have seen some some or I
have worked with some components with the DOM and the
events are a bit complex, and there were a lot
of ticky use the interactions that we should catch, and
(43:09):
so one maybe for such kind of applications, this kind
of uh, observable will be more relevant and it will
have more value.
Speaker 1 (43:20):
It makes sense, makes sense. I actually have not had
such cases so to me, I was still wondering about
what was the big value delivered by that feature. But
that that does make sense with your explanation. Interesting. Cool, okay,
(43:40):
Rman super How about you guys, anything you'd like to
mention before you wrap up?
Speaker 7 (43:45):
Yeah, I think you think much from my say they
have fun. Guys have fun.
Speaker 2 (43:51):
That's yeah, all.
Speaker 1 (43:57):
Right, okay, so let's start wrapping up. Let's just do
a quick round of promos, and well, let's start with
with Armen. So Armen, what have you been up to?
Speaker 7 (44:13):
Oh?
Speaker 5 (44:13):
Well, as much as on the previous episodes, I'm gonna
promote my book Modern Angular.
Speaker 2 (44:21):
I have some updates on it.
Speaker 5 (44:23):
Like five months ago, it went into early access so
it could read some of the chapters. Now actually all
of the chapters are available, but it's still not the
final final version of the book. But the book is
in production, is being a copy edited right now. Hopefully
in several weeks it will go into print and that
(44:44):
will be the final release of the book. So, of course,
as I'm super excited about it and our today's topic
is actually the reason that the book took a bit
longer because when we we're close to finishing it off,
we realize that in like six weeks the new Angular
(45:06):
version will come out and probably render the book kind
of obsolete on print, and we decided to hold a
bit to wait to see the version finally come out.
So this is actually because of that reason, the most
up to date Angular book right now kind of not
(45:30):
anymore after today because we now have like lead directive
and so on in Angular eighteen point one, but it's
not really the big stuff.
Speaker 2 (45:39):
So the book covers everything that we start.
Speaker 5 (45:41):
Getting after IVY essentially, so you have standalone components, how
to migrate to them, you have better argues, support, dependency,
injection changes everything, SSR improvements and unit testing, everything that
we have new in the framework. And the book is
following like a project building formats in the sense that
(46:05):
we build an enterprise app with the book, you can
code along and all the features sort of explained in
the chapters are also done in specific formats.
Speaker 2 (46:17):
So first we introduce like a problem that we had.
Speaker 5 (46:20):
Previously, we introduced the solution on a new project and
the one that we're developing, and then all the final
parts of the chapters also have guides on migration, how
you can migrate to send a long components, how it
can migrate to using the inject function, and like the
new guards and resolvers and whatever you have and so on.
Speaker 2 (46:40):
How it can migrate to SSR.
Speaker 5 (46:43):
So yeah, it's sort of the handbook for anyone who
has not been up to speak with the improvements in
Angular and wants to quickly learn what's doing the framework
and how they can sort of set their projects up
to use all the modern features.
Speaker 2 (47:00):
Oh yeah, that's my book. I hope if anyone decides
to buy it that it is help to you.
Speaker 1 (47:08):
Awesome, awesome, all right, And just what's the name of
it again, just so that people can search for it.
Speaker 2 (47:16):
It's called modern Angular.
Speaker 1 (47:18):
Essentially, we have okay, Modern Angler by Arman Vardinia. Cool
and well. On my end, I'm just going to promote
the two companies that produce this show, So Top and
Doves produces a lot of other podcasts, not just about Angler,
so if you're interested in that, I'm also actually hosting
the React show. I do love Angler more, but I
(47:42):
also know about reacts, so I also host that show,
and there are many others as well, so if you're
interested in other subjects, be sure to check out all
the podcasts available and on top and doves and on Void,
which some people might not know exactly how to type it,
but it's with un so u n Void. And the
(48:04):
difference between onvoid and other software development agencies is that
in general, when you try to hire developers, they always work,
they always high, they always charged hourly, and that's not
very client friendly because you never really know how much
is going to take and if there are over times,
you just keep wondering like is this taking longer because
(48:27):
the person is is just taking longer to get paid more,
or is it like really it really makes sense that
it's taken longer. There's always this question and it's just
frustrating for clients. So Onvoid fixes that by agreeing on
the prices per tasth with the clients beforehand, and the
clients only pay after dissts are delivered and approved, so
(48:49):
the clients also can do quality control to make sure
that what is delivered is up to their quality standards
before it actually becomes available. So it's extremely client friendly
and yeah, so be sure interested in that be sure
to check out you n v o I d on
void dot com. This is going to be my text
(49:10):
for today, Rack.
Speaker 7 (49:11):
Yeah, how about you?
Speaker 4 (49:13):
Okay, thanks for the opportunity.
Speaker 3 (49:15):
First, so I'm actually building the community with my which
was started with my medium blog.
Speaker 4 (49:23):
I have reached today.
Speaker 3 (49:26):
One hundred eighty eight articles I think on Medium and
you have also YouTube channel.
Speaker 4 (49:32):
I will invite you guys to join it and subscribe to.
Speaker 1 (49:37):
It, and.
Speaker 3 (49:40):
Maybe for everyone who would like to build the web
performance muscles, I will invite them to join over thirty
one case students and en roll on my udimi video
coals about web perform Master and web performance from noves
to Expect and my second m vidals which was published
(50:04):
on April. There are also the over three k students
and he is a bonus for everyone who would like
to get the chance to get those courses for free.
Speaker 4 (50:16):
You can join my.
Speaker 3 (50:19):
Newsletter because I check their free access to my video courses.
So my newsletter is Rakia Ben Sasi together written without
Rakiah Ben Sasi Ben Sasi dot substack dot com.
Speaker 1 (50:37):
And that's awesome, awesome, thank you, thank you.
Speaker 2 (50:42):
How about you?
Speaker 6 (50:43):
Yeah, I would like to promote my channel is who
is fun of heuristic. So I'm not putting much content now,
but I'm trying to be motivated again and start putting it.
But we have some good content in the past. Please
go tack.
Speaker 1 (51:02):
Okay, all right, guys, Thank you so much for those
listening to us. Thank you for stacking up until the
end of a great week, and I will see you
in the next one.
Hey, Welcome to Adventures in Anglar, the podcast where we
keep you updated on all things Angular related. This show
is produced by two companies, Top and Devs and Onvoid.
Top anddves is where we great Top and Devs to
get top and pay and recognition. We're working on interesting
problems and making meaningful community contributions. And Onvoid provides remote
design and software development services on the most client friendly
(00:29):
business model. The clients only pay after the tests are
delivered and approved. In today's episode, we will talk about
what is new in Angular eighteen and we will also
just briefly mentioned because we don't really have a lot
of debt about it yet. We're also going to mention
a bit about Angular eighteen point one. My name is
(00:52):
Lucas Paganini. Your hosts in the podcast. Joining me in
today's episode are the also hosts Arman Vardenian.
Speaker 2 (01:00):
Hello, everyone, Finally back to the podcast.
Speaker 1 (01:04):
Subrad Mischa, Hey, Hey, and our very special guest, which
according to her is not that much just a Google developer,
expert in Angler and a software freelancer, Rakia Ben Sassy.
Speaker 3 (01:25):
Hi everyone, and thanks for having me. Maybe you I
said just because my early background was actually I was
at the beginning of my career Java developer and after
over a decade I became a JdE, which was not
(01:45):
the main maybe expectees or main focus in my career.
Speaker 4 (01:51):
But thanks anyway, never is, never is.
Speaker 1 (01:55):
Thank you for your time, thank you for being here,
and well let's get to it. So there are many
things that were released on Anglar version eighteen, but I
would like to know, Rakia, from your point of view,
what are the most relevant ones and then we can
(02:17):
start from there.
Speaker 4 (02:19):
So for me, maybe not. In the it was.
Speaker 3 (02:25):
Sance a while the featured the failable and they was
very happy to see that it has reached a more
stable face in the VAGIN eighteen and it was also
amazing how companies like built dot com have reached an
improvement in.
Speaker 4 (02:44):
The bundle size.
Speaker 3 (02:47):
With fifty percent thanks to the to using this feature
the failible. Besides this, I'm also excited about the improvement
toward the use of the development of zone less angle
application and which will be hopefully with the use of signal,
(03:12):
will let us avoid a lot of struggle with the
change detection, especially when the applications goes more complicated.
Speaker 1 (03:23):
Yeah, yes, okay, So a couple of very interesting subjects
if if that's okay with you guys, I would rather
start with zoneless because I think there's a lot of
hype in.
Speaker 2 (03:37):
There and it's the start of the show.
Speaker 1 (03:40):
Yes, yes, a lot of vipe and a lot of
people haven't really tried the new experimental zoneless support yet,
And well, I guess we can first start with what
are the uh, maybe the drawbacks that aren't clear to
to those that want that tries a less Maybe there
(04:02):
are things that they don't know that would be problems
if they actually did try it.
Speaker 3 (04:09):
I think that the change detection topic in general looks
like a monster maybe. And also when we need to
go away from zone, we need to get our hands
dirties with the angular conflict for Angular Jason, and yeah,
(04:33):
we need to take care about a lot of things.
Speaker 4 (04:37):
This is just.
Speaker 3 (04:38):
My my my thought on that topic. And maybe a
lot of developer don't know how how component which are
using on push change detection, how they will be impacted
by this and the other components, and if if they
(05:00):
have to migrate everything to signal or not and so on.
So I think everyone needs to feel more comfortable and
have more confidence before they can start on this issue,
(05:20):
what's your idea about all your thought maybe aman or subad.
Speaker 5 (05:27):
I think personally that the community is gonna be sweet
for a while because if you have been developing with
Angular for a while and you haven't paid attention to
what change detection is, you.
Speaker 2 (05:42):
Don't really need to optimize it.
Speaker 5 (05:44):
If you don't care, right, you can just build your
software and it will work fine. I guess in the
end of the day, if you don't know about zone
less and one day it's a less become the standard,
then you're gonna hate it because why do I need
the application works fine? Why do I need to switch
to the orble signals? Blah blah blah. But if you
(06:05):
have been paying attention and you I don't know encounter
like the the hated expression has check changed after it
has been checked error read, and you've been trying to
optimize everything and so on and so.
Speaker 2 (06:19):
On, you probably already took some steps in the.
Speaker 5 (06:23):
Direction of zoneless, for example using signals right, because switching
to signals isn't.
Speaker 2 (06:28):
That hard at the end of the day.
Speaker 5 (06:32):
And now if you know that for you, it's gonna
be an exciting feature. So people are again gonna be
splitting in like two different camps. But what I like
about the way that the team does it is that
that kind of rolling really slowly with it. Okay, now
we have some experimental support for zoneless. Maybe in the
(06:53):
next release we will get some upgrades.
Speaker 2 (06:58):
I don't know.
Speaker 5 (06:59):
It also depends on the library, you know, maintainers, because
you know someoneys can break libraries that don't kind of
work with it fine, and there's lots lots.
Speaker 2 (07:11):
That's consider.
Speaker 3 (07:13):
Well. One expression came to my mind now, So it
was so it was about the on push change detection.
So whenever any developer needs to or think or want
to use the on push change detection, they should be
aware of the code design, and they should be aware
of the immutability issue and so on. So I think
(07:38):
that also for me, as any angle like developer, I
need to be aware what should what should I take
care of on my applications code design when I have.
Speaker 4 (07:51):
To use zones?
Speaker 3 (07:52):
What should they change in my code design? Should they act?
So that's it's about the code design and how much
should I reflect in my application.
Speaker 6 (08:04):
Yeah, I was just thinking the same thing like this
joone less will for focus like people will focus more
who already have on pushing detection strategy on or maybe
maybe if they care a lot about how it how
to change detection works and they will like be eagerly
(08:24):
waiting for this change to go full on. Maybe they
are doing some experimentation in their deb environment with the
experimental feature. Yeah, at the end, I think how ANGELA
might goes is as it backward compatible. It's just like
when everything goes onless. It just works, so you don't
need to worry much about how the jone lists how
(08:48):
to handle it. But yeah, if you're doing on post,
then you are in a good direction.
Speaker 2 (08:57):
Well if you are like uh, thinking about it.
Speaker 5 (09:01):
Actually, just migrating to some one lists is quite simple
in the sense that you just you know, you say,
it provides a lie education, removes zones, and it's.
Speaker 2 (09:11):
Kind of fine.
Speaker 5 (09:14):
If you have already using the on push strategy, you
also probably will be fine. But the thing is, we
don't really know the symptoms of this disease yet because
when people have tried it experimentally, obviously no one uses
this on a production application to really know where they can.
Speaker 2 (09:35):
Have bugs or whatever.
Speaker 5 (09:38):
Like I have a personal website I build with with anger,
I put like experimental zone lists on it, but it's
really irrelevant apps.
Speaker 2 (09:45):
Like it's not doing anything complex, right, And.
Speaker 5 (09:51):
That's why it's kind of hard to create content about
z on list right now, because what are you gonna
say about it. Okay, use this function and remove zone
just from not one whatever, and then you're like, Okay,
it's experimental, don't try it, and then it's over. What
I would really love to discuss is what's kind of
(10:14):
going on internally, what we know about it, because the
people on the team were like very vocal about it.
They even shared like the roadmap, right, I think I
can pull up road map from on somewhere. I'm not
sure though that I can find it.
Speaker 1 (10:29):
Yeah, I mean, I think what you guys said about
libraries is probably the main thing that I don't think
people are realizing. It's not just a matter of oh,
I'm starting a new project, so I'm gonna go zoneless
because then I can just start zoneless from the from
the geck go. But are the libraries the head that
(10:52):
you want to use in your project also supporting zoneless,
because otherwise it's just not going to work. So it's
it's tricky, you know, because at the at one hand,
you want to start using it, at.
Speaker 7 (11:09):
Least I do, but.
Speaker 1 (11:13):
There are just so many other pieces that just don't
feel stable enough yet that I'm not even sure if
if it makes sense to use it at all, Like
unless you're a library author and you're just you want
to make your code work with that new standard, then sure,
(11:36):
But for people that are writing applications, I'm not sure
if it's the right time for that.
Speaker 3 (11:46):
Absolutely, you put to the table avery important point. It's
just like when upgrading it's i'll tell you one of
the hood when well, some projects didn't upgrade to higher
Angular versions because they use a lot of library that
are not ready for the new Angular version.
Speaker 4 (12:08):
This is one point and the other points it's not.
Speaker 7 (12:13):
Stable.
Speaker 3 (12:13):
Some parts are in developer mode. And for me for example,
as maybe poor or someone who has the decision to
add new features to the backlog and to the to
the planning of our experience, I need to be aware
(12:34):
of the business value. It's not when I have a
lot of other features and so on.
Speaker 4 (12:40):
What can I win from it?
Speaker 3 (12:42):
And can I give it a higher priority so that
my developers will spend more time with it, or it's
not the right time for it.
Speaker 1 (12:53):
And also If you look at the official blog post
when Angular EIGHTEAM was released, it was written by Minko.
And when it comes to defining too to announcing right
the new experimental change detection, one thing that he mentions
(13:13):
is improving composability for micro front ends and interoperability with
other frameworks. I think that's really interesting, Like what does
he mean by interoperability with other frameworks? How does zoneless
make Angular more inter interoperable with react or view or whatever,
(13:39):
and even for micro front and front ends for that matter.
Speaker 4 (13:43):
Very good question wants.
Speaker 7 (13:47):
Answer I have. I have a small opinion because outside
library and.
Speaker 6 (13:56):
Then having other places, if you're combining that with for
any micro front ten and you need to have the.
Speaker 7 (14:04):
Running in your in your bunt.
Speaker 6 (14:06):
Maybe if you're doing subside or our client side, then
you were removing the jone and having having the signals
we change the text and everything reduced wait from the
from the micro service. Like first of all, if you're
using the micro service one was with react ones.
Speaker 1 (14:30):
But yeah.
Speaker 2 (14:33):
And yes maybe maybe.
Speaker 1 (14:41):
Super I'm sorry, but your audio in the middle started
to get weird, Like you was sometimes really really good
and sometimes I couldn't hear you.
Speaker 2 (14:52):
Okay, good.
Speaker 5 (14:55):
Now it is.
Speaker 1 (14:57):
It still seems like it's oscillating a bit, but it
is good at this particular moment.
Speaker 6 (15:04):
Yeah, So what I was saying is as the bundle,
so you don't just will be removed from the bundle.
So now you have less load on an overall application.
Maybe it's sub side outline sight and then that that's
how you you can combin you React and Angular and
(15:24):
run together in.
Speaker 7 (15:26):
The project at a single single a single host.
Speaker 1 (15:30):
Oh so it's just a matter of lass of lass polyphils.
Speaker 2 (15:36):
On one point.
Speaker 6 (15:39):
One of the points.
Speaker 5 (15:39):
I can have the bigger point to this because I
worked with Angular elements.
Speaker 2 (15:45):
Everyone knows that. Yeah, and.
Speaker 5 (15:49):
You know when you put it in another application, everything
in your custom element is wrapped inside zone JS.
Speaker 2 (15:59):
Only your top level.
Speaker 5 (16:02):
Components is kind of allowed to emit events or receive
attributes from the top down and so on, and it's
really hard to interact with that stuff. You also, because
of zone jays, you also get poly filled a think
weight and aside the bundle issue, that actually means that
(16:26):
you have two different ways of how your fetch requests work.
Right if you are using acinkaweight in your Angular components,
which I personally think you shouldn't you should stick to
observables and so on. But again it's framework. It supports
you writing a think weight and if you do that
(16:47):
you can get problems if you're using service workers for example. Right,
So there are two more issues, like the issue with
web components. You can't just treat them as HTML elements
because they're wrapped inside zone jes and there are lots
of stuff going on and and that's an issue because
it's kind of marketed as well the customers Tamil element,
(17:10):
but not really when you built it with Angular.
Speaker 2 (17:13):
And the other one is this zone patching.
Speaker 5 (17:16):
There is a bunch of stuff, you know, going on,
and it can really mess up when you sort of
combine it with the other technology is working on the
same page.
Speaker 2 (17:28):
Like I don't have to go far. You can have
jquerry on your page.
Speaker 5 (17:31):
You know, like eighty percent of the web still has
jquerry And if you build let's say a visible component
and put there with Angular zone is can probably mess
up if you use like jQuery plugins that work with
azing stuff because there.
Speaker 2 (17:46):
Are a bunch of plugs. You have no idea where
you're components.
Speaker 5 (17:50):
Beings is kind of a big wrapper that isn't part
of the framework, and it sort of is a barrier
for the outside the world. So also keep in mind,
you know, you will get way more awesome error messages
if anything goes wrong.
Speaker 2 (18:07):
But they improved it for pits.
Speaker 5 (18:10):
With zone, but still there's only just as so much
as you can do about it without zone it will
be just for a clear stake of what happened and
what did.
Speaker 2 (18:20):
Happen got ya.
Speaker 1 (18:21):
So it's kind of like a matter of how scoped
can a component be, And with zone JS it can't
be very scope because zone js itself patches a lot
of global objects, right, so if you rely on it,
even if you're using Angular elements and creating a microfront
and you're still patching a lot of global elements. So
(18:46):
if you go on zoleless then you don't have that.
That's interesting good point.
Speaker 5 (18:49):
If you bring an Angular component into some other application,
you are bringing stuff that is interfering with the window.
Of course, use the symbols and stuff and so on,
but still like your set time out calls are getting patched, okay,
because it listens to racing events like.
Speaker 2 (19:08):
That, you know, performed change detention and so on and yep,
you know, is it a very good idea.
Speaker 3 (19:16):
I think it's an interesting point. I have actually walked
in the past with microphone tents.
Speaker 4 (19:22):
We had also so a communication between those microphone tents,
and we had the global state of global stock for
all of them. But honestly, I don't remember any problem
that I have seen and that I can say, oh,
that problem could be solved now with the.
Speaker 3 (19:42):
Zone less so we had at the time and g
excess as a state management library. But yeah, maybe it
depends from from app to app and from which features
are they. But maybe this intego bullet and the probability
(20:07):
issue could be maybe better explained with concrete examples that
we can show.
Speaker 4 (20:14):
So this is the problem and how it will be
sort of.
Speaker 2 (20:20):
Trust me, no one has ever had that issue. We
just like to pretend in the kid.
Speaker 5 (20:24):
Yeah, because obviously there is hypothetically an issue that can
arise with all those records. But for starters, not very
many people do micro frontas at all, and not very
many people do microphones as were.
Speaker 2 (20:41):
Angular, So it's just a good improvement. It's just not
the main selling point.
Speaker 5 (20:47):
I would sayless, it's great for a bunch of other
stuff and microfonts is just yeah, okay, if you had
any problems there, you probably don't have them now, Okay.
Speaker 3 (20:58):
That's like maybe as a problem that we see often
is that when when you change are not detected, you
you try this CD change detection reference and so on,
and you try a lot of workarounds and maybe a
(21:20):
bit of deity ways, and you feel that it's very
hard to detect the change and you have no clue
why it's not detected though, although you have already considered
the immutability issue and so on. I don't know if
this is one of the main issues that could be
(21:42):
solved with zones.
Speaker 6 (21:44):
I think it will be solved with signal introducing signal,
because I think when people started using signal and on
push the kind of no need to.
Speaker 7 (21:56):
About you just reference and all.
Speaker 6 (22:01):
So I think combinedly, slowly, when we'll have the un
less release with if you see like three four release
back from sixteen small features and combinedly it will help
a lot in the future.
Speaker 2 (22:16):
Actually sorry, but I really would love to at the
point that this new change detection is actually already in.
Speaker 5 (22:24):
The framework and it's kind of stable and it just
works now in parallel with zone. Okay, so now if
you update signals, well, updating a signal is a synchronous action, right,
and in Angular with Zone, we know that the updates
the UI only happened with a thing stuff right, so
(22:44):
set time out, I don't know, promises results and so.
But now you have signals which update synchronously, and with
this new change, detention is already baked in version eighteen.
It will update the UI independent from zone JS. Okay,
you can just end to provide zoneless whatever to say.
Speaker 2 (23:03):
Okay, I don't. It's a less at all for no scenarios.
Speaker 5 (23:08):
Potentially, if you are only using signals, like if you
begin a new application and you say to yourself, okay,
I'm just gonna use signals everywhere, then you probably should
be fine because detecting if a signal has changed.
Speaker 2 (23:24):
Is the way.
Speaker 5 (23:25):
Simpler tasks, right than patching APIs listening to them, listening
to some application rev teg blah blah blah whatever we
have with Zone Now, signals are part of Angular, so
they can easily notify that, okay, my value has changed
if you have to updated. I think I don't remember
who was it on Twitter? But it was really shortened
(23:48):
beautiful explanation. Now, with signals and zoneless, you can think
of the template as being wrapped in an effect of
a signal, and it kind of makes sense.
Speaker 2 (24:01):
Signals would just like with the.
Speaker 5 (24:03):
Effect, signals will say, okay, I've changed update this part
of the UHY. And so of course classical change detection
will just continue to work as it used to. It
will just become granular change detection. Yourself is not changing that.
That's not important for us onsors. The scheduling of change
detection is changing.
Speaker 1 (24:24):
Yep, good point. All right, let's move on to some
of the other stuff that we had on Angular eighteen.
So besides zoneless, what else that is interesting there is
to talk about?
Speaker 4 (24:44):
I think the content.
Speaker 3 (24:48):
Yeah, that's a nice feature actually, especially when we have
some shaped content and it allows me, for example, to
avoid some doub gated code and also to have some
maybe to deliver some content for some some some hosting
(25:10):
component out of the book that they don't need to
push it to.
Speaker 4 (25:16):
Deliver it.
Speaker 1 (25:19):
Yes, that is that is very interesting. It's a it's
a nice quality of life improvement. It's it's doable in
previous versions of Angler, but it's just ugly, like I
have this little snippet of code that you create a
wrapper element around the empty space and then you check
(25:40):
if the inner ATML is empty or not. It's like
you look at it and you think, I don't really
want to write that, but that is actually the safest
way to do this operation. So it's good that now
we can have default fallback content for for energy content.
There's a lot of other things that were experimental or
(26:03):
not experimental, but developer preview and became stable. But I
think the other major thing was actually server side rendering
updates and updates to hydration, event replay. There was a
lot of things around that area.
Speaker 5 (26:21):
I really love, say, seeing the updates to service side rendering,
and I don't care for them in the sense that
I've never actually developed a service side rendering app. We
have like enterprise projects and none of the clients care
about you know, loading times, LCP and.
Speaker 2 (26:39):
All of that stuff.
Speaker 5 (26:41):
But I hate React and I hated that they were
so ahead on the server side story.
Speaker 2 (26:47):
And at least now we're kind of getting back.
Speaker 5 (26:49):
Also, it works kind of fine, although I have encoverned
problems with hydration when I tried a bunch of stuff
on my personal side project, and but but but it's
so very good. It's so very good, and improvements are nice.
I love even to play.
Speaker 3 (27:09):
Yeah, it's a great uh, A good step toward the
interactivity and improvement for the user experience and also avoiding
that the user will feel a bit blocked. Everything is
ready on the on the UI, which could be frustrating
or will lead.
Speaker 4 (27:29):
Maybe to lose some.
Speaker 3 (27:32):
Some business value, especially for very big applications. Maybe even
if they are not handed they are not server side handled,
but maybe they use the high bugget approach with the
mix between s S and the cs A, they could
also benefit from this new feature.
Speaker 5 (27:58):
It's also a step towards resumeability in the future and
the partial iteration too, which is something they I think.
We had another episode with Jess k Yanuk if I
remember correctly, and she was working on the partial liberation
(28:19):
story right, and there were lots of great promises and
it's nice to see them, you know, roll out all
of that stuff really exciting.
Speaker 1 (28:29):
Yes, yes, a lot of things in there. I have
actually built a service side render website which was my
own website actually because it was a blog and I
wanted a good SEO. Then I did service side rendering
on it. And what I think I mentioned this once
(28:51):
in the past, but it's not something that I talk
about a lot, is when I did service side rendering
was on Angular version.
Speaker 7 (29:00):
Four or five.
Speaker 1 (29:02):
I think the first time that I looked Yeah, yeah,
it was very in the early stages. It wasn't even
called like SSR. It was just Angler universal and the
dogs were just an existent.
Speaker 2 (29:19):
It was so tough.
Speaker 1 (29:21):
I remember that when I got this right, and as
soon as I got it right, it started popping up
more articles about how to do it, and part of
me was just thinking, Ah, when I did, it was
so much harder. But it's also good. You know that
(29:42):
the community has evolved so much. It was so painful
at that time to do anything with service side rendering.
And I said Angler four or five, but I'm not
entirely sure if that was it. Maybe it was Angler six.
I just know that it was very very early stages
and there was no doc mentation whatsoever about it. I
remember that was even a person writing a book about it,
(30:07):
but the book never got completed, and I was like
closely watching and waiting for the book to be ready,
and I was able to do it, and the book
was still not already, But yeah, those were the early
stages and we're in a so much better position nowadays.
The fact that you can just do an engine you
(30:29):
and the CLI asks you if you want to do SSR,
that's huge, you know. That really does make it easier
for anyone starting a project to use SSR. Also, some
meta frameworks like analog. Yes, Analog makes it very very easy.
(30:49):
I haven't really used Analog myself, so I can't speak
too much about the developer experience, but I have read
their dogs and I know that's one of the points
that they address.
Speaker 6 (31:01):
So yeah, I think the yes, Sorry please, I was
saying with server side rendering, with the pre rendering as well,
like the SSC, I think the combining, as you said before,
like combining both, uh makes sense for a lot of
development maybe, but I think I was just remembering my
(31:25):
current workflow. We're using Lacto for server side rendering, but
still like for a micro funtained point of view, it
makes sense to to make a lot of sense to
make server side rendering then for enterprise application. Mostly for
the enterprise application you have enterprise user who has quite
(31:49):
fast Internet and also the scope of the application will
be smaller. So so maybe it's better to go with
clients set rendering and with maybe some some preloading stuff.
Speaker 3 (32:04):
I find the hybrid approach also very interesting because maybe
at the beginning we when we think about s SA,
we think about static websites.
Speaker 4 (32:13):
But the hybrid approach.
Speaker 3 (32:15):
Will is a new will give a new chance maybe
or an opportunity for enti rise applications to use also
s S. But we need to decide which parts where
there is for example, no dynamic or real time change
in the dome and so on, those parts could be
(32:37):
sell side grander and the other paths so we'll be
client side grander. And which will be a plus or
an improvement for big scale or large scale applications.
Speaker 6 (32:52):
Yeah, I think as we all here, one thing just
popped to my mind, like maybe maybe it's an off topic,
but how support someone is starting a new application, how
they would decide uh they would a side or CLI
inside if the S the se O is not a
(33:12):
big thing for them, any any thoughts?
Speaker 4 (33:16):
Is it a question?
Speaker 7 (33:17):
Yeah?
Speaker 3 (33:19):
So for example, for example, let's say that they have
maybe a big ecomers application and they have for example,
one of my pages are frequent asked questions. This page
is a kind of static page I can use as
a se for this kind of question or for privacy.
(33:42):
And I don't know such informations for the users, but
let's say that they have some other views. For example,
I have worked once in an application where we had
an editor and the and the applications where the users
(34:03):
could dissect a message so they can select some parts
of the message and extract them as the fields, and
we were actually generating dom elements in depending on the
user interactions. For such kind of features, I cannot use
(34:23):
because the dome will be changed in real time and
it will depend on the user interactions. That's why I
need to be more careful which pages which I am
sure they will stay as they no matter how the
user interacted with them, and which parts will be changed
(34:46):
like for example, I don't know, shopping card, it will
definitely change and show new items and so on or Yeah,
this is just a simplification for how to differentiate between
what is more oriented to as a small audiences.
Speaker 5 (35:12):
I think one maybe a rule of sumbook be Obviously,
this is a business question. If you're building building a
big I don't know, collection of blogs or something, or
a big platform that people use like social media.
Speaker 2 (35:27):
Obviously you need SSR so that people can load your
happen as fast as you can.
Speaker 5 (35:33):
And of course, on the other side, if you're building
like some I don't know, enterprise grade for instance, we
want to build a dashboard for you know, for months
on the dogs that we're working with some paperwork when
loading stuff on the ship, and this is like their job.
They open this app every day and it's cashed on
(35:55):
their I don't know. They use iPads for instance, to
open that one app, and you don't think think about
SSR there.
Speaker 2 (36:03):
So if you know your business case is kind of
easy to decide.
Speaker 8 (36:07):
But if you are not sure if at one point
you will have to have like SSR or not, maybe
if you're just starting the app, it might be a
good idea to just start with SSR.
Speaker 2 (36:19):
Because mostly you won't have to change a lot in general.
But if you already have a big app, switching to
as SR will probably pick up some problems.
Speaker 5 (36:30):
Not that bad obviously, but if you just start in
the SSR, I mean, I don't think it will do
much harm to you. At the end of the day,
you will just develop a round. If you're not doing
like complex dom manipulations. Even if you are doing there
are always like these new functions right after render, after
next lender. You can just rap that stuff. It's always
(36:52):
easier to do that when you're beginning to code instead
of like refactoring it. Still if you're definitely rer app
is just going to be used, you know, like a job,
like an enterprise that then you probably don't need SR
and you will never need sor if that client wants
(37:12):
something you know, public facing, they will probably just want
a new app, not just one page in your enterprise
app puper facing something.
Speaker 3 (37:22):
So we need actually to consider the dome change and
the dome structure, how complex is it and the CEO
how important is it for our app?
Speaker 4 (37:35):
And also the how important for us? Is it more
important for.
Speaker 3 (37:41):
Us that the user will see as quickly as possible
something on the page or that they could be interacted
as quickly as possible, Because with SSL, the user can
see something, but they can't interact until everything will be available,
all the javas, gift and or the events and so on.
(38:03):
So there is an improvement. The time to introduction is
could be slower than C said, but the low the
they can see something quickly, but they can interact with it.
It depends on the applications and on the which kind
of application we are talking about. For some big applications
(38:28):
or some companies, even a delay of maybe yeah, five milliseconds,
I don't yeah, or ten milliseconds could cost them something.
For other applications, it's not so bad to have such
a delay or yeah, it's.
Speaker 6 (38:46):
Also makes sense, like I was just thinking about for
a new startup they're starting up, because if they're starting
with they need to delude a lot of things which
is not related to angle or maybe then it to
deal with the server, how it's handling, how much traffic
it should help because with the clients and rendering, they
(39:06):
are just serving the file maybe from a cian or something.
Speaker 7 (39:10):
But now you need to do a lot of things
you need to you event loopleaques.
Speaker 6 (39:16):
I think a lot of things at that in the
server which you need to we need to know about
if your application might get motorfic. Yeah, so those things
we keep in mind, and Doss says, yeah, I think
we can come back to the topic.
Speaker 1 (39:36):
Yeah, all right, there are still way too many things
to talk about, and we haven't even touched on eighteen
point one, which was released like hours ago, and just
introduce an entirely new operator. But at the same time,
(39:58):
we time really really flew by, and we're already spoken
for forty minutes before we start wrapping up, I want
to make sure that we cover cases that maybe we
didn't talk about that but that might be relevant for Rakia. So, Rakia,
is there anything that we haven't touched on yet? And
(40:22):
perhaps you think that we should like something that is
important enough and we haven't touched So that's kind of
like a catch all question.
Speaker 3 (40:32):
Maybe the improvement in the film's API, the new event
subscribe that would so now we can subscribe and touch
events like Westing events, statos event touched event and value
change event, which is the kind of more refinement in
(40:53):
the film's API.
Speaker 1 (40:55):
Yes, so that specifically, just to make it clear for
the audience, is is it more than just a new
property that was exposed in the form control in the
abstract control or is it because from my understanding that
was it right? It's a new observable that is exposed
(41:18):
and allows you to listen to all sorts of events
that a form that an abstract control can trigger. Is
that correct?
Speaker 5 (41:25):
Yeah?
Speaker 1 (41:26):
Okay, I gotta be honest, I'm still questioning the value
of it. Like I see this as a very good
quality of life improvement, But I didn't saw that announcement
and thought, okay, let me rewrite that component to use that.
(41:50):
You know, it was just okay, we already have that
because we already have the separated observables, right, so we
can listen to the the status changes, and we could
listen to I mean or am I wrong on this?
(42:10):
Like we we already had observables for that, right, they
just weren't unified in a single observable.
Speaker 3 (42:19):
So I think maybe the value of this new improvement
or new observable, it's very well depends on which kind
of components or your I or features we have, because
it will not be relevant the same way for every
farm fields or for every.
Speaker 4 (42:42):
Elements.
Speaker 3 (42:44):
So me too, I have I haven't refacted with anything
in my God in order to use this feature. But
in the past I have seen some some or I
have worked with some components with the DOM and the
events are a bit complex, and there were a lot
of ticky use the interactions that we should catch, and
(43:09):
so one maybe for such kind of applications, this kind
of uh, observable will be more relevant and it will
have more value.
Speaker 1 (43:20):
It makes sense, makes sense. I actually have not had
such cases so to me, I was still wondering about
what was the big value delivered by that feature. But
that that does make sense with your explanation. Interesting. Cool, okay,
(43:40):
Rman super How about you guys, anything you'd like to
mention before you wrap up?
Speaker 7 (43:45):
Yeah, I think you think much from my say they
have fun. Guys have fun.
Speaker 2 (43:51):
That's yeah, all.
Speaker 1 (43:57):
Right, okay, so let's start wrapping up. Let's just do
a quick round of promos, and well, let's start with
with Armen. So Armen, what have you been up to?
Speaker 7 (44:13):
Oh?
Speaker 5 (44:13):
Well, as much as on the previous episodes, I'm gonna
promote my book Modern Angular.
Speaker 2 (44:21):
I have some updates on it.
Speaker 5 (44:23):
Like five months ago, it went into early access so
it could read some of the chapters. Now actually all
of the chapters are available, but it's still not the
final final version of the book. But the book is
in production, is being a copy edited right now. Hopefully
in several weeks it will go into print and that
(44:44):
will be the final release of the book. So, of course,
as I'm super excited about it and our today's topic
is actually the reason that the book took a bit
longer because when we we're close to finishing it off,
we realize that in like six weeks the new Angular
(45:06):
version will come out and probably render the book kind
of obsolete on print, and we decided to hold a
bit to wait to see the version finally come out.
So this is actually because of that reason, the most
up to date Angular book right now kind of not
(45:30):
anymore after today because we now have like lead directive
and so on in Angular eighteen point one, but it's
not really the big stuff.
Speaker 2 (45:39):
So the book covers everything that we start.
Speaker 5 (45:41):
Getting after IVY essentially, so you have standalone components, how
to migrate to them, you have better argues, support, dependency,
injection changes everything, SSR improvements and unit testing, everything that
we have new in the framework. And the book is
following like a project building formats in the sense that
(46:05):
we build an enterprise app with the book, you can
code along and all the features sort of explained in
the chapters are also done in specific formats.
Speaker 2 (46:17):
So first we introduce like a problem that we had.
Speaker 5 (46:20):
Previously, we introduced the solution on a new project and
the one that we're developing, and then all the final
parts of the chapters also have guides on migration, how
you can migrate to send a long components, how it
can migrate to using the inject function, and like the
new guards and resolvers and whatever you have and so on.
Speaker 2 (46:40):
How it can migrate to SSR.
Speaker 5 (46:43):
So yeah, it's sort of the handbook for anyone who
has not been up to speak with the improvements in
Angular and wants to quickly learn what's doing the framework
and how they can sort of set their projects up
to use all the modern features.
Speaker 2 (47:00):
Oh yeah, that's my book. I hope if anyone decides
to buy it that it is help to you.
Speaker 1 (47:08):
Awesome, awesome, all right, And just what's the name of
it again, just so that people can search for it.
Speaker 2 (47:16):
It's called modern Angular.
Speaker 1 (47:18):
Essentially, we have okay, Modern Angler by Arman Vardinia. Cool
and well. On my end, I'm just going to promote
the two companies that produce this show, So Top and
Doves produces a lot of other podcasts, not just about Angler,
so if you're interested in that, I'm also actually hosting
the React show. I do love Angler more, but I
(47:42):
also know about reacts, so I also host that show,
and there are many others as well, so if you're
interested in other subjects, be sure to check out all
the podcasts available and on top and doves and on Void,
which some people might not know exactly how to type it,
but it's with un so u n Void. And the
(48:04):
difference between onvoid and other software development agencies is that
in general, when you try to hire developers, they always work,
they always high, they always charged hourly, and that's not
very client friendly because you never really know how much
is going to take and if there are over times,
you just keep wondering like is this taking longer because
(48:27):
the person is is just taking longer to get paid more,
or is it like really it really makes sense that
it's taken longer. There's always this question and it's just
frustrating for clients. So Onvoid fixes that by agreeing on
the prices per tasth with the clients beforehand, and the
clients only pay after dissts are delivered and approved, so
(48:49):
the clients also can do quality control to make sure
that what is delivered is up to their quality standards
before it actually becomes available. So it's extremely client friendly
and yeah, so be sure interested in that be sure
to check out you n v o I d on
void dot com. This is going to be my text
(49:10):
for today, Rack.
Speaker 7 (49:11):
Yeah, how about you?
Speaker 4 (49:13):
Okay, thanks for the opportunity.
Speaker 3 (49:15):
First, so I'm actually building the community with my which
was started with my medium blog.
Speaker 4 (49:23):
I have reached today.
Speaker 3 (49:26):
One hundred eighty eight articles I think on Medium and
you have also YouTube channel.
Speaker 4 (49:32):
I will invite you guys to join it and subscribe to.
Speaker 1 (49:37):
It, and.
Speaker 3 (49:40):
Maybe for everyone who would like to build the web
performance muscles, I will invite them to join over thirty
one case students and en roll on my udimi video
coals about web perform Master and web performance from noves
to Expect and my second m vidals which was published
(50:04):
on April. There are also the over three k students
and he is a bonus for everyone who would like
to get the chance to get those courses for free.
Speaker 4 (50:16):
You can join my.
Speaker 3 (50:19):
Newsletter because I check their free access to my video courses.
So my newsletter is Rakia Ben Sasi together written without
Rakiah Ben Sasi Ben Sasi dot substack dot com.
Speaker 1 (50:37):
And that's awesome, awesome, thank you, thank you.
Speaker 2 (50:42):
How about you?
Speaker 6 (50:43):
Yeah, I would like to promote my channel is who
is fun of heuristic. So I'm not putting much content now,
but I'm trying to be motivated again and start putting it.
But we have some good content in the past. Please
go tack.
Speaker 1 (51:02):
Okay, all right, guys, Thank you so much for those
listening to us. Thank you for stacking up until the
end of a great week, and I will see you
in the next one.
Popular Podcasts
CrimeLess: Hillbilly Heist
It’s 1996 in rural North Carolina, and an oddball crew makes history when they pull off America’s third largest cash heist. But it’s all downhill from there. Join host Johnny Knoxville as he unspools a wild and woolly tale about a group of regular ‘ol folks who risked it all for a chance at a better life. CrimeLess: Hillbilly Heist answers the question: what would you do with 17.3 million dollars? The answer includes diamond rings, mansions, velvet Elvis paintings, plus a run for the border, murder-for-hire-plots, and FBI busts.
Crime Junkie
Does hearing about a true crime case always leave you scouring the internet for the truth behind the story? Dive into your next mystery with Crime Junkie. Every Monday, join your host Ashley Flowers as she unravels all the details of infamous and underreported true crime cases with her best friend Brit Prawat. From cold cases to missing persons and heroes in our community who seek justice, Crime Junkie is your destination for theories and stories you won’t hear anywhere else. Whether you're a seasoned true crime enthusiast or new to the genre, you'll find yourself on the edge of your seat awaiting a new episode every Monday. If you can never get enough true crime... Congratulations, you’ve found your people. Follow to join a community of Crime Junkies! Crime Junkie is presented by audiochuck Media Company.
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.