January 2, 2025 • 52 mins
Michael Hladky joins the adventure to discuss how he's gotten a 60% performance increase using push pipe and related techniques.
Many developers can get by without this technology, but Michael explains how to pull the push pipe into your code and what that looks like compared to Zone.js and the default stack in Angular.
Links
Picks
Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.
Many developers can get by without this technology, but Michael explains how to pull the push pipe into your code and what that looks like compared to Zone.js and the default stack in Angular.
Links
Picks
- Charles- Psycho-Cybernetics
- Charles- Focus Blocks
- Michael- Learn to dance and sing
- Michael- Book his performance audits
- Subrat- The 5 AM Club: Own Your Morning. Elevate Your Life.
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:00):
Welcome to Adventures in Angler, the largest and most popular
podcasts in the world about web development with Angler. This
show is brought to you by Void and top Endavs.
Unvoid provides high quality design and software development services on
a client friendly business model. Unlike all other agencies, Unvoid
(00:22):
allows clients to only pay after the work is delivered
and approved. Visit unvoid dot com to learn more and
reach out. If you know a company that needs more
professionals to help with design and software development, that's u
n vod dot com and top and Davs helps you
(00:44):
stay up to date with cutting edge technologies like JavaScript, Ruby, Elixir,
and AI. Visit topd davs dot com to join their
AIDV book camp, weekly community meetups and access expert tutorials.
Lucas Paganini, founder of on Void and host of this podcast,
(01:04):
Thank you for tuning in. Let's jump into the episode.
Speaker 2 (01:14):
Hey everybody, and welcome back to another episode of Adventures
in Angular.
Speaker 3 (01:18):
This week on our panel, we have Subra Nieshra.
Speaker 4 (01:22):
Hello.
Speaker 3 (01:22):
We also have Sonny Yusef.
Speaker 4 (01:26):
Again.
Speaker 3 (01:27):
I'm Charles Maxwood from duv chat dot TV. I don't
have my own jingle. We have a special guest this week,
and that is Michael plot Key.
Speaker 4 (01:34):
Hey, Hey, how's going going?
Speaker 3 (01:36):
All right?
Speaker 2 (01:36):
I always feel bad because I know I'm saying your
name wrong, but I don't know how I get it right,
so I.
Speaker 4 (01:41):
Don't even know myself. So it's good. Don't worry. Charles says,
everybody's name is wrong.
Speaker 3 (01:47):
I do.
Speaker 2 (01:48):
I just make it up as I go, the story
of my life. But yeah, we uh, we got you on.
Why don't you first just remind people who you are
because we haven't had John for a while, and then
we'll dive in and we'll talk about this.
Speaker 3 (01:59):
Right, I can do that.
Speaker 5 (02:00):
My my name is Michael doctor. You can stick with
Michell in German or Mchael in English. I guess it's
easier than my last name is. As you're already realize,
I'm a trainer and consultant. I have a small company
with a high expertise in angular reactive programming. We do
a lot of performance audits. This is like a framework
in technology agnostics, so we basically around a lot of
(02:25):
performance audits on bigger shops and other stuff where you
really need it.
Speaker 4 (02:30):
And on top of that.
Speaker 5 (02:32):
So they last I guess one and a half two
years I have a lot of focus on performance, in
particular in Angulo, so we shipped a set of tools
that help you to make faster, more reactive angular, more
responsive angular applications. And I guess this is also the
reason why you asked me to come here.
Speaker 4 (02:52):
If this is correct.
Speaker 2 (02:53):
Yeah, In fact, it was kind of interesting because we
were looking at this. We were talking before the show
about the push hype articles that you were writing and
the change detection, and I think we're all just a
little bit confused about.
Speaker 3 (03:07):
What this is and what it does for us.
Speaker 2 (03:09):
So do you want to just give us kind of
the high level view on what the pushpipe is and
how it affects change detection and all the stuff that
we kind of read through on the blog.
Speaker 3 (03:18):
Real quick, we can do that.
Speaker 5 (03:20):
So I would kick off this whole conversation with what
we have known, like what is the angle away angle
and Vanilla way of running change detection?
Speaker 4 (03:31):
And I will instantly.
Speaker 5 (03:33):
Throw into busswords pull and push based architecture. And now
let's with that two busswords in my end, let's let's
start and let's discuss how Angler's change detection is running
and why it is pool based.
Speaker 4 (03:47):
It's a lot of technical stuff.
Speaker 5 (03:49):
I try to break it down as good as I can,
and you will for sure interrupt me or give me
the one or other hint question where I should dig
into more if I miss stuff. But okay, other than that,
will start with who is triggering a re rendering of Angular?
And this is maybe stuff that people or some people
already know. We have the application reference the application rep service.
(04:15):
The service is basically connected to our root component, the
application root component, the most upper component, the component that
maintains and contains the whole app. And when you call
application rep tick them you basically run, not run, but
you check from top to bottom the whole components tree
(04:37):
and everything, believe in child component if there is.
Speaker 4 (04:41):
A change or not.
Speaker 5 (04:42):
So in Angelar we can run change detection in two
different ways. You can say my change detection is the
default way of doing that. And whenever you have like
your whole application and change diction on default and you
call application rep tick, it will re render everything.
Speaker 4 (04:59):
It will re render all the.
Speaker 5 (05:00):
Components, the leaves, the leasts, even stuff that has no change,
no effect, nothing, It will re render and reevaluate all
those components. So when it comes to change detection, you
may be also heard that there is another change detection strategy,
and this change detection strategy is not called default as
the default change detection strategy, but it is called on push,
(05:24):
and on push is maybe a little bit misleading.
Speaker 4 (05:26):
Because this change detection strategy.
Speaker 5 (05:29):
Should be named immutable change or only on immutable change,
because what it ask is if you put an input
binding to a component and then you call application rptick
to re render the whole application. Those components we've changed.
Detection on push will only re render if their input binding,
(05:50):
like the new value that you pass in from the
parent to that child has a new instance compared to
the previous change that run. So when I put an
array there and I never change the array, it will
not re render this lest components. And when then like
add new item, I will basically construct a new array
(06:13):
out of all the old items and add the new
added item into that array and then follow it again
to the component. And then I introduced an immutable change,
and these changes then propagated downwards to this child component,
and this child component and most probably all the child's
child components will re evaluate. So now we discussed change
(06:38):
detection for pot them change detection and on push, and
what I try to explain this how does the pull
and push based wording comes here into play? So let's
figure out explained to you like when we call application
rap tick decent, this is happening we already hopefully, hopefully
(07:00):
I made a good job understood what change detection strategy
on push is like mutiple data changes in input bindings.
And now I will try to explain to you why
Angler's change detection is pool based and maybe also when
reacts change detection is pool based. But let's stick grive
Angler for this for this session. There you know, don't
(07:24):
you have, for example, a small counter in one component.
Whenever you click the button, it counts up by one.
So what happens inside of Angular? In the gaps of
Angular there is anti zone, a service that is connected
to another third party library that is called zone Chas,
and Chas provides us an execution context across a synchronous
(07:48):
and synchronous code. You can basically track what happens in
which context and you don't lose that state.
Speaker 4 (07:54):
This is one thing and the other thing used that
Zone Chas basically.
Speaker 5 (07:59):
Patched every single browser API that is asynchronous. And I
will name some of them a promise, a button, event listener,
an event listener, an animation frame, as set time out,
anything that is asynchronous in the browser. And we can
(08:19):
open up Mozilla develop a network and see how many
of those asynchronous functions are there. I mean a name three,
there are like twelve to seventeen things that Soon really
patches on top of the other stuff. And this happens
when you bootstrap Anglo. Okay, so what does now we
know that soon chas is here somewhere in the background,
(08:40):
does some magical patching of APIs? What does API patching mean?
AI pitching means that, for example, let's stick with the
small counter component. If you clickly it counts up. The
button has an event listener. When you bootstrap this component,
Angler will add an event listener to this storm elevant,
and whenever you click the dorm element, Angler call the callback.
(09:01):
This is what Angler does for us under the hood.
Whenever Angular adds this event listeners already patched the browser's
native event lisen a method. What does patching me They
took the original ad event lisin a method, wrapped it
with their own thing, and then they say whenever somebody
calls ed evently, cenner, I will do whatever the browser
(09:24):
will do. Plus I've sneaked in my custom logic that
I can determine. Okay, there was a button click in
a component from this center event listener, and I need
to somehow tell Angular that this button click maybe we
cause the states change. And this is the second target
that does for us. It hooks the patched API and Angler,
(09:49):
it merges them together. It connects them and Angola will
realize when we click the button and say variable plus one.
Angler will real that and will re render the app.
And now I can explain why I why this pool based.
So when I click the button and I assign a
new value to my counter, I assign two instead of one.
(10:13):
What happens then is the button click basically not only
updates the state, but also start something internally that is
called mark few thirty and mark few dirty will take
the view that the component that is currently in and
mark the flag that tells you you should re render
(10:34):
that component as dirty. The flag will also be dirty
if you pass in an input binding that is mutable. Right,
so you have this flag on every component boundary and
either the button click or an input binding would flip
this flag to true and then Angler knows you have
to reevaluate re render the templates there and these components.
(10:54):
So I click the button in this very deeply nested
component tree and angular course mark few dirty. Then it
goes to the parent component and course mark field dirty.
Then it goes to the parent component and the course
mark field dirty.
Speaker 2 (11:08):
Guess what next comes to.
Speaker 4 (11:10):
The parent component of course market thirty.
Speaker 5 (11:12):
In the end, you know it, we end up at
the very top of your componentry at the applications at
root component and then Angler kicks in and cause application
red tick. And then no matter if you have everywhere
change detection on push or not, you have this path
from somewhere deep in your componentry dirty mark to the
(11:36):
very top and Angler will re render at least this
path from top to bottom to the very component where
you have the button and the click bind. So if
you step a step back now and look at the
explanation that I did, the button click is like an
HTTP request to the server I click the button and
(11:57):
a request to the anglers you a render ring. Angler,
I request the render ring. An Angler response to my
request with the render ring and says, yes, here you go,
I give you the render ring and the render.
Speaker 4 (12:11):
Everything top down.
Speaker 5 (12:12):
So I pulled a render ring to myself, this is
what Angela is doing by in its native way.
Speaker 4 (12:19):
This pulled change protection a lot in question.
Speaker 6 (12:26):
Yeah, so what I was really saying thinking was like,
it is only changing the the component and the child,
but I didn't the parent component also, So if you're
like like one note, it will only change.
Speaker 4 (12:42):
Come again means if you if.
Speaker 6 (12:44):
I'm changing on the fifth child and so it will
just change that roof from the parent.
Speaker 4 (12:52):
It will change everything.
Speaker 5 (12:54):
If you have a nested structure where you have ten
levels of nested components and you click that on the
tenth level, it will really evaluate from level one to
level ten everything because you have to pull.
Speaker 4 (13:07):
The change through the whole component.
Speaker 5 (13:10):
Tree to the very place you want to render it,
even if you change detection on push.
Speaker 4 (13:14):
Yeah.
Speaker 5 (13:14):
Yeah, I guess this is something that that not a
lot of people are aware in. This is like really
one of the biggest performance bottlenecks that you have, or
one of the first ones that you could fix in
a simple way.
Speaker 3 (13:26):
Yeah.
Speaker 2 (13:26):
One thing though, and Sunny brought this up before we
got started, was that for the most part, mostly Angular
apps that at least I played with there, they're not
so big, and so this the performance issue if it's
there isn't something that I really notice.
Speaker 7 (13:42):
So yeah, I guess, sorry, Michael. One question I always
have is it seems to me the I like the
idea of the ARM push.
Speaker 4 (13:52):
I've tried to manually do it right.
Speaker 7 (13:53):
But I also I think one of the reasons why
also the on push is very I guess I don't
use it as much is because also I don't use
a lot of NGRX, And I think once you use
a lot of when you want NGRX standard for you,
that you o bushes makes sense because why would you
not want to take advantage on that extra benefit right
(14:16):
that you just get out of the box.
Speaker 4 (14:17):
So I don't know.
Speaker 7 (14:18):
Maybe Michael, you wanted to you're the expert, you wanted
to share more.
Speaker 4 (14:23):
Yeah, sure so.
Speaker 5 (14:24):
Our ex Angula is a library that focuses on two
different targets.
Speaker 4 (14:29):
One of them is performance.
Speaker 5 (14:31):
So the tools that we ship include latest cutting edge technologies.
If we speak about other frameworks like cheap concurrent mode
for example, and other stuff, we basically leverage the same
potential ship the same technology so that we can also
ship these concurrent strategies and so on. But the second part,
(14:52):
and this is what I want to spress all this.
We also focus on development experience. So I want to
pick up your exemples on where you said, Well, the
tools that you ship, like the push pipe, the less directive,
the RX four that we will ship in the near future,
they only pay off for me if I if I'm
(15:12):
fully reactive, if I really use only in GRX or
any other state management tool, like in general, nearly any
state management tool is push based and you use love
at the moment, I would say no, it's not only
because of that, it is in general like if you
look at it from the develop experience perspective, you can say,
(15:33):
are ex angular pays off whenever I have to mix
imperative and reactive coding steps. Imperative is the stuff that
we are all used to, like our object oriented, state
driven mutable architecture that we run here, and the reactive
approach is different. It has a lot of functional concepts
(15:55):
in it and it is pushing values to you instead
of you pulling them and or instead of calling set
and get and as Angular ships a couple of things
like the router forms, reactive forms, life cycle hooks and
other stuff that are exposed as an observable or think
about the easiest piece and event. The meter is basically
(16:17):
a push based thing that you can take and subscribe
on it, right, and you do that in Angler when
you create an output binding, it is an event the meter,
but internally it's just called subscribe on something like a subject.
So you always have a mix of imperative and reactive
programming styles. And the clutter and pain nowadays is that
(16:38):
Angler does not provide proper glue. Whenever you have a
router parameter that changes over time in a vivery tiny application,
you end up to put the word subscribe somewhere. Then
you end up in going to the life cycle hook
on destroy and make sure you clean it up there.
If you're lucky, you did not use any switch map,
(16:58):
any higher or the flat operators that could even with
their own destroy and mess up your application, introduce a
memory leak like all that stuff could happen, and if
you are even even if you're an expert, what you
end up with in any tiny application that you write
as soon as you touch any reactive partner angula, and
(17:19):
there are plenty of them, as you know, like road
the reactive forms. They say, you have to deal with
that mix of imperative and reactive programming. You are forced
to subscribe somewhere. You put a behavior subject here, you
call next there. In the end, your application does not
feel good. If you look at the code, it is
always boiler plate.
Speaker 4 (17:39):
I mean, if you're used to entry rigs, you know
what I mean. We boiler plate.
Speaker 5 (17:43):
You have to write so much code on top just
make it working, and then you have to be aware
of all the memory leaks, and then you have to
be aware of the tearedon logic.
Speaker 4 (17:53):
So what we say in our ex angular is never subscribe.
Speaker 5 (17:57):
We ship basically tools that precisely define the one and
only use case where it makes sense that you did
that you subscribe to it. But even for those use cases,
we ship tools that makes it irrelevant for you to
think about subscribe.
Speaker 4 (18:12):
You just like figure out what is your thing?
Speaker 5 (18:15):
Is it stayed the side effect, and then you use
either or state management helpers or side effect helpers, but
they will take over all the clutter of subscription and
thing for you and you can end up with a
bdliner for basically any problem that would normally require at
least seven lines with life cycles with clean up and
(18:35):
so on and so forth. So I guess this is
like independent of performance and change detection whatever, a huge
benefit that you will start to laugh very quickly, like
all the people that say, like, why not just trying
it out for one tiny component? Want one tiny project,
and then you will see how it goes. You will
will really feel and realize what we did. I cannot
(18:58):
imagine a single person that like cool, but that we'll
not use it from no on.
Speaker 4 (19:02):
They are really or much of a code reduction.
Speaker 5 (19:06):
You can get how much safer it is to combine
those technologies because life stycle are sorry, memory leaks and
all the other stuff. The clutter, the boiler plate is gone.
You can focus on your problem. You just focus on
solving your problems and not on setting up any other
of those boiler plate these things.
Speaker 2 (19:25):
So let me back up just a minute, because we
talked about kind of the zone JS approach and you
know how that kind of climbs up your componentry, but
we didn't really talk about how the push pipe setup works,
like how does that work? Differently?
Speaker 4 (19:41):
Nice things to trust that you that you brought it up.
Speaker 5 (19:44):
Otherwise we don't get like stuff we started the small
detwa of your list.
Speaker 2 (19:50):
Yeah, we kind of got a little ahead of the conversation,
which is fine because we're talking about a benefit and
it's like, okay, you know, I get cleaner code, I
might get better performance. There are a handful of things
that I'm probably going to see that make it worth
me considering going this way. But now I want to
know what it looks like.
Speaker 5 (20:08):
Yeah, the first experiment what we did, and this is
also basically what is shipped in the n g r
X repository under the Component package. I basically developed evening
of last year a package for the INCHRX that was
called Component. It's still online, and this package shipped two
(20:29):
building blocks in a very rough and very sketchy way,
the PUSHPIP and the leads directive. And you basically asked
me about the push PIP, how does it work? So
what I will do now is I will try to
pull in the second term. From the beginning, I said
there is pool and push based architecture. I hopefully managed
(20:51):
to explain verbally without any slide how the change detection
normally works and by you pull the changes down to you. Now,
let me explain to you how it push based change
detection could work. So imagine you have let's make it
super simple and httper request in the middle of your
componentry and you want to just render the result the
(21:12):
least in the component. What you do normally is you
you you say, I take this observable bay or the promise.
It even works with promises, right, we don't have to
talk our xts here. We can stick with a promise
if it is easier, it works the same. We basically
support anything it has a promise of this hdpurial cust.
To plug it in a view, you use the acing
(21:33):
PAP and then zoom. When the HD puri cust kicks in,
it will do the magic like do the component dirty
marking from the pushpap basically course mark for check. It
will call mark few dirty for the parent, for the parent,
for the parent for the work and it will again
really render down the application. So with the acing PAP
we are still in this pool based approach. A viperial
(21:56):
clast emits. It ends up in the acing pap. As
PAP says, go from here to the top and then
re render everything to myself. Against that I can display
the new state. So now imagine not no imagine, So
now you maybe know that there are two change detection
methods that you can call manually. There is mark for
(22:17):
a check that I explained to you already, and there
is also detect changes. I'm not sure if anybody of
you knows that or used it.
Speaker 4 (22:27):
Maybe a quick check. Did anybody of you ever use? Yeah? Many? Yeah,
But why did you do that?
Speaker 6 (22:33):
Maybe I did for complex calculation and after that a
to us very by default on push the strategy. So
once that done, then then very detect change so that
it can be reflected on the resture.
Speaker 5 (22:50):
So what detect changes does In your example that you
sketched here, you call detect changes on the change detectorf
of of one of those components in your case, the
component that you had with push whatever you like, injected
over dependency injection that change detect the rest and then
(23:10):
you call it change detector rest dot detect changes. Right,
And what happened was Angular only re evaluated this very
single component and maybe their child components, but.
Speaker 4 (23:24):
Not top to bottom. Correct.
Speaker 5 (23:27):
Yeah, yes, So detect changes is a way how we
can detect the changes re evaluate the template of only
one single component and not the whole app. It's like
local you have local explicit change detection. This is the
stuff that React was doing ever since. In React you
(23:47):
have set state. Whenever you call set state, the component
will render. It will not automatically rerender when about eventually
snofires will only render if we call set state. Right, So,
detect changes is the first bridge to set state and React.
It enables us to do explicit state management. So now
(24:07):
imagine my use case where you have the HTDP request
pluged to an as pipe in the template, and now
imagine you create something that looks like the asing pipe
but does something different internally. It will subscribe to the observably,
it will receive the newer value, but instead of calling
(24:27):
for every new value, mark for a check and re
render the whole component path from the top to the bottom.
If you call detect changes, it will only re evaluate
these very components.
Speaker 4 (24:40):
Right.
Speaker 5 (24:41):
So the pushpap, basically next to a little bit nicer
management of internals and typing and so on, has exactly
the same as the AS pipe, but with local change detection.
It calls detect changes under the hood internally. So this
is what the pushpipe does. And if you got that,
(25:02):
I want to basically go one step further and I
want to stress out the down sets of the push pep.
Why what you have to do to get all the
downsids away? And then the should lead obviously to I
hit a punchline when I started to talk about the
push pipe and then so ness Angla and all the
(25:23):
new stuff that that is now on the road map.
I had the punchline that was, the acing pipe is boring,
really cool. I love it a lot. The asing pipe
is boring, and I hope that when I explained by
push pep is has downsides, I can also use my
new punchline, the push pipe is boring, and I can
pitch to you why you should use instead of the
(25:44):
push pep, the rx lent directive, for example. Would this
fit to your schedule, to your agenda of our discussion?
Speaker 2 (25:54):
Oh yes, especially from the idea that, hey, look, you
know there's there's this option, which is the deep op option. Okay,
now there's this push path option, but hey, there's this
other option.
Speaker 3 (26:04):
That may be better in certain circumstances.
Speaker 2 (26:06):
I like, I like giving people kind of the idea
of the way they want to approach.
Speaker 4 (26:11):
This very good broad context.
Speaker 5 (26:14):
So we discussed what Markfurcheck is doing in the asam pap.
We know that the push PIP is calling detec changes
internally and that it will only re evaluate this very component. Now,
let's talk about some technical problems that we had to
solve with the pushpap, and this will automatically lead to
the third option, which I believe is.
Speaker 4 (26:36):
The most beautiful and efficient way. How you can deal
with that?
Speaker 5 (26:40):
So imagine you have a template with not one pushpap inside,
but ten, and you admit to our ten PEPs the
same or a.
Speaker 4 (26:49):
Different value, it doesn't matter in the same tick.
Speaker 5 (26:53):
Like the browser has executes code codeed synchronously and in
the same tick he could execute multiple of those aswing
pipe course sorry, pushpipe course. And what we would end
up in is calling detect changes for those ten push
pips ten times in a row on the same component.
(27:14):
Even if calling it one time would be enough because okay,
I changed ten different parts in my template, but one
time reevaluating all the ten parts is enough. I don't
need to ten times to re evaluate all the ten things.
Is it already like something that you understand? Okay, So
(27:35):
we would call it ten times in a row and
maybe and now we start to get nerdy. Now we
start to get nerdy. So do you know the flag
where you can configure zone that is called Angi's zone
event core lasting, and she's one event colasting. Did you
ever hear that event corlasting?
Speaker 4 (27:57):
Okay? Corlasting. Colasting is a concept.
Speaker 5 (28:00):
I introduced it already back then in the INTERIR expectage.
But as I said, this was a very minimal approach,
minimal implementation proof of concept which does not respect all
of that.
Speaker 4 (28:14):
But even back then it was already the problem.
Speaker 5 (28:16):
So we faced it that it took longer, ever slower
if we have multiple push paps because all the synchronous things.
So collasting technically, what does it do? Collasting tells me
or it helps me to say, I want to wrap
the detect changes, call in another helper that I can
(28:39):
call a hundred a million times in a row, and
it will not do anything until a certain time period
has passed.
Speaker 4 (28:48):
So imagine within the next tick browser tick.
Speaker 5 (28:52):
Let's make it easier because browser ticks and execution context,
let's talk about milliseconds. It's not correct, but visually you
can think about it easier. So let's say you write
a function that says render component and you can call
that function a million of times in a row. It
will wait for the duration of five to ten milliseconds,
(29:14):
and only after that duration it will say okay render
component in the last ten milliseconds was called a million
of times. I know that reevaluating my component would only
pay off one time then all the new data is done,
So after ten milliseconds, I don't do it a million
of times.
Speaker 4 (29:34):
I just realized that it was called one or many
times and only call it once. So I have a timeframe.
Speaker 5 (29:42):
I have a time frame in which I could high
frequently call a metod and it will not execute right away.
It will wait until multiple things settle, I can merge,
I can coll less them together into one single call,
and then call it only once. And this was our
first speak hiting performance. We demonstrated that introducing these coalescing
(30:06):
strategy on component level gave us a huge boost in
performance and was like the first sign that we are
really on the right track, that we can really like
hit the target, provide tools, provide technology stack that is
completely different than what we are used to do in Angular.
We have the same well known mind mindset or meta model,
(30:30):
mental model like types and so on or directives, so
we tried to bake the new mental model into directives
and linked to the easier things, but still we had
way more thoughts and when you think about the tooche paps.
So what we did is we went down from reevaluating
the full component dirty path.
Speaker 4 (30:52):
We switched from that approach to only.
Speaker 5 (30:54):
Reevaluating one single component, a huge difference.
Speaker 4 (30:58):
Already we had more thoughts.
Speaker 5 (31:01):
Think about the following use case again, this component with
ten push paps inside, but this time not only the
ten of them change at the same time, but only
one of them changes at the same time. So what
you would do is you would go to your component
template and you would re evaluate the one thing that changed,
(31:22):
and all the other nine components are sorry template expressions too,
because you cannot really evaluate a template partially only there
or only only here, you know what I mean. If
you really evaluate the template, any single template expression in
this template will get re evaluated. So we had a
lot of thoughts on that, and we basically came up
(31:44):
with the idea that we can leverage already existing building
blocks in Anglo. I'm not sure if you're familiar with
structural directives, but I'm sure you are familiar with angie
if and angie four for example, Right, this is stuff
we know, so let me give you a little bit
of a hint. What is happening. Let's talk about and
(32:06):
if it is small, it is simple and she if
helps you to display a snippet of HTML only if
the condition is true. If not, you either hide it
or you show a fourback template for the force is state.
Speaker 4 (32:20):
Right, And those.
Speaker 5 (32:22):
Two templates internally are managed as embedded view. So in Angola,
the small template snippets that you show and tie it
are maintained internally in something that is called embedded view.
And if you reverse engineer or read the code the
source code of embedded view, you will realize an embedded
(32:44):
view also has a detect changes method. So not only
the components change detectors has a change detection method which
which will re evaluate everything. But there's small, tiny temper
snippets inside of structural directives also have the same logic
(33:04):
and you can call change detection only there for.
Speaker 4 (33:08):
This tiny snippet.
Speaker 5 (33:10):
So this was our first step in where we said, like, okay,
this could be an option for us. This could be
something where we should investigate more research work and see
if we can manage to do it somehow better in
that way, and the outcome was tremendous. So what we
did when we were done with our Tooche pap researchers,
(33:34):
we already shipped our ex let which already had this
embedded view inside, obviously, because how else should you create
an structural directive without using Angular's building blocks, right, so
we have that in place already. What we did is
we to figure out the way on how we can
make only this very peace re rendering. And it is
(33:57):
cool because we already had observers in place, already knew
how to structure and architect applications in a very nice
and eligent way with reactive approaches, like in a way
where you don't need to learn all the overheads but
just focus on their problems, the stuff that I talked
at the beginning. And we plugged basically an observable into
(34:18):
a structural directive and said we will only call detect
changes on this embedded view when the observable that I
connected to the structure directive is firing.
Speaker 4 (34:30):
Oh interesting, anti drag by track? Why is a method
that you use in RX four? Sorry? Chief?
Speaker 5 (34:41):
What I speak about is like the underlying building blocks
in Angola in angy four in ngive in and she switched.
There are always two things that you have to maintain internally.
One thing is the embedded view and the other thing
is the few container reference. Every structural directive maintains a
(35:02):
view container, may it be a container for the list,
a container for the EVLS template, whatever, and then the
templates themselves embedded views.
Speaker 4 (35:11):
And we basically, my battery starts to get low.
Speaker 5 (35:15):
And we basically managed to figure out a way how
to go on with that. I tried to explain now
the other down set that we figured out in that set.
So when we figured out that we could connect it,
the next problem was okay, now we were like April.
(35:36):
Instead of re evaluating ten things, we only reavailed one thing.
So we even made I guess this was the biggest
step in performance we will ever make.
Speaker 3 (35:47):
All that makes sense. You only have to do the
work once isstead of ten times.
Speaker 4 (35:50):
So yes, and don't you don't consider a component. You
only consider bond expression.
Speaker 5 (35:56):
But if you have a big application, it would happened
that again ten expressions across the whole app would fire
at the same time, right, and you can never know
if it happens or not. It's impossible to like predict.
So what we did is we introduced basically notion of
(36:17):
the frame budget. If you know, like bad applications always
have frame drops. Frame drops means they stuck, they have
changy scrolling. This is called a frame drop, not a
good frame rate. And we managed to tell Angular you
do all the rendering work, but if you're in progress
of rendering and you realize that the budget of the
(36:39):
current frame is close to the frame drop, you stop,
You give the browser time to breathe, and then you
go on with the next rendering package. And in this
way we basically were able to introduce cutting edge future
technology right away that then can run now in Angular
and it's doing the identical stuff as React concurrent mode
(37:00):
is doing. Like the secret behind real concurrent mode. And
why you have that highly efficient and highly reactive interactive
user interfaces is they all have notion of frame budget
when they render and the browser we never freeze.
Speaker 4 (37:17):
And this is what we maintained. What we accomplished.
Speaker 5 (37:19):
We accomplished change detection in Angular that will never make
your app freeze.
Speaker 4 (37:26):
Isn't that amazing? Yeah? Yeah, yeah, that's cool.
Speaker 2 (37:29):
Now I want to go see because whenever I hear this,
I'm just like, Okay, let's let's see if we can
break this right. I want to write some script that
just goes and like grabs a whole bunch of stuff
and then shakes it and dumps it out and tries
to figure.
Speaker 4 (37:43):
We did good issues. We did good issues and good research.
Speaker 5 (37:46):
If you look in the rx Angular Repository issue number
three hundred and four, we'll show you how we implemented
all the concepts that I explained to you now in
Angy four. Like we don't call it Angie four, we
call it are export. But we basically managed to introduce
all those technologies in least trender rings like sibling components.
(38:09):
This is the hardest problem you will face in pretty
much any front and framework, how to render a list
of I don't know a lot of things that are
costly after another without freezing the browser. So this is
stuff you can check out on and you see how
we researched, what we implemented, what the measurements are. We
basically measure everything. We do measures, we do statistics, we
(38:34):
compare them to other approaches, and we really ship and
aim to ship cutting edge high performance stuff that on
top also brings a very nice developer experience. How do
you measure that? Well, we do it in the most
accurate way we can. We basically take the chrome left
tours and we measure Brander performance in flame charts milliseconds.
(38:57):
We see how the recalculation is. Do we see which
scripting parts in the whole process take more or less time?
And our hard numbers are basically milliseconds milliseconds and how.
Speaker 4 (39:09):
Stressed the browser is.
Speaker 5 (39:11):
In the issues three hundred and four in our ex
Angular pository you can see the different We make screenshots
from the identical use case and we screenshot that like
angle a native way and our way, and you really
visually see where in that which interactions we measured, like
four different interactions, where and how it will pay off.
(39:31):
And it is really very accurate and and we'll give
a good prediction of what you can assume if you
use this technology in your application.
Speaker 3 (39:41):
So how do I plug it into my app?
Speaker 5 (39:43):
You just install our ex Angular CDK, our ex angular template,
and then you use the RX four, the RX lat
the push PAP which I would not really recommend as
that directives are way more performance but still it will
be a little bit better, and you just use them
in your template. It's a bit more advanced. Like you
don't have to change any mindset. Go to your code.
(40:05):
If you see NG four, replace it with RX four.
If you see Angie effect with the acing path, replace
it with the rx LT.
Speaker 4 (40:12):
If you have an IF, replace it with X. If
you don't have to change your mindset or code a lot.
Speaker 5 (40:18):
If you like it, you can also say okay, I
understand also the technical internals there, and I want to
boost performance somewhere else. Then you can also take scheduling
techniques and other observable helpers that we created for you,
and you can tweak the performance of ng RX, of
YOURGDP rec quest, of your Global State management like we can. Basically,
(40:39):
we have a lot of building blocks that leverages really
expertise knowledge in a very easy way that you can
plug in too if you understand it into multiple different
other libraries too.
Speaker 3 (40:50):
Gotcha, so you said we were going to get the
RX LAT.
Speaker 5 (40:53):
Yes, RX lat and RX four are the things that
we should discuss. Those are the structural directive that I explained,
Like RX leat is what I would suggest if you
say I'm interested in rx angular. What is the pushpipe?
I would say the pushpipe is boring. Check out rx
leat rx let is the structural directive that enables you
(41:16):
to in one template only enable this one single template
expression and not all other temples expressions in the same
template like RX four arex lat x if all those
structural directors that be ship should encapsulate the angle of
mindset and ship it with all the performance impact improvements
(41:38):
under the hood.
Speaker 4 (41:39):
Easy to use, very high in impact.
Speaker 3 (41:42):
Nice. So you just pull in the library and then
you just use rx lat instead of.
Speaker 5 (41:47):
Instead of angie if asinkg, or you use the RX
four instead of ANGI four or that.
Speaker 4 (41:53):
It's like stuff that is really easy to do in
your application. You can go there.
Speaker 5 (41:56):
It is like two characters change and the you will
have your benefit. If you like it, you can adopt
your architecture a little bit more. You will realize you
can delete a lot of code now. If you use
the state package, for example, it tells you to shrink
down local and global composed state management to like hundreds
of lines and like from hundreds of lanes down to
(42:19):
a very.
Speaker 4 (42:20):
Few and those are things that you can use the
library for.
Speaker 2 (42:25):
Very cool and I guess it all just tests out
the same way. Like if I'm testing my code, I
could just swap these out. It does really so.
Speaker 4 (42:33):
For testing said we have similar strategies.
Speaker 5 (42:37):
The thing is our rendering is a synchronous and is
chunk and you maybe know that a synchronous code is
not that easy to test, so we say cool when
you write tests there there it is. You have one
global configuration that tails the library. Look, I'm in a
testing set set up. Now keep all the performance part
do it's synchronous, even if it is lower, but the
(43:00):
testing of the library will work like a chance.
Speaker 4 (43:02):
Just switch the strategy to testing strategy and then you're
able to run your test against gotcha. Yeah that's cool. Yeah,
it's what trying wants.
Speaker 6 (43:12):
I think everybody will love like the easiest, but they
just go to Vesco to starch ENGI replacing and that's
what works.
Speaker 4 (43:20):
This is how you burke.
Speaker 5 (43:21):
Yes, you will encounter some problems, of course, because we
should be with all the performance.
Speaker 4 (43:26):
Improvements on the default.
Speaker 5 (43:28):
So if you're running some problems and you don't want
to understand why there is a problem, you go to
this very component and switch the strategy to something that
we coor native is.
Speaker 2 (43:39):
I think that's battery going out. Yeah, let's go and
do some picks and just start wrapping up. It pays
on in four minutes. You can do picks too, Okay,
so I'll start Yeah, go ahead.
Speaker 6 (43:50):
Yeah, So today again I will pick a book that
is from Robin Summer. I think this one is also
a famous one. Is the five Club. It's the one
thing I get it from there. If you want to
do something before it thought hit to hits to your mind,
let's do it that it will not no negative thoughts.
Speaker 4 (44:12):
You know. That's the best thing I got from that book.
I think that's the pick for the day.
Speaker 3 (44:17):
Super all right, Sonny, do you have some picks?
Speaker 4 (44:20):
I'm thinking, I'm thinking.
Speaker 7 (44:21):
I'm thinking I really don't have any picks today, apart
from the fact that I just want to watch France
in Germany play and I also get to go to
jiu jitsu later on with the grand master of my
judo actually coming in to train us today.
Speaker 3 (44:36):
So no picks from my side today. France versus Germany. Huh.
Speaker 4 (44:40):
Yeah, that's a tough game.
Speaker 2 (44:42):
Yeah, Which which cup is this? Or is it?
Speaker 7 (44:45):
You is the this is the European champions So that
is the country version of the Champions League, the European Cup.
Speaker 2 (44:52):
Yeah, oh man, how did I miss that this was
going on in America?
Speaker 7 (44:57):
Everything is the World Cup over there or the World Championship.
Speaker 2 (45:01):
Oh man, Well now now I have to go back
and find some matches to watch.
Speaker 3 (45:06):
Well, it only just started.
Speaker 7 (45:07):
This is just today is going to be the last
version of the first round.
Speaker 3 (45:10):
So there's like two more rounds on. So you're pretty good.
I'm in good shape. Okay, I got it.
Speaker 2 (45:15):
I just have to figure out where I can watch
it then here in the US because I love watching
the Yeah, Champions League and yeah, the European Cup. I'll
actually throw out a funny story about the European Champions
not Champions League. Sorry that it's the UEFA the euro Cup.
When I was I lived in Italy for two years.
I was a missionary and while I was there, we
(45:40):
we were out talking to people because that's what we did,
just talk to people on the street. During the it
was Italy versus France for the final. And this is
back in like two thousand and so we're we're talking
to people and we could not find anybody out on
the street, Like the streets were totally dead during the game, right,
And so we just went into a little cafe and
(46:02):
just chatted with the people there while they watched the game.
And yeah, we decided to head home before the game
was over, right, because.
Speaker 3 (46:09):
It went it went to.
Speaker 2 (46:11):
Penalty kicks, and so we're walking down the street and
we could tell what was going on because you know,
France would go up and if they if they kicked
it into the goal, you'd hear just echoing down the street.
Oh right. And if Italy scored, then you'd hear cheering
like out the windows, right because all their windows were
open because it was warm, and it was really really funny.
(46:34):
So we get about a block from home and the
game ends and Italy wins, right, and anyway, all of
a sudden, we can't even get across the street, well
because everybody just went out and got in their cars
and we're just driving around and waving flags and going
crazy and we're just going homes right right over there.
But yeah, I love me some soccer. I will watch soccer.
(46:58):
Grives my wife crazy. But yeah, anyway, that's interesting. I'm
going to throw out a couple more picks here, real
quick way, what do I want to pick?
Speaker 4 (47:08):
I got so much stuff to pick.
Speaker 2 (47:10):
I've really been enjoying the book Psycho Cybernetics by Maxwell Maltz.
I think I might have picked that last week or
last time, but I'm really really digging it and it's
just terrific. And then the other pick that I have,
and this is this is something that I've kind of
been getting into lately, is just between Zapier and Discourse,
which is a forum software. I'm really getting a lot
(47:32):
done with that kind of stuff. And then finally the
last thing that I'm going to pick, and this, I'm
just going to do a kind of a quick rundown
of what it is. So when I need to get
focused work done, what I'm finding is if I schedule
a block of time. I wasn't so good at showing
up for those right because I'd schedule it and the
only person to hold me accountable was me. But I
found this service called Focus Blocks. It's actually made by
(47:54):
a friend of mine, and if you're interested, you can
go to dev chat, dot tv slash focus and sign
up for it if you want. But what it is
is you go in and you sign up for a
time on their calendar, and then you get on the
zoom call, and while you're on the zoom call, you
basically commit to what you're going to try and get
done during that hour, and then you go ahead and
(48:15):
you basically work on it, but you have your camera
on so they can see you, so you have a
little bit of accountability that you're not like getting up
and wandering off. They tell you to set your phone asides,
you're not playing around on it while you're supposed to
be getting stuff done.
Speaker 3 (48:29):
They start and stop.
Speaker 2 (48:30):
Each hour with kind of some breathing exercises and stretches
and stuff like that. And it has been Honestly, I
think I've gotten more done over the last couple of
weeks and I have in a month couple of months
before that, just trying to keep everything running with dev chat,
nott TV while having a full time job, which has
been excruciating. But anyway, it's just been it's been awesome.
(48:51):
I cannot tell you how impactful this has been over
the last few weeks to just have this going, because yeah,
if I have an hour or two to work, yeah,
I'll schedule a couple of focus blocks and then I'll
I'll just jump on and do it. And because I
can kind of get into that rhythm, I get into
the zone pretty fast and I just knock stuff out
like crazy. So if you want to check it out
(49:13):
dev Chat, not TV slash focus. The deal there is
if you want to be on when I'm on, right,
so you can wave at me on the camera. They
keep you muted right so you don't bother each other
while you're trying to work, but you can see other
people on the camera. But yeah, while we're getting started,
you can waiveh at me all the way back. I'm
usually on early in the morning US time, so if
you're in Europe, that's going to be in the afternoon
(49:35):
or evening. So yeah, like six o'clock, seven o'clock in
the morning is usually when I'm doing my focus blocks.
I'm looking at doing some over my lunch break. I've
been working from home, so it's not a big deal, right,
I just turn and get on the other computer. But yeah,
it's been amazing because I can just sit down and
I can just get this focused work done. And sometimes
they don't go quiet as planned, like this morning, I
(49:56):
wind up troubleshooting WordPress instead of getting the work done
that I needed get done because I needed WordPress to
work and it wouldn't cooperate. But yeah, right, But most
of the time, the rest of the time, I wind
up getting just a ton of work done because I
just get in the zone and just knock stuff out.
So that's gonna be my pick.
Speaker 7 (50:15):
I've got it open, I'm gonna I like the way
it sounds. I'm gonna have a look at it.
Speaker 2 (50:20):
Yeah, it's been it's been amazing, So I'm really liking that.
One other thing I just want to shout out about
since we have another minute, is we did an episode
with Eric Simons from Stacklitz and we were talking about
the web container stuff that they showed off running no
JS in the browser natively at Google Io. And so
(50:40):
if you're if you're looking for stuff like that, you know,
just some interesting technology. We kind of dove a little
bit into some of the other implications of what this
technology means as far as being able to run stuff
natively in the browser. So if you're looking for something
like that, it's really cool, and I think it's going
to change the way that we do web development going forward,
because there are a lot of implications as to what
(51:01):
is there. So anyway, I'm gonna I'm gonna stop shouting
stuff out now.
Speaker 3 (51:06):
Michael, do you.
Speaker 2 (51:07):
Have some pecks for US tech related or or anything
anything you should?
Speaker 5 (51:13):
You should start to learn some dance. I like dancing
a lot, as well as singing. I guess everybody should
either start to dance or sing. It makes less more
enjoyable a lot. Other than this, you should book my
performance audits for your project as a shameless plug.
Speaker 2 (51:30):
There you go where the people already do that, where.
Speaker 4 (51:33):
They can peek at the moment.
Speaker 5 (51:34):
I don't have the lending page for performance audits online,
but I have an email address, I have Twitter ping me.
This is the way how people did it so far
surprisingly works. But in the future I will have dedicated
landing pages that really stress out like what we do,
why are we like outstanding good?
Speaker 4 (51:53):
And so on.
Speaker 5 (51:54):
So it's the stuff that you will see soon online.
Other than this, you can ping in off Twitter or
email Michael.
Speaker 3 (52:02):
Awesome.
Speaker 2 (52:02):
Yeah, if you can put that in the chat, then
we'll make sure that people can get a hold of it.
But yeah, this has been super fun, really interesting stuff.
I'd love to dive a little bit more into performance,
so maybe we'll throw it together a Part two and yeah,
we'll get that on the calendar and we'll make it happen.
But yeah, thanks for coming. This was awesome, all right, folks.
Until next time, Max out
Welcome to Adventures in Angler, the largest and most popular
podcasts in the world about web development with Angler. This
show is brought to you by Void and top Endavs.
Unvoid provides high quality design and software development services on
a client friendly business model. Unlike all other agencies, Unvoid
(00:22):
allows clients to only pay after the work is delivered
and approved. Visit unvoid dot com to learn more and
reach out. If you know a company that needs more
professionals to help with design and software development, that's u
n vod dot com and top and Davs helps you
(00:44):
stay up to date with cutting edge technologies like JavaScript, Ruby, Elixir,
and AI. Visit topd davs dot com to join their
AIDV book camp, weekly community meetups and access expert tutorials.
Lucas Paganini, founder of on Void and host of this podcast,
(01:04):
Thank you for tuning in. Let's jump into the episode.
Speaker 2 (01:14):
Hey everybody, and welcome back to another episode of Adventures
in Angular.
Speaker 3 (01:18):
This week on our panel, we have Subra Nieshra.
Speaker 4 (01:22):
Hello.
Speaker 3 (01:22):
We also have Sonny Yusef.
Speaker 4 (01:26):
Again.
Speaker 3 (01:27):
I'm Charles Maxwood from duv chat dot TV. I don't
have my own jingle. We have a special guest this week,
and that is Michael plot Key.
Speaker 4 (01:34):
Hey, Hey, how's going going?
Speaker 3 (01:36):
All right?
Speaker 2 (01:36):
I always feel bad because I know I'm saying your
name wrong, but I don't know how I get it right,
so I.
Speaker 4 (01:41):
Don't even know myself. So it's good. Don't worry. Charles says,
everybody's name is wrong.
Speaker 3 (01:47):
I do.
Speaker 2 (01:48):
I just make it up as I go, the story
of my life. But yeah, we uh, we got you on.
Why don't you first just remind people who you are
because we haven't had John for a while, and then
we'll dive in and we'll talk about this.
Speaker 3 (01:59):
Right, I can do that.
Speaker 5 (02:00):
My my name is Michael doctor. You can stick with
Michell in German or Mchael in English. I guess it's
easier than my last name is. As you're already realize,
I'm a trainer and consultant. I have a small company
with a high expertise in angular reactive programming. We do
a lot of performance audits. This is like a framework
in technology agnostics, so we basically around a lot of
(02:25):
performance audits on bigger shops and other stuff where you
really need it.
Speaker 4 (02:30):
And on top of that.
Speaker 5 (02:32):
So they last I guess one and a half two
years I have a lot of focus on performance, in
particular in Angulo, so we shipped a set of tools
that help you to make faster, more reactive angular, more
responsive angular applications. And I guess this is also the
reason why you asked me to come here.
Speaker 4 (02:52):
If this is correct.
Speaker 2 (02:53):
Yeah, In fact, it was kind of interesting because we
were looking at this. We were talking before the show
about the push hype articles that you were writing and
the change detection, and I think we're all just a
little bit confused about.
Speaker 3 (03:07):
What this is and what it does for us.
Speaker 2 (03:09):
So do you want to just give us kind of
the high level view on what the pushpipe is and
how it affects change detection and all the stuff that
we kind of read through on the blog.
Speaker 3 (03:18):
Real quick, we can do that.
Speaker 5 (03:20):
So I would kick off this whole conversation with what
we have known, like what is the angle away angle
and Vanilla way of running change detection?
Speaker 4 (03:31):
And I will instantly.
Speaker 5 (03:33):
Throw into busswords pull and push based architecture. And now
let's with that two busswords in my end, let's let's
start and let's discuss how Angler's change detection is running
and why it is pool based.
Speaker 4 (03:47):
It's a lot of technical stuff.
Speaker 5 (03:49):
I try to break it down as good as I can,
and you will for sure interrupt me or give me
the one or other hint question where I should dig
into more if I miss stuff. But okay, other than that,
will start with who is triggering a re rendering of Angular?
And this is maybe stuff that people or some people
already know. We have the application reference the application rep service.
(04:15):
The service is basically connected to our root component, the
application root component, the most upper component, the component that
maintains and contains the whole app. And when you call
application rep tick them you basically run, not run, but
you check from top to bottom the whole components tree
(04:37):
and everything, believe in child component if there is.
Speaker 4 (04:41):
A change or not.
Speaker 5 (04:42):
So in Angelar we can run change detection in two
different ways. You can say my change detection is the
default way of doing that. And whenever you have like
your whole application and change diction on default and you
call application rep tick, it will re render everything.
Speaker 4 (04:59):
It will re render all the.
Speaker 5 (05:00):
Components, the leaves, the leasts, even stuff that has no change,
no effect, nothing, It will re render and reevaluate all
those components. So when it comes to change detection, you
may be also heard that there is another change detection strategy,
and this change detection strategy is not called default as
the default change detection strategy, but it is called on push,
(05:24):
and on push is maybe a little bit misleading.
Speaker 4 (05:26):
Because this change detection strategy.
Speaker 5 (05:29):
Should be named immutable change or only on immutable change,
because what it ask is if you put an input
binding to a component and then you call application rptick
to re render the whole application. Those components we've changed.
Detection on push will only re render if their input binding,
(05:50):
like the new value that you pass in from the
parent to that child has a new instance compared to
the previous change that run. So when I put an
array there and I never change the array, it will
not re render this lest components. And when then like
add new item, I will basically construct a new array
(06:13):
out of all the old items and add the new
added item into that array and then follow it again
to the component. And then I introduced an immutable change,
and these changes then propagated downwards to this child component,
and this child component and most probably all the child's
child components will re evaluate. So now we discussed change
(06:38):
detection for pot them change detection and on push, and
what I try to explain this how does the pull
and push based wording comes here into play? So let's
figure out explained to you like when we call application
rap tick decent, this is happening we already hopefully, hopefully
(07:00):
I made a good job understood what change detection strategy
on push is like mutiple data changes in input bindings.
And now I will try to explain to you why
Angler's change detection is pool based and maybe also when
reacts change detection is pool based. But let's stick grive
Angler for this for this session. There you know, don't
(07:24):
you have, for example, a small counter in one component.
Whenever you click the button, it counts up by one.
So what happens inside of Angular? In the gaps of
Angular there is anti zone, a service that is connected
to another third party library that is called zone Chas,
and Chas provides us an execution context across a synchronous
(07:48):
and synchronous code. You can basically track what happens in
which context and you don't lose that state.
Speaker 4 (07:54):
This is one thing and the other thing used that
Zone Chas basically.
Speaker 5 (07:59):
Patched every single browser API that is asynchronous. And I
will name some of them a promise, a button, event listener,
an event listener, an animation frame, as set time out,
anything that is asynchronous in the browser. And we can
(08:19):
open up Mozilla develop a network and see how many
of those asynchronous functions are there. I mean a name three,
there are like twelve to seventeen things that Soon really
patches on top of the other stuff. And this happens
when you bootstrap Anglo. Okay, so what does now we
know that soon chas is here somewhere in the background,
(08:40):
does some magical patching of APIs? What does API patching mean?
AI pitching means that, for example, let's stick with the
small counter component. If you clickly it counts up. The
button has an event listener. When you bootstrap this component,
Angler will add an event listener to this storm elevant,
and whenever you click the dorm element, Angler call the callback.
(09:01):
This is what Angler does for us under the hood.
Whenever Angular adds this event listeners already patched the browser's
native event lisen a method. What does patching me They
took the original ad event lisin a method, wrapped it
with their own thing, and then they say whenever somebody
calls ed evently, cenner, I will do whatever the browser
(09:24):
will do. Plus I've sneaked in my custom logic that
I can determine. Okay, there was a button click in
a component from this center event listener, and I need
to somehow tell Angular that this button click maybe we
cause the states change. And this is the second target
that does for us. It hooks the patched API and Angler,
(09:49):
it merges them together. It connects them and Angola will
realize when we click the button and say variable plus one.
Angler will real that and will re render the app.
And now I can explain why I why this pool based.
So when I click the button and I assign a
new value to my counter, I assign two instead of one.
(10:13):
What happens then is the button click basically not only
updates the state, but also start something internally that is
called mark few thirty and mark few dirty will take
the view that the component that is currently in and
mark the flag that tells you you should re render
(10:34):
that component as dirty. The flag will also be dirty
if you pass in an input binding that is mutable. Right,
so you have this flag on every component boundary and
either the button click or an input binding would flip
this flag to true and then Angler knows you have
to reevaluate re render the templates there and these components.
(10:54):
So I click the button in this very deeply nested
component tree and angular course mark few dirty. Then it
goes to the parent component and course mark field dirty.
Then it goes to the parent component and the course
mark field dirty.
Speaker 2 (11:08):
Guess what next comes to.
Speaker 4 (11:10):
The parent component of course market thirty.
Speaker 5 (11:12):
In the end, you know it, we end up at
the very top of your componentry at the applications at
root component and then Angler kicks in and cause application
red tick. And then no matter if you have everywhere
change detection on push or not, you have this path
from somewhere deep in your componentry dirty mark to the
(11:36):
very top and Angler will re render at least this
path from top to bottom to the very component where
you have the button and the click bind. So if
you step a step back now and look at the
explanation that I did, the button click is like an
HTTP request to the server I click the button and
(11:57):
a request to the anglers you a render ring. Angler,
I request the render ring. An Angler response to my
request with the render ring and says, yes, here you go,
I give you the render ring and the render.
Speaker 4 (12:11):
Everything top down.
Speaker 5 (12:12):
So I pulled a render ring to myself, this is
what Angela is doing by in its native way.
Speaker 4 (12:19):
This pulled change protection a lot in question.
Speaker 6 (12:26):
Yeah, so what I was really saying thinking was like,
it is only changing the the component and the child,
but I didn't the parent component also, So if you're
like like one note, it will only change.
Speaker 4 (12:42):
Come again means if you if.
Speaker 6 (12:44):
I'm changing on the fifth child and so it will
just change that roof from the parent.
Speaker 4 (12:52):
It will change everything.
Speaker 5 (12:54):
If you have a nested structure where you have ten
levels of nested components and you click that on the
tenth level, it will really evaluate from level one to
level ten everything because you have to pull.
Speaker 4 (13:07):
The change through the whole component.
Speaker 5 (13:10):
Tree to the very place you want to render it,
even if you change detection on push.
Speaker 4 (13:14):
Yeah.
Speaker 5 (13:14):
Yeah, I guess this is something that that not a
lot of people are aware in. This is like really
one of the biggest performance bottlenecks that you have, or
one of the first ones that you could fix in
a simple way.
Speaker 3 (13:26):
Yeah.
Speaker 2 (13:26):
One thing though, and Sunny brought this up before we
got started, was that for the most part, mostly Angular
apps that at least I played with there, they're not
so big, and so this the performance issue if it's
there isn't something that I really notice.
Speaker 7 (13:42):
So yeah, I guess, sorry, Michael. One question I always
have is it seems to me the I like the
idea of the ARM push.
Speaker 4 (13:52):
I've tried to manually do it right.
Speaker 7 (13:53):
But I also I think one of the reasons why
also the on push is very I guess I don't
use it as much is because also I don't use
a lot of NGRX, And I think once you use
a lot of when you want NGRX standard for you,
that you o bushes makes sense because why would you
not want to take advantage on that extra benefit right
(14:16):
that you just get out of the box.
Speaker 4 (14:17):
So I don't know.
Speaker 7 (14:18):
Maybe Michael, you wanted to you're the expert, you wanted
to share more.
Speaker 4 (14:23):
Yeah, sure so.
Speaker 5 (14:24):
Our ex Angula is a library that focuses on two
different targets.
Speaker 4 (14:29):
One of them is performance.
Speaker 5 (14:31):
So the tools that we ship include latest cutting edge technologies.
If we speak about other frameworks like cheap concurrent mode
for example, and other stuff, we basically leverage the same
potential ship the same technology so that we can also
ship these concurrent strategies and so on. But the second part,
(14:52):
and this is what I want to spress all this.
We also focus on development experience. So I want to
pick up your exemples on where you said, Well, the
tools that you ship, like the push pipe, the less directive,
the RX four that we will ship in the near future,
they only pay off for me if I if I'm
(15:12):
fully reactive, if I really use only in GRX or
any other state management tool, like in general, nearly any
state management tool is push based and you use love
at the moment, I would say no, it's not only
because of that, it is in general like if you
look at it from the develop experience perspective, you can say,
(15:33):
are ex angular pays off whenever I have to mix
imperative and reactive coding steps. Imperative is the stuff that
we are all used to, like our object oriented, state
driven mutable architecture that we run here, and the reactive
approach is different. It has a lot of functional concepts
(15:55):
in it and it is pushing values to you instead
of you pulling them and or instead of calling set
and get and as Angular ships a couple of things
like the router forms, reactive forms, life cycle hooks and
other stuff that are exposed as an observable or think
about the easiest piece and event. The meter is basically
(16:17):
a push based thing that you can take and subscribe
on it, right, and you do that in Angler when
you create an output binding, it is an event the meter,
but internally it's just called subscribe on something like a subject.
So you always have a mix of imperative and reactive
programming styles. And the clutter and pain nowadays is that
(16:38):
Angler does not provide proper glue. Whenever you have a
router parameter that changes over time in a vivery tiny application,
you end up to put the word subscribe somewhere. Then
you end up in going to the life cycle hook
on destroy and make sure you clean it up there.
If you're lucky, you did not use any switch map,
(16:58):
any higher or the flat operators that could even with
their own destroy and mess up your application, introduce a
memory leak like all that stuff could happen, and if
you are even even if you're an expert, what you
end up with in any tiny application that you write
as soon as you touch any reactive partner angula, and
(17:19):
there are plenty of them, as you know, like road
the reactive forms. They say, you have to deal with
that mix of imperative and reactive programming. You are forced
to subscribe somewhere. You put a behavior subject here, you
call next there. In the end, your application does not
feel good. If you look at the code, it is
always boiler plate.
Speaker 4 (17:39):
I mean, if you're used to entry rigs, you know
what I mean. We boiler plate.
Speaker 5 (17:43):
You have to write so much code on top just
make it working, and then you have to be aware
of all the memory leaks, and then you have to
be aware of the tearedon logic.
Speaker 4 (17:53):
So what we say in our ex angular is never subscribe.
Speaker 5 (17:57):
We ship basically tools that precisely define the one and
only use case where it makes sense that you did
that you subscribe to it. But even for those use cases,
we ship tools that makes it irrelevant for you to
think about subscribe.
Speaker 4 (18:12):
You just like figure out what is your thing?
Speaker 5 (18:15):
Is it stayed the side effect, and then you use
either or state management helpers or side effect helpers, but
they will take over all the clutter of subscription and
thing for you and you can end up with a
bdliner for basically any problem that would normally require at
least seven lines with life cycles with clean up and
(18:35):
so on and so forth. So I guess this is
like independent of performance and change detection whatever, a huge
benefit that you will start to laugh very quickly, like
all the people that say, like, why not just trying
it out for one tiny component? Want one tiny project,
and then you will see how it goes. You will
will really feel and realize what we did. I cannot
(18:58):
imagine a single person that like cool, but that we'll
not use it from no on.
Speaker 4 (19:02):
They are really or much of a code reduction.
Speaker 5 (19:06):
You can get how much safer it is to combine
those technologies because life stycle are sorry, memory leaks and
all the other stuff. The clutter, the boiler plate is gone.
You can focus on your problem. You just focus on
solving your problems and not on setting up any other
of those boiler plate these things.
Speaker 2 (19:25):
So let me back up just a minute, because we
talked about kind of the zone JS approach and you
know how that kind of climbs up your componentry, but
we didn't really talk about how the push pipe setup works,
like how does that work? Differently?
Speaker 4 (19:41):
Nice things to trust that you that you brought it up.
Speaker 5 (19:44):
Otherwise we don't get like stuff we started the small
detwa of your list.
Speaker 2 (19:50):
Yeah, we kind of got a little ahead of the conversation,
which is fine because we're talking about a benefit and
it's like, okay, you know, I get cleaner code, I
might get better performance. There are a handful of things
that I'm probably going to see that make it worth
me considering going this way. But now I want to
know what it looks like.
Speaker 5 (20:08):
Yeah, the first experiment what we did, and this is
also basically what is shipped in the n g r
X repository under the Component package. I basically developed evening
of last year a package for the INCHRX that was
called Component. It's still online, and this package shipped two
(20:29):
building blocks in a very rough and very sketchy way,
the PUSHPIP and the leads directive. And you basically asked
me about the push PIP, how does it work? So
what I will do now is I will try to
pull in the second term. From the beginning, I said
there is pool and push based architecture. I hopefully managed
(20:51):
to explain verbally without any slide how the change detection
normally works and by you pull the changes down to you. Now,
let me explain to you how it push based change
detection could work. So imagine you have let's make it
super simple and httper request in the middle of your
componentry and you want to just render the result the
(21:12):
least in the component. What you do normally is you
you you say, I take this observable bay or the promise.
It even works with promises, right, we don't have to
talk our xts here. We can stick with a promise
if it is easier, it works the same. We basically
support anything it has a promise of this hdpurial cust.
To plug it in a view, you use the acing
(21:33):
PAP and then zoom. When the HD puri cust kicks in,
it will do the magic like do the component dirty
marking from the pushpap basically course mark for check. It
will call mark few dirty for the parent, for the parent,
for the parent for the work and it will again
really render down the application. So with the acing PAP
we are still in this pool based approach. A viperial
(21:56):
clast emits. It ends up in the acing pap. As
PAP says, go from here to the top and then
re render everything to myself. Against that I can display
the new state. So now imagine not no imagine, So
now you maybe know that there are two change detection
methods that you can call manually. There is mark for
(22:17):
a check that I explained to you already, and there
is also detect changes. I'm not sure if anybody of
you knows that or used it.
Speaker 4 (22:27):
Maybe a quick check. Did anybody of you ever use? Yeah? Many? Yeah,
But why did you do that?
Speaker 6 (22:33):
Maybe I did for complex calculation and after that a
to us very by default on push the strategy. So
once that done, then then very detect change so that
it can be reflected on the resture.
Speaker 5 (22:50):
So what detect changes does In your example that you
sketched here, you call detect changes on the change detectorf
of of one of those components in your case, the
component that you had with push whatever you like, injected
over dependency injection that change detect the rest and then
(23:10):
you call it change detector rest dot detect changes. Right,
And what happened was Angular only re evaluated this very
single component and maybe their child components, but.
Speaker 4 (23:24):
Not top to bottom. Correct.
Speaker 5 (23:27):
Yeah, yes, So detect changes is a way how we
can detect the changes re evaluate the template of only
one single component and not the whole app. It's like
local you have local explicit change detection. This is the
stuff that React was doing ever since. In React you
(23:47):
have set state. Whenever you call set state, the component
will render. It will not automatically rerender when about eventually
snofires will only render if we call set state. Right, So,
detect changes is the first bridge to set state and React.
It enables us to do explicit state management. So now
(24:07):
imagine my use case where you have the HTDP request
pluged to an as pipe in the template, and now
imagine you create something that looks like the asing pipe
but does something different internally. It will subscribe to the observably,
it will receive the newer value, but instead of calling
(24:27):
for every new value, mark for a check and re
render the whole component path from the top to the bottom.
If you call detect changes, it will only re evaluate
these very components.
Speaker 4 (24:40):
Right.
Speaker 5 (24:41):
So the pushpap, basically next to a little bit nicer
management of internals and typing and so on, has exactly
the same as the AS pipe, but with local change detection.
It calls detect changes under the hood internally. So this
is what the pushpipe does. And if you got that,
(25:02):
I want to basically go one step further and I
want to stress out the down sets of the push pep.
Why what you have to do to get all the
downsids away? And then the should lead obviously to I
hit a punchline when I started to talk about the
push pipe and then so ness Angla and all the
(25:23):
new stuff that that is now on the road map.
I had the punchline that was, the acing pipe is boring,
really cool. I love it a lot. The asing pipe
is boring, and I hope that when I explained by
push pep is has downsides, I can also use my
new punchline, the push pipe is boring, and I can
pitch to you why you should use instead of the
(25:44):
push pep, the rx lent directive, for example. Would this
fit to your schedule, to your agenda of our discussion?
Speaker 2 (25:54):
Oh yes, especially from the idea that, hey, look, you
know there's there's this option, which is the deep op option. Okay,
now there's this push path option, but hey, there's this
other option.
Speaker 3 (26:04):
That may be better in certain circumstances.
Speaker 2 (26:06):
I like, I like giving people kind of the idea
of the way they want to approach.
Speaker 4 (26:11):
This very good broad context.
Speaker 5 (26:14):
So we discussed what Markfurcheck is doing in the asam pap.
We know that the push PIP is calling detec changes
internally and that it will only re evaluate this very component. Now,
let's talk about some technical problems that we had to
solve with the pushpap, and this will automatically lead to
the third option, which I believe is.
Speaker 4 (26:36):
The most beautiful and efficient way. How you can deal
with that?
Speaker 5 (26:40):
So imagine you have a template with not one pushpap inside,
but ten, and you admit to our ten PEPs the
same or a.
Speaker 4 (26:49):
Different value, it doesn't matter in the same tick.
Speaker 5 (26:53):
Like the browser has executes code codeed synchronously and in
the same tick he could execute multiple of those aswing
pipe course sorry, pushpipe course. And what we would end
up in is calling detect changes for those ten push
pips ten times in a row on the same component.
(27:14):
Even if calling it one time would be enough because okay,
I changed ten different parts in my template, but one
time reevaluating all the ten parts is enough. I don't
need to ten times to re evaluate all the ten things.
Is it already like something that you understand? Okay, So
(27:35):
we would call it ten times in a row and
maybe and now we start to get nerdy. Now we
start to get nerdy. So do you know the flag
where you can configure zone that is called Angi's zone
event core lasting, and she's one event colasting. Did you
ever hear that event corlasting?
Speaker 4 (27:57):
Okay? Corlasting. Colasting is a concept.
Speaker 5 (28:00):
I introduced it already back then in the INTERIR expectage.
But as I said, this was a very minimal approach,
minimal implementation proof of concept which does not respect all
of that.
Speaker 4 (28:14):
But even back then it was already the problem.
Speaker 5 (28:16):
So we faced it that it took longer, ever slower
if we have multiple push paps because all the synchronous things.
So collasting technically, what does it do? Collasting tells me
or it helps me to say, I want to wrap
the detect changes, call in another helper that I can
(28:39):
call a hundred a million times in a row, and
it will not do anything until a certain time period
has passed.
Speaker 4 (28:48):
So imagine within the next tick browser tick.
Speaker 5 (28:52):
Let's make it easier because browser ticks and execution context,
let's talk about milliseconds. It's not correct, but visually you
can think about it easier. So let's say you write
a function that says render component and you can call
that function a million of times in a row. It
will wait for the duration of five to ten milliseconds,
(29:14):
and only after that duration it will say okay render
component in the last ten milliseconds was called a million
of times. I know that reevaluating my component would only
pay off one time then all the new data is done,
So after ten milliseconds, I don't do it a million
of times.
Speaker 4 (29:34):
I just realized that it was called one or many
times and only call it once. So I have a timeframe.
Speaker 5 (29:42):
I have a time frame in which I could high
frequently call a metod and it will not execute right away.
It will wait until multiple things settle, I can merge,
I can coll less them together into one single call,
and then call it only once. And this was our
first speak hiting performance. We demonstrated that introducing these coalescing
(30:06):
strategy on component level gave us a huge boost in
performance and was like the first sign that we are
really on the right track, that we can really like
hit the target, provide tools, provide technology stack that is
completely different than what we are used to do in Angular.
We have the same well known mind mindset or meta model,
(30:30):
mental model like types and so on or directives, so
we tried to bake the new mental model into directives
and linked to the easier things, but still we had
way more thoughts and when you think about the tooche paps.
So what we did is we went down from reevaluating
the full component dirty path.
Speaker 4 (30:52):
We switched from that approach to only.
Speaker 5 (30:54):
Reevaluating one single component, a huge difference.
Speaker 4 (30:58):
Already we had more thoughts.
Speaker 5 (31:01):
Think about the following use case again, this component with
ten push paps inside, but this time not only the
ten of them change at the same time, but only
one of them changes at the same time. So what
you would do is you would go to your component
template and you would re evaluate the one thing that changed,
(31:22):
and all the other nine components are sorry template expressions too,
because you cannot really evaluate a template partially only there
or only only here, you know what I mean. If
you really evaluate the template, any single template expression in
this template will get re evaluated. So we had a
lot of thoughts on that, and we basically came up
(31:44):
with the idea that we can leverage already existing building
blocks in Anglo. I'm not sure if you're familiar with
structural directives, but I'm sure you are familiar with angie
if and angie four for example, Right, this is stuff
we know, so let me give you a little bit
of a hint. What is happening. Let's talk about and
(32:06):
if it is small, it is simple and she if
helps you to display a snippet of HTML only if
the condition is true. If not, you either hide it
or you show a fourback template for the force is state.
Speaker 4 (32:20):
Right, And those.
Speaker 5 (32:22):
Two templates internally are managed as embedded view. So in Angola,
the small template snippets that you show and tie it
are maintained internally in something that is called embedded view.
And if you reverse engineer or read the code the
source code of embedded view, you will realize an embedded
(32:44):
view also has a detect changes method. So not only
the components change detectors has a change detection method which
which will re evaluate everything. But there's small, tiny temper
snippets inside of structural directives also have the same logic
(33:04):
and you can call change detection only there for.
Speaker 4 (33:08):
This tiny snippet.
Speaker 5 (33:10):
So this was our first step in where we said, like, okay,
this could be an option for us. This could be
something where we should investigate more research work and see
if we can manage to do it somehow better in
that way, and the outcome was tremendous. So what we
did when we were done with our Tooche pap researchers,
(33:34):
we already shipped our ex let which already had this
embedded view inside, obviously, because how else should you create
an structural directive without using Angular's building blocks, right, so
we have that in place already. What we did is
we to figure out the way on how we can
make only this very peace re rendering. And it is
(33:57):
cool because we already had observers in place, already knew
how to structure and architect applications in a very nice
and eligent way with reactive approaches, like in a way
where you don't need to learn all the overheads but
just focus on their problems, the stuff that I talked
at the beginning. And we plugged basically an observable into
(34:18):
a structural directive and said we will only call detect
changes on this embedded view when the observable that I
connected to the structure directive is firing.
Speaker 4 (34:30):
Oh interesting, anti drag by track? Why is a method
that you use in RX four? Sorry? Chief?
Speaker 5 (34:41):
What I speak about is like the underlying building blocks
in Angola in angy four in ngive in and she switched.
There are always two things that you have to maintain internally.
One thing is the embedded view and the other thing
is the few container reference. Every structural directive maintains a
(35:02):
view container, may it be a container for the list,
a container for the EVLS template, whatever, and then the
templates themselves embedded views.
Speaker 4 (35:11):
And we basically, my battery starts to get low.
Speaker 5 (35:15):
And we basically managed to figure out a way how
to go on with that. I tried to explain now
the other down set that we figured out in that set.
So when we figured out that we could connect it,
the next problem was okay, now we were like April.
(35:36):
Instead of re evaluating ten things, we only reavailed one thing.
So we even made I guess this was the biggest
step in performance we will ever make.
Speaker 3 (35:47):
All that makes sense. You only have to do the
work once isstead of ten times.
Speaker 4 (35:50):
So yes, and don't you don't consider a component. You
only consider bond expression.
Speaker 5 (35:56):
But if you have a big application, it would happened
that again ten expressions across the whole app would fire
at the same time, right, and you can never know
if it happens or not. It's impossible to like predict.
So what we did is we introduced basically notion of
(36:17):
the frame budget. If you know, like bad applications always
have frame drops. Frame drops means they stuck, they have
changy scrolling. This is called a frame drop, not a
good frame rate. And we managed to tell Angular you
do all the rendering work, but if you're in progress
of rendering and you realize that the budget of the
(36:39):
current frame is close to the frame drop, you stop,
You give the browser time to breathe, and then you
go on with the next rendering package. And in this
way we basically were able to introduce cutting edge future
technology right away that then can run now in Angular
and it's doing the identical stuff as React concurrent mode
(37:00):
is doing. Like the secret behind real concurrent mode. And
why you have that highly efficient and highly reactive interactive
user interfaces is they all have notion of frame budget
when they render and the browser we never freeze.
Speaker 4 (37:17):
And this is what we maintained. What we accomplished.
Speaker 5 (37:19):
We accomplished change detection in Angular that will never make
your app freeze.
Speaker 4 (37:26):
Isn't that amazing? Yeah? Yeah, yeah, that's cool.
Speaker 2 (37:29):
Now I want to go see because whenever I hear this,
I'm just like, Okay, let's let's see if we can
break this right. I want to write some script that
just goes and like grabs a whole bunch of stuff
and then shakes it and dumps it out and tries
to figure.
Speaker 4 (37:43):
We did good issues. We did good issues and good research.
Speaker 5 (37:46):
If you look in the rx Angular Repository issue number
three hundred and four, we'll show you how we implemented
all the concepts that I explained to you now in
Angy four. Like we don't call it Angie four, we
call it are export. But we basically managed to introduce
all those technologies in least trender rings like sibling components.
(38:09):
This is the hardest problem you will face in pretty
much any front and framework, how to render a list
of I don't know a lot of things that are
costly after another without freezing the browser. So this is
stuff you can check out on and you see how
we researched, what we implemented, what the measurements are. We
basically measure everything. We do measures, we do statistics, we
(38:34):
compare them to other approaches, and we really ship and
aim to ship cutting edge high performance stuff that on
top also brings a very nice developer experience. How do
you measure that? Well, we do it in the most
accurate way we can. We basically take the chrome left
tours and we measure Brander performance in flame charts milliseconds.
(38:57):
We see how the recalculation is. Do we see which
scripting parts in the whole process take more or less time?
And our hard numbers are basically milliseconds milliseconds and how.
Speaker 4 (39:09):
Stressed the browser is.
Speaker 5 (39:11):
In the issues three hundred and four in our ex
Angular pository you can see the different We make screenshots
from the identical use case and we screenshot that like
angle a native way and our way, and you really
visually see where in that which interactions we measured, like
four different interactions, where and how it will pay off.
(39:31):
And it is really very accurate and and we'll give
a good prediction of what you can assume if you
use this technology in your application.
Speaker 3 (39:41):
So how do I plug it into my app?
Speaker 5 (39:43):
You just install our ex Angular CDK, our ex angular template,
and then you use the RX four, the RX lat
the push PAP which I would not really recommend as
that directives are way more performance but still it will
be a little bit better, and you just use them
in your template. It's a bit more advanced. Like you
don't have to change any mindset. Go to your code.
(40:05):
If you see NG four, replace it with RX four.
If you see Angie effect with the acing path, replace
it with the rx LT.
Speaker 4 (40:12):
If you have an IF, replace it with X. If
you don't have to change your mindset or code a lot.
Speaker 5 (40:18):
If you like it, you can also say okay, I
understand also the technical internals there, and I want to
boost performance somewhere else. Then you can also take scheduling
techniques and other observable helpers that we created for you,
and you can tweak the performance of ng RX, of
YOURGDP rec quest, of your Global State management like we can. Basically,
(40:39):
we have a lot of building blocks that leverages really
expertise knowledge in a very easy way that you can
plug in too if you understand it into multiple different
other libraries too.
Speaker 3 (40:50):
Gotcha, so you said we were going to get the
RX LAT.
Speaker 5 (40:53):
Yes, RX lat and RX four are the things that
we should discuss. Those are the structural directive that I explained,
Like RX leat is what I would suggest if you
say I'm interested in rx angular. What is the pushpipe?
I would say the pushpipe is boring. Check out rx
leat rx let is the structural directive that enables you
(41:16):
to in one template only enable this one single template
expression and not all other temples expressions in the same
template like RX four arex lat x if all those
structural directors that be ship should encapsulate the angle of
mindset and ship it with all the performance impact improvements
(41:38):
under the hood.
Speaker 4 (41:39):
Easy to use, very high in impact.
Speaker 3 (41:42):
Nice. So you just pull in the library and then
you just use rx lat instead of.
Speaker 5 (41:47):
Instead of angie if asinkg, or you use the RX
four instead of ANGI four or that.
Speaker 4 (41:53):
It's like stuff that is really easy to do in
your application. You can go there.
Speaker 5 (41:56):
It is like two characters change and the you will
have your benefit. If you like it, you can adopt
your architecture a little bit more. You will realize you
can delete a lot of code now. If you use
the state package, for example, it tells you to shrink
down local and global composed state management to like hundreds
of lines and like from hundreds of lanes down to
(42:19):
a very.
Speaker 4 (42:20):
Few and those are things that you can use the
library for.
Speaker 2 (42:25):
Very cool and I guess it all just tests out
the same way. Like if I'm testing my code, I
could just swap these out. It does really so.
Speaker 4 (42:33):
For testing said we have similar strategies.
Speaker 5 (42:37):
The thing is our rendering is a synchronous and is
chunk and you maybe know that a synchronous code is
not that easy to test, so we say cool when
you write tests there there it is. You have one
global configuration that tails the library. Look, I'm in a
testing set set up. Now keep all the performance part
do it's synchronous, even if it is lower, but the
(43:00):
testing of the library will work like a chance.
Speaker 4 (43:02):
Just switch the strategy to testing strategy and then you're
able to run your test against gotcha. Yeah that's cool. Yeah,
it's what trying wants.
Speaker 6 (43:12):
I think everybody will love like the easiest, but they
just go to Vesco to starch ENGI replacing and that's
what works.
Speaker 4 (43:20):
This is how you burke.
Speaker 5 (43:21):
Yes, you will encounter some problems, of course, because we
should be with all the performance.
Speaker 4 (43:26):
Improvements on the default.
Speaker 5 (43:28):
So if you're running some problems and you don't want
to understand why there is a problem, you go to
this very component and switch the strategy to something that
we coor native is.
Speaker 2 (43:39):
I think that's battery going out. Yeah, let's go and
do some picks and just start wrapping up. It pays
on in four minutes. You can do picks too, Okay,
so I'll start Yeah, go ahead.
Speaker 6 (43:50):
Yeah, So today again I will pick a book that
is from Robin Summer. I think this one is also
a famous one. Is the five Club. It's the one
thing I get it from there. If you want to
do something before it thought hit to hits to your mind,
let's do it that it will not no negative thoughts.
Speaker 4 (44:12):
You know. That's the best thing I got from that book.
I think that's the pick for the day.
Speaker 3 (44:17):
Super all right, Sonny, do you have some picks?
Speaker 4 (44:20):
I'm thinking, I'm thinking.
Speaker 7 (44:21):
I'm thinking I really don't have any picks today, apart
from the fact that I just want to watch France
in Germany play and I also get to go to
jiu jitsu later on with the grand master of my
judo actually coming in to train us today.
Speaker 3 (44:36):
So no picks from my side today. France versus Germany. Huh.
Speaker 4 (44:40):
Yeah, that's a tough game.
Speaker 2 (44:42):
Yeah, Which which cup is this? Or is it?
Speaker 7 (44:45):
You is the this is the European champions So that
is the country version of the Champions League, the European Cup.
Speaker 2 (44:52):
Yeah, oh man, how did I miss that this was
going on in America?
Speaker 7 (44:57):
Everything is the World Cup over there or the World Championship.
Speaker 2 (45:01):
Oh man, Well now now I have to go back
and find some matches to watch.
Speaker 3 (45:06):
Well, it only just started.
Speaker 7 (45:07):
This is just today is going to be the last
version of the first round.
Speaker 3 (45:10):
So there's like two more rounds on. So you're pretty good.
I'm in good shape. Okay, I got it.
Speaker 2 (45:15):
I just have to figure out where I can watch
it then here in the US because I love watching
the Yeah, Champions League and yeah, the European Cup. I'll
actually throw out a funny story about the European Champions
not Champions League. Sorry that it's the UEFA the euro Cup.
When I was I lived in Italy for two years.
I was a missionary and while I was there, we
(45:40):
we were out talking to people because that's what we did,
just talk to people on the street. During the it
was Italy versus France for the final. And this is
back in like two thousand and so we're we're talking
to people and we could not find anybody out on
the street, Like the streets were totally dead during the game, right,
And so we just went into a little cafe and
(46:02):
just chatted with the people there while they watched the game.
And yeah, we decided to head home before the game
was over, right, because.
Speaker 3 (46:09):
It went it went to.
Speaker 2 (46:11):
Penalty kicks, and so we're walking down the street and
we could tell what was going on because you know,
France would go up and if they if they kicked
it into the goal, you'd hear just echoing down the street.
Oh right. And if Italy scored, then you'd hear cheering
like out the windows, right because all their windows were
open because it was warm, and it was really really funny.
(46:34):
So we get about a block from home and the
game ends and Italy wins, right, and anyway, all of
a sudden, we can't even get across the street, well
because everybody just went out and got in their cars
and we're just driving around and waving flags and going
crazy and we're just going homes right right over there.
But yeah, I love me some soccer. I will watch soccer.
(46:58):
Grives my wife crazy. But yeah, anyway, that's interesting. I'm
going to throw out a couple more picks here, real
quick way, what do I want to pick?
Speaker 4 (47:08):
I got so much stuff to pick.
Speaker 2 (47:10):
I've really been enjoying the book Psycho Cybernetics by Maxwell Maltz.
I think I might have picked that last week or
last time, but I'm really really digging it and it's
just terrific. And then the other pick that I have,
and this is this is something that I've kind of
been getting into lately, is just between Zapier and Discourse,
which is a forum software. I'm really getting a lot
(47:32):
done with that kind of stuff. And then finally the
last thing that I'm going to pick, and this, I'm
just going to do a kind of a quick rundown
of what it is. So when I need to get
focused work done, what I'm finding is if I schedule
a block of time. I wasn't so good at showing
up for those right because I'd schedule it and the
only person to hold me accountable was me. But I
found this service called Focus Blocks. It's actually made by
(47:54):
a friend of mine, and if you're interested, you can
go to dev chat, dot tv slash focus and sign
up for it if you want. But what it is
is you go in and you sign up for a
time on their calendar, and then you get on the
zoom call, and while you're on the zoom call, you
basically commit to what you're going to try and get
done during that hour, and then you go ahead and
(48:15):
you basically work on it, but you have your camera
on so they can see you, so you have a
little bit of accountability that you're not like getting up
and wandering off. They tell you to set your phone asides,
you're not playing around on it while you're supposed to
be getting stuff done.
Speaker 3 (48:29):
They start and stop.
Speaker 2 (48:30):
Each hour with kind of some breathing exercises and stretches
and stuff like that. And it has been Honestly, I
think I've gotten more done over the last couple of
weeks and I have in a month couple of months
before that, just trying to keep everything running with dev chat,
nott TV while having a full time job, which has
been excruciating. But anyway, it's just been it's been awesome.
(48:51):
I cannot tell you how impactful this has been over
the last few weeks to just have this going, because yeah,
if I have an hour or two to work, yeah,
I'll schedule a couple of focus blocks and then I'll
I'll just jump on and do it. And because I
can kind of get into that rhythm, I get into
the zone pretty fast and I just knock stuff out
like crazy. So if you want to check it out
(49:13):
dev Chat, not TV slash focus. The deal there is
if you want to be on when I'm on, right,
so you can wave at me on the camera. They
keep you muted right so you don't bother each other
while you're trying to work, but you can see other
people on the camera. But yeah, while we're getting started,
you can waiveh at me all the way back. I'm
usually on early in the morning US time, so if
you're in Europe, that's going to be in the afternoon
(49:35):
or evening. So yeah, like six o'clock, seven o'clock in
the morning is usually when I'm doing my focus blocks.
I'm looking at doing some over my lunch break. I've
been working from home, so it's not a big deal, right,
I just turn and get on the other computer. But yeah,
it's been amazing because I can just sit down and
I can just get this focused work done. And sometimes
they don't go quiet as planned, like this morning, I
(49:56):
wind up troubleshooting WordPress instead of getting the work done
that I needed get done because I needed WordPress to
work and it wouldn't cooperate. But yeah, right, But most
of the time, the rest of the time, I wind
up getting just a ton of work done because I
just get in the zone and just knock stuff out.
So that's gonna be my pick.
Speaker 7 (50:15):
I've got it open, I'm gonna I like the way
it sounds. I'm gonna have a look at it.
Speaker 2 (50:20):
Yeah, it's been it's been amazing, So I'm really liking that.
One other thing I just want to shout out about
since we have another minute, is we did an episode
with Eric Simons from Stacklitz and we were talking about
the web container stuff that they showed off running no
JS in the browser natively at Google Io. And so
(50:40):
if you're if you're looking for stuff like that, you know,
just some interesting technology. We kind of dove a little
bit into some of the other implications of what this
technology means as far as being able to run stuff
natively in the browser. So if you're looking for something
like that, it's really cool, and I think it's going
to change the way that we do web development going forward,
because there are a lot of implications as to what
(51:01):
is there. So anyway, I'm gonna I'm gonna stop shouting
stuff out now.
Speaker 3 (51:06):
Michael, do you.
Speaker 2 (51:07):
Have some pecks for US tech related or or anything
anything you should?
Speaker 5 (51:13):
You should start to learn some dance. I like dancing
a lot, as well as singing. I guess everybody should
either start to dance or sing. It makes less more
enjoyable a lot. Other than this, you should book my
performance audits for your project as a shameless plug.
Speaker 2 (51:30):
There you go where the people already do that, where.
Speaker 4 (51:33):
They can peek at the moment.
Speaker 5 (51:34):
I don't have the lending page for performance audits online,
but I have an email address, I have Twitter ping me.
This is the way how people did it so far
surprisingly works. But in the future I will have dedicated
landing pages that really stress out like what we do,
why are we like outstanding good?
Speaker 4 (51:53):
And so on.
Speaker 5 (51:54):
So it's the stuff that you will see soon online.
Other than this, you can ping in off Twitter or
email Michael.
Speaker 3 (52:02):
Awesome.
Speaker 2 (52:02):
Yeah, if you can put that in the chat, then
we'll make sure that people can get a hold of it.
But yeah, this has been super fun, really interesting stuff.
I'd love to dive a little bit more into performance,
so maybe we'll throw it together a Part two and yeah,
we'll get that on the calendar and we'll make it happen.
But yeah, thanks for coming. This was awesome, all right, folks.
Until next time, Max out
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.