S9 E10 | Angular Turns the Big 2-0! | Minko Gechev - The Angular Plus Show

Episode Transcript
Available transcripts are automatically generated. Complete accuracy is not guaranteed.
Speaker 1 (00:04):
M.

Speaker 2 (00:08):
Welcome to the Angular plus Show. We're app developers of
all kinds share their insights and experiences. Let's get started.

Speaker 3 (00:21):
Hello and welcome back to another episode of the Angular
Plus Show. My name is Laura. I'll be one of
your hosts today. With me, I have chow Chow.

Speaker 4 (00:29):
How's it going? Pretty good?

Speaker 1 (00:31):
Nice?

Speaker 5 (00:32):
Yeah, enjoying the summer break with a boy.

Speaker 4 (00:35):
Now, oh you're a summer break already.

Speaker 5 (00:38):
Yeah, he he is, and he's just pre school so.

Speaker 3 (00:43):
Okay, well I like technically my kid is too, but
my kid just graduated from high school. So yeah, so
they are currently still sleeping upstairs at school.

Speaker 4 (00:53):
Wow, what like eighteen year olds do? Apparently we have
que how's it going?

Speaker 1 (01:01):
I'm doing great after the storms over the Midwest, I
guess this way after that, But I mean, you got
hit with the tornado.

Speaker 6 (01:09):
Chow.

Speaker 1 (01:09):
Actually Saint Louis got hit.

Speaker 5 (01:11):
Yeah, so it's got hit, but it's actually just like
uh way closing downtown, so like forty five minutes away
from me.

Speaker 1 (01:18):
But I got an.

Speaker 5 (01:19):
Errand like I think a couple of days ago that
took me to the area that got hit, and traffic
was like in standstill for like three hours.

Speaker 4 (01:27):
Wow.

Speaker 3 (01:27):
You probably get people that like drive through to look
at it, and then there's people like literally just trying
to live their.

Speaker 4 (01:33):
Lives and clean up.

Speaker 1 (01:35):
Yeah.

Speaker 4 (01:36):
Yeah.

Speaker 3 (01:37):
We actually our new house that we bought is like
was on a path of a tornado earlier in the year.

Speaker 4 (01:44):
Oh no, We're like, well, maybe that means it won't
come there.

Speaker 1 (01:47):
Yeah, light, he doesn't strike in the same place twice, right,
We're like.

Speaker 3 (01:52):
At least we know our trees are strong because they've
been through it before.

Speaker 1 (01:56):
Wow.

Speaker 4 (01:57):
So in this very special upisode of the Angular Plus show,
I don't know why I said it that way, but
it is.

Speaker 3 (02:02):
It's a very special episode because we have with us
Minco from the Angular team to talk about Version twenty.

Speaker 4 (02:08):
Minco, how's it going.

Speaker 6 (02:10):
I'm pretty good.

Speaker 4 (02:12):
Nice.

Speaker 6 (02:12):
I'm here in Europe right now, so pretty rainy but
not too bad. No tornadoes around luckily.

Speaker 4 (02:19):
Yeah. Does Bulgaria get tornadoes?

Speaker 6 (02:21):
No, it's pretty mild overall. Yeah. We don't have harsh
winters anymore either, which is I guess sad. But yeah,
it's pretty good.

Speaker 4 (02:32):
Nice. Nice.

Speaker 3 (02:32):
Yeah, I so like we live in I'm a little
north of Tornado Alley, but Chow and cue like you're
just straight up tornado alley. So we definitely. I remember
moving to the West Coast and having having people in
Los Angeles tell me how afraid of tornadoes they were,

(02:54):
and I'm like, wait a minute, but I'm afraid of earthquakes.

Speaker 4 (02:56):
So I think it's you get used to whatever you're living.

Speaker 1 (03:00):
Yeah, Bulgaria or any does Yepe even get tornadoes? Like
I feel like I've never heard of a tornado hitting Europe.

Speaker 6 (03:10):
I haven't either. Yeah, in San Francisco, we're most of
the year we're there. We have earthquakes occasionally, but you
usually don't feel them. They're just mild.

Speaker 4 (03:20):
Yeah, yeah, yeah, I know that.

Speaker 3 (03:22):
Like I know that they can get extreme weather events
because I went to Utrecht this year and the cathedral
in Utrecht the nave collapsed during what they think was
a durracho type event and so but that was like,
you know, a couple hundred years ago, and so like,
I know that they can get extreme weather events, but

(03:43):
I I guess I don't know if they get them
as badly as It's not like Oklahoma like was like
not the place to be in the tornado.

Speaker 6 (03:56):
I've experienced my my worst earthquake here in Bulgaria. Actually,
I was in university many years ago, now in Ceas school. Luckily,
so far I haven't experienced anything too bad.

Speaker 3 (04:07):
But yeah, yeah, they can be scary for sure. So
on the flip side of that, not scary. And also,
to harken back to the graduation talk, Angular has released
version twenty.

Speaker 4 (04:25):
And probably I feel like the first thing we can.

Speaker 3 (04:27):
Talk about are all the graduations we had in this version.
A lot of great tools have been released to stable,
So you want to tell us a little bit about that.

Speaker 6 (04:39):
Yeah, so just to say a little context before that.
As the three of you probably know, when we build
new features, we usually go through or on like three phases.
We identify the features by collecting a lot of feedback
from developers. After that we ship them an experimental or

(05:00):
oper preview, and we spent a lot of time iterating
on the futures, depending on how big they are and
what they are. And eventually we polish whatever we've built
based on feedback, based on different experiments, and we graduate
these APIs to stable. So in version twenty, we spent

(05:21):
a lot of time working on developer experience improvements and
a lot of time polishing these APIs that we introduced
over the past couple of years. This makes the release
not scary, Like I'm hopeful that we didn't have scary
releases over the past few years, but this one is
one of the least scary ones. Polish is a lot
of APIs and you should be free to use them now.

Speaker 3 (05:44):
Nice nice, And I think a lot of the API
is when things get released in developer preview.

Speaker 4 (05:50):
I know that people feel a little like experimental.

Speaker 3 (05:53):
I'm still like, I'm not going to use that in
production code developer preview. Kind of depending on what it is,
I might be like, maybe I could totally use like
we use control flow way before, like in the version
it was released in developer preview, but luckily the API
didn't change that much, so it was pretty easy to
do that. So which of our features have graduated in

(06:18):
version twenty.

Speaker 6 (06:20):
So we have some reactivity APIs Effect is now stable.
We promoted the stable together with linked signal and two signal,
and so these are on the activity sides. But what
I'm particularly excited about, well, I being always fan of
performance service side rendering, incremental hydration now is stable as well,

(06:40):
together with the route level render mode configuration. All of
these APIs are production ready, even though in Developer previous
you said many many developers use them and they're well implemented.
The only kyah there is that we may change the
public API service without following semantic version. Developer, you know,

(07:00):
all these APIs that are that I mentioned are locked,
and we'll be following semantic version in very strictly.

Speaker 3 (07:08):
Nice nice I have to be. I have to miss
something slightly embarrassing. I didn't even realize to Signal wasn't
stable release.

Speaker 4 (07:19):
So we've definitely been using that.

Speaker 3 (07:22):
Yeah, So, were there any major changes to any of
these APIs that our listeners need to be aware of
as they moved to stable release or did they?

Speaker 6 (07:31):
There are there are some minor changes like that I'm
that I'm so yeah, well not since version nineteen that
I'm aware of, except for router modes for route level
render modes, where we slightly updated a couple of APIs
with Signal. We did some timing change I believe in
version nineteen, but like everything since then has been pretty stable.

(07:54):
We spent a lot of time on Zoness. This time
Zoness was experimental and now in version twenty is Developer preview,
and we have plenty of new features there, like for example,
global error handling because zones were implicitly kind of catching
all the years that happened in your application and you
had good air reporting, but with zones, well, no longer

(08:18):
having zones, so that was like a gap that we
addressed in version twenty. There were also there is also
some work with it around stability of service side rendering,
so we know when your application has been rendered and
you can pass it to the client. That's These are
the These are some of the major things we graduated to,

(08:42):
like Heter's table or developer preview.

Speaker 7 (08:44):
Yeah, and it looks like you also spent some time,
like especially around hydration, developing developer tools to help.

Speaker 4 (08:55):
With developer experience, because I mean, so for the.

Speaker 3 (08:59):
Listener, if you're doing server side rendering, you get back
the HT like it looks right, but it might not
be hydrated, and so understanding if your page is actually
hydrated becomes more important. And there were some other what
were the other depth tools that were released in this release?

Speaker 4 (09:16):
I feel like there were more.

Speaker 6 (09:17):
Yeah, so to expand on this feature. Now in your
debt tools it has deferable view support and this includes
client only deferable views only, like defer block, So it
will show you where somewhere in the componentry you have
a deferable view and it will update whenever the content
for these deferable view loads. You'll be also able to

(09:37):
preview like what is the trigger and if you're using
defer together with incremental hydration, you'd also see that see
which part of your componentry has been is hydrated at
this point, and whenever the trigger for defer activated, I guess,
and you hydrate the individual, the kind of parts within

(10:02):
the individual, like parts of the view within the defour block,
you'd see the mass hydrated as all. So, yeah, pretty
convenient for debugging.

Speaker 4 (10:08):
Yeah, very cool.

Speaker 3 (10:11):
All right, So and yeah you said, I feel like
this really is a lot of developer experience experience improvements
because there's there's been so many things that have gotten released,
you know, like like linked signal, you know, all of
like incremental hydration, Like there's been so much kind of
coming at us. So it makes sense that we would

(10:33):
have sort of the reckoning the.

Speaker 4 (10:36):
Reckoning episode, if you will, where we're like.

Speaker 3 (10:38):
Okay, now, like now all these things are stable and
now we're going to keep moving on. So so yeah,
so all right, so what else is there hiding for
us here in version twenty.

Speaker 6 (10:49):
Yeah, since we're talking about death Tools, let me share
a little bit more about it. Yeah, we are currently
working on a couple of features in death Tools that
didn't land in version twenty. One of them is review
of the reactivity graph. So you'll be able to when
you click on a component, you'll be able to see
the reactivity graph within the context of this component or

(11:12):
like all the effects all the computers and all the
signals within this component and how they're connected. So that's
hopefully going to make it pretty convenient to understand the
relationships between the different components and between the different kind
of reactive properties within your app. You'll be also able
to change this reactive state.

Speaker 4 (11:29):
Yeah, that's really cool.

Speaker 3 (11:30):
I feel like the dependency graph is sort of an
abstract concept, and so having a way to visualize that
I think will be really helpful, especially to understand how
everything is connected.

Speaker 6 (11:44):
Yeah. Yeah, yeah, that's one of the features that we're
working on right now. On reactivity sides, we mostly have it,
just we need to have slightly better visuals. Right now,
everything just works, but yeah, full of shit. More and
The other feature that we have been working on is

(12:05):
kind of more details in there. So currently have we
have router tree. You can do the Rotter tree in
your app, but it is under a feature of black
you need to enable it in settings. So we are
adding some details where you can explore the confit for
the individual routes.

Speaker 1 (12:21):
It was Router changing because I noticed that the website
the docks have been updated pretty substantially. Are they making changes.

Speaker 6 (12:30):
To Router Oh, we just wanted to update the guides. Yeah,
that's okay. I didn't talk much about the documentation, but
that's that's one of the biggest changes I guess we
shipped in terms of docks in version twenty completely re
rolled the routter guide.

Speaker 1 (12:44):
Yeah, that one's really nicely set up. Now.

Speaker 4 (12:48):
Yeah, I'm excited. I have a course I need to update,
so I've been waiting for version twenty to come out
of that. I'm using the correct version of the docks.

Speaker 6 (13:00):
It makes uh, the de balance injection guides we need
to We've been working rewriting it as well.

Speaker 4 (13:05):
Nice. Nice.

Speaker 3 (13:06):
Yeah, there's I think when you have a framework as
large as Angular that can do as much as it does,
there's it's easy to put documentation off to the last,
but it's so important to have it, and I know
as the community, we definitely appreciate all the effort that
goes into that. Also, you know, if we're using copilot,

(13:27):
like it's nice to have improved docs because then we're
getting better responses out of our copilot instance and stuff.

Speaker 4 (13:34):
So so yeah, thank you.

Speaker 1 (13:37):
The other thing that they updated too is the style guide.
Some of this stuff in there has been debated, like
preferring inject over constructors like A now said A said truth.
So it's really cool. Organization for your project has changed
a little bit because US two you'd have component directive

(13:59):
and asset that's directories and no longer have that anymore
and separate about features. There's a lot of cool like
the if you haven't checked out the doctor, you're hearing
this for the first time and hadn't checked out the docs,
I would totally go back. And there's a lot of
things that are gotchas.

Speaker 3 (14:12):
Now yeah, like what do you feel like is the
most controversial suggestion, and the angular style guide.

Speaker 6 (14:18):
I think the most controversial was the optional prefixes SUO
fixes story that's introduced. I can give you a little
kind of history. I'm like an archaeologist for a style guide.

Speaker 4 (14:32):
I love it.

Speaker 6 (14:33):
I can share a little history about the style guy.
And I'd love to share about one more improvement with
Deft tooling. It's a one that I'm the most excited about.
So with the style guide, like we had I don't remember,
I don't know if you remember, but we had like
quite a few Anger Jet style guides. I kicked off

(14:53):
one back in twenty thirteen, Thought Moto created one and
John Pappa created one, and they were a the kind
of overlapping but also at the same time different. John
did a great job expanding his style guide, making it
very very descriptive with version but also think like applications
were very different across the industry because people were following

(15:16):
different style guides. Something that we did for version two
of Anger was we gether together. I guess back then
I was not part of the team. You were invited me,
John and Ward Bell, and we started discussing how I
can create like one official Anger style guide so that
we can have this unified way for creating your applications.

(15:40):
And this happened. I'd say I was exactly in this
co working space maybe like different building but the same
co working space when I had these meetings, So brings
back memories. That was about ten years ago now, and
back then, nobody really knew how to write Anger apps
because that was a new framework pretty much.

Speaker 3 (16:01):
Yes, well, and like there was all the documentation about
version one and it just.

Speaker 4 (16:07):
It didn't work. Version like it was completely different.

Speaker 3 (16:12):
So yeah, because I actually that's when I started writing Angler,
and I picked up version one because there wasn't enough
documentation for me to successfully use version two because of
where I was at in my career and the fact
that I worked all by myself.

Speaker 8 (16:24):
So yeah, there were there were there were like dark
cages back then. Yeah, we ended up, Yeah, we ended
up shipping the Stout Guy and stow Guy was just
like shooting in the dark, pretty much inspired by an
your Jazz, but like it, Anger was a different, different framework.
And we didn't update the Stout Guide for many years

(16:45):
after that mentioned ten years.

Speaker 6 (16:48):
We so in version twenty. Luckily, Jeremy wanted to help
modernize the Stout Guide, so we found someone who was
willing to put the work, which was we're just a
good amount of work and dealing with style guides it's
it's not an easy thing. Everyone likes to argue about style.

Speaker 3 (17:06):
Absolutely, like this is the number one way to get
people to like at you on social media.

Speaker 6 (17:11):
So yeah, absolutely, So we did some simplifications. We made
the SEW fixes optional because just when you open an
Anger product and you see these large file names, it
contributes to just the mental overhead thinking about the framework
being very complicated, and we don't want to be there.
There are some tradeoffs of this, of course, Like I

(17:33):
guess the main trade offs is potentially not having the
different icons individual STUDI code for directors, services, and pipes,
but we kept them for people who want to have
these different icons. Some people are also that command pe
or like fuzzy search for files could be harder to

(17:53):
which is not necessarily the case. We need to be
a little more intention about naming our files and piece
still going to work pretty well. But the other thing
that was kind of more controversial for me at first
was we wanted to drop the host bindings and host
listeners decorators, not drop them as APIs, but just drop
them from the style guide. And that was a kind

(18:18):
of not a bad idea because we're slowly moving away
from certain decorators. But at the same time, the alternative
was to use the directive metadata and the host property
there and all the expressions that you're writing are just
pure strings, no type checking, no IDEA support, nothing, So
we spent a good amount of time in polishing the

(18:38):
developer experience to enable better type checking, autocompletion, synthe sighlighting,
and host expressions within the component or directive metadata. So
that's one of the developer experience improvements that the styles
in the style changes in the style guide actually helped
us ship.

Speaker 3 (18:57):
Yeah, so like if you didn't quite catch that, now
we get type checking in the host bindings, like in
the declaration like the decorator, not like in like component
or directive or whatever.

Speaker 4 (19:11):
So it's a.

Speaker 3 (19:12):
Lot better experience because I think that held back a
lot of people from actually using that style because it
lacked the type checking.

Speaker 6 (19:22):
So yeah, yeah, yeah, that's about the style guid. Can
I share about my favorite developer experience debugging improvements?

Speaker 4 (19:31):
I get? Yeah, yeah, yeah, for sure, far please do.

Speaker 6 (19:37):
So. We worked closely with Chrome deft tools to ship
a custom and your specific performance track in the performance timeline.
That's my favorite teacher because well, it integrates really well
with Chrome deft tools, and you can see how long
did you spend in different in the life cycle of
your application. You can map it directed, just as can

(19:59):
fund goals by looking at the flame chart in Chrome
deft Tools. So integrates really well with the tool that.

Speaker 4 (20:06):
I'm really excited to test that out.

Speaker 3 (20:08):
Because in NGI Comp last year or so, twenty twenty four, uh,
Stephen Cooper did a great talk about profiling your Angular
application and he demonstrated using the performance tab in Chrome
dub tools and it's I liked it then, and so
having it be specifically for Angular, I think will be

(20:30):
I'm excited to see how that really helps to unlock
some of the issues, because there are some issues you
can run into that you just don't even realize. I mean,
there's so many mistakes you can make that you don't
realize you've made them until you start looking at that tab.

Speaker 4 (20:45):
And you're like, what is happening here?

Speaker 3 (20:47):
And so I would say to the listener, if you
haven't watched Steven's talk, definitely go check that out. It's
on the NGI comp YouTube. And then I'm excited to
see this.

Speaker 1 (20:59):
Do you well?

Speaker 3 (20:59):
The Angular team released are there I assume there's going
to be videos sort of demonstrating how this works.

Speaker 6 (21:04):
Or yeah, there will be a blog post also. By Chrome,
it's pretty easy. You just run in the console eng
dot enable profiling.

Speaker 4 (21:14):
Nice.

Speaker 6 (21:15):
It's a function, and from there you can open Chrome
deft tools and in the Performance TEP you're going to
start seeing Angler specific data.

Speaker 1 (21:22):
Would you have to be on twenty for that or
is that just as long as you're in Chrome and
you an Angular you can you can check it out.

Speaker 5 (21:27):
Yeah.

Speaker 6 (21:28):
Yeah, you have to be in twenty. We had to
add some instrumentation in Angular, and if you're not on
twenty you can still using your death tools profiler. It's
it's a really good start. I'll recommendity to just start
debugging with like profiling within your profiler. If there is
something obvious is going to immediately tell you, and if
there is something a little more subtle, you can switch

(21:50):
to Chrome from deft tools.

Speaker 4 (21:53):
Nice.

Speaker 3 (21:54):
Yeah, because the Angular profiler does get you, it gives
you quite a bit of information, but it doesn't quite
drill in as much as the Performance tab does.

Speaker 4 (22:03):
So nice excellent. Yeah, I'm really excited to use that.

Speaker 3 (22:09):
I feel like that's the these kind of tools are
what take an application from being a good application to
being a great application because you can really start to
fine tune some of that performance and really see where
where your application might be lagging. So excellent, all right,
So we have better dev tooling, we have improvements to

(22:31):
developer experience. We've got a lot of stuff graduating to
stable release, we've got zoneless moving to dev preview.

Speaker 4 (22:39):
What about resource API?

Speaker 6 (22:42):
Yeah, resources staying experimental, but we added streaming to resource
in case let's say we have like a web socket
stream or whatever, and you're returning signal from resource and
get the updates from the socket. That's pretty good, VIDI.
And also we add a HTP resource that it can

(23:03):
start experimenting with today, so it's pretty convenient. You can
implement very interesting patterns with it.

Speaker 3 (23:09):
And that's in developer previews or i'm sorry, in experimental mode.
So we should expect that there will be breaking changes
before it graduates to stable release, and maybe not, but
I feel like that's always my rule of them, Like
if it's experimental. If y'all say it's experimental, that means
that it's not quite baked, So definitely be prepared to

(23:30):
make changes if you implement that in your production code.
So yeah, that's that's really exciting as well, because at
that point, then if I feel like that, if for
developer experience, you could potentially just get by without having
to understand observables at all.

Speaker 4 (23:46):
Yeah, yeah, so that's uh.

Speaker 3 (23:50):
I think that's always been sort of a you know
for like old school Angular devs, and like I feel
like you get your like, uh, your Angular badge when
you finally figure out the difference with between like a
merged math and a switch map. But like it is
certainly one of the higher bars of entry to using Angular.
So I think that's a really exciting improvement.

Speaker 9 (24:11):
Good morning, you know that moment when your coffee hasn't
kicked in yet, but your slack is already blowing up
with Hey did you hear about that new framework that
just dropped? Yeah, me too. That's why I created the
Weekly Dev Spur, the newsletter that catches you up on
all the web dev chaos while you're still on your
first cup.

Speaker 1 (24:31):
Oh look, another anger.

Speaker 9 (24:32):
Feature was just released, and what's this typescripts doing something again?
Look also through the poor request and changelot grama so
you don't have to five minutes with my newsletter on
Wednesday morning, and you'll be the most informed person in
your stand up. Ah, that's better the Weekly desper because

(24:54):
your brain deserves a gentle onboarding to the week's tech math.
Does sign up at weekly brewed dot and get your
those of deaf news with your morning caffeine. No hype,
no clickback, just the updates that actually matter. Your Wednesday
morning self will thank you.

Speaker 4 (25:10):
All right, So what else is there in version twenty?

Speaker 6 (25:13):
Yeah there is more.

Speaker 4 (25:15):
Wait, there's more.

Speaker 6 (25:17):
A lot of time writing this blog post. Looking at
the dates, I started it in April twenty third, April
twenty third and I finished it mid nineteenth, so almost
a month.

Speaker 3 (25:31):
I feel like they're just like that ticket goes on
the board, Like the day the twenty gets released, they're like,
all right, man, go start working on the blog post
for twenty one.

Speaker 6 (25:41):
Yeah, it's it's been It'll be fun to do that
because like, overall, you don't that's kind of the only
way on in your team when you get to have
to see everything with ships, because otherwise you're usually focused
on one particular piece that is going to be part
of their eighties. So it's it's also yeah, good amount

(26:05):
of writing click aty gem and I can help occasionally.

Speaker 4 (26:07):
Yeah, definitely.

Speaker 3 (26:09):
I do have to say, and I want to say
this to you directly, because you do write so many
of these posts that they are so helpful. I'm teaching
a workshop on updating Angular apps, and it is so
hard to remember what version was that out in and
was it in developer, like when was that in Developer preview?

Speaker 4 (26:27):
When did that graduate?

Speaker 3 (26:28):
And so having these sort of historical blog documents where
it's like, here's what happened in this release, it's made
it a lot easier, and I think it makes it
easier for people to who are trying to go through
that update process, to go from version to version, to
know what they can do now, like if you get
to version fourteen, here's what you get. If you get
to version fifteen, here's what you get. And I think

(26:49):
having those historical documents is really helpful.

Speaker 6 (26:52):
Well to hear. Yeah, there's also just great to boy. Yeah, sorry,
go ahead, kid.

Speaker 4 (26:57):
Oh no, I was just saying thank you.

Speaker 6 (27:00):
I was going to say. There is also this great
tool by like an an your contributor, like a community member,
by Jeremy who created a anger note forces slash can
I use tool.

Speaker 3 (27:13):
Yes, you posted that on Blue Sky and I sent
it to my team immediately, So.

Speaker 6 (27:21):
I personally use it sometimes because I have I don't remember,
I don't remember when you shipped any like a particular API,
so I have to I remember some of the highlights.
But it's a very comprehensive. It's a it's a great tool.
Really really love it.

Speaker 4 (27:35):
Yeah, yeah, definitely, because it is hard to remember.

Speaker 3 (27:40):
And it's easy to get really excited about stuff, you know,
like everyone was super excited when the resource API came out,
and I'm like, okay, guys, I know it's really cool,
but like I cannot embed this in all of our
production code today, Like we need to just wait a minute.

Speaker 1 (27:53):
Don't worry.

Speaker 3 (27:53):
It's going to be like maybe a year and then
we'll get it. So I put a timeline on you.

Speaker 4 (28:00):
They are just now, like just to hear you are.

Speaker 6 (28:05):
All right? So yeah, talking about features.

Speaker 4 (28:09):
Yeah, so reading back through your blog post, what comes next?

Speaker 6 (28:12):
We have some new framework features. For example, for the
when you're dynamically creating a component. Now at create component
you can specify bindings, outputs, and even two way bindings
and add the rectors to these components. Easier, So dynamic
component creation is now significantly more convenient. Yeah, we've been

(28:35):
playing also with the temple thing. Excuse me, with the
templed expression. Ideally would like to have the in your
temple expression to be valid like JavaScript, and now it
mostly is. But I don't know if folks are aware
or we have our own parser and compiler of the

(28:57):
anger template expression. Even though the delta bit in javascripts
and the and your template expressions like it's not big,
we still need to have a custom compiler in a way. Ah,
So we're reducing this data further and we're thinking about
how it can make it kind of even more expressive
in the future. But that's in version twenty we introduced

(29:19):
just like power, so math dot.

Speaker 1 (29:25):
What is it?

Speaker 6 (29:27):
Is it mouth dot peel w That was one, Yeah,
math dot lie.

Speaker 4 (29:35):
I usually look those things up.

Speaker 6 (29:38):
Operator in air way like with double as risk, and
we added also an inoperator nice and antag template literal.
So I guess three new features in the templating language nice.

Speaker 3 (29:53):
I want to go back just a second to the
dynamic component creation. So is this meant to replace how
does this work with NG component outlet?

Speaker 4 (30:04):
Is it replacing that?

Speaker 6 (30:06):
Is it well, this is primary for instantiation of components. Okay, yeah,
so you you'll create components and you'll be able to
configure it. So uh and it is a like imperative
way to do that within your typescript code.

Speaker 4 (30:21):
Nice.

Speaker 3 (30:21):
Nice, Yeah, because I know that, Like we've with dynamic
component creation, one of the pieces we've struggled with as
a team using NG component outlet and just trying to
render things is binding to outputs.

Speaker 4 (30:33):
There's no way to do that, so well, no framework
supported way to do that.

Speaker 6 (30:40):
So yeah, now there is a function called output binding
that allows you to director specify the name of the
output and also attached to a listener.

Speaker 4 (30:49):
Nice. Thank you for that, because that is going to
solve a lot of our problems.

Speaker 3 (30:56):
Excellent, that's that's really cool and so and our So
we've got the dynamic component creation API improvements, we've got
the new template, new templating stuff coming in.

Speaker 6 (31:12):
Yeah, there's more. Also extended diagnostics, so we have a
couple of additional check For example, we can see whether
you're using invalid LLUS gal lessing or missing imports for
structural directives, or also showing you a warning if you're
missing if you're not calling the truck like you know

(31:35):
in four how you have a track function yes that
you need to call if you don't call it, Like
pretty much all the items in the collection are going
to have the same identifier, which is going to be
kind of the function to strength in a way. So
you're not going to have very efficient rendering. And it's
a common error. It's like easy to forget to call

(31:55):
the function. Yeah.

Speaker 1 (31:57):
Yeah.

Speaker 4 (31:57):
And if you've ever had like a lot of on.

Speaker 3 (32:00):
The page and you go to change something that's energy
forward over and you see like when you select something
you see a flicker, that's because you haven't implemented your
track by And it's because it's when it does the
no by node comparison.

Speaker 4 (32:14):
It can't compare no by node.

Speaker 3 (32:16):
It just says, I don't know what the nodes are,
so I'm going to replace the whole the whole thing,
and then you get a flicker. So so next, So
that's you said that was.

Speaker 6 (32:26):
A new new feature in the extenting diagnostics. So you're
going to get in there and it's it's it's in
fact the community contribution by Inia Next and the other
the other feature that I said about missing structural directives
that you haven't important. It's also a community contribution, so
by Kevin Brain. So it's this has been honestly like

(32:50):
a release pact with community contributions.

Speaker 3 (32:53):
Yeah, yeah, and that's really great. I think that's the
I think the best way to know what your framework
is missing is by asking people who use your framework
every day to solve difficult problems. So I love seeing
the community contribute stuff because usually it's it's something that
other teams need as well. I always say, like any

(33:15):
problem you run into, you're it's probably not unique to yourself,
like somebody else has probably either struggled with it or
solved it.

Speaker 4 (33:21):
So well, that's great.

Speaker 6 (33:25):
In this releason, we got I think about two hundred
and twenty five more than two hundred and twenty five
contributions only between Vision nineteen and version twenty. This has
been great.

Speaker 4 (33:39):
I feel like that's an indication of a very healthy community.
But that's real good.

Speaker 3 (33:45):
So when you're looking at community contributions, what what types
of contributions do you see the community making the most?

Speaker 6 (33:53):
Yeah, therefore, like fixing documentation issues, that's the most common one.
That's that's how I started contributing to ing your fifteen
years ago. So and uh, these are the I would say,
the best way to get started too. You don't even
have to clone the ripoint and run anything. You just
edit the file and get happen. That's it.

Speaker 4 (34:12):
Oh yeah, that's that is nice because it is a
lot to.

Speaker 1 (34:16):
Pull down and fork and follow all the rules and.

Speaker 3 (34:20):
Yeah, and I every now and then you do run
into a problem where you're like, these docs are just
not quite right, like this is not how we should
be doing this, or you know, even just minor typos.
It's like you're the unsung heroes of the framework when
you're helping to maintain that documentation. So excellent, all right,
So is there anything else hiding here in version two?

Speaker 4 (34:42):
Yeah?

Speaker 6 (34:42):
Yeah, touch on probably the biggest, one of the biggest
things we ship in Vision twenty, which is the experimental
support for v test that comes in with obviously the
v test runner with watch mode and browser support, browser
testing support, and it's a pretty straightforward to use it.

(35:03):
All you need to do is install v tests and
like jazz Don't if you want to use jazz Don't. Alternatively,
you need to install Playwright or browser Testing and from
there you can just go to and your adjacent edits
the builder, the test builder, that's how we call them
builders that we can call it like test extension or

(35:24):
whatever to update to the new one, and that's pretty
much that from there on. Well, very much depends what
kind of like you may need to import described before
each It expects all these kind of tools from the
v Test Assertion library, but mostly everything should work if

(35:49):
you if you're using some very Jazmine specific things, it's
unlikely to work. You have to migrate them. But we
have been exploring an option to use vit us with
Jazzman in the long run. So yeah, whenever, this is
still experimental, so not developer preview you to try, but

(36:10):
when it starts approaching stable, we would we're going to
invest more in making the transition from Carton easier.

Speaker 4 (36:18):
Nice.

Speaker 3 (36:19):
Nice, Yeah, I know that we had Unis on and
he was talking about like if you're doing like just
dot function, like, those are the sorts of things that
you're going to have to update if you're trying to
make the transition over to V tests.

Speaker 4 (36:32):
So if you missed that episode, check it out. We
do talk about V tests with Unis in that episode, so.

Speaker 1 (36:39):
We dabbled in it a little bit.

Speaker 3 (36:41):
We did a lot of stuff that wasn't at all
related to you, but last twenty minutes we're like, okay,
but I guess we should talk about.

Speaker 1 (36:50):
The stuff we did talk about was very important, though
it was it was.

Speaker 4 (36:53):
So talking about builders.

Speaker 3 (36:55):
Is there anything coming with yes build or anything like that?

Speaker 4 (36:59):
And urgent twenty Uh no, his gooid.

Speaker 6 (37:02):
This is in a pretty good state, so I feel
free to switch to our application builder. Now. There are
some other things like that to shift, though it seems
like the list is growing. We we have been investing
more in the like like everyone, we have been looking
at the GENEI space and thinking how to support developers
to write to be productive with GENI and over. There

(37:26):
are two paths for developers. One of them is to
just generate scaffold cold faster so that they don't have
to write everything manually. And you don't want us to
add GENEI capabilities to their apps. We have been we've
worked on LM's dot txt with kind of different variations
of this that that aims to let l ms know

(37:46):
what is the latest anger so that they can generate
modern code. And uh yeah, we'll see. I'm not aware
of LM's xt being an official standard now, and we
don't know how much attention elms are actually paying to it,
but I guess over time, more and more, as more
and more people in the community start implementing using LSTXT

(38:09):
is going to end up becoming the way to yes
tellens particular things interesting.

Speaker 4 (38:15):
Yeah.

Speaker 3 (38:15):
Yeah, like one of you know, our teams, we have
been heavily adopting AI practices and right now we're putting
a lot of guardrails in, like, hey, let's always use
the inject function, let's always use this, you know, in
like dot instruction type files and and those are helpful.

Speaker 4 (38:36):
But yeah, I think this is I think probably the biggest.

Speaker 3 (38:39):
Issue that we've had is getting the code that comes
out to fit what we wanted, like the best modern
best practices. Yeah, there's a lot of angular code on
on the webs nice and Yeah.

Speaker 6 (38:57):
On the other side, when you want to introduce Jenny
I to your application, we also shipped and your Death
Slash AI where you can see how you can get
started market and recorded videos on building apps for it.

Speaker 1 (39:11):
What was it did you get that for the I
hadn't seen that before.

Speaker 6 (39:16):
The Yeah, and your little Death Slash AI. Okay, the
part of version twenty. You can also see the live
streams there. I think they did three live streams. There
are instructions how you can use drink kits, there are
some best practices, and uh, it's a it's a good
place to get started.

Speaker 4 (39:36):
Yeah, definitely. I feel like this is we're having the drink.

Speaker 3 (39:39):
From the fire hose moment as developers, I think just
as a whole community because there there's so many tools.
I mean, just what was it like just a couple
of days Google released Jewels, Like there's all these things
that are coming out and it's like I don't even
know where to start.

Speaker 4 (39:58):
So it's nice to have this tooling.

Speaker 3 (40:02):
And I do very specifically remember interviewing Mark and he
was like, AI is the future and we're like, hah whatever, Mark.

Speaker 1 (40:11):
Mark's always on the right side of history from what
I remember.

Speaker 4 (40:15):
Never never don't listen to Mark.

Speaker 3 (40:17):
I guess this is the going here, so nice, So
I put that link here. In the show notes, we talked.

Speaker 1 (40:26):
About graduators, We talked about cool things. Are is there
anyone retiring? Is there anything just map to be gone?
Deprecations are removals?

Speaker 4 (40:35):
Yeahs are important?

Speaker 6 (40:37):
Right reading my mind here Yeah, so we are deprecating
ANGI if NGI four and and you switch no more
control flowing anger. That's it.

Speaker 1 (40:48):
Oh wow.

Speaker 3 (40:50):
You know, as far as retirements go, I feel like
these are like employees, and I'm like, I'm you know,
I'm thank you for your service.

Speaker 1 (40:57):
Right with you.

Speaker 4 (40:59):
I'm really happy you're retiring. I don't miss you at all.

Speaker 6 (41:04):
Yeah.

Speaker 3 (41:05):
So what does this mean for people maintaining applications that
are just chalk full of ng IF and G switch
ENG four.

Speaker 6 (41:14):
Yeah. The best thing to do is to just run
ang generate at the anger, slash core, go on control
dash flow, and this is thing to move you to
the latest control flow, make your application smaller, faster, the
source code looking better.

Speaker 3 (41:29):
Yes, and I can confirm I have run that schematic
on some very complicated templates.

Speaker 4 (41:36):
It really does a kind of fantastic job.

Speaker 3 (41:40):
My flow is usually we run it, we go back in,
we look at it, and usually the only changes we
have to make are optimizations where we're saying where I
was doing a nested if to handle like if it's loaded,
if it's air, if it you know, all of those
different states you could be in. We can use if
else instead of mess flocks and that's usually the only

(42:02):
change I've had to make. I honestly, it's been pretty
flawless every time, so that's awesome.

Speaker 6 (42:08):
Yeah. We also made this decision based on the stats
we get from HTP archive. More than half of the
Angurovision seventeen plus applications are using this new control flaw.

Speaker 4 (42:23):
Yeah.

Speaker 3 (42:24):
Yeah, I think that really goes to show, like, first
of all, that the community is excited for that change,
but also that's honestly, that schematic is so good. It's
just made it so easy because it is it would
be a tedious change to go in and do manually.

Speaker 1 (42:37):
Oh yeah, I mean we we we did it manually mostly,
but I.

Speaker 4 (42:45):
Did some manual myself.

Speaker 1 (42:46):
Yeah.

Speaker 4 (42:47):
Oh wait, there's a chematic.

Speaker 1 (42:49):
We were almost done with it whenever the schematic came
out and it was like, oh cool, that's that's.

Speaker 10 (42:53):
Neat And there's actually, like I was looking at version nineteen,
there are a ton lot of like migration schematics that
are supported.

Speaker 3 (43:04):
Now, so yeah, like you really have to like there's
you can do standalone control flow. I'm trying to think
of what some of the other ones are now because
now now that I brought that up, my brain has
completely blanked. But what I can see is that there's
a slot when you open the migration's folder.

Speaker 4 (43:22):
There's a whole lot lessen.

Speaker 6 (43:25):
Yeah, so.

Speaker 3 (43:28):
Were there any new migration tools added, lint rules, anything
like that.

Speaker 6 (43:33):
Yeah, the extended diagnostics, they're they're kind of lind rules
in a way we have for templates that are very
tightly coupled with a compiler. I think the the and
your mask cup might be the last thing that we have.

Speaker 3 (43:48):
Okay, Like, so, this is probably the most exciting RFC
I've ever heard about. So would you please walk us
through what is arguably the most important RFC the Angular
community has ever participated in.

Speaker 6 (44:02):
Yeah. So, I've been doing Anger for a while now,
and I've always wanted to have like a plushy or
like a keychain with like a mascot that symbolizes Angular,
and we haven't really had that. Like, the closest thing
to this that we have had was the Anger shield

(44:23):
and it's okay, but giving it a little bit of
a personality would be fun. So, uh, this has been
my non technical passion project for a couple of months.
For a few months, I've been working with the designers
that developed the fire Base and the Flutter of Dart mascots,

(44:45):
and they based on kind of a lot of research
about Anger and based on a lot of history that
we provided to them, and based on a lot of
thinking from the and a lot of feedback from the
team and Salite teams. We came up with three different
kind of mascots alternatives that would like to propose as

(45:08):
the official Anger mascot. There is an RFC on geol
dot g O slash Anger Dash Mascot Dash RFC. I'm
sure you're gonna provide a link in the description of
the episode also, and people can just go there, look
at the mascots and tell us which one they like
the most. Also, feel free to propose different visual changes.

(45:31):
We would really love to. We really want to make
sure that we really like the mascot that is going
to be the official Anger mascot. Peace, We're going to
be stuck with it for a while.

Speaker 4 (45:41):
It's true like limited edition, like this was the first
mascot stuff or that.

Speaker 1 (45:49):
Yeah, I want I want to plushy at ng com
for something that'd be pretty legit.

Speaker 3 (45:53):
Well, you know, like Makeshift does some pretty amazing works,
Like so I have this artist I follow NAM Chris
Simpson who makes just absolute ridiculous stuff and he every
year releases a new stuffy and I own all of them.

Speaker 4 (46:04):
So I think this is what we should do.

Speaker 3 (46:11):
So also, I guess when you're suggesting changes to the mascot,
think about how it might look and plushy formed.

Speaker 4 (46:23):
So so, yeah.

Speaker 3 (46:24):
The community can go in and make comments, vote on
which one they like the best, and then when do
you plan to release the results of this very important research.

Speaker 6 (46:35):
Yeah, we're gonna run the RC for a while just
to be certain that we're going the right direction. It's
we went through a lot of iterations so ready, I'll
say we, like I causually kicked all this project. Last year,
we went through a bunch of I don't know, I'll
say over one hundred different options. We haven't had a
banana in a box. That was very tempting, but we

(46:57):
ended up sticking with a kind of your kind of
and your shaped character that reminds me a lot of
the your logo. And also the team was really fan
of the anglerfish, which looks absolutely terrifying.

Speaker 3 (47:13):
It's totally like, yeah, I'm like, you know what I
think of when I think of the angular community is
just like a whole bunch of angler fishes.

Speaker 4 (47:21):
With our big scary teeth and our like vacant eyes.

Speaker 3 (47:27):
But what I will say about the angler fish, what
I do like about this idea is.

Speaker 4 (47:31):
That it has its built in tooling to help it do.
Oh kind of a great choice.

Speaker 1 (47:39):
You're on the marketing team.

Speaker 4 (47:42):
Arts degree. I can rationalize anything.

Speaker 3 (47:47):
Nice, all right, So at some point in the future,
we'll learn what our new mascot will be and then
and then yeah, we'll figure out how we all get
our own Angular plushy.

Speaker 4 (48:00):
The most important part of this, though, is do we
get to choose a name for this mascot?

Speaker 3 (48:06):
Oh?

Speaker 6 (48:06):
Yeah, that's a good point. That's the other question we
are asking y RCT suggestions. I remember a few years ago, like.

Speaker 1 (48:14):
Two years ago, you asked for the name. I remember that.

Speaker 6 (48:17):
Yeah, I think that Angie might have been the most
popular one. We're just steal on the table. If you
like it, to go for it, just comment.

Speaker 4 (48:24):
Yeah yeah, or throughout like throughout your own like this
is this is your chance to shine Angular Community. If
you've never contributed to.

Speaker 3 (48:34):
The framework before or to an RFC, this is the
one you should definitely contribute toy with Angie.

Speaker 6 (48:42):
We also have an official mascot song, I guess by
the Rolling Stones.

Speaker 1 (48:48):
Oh my god, it's true.

Speaker 4 (48:54):
I like it. I like it all right.

Speaker 3 (48:57):
Well, we've talked about version twenty, we've talked about the
world's most exciting RFC. What aside from maybe taking a
nap and uh like kicking back and relaxing after you published,
after you've published this blog post, after the team's worked
so hard, what are the team What is the team

(49:17):
looking at for the future.

Speaker 6 (49:21):
Yeah, quite a lot. Actually that's shocking. I'll say the
biggest things are selectorless and the new signal forms, together
with also the future of your animations. How are we
going to move on with animations? We have a proposal

(49:42):
with new abstractions. I wouldn't call them directors because we
can implement and also on compiler level for in and out. Ah,
these are three of the big Like you're very very
specific Anger projects, and of course there's going to be
a lot of thinking about AI. Just want to make

(50:02):
sure that Anger is well positioned in this new era
of GENII.

Speaker 4 (50:07):
Yes, definitely, definitely.

Speaker 1 (50:09):
I'm expecting to hear you say functional components.

Speaker 6 (50:12):
So, oh we have We're definitely thinking about revamping of
the altering format, you know, with and you're evolving their
opportunity to simplify the altering experience, and selectoral list is
the most obvious one and the closest to us right now.
We're just going to remove indirection, make templates more readable,

(50:33):
remove the redundant imports, speed up the compiler because we're
going to have true locality from there, reduce the runtime
because we're not going to have selectoral logic anymore. So,
and you're is going to become smaller, significantly, kind of
visibly smaller, and the run time is going to be
faster because we're not going to have any select matching
anymore at runtime. So it's overall like a really good effort.

Speaker 3 (50:56):
Uh.

Speaker 6 (50:57):
And from there, as Q as you mentioned where we'll
be looking into what else we can do and function components,
I'll say they're on the table, but obviously that's many
other things are on the table too.

Speaker 1 (51:08):
Were even to explore it.

Speaker 3 (51:09):
I'm like really surprised Brian didn't just appear in the
episode right now. Brian has famously asked when are we
getting functional components in Angular since the day I met him.

Speaker 11 (51:22):
So.

Speaker 6 (51:25):
Yeah, yeah, we'll see about that. There are there are
other options, a lot of things to consider, so we
will be making some progress I guess in that space
likely next year. This year selectorless forms animations and AI nice.

Speaker 4 (51:44):
Nice, Yeah, I think the selectorless.

Speaker 3 (51:45):
I was actually I'm doing a talk the cornerstones of
JavaScript frameworks, and it's talking is sort of comparing them,
and Angular selectors make us stick out like a sore thumb.
So it's like, it's definitely like, okay, I yeah, that
makes sense to target that because it is definitely like
this sort of like skipping.

Speaker 4 (52:04):
It's this so a piece.

Speaker 3 (52:07):
That makes us different from other frameworks and is getting
in our way at this point, So that makes a
lot of sense.

Speaker 4 (52:14):
Awesome.

Speaker 3 (52:15):
Well, I mean, I don't know about UQ, but I
am definitely looking forward to what's coming in Angular. I'm
really looking forward to trying out version twenty. I can't
wait for my team to get us upgraded. Like luckily,
we should be able to get that done pretty fast. Honestly,

(52:36):
the function or the Dynamic Components API is going to
help us out a lot, so I could totally.

Speaker 4 (52:44):
See us getting going to that pretty fast.

Speaker 3 (52:49):
So yeah, Minkol, thank you so much for your time,
Thank you for joining us today, for taking your time
to write the blog posts to blame what's coming in
Angular to all of us. All of that, we always
appreciate your contributions and just having you in this community.

Speaker 4 (53:09):
To the listener, Well, first, first of all, make up,
was there anything else that you wanted to share with
us before we go?

Speaker 6 (53:15):
I think we covered like we covered it. Oh so
I think we're we're good right now. I just wanted
to think also everyone who contributed to Anger in any way.
I know I mentioned the cold contributors, that's that's definitely great,
but there are also people who are writing bloog posts
just talking about and your organizing meetups or podcasts like

(53:37):
the one today conferences. There are just so many wonderful
contributions and just thank you for doing that.

Speaker 3 (53:44):
Yep, absolutely, I can I double and triple endorse that
statement because I think the community is definitely what sets
Angular apart from some of the other frameworks and choices
that people could make out there. So so yeah, so Meco,
thank you again for joining us today.

Speaker 4 (54:02):
To the listener.

Speaker 3 (54:03):
If you haven't subscribed to the podcast, now would be
a great time to do. That that helps us keep
putting out content having guests.

Speaker 7 (54:11):
Come on.

Speaker 3 (54:12):
If you haven't bought your tickets to ng comp in October,
they are on sale now and it would be a
great time to get your ticket.

Speaker 4 (54:20):
RC I believe is.

Speaker 3 (54:21):
Still open as well, so if you have an idea
of a talk you would like to propose, definitely get
that put.

Speaker 4 (54:27):
In as well.

Speaker 3 (54:28):
I would hopefully we'll see uh, if not Minco at
least some members of the Angular team at ng comp.
It is sort of like the biggest family reunion of
the year for me, So Mico says he'll be there,
so I'm excited about that. So yeah, definitely stay in
touch with the community, follow us on social media, subscribe

(54:51):
to the podcast, and we'll catch you next time you.

Speaker 11 (54:57):
Hey, this is Pressed to Mine. I'm one of the
n G champions. In our daily battle to crush out code,
we run into problems and sometimes those problems aren't easily solved.
Ngcomf broadcasts articles and tutorials from Angie champions like myself
that help make other developers' lives just a little bit easier.
To access these articles, visit Medium, dot com, Forward Slash ngcom.

Speaker 2 (55:19):
Thank you for listening. To the Angular Plus show in
Chcoff podcast. We'd like to thank our sponsors, the Ngcoff
organizers Joe Eames and Aaron Frost, our producer Gene Bourne,
and our podcast editor and engineer Patrick Kays. You can
find him at spoonful ofmedia dot com

All Episodes

S9 E10 | Angular Turns the Big 2-0! | Minko Gechev

Episode Transcript

Popular Podcasts

New Heights with Jason & Travis Kelce

The Breakfast Club

Fudd Around And Find Out

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

.css-14f5ked{margin:0;word-break:break-word;display:-webkit-box;-webkit-box-orient:vertical;box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}S9 E10 | Angular Turns the Big 2-0! | Minko Gechev