1
00:00:00,200 --> 00:00:03,720
Speaker 1: Welcome to Adventures in Angler, the largest and most popular

2
00:00:03,799 --> 00:00:07,799
podcasts in the world about web development with Angler. This

3
00:00:07,919 --> 00:00:11,800
show is brought to you by Void and top Endavs.

4
00:00:12,480 --> 00:00:17,160
Unvoid provides high quality design and software development services on

5
00:00:17,280 --> 00:00:22,640
a client friendly business model. Unlike all other agencies, Unvoid

6
00:00:22,879 --> 00:00:26,640
allows clients to only pay after the work is delivered

7
00:00:26,760 --> 00:00:31,320
and approved. Visit unvoid dot com to learn more and

8
00:00:31,440 --> 00:00:33,679
reach out. If you know a company that needs more

9
00:00:33,679 --> 00:00:38,280
professionals to help with design and software development, that's u

10
00:00:38,679 --> 00:00:44,000
n vod dot com and top and Davs helps you

11
00:00:44,079 --> 00:00:49,439
stay up to date with cutting edge technologies like JavaScript, Ruby, Elixir,

12
00:00:49,520 --> 00:00:54,240
and AI. Visit topd davs dot com to join their

13
00:00:54,280 --> 00:00:59,479
AIDV book camp, weekly community meetups and access expert tutorials.

14
00:01:00,159 --> 00:01:04,359
Lucas Paganini, founder of on Void and host of this podcast,

15
00:01:04,799 --> 00:01:12,799
Thank you for tuning in. Let's jump into the episode.

16
00:01:14,439 --> 00:01:17,840
Speaker 2: Hey everybody, and welcome back to another episode of Adventures

17
00:01:17,840 --> 00:01:18,280
in Angular.

18
00:01:18,480 --> 00:01:21,439
Speaker 3: This week on our panel, we have Subra Nieshra.

19
00:01:22,040 --> 00:01:22,439
Speaker 4: Hello.

20
00:01:22,760 --> 00:01:24,959
Speaker 3: We also have Sonny Yusef.

21
00:01:26,519 --> 00:01:26,799
Speaker 4: Again.

22
00:01:27,239 --> 00:01:29,799
Speaker 3: I'm Charles Maxwood from duv chat dot TV. I don't

23
00:01:29,799 --> 00:01:32,280
have my own jingle. We have a special guest this week,

24
00:01:32,319 --> 00:01:34,400
and that is Michael plot Key.

25
00:01:34,680 --> 00:01:36,560
Speaker 4: Hey, Hey, how's going going?

26
00:01:36,519 --> 00:01:36,879
Speaker 3: All right?

27
00:01:36,879 --> 00:01:38,680
Speaker 2: I always feel bad because I know I'm saying your

28
00:01:38,719 --> 00:01:40,560
name wrong, but I don't know how I get it right,

29
00:01:40,640 --> 00:01:41,120
so I.

30
00:01:41,400 --> 00:01:45,280
Speaker 4: Don't even know myself. So it's good. Don't worry. Charles says,

31
00:01:45,280 --> 00:01:46,359
everybody's name is wrong.

32
00:01:47,879 --> 00:01:48,519
Speaker 3: I do.

33
00:01:48,799 --> 00:01:50,799
Speaker 2: I just make it up as I go, the story

34
00:01:50,799 --> 00:01:53,760
of my life. But yeah, we uh, we got you on.

35
00:01:54,120 --> 00:01:56,200
Why don't you first just remind people who you are

36
00:01:56,200 --> 00:01:57,719
because we haven't had John for a while, and then

37
00:01:57,719 --> 00:01:59,120
we'll dive in and we'll talk about this.

38
00:01:59,280 --> 00:02:00,599
Speaker 3: Right, I can do that.

39
00:02:00,840 --> 00:02:03,079
Speaker 5: My my name is Michael doctor. You can stick with

40
00:02:03,239 --> 00:02:06,439
Michell in German or Mchael in English. I guess it's

41
00:02:06,480 --> 00:02:09,240
easier than my last name is. As you're already realize,

42
00:02:09,439 --> 00:02:13,360
I'm a trainer and consultant. I have a small company

43
00:02:13,400 --> 00:02:17,680
with a high expertise in angular reactive programming. We do

44
00:02:17,759 --> 00:02:20,639
a lot of performance audits. This is like a framework

45
00:02:20,680 --> 00:02:25,120
in technology agnostics, so we basically around a lot of

46
00:02:25,159 --> 00:02:28,599
performance audits on bigger shops and other stuff where you

47
00:02:28,680 --> 00:02:29,759
really need it.

48
00:02:30,439 --> 00:02:31,840
Speaker 4: And on top of that.

49
00:02:32,039 --> 00:02:34,159
Speaker 5: So they last I guess one and a half two

50
00:02:34,240 --> 00:02:37,919
years I have a lot of focus on performance, in

51
00:02:38,000 --> 00:02:42,000
particular in Angulo, so we shipped a set of tools

52
00:02:42,039 --> 00:02:45,759
that help you to make faster, more reactive angular, more

53
00:02:45,879 --> 00:02:49,879
responsive angular applications. And I guess this is also the

54
00:02:49,919 --> 00:02:52,319
reason why you asked me to come here.

55
00:02:52,520 --> 00:02:53,479
Speaker 4: If this is correct.

56
00:02:53,759 --> 00:02:56,759
Speaker 2: Yeah, In fact, it was kind of interesting because we

57
00:02:56,759 --> 00:02:58,960
were looking at this. We were talking before the show

58
00:02:59,000 --> 00:03:02,520
about the push hype articles that you were writing and

59
00:03:03,039 --> 00:03:05,319
the change detection, and I think we're all just a

60
00:03:05,319 --> 00:03:07,560
little bit confused about.

61
00:03:07,319 --> 00:03:08,960
Speaker 3: What this is and what it does for us.

62
00:03:09,039 --> 00:03:11,039
Speaker 2: So do you want to just give us kind of

63
00:03:11,080 --> 00:03:14,280
the high level view on what the pushpipe is and

64
00:03:14,319 --> 00:03:16,639
how it affects change detection and all the stuff that

65
00:03:17,039 --> 00:03:18,919
we kind of read through on the blog.

66
00:03:18,960 --> 00:03:20,240
Speaker 3: Real quick, we can do that.

67
00:03:20,879 --> 00:03:25,120
Speaker 5: So I would kick off this whole conversation with what

68
00:03:25,199 --> 00:03:28,120
we have known, like what is the angle away angle

69
00:03:28,199 --> 00:03:30,840
and Vanilla way of running change detection?

70
00:03:31,479 --> 00:03:33,759
Speaker 4: And I will instantly.

71
00:03:33,840 --> 00:03:38,599
Speaker 5: Throw into busswords pull and push based architecture. And now

72
00:03:38,680 --> 00:03:41,759
let's with that two busswords in my end, let's let's

73
00:03:41,800 --> 00:03:46,199
start and let's discuss how Angler's change detection is running

74
00:03:46,199 --> 00:03:47,599
and why it is pool based.

75
00:03:47,879 --> 00:03:49,280
Speaker 4: It's a lot of technical stuff.

76
00:03:49,319 --> 00:03:51,479
Speaker 5: I try to break it down as good as I can,

77
00:03:51,520 --> 00:03:54,560
and you will for sure interrupt me or give me

78
00:03:54,599 --> 00:03:57,240
the one or other hint question where I should dig

79
00:03:57,280 --> 00:04:00,240
into more if I miss stuff. But okay, other than that,

80
00:04:00,280 --> 00:04:05,280
will start with who is triggering a re rendering of Angular?

81
00:04:05,759 --> 00:04:08,840
And this is maybe stuff that people or some people

82
00:04:08,879 --> 00:04:14,120
already know. We have the application reference the application rep service.

83
00:04:15,080 --> 00:04:19,079
The service is basically connected to our root component, the

84
00:04:19,120 --> 00:04:23,639
application root component, the most upper component, the component that

85
00:04:23,920 --> 00:04:26,959
maintains and contains the whole app. And when you call

86
00:04:27,000 --> 00:04:33,079
application rep tick them you basically run, not run, but

87
00:04:33,120 --> 00:04:37,360
you check from top to bottom the whole components tree

88
00:04:37,600 --> 00:04:41,160
and everything, believe in child component if there is.

89
00:04:41,279 --> 00:04:42,079
Speaker 4: A change or not.

90
00:04:42,720 --> 00:04:45,680
Speaker 5: So in Angelar we can run change detection in two

91
00:04:45,720 --> 00:04:49,199
different ways. You can say my change detection is the

92
00:04:49,319 --> 00:04:52,079
default way of doing that. And whenever you have like

93
00:04:52,240 --> 00:04:54,879
your whole application and change diction on default and you

94
00:04:54,920 --> 00:04:59,000
call application rep tick, it will re render everything.

95
00:04:59,079 --> 00:05:00,600
Speaker 4: It will re render all the.

96
00:05:00,600 --> 00:05:05,560
Speaker 5: Components, the leaves, the leasts, even stuff that has no change,

97
00:05:05,639 --> 00:05:08,879
no effect, nothing, It will re render and reevaluate all

98
00:05:08,920 --> 00:05:11,759
those components. So when it comes to change detection, you

99
00:05:11,920 --> 00:05:16,439
may be also heard that there is another change detection strategy,

100
00:05:16,839 --> 00:05:20,279
and this change detection strategy is not called default as

101
00:05:20,279 --> 00:05:24,040
the default change detection strategy, but it is called on push,

102
00:05:24,399 --> 00:05:27,279
and on push is maybe a little bit misleading.

103
00:05:26,720 --> 00:05:29,360
Speaker 4: Because this change detection strategy.

104
00:05:29,240 --> 00:05:33,199
Speaker 5: Should be named immutable change or only on immutable change,

105
00:05:33,240 --> 00:05:36,079
because what it ask is if you put an input

106
00:05:36,120 --> 00:05:41,199
binding to a component and then you call application rptick

107
00:05:41,319 --> 00:05:46,000
to re render the whole application. Those components we've changed.

108
00:05:46,000 --> 00:05:50,839
Detection on push will only re render if their input binding,

109
00:05:50,959 --> 00:05:53,360
like the new value that you pass in from the

110
00:05:53,439 --> 00:05:58,720
parent to that child has a new instance compared to

111
00:05:58,759 --> 00:06:02,040
the previous change that run. So when I put an

112
00:06:02,120 --> 00:06:05,279
array there and I never change the array, it will

113
00:06:05,319 --> 00:06:08,920
not re render this lest components. And when then like

114
00:06:09,519 --> 00:06:13,680
add new item, I will basically construct a new array

115
00:06:13,800 --> 00:06:16,439
out of all the old items and add the new

116
00:06:16,480 --> 00:06:19,680
added item into that array and then follow it again

117
00:06:19,759 --> 00:06:24,480
to the component. And then I introduced an immutable change,

118
00:06:24,879 --> 00:06:28,839
and these changes then propagated downwards to this child component,

119
00:06:28,879 --> 00:06:33,120
and this child component and most probably all the child's

120
00:06:33,199 --> 00:06:38,279
child components will re evaluate. So now we discussed change

121
00:06:38,279 --> 00:06:42,000
detection for pot them change detection and on push, and

122
00:06:42,480 --> 00:06:48,079
what I try to explain this how does the pull

123
00:06:48,160 --> 00:06:52,480
and push based wording comes here into play? So let's

124
00:06:52,519 --> 00:06:55,519
figure out explained to you like when we call application

125
00:06:55,680 --> 00:06:59,959
rap tick decent, this is happening we already hopefully, hopefully

126
00:07:00,040 --> 00:07:03,560
I made a good job understood what change detection strategy

127
00:07:03,600 --> 00:07:08,639
on push is like mutiple data changes in input bindings.

128
00:07:08,920 --> 00:07:12,000
And now I will try to explain to you why

129
00:07:12,240 --> 00:07:16,199
Angler's change detection is pool based and maybe also when

130
00:07:16,319 --> 00:07:18,560
reacts change detection is pool based. But let's stick grive

131
00:07:18,600 --> 00:07:22,399
Angler for this for this session. There you know, don't

132
00:07:24,360 --> 00:07:27,600
you have, for example, a small counter in one component.

133
00:07:27,639 --> 00:07:30,319
Whenever you click the button, it counts up by one.

134
00:07:30,519 --> 00:07:34,240
So what happens inside of Angular? In the gaps of

135
00:07:34,319 --> 00:07:38,319
Angular there is anti zone, a service that is connected

136
00:07:38,360 --> 00:07:41,759
to another third party library that is called zone Chas,

137
00:07:42,839 --> 00:07:48,399
and Chas provides us an execution context across a synchronous

138
00:07:48,399 --> 00:07:51,480
and synchronous code. You can basically track what happens in

139
00:07:51,519 --> 00:07:54,279
which context and you don't lose that state.

140
00:07:54,399 --> 00:07:56,360
Speaker 4: This is one thing and the other thing used that

141
00:07:56,519 --> 00:07:58,759
Zone Chas basically.

142
00:07:59,040 --> 00:08:05,160
Speaker 5: Patched every single browser API that is asynchronous. And I

143
00:08:05,160 --> 00:08:09,839
will name some of them a promise, a button, event listener,

144
00:08:09,879 --> 00:08:14,000
an event listener, an animation frame, as set time out,

145
00:08:15,319 --> 00:08:19,040
anything that is asynchronous in the browser. And we can

146
00:08:19,079 --> 00:08:23,800
open up Mozilla develop a network and see how many

147
00:08:23,920 --> 00:08:26,600
of those asynchronous functions are there. I mean a name three,

148
00:08:26,639 --> 00:08:30,600
there are like twelve to seventeen things that Soon really

149
00:08:30,879 --> 00:08:33,879
patches on top of the other stuff. And this happens

150
00:08:33,919 --> 00:08:37,399
when you bootstrap Anglo. Okay, so what does now we

151
00:08:37,440 --> 00:08:40,240
know that soon chas is here somewhere in the background,

152
00:08:40,279 --> 00:08:44,759
does some magical patching of APIs? What does API patching mean?

153
00:08:45,279 --> 00:08:48,039
AI pitching means that, for example, let's stick with the

154
00:08:48,080 --> 00:08:50,919
small counter component. If you clickly it counts up. The

155
00:08:51,000 --> 00:08:54,519
button has an event listener. When you bootstrap this component,

156
00:08:54,600 --> 00:08:57,399
Angler will add an event listener to this storm elevant,

157
00:08:57,440 --> 00:09:01,039
and whenever you click the dorm element, Angler call the callback.

158
00:09:01,120 --> 00:09:03,960
This is what Angler does for us under the hood.

159
00:09:04,399 --> 00:09:10,399
Whenever Angular adds this event listeners already patched the browser's

160
00:09:10,480 --> 00:09:14,120
native event lisen a method. What does patching me They

161
00:09:14,159 --> 00:09:17,600
took the original ad event lisin a method, wrapped it

162
00:09:17,639 --> 00:09:20,759
with their own thing, and then they say whenever somebody

163
00:09:20,799 --> 00:09:24,639
calls ed evently, cenner, I will do whatever the browser

164
00:09:24,679 --> 00:09:29,159
will do. Plus I've sneaked in my custom logic that

165
00:09:29,240 --> 00:09:33,039
I can determine. Okay, there was a button click in

166
00:09:33,120 --> 00:09:36,639
a component from this center event listener, and I need

167
00:09:36,679 --> 00:09:41,360
to somehow tell Angular that this button click maybe we

168
00:09:41,519 --> 00:09:44,279
cause the states change. And this is the second target

169
00:09:44,519 --> 00:09:49,360
that does for us. It hooks the patched API and Angler,

170
00:09:49,559 --> 00:09:53,720
it merges them together. It connects them and Angola will

171
00:09:53,759 --> 00:09:58,519
realize when we click the button and say variable plus one.

172
00:09:59,159 --> 00:10:01,879
Angler will real that and will re render the app.

173
00:10:02,399 --> 00:10:06,279
And now I can explain why I why this pool based.

174
00:10:06,480 --> 00:10:09,000
So when I click the button and I assign a

175
00:10:09,039 --> 00:10:12,559
new value to my counter, I assign two instead of one.

176
00:10:13,000 --> 00:10:16,840
What happens then is the button click basically not only

177
00:10:16,919 --> 00:10:22,200
updates the state, but also start something internally that is

178
00:10:22,240 --> 00:10:26,000
called mark few thirty and mark few dirty will take

179
00:10:26,080 --> 00:10:29,919
the view that the component that is currently in and

180
00:10:30,120 --> 00:10:34,080
mark the flag that tells you you should re render

181
00:10:34,159 --> 00:10:38,480
that component as dirty. The flag will also be dirty

182
00:10:38,519 --> 00:10:41,200
if you pass in an input binding that is mutable. Right,

183
00:10:41,279 --> 00:10:44,559
so you have this flag on every component boundary and

184
00:10:44,600 --> 00:10:47,639
either the button click or an input binding would flip

185
00:10:47,679 --> 00:10:49,879
this flag to true and then Angler knows you have

186
00:10:49,960 --> 00:10:54,000
to reevaluate re render the templates there and these components.

187
00:10:54,440 --> 00:10:57,080
So I click the button in this very deeply nested

188
00:10:57,120 --> 00:11:01,799
component tree and angular course mark few dirty. Then it

189
00:11:01,879 --> 00:11:04,879
goes to the parent component and course mark field dirty.

190
00:11:05,159 --> 00:11:07,399
Then it goes to the parent component and the course

191
00:11:07,480 --> 00:11:08,279
mark field dirty.

192
00:11:08,840 --> 00:11:10,200
Speaker 2: Guess what next comes to.

193
00:11:10,200 --> 00:11:12,039
Speaker 4: The parent component of course market thirty.

194
00:11:12,440 --> 00:11:14,639
Speaker 5: In the end, you know it, we end up at

195
00:11:14,639 --> 00:11:18,960
the very top of your componentry at the applications at

196
00:11:19,039 --> 00:11:24,080
root component and then Angler kicks in and cause application

197
00:11:24,279 --> 00:11:28,799
red tick. And then no matter if you have everywhere

198
00:11:28,879 --> 00:11:32,000
change detection on push or not, you have this path

199
00:11:32,240 --> 00:11:36,080
from somewhere deep in your componentry dirty mark to the

200
00:11:36,200 --> 00:11:40,039
very top and Angler will re render at least this

201
00:11:40,279 --> 00:11:43,440
path from top to bottom to the very component where

202
00:11:43,440 --> 00:11:46,600
you have the button and the click bind. So if

203
00:11:46,639 --> 00:11:50,759
you step a step back now and look at the

204
00:11:50,799 --> 00:11:54,360
explanation that I did, the button click is like an

205
00:11:54,480 --> 00:11:57,879
HTTP request to the server I click the button and

206
00:11:57,960 --> 00:12:02,000
a request to the anglers you a render ring. Angler,

207
00:12:02,360 --> 00:12:05,320
I request the render ring. An Angler response to my

208
00:12:06,159 --> 00:12:09,759
request with the render ring and says, yes, here you go,

209
00:12:09,840 --> 00:12:12,039
I give you the render ring and the render.

210
00:12:11,720 --> 00:12:12,639
Speaker 4: Everything top down.

211
00:12:12,720 --> 00:12:16,519
Speaker 5: So I pulled a render ring to myself, this is

212
00:12:16,559 --> 00:12:19,679
what Angela is doing by in its native way.

213
00:12:19,840 --> 00:12:25,000
Speaker 4: This pulled change protection a lot in question.

214
00:12:26,320 --> 00:12:29,080
Speaker 6: Yeah, so what I was really saying thinking was like,

215
00:12:29,200 --> 00:12:33,320
it is only changing the the component and the child,

216
00:12:33,840 --> 00:12:38,960
but I didn't the parent component also, So if you're

217
00:12:39,039 --> 00:12:41,720
like like one note, it will only change.

218
00:12:42,039 --> 00:12:44,440
Speaker 4: Come again means if you if.

219
00:12:44,279 --> 00:12:48,720
Speaker 6: I'm changing on the fifth child and so it will

220
00:12:48,759 --> 00:12:52,159
just change that roof from the parent.

221
00:12:52,519 --> 00:12:53,960
Speaker 4: It will change everything.

222
00:12:54,039 --> 00:12:56,559
Speaker 5: If you have a nested structure where you have ten

223
00:12:56,799 --> 00:13:00,480
levels of nested components and you click that on the

224
00:13:00,519 --> 00:13:04,559
tenth level, it will really evaluate from level one to

225
00:13:04,799 --> 00:13:07,720
level ten everything because you have to pull.

226
00:13:07,600 --> 00:13:10,639
Speaker 4: The change through the whole component.

227
00:13:10,080 --> 00:13:12,080
Speaker 5: Tree to the very place you want to render it,

228
00:13:12,480 --> 00:13:14,279
even if you change detection on push.

229
00:13:14,559 --> 00:13:14,759
Speaker 4: Yeah.

230
00:13:14,840 --> 00:13:17,240
Speaker 5: Yeah, I guess this is something that that not a

231
00:13:17,279 --> 00:13:19,480
lot of people are aware in. This is like really

232
00:13:20,039 --> 00:13:23,159
one of the biggest performance bottlenecks that you have, or

233
00:13:23,200 --> 00:13:25,080
one of the first ones that you could fix in

234
00:13:25,120 --> 00:13:25,799
a simple way.

235
00:13:26,200 --> 00:13:26,440
Speaker 3: Yeah.

236
00:13:26,519 --> 00:13:30,159
Speaker 2: One thing though, and Sunny brought this up before we

237
00:13:30,240 --> 00:13:32,840
got started, was that for the most part, mostly Angular

238
00:13:32,879 --> 00:13:36,200
apps that at least I played with there, they're not

239
00:13:36,240 --> 00:13:39,480
so big, and so this the performance issue if it's

240
00:13:39,519 --> 00:13:41,840
there isn't something that I really notice.

241
00:13:42,120 --> 00:13:48,000
Speaker 7: So yeah, I guess, sorry, Michael. One question I always

242
00:13:48,039 --> 00:13:51,120
have is it seems to me the I like the

243
00:13:51,120 --> 00:13:52,039
idea of the ARM push.

244
00:13:52,240 --> 00:13:53,799
Speaker 4: I've tried to manually do it right.

245
00:13:53,840 --> 00:13:57,159
Speaker 7: But I also I think one of the reasons why

246
00:13:57,440 --> 00:14:01,000
also the on push is very I guess I don't

247
00:14:01,080 --> 00:14:02,840
use it as much is because also I don't use

248
00:14:02,879 --> 00:14:05,879
a lot of NGRX, And I think once you use

249
00:14:05,919 --> 00:14:08,559
a lot of when you want NGRX standard for you,

250
00:14:09,559 --> 00:14:12,480
that you o bushes makes sense because why would you

251
00:14:12,559 --> 00:14:16,000
not want to take advantage on that extra benefit right

252
00:14:16,120 --> 00:14:17,519
that you just get out of the box.

253
00:14:17,720 --> 00:14:18,120
Speaker 4: So I don't know.

254
00:14:18,159 --> 00:14:21,440
Speaker 7: Maybe Michael, you wanted to you're the expert, you wanted

255
00:14:21,480 --> 00:14:22,440
to share more.

256
00:14:23,200 --> 00:14:24,159
Speaker 4: Yeah, sure so.

257
00:14:24,559 --> 00:14:27,480
Speaker 5: Our ex Angula is a library that focuses on two

258
00:14:27,519 --> 00:14:29,039
different targets.

259
00:14:29,279 --> 00:14:30,840
Speaker 4: One of them is performance.

260
00:14:31,679 --> 00:14:37,279
Speaker 5: So the tools that we ship include latest cutting edge technologies.

261
00:14:37,759 --> 00:14:41,559
If we speak about other frameworks like cheap concurrent mode

262
00:14:41,600 --> 00:14:45,759
for example, and other stuff, we basically leverage the same

263
00:14:45,759 --> 00:14:48,679
potential ship the same technology so that we can also

264
00:14:48,679 --> 00:14:52,600
ship these concurrent strategies and so on. But the second part,

265
00:14:52,639 --> 00:14:54,120
and this is what I want to spress all this.

266
00:14:54,639 --> 00:14:58,759
We also focus on development experience. So I want to

267
00:14:58,759 --> 00:15:01,919
pick up your exemples on where you said, Well, the

268
00:15:01,960 --> 00:15:05,480
tools that you ship, like the push pipe, the less directive,

269
00:15:05,720 --> 00:15:09,360
the RX four that we will ship in the near future,

270
00:15:09,879 --> 00:15:12,759
they only pay off for me if I if I'm

271
00:15:12,799 --> 00:15:16,159
fully reactive, if I really use only in GRX or

272
00:15:16,200 --> 00:15:20,679
any other state management tool, like in general, nearly any

273
00:15:20,720 --> 00:15:23,879
state management tool is push based and you use love

274
00:15:23,960 --> 00:15:26,320
at the moment, I would say no, it's not only

275
00:15:26,360 --> 00:15:29,240
because of that, it is in general like if you

276
00:15:29,279 --> 00:15:33,279
look at it from the develop experience perspective, you can say,

277
00:15:33,879 --> 00:15:37,679
are ex angular pays off whenever I have to mix

278
00:15:37,879 --> 00:15:42,639
imperative and reactive coding steps. Imperative is the stuff that

279
00:15:42,679 --> 00:15:45,879
we are all used to, like our object oriented, state

280
00:15:46,080 --> 00:15:52,159
driven mutable architecture that we run here, and the reactive

281
00:15:52,159 --> 00:15:55,440
approach is different. It has a lot of functional concepts

282
00:15:55,480 --> 00:15:58,039
in it and it is pushing values to you instead

283
00:15:58,039 --> 00:16:02,000
of you pulling them and or instead of calling set

284
00:16:02,080 --> 00:16:05,879
and get and as Angular ships a couple of things

285
00:16:05,919 --> 00:16:10,399
like the router forms, reactive forms, life cycle hooks and

286
00:16:10,440 --> 00:16:14,039
other stuff that are exposed as an observable or think

287
00:16:14,039 --> 00:16:17,320
about the easiest piece and event. The meter is basically

288
00:16:17,360 --> 00:16:20,600
a push based thing that you can take and subscribe

289
00:16:20,600 --> 00:16:23,399
on it, right, and you do that in Angler when

290
00:16:23,399 --> 00:16:26,159
you create an output binding, it is an event the meter,

291
00:16:26,240 --> 00:16:30,240
but internally it's just called subscribe on something like a subject.

292
00:16:30,320 --> 00:16:33,919
So you always have a mix of imperative and reactive

293
00:16:34,000 --> 00:16:38,200
programming styles. And the clutter and pain nowadays is that

294
00:16:38,279 --> 00:16:41,960
Angler does not provide proper glue. Whenever you have a

295
00:16:42,039 --> 00:16:45,840
router parameter that changes over time in a vivery tiny application,

296
00:16:46,480 --> 00:16:50,159
you end up to put the word subscribe somewhere. Then

297
00:16:50,200 --> 00:16:52,879
you end up in going to the life cycle hook

298
00:16:52,919 --> 00:16:55,240
on destroy and make sure you clean it up there.

299
00:16:55,600 --> 00:16:58,759
If you're lucky, you did not use any switch map,

300
00:16:58,879 --> 00:17:02,120
any higher or the flat operators that could even with

301
00:17:02,320 --> 00:17:06,039
their own destroy and mess up your application, introduce a

302
00:17:06,079 --> 00:17:09,039
memory leak like all that stuff could happen, and if

303
00:17:09,039 --> 00:17:12,119
you are even even if you're an expert, what you

304
00:17:12,319 --> 00:17:15,720
end up with in any tiny application that you write

305
00:17:15,880 --> 00:17:19,240
as soon as you touch any reactive partner angula, and

306
00:17:19,279 --> 00:17:21,200
there are plenty of them, as you know, like road

307
00:17:21,200 --> 00:17:24,839
the reactive forms. They say, you have to deal with

308
00:17:24,880 --> 00:17:28,920
that mix of imperative and reactive programming. You are forced

309
00:17:29,039 --> 00:17:32,599
to subscribe somewhere. You put a behavior subject here, you

310
00:17:32,680 --> 00:17:35,960
call next there. In the end, your application does not

311
00:17:36,119 --> 00:17:38,000
feel good. If you look at the code, it is

312
00:17:38,079 --> 00:17:39,240
always boiler plate.

313
00:17:39,480 --> 00:17:42,519
Speaker 4: I mean, if you're used to entry rigs, you know

314
00:17:42,519 --> 00:17:43,559
what I mean. We boiler plate.

315
00:17:43,640 --> 00:17:46,960
Speaker 5: You have to write so much code on top just

316
00:17:47,200 --> 00:17:49,720
make it working, and then you have to be aware

317
00:17:49,759 --> 00:17:51,440
of all the memory leaks, and then you have to

318
00:17:51,440 --> 00:17:52,799
be aware of the tearedon logic.

319
00:17:53,079 --> 00:17:57,240
Speaker 4: So what we say in our ex angular is never subscribe.

320
00:17:57,480 --> 00:18:02,440
Speaker 5: We ship basically tools that precisely define the one and

321
00:18:02,559 --> 00:18:05,000
only use case where it makes sense that you did

322
00:18:05,240 --> 00:18:08,079
that you subscribe to it. But even for those use cases,

323
00:18:08,440 --> 00:18:11,640
we ship tools that makes it irrelevant for you to

324
00:18:11,680 --> 00:18:12,680
think about subscribe.

325
00:18:12,759 --> 00:18:15,400
Speaker 4: You just like figure out what is your thing?

326
00:18:15,519 --> 00:18:17,720
Speaker 5: Is it stayed the side effect, and then you use

327
00:18:17,799 --> 00:18:21,519
either or state management helpers or side effect helpers, but

328
00:18:21,559 --> 00:18:24,920
they will take over all the clutter of subscription and

329
00:18:25,079 --> 00:18:27,880
thing for you and you can end up with a

330
00:18:28,000 --> 00:18:32,119
bdliner for basically any problem that would normally require at

331
00:18:32,200 --> 00:18:35,799
least seven lines with life cycles with clean up and

332
00:18:35,839 --> 00:18:38,200
so on and so forth. So I guess this is

333
00:18:38,279 --> 00:18:43,000
like independent of performance and change detection whatever, a huge

334
00:18:43,039 --> 00:18:46,519
benefit that you will start to laugh very quickly, like

335
00:18:46,559 --> 00:18:49,519
all the people that say, like, why not just trying

336
00:18:49,559 --> 00:18:53,079
it out for one tiny component? Want one tiny project,

337
00:18:53,079 --> 00:18:54,720
and then you will see how it goes. You will

338
00:18:54,880 --> 00:18:58,319
will really feel and realize what we did. I cannot

339
00:18:58,359 --> 00:19:01,119
imagine a single person that like cool, but that we'll

340
00:19:01,119 --> 00:19:02,000
not use it from no on.

341
00:19:02,119 --> 00:19:05,920
Speaker 4: They are really or much of a code reduction.

342
00:19:06,039 --> 00:19:08,960
Speaker 5: You can get how much safer it is to combine

343
00:19:09,000 --> 00:19:12,720
those technologies because life stycle are sorry, memory leaks and

344
00:19:12,799 --> 00:19:15,720
all the other stuff. The clutter, the boiler plate is gone.

345
00:19:16,400 --> 00:19:19,880
You can focus on your problem. You just focus on

346
00:19:20,000 --> 00:19:23,279
solving your problems and not on setting up any other

347
00:19:23,359 --> 00:19:24,920
of those boiler plate these things.

348
00:19:25,160 --> 00:19:27,920
Speaker 2: So let me back up just a minute, because we

349
00:19:27,960 --> 00:19:31,519
talked about kind of the zone JS approach and you

350
00:19:31,519 --> 00:19:34,880
know how that kind of climbs up your componentry, but

351
00:19:35,319 --> 00:19:39,519
we didn't really talk about how the push pipe setup works,

352
00:19:39,559 --> 00:19:41,240
like how does that work? Differently?

353
00:19:41,960 --> 00:19:44,680
Speaker 4: Nice things to trust that you that you brought it up.

354
00:19:44,880 --> 00:19:48,200
Speaker 5: Otherwise we don't get like stuff we started the small

355
00:19:48,240 --> 00:19:49,240
detwa of your list.

356
00:19:50,160 --> 00:19:53,039
Speaker 2: Yeah, we kind of got a little ahead of the conversation,

357
00:19:53,160 --> 00:19:56,319
which is fine because we're talking about a benefit and

358
00:19:56,720 --> 00:19:58,640
it's like, okay, you know, I get cleaner code, I

359
00:19:58,720 --> 00:20:01,160
might get better performance. There are a handful of things

360
00:20:01,160 --> 00:20:04,279
that I'm probably going to see that make it worth

361
00:20:04,480 --> 00:20:07,519
me considering going this way. But now I want to

362
00:20:07,519 --> 00:20:08,279
know what it looks like.

363
00:20:08,799 --> 00:20:12,440
Speaker 5: Yeah, the first experiment what we did, and this is

364
00:20:12,519 --> 00:20:15,119
also basically what is shipped in the n g r

365
00:20:15,400 --> 00:20:21,319
X repository under the Component package. I basically developed evening

366
00:20:21,359 --> 00:20:25,319
of last year a package for the INCHRX that was

367
00:20:25,359 --> 00:20:29,400
called Component. It's still online, and this package shipped two

368
00:20:29,640 --> 00:20:33,200
building blocks in a very rough and very sketchy way,

369
00:20:33,839 --> 00:20:38,279
the PUSHPIP and the leads directive. And you basically asked

370
00:20:38,359 --> 00:20:41,119
me about the push PIP, how does it work? So

371
00:20:41,160 --> 00:20:44,599
what I will do now is I will try to

372
00:20:44,720 --> 00:20:47,200
pull in the second term. From the beginning, I said

373
00:20:47,200 --> 00:20:51,119
there is pool and push based architecture. I hopefully managed

374
00:20:51,200 --> 00:20:55,640
to explain verbally without any slide how the change detection

375
00:20:55,720 --> 00:20:59,640
normally works and by you pull the changes down to you. Now,

376
00:20:59,759 --> 00:21:02,279
let me explain to you how it push based change

377
00:21:02,319 --> 00:21:06,319
detection could work. So imagine you have let's make it

378
00:21:06,359 --> 00:21:09,759
super simple and httper request in the middle of your

379
00:21:09,799 --> 00:21:12,759
componentry and you want to just render the result the

380
00:21:12,839 --> 00:21:16,079
least in the component. What you do normally is you

381
00:21:16,079 --> 00:21:20,000
you you say, I take this observable bay or the promise.

382
00:21:20,119 --> 00:21:22,359
It even works with promises, right, we don't have to

383
00:21:22,400 --> 00:21:25,000
talk our xts here. We can stick with a promise

384
00:21:25,039 --> 00:21:27,480
if it is easier, it works the same. We basically

385
00:21:27,519 --> 00:21:31,480
support anything it has a promise of this hdpurial cust.

386
00:21:31,559 --> 00:21:33,440
To plug it in a view, you use the acing

387
00:21:33,519 --> 00:21:36,759
PAP and then zoom. When the HD puri cust kicks in,

388
00:21:37,319 --> 00:21:40,240
it will do the magic like do the component dirty

389
00:21:40,319 --> 00:21:43,880
marking from the pushpap basically course mark for check. It

390
00:21:43,960 --> 00:21:46,759
will call mark few dirty for the parent, for the parent,

391
00:21:46,799 --> 00:21:48,880
for the parent for the work and it will again

392
00:21:49,480 --> 00:21:52,440
really render down the application. So with the acing PAP

393
00:21:52,839 --> 00:21:56,519
we are still in this pool based approach. A viperial

394
00:21:56,519 --> 00:21:59,200
clast emits. It ends up in the acing pap. As

395
00:21:59,400 --> 00:22:02,359
PAP says, go from here to the top and then

396
00:22:02,440 --> 00:22:05,759
re render everything to myself. Against that I can display

397
00:22:05,799 --> 00:22:09,960
the new state. So now imagine not no imagine, So

398
00:22:10,000 --> 00:22:14,000
now you maybe know that there are two change detection

399
00:22:14,119 --> 00:22:17,160
methods that you can call manually. There is mark for

400
00:22:17,160 --> 00:22:20,720
a check that I explained to you already, and there

401
00:22:20,759 --> 00:22:24,839
is also detect changes. I'm not sure if anybody of

402
00:22:24,920 --> 00:22:27,400
you knows that or used it.

403
00:22:27,440 --> 00:22:32,319
Speaker 4: Maybe a quick check. Did anybody of you ever use? Yeah? Many? Yeah,

404
00:22:32,680 --> 00:22:33,640
But why did you do that?

405
00:22:33,839 --> 00:22:40,480
Speaker 6: Maybe I did for complex calculation and after that a

406
00:22:40,640 --> 00:22:44,559
to us very by default on push the strategy. So

407
00:22:44,640 --> 00:22:47,519
once that done, then then very detect change so that

408
00:22:47,559 --> 00:22:49,559
it can be reflected on the resture.

409
00:22:50,240 --> 00:22:53,880
Speaker 5: So what detect changes does In your example that you

410
00:22:54,160 --> 00:22:59,440
sketched here, you call detect changes on the change detectorf

411
00:22:59,599 --> 00:23:03,480
of of one of those components in your case, the

412
00:23:03,559 --> 00:23:07,759
component that you had with push whatever you like, injected

413
00:23:07,799 --> 00:23:10,880
over dependency injection that change detect the rest and then

414
00:23:10,920 --> 00:23:14,200
you call it change detector rest dot detect changes. Right,

415
00:23:14,799 --> 00:23:20,359
And what happened was Angular only re evaluated this very

416
00:23:20,400 --> 00:23:24,480
single component and maybe their child components, but.

417
00:23:24,480 --> 00:23:26,400
Speaker 4: Not top to bottom. Correct.

418
00:23:27,000 --> 00:23:30,880
Speaker 5: Yeah, yes, So detect changes is a way how we

419
00:23:30,920 --> 00:23:34,720
can detect the changes re evaluate the template of only

420
00:23:34,880 --> 00:23:38,240
one single component and not the whole app. It's like

421
00:23:38,359 --> 00:23:42,880
local you have local explicit change detection. This is the

422
00:23:42,920 --> 00:23:47,240
stuff that React was doing ever since. In React you

423
00:23:47,240 --> 00:23:50,480
have set state. Whenever you call set state, the component

424
00:23:50,559 --> 00:23:54,720
will render. It will not automatically rerender when about eventually

425
00:23:54,799 --> 00:23:58,640
snofires will only render if we call set state. Right, So,

426
00:23:58,759 --> 00:24:02,799
detect changes is the first bridge to set state and React.

427
00:24:02,880 --> 00:24:07,480
It enables us to do explicit state management. So now

428
00:24:07,559 --> 00:24:10,759
imagine my use case where you have the HTDP request

429
00:24:11,000 --> 00:24:14,400
pluged to an as pipe in the template, and now

430
00:24:14,480 --> 00:24:18,799
imagine you create something that looks like the asing pipe

431
00:24:18,839 --> 00:24:23,440
but does something different internally. It will subscribe to the observably,

432
00:24:23,440 --> 00:24:27,720
it will receive the newer value, but instead of calling

433
00:24:27,799 --> 00:24:31,240
for every new value, mark for a check and re

434
00:24:31,240 --> 00:24:35,000
render the whole component path from the top to the bottom.

435
00:24:35,920 --> 00:24:39,519
If you call detect changes, it will only re evaluate

436
00:24:39,599 --> 00:24:40,680
these very components.

437
00:24:40,759 --> 00:24:41,000
Speaker 4: Right.

438
00:24:41,359 --> 00:24:46,079
Speaker 5: So the pushpap, basically next to a little bit nicer

439
00:24:46,359 --> 00:24:50,839
management of internals and typing and so on, has exactly

440
00:24:50,880 --> 00:24:53,920
the same as the AS pipe, but with local change detection.

441
00:24:54,000 --> 00:24:57,880
It calls detect changes under the hood internally. So this

442
00:24:58,039 --> 00:25:01,319
is what the pushpipe does. And if you got that,

443
00:25:02,519 --> 00:25:06,160
I want to basically go one step further and I

444
00:25:06,240 --> 00:25:09,799
want to stress out the down sets of the push pep.

445
00:25:10,599 --> 00:25:13,680
Why what you have to do to get all the

446
00:25:13,720 --> 00:25:18,640
downsids away? And then the should lead obviously to I

447
00:25:18,720 --> 00:25:21,079
hit a punchline when I started to talk about the

448
00:25:21,240 --> 00:25:23,839
push pipe and then so ness Angla and all the

449
00:25:23,880 --> 00:25:25,839
new stuff that that is now on the road map.

450
00:25:26,160 --> 00:25:29,039
I had the punchline that was, the acing pipe is boring,

451
00:25:30,359 --> 00:25:32,400
really cool. I love it a lot. The asing pipe

452
00:25:32,480 --> 00:25:35,359
is boring, and I hope that when I explained by

453
00:25:35,400 --> 00:25:39,400
push pep is has downsides, I can also use my

454
00:25:39,480 --> 00:25:41,920
new punchline, the push pipe is boring, and I can

455
00:25:42,000 --> 00:25:44,880
pitch to you why you should use instead of the

456
00:25:44,920 --> 00:25:49,039
push pep, the rx lent directive, for example. Would this

457
00:25:49,519 --> 00:25:53,160
fit to your schedule, to your agenda of our discussion?

458
00:25:54,000 --> 00:25:58,400
Speaker 2: Oh yes, especially from the idea that, hey, look, you

459
00:25:58,440 --> 00:26:01,559
know there's there's this option, which is the deep op option. Okay,

460
00:26:01,599 --> 00:26:04,160
now there's this push path option, but hey, there's this

461
00:26:04,240 --> 00:26:05,079
other option.

462
00:26:04,880 --> 00:26:06,759
Speaker 3: That may be better in certain circumstances.

463
00:26:06,880 --> 00:26:10,480
Speaker 2: I like, I like giving people kind of the idea

464
00:26:10,559 --> 00:26:12,039
of the way they want to approach.

465
00:26:11,759 --> 00:26:14,200
Speaker 4: This very good broad context.

466
00:26:14,519 --> 00:26:18,440
Speaker 5: So we discussed what Markfurcheck is doing in the asam pap.

467
00:26:19,279 --> 00:26:21,880
We know that the push PIP is calling detec changes

468
00:26:21,920 --> 00:26:26,160
internally and that it will only re evaluate this very component. Now,

469
00:26:26,960 --> 00:26:29,960
let's talk about some technical problems that we had to

470
00:26:30,039 --> 00:26:33,000
solve with the pushpap, and this will automatically lead to

471
00:26:33,039 --> 00:26:36,119
the third option, which I believe is.

472
00:26:36,079 --> 00:26:38,640
Speaker 4: The most beautiful and efficient way. How you can deal

473
00:26:38,680 --> 00:26:38,920
with that?

474
00:26:40,000 --> 00:26:44,759
Speaker 5: So imagine you have a template with not one pushpap inside,

475
00:26:44,799 --> 00:26:48,960
but ten, and you admit to our ten PEPs the

476
00:26:49,079 --> 00:26:49,799
same or a.

477
00:26:49,799 --> 00:26:53,200
Speaker 4: Different value, it doesn't matter in the same tick.

478
00:26:53,680 --> 00:26:58,279
Speaker 5: Like the browser has executes code codeed synchronously and in

479
00:26:58,319 --> 00:27:01,720
the same tick he could execute multiple of those aswing

480
00:27:01,799 --> 00:27:05,160
pipe course sorry, pushpipe course. And what we would end

481
00:27:05,240 --> 00:27:09,319
up in is calling detect changes for those ten push

482
00:27:09,400 --> 00:27:13,880
pips ten times in a row on the same component.

483
00:27:14,279 --> 00:27:18,200
Even if calling it one time would be enough because okay,

484
00:27:18,359 --> 00:27:22,519
I changed ten different parts in my template, but one

485
00:27:22,559 --> 00:27:25,599
time reevaluating all the ten parts is enough. I don't

486
00:27:25,599 --> 00:27:28,839
need to ten times to re evaluate all the ten things.

487
00:27:29,240 --> 00:27:34,880
Is it already like something that you understand? Okay, So

488
00:27:35,359 --> 00:27:38,880
we would call it ten times in a row and

489
00:27:39,880 --> 00:27:42,160
maybe and now we start to get nerdy. Now we

490
00:27:42,240 --> 00:27:46,039
start to get nerdy. So do you know the flag

491
00:27:46,200 --> 00:27:49,680
where you can configure zone that is called Angi's zone

492
00:27:50,000 --> 00:27:54,160
event core lasting, and she's one event colasting. Did you

493
00:27:54,240 --> 00:27:56,039
ever hear that event corlasting?

494
00:27:57,000 --> 00:28:00,000
Speaker 4: Okay? Corlasting. Colasting is a concept.

495
00:28:00,799 --> 00:28:05,319
Speaker 5: I introduced it already back then in the INTERIR expectage.

496
00:28:05,480 --> 00:28:09,440
But as I said, this was a very minimal approach,

497
00:28:09,640 --> 00:28:13,799
minimal implementation proof of concept which does not respect all

498
00:28:13,839 --> 00:28:14,039
of that.

499
00:28:14,119 --> 00:28:16,240
Speaker 4: But even back then it was already the problem.

500
00:28:16,640 --> 00:28:21,680
Speaker 5: So we faced it that it took longer, ever slower

501
00:28:22,359 --> 00:28:26,039
if we have multiple push paps because all the synchronous things.

502
00:28:26,200 --> 00:28:30,799
So collasting technically, what does it do? Collasting tells me

503
00:28:31,079 --> 00:28:35,039
or it helps me to say, I want to wrap

504
00:28:35,119 --> 00:28:39,039
the detect changes, call in another helper that I can

505
00:28:39,079 --> 00:28:43,279
call a hundred a million times in a row, and

506
00:28:43,359 --> 00:28:47,440
it will not do anything until a certain time period

507
00:28:47,519 --> 00:28:48,160
has passed.

508
00:28:48,839 --> 00:28:52,440
Speaker 4: So imagine within the next tick browser tick.

509
00:28:52,880 --> 00:28:55,960
Speaker 5: Let's make it easier because browser ticks and execution context,

510
00:28:56,039 --> 00:28:58,839
let's talk about milliseconds. It's not correct, but visually you

511
00:28:58,839 --> 00:29:01,960
can think about it easier. So let's say you write

512
00:29:02,000 --> 00:29:06,720
a function that says render component and you can call

513
00:29:06,799 --> 00:29:10,599
that function a million of times in a row. It

514
00:29:10,640 --> 00:29:14,000
will wait for the duration of five to ten milliseconds,

515
00:29:14,759 --> 00:29:19,000
and only after that duration it will say okay render

516
00:29:19,039 --> 00:29:22,480
component in the last ten milliseconds was called a million

517
00:29:22,480 --> 00:29:28,160
of times. I know that reevaluating my component would only

518
00:29:28,200 --> 00:29:31,000
pay off one time then all the new data is done,

519
00:29:31,160 --> 00:29:33,480
So after ten milliseconds, I don't do it a million

520
00:29:33,519 --> 00:29:34,039
of times.

521
00:29:34,319 --> 00:29:38,039
Speaker 4: I just realized that it was called one or many

522
00:29:38,079 --> 00:29:41,960
times and only call it once. So I have a timeframe.

523
00:29:42,039 --> 00:29:45,039
Speaker 5: I have a time frame in which I could high

524
00:29:45,079 --> 00:29:49,319
frequently call a metod and it will not execute right away.

525
00:29:49,480 --> 00:29:53,599
It will wait until multiple things settle, I can merge,

526
00:29:53,680 --> 00:29:57,519
I can coll less them together into one single call,

527
00:29:57,960 --> 00:30:00,720
and then call it only once. And this was our

528
00:30:00,839 --> 00:30:06,759
first speak hiting performance. We demonstrated that introducing these coalescing

529
00:30:06,839 --> 00:30:11,240
strategy on component level gave us a huge boost in

530
00:30:11,440 --> 00:30:15,319
performance and was like the first sign that we are

531
00:30:15,400 --> 00:30:17,680
really on the right track, that we can really like

532
00:30:18,240 --> 00:30:22,599
hit the target, provide tools, provide technology stack that is

533
00:30:22,640 --> 00:30:25,680
completely different than what we are used to do in Angular.

534
00:30:26,279 --> 00:30:30,279
We have the same well known mind mindset or meta model,

535
00:30:30,720 --> 00:30:34,480
mental model like types and so on or directives, so

536
00:30:34,519 --> 00:30:37,880
we tried to bake the new mental model into directives

537
00:30:37,880 --> 00:30:42,920
and linked to the easier things, but still we had

538
00:30:43,240 --> 00:30:47,000
way more thoughts and when you think about the tooche paps.

539
00:30:47,039 --> 00:30:50,000
So what we did is we went down from reevaluating

540
00:30:50,039 --> 00:30:51,799
the full component dirty path.

541
00:30:52,960 --> 00:30:54,920
Speaker 4: We switched from that approach to only.

542
00:30:54,759 --> 00:30:58,720
Speaker 5: Reevaluating one single component, a huge difference.

543
00:30:58,799 --> 00:31:01,359
Speaker 4: Already we had more thoughts.

544
00:31:01,880 --> 00:31:05,279
Speaker 5: Think about the following use case again, this component with

545
00:31:05,359 --> 00:31:09,000
ten push paps inside, but this time not only the

546
00:31:09,160 --> 00:31:12,200
ten of them change at the same time, but only

547
00:31:12,920 --> 00:31:15,279
one of them changes at the same time. So what

548
00:31:15,319 --> 00:31:17,880
you would do is you would go to your component

549
00:31:17,960 --> 00:31:22,200
template and you would re evaluate the one thing that changed,

550
00:31:22,240 --> 00:31:26,240
and all the other nine components are sorry template expressions too,

551
00:31:26,640 --> 00:31:30,759
because you cannot really evaluate a template partially only there

552
00:31:31,079 --> 00:31:33,680
or only only here, you know what I mean. If

553
00:31:33,720 --> 00:31:37,920
you really evaluate the template, any single template expression in

554
00:31:38,000 --> 00:31:41,000
this template will get re evaluated. So we had a

555
00:31:41,000 --> 00:31:44,480
lot of thoughts on that, and we basically came up

556
00:31:44,519 --> 00:31:48,880
with the idea that we can leverage already existing building

557
00:31:48,960 --> 00:31:51,759
blocks in Anglo. I'm not sure if you're familiar with

558
00:31:52,000 --> 00:31:56,440
structural directives, but I'm sure you are familiar with angie

559
00:31:56,519 --> 00:32:00,000
if and angie four for example, Right, this is stuff

560
00:32:00,119 --> 00:32:03,640
we know, so let me give you a little bit

561
00:32:03,640 --> 00:32:06,240
of a hint. What is happening. Let's talk about and

562
00:32:06,519 --> 00:32:09,160
if it is small, it is simple and she if

563
00:32:09,319 --> 00:32:13,920
helps you to display a snippet of HTML only if

564
00:32:13,960 --> 00:32:17,440
the condition is true. If not, you either hide it

565
00:32:18,000 --> 00:32:20,680
or you show a fourback template for the force is state.

566
00:32:20,839 --> 00:32:22,920
Speaker 4: Right, And those.

567
00:32:22,680 --> 00:32:29,039
Speaker 5: Two templates internally are managed as embedded view. So in Angola,

568
00:32:29,319 --> 00:32:31,720
the small template snippets that you show and tie it

569
00:32:32,240 --> 00:32:35,960
are maintained internally in something that is called embedded view.

570
00:32:36,599 --> 00:32:40,240
And if you reverse engineer or read the code the

571
00:32:40,319 --> 00:32:44,319
source code of embedded view, you will realize an embedded

572
00:32:44,400 --> 00:32:49,640
view also has a detect changes method. So not only

573
00:32:49,720 --> 00:32:54,119
the components change detectors has a change detection method which

574
00:32:54,359 --> 00:33:00,000
which will re evaluate everything. But there's small, tiny temper

575
00:33:00,200 --> 00:33:04,200
snippets inside of structural directives also have the same logic

576
00:33:04,599 --> 00:33:08,200
and you can call change detection only there for.

577
00:33:08,279 --> 00:33:09,480
Speaker 4: This tiny snippet.

578
00:33:10,519 --> 00:33:14,359
Speaker 5: So this was our first step in where we said, like, okay,

579
00:33:14,839 --> 00:33:18,160
this could be an option for us. This could be

580
00:33:18,200 --> 00:33:21,960
something where we should investigate more research work and see

581
00:33:22,000 --> 00:33:24,799
if we can manage to do it somehow better in

582
00:33:24,839 --> 00:33:30,039
that way, and the outcome was tremendous. So what we

583
00:33:30,079 --> 00:33:34,000
did when we were done with our Tooche pap researchers,

584
00:33:34,039 --> 00:33:36,960
we already shipped our ex let which already had this

585
00:33:37,519 --> 00:33:40,680
embedded view inside, obviously, because how else should you create

586
00:33:40,720 --> 00:33:44,720
an structural directive without using Angular's building blocks, right, so

587
00:33:45,240 --> 00:33:47,839
we have that in place already. What we did is

588
00:33:48,960 --> 00:33:52,359
we to figure out the way on how we can

589
00:33:52,440 --> 00:33:57,039
make only this very peace re rendering. And it is

590
00:33:57,119 --> 00:34:00,920
cool because we already had observers in place, already knew

591
00:34:00,960 --> 00:34:05,599
how to structure and architect applications in a very nice

592
00:34:05,640 --> 00:34:09,800
and eligent way with reactive approaches, like in a way

593
00:34:09,840 --> 00:34:12,760
where you don't need to learn all the overheads but

594
00:34:12,920 --> 00:34:15,079
just focus on their problems, the stuff that I talked

595
00:34:15,119 --> 00:34:18,840
at the beginning. And we plugged basically an observable into

596
00:34:18,840 --> 00:34:23,320
a structural directive and said we will only call detect

597
00:34:23,400 --> 00:34:27,239
changes on this embedded view when the observable that I

598
00:34:27,400 --> 00:34:30,079
connected to the structure directive is firing.

599
00:34:30,559 --> 00:34:37,159
Speaker 4: Oh interesting, anti drag by track? Why is a method

600
00:34:37,159 --> 00:34:40,119
that you use in RX four? Sorry? Chief?

601
00:34:41,599 --> 00:34:45,119
Speaker 5: What I speak about is like the underlying building blocks

602
00:34:45,119 --> 00:34:48,840
in Angola in angy four in ngive in and she switched.

603
00:34:48,880 --> 00:34:53,920
There are always two things that you have to maintain internally.

604
00:34:54,039 --> 00:34:57,239
One thing is the embedded view and the other thing

605
00:34:57,320 --> 00:35:01,920
is the few container reference. Every structural directive maintains a

606
00:35:02,000 --> 00:35:05,719
view container, may it be a container for the list,

607
00:35:05,800 --> 00:35:08,639
a container for the EVLS template, whatever, and then the

608
00:35:08,679 --> 00:35:11,119
templates themselves embedded views.

609
00:35:11,639 --> 00:35:14,840
Speaker 4: And we basically, my battery starts to get low.

610
00:35:15,239 --> 00:35:19,320
Speaker 5: And we basically managed to figure out a way how

611
00:35:19,400 --> 00:35:23,239
to go on with that. I tried to explain now

612
00:35:24,000 --> 00:35:27,199
the other down set that we figured out in that set.

613
00:35:27,840 --> 00:35:32,239
So when we figured out that we could connect it,

614
00:35:32,599 --> 00:35:36,679
the next problem was okay, now we were like April.

615
00:35:36,719 --> 00:35:41,159
Instead of re evaluating ten things, we only reavailed one thing.

616
00:35:41,280 --> 00:35:43,800
So we even made I guess this was the biggest

617
00:35:43,840 --> 00:35:45,639
step in performance we will ever make.

618
00:35:47,079 --> 00:35:49,440
Speaker 3: All that makes sense. You only have to do the

619
00:35:49,480 --> 00:35:50,880
work once isstead of ten times.

620
00:35:50,920 --> 00:35:54,199
Speaker 4: So yes, and don't you don't consider a component. You

621
00:35:54,239 --> 00:35:56,039
only consider bond expression.

622
00:35:56,719 --> 00:36:00,519
Speaker 5: But if you have a big application, it would happened

623
00:36:00,559 --> 00:36:05,679
that again ten expressions across the whole app would fire

624
00:36:05,719 --> 00:36:08,800
at the same time, right, and you can never know

625
00:36:09,199 --> 00:36:13,400
if it happens or not. It's impossible to like predict.

626
00:36:14,199 --> 00:36:17,800
So what we did is we introduced basically notion of

627
00:36:17,840 --> 00:36:22,000
the frame budget. If you know, like bad applications always

628
00:36:22,000 --> 00:36:24,519
have frame drops. Frame drops means they stuck, they have

629
00:36:24,679 --> 00:36:27,559
changy scrolling. This is called a frame drop, not a

630
00:36:27,599 --> 00:36:31,519
good frame rate. And we managed to tell Angular you

631
00:36:31,920 --> 00:36:35,800
do all the rendering work, but if you're in progress

632
00:36:35,800 --> 00:36:39,079
of rendering and you realize that the budget of the

633
00:36:39,159 --> 00:36:42,159
current frame is close to the frame drop, you stop,

634
00:36:42,519 --> 00:36:45,480
You give the browser time to breathe, and then you

635
00:36:45,559 --> 00:36:48,280
go on with the next rendering package. And in this

636
00:36:48,360 --> 00:36:52,599
way we basically were able to introduce cutting edge future

637
00:36:52,639 --> 00:36:56,400
technology right away that then can run now in Angular

638
00:36:56,599 --> 00:37:00,360
and it's doing the identical stuff as React concurrent mode

639
00:37:00,400 --> 00:37:03,880
is doing. Like the secret behind real concurrent mode. And

640
00:37:03,920 --> 00:37:08,960
why you have that highly efficient and highly reactive interactive

641
00:37:09,039 --> 00:37:13,119
user interfaces is they all have notion of frame budget

642
00:37:13,119 --> 00:37:16,639
when they render and the browser we never freeze.

643
00:37:17,239 --> 00:37:19,440
Speaker 4: And this is what we maintained. What we accomplished.

644
00:37:19,760 --> 00:37:24,719
Speaker 5: We accomplished change detection in Angular that will never make

645
00:37:24,760 --> 00:37:25,719
your app freeze.

646
00:37:26,159 --> 00:37:28,760
Speaker 4: Isn't that amazing? Yeah? Yeah, yeah, that's cool.

647
00:37:29,400 --> 00:37:31,760
Speaker 2: Now I want to go see because whenever I hear this,

648
00:37:31,840 --> 00:37:34,320
I'm just like, Okay, let's let's see if we can

649
00:37:34,400 --> 00:37:36,280
break this right. I want to write some script that

650
00:37:36,440 --> 00:37:38,559
just goes and like grabs a whole bunch of stuff

651
00:37:38,599 --> 00:37:42,000
and then shakes it and dumps it out and tries

652
00:37:42,039 --> 00:37:44,480
to figure.

653
00:37:43,599 --> 00:37:46,480
Speaker 4: We did good issues. We did good issues and good research.

654
00:37:46,679 --> 00:37:49,760
Speaker 5: If you look in the rx Angular Repository issue number

655
00:37:49,840 --> 00:37:53,800
three hundred and four, we'll show you how we implemented

656
00:37:53,920 --> 00:37:56,559
all the concepts that I explained to you now in

657
00:37:57,239 --> 00:37:59,559
Angy four. Like we don't call it Angie four, we

658
00:37:59,639 --> 00:38:04,760
call it are export. But we basically managed to introduce

659
00:38:04,840 --> 00:38:09,000
all those technologies in least trender rings like sibling components.

660
00:38:09,679 --> 00:38:13,320
This is the hardest problem you will face in pretty

661
00:38:13,400 --> 00:38:17,400
much any front and framework, how to render a list

662
00:38:17,719 --> 00:38:19,599
of I don't know a lot of things that are

663
00:38:19,639 --> 00:38:24,480
costly after another without freezing the browser. So this is

664
00:38:24,480 --> 00:38:26,400
stuff you can check out on and you see how

665
00:38:26,440 --> 00:38:29,519
we researched, what we implemented, what the measurements are. We

666
00:38:29,599 --> 00:38:34,800
basically measure everything. We do measures, we do statistics, we

667
00:38:34,920 --> 00:38:38,159
compare them to other approaches, and we really ship and

668
00:38:38,320 --> 00:38:42,119
aim to ship cutting edge high performance stuff that on

669
00:38:42,239 --> 00:38:46,119
top also brings a very nice developer experience. How do

670
00:38:46,159 --> 00:38:49,199
you measure that? Well, we do it in the most

671
00:38:49,239 --> 00:38:52,400
accurate way we can. We basically take the chrome left

672
00:38:52,440 --> 00:38:57,360
tours and we measure Brander performance in flame charts milliseconds.

673
00:38:57,400 --> 00:39:01,239
We see how the recalculation is. Do we see which

674
00:39:01,440 --> 00:39:05,400
scripting parts in the whole process take more or less time?

675
00:39:05,719 --> 00:39:09,960
And our hard numbers are basically milliseconds milliseconds and how.

676
00:39:09,880 --> 00:39:11,320
Speaker 4: Stressed the browser is.

677
00:39:11,679 --> 00:39:14,280
Speaker 5: In the issues three hundred and four in our ex

678
00:39:14,239 --> 00:39:17,559
Angular pository you can see the different We make screenshots

679
00:39:17,599 --> 00:39:20,760
from the identical use case and we screenshot that like

680
00:39:20,920 --> 00:39:23,920
angle a native way and our way, and you really

681
00:39:24,039 --> 00:39:27,880
visually see where in that which interactions we measured, like

682
00:39:27,960 --> 00:39:31,440
four different interactions, where and how it will pay off.

683
00:39:31,920 --> 00:39:36,159
And it is really very accurate and and we'll give

684
00:39:36,239 --> 00:39:39,159
a good prediction of what you can assume if you

685
00:39:39,239 --> 00:39:41,400
use this technology in your application.

686
00:39:41,800 --> 00:39:43,360
Speaker 3: So how do I plug it into my app?

687
00:39:43,639 --> 00:39:47,559
Speaker 5: You just install our ex Angular CDK, our ex angular template,

688
00:39:47,599 --> 00:39:49,920
and then you use the RX four, the RX lat

689
00:39:50,400 --> 00:39:53,280
the push PAP which I would not really recommend as

690
00:39:53,280 --> 00:39:55,679
that directives are way more performance but still it will

691
00:39:55,679 --> 00:39:57,800
be a little bit better, and you just use them

692
00:39:57,840 --> 00:40:01,880
in your template. It's a bit more advanced. Like you

693
00:40:01,960 --> 00:40:04,760
don't have to change any mindset. Go to your code.

694
00:40:05,000 --> 00:40:07,519
If you see NG four, replace it with RX four.

695
00:40:07,599 --> 00:40:10,519
If you see Angie effect with the acing path, replace

696
00:40:10,559 --> 00:40:11,440
it with the rx LT.

697
00:40:12,000 --> 00:40:14,840
Speaker 4: If you have an IF, replace it with X. If

698
00:40:15,119 --> 00:40:17,960
you don't have to change your mindset or code a lot.

699
00:40:18,280 --> 00:40:20,679
Speaker 5: If you like it, you can also say okay, I

700
00:40:20,800 --> 00:40:24,599
understand also the technical internals there, and I want to

701
00:40:24,639 --> 00:40:28,519
boost performance somewhere else. Then you can also take scheduling

702
00:40:28,599 --> 00:40:32,400
techniques and other observable helpers that we created for you,

703
00:40:32,760 --> 00:40:35,639
and you can tweak the performance of ng RX, of

704
00:40:35,679 --> 00:40:39,239
YOURGDP rec quest, of your Global State management like we can. Basically,

705
00:40:39,800 --> 00:40:42,800
we have a lot of building blocks that leverages really

706
00:40:42,880 --> 00:40:45,800
expertise knowledge in a very easy way that you can

707
00:40:45,920 --> 00:40:49,079
plug in too if you understand it into multiple different

708
00:40:49,119 --> 00:40:50,039
other libraries too.

709
00:40:50,239 --> 00:40:52,320
Speaker 3: Gotcha, so you said we were going to get the

710
00:40:52,440 --> 00:40:53,000
RX LAT.

711
00:40:53,440 --> 00:40:57,280
Speaker 5: Yes, RX lat and RX four are the things that

712
00:40:57,360 --> 00:41:00,920
we should discuss. Those are the structural directive that I explained,

713
00:41:01,000 --> 00:41:04,000
Like RX leat is what I would suggest if you

714
00:41:04,039 --> 00:41:06,679
say I'm interested in rx angular. What is the pushpipe?

715
00:41:06,719 --> 00:41:10,480
I would say the pushpipe is boring. Check out rx

716
00:41:10,559 --> 00:41:15,960
leat rx let is the structural directive that enables you

717
00:41:16,079 --> 00:41:20,320
to in one template only enable this one single template

718
00:41:20,360 --> 00:41:24,079
expression and not all other temples expressions in the same

719
00:41:24,079 --> 00:41:28,199
template like RX four arex lat x if all those

720
00:41:28,239 --> 00:41:33,480
structural directors that be ship should encapsulate the angle of

721
00:41:33,559 --> 00:41:38,079
mindset and ship it with all the performance impact improvements

722
00:41:38,159 --> 00:41:38,800
under the hood.

723
00:41:39,039 --> 00:41:41,599
Speaker 4: Easy to use, very high in impact.

724
00:41:42,159 --> 00:41:45,119
Speaker 3: Nice. So you just pull in the library and then

725
00:41:45,119 --> 00:41:47,000
you just use rx lat instead of.

726
00:41:47,840 --> 00:41:50,800
Speaker 5: Instead of angie if asinkg, or you use the RX

727
00:41:50,800 --> 00:41:52,480
four instead of ANGI four or that.

728
00:41:53,320 --> 00:41:55,400
Speaker 4: It's like stuff that is really easy to do in

729
00:41:55,440 --> 00:41:56,800
your application. You can go there.

730
00:41:56,880 --> 00:42:00,320
Speaker 5: It is like two characters change and the you will

731
00:42:00,320 --> 00:42:03,079
have your benefit. If you like it, you can adopt

732
00:42:03,159 --> 00:42:05,679
your architecture a little bit more. You will realize you

733
00:42:05,719 --> 00:42:07,800
can delete a lot of code now. If you use

734
00:42:08,119 --> 00:42:11,519
the state package, for example, it tells you to shrink

735
00:42:11,599 --> 00:42:16,079
down local and global composed state management to like hundreds

736
00:42:16,079 --> 00:42:19,440
of lines and like from hundreds of lanes down to

737
00:42:19,840 --> 00:42:20,440
a very.

738
00:42:20,239 --> 00:42:24,320
Speaker 4: Few and those are things that you can use the

739
00:42:24,360 --> 00:42:24,840
library for.

740
00:42:25,519 --> 00:42:27,960
Speaker 2: Very cool and I guess it all just tests out

741
00:42:28,519 --> 00:42:30,719
the same way. Like if I'm testing my code, I

742
00:42:30,760 --> 00:42:33,719
could just swap these out. It does really so.

743
00:42:33,719 --> 00:42:36,599
Speaker 4: For testing said we have similar strategies.

744
00:42:37,039 --> 00:42:39,719
Speaker 5: The thing is our rendering is a synchronous and is

745
00:42:39,800 --> 00:42:43,239
chunk and you maybe know that a synchronous code is

746
00:42:43,239 --> 00:42:46,079
not that easy to test, so we say cool when

747
00:42:46,119 --> 00:42:49,480
you write tests there there it is. You have one

748
00:42:49,559 --> 00:42:53,079
global configuration that tails the library. Look, I'm in a

749
00:42:53,119 --> 00:42:56,199
testing set set up. Now keep all the performance part

750
00:42:56,599 --> 00:43:00,079
do it's synchronous, even if it is lower, but the

751
00:43:00,119 --> 00:43:02,199
testing of the library will work like a chance.

752
00:43:02,440 --> 00:43:06,119
Speaker 4: Just switch the strategy to testing strategy and then you're

753
00:43:06,159 --> 00:43:09,920
able to run your test against gotcha. Yeah that's cool. Yeah,

754
00:43:10,039 --> 00:43:11,440
it's what trying wants.

755
00:43:12,599 --> 00:43:15,400
Speaker 6: I think everybody will love like the easiest, but they

756
00:43:15,519 --> 00:43:18,880
just go to Vesco to starch ENGI replacing and that's

757
00:43:18,880 --> 00:43:19,440
what works.

758
00:43:20,079 --> 00:43:21,000
Speaker 4: This is how you burke.

759
00:43:21,119 --> 00:43:24,440
Speaker 5: Yes, you will encounter some problems, of course, because we

760
00:43:24,480 --> 00:43:26,440
should be with all the performance.

761
00:43:26,199 --> 00:43:28,079
Speaker 4: Improvements on the default.

762
00:43:28,599 --> 00:43:30,840
Speaker 5: So if you're running some problems and you don't want

763
00:43:30,880 --> 00:43:33,039
to understand why there is a problem, you go to

764
00:43:33,079 --> 00:43:37,639
this very component and switch the strategy to something that

765
00:43:37,679 --> 00:43:39,159
we coor native is.

766
00:43:39,679 --> 00:43:42,079
Speaker 2: I think that's battery going out. Yeah, let's go and

767
00:43:42,119 --> 00:43:45,440
do some picks and just start wrapping up. It pays

768
00:43:45,480 --> 00:43:48,119
on in four minutes. You can do picks too, Okay,

769
00:43:48,119 --> 00:43:49,679
so I'll start Yeah, go ahead.

770
00:43:50,119 --> 00:43:53,079
Speaker 6: Yeah, So today again I will pick a book that

771
00:43:53,280 --> 00:43:56,880
is from Robin Summer. I think this one is also

772
00:43:56,880 --> 00:44:01,639
a famous one. Is the five Club. It's the one

773
00:44:01,679 --> 00:44:04,360
thing I get it from there. If you want to

774
00:44:04,400 --> 00:44:08,400
do something before it thought hit to hits to your mind,

775
00:44:08,800 --> 00:44:12,280
let's do it that it will not no negative thoughts.

776
00:44:12,480 --> 00:44:15,440
Speaker 4: You know. That's the best thing I got from that book.

777
00:44:15,559 --> 00:44:17,360
I think that's the pick for the day.

778
00:44:17,639 --> 00:44:20,079
Speaker 3: Super all right, Sonny, do you have some picks?

779
00:44:20,159 --> 00:44:21,519
Speaker 4: I'm thinking, I'm thinking.

780
00:44:21,599 --> 00:44:24,679
Speaker 7: I'm thinking I really don't have any picks today, apart

781
00:44:24,679 --> 00:44:26,719
from the fact that I just want to watch France

782
00:44:26,760 --> 00:44:29,000
in Germany play and I also get to go to

783
00:44:29,079 --> 00:44:33,360
jiu jitsu later on with the grand master of my

784
00:44:33,840 --> 00:44:36,199
judo actually coming in to train us today.

785
00:44:36,320 --> 00:44:40,360
Speaker 3: So no picks from my side today. France versus Germany. Huh.

786
00:44:40,440 --> 00:44:41,760
Speaker 4: Yeah, that's a tough game.

787
00:44:42,719 --> 00:44:45,519
Speaker 2: Yeah, Which which cup is this? Or is it?

788
00:44:45,320 --> 00:44:48,239
Speaker 7: You is the this is the European champions So that

789
00:44:48,440 --> 00:44:52,440
is the country version of the Champions League, the European Cup.

790
00:44:52,559 --> 00:44:55,000
Speaker 2: Yeah, oh man, how did I miss that this was

791
00:44:55,039 --> 00:44:56,599
going on in America?

792
00:44:57,000 --> 00:44:59,800
Speaker 7: Everything is the World Cup over there or the World Championship.

793
00:45:01,400 --> 00:45:03,719
Speaker 2: Oh man, Well now now I have to go back

794
00:45:03,760 --> 00:45:05,639
and find some matches to watch.

795
00:45:06,039 --> 00:45:07,079
Speaker 3: Well, it only just started.

796
00:45:07,159 --> 00:45:08,800
Speaker 7: This is just today is going to be the last

797
00:45:09,159 --> 00:45:10,239
version of the first round.

798
00:45:10,280 --> 00:45:14,199
Speaker 3: So there's like two more rounds on. So you're pretty good.

799
00:45:14,519 --> 00:45:15,880
I'm in good shape. Okay, I got it.

800
00:45:15,920 --> 00:45:17,320
Speaker 2: I just have to figure out where I can watch

801
00:45:17,360 --> 00:45:20,079
it then here in the US because I love watching

802
00:45:20,119 --> 00:45:24,480
the Yeah, Champions League and yeah, the European Cup. I'll

803
00:45:24,480 --> 00:45:28,239
actually throw out a funny story about the European Champions

804
00:45:28,719 --> 00:45:33,039
not Champions League. Sorry that it's the UEFA the euro Cup.

805
00:45:33,519 --> 00:45:35,360
When I was I lived in Italy for two years.

806
00:45:35,400 --> 00:45:40,159
I was a missionary and while I was there, we

807
00:45:40,159 --> 00:45:42,400
we were out talking to people because that's what we did,

808
00:45:42,559 --> 00:45:45,159
just talk to people on the street. During the it

809
00:45:45,199 --> 00:45:48,840
was Italy versus France for the final. And this is

810
00:45:48,840 --> 00:45:52,480
back in like two thousand and so we're we're talking

811
00:45:52,519 --> 00:45:54,719
to people and we could not find anybody out on

812
00:45:54,719 --> 00:45:58,760
the street, Like the streets were totally dead during the game, right,

813
00:45:59,239 --> 00:46:02,280
And so we just went into a little cafe and

814
00:46:02,360 --> 00:46:05,119
just chatted with the people there while they watched the game.

815
00:46:05,960 --> 00:46:09,000
And yeah, we decided to head home before the game

816
00:46:09,079 --> 00:46:10,199
was over, right, because.

817
00:46:09,960 --> 00:46:11,119
Speaker 3: It went it went to.

818
00:46:11,280 --> 00:46:14,920
Speaker 2: Penalty kicks, and so we're walking down the street and

819
00:46:15,280 --> 00:46:17,880
we could tell what was going on because you know,

820
00:46:17,960 --> 00:46:20,280
France would go up and if they if they kicked

821
00:46:20,320 --> 00:46:22,880
it into the goal, you'd hear just echoing down the street.

822
00:46:23,280 --> 00:46:29,000
Oh right. And if Italy scored, then you'd hear cheering

823
00:46:29,079 --> 00:46:31,199
like out the windows, right because all their windows were

824
00:46:31,199 --> 00:46:34,280
open because it was warm, and it was really really funny.

825
00:46:34,400 --> 00:46:36,280
So we get about a block from home and the

826
00:46:36,280 --> 00:46:41,079
game ends and Italy wins, right, and anyway, all of

827
00:46:41,079 --> 00:46:44,000
a sudden, we can't even get across the street, well

828
00:46:44,360 --> 00:46:47,119
because everybody just went out and got in their cars

829
00:46:47,159 --> 00:46:49,519
and we're just driving around and waving flags and going

830
00:46:49,519 --> 00:46:53,519
crazy and we're just going homes right right over there.

831
00:46:54,119 --> 00:46:58,320
But yeah, I love me some soccer. I will watch soccer.

832
00:46:58,920 --> 00:47:05,119
Grives my wife crazy. But yeah, anyway, that's interesting. I'm

833
00:47:05,159 --> 00:47:07,199
going to throw out a couple more picks here, real

834
00:47:07,280 --> 00:47:08,639
quick way, what do I want to pick?

835
00:47:08,679 --> 00:47:09,880
Speaker 4: I got so much stuff to pick.

836
00:47:10,119 --> 00:47:13,760
Speaker 2: I've really been enjoying the book Psycho Cybernetics by Maxwell Maltz.

837
00:47:13,800 --> 00:47:15,400
I think I might have picked that last week or

838
00:47:15,480 --> 00:47:18,719
last time, but I'm really really digging it and it's

839
00:47:18,840 --> 00:47:21,599
just terrific. And then the other pick that I have,

840
00:47:21,679 --> 00:47:23,280
and this is this is something that I've kind of

841
00:47:23,280 --> 00:47:27,159
been getting into lately, is just between Zapier and Discourse,

842
00:47:28,159 --> 00:47:32,039
which is a forum software. I'm really getting a lot

843
00:47:32,079 --> 00:47:34,199
done with that kind of stuff. And then finally the

844
00:47:34,239 --> 00:47:36,320
last thing that I'm going to pick, and this, I'm

845
00:47:36,360 --> 00:47:38,280
just going to do a kind of a quick rundown

846
00:47:38,320 --> 00:47:40,239
of what it is. So when I need to get

847
00:47:40,280 --> 00:47:43,800
focused work done, what I'm finding is if I schedule

848
00:47:43,920 --> 00:47:46,639
a block of time. I wasn't so good at showing

849
00:47:46,719 --> 00:47:48,840
up for those right because I'd schedule it and the

850
00:47:48,880 --> 00:47:51,440
only person to hold me accountable was me. But I

851
00:47:51,519 --> 00:47:54,079
found this service called Focus Blocks. It's actually made by

852
00:47:54,079 --> 00:47:56,119
a friend of mine, and if you're interested, you can

853
00:47:56,119 --> 00:47:58,960
go to dev chat, dot tv slash focus and sign

854
00:47:59,039 --> 00:48:01,280
up for it if you want. But what it is

855
00:48:01,280 --> 00:48:02,880
is you go in and you sign up for a

856
00:48:02,920 --> 00:48:06,119
time on their calendar, and then you get on the

857
00:48:06,239 --> 00:48:09,800
zoom call, and while you're on the zoom call, you

858
00:48:10,239 --> 00:48:12,000
basically commit to what you're going to try and get

859
00:48:12,000 --> 00:48:14,880
done during that hour, and then you go ahead and

860
00:48:15,760 --> 00:48:17,960
you basically work on it, but you have your camera

861
00:48:18,039 --> 00:48:19,920
on so they can see you, so you have a

862
00:48:19,920 --> 00:48:21,960
little bit of accountability that you're not like getting up

863
00:48:21,960 --> 00:48:24,760
and wandering off. They tell you to set your phone asides,

864
00:48:24,880 --> 00:48:27,400
you're not playing around on it while you're supposed to

865
00:48:27,400 --> 00:48:28,920
be getting stuff done.

866
00:48:29,320 --> 00:48:30,960
Speaker 3: They start and stop.

867
00:48:30,679 --> 00:48:33,679
Speaker 2: Each hour with kind of some breathing exercises and stretches

868
00:48:33,679 --> 00:48:37,679
and stuff like that. And it has been Honestly, I

869
00:48:37,679 --> 00:48:39,679
think I've gotten more done over the last couple of

870
00:48:39,679 --> 00:48:41,920
weeks and I have in a month couple of months

871
00:48:41,920 --> 00:48:44,320
before that, just trying to keep everything running with dev chat,

872
00:48:44,400 --> 00:48:46,199
nott TV while having a full time job, which has

873
00:48:46,239 --> 00:48:51,400
been excruciating. But anyway, it's just been it's been awesome.

874
00:48:51,480 --> 00:48:55,280
I cannot tell you how impactful this has been over

875
00:48:55,280 --> 00:48:58,480
the last few weeks to just have this going, because yeah,

876
00:48:58,519 --> 00:49:00,599
if I have an hour or two to work, yeah,

877
00:49:00,639 --> 00:49:02,639
I'll schedule a couple of focus blocks and then I'll

878
00:49:03,079 --> 00:49:05,800
I'll just jump on and do it. And because I

879
00:49:05,800 --> 00:49:07,800
can kind of get into that rhythm, I get into

880
00:49:07,840 --> 00:49:10,960
the zone pretty fast and I just knock stuff out

881
00:49:11,000 --> 00:49:13,639
like crazy. So if you want to check it out

882
00:49:13,800 --> 00:49:17,800
dev Chat, not TV slash focus. The deal there is

883
00:49:17,840 --> 00:49:19,679
if you want to be on when I'm on, right,

884
00:49:19,679 --> 00:49:21,119
so you can wave at me on the camera. They

885
00:49:21,199 --> 00:49:23,079
keep you muted right so you don't bother each other

886
00:49:23,119 --> 00:49:25,119
while you're trying to work, but you can see other

887
00:49:25,159 --> 00:49:27,920
people on the camera. But yeah, while we're getting started,

888
00:49:27,960 --> 00:49:29,679
you can waiveh at me all the way back. I'm

889
00:49:29,800 --> 00:49:32,960
usually on early in the morning US time, so if

890
00:49:33,000 --> 00:49:35,360
you're in Europe, that's going to be in the afternoon

891
00:49:35,440 --> 00:49:38,880
or evening. So yeah, like six o'clock, seven o'clock in

892
00:49:38,920 --> 00:49:41,519
the morning is usually when I'm doing my focus blocks.

893
00:49:41,800 --> 00:49:44,920
I'm looking at doing some over my lunch break. I've

894
00:49:44,960 --> 00:49:46,880
been working from home, so it's not a big deal, right,

895
00:49:46,920 --> 00:49:49,960
I just turn and get on the other computer. But yeah,

896
00:49:50,039 --> 00:49:52,159
it's been amazing because I can just sit down and

897
00:49:52,199 --> 00:49:54,360
I can just get this focused work done. And sometimes

898
00:49:54,360 --> 00:49:56,719
they don't go quiet as planned, like this morning, I

899
00:49:56,760 --> 00:49:59,440
wind up troubleshooting WordPress instead of getting the work done

900
00:49:59,519 --> 00:50:02,159
that I needed get done because I needed WordPress to

901
00:50:02,159 --> 00:50:08,599
work and it wouldn't cooperate. But yeah, right, But most

902
00:50:08,639 --> 00:50:10,159
of the time, the rest of the time, I wind

903
00:50:10,239 --> 00:50:12,280
up getting just a ton of work done because I

904
00:50:12,360 --> 00:50:14,079
just get in the zone and just knock stuff out.

905
00:50:14,159 --> 00:50:15,519
So that's gonna be my pick.

906
00:50:15,920 --> 00:50:18,039
Speaker 7: I've got it open, I'm gonna I like the way

907
00:50:18,079 --> 00:50:20,719
it sounds. I'm gonna have a look at it.

908
00:50:20,880 --> 00:50:24,199
Speaker 2: Yeah, it's been it's been amazing, So I'm really liking that.

909
00:50:24,239 --> 00:50:25,880
One other thing I just want to shout out about

910
00:50:25,880 --> 00:50:28,960
since we have another minute, is we did an episode

911
00:50:29,000 --> 00:50:32,639
with Eric Simons from Stacklitz and we were talking about

912
00:50:32,760 --> 00:50:36,400
the web container stuff that they showed off running no

913
00:50:36,599 --> 00:50:40,679
JS in the browser natively at Google Io. And so

914
00:50:40,920 --> 00:50:43,639
if you're if you're looking for stuff like that, you know,

915
00:50:43,719 --> 00:50:46,840
just some interesting technology. We kind of dove a little

916
00:50:46,880 --> 00:50:49,039
bit into some of the other implications of what this

917
00:50:49,079 --> 00:50:51,360
technology means as far as being able to run stuff

918
00:50:51,440 --> 00:50:53,960
natively in the browser. So if you're looking for something

919
00:50:54,000 --> 00:50:56,039
like that, it's really cool, and I think it's going

920
00:50:56,079 --> 00:50:58,480
to change the way that we do web development going forward,

921
00:50:58,679 --> 00:51:01,239
because there are a lot of implications as to what

922
00:51:01,920 --> 00:51:05,639
is there. So anyway, I'm gonna I'm gonna stop shouting

923
00:51:05,639 --> 00:51:06,360
stuff out now.

924
00:51:06,719 --> 00:51:07,519
Speaker 3: Michael, do you.

925
00:51:07,480 --> 00:51:11,239
Speaker 2: Have some pecks for US tech related or or anything

926
00:51:11,800 --> 00:51:12,920
anything you should?

927
00:51:13,039 --> 00:51:16,440
Speaker 5: You should start to learn some dance. I like dancing

928
00:51:16,480 --> 00:51:19,239
a lot, as well as singing. I guess everybody should

929
00:51:19,280 --> 00:51:23,519
either start to dance or sing. It makes less more

930
00:51:23,599 --> 00:51:26,559
enjoyable a lot. Other than this, you should book my

931
00:51:26,599 --> 00:51:29,599
performance audits for your project as a shameless plug.

932
00:51:30,480 --> 00:51:33,360
Speaker 2: There you go where the people already do that, where.

933
00:51:33,280 --> 00:51:34,880
Speaker 4: They can peek at the moment.

934
00:51:34,920 --> 00:51:37,320
Speaker 5: I don't have the lending page for performance audits online,

935
00:51:37,320 --> 00:51:40,840
but I have an email address, I have Twitter ping me.

936
00:51:40,960 --> 00:51:43,440
This is the way how people did it so far

937
00:51:44,599 --> 00:51:48,039
surprisingly works. But in the future I will have dedicated

938
00:51:48,119 --> 00:51:50,760
landing pages that really stress out like what we do,

939
00:51:50,800 --> 00:51:52,880
why are we like outstanding good?

940
00:51:53,719 --> 00:51:54,280
Speaker 4: And so on.

941
00:51:54,480 --> 00:51:57,559
Speaker 5: So it's the stuff that you will see soon online.

942
00:51:57,679 --> 00:51:59,920
Other than this, you can ping in off Twitter or

943
00:52:00,039 --> 00:52:00,880
email Michael.

944
00:52:02,239 --> 00:52:02,639
Speaker 3: Awesome.

945
00:52:02,960 --> 00:52:04,400
Speaker 2: Yeah, if you can put that in the chat, then

946
00:52:04,400 --> 00:52:06,000
we'll make sure that people can get a hold of it.

947
00:52:06,199 --> 00:52:09,320
But yeah, this has been super fun, really interesting stuff.

948
00:52:09,480 --> 00:52:11,239
I'd love to dive a little bit more into performance,

949
00:52:11,280 --> 00:52:14,119
so maybe we'll throw it together a Part two and yeah,

950
00:52:14,159 --> 00:52:16,039
we'll get that on the calendar and we'll make it happen.

951
00:52:16,159 --> 00:52:19,920
But yeah, thanks for coming. This was awesome, all right, folks.

952
00:52:20,239 --> 00:52:21,519
Until next time, Max out