1
00:00:04,080 --> 00:00:09,839
Speaker 1: Hello, everybody, welcome to Adventures in Angular. My name is

2
00:00:09,880 --> 00:00:12,599
Alyssa Nicel and today with us on the panel we

3
00:00:12,759 --> 00:00:15,320
have Eddie Hinkle, Hey everyone, and.

4
00:00:15,359 --> 00:00:16,920
Speaker 2: Chris Ford good day.

5
00:00:19,000 --> 00:00:23,359
Speaker 1: And our marvelous guest is Rabbi dell Yat.

6
00:00:23,399 --> 00:00:26,039
Speaker 3: Say hello, Rabi, Hey, how are you? And thank you

7
00:00:26,039 --> 00:00:26,920
for having me here, by the.

8
00:00:26,920 --> 00:00:29,199
Speaker 2: Way, absolutely thanks for joining us.

9
00:00:29,399 --> 00:00:32,759
Speaker 1: So, Rabbi, tell us a little bit about yourself and

10
00:00:33,320 --> 00:00:34,920
what you do in the Angular community.

11
00:00:35,359 --> 00:00:39,159
Speaker 3: So let me start when I started off my career

12
00:00:39,200 --> 00:00:40,920
back in two thousand and eight. I started off as

13
00:00:40,960 --> 00:00:44,679
a junior PHP developer and then moved on to a

14
00:00:44,719 --> 00:00:46,280
senior position, then a tech.

15
00:00:46,159 --> 00:00:47,119
Speaker 4: Lead and a team lead.

16
00:00:47,799 --> 00:00:51,759
Speaker 3: And you know, meanwhile I also went along with Angular

17
00:00:51,799 --> 00:00:55,240
development as well, then came in no JS and then Reacted,

18
00:00:55,280 --> 00:01:00,719
then Angular two point zero and now I'm looking I

19
00:01:00,719 --> 00:01:02,880
will talk about that, by the way, that's an interesting topic.

20
00:01:02,920 --> 00:01:06,079
But now I'm working with vugs as well, and as

21
00:01:06,120 --> 00:01:08,680
far as back in programming is concerned, I do no

22
00:01:08,840 --> 00:01:11,439
JS and Laura well as well. And I've been training

23
00:01:11,439 --> 00:01:14,079
people since two thousand and eight. You know, whatever I can,

24
00:01:14,200 --> 00:01:16,560
I try to teach people. That's how I learned things,

25
00:01:16,560 --> 00:01:20,159
you know. So from that day till Greate twelve years

26
00:01:20,640 --> 00:01:23,280
into training and the last company that I left, I

27
00:01:23,319 --> 00:01:25,239
was a project manager and I had a team of

28
00:01:25,280 --> 00:01:28,799
like thirty people, thirty odd people ranging from all the

29
00:01:28,840 --> 00:01:31,879
types of developers and qas and the designers aug. So

30
00:01:31,920 --> 00:01:33,959
then I left the company. I didn't want to spend

31
00:01:34,040 --> 00:01:36,120
the rest of life with those thirty people. I wanted

32
00:01:36,159 --> 00:01:39,519
to meet more people, so mainly into training after that,

33
00:01:39,799 --> 00:01:41,599
And they're doing some consulting as well.

34
00:01:41,760 --> 00:01:45,560
Speaker 4: And I've trained people that with procats.

35
00:01:45,079 --> 00:01:49,959
Speaker 3: And and I conduent Aviva, at is alat PCs and

36
00:01:50,280 --> 00:01:52,519
like those that are a few of them, and then

37
00:01:52,560 --> 00:01:55,079
there are a lot of smaller companies who might train

38
00:01:55,159 --> 00:01:56,959
at So I've been lucky that way.

39
00:01:57,680 --> 00:01:59,640
Speaker 2: So you've like basically done it all.

40
00:02:00,159 --> 00:02:05,439
Speaker 1: You've gone from development to teaching to managing. There's like

41
00:02:05,599 --> 00:02:07,920
no and like from front end to back end. So

42
00:02:08,199 --> 00:02:10,000
it's like no side of it you haven't touched.

43
00:02:10,599 --> 00:02:13,719
Speaker 4: Yeah, I don't have any complaints. Yeah I have.

44
00:02:13,879 --> 00:02:16,800
Speaker 3: I have almost touched all the Like I'm like the

45
00:02:16,879 --> 00:02:19,599
jack of all trades and ace of none, so at

46
00:02:19,639 --> 00:02:21,840
least I can make it make it good.

47
00:02:21,840 --> 00:02:25,159
Speaker 5: In training, I was just thinking that I feel like

48
00:02:25,240 --> 00:02:27,639
we finally found the mythical Tenex developer.

49
00:02:29,240 --> 00:02:30,240
Speaker 4: Maybe I don't know.

50
00:02:32,800 --> 00:02:35,000
Speaker 1: So Robbie, what are we talking about today?

51
00:02:35,000 --> 00:02:35,879
Speaker 2: What is our topic?

52
00:02:36,520 --> 00:02:40,520
Speaker 3: So we're talking about component communication and Angular and the

53
00:02:40,560 --> 00:02:44,599
reason that I have chosen this topic is that it

54
00:02:44,680 --> 00:02:47,599
is quite interesting and quite varied as far as the

55
00:02:47,800 --> 00:02:52,199
communication is concerned, as far as Angular components are. So

56
00:02:52,479 --> 00:02:55,639
we'd be talking about components and how you know, components

57
00:02:55,639 --> 00:02:58,520
came in or how components are developed in Angular and

58
00:02:58,560 --> 00:03:02,039
how they're communicating with another through services and even if

59
00:03:02,280 --> 00:03:04,439
no services had there, how can they communicate?

60
00:03:04,599 --> 00:03:06,199
Speaker 4: So that is that's basically what it is.

61
00:03:06,680 --> 00:03:07,080
Speaker 2: Very cool.

62
00:03:07,360 --> 00:03:09,919
Speaker 1: Well, let's dive right in, and I actually wanted to

63
00:03:09,960 --> 00:03:13,280
ask you talk about doing training. Is it full stack

64
00:03:13,360 --> 00:03:15,759
training that you do or Angular specific?

65
00:03:16,000 --> 00:03:16,800
Speaker 4: It is full stack.

66
00:03:16,919 --> 00:03:20,840
Speaker 3: I started off as a React trainer and you know

67
00:03:21,240 --> 00:03:23,599
back in the day, I used to train people in Php.

68
00:03:23,840 --> 00:03:27,199
So from Php to React to Angular and then we

69
00:03:27,240 --> 00:03:29,879
would now know JS and Larval, so pretty.

70
00:03:29,639 --> 00:03:30,280
Speaker 4: Much full stack.

71
00:03:30,680 --> 00:03:31,919
Speaker 2: Cool. That's awesome.

72
00:03:32,280 --> 00:03:34,120
Speaker 4: So shall we start the topic.

73
00:03:34,439 --> 00:03:36,560
Speaker 2: Absolutely, let's dive in, sure.

74
00:03:36,639 --> 00:03:39,520
Speaker 3: So I would like to start it off with a

75
00:03:39,520 --> 00:03:42,159
little bit of a background on Angler for all the listeners.

76
00:03:42,280 --> 00:03:47,080
Anglargs was in the late two thousand and late two

77
00:03:47,080 --> 00:03:51,319
thousand and twenty ten decade, anglo JS came into the picture,

78
00:03:51,360 --> 00:03:55,759
and that particular technology was the one which introduced components

79
00:03:55,759 --> 00:03:58,840
to us. However, they were not used as much because

80
00:03:59,199 --> 00:04:01,599
the whole aim of anglo gs was to fit into

81
00:04:01,639 --> 00:04:05,240
the development that the developers do. You know, back in

82
00:04:05,280 --> 00:04:08,439
the day, the developers did and at that point developers

83
00:04:08,439 --> 00:04:10,639
were not very much at home with components and all.

84
00:04:10,759 --> 00:04:16,000
But still anglo GS had components, and then came in React,

85
00:04:16,600 --> 00:04:20,319
and React was the one that actually ran with components itself,

86
00:04:20,800 --> 00:04:24,319
and it was then that all the developers accepted widely

87
00:04:24,480 --> 00:04:27,480
that components are actually the way that frontment would go.

88
00:04:27,759 --> 00:04:30,639
Speaker 1: I didn't realize that React was that old like that.

89
00:04:30,920 --> 00:04:33,120
So did React happen before Angular two hit?

90
00:04:33,439 --> 00:04:33,680
Speaker 4: Yes?

91
00:04:34,079 --> 00:04:39,000
Speaker 3: Yes, and and that was the reason Angler two happened.

92
00:04:39,040 --> 00:04:42,000
You know, if you think about it, I mean nothing

93
00:04:42,160 --> 00:04:45,199
officially that I have read, But if we think about it,

94
00:04:45,240 --> 00:04:49,360
anglo JS and React they have different types of handling

95
00:04:49,399 --> 00:04:53,079
the document object model. And if anglo JS would have

96
00:04:53,199 --> 00:04:54,800
been the way it would have been or the way

97
00:04:54,839 --> 00:04:57,600
it is right now, then Angler would not have been surviving.

98
00:04:57,879 --> 00:05:00,439
The whole race you know, and that that's what I

99
00:05:00,480 --> 00:05:03,720
think where Google took a decision that let's risk it,

100
00:05:03,839 --> 00:05:07,040
let's bring it totally, like, let's do totally something new

101
00:05:07,079 --> 00:05:10,120
which is component centric and which handles the dorm better,

102
00:05:10,680 --> 00:05:13,959
you know, even better than React if possible. And that's

103
00:05:14,000 --> 00:05:16,800
why that's why probably I think Angler two and two

104
00:05:16,800 --> 00:05:20,120
plus versions are now you know, into the market. Otherwise

105
00:05:20,160 --> 00:05:22,160
it would if React would not have been there, then

106
00:05:22,199 --> 00:05:25,680
I think Anglo js would have been the way people

107
00:05:25,720 --> 00:05:26,439
would have gone for.

108
00:05:26,639 --> 00:05:29,360
Speaker 1: I know, talking with the team, they a lot of

109
00:05:30,000 --> 00:05:33,639
they just had so many issues with the Angular JS

110
00:05:33,800 --> 00:05:38,439
that they didn't see a way around without without the

111
00:05:38,600 --> 00:05:42,360
basically essential rewrite. So I know it was painful, like

112
00:05:42,399 --> 00:05:44,879
you were alluding to, but necessary.

113
00:05:46,600 --> 00:05:47,040
Speaker 4: Definitely.

114
00:05:47,079 --> 00:05:51,680
Speaker 3: The verbosity of JavaScript was mainly the cause, and mainly

115
00:05:51,720 --> 00:05:55,120
the way the variables were handled and all. And you know,

116
00:05:55,199 --> 00:05:58,399
there was no There was something called a constructor pattern

117
00:05:58,839 --> 00:06:02,000
as far as class and object creation is concerned, and

118
00:06:02,399 --> 00:06:05,480
that was basically a function which has a lot of

119
00:06:06,480 --> 00:06:08,920
context to it, which is not how a function should

120
00:06:09,720 --> 00:06:11,920
or should be, And then Typescript solved all the problems

121
00:06:11,920 --> 00:06:15,319
for them. It was actually really courageous of the Angular

122
00:06:15,360 --> 00:06:19,279
team to just remember everything, and you know, they just

123
00:06:19,399 --> 00:06:23,360
had to risk the whole reputation and it actually had

124
00:06:23,399 --> 00:06:26,839
a lot of I cannot say bad reputation, but developers

125
00:06:26,879 --> 00:06:29,639
actually didn't believe in Angular at that point when Angler

126
00:06:29,680 --> 00:06:32,120
two came into the market. But then again, now it

127
00:06:32,199 --> 00:06:35,120
is all again, you know, all all set to normal

128
00:06:35,199 --> 00:06:37,920
by God's grace, because it is Google that we're talking about,

129
00:06:37,959 --> 00:06:41,439
and it is it is actually doing things a lot,

130
00:06:41,839 --> 00:06:44,560
a lot better than so many other frameworks.

131
00:06:44,160 --> 00:06:45,240
Speaker 4: In the same same thing.

132
00:06:45,720 --> 00:06:48,759
Speaker 3: And yes, so coming back to components, so so just

133
00:06:48,800 --> 00:06:51,439
to just for the record, components where they're in Anglo

134
00:06:51,519 --> 00:06:55,519
jas as well. And now Angular two or two plus

135
00:06:55,639 --> 00:06:59,160
is having components as their basic building blocks, and components

136
00:06:59,160 --> 00:07:02,240
are meant to be in individual entities which are decoupled

137
00:07:02,560 --> 00:07:05,319
and decoupled to such an extent that a team in

138
00:07:05,319 --> 00:07:07,519
India can code on one component, a dream in a

139
00:07:07,639 --> 00:07:10,879
US can code on another component and still they won't

140
00:07:10,920 --> 00:07:15,120
face any problems considering the code conflicts, or only if

141
00:07:15,120 --> 00:07:18,319
there is a miscommunication between the teams would they face

142
00:07:18,360 --> 00:07:20,800
any problems. You know, so it's a human error that

143
00:07:20,839 --> 00:07:22,720
would lead to any problem if it is a component.

144
00:07:22,720 --> 00:07:26,959
PAS programming now provided that these are decoupled entities, there

145
00:07:27,000 --> 00:07:29,920
should be some mechanism that the developers should be able

146
00:07:29,920 --> 00:07:31,959
to take and they should be able to pass data

147
00:07:32,000 --> 00:07:35,279
between these entities just to bridge them together or maybe

148
00:07:35,560 --> 00:07:39,000
make them work together with each other. So that's where

149
00:07:39,279 --> 00:07:41,560
the component communication that we are talking about comes into

150
00:07:41,600 --> 00:07:44,639
the picture. And then what I also think is that

151
00:07:44,759 --> 00:07:48,319
even if there is like one sort of a set

152
00:07:48,600 --> 00:07:52,199
one sort of hierarchy that we think about where parent components,

153
00:07:52,639 --> 00:07:54,720
where a parent component has a lot of child components

154
00:07:54,720 --> 00:07:57,079
at all, in that case, also there is a communication

155
00:07:57,160 --> 00:08:00,439
going on between the parent and the child. At that point,

156
00:08:00,439 --> 00:08:02,920
there's no bridge required because they are like connected. So

157
00:08:03,160 --> 00:08:06,399
interconnected component like parent and child easily can communicate between

158
00:08:06,439 --> 00:08:10,600
one another. And then there are like two separate components

159
00:08:10,639 --> 00:08:13,920
altogether who are nowhere related to one another, and then

160
00:08:13,959 --> 00:08:17,519
they can also communicate. So these are like some types

161
00:08:17,560 --> 00:08:21,279
of component communication that we'd like to.

162
00:08:20,399 --> 00:08:21,199
Speaker 4: Throw some light on.

163
00:08:21,319 --> 00:08:23,839
Speaker 3: So first type of communication that we talk about is

164
00:08:23,879 --> 00:08:28,199
a parent and child communication. So if you imagine any

165
00:08:28,240 --> 00:08:33,080
component hierarchy, a component hierarchy is always a composition model.

166
00:08:33,519 --> 00:08:36,039
So when I say parent and child, we should not

167
00:08:36,279 --> 00:08:41,399
misunderstand that by the fact that a parent would always

168
00:08:41,960 --> 00:08:46,240
be inherited by a child. In a component based architecture,

169
00:08:46,440 --> 00:08:49,200
the parent is always composed of a child, which means

170
00:08:49,240 --> 00:08:51,399
the parent is at the top end the child is

171
00:08:51,440 --> 00:08:54,200
at the bottom of the hierarchy. In an inheritance model,

172
00:08:54,240 --> 00:08:58,000
it's a different it's quite the opposite thing. So in

173
00:08:58,480 --> 00:09:00,879
any component based architecture, parent would be at the top,

174
00:09:01,000 --> 00:09:04,519
child child components would be below parent, and then so

175
00:09:04,559 --> 00:09:06,519
on and so forth. So there is an easy way,

176
00:09:06,639 --> 00:09:08,799
you know, if you think about a hierarchy itself, a

177
00:09:08,879 --> 00:09:11,799
parent can easily, you know, pass a prop down to

178
00:09:11,840 --> 00:09:14,519
the child and that's where one of the decorators in

179
00:09:14,519 --> 00:09:16,759
an angler and now angler follows a decorator pattern which

180
00:09:16,799 --> 00:09:20,320
is very powerful. One of the decorators, called input decorator

181
00:09:20,600 --> 00:09:23,320
is what helps the patent to pass down.

182
00:09:23,200 --> 00:09:24,039
Speaker 4: Data to the child.

183
00:09:24,240 --> 00:09:27,799
Speaker 3: So basically the child receives the data as input from

184
00:09:27,879 --> 00:09:29,519
the parent and hence the name of.

185
00:09:29,440 --> 00:09:30,360
Speaker 4: The decorator input.

186
00:09:30,919 --> 00:09:34,279
Speaker 3: So basically a child can take data as much as

187
00:09:34,279 --> 00:09:36,960
it wants as properties through the parent and the parent

188
00:09:36,960 --> 00:09:39,759
can pass it on. So basically that's one set of

189
00:09:39,799 --> 00:09:44,039
a communication. And when the parent changes that data because

190
00:09:44,080 --> 00:09:46,879
it is a property inside a child, the child's UI

191
00:09:47,159 --> 00:09:51,320
would change, so that's also that's also something that angler

192
00:09:51,440 --> 00:09:54,159
has and it is really interesting where any property that

193
00:09:54,279 --> 00:09:57,919
changes inside a component, it would change or re render

194
00:09:58,279 --> 00:10:01,320
the template the HTML of the component. So if a

195
00:10:01,360 --> 00:10:04,159
parent change is a property which has been passed as

196
00:10:04,320 --> 00:10:07,919
a property to a child as an input, the child

197
00:10:07,960 --> 00:10:10,360
would also change. So that is one way of communicating

198
00:10:10,679 --> 00:10:12,759
from parent to child. So there is a parent child

199
00:10:12,799 --> 00:10:15,399
communication going on, and then there is the other way

200
00:10:15,399 --> 00:10:18,559
around the opposite right, the opposite so where the child

201
00:10:18,600 --> 00:10:22,720
component can communicate with the parent, like child component can

202
00:10:22,759 --> 00:10:26,039
send some messages to the parent. So that is something

203
00:10:26,080 --> 00:10:30,000
called event that the child emits, and there's a thing

204
00:10:30,039 --> 00:10:32,480
called event emitter that helps you to emit the events.

205
00:10:32,679 --> 00:10:34,720
So at that point, there is a decorator called output

206
00:10:34,759 --> 00:10:37,879
decorator that helps you to get the output from the

207
00:10:38,080 --> 00:10:38,879
child to the parent.

208
00:10:38,919 --> 00:10:40,639
Speaker 4: So input and output are quite opposite.

209
00:10:40,759 --> 00:10:44,440
Speaker 3: So if you imagine input decorator being used to drill

210
00:10:44,600 --> 00:10:46,960
the data down, output decorator can be used to pass

211
00:10:47,000 --> 00:10:50,960
the data upwards to the parent and output decorator is

212
00:10:51,000 --> 00:10:53,679
pretty tricky, I mean not that tricky, but it's not

213
00:10:53,720 --> 00:10:56,559
as straightforward as the input decorator input is really easy,

214
00:10:56,600 --> 00:10:59,960
but output has some other entities involved because output is

215
00:11:00,080 --> 00:11:02,519
essentially emitting events. It's not like passing the data, but

216
00:11:02,559 --> 00:11:05,200
it is emitting the events, and the parent is listening

217
00:11:05,240 --> 00:11:09,000
to the event. So so those parent and child communications

218
00:11:09,440 --> 00:11:13,799
are some things that people generally do in Angular components.

219
00:11:13,919 --> 00:11:17,720
Then people get carried away and then people keep on

220
00:11:17,799 --> 00:11:22,720
passing the data down to the props, right right from

221
00:11:22,720 --> 00:11:26,320
the top component right to the bottom component. And that's

222
00:11:26,320 --> 00:11:30,559
what Angular, you know, try to avoid. And that's where

223
00:11:30,600 --> 00:11:33,120
Angler has fixed things. You know, if we compare it

224
00:11:33,159 --> 00:11:36,519
to its predecessor, that is, I'm not talking about Anglo Jas,

225
00:11:36,559 --> 00:11:39,440
but I'm talking about React. So if we talk about React,

226
00:11:39,480 --> 00:11:41,759
react it's just a view library and it doesn't have

227
00:11:41,799 --> 00:11:45,799
anything at all other than the view portion. And you

228
00:11:45,840 --> 00:11:48,639
know React actually, if you don't use any any kind

229
00:11:48,639 --> 00:11:51,039
of a state like readucx or something like that, there's

230
00:11:51,159 --> 00:11:54,240
only one option to pass data down to all the components.

231
00:11:54,320 --> 00:11:57,399
Is start from the top and keep on passing data,

232
00:11:57,440 --> 00:12:01,120
drilling the props down to all the children. And that's

233
00:12:01,159 --> 00:12:03,960
what Angler has solved. So say, for example, if you

234
00:12:03,960 --> 00:12:07,559
have a ten level of hierarchy and you have a

235
00:12:07,679 --> 00:12:11,440
component at the top having some data, but that top

236
00:12:11,519 --> 00:12:14,320
level component wants to pass the data to the tenth

237
00:12:14,320 --> 00:12:18,200
component in the hierarchy, you'd not actually drill down the

238
00:12:18,200 --> 00:12:21,159
props by the input decorator. Input decorator is really good

239
00:12:21,279 --> 00:12:24,080
when it comes to two levels. So from one level

240
00:12:24,120 --> 00:12:26,480
to the second one, if you want to pass it out,

241
00:12:26,879 --> 00:12:29,960
you know, input is the best thing. However, if from

242
00:12:30,000 --> 00:12:31,759
first level to the tenth level, if you want to

243
00:12:31,799 --> 00:12:35,240
pass the data, input would not actually help much because

244
00:12:35,279 --> 00:12:38,279
that would make a lot of complexity as far as

245
00:12:39,080 --> 00:12:41,519
or complexity going as far as the coding is conformed,

246
00:12:41,559 --> 00:12:42,879
maintainability is con So you're.

247
00:12:42,799 --> 00:12:45,519
Speaker 1: Saying, that's the red flag for someone to look for

248
00:12:45,720 --> 00:12:49,360
is if they're going beyond one level with the inputs.

249
00:12:50,399 --> 00:12:53,360
Speaker 3: Yes, that's the red flag. Like rule of thumb, never

250
00:12:53,480 --> 00:12:57,639
use input twice. That's basically it is. So when that

251
00:12:57,799 --> 00:13:00,279
sort of a scenario occurse, Angler has already saw of it.

252
00:13:00,399 --> 00:13:04,879
You know, Angular has a mechanism called services, and services

253
00:13:04,960 --> 00:13:08,759
follow a Singleton pattern, and that too intrigues me about

254
00:13:08,759 --> 00:13:11,919
Angular that you know, Anglar has you know, I started

255
00:13:11,960 --> 00:13:15,200
off with Anglo Jas and at that point I was

256
00:13:15,639 --> 00:13:18,159
like that was back in two thousand and ten, twelve

257
00:13:18,320 --> 00:13:20,519
ten or eleven, I guess, And at that point I

258
00:13:20,559 --> 00:13:23,559
was not aware of so many design patterns per se.

259
00:13:24,000 --> 00:13:25,919
And then I came in to React, and then I

260
00:13:25,919 --> 00:13:28,759
came into Anglar two at that point. Actually, you know,

261
00:13:29,279 --> 00:13:32,559
during those those few years, I also learned some design

262
00:13:32,600 --> 00:13:35,600
patterns and I saw them being implemented in Angular two.

263
00:13:35,919 --> 00:13:40,440
Because Anglar implements a decorator pattern Angular improvements, of course, NBC,

264
00:13:40,960 --> 00:13:46,000
it implements you know, the singleton pattern as well, and

265
00:13:46,159 --> 00:13:50,919
services are singletons. So singletons basically mean that whenever your

266
00:13:50,960 --> 00:13:55,360
Angular application get initialized, those objects are created and they

267
00:13:55,399 --> 00:13:58,960
reside in the memory somewhere, but they're not created the

268
00:13:59,440 --> 00:14:02,240
second time, which is not the case with the components.

269
00:14:02,519 --> 00:14:05,159
If you create a component, you can create so many

270
00:14:05,159 --> 00:14:07,480
copies of it, like you don't have to actually create copies,

271
00:14:07,519 --> 00:14:11,159
but Angler creates copies of it for you if required. However,

272
00:14:11,360 --> 00:14:13,720
if it is a service which is a singleton object,

273
00:14:14,399 --> 00:14:17,679
and in that singleton object, Angler would never create a copy.

274
00:14:17,840 --> 00:14:20,519
But wherever it is required, Angler would just pass on

275
00:14:20,600 --> 00:14:24,799
a reference. And because it is a reference. Remember, because

276
00:14:24,799 --> 00:14:27,279
it is a reference, it is the same object that

277
00:14:27,320 --> 00:14:31,759
we are accessing. Hence, if the object has some properties

278
00:14:31,759 --> 00:14:36,480
that change. That particular property would be reflected everywhere that

279
00:14:36,840 --> 00:14:39,320
singleton object is access because it's the same reference that

280
00:14:39,320 --> 00:14:43,559
we're talking about. And that's where the whole component communication

281
00:14:44,279 --> 00:14:46,919
is a success because the top level component can now

282
00:14:46,960 --> 00:14:49,679
communicate with the tenth component. We are a service, we

283
00:14:49,720 --> 00:14:54,679
are a messenger mechanism, and that's basically what one of

284
00:14:54,720 --> 00:14:57,679
the ways that we communicate looks like. And that's what

285
00:14:57,720 --> 00:14:58,919
we're focusing on right now.

286
00:14:59,120 --> 00:15:03,000
Speaker 6: So you know, that's really interesting, and that kind of

287
00:15:03,080 --> 00:15:06,200
leads to a conundrum that me and my team have

288
00:15:06,320 --> 00:15:09,399
run into a lot, which is, if you use inputs

289
00:15:09,440 --> 00:15:13,919
and outputs, a component is super reusable, but when you

290
00:15:14,000 --> 00:15:18,960
start to use services, that reusability in a different context

291
00:15:19,200 --> 00:15:22,480
starts to become really difficult. So I don't know, have

292
00:15:22,600 --> 00:15:25,080
you come across that, and do you have any specific

293
00:15:25,519 --> 00:15:28,679
things you've tried to approach in terms of like how

294
00:15:28,720 --> 00:15:32,120
you use services in a way that still allows components

295
00:15:32,120 --> 00:15:34,440
to be reusable without right.

296
00:15:34,240 --> 00:15:35,480
Speaker 4: Right, I understand the question.

297
00:15:35,600 --> 00:15:40,320
Speaker 3: So yes, that is basically that is the trade off,

298
00:15:40,519 --> 00:15:43,440
and then we'd have to handle that trade off because

299
00:15:43,840 --> 00:15:46,200
service is obviously something if you want to use in

300
00:15:46,240 --> 00:15:49,000
a component as a service, your component becomes dependent on

301
00:15:49,080 --> 00:15:52,559
that service, and that's where the dependency injection comes into

302
00:15:52,600 --> 00:15:55,480
the picture, and your services are injected into the component.

303
00:15:55,519 --> 00:15:57,840
So basically, your component would not be able to function

304
00:15:58,399 --> 00:16:02,799
without a specific se So, so what we generally approach it,

305
00:16:03,159 --> 00:16:07,200
or how I have generally seen people approaching or approaching this,

306
00:16:07,720 --> 00:16:10,879
or maybe you know implemented at some places, is that

307
00:16:11,519 --> 00:16:15,840
we create a generic service, something like ngr X you

308
00:16:15,919 --> 00:16:19,200
may say, or something like reducts you know, but not

309
00:16:19,360 --> 00:16:23,840
exactly that a very miniature version of that basically where

310
00:16:24,360 --> 00:16:29,399
we pass on some payloads along with whatever the messages

311
00:16:29,519 --> 00:16:32,080
that we have. So basically they'll be it's the same

312
00:16:32,080 --> 00:16:35,679
thing as reducs, like it'll be message type or basically

313
00:16:35,759 --> 00:16:38,639
the action type and the payload basically, so it will

314
00:16:38,639 --> 00:16:41,519
be a generic service that all the component would be

315
00:16:41,519 --> 00:16:44,840
dependent on. And then whatever type of message that you

316
00:16:44,879 --> 00:16:46,879
want to pass and you can pass in, the component

317
00:16:46,919 --> 00:16:50,039
that consumes that service would check for the type and

318
00:16:50,600 --> 00:16:54,799
then if the type is available or if the type matches,

319
00:16:54,840 --> 00:16:56,840
then the component would do something. Otherwise it will not.

320
00:16:57,360 --> 00:17:00,159
So that is one way of working around that sort

321
00:17:00,200 --> 00:17:02,440
of a scenario where you can create a genetic service.

322
00:17:02,840 --> 00:17:04,960
The component would anyways be dependent on the service that

323
00:17:05,079 --> 00:17:06,359
is that is for sure.

324
00:17:06,559 --> 00:17:10,279
Speaker 6: Well, yeah, that's that's really interesting. We hadn't thought through

325
00:17:10,400 --> 00:17:13,519
using like a more generic service, so that's that's pretty cool.

326
00:17:13,559 --> 00:17:17,160
We've we've kind of gone a route where we try

327
00:17:17,240 --> 00:17:21,000
to have a like parent component that is tied to

328
00:17:21,039 --> 00:17:25,240
the service and then it embeds like just a display

329
00:17:25,279 --> 00:17:27,839
component inside of it, so that we kind of like

330
00:17:28,240 --> 00:17:30,960
we utilize the service to get it down to a

331
00:17:31,000 --> 00:17:33,680
lower level, which we call like a smart component, and

332
00:17:33,720 --> 00:17:36,880
then we have like a display component embedded inside which

333
00:17:36,920 --> 00:17:39,920
is using the inputs and outputs, which ends up being

334
00:17:39,960 --> 00:17:44,880
a lot of infrastructure, but it helped genericize things. So no,

335
00:17:45,039 --> 00:17:46,400
I like that generic service.

336
00:17:46,440 --> 00:17:46,960
Speaker 7: That's awesome.

337
00:17:47,519 --> 00:17:50,920
Speaker 3: Yeah, and I have seen this sort of a mechanism

338
00:17:50,920 --> 00:17:53,440
that you're mentioning, and if I give you an example

339
00:17:53,480 --> 00:17:56,440
of that, I think we would all everyone, every listener

340
00:17:56,519 --> 00:17:59,400
would be more clear for it. Like if we talk about,

341
00:17:59,440 --> 00:18:02,279
for example, log in form, then the setup that you

342
00:18:02,319 --> 00:18:05,039
were explaining would be a log in page and a

343
00:18:05,079 --> 00:18:07,880
log in form two components, and your page would be

344
00:18:07,920 --> 00:18:09,599
the one that would be consuming the service, where the

345
00:18:09,599 --> 00:18:11,720
log inform would be more or less a display component

346
00:18:11,759 --> 00:18:12,680
with inputs and output.

347
00:18:12,880 --> 00:18:14,000
Speaker 4: So that's sort of a thing.

348
00:18:14,039 --> 00:18:16,839
Speaker 3: And all the business logic, like all the validations and

349
00:18:16,880 --> 00:18:18,319
all would be in the log in page rather than

350
00:18:18,359 --> 00:18:19,599
the log in or maybe it can be in the

351
00:18:19,680 --> 00:18:21,599
log in form. I mean, it doesn't matter. The whole

352
00:18:21,640 --> 00:18:24,160
question is consuming the service. So while what I say

353
00:18:24,200 --> 00:18:26,599
in this particular case is just have a log inform

354
00:18:26,640 --> 00:18:30,079
component and have your generic service and you know, let

355
00:18:30,079 --> 00:18:34,079
the log inform consume the generic service and you know, then.

356
00:18:34,000 --> 00:18:34,519
Speaker 4: Run with it.

357
00:18:34,559 --> 00:18:36,920
Speaker 3: So so that is that is basically, but both the

358
00:18:36,960 --> 00:18:40,039
approaches I find it good because I have been programming

359
00:18:40,039 --> 00:18:42,839
in you know, reducts, and this this the one that

360
00:18:43,160 --> 00:18:45,759
we discussed about a page and a form. That approach

361
00:18:46,039 --> 00:18:49,119
comes in from reducts because sorry, react in reducts, I'm sorry,

362
00:18:49,559 --> 00:18:53,440
where you know, people do this kind of a thing

363
00:18:53,440 --> 00:18:55,319
where there is a page and then there is a.

364
00:18:55,440 --> 00:18:56,480
Speaker 4: Form sort of a thing.

365
00:18:56,559 --> 00:18:59,079
Speaker 3: So so yeah, that approach is also something that I

366
00:18:59,160 --> 00:19:01,759
have used for a long time. But Angular, you know,

367
00:19:01,920 --> 00:19:04,960
has changed things a lot, and that's why this genetic

368
00:19:05,039 --> 00:19:09,039
service seems more applicable to me. And I have not

369
00:19:09,200 --> 00:19:11,559
used that page and form sort of a thing with

370
00:19:11,680 --> 00:19:14,079
Angular at any time, but I would like to, you know,

371
00:19:14,119 --> 00:19:16,359
since you have mentioned that you have tried and tested it,

372
00:19:16,480 --> 00:19:17,720
I would like to do that someday.

373
00:19:18,319 --> 00:19:21,319
Speaker 6: Are there any other types of communication that you've played

374
00:19:21,359 --> 00:19:24,640
around with? Obviously you know you mentioned reducts in the background.

375
00:19:25,039 --> 00:19:28,000
Obviously there's different libraries. What other types of approaches have

376
00:19:28,039 --> 00:19:28,400
you done.

377
00:19:28,559 --> 00:19:31,359
Speaker 3: I've also gone for ng r X, but then for

378
00:19:31,440 --> 00:19:34,640
some reason, I always feel that ng RX is an overkill.

379
00:19:35,079 --> 00:19:40,440
And the reason is ng RX is all reactive state management, right,

380
00:19:40,519 --> 00:19:44,559
so it uses rxts and makes everything reactive. But if

381
00:19:44,559 --> 00:19:48,200
you think about it, Angular services themselves are reactive even

382
00:19:48,279 --> 00:19:50,880
without ur xts. So if you go for a subject

383
00:19:50,880 --> 00:19:53,720
and observable mechanism, services would still work and they would

384
00:19:53,759 --> 00:19:56,440
be reactive and all, which gives you sort of an

385
00:19:56,599 --> 00:19:59,599
NGRX feel, but not with those actions and all those things,

386
00:19:59,599 --> 00:20:01,839
you know, but you can implement that on, you know,

387
00:20:01,920 --> 00:20:04,559
in a custom basis. But then again, if you don't

388
00:20:04,640 --> 00:20:08,000
use observables now or or subject and if you create

389
00:20:08,519 --> 00:20:11,839
services as a singleton object in JavaScript, if you think

390
00:20:11,880 --> 00:20:16,599
about JavaScript now, in JavaScript, objects are always past their references.

391
00:20:16,759 --> 00:20:19,039
So if I create an object, like if you go

392
00:20:19,079 --> 00:20:22,160
for basic JavaScript vanilla JavaScript, if I create an object,

393
00:20:22,200 --> 00:20:25,160
and if I assign one variable to that object, now

394
00:20:25,200 --> 00:20:28,319
that variable becomes a reference to that particular object by default.

395
00:20:28,880 --> 00:20:32,279
So so that is the way JavaScript works, and Angular

396
00:20:32,319 --> 00:20:37,240
services actually use you know, a JavaScript unknowingly that way,

397
00:20:37,400 --> 00:20:41,160
so they are already reactive. So because services are singletons

398
00:20:41,160 --> 00:20:43,559
and they are objects, they are there somewhere in the memory.

399
00:20:43,640 --> 00:20:48,839
And basically, dependency injection is equality of one variable to

400
00:20:48,880 --> 00:20:51,440
the service variable and that equality is always a reference.

401
00:20:51,519 --> 00:20:54,519
So if you change anything inside the service, you would

402
00:20:54,519 --> 00:20:57,839
get that reflected no matter what, unless you're calling an

403
00:20:57,880 --> 00:21:00,720
API or something. So so say, for example, if I

404
00:21:00,759 --> 00:21:04,920
have let's take a basic alert message example and usage

405
00:21:04,920 --> 00:21:07,680
of subject and observable. Right, So in an alert message service,

406
00:21:07,680 --> 00:21:10,640
I would never use subject and observable because that itself

407
00:21:10,720 --> 00:21:13,039
is reactive. It doesn't communicate with any API or anything

408
00:21:13,079 --> 00:21:15,279
like that. But say, for example, if it's if it's

409
00:21:15,279 --> 00:21:17,680
a resource that we are trying to consume let's say

410
00:21:18,119 --> 00:21:22,559
an employee from an API server, at that point, the

411
00:21:22,640 --> 00:21:25,640
subject and observable would be something that we would be

412
00:21:25,720 --> 00:21:27,599
using because at that point there will be no connection

413
00:21:27,839 --> 00:21:30,480
as a so there is decisions if you want to

414
00:21:30,519 --> 00:21:32,839
take you know, if you want to create services where

415
00:21:32,880 --> 00:21:35,920
if you want to just let Javas control with it,

416
00:21:36,119 --> 00:21:39,599
you know, have objects and let JavaScript do the trick

417
00:21:40,160 --> 00:21:42,680
and you know, make it abstract for the developer. Yeah,

418
00:21:42,680 --> 00:21:45,839
a new developer, a fresher would always wonder what is happening,

419
00:21:46,319 --> 00:21:49,440
but you know, experienced JavaScript developers would know that, okay,

420
00:21:49,440 --> 00:21:51,920
objects are always references and hence the alert messages are

421
00:21:51,920 --> 00:21:53,759
passing in all so you might have to make that clear.

422
00:21:54,039 --> 00:21:56,200
But then if you want more control over it, and

423
00:21:56,720 --> 00:21:58,640
you know, if you want to have API calls done,

424
00:21:58,799 --> 00:22:01,720
at that point you use subject and observable as well.

425
00:22:01,799 --> 00:22:03,880
So that is that is also some decisions that we

426
00:22:03,960 --> 00:22:05,599
want we might want to take if you if you

427
00:22:05,640 --> 00:22:07,839
don't want to beat resource and intensive.

428
00:22:08,160 --> 00:22:10,599
Speaker 5: Thanks right, I mean I've been sort of furiously scribbling

429
00:22:10,640 --> 00:22:13,799
down my thoughts as you've been going through this. Thanks

430
00:22:13,880 --> 00:22:18,160
very much for all that, because it's been fascinating. Actually yeah,

431
00:22:18,160 --> 00:22:19,599
I mean, so one of the things I wrote down

432
00:22:19,599 --> 00:22:21,400
is is finding the balance.

433
00:22:22,200 --> 00:22:23,920
Speaker 7: I will just elaborate on that a little bit.

434
00:22:24,039 --> 00:22:27,480
Speaker 5: I remember when I when I first learned about the

435
00:22:28,200 --> 00:22:32,200
you know, having a shared service for passing data between components,

436
00:22:32,240 --> 00:22:33,640
you know, it was it was kind of eye opening

437
00:22:33,680 --> 00:22:35,839
to me because you know, as a as a brand

438
00:22:35,880 --> 00:22:39,079
new Angular developer, I have experienced what you've described as

439
00:22:39,079 --> 00:22:41,079
where you just end up with this huge chain of

440
00:22:41,200 --> 00:22:43,880
input and output, which is is absolutely fine when you're

441
00:22:43,920 --> 00:22:46,279
talking just between a couple of components and you know,

442
00:22:46,319 --> 00:22:48,720
exactly as you say, but then yeah, you can just

443
00:22:48,799 --> 00:22:50,519
end up where you're just you just have this sort

444
00:22:50,559 --> 00:22:52,839
of huge pipe of stuff just go right. It goes

445
00:22:52,839 --> 00:22:54,200
in and then it goes out, and then it goes

446
00:22:54,240 --> 00:22:55,559
in and then it goes out, and it goes in

447
00:22:55,599 --> 00:22:57,160
and it goes out. And then obviously you've got to

448
00:22:57,160 --> 00:22:58,640
handle it going the other way as well, which is

449
00:22:58,720 --> 00:23:00,920
which can be a nightmare. And so yeah, when I

450
00:23:01,039 --> 00:23:03,759
when I first learned the you know, shared service pattern,

451
00:23:03,799 --> 00:23:06,359
it was, it was it was fantastic to me a

452
00:23:06,440 --> 00:23:08,480
little while to figure out what earth was going on.

453
00:23:08,559 --> 00:23:10,640
But yeah, now you know, I'm a big fan of that.

454
00:23:10,680 --> 00:23:15,240
And I recently showed that to a colleague who I

455
00:23:15,279 --> 00:23:17,480
work with who had not seen it before, and you know,

456
00:23:17,480 --> 00:23:18,799
it was the same same result for him.

457
00:23:18,839 --> 00:23:20,319
Speaker 7: He was like, oh, wow, this is great.

458
00:23:20,440 --> 00:23:23,079
Speaker 5: And then recently I was doing a code review for

459
00:23:23,119 --> 00:23:26,119
this colleague and they had this sort of complicate shared

460
00:23:26,160 --> 00:23:28,640
service pattern going on. I was sort of like, wow,

461
00:23:28,720 --> 00:23:31,160
you know, you're literally just passing some data from this

462
00:23:31,279 --> 00:23:33,519
component into the next component. You could just use inputs

463
00:23:33,519 --> 00:23:36,599
and outputs for that. And he's like, nah, after you

464
00:23:36,640 --> 00:23:38,960
showed me this, I can't. I don't like inputs and

465
00:23:38,960 --> 00:23:42,119
outputs anymore. I only like to do it through my subscription.

466
00:23:44,000 --> 00:23:46,319
Speaker 7: Okay, So where where do you find that balance?

467
00:23:46,359 --> 00:23:48,680
Speaker 5: I mean, is it is it cool to to always

468
00:23:48,759 --> 00:23:52,000
just go as a subscription or or should you actually

469
00:23:52,079 --> 00:23:53,319
is there a point where you should go?

470
00:23:54,079 --> 00:23:58,039
Speaker 7: You this is overkilled to use a subscription. In your

471
00:23:58,079 --> 00:23:58,519
thoughts on.

472
00:23:58,480 --> 00:24:03,200
Speaker 3: That, yeah, I would like to explain it by an example. Say,

473
00:24:03,240 --> 00:24:07,279
for example, if we're going for a shopping card UI right,

474
00:24:08,000 --> 00:24:10,720
and in that case, there is a list of products

475
00:24:10,720 --> 00:24:16,400
that we have, and each product has its own thumbnail essentially,

476
00:24:16,480 --> 00:24:19,640
and that thumbnail itself it's a component. Right now, what

477
00:24:19,680 --> 00:24:22,480
we're trying to do is we're trying to basically call

478
00:24:22,519 --> 00:24:26,359
an API for the list of products, and then we're

479
00:24:26,359 --> 00:24:29,279
trying to loop through those list of products, and then

480
00:24:29,279 --> 00:24:33,079
we're trying to render each and every product. So if

481
00:24:33,079 --> 00:24:35,319
we call that list of products a product list component,

482
00:24:35,359 --> 00:24:38,319
and if we call that thumbnail a product item component.

483
00:24:38,799 --> 00:24:41,279
What happens here is that I would not like to

484
00:24:41,759 --> 00:24:44,160
call the API both in the product list and the

485
00:24:44,160 --> 00:24:47,839
product item because when I go for the product list,

486
00:24:47,880 --> 00:24:50,240
I get all the products anyways, and all I need

487
00:24:50,279 --> 00:24:52,720
to then do is the most sensible way is just

488
00:24:52,720 --> 00:24:54,799
to pass it down because then I would not like

489
00:24:54,839 --> 00:24:57,599
to call an API another time, right the second time.

490
00:24:57,880 --> 00:25:01,640
So basically I take the products rendering the product item component.

491
00:25:01,680 --> 00:25:04,200
I just passed that one product down to the product item.

492
00:25:04,319 --> 00:25:07,240
So the balance that we find here is whenever your

493
00:25:07,319 --> 00:25:10,720
web services are like whenever you can save a call

494
00:25:10,759 --> 00:25:12,960
to a web service, and you know it's a two

495
00:25:13,039 --> 00:25:15,680
level hierarchy that you're talking about. At that point, we

496
00:25:15,720 --> 00:25:18,519
can simply go for the input and rest of the

497
00:25:18,559 --> 00:25:21,279
places like where Let's say if we take the same

498
00:25:21,319 --> 00:25:24,200
example like product and the card, right, so card is

499
00:25:24,240 --> 00:25:27,920
a totally different component, and when I add my product

500
00:25:27,920 --> 00:25:30,119
to card, I have to call an API and at

501
00:25:30,119 --> 00:25:32,039
the same time I have to update my card. At

502
00:25:32,039 --> 00:25:35,079
that point, you know, inputs outputs they would like be

503
00:25:35,319 --> 00:25:38,240
bizar like people would be pulling their hairs off if

504
00:25:38,240 --> 00:25:40,720
you go for that sort of an input output communication,

505
00:25:40,799 --> 00:25:43,079
you know, so that is that is where you make

506
00:25:43,119 --> 00:25:45,440
a decision, That is where you strike a balance.

507
00:25:45,640 --> 00:25:46,160
Speaker 7: Yeah, that is.

508
00:25:46,599 --> 00:25:50,039
Speaker 5: That's a great example, thank you. Yeah, yeah, the balance

509
00:25:50,039 --> 00:25:53,519
is super important. And something else I've scribbled down is

510
00:25:53,599 --> 00:25:57,680
I find it sometimes I find it frustrating that sometimes

511
00:25:57,720 --> 00:25:59,960
I want to I want to be able to react

512
00:26:00,279 --> 00:26:03,039
on a change to something that's coming through the input.

513
00:26:03,039 --> 00:26:04,880
Speaker 7: And I feel like, you know.

514
00:26:04,960 --> 00:26:08,000
Speaker 5: If I'm doing it, if I'm changing my values through

515
00:26:08,000 --> 00:26:10,640
a subscription, is easy, right, I just I set up

516
00:26:10,640 --> 00:26:13,079
a subscription, and then I can I can tell my

517
00:26:14,000 --> 00:26:17,240
code to do something when that value has changed.

518
00:26:17,279 --> 00:26:18,559
Speaker 7: But I like, you can't.

519
00:26:19,000 --> 00:26:20,680
Speaker 5: There's not really anything you can do on an input,

520
00:26:20,880 --> 00:26:23,759
is it. I mean other than using on changes, which

521
00:26:23,799 --> 00:26:27,319
I like. Personally, I'd like, don't write any code in

522
00:26:27,359 --> 00:26:29,640
on changes. And I know I've seen, you know, even

523
00:26:29,680 --> 00:26:31,960
in code basis I'm working in at the moment, I

524
00:26:32,000 --> 00:26:34,519
see reams and reams of coding non changes. And maybe

525
00:26:34,559 --> 00:26:38,279
for some people that's cool, but I find that that method,

526
00:26:38,319 --> 00:26:40,519
that life cycle hook, just gets hammered too much. I mean,

527
00:26:40,880 --> 00:26:43,400
am I just am I making a problem that doesn't

528
00:26:43,440 --> 00:26:45,359
exist here in my own head? Or what?

529
00:26:45,799 --> 00:26:47,799
Speaker 3: As far as the input is concerned if we stick

530
00:26:47,839 --> 00:26:50,359
to our principle where we just go for the two

531
00:26:50,400 --> 00:26:53,160
level hierarchy and we are just passing data down just

532
00:26:53,200 --> 00:26:57,039
for the display purposes only. Like Edie was mentioning earlier

533
00:26:57,039 --> 00:26:59,960
that they have a service consumption component and then there

534
00:26:59,920 --> 00:27:02,279
is a display component. So basically there's a smart component

535
00:27:02,319 --> 00:27:04,640
and a dumb component. A dumb component just displace the

536
00:27:04,680 --> 00:27:06,759
data whatever you throw at it, so that point you

537
00:27:06,759 --> 00:27:09,319
don't need control over it, you know, because you need

538
00:27:09,359 --> 00:27:11,559
to just pass the data down and just display it.

539
00:27:11,599 --> 00:27:11,960
Speaker 4: That's it.

540
00:27:12,440 --> 00:27:16,039
Speaker 3: So the problem comes when you need control over that display.

541
00:27:16,319 --> 00:27:19,160
Maybe you want to make a decision on whether to

542
00:27:19,240 --> 00:27:21,759
display something or d else. Major things are done by

543
00:27:21,759 --> 00:27:24,680
the template itself like NGF and all, but still if

544
00:27:24,680 --> 00:27:27,480
you want some programmatic control, at that point what you

545
00:27:27,720 --> 00:27:31,279
mentioned would be applicable where you would need some control

546
00:27:31,359 --> 00:27:33,559
over the values that are changing or maybe make some

547
00:27:33,599 --> 00:27:36,519
decision or maybe log something at least, you know, while

548
00:27:36,559 --> 00:27:39,359
the values change. So at that point inputs would just fail.

549
00:27:39,799 --> 00:27:42,839
But then again the usage of input is what I

550
00:27:42,839 --> 00:27:45,480
would like to again go back to Eddy's example, like

551
00:27:45,519 --> 00:27:47,839
that is the correct usage of input where you just

552
00:27:47,920 --> 00:27:51,680
want to have a dumb component and or I'll call it,

553
00:27:51,720 --> 00:27:53,920
I'll not be rude. I'll call it a presentational component.

554
00:27:54,200 --> 00:27:55,200
Speaker 4: And we.

555
00:27:56,799 --> 00:27:59,119
Speaker 3: Just passed the data out and the component just displace

556
00:27:59,160 --> 00:28:01,599
the data and that's it. So that's that's where the

557
00:28:01,640 --> 00:28:02,720
input comes into the picture.

558
00:28:03,000 --> 00:28:03,839
Speaker 7: So yeah, good.

559
00:28:03,920 --> 00:28:05,599
Speaker 5: So when when you add, when you want to be

560
00:28:05,680 --> 00:28:07,640
able to react on a change, you should be doing

561
00:28:07,640 --> 00:28:10,039
it with a with.

562
00:28:08,160 --> 00:28:09,759
Speaker 7: A with a subject.

563
00:28:10,400 --> 00:28:11,720
Speaker 4: Yes, yes, that's correct.

564
00:28:12,160 --> 00:28:12,839
Speaker 7: Good.

565
00:28:13,000 --> 00:28:15,519
Speaker 6: I have a kind of crazy idea to throw out here,

566
00:28:15,640 --> 00:28:20,519
and I will say this is a hypothetical situation in

567
00:28:20,559 --> 00:28:23,400
case it's a crazy situation, because I would not want

568
00:28:23,440 --> 00:28:26,440
to admit to having written this. But what do you

569
00:28:26,440 --> 00:28:30,160
guys think about having a setter and a getter on

570
00:28:30,480 --> 00:28:35,559
your input? So your input triggers a setter function, which

571
00:28:35,799 --> 00:28:37,960
then allows you to kind of react to the new

572
00:28:38,039 --> 00:28:40,640
values that come in, and then of course you would

573
00:28:40,680 --> 00:28:44,000
store that in a private variable and then have your

574
00:28:44,319 --> 00:28:50,359
getter return that. So it looks like a normal input variable,

575
00:28:50,519 --> 00:28:54,079
but it does magical stuff when the setter is triggered.

576
00:28:54,400 --> 00:28:55,599
Speaker 7: Sounds like madness.

577
00:28:57,480 --> 00:29:01,000
Speaker 3: And that's that's what basically Chris is suggesting, you know,

578
00:29:01,119 --> 00:29:04,880
because at that point when you exactly exactly that is

579
00:29:04,880 --> 00:29:06,480
the scenario way and you want to react to some

580
00:29:06,599 --> 00:29:09,640
changes at that point, you would hypothetically, if it is possible,

581
00:29:09,680 --> 00:29:12,640
you would do that. And I think it might be possible,

582
00:29:12,720 --> 00:29:15,519
like we might want to refer to some hooks that

583
00:29:15,599 --> 00:29:18,559
Angler might have for the component life cycle, and that

584
00:29:18,720 --> 00:29:21,119
might be possible. There might be a possibility. I'm not

585
00:29:21,240 --> 00:29:23,680
quite it's not on top of my head, but it

586
00:29:23,720 --> 00:29:25,799
should be. There should be something like this, you know

587
00:29:25,960 --> 00:29:29,160
what Eddie is describing in the form of life cycle

588
00:29:29,240 --> 00:29:29,880
hooking and Angular.

589
00:29:30,039 --> 00:29:31,559
Speaker 6: Yeah, that was just one thing that came to mind,

590
00:29:31,599 --> 00:29:33,880
So I thought that out there. But definitely, I think

591
00:29:33,920 --> 00:29:35,960
when you have a lot of complicated logic, like you

592
00:29:36,000 --> 00:29:38,759
said Robbie, like you want to switch to services for sure.

593
00:29:38,880 --> 00:29:41,880
Speaker 3: Yeah, so in that case, we use we do use services.

594
00:29:41,880 --> 00:29:44,039
And then comes in nng r X that is the

595
00:29:44,279 --> 00:29:48,519
god of computer component communication. Now this whole idea, like

596
00:29:49,119 --> 00:29:51,440
I always feel frustrated at point at one point in

597
00:29:51,480 --> 00:29:54,920
time where you know, the learners that I teach, they

598
00:29:55,000 --> 00:29:58,039
come in in my Angular class and the first thing

599
00:29:58,079 --> 00:30:00,359
that they ask is are we going to cover X

600
00:30:00,480 --> 00:30:05,400
or not? So in that case, it's like it's like,

601
00:30:06,039 --> 00:30:09,160
I mean, it's not necessary to get nngr X covered,

602
00:30:09,279 --> 00:30:12,160
you know, as far as Angular is concerned, because in

603
00:30:12,240 --> 00:30:15,400
order to cover NGRX, you should have a good experience

604
00:30:15,400 --> 00:30:18,640
working with a very big application that would not work

605
00:30:19,039 --> 00:30:22,519
without this this sort of a reactive state changing mechanism.

606
00:30:22,599 --> 00:30:24,839
And unless that happens, you don't know that you'll not

607
00:30:24,960 --> 00:30:27,400
be able to know the value of what NGRX adds

608
00:30:27,440 --> 00:30:30,920
to your you know, whole application. So what I advise

609
00:30:31,000 --> 00:30:33,319
them is to just go step by step, go with services,

610
00:30:33,359 --> 00:30:35,839
try to implement like I don't even you know, mention

611
00:30:36,039 --> 00:30:39,519
NGRX until at one point they come or until they

612
00:30:39,559 --> 00:30:42,400
come to a point where they think that okay, this

613
00:30:42,480 --> 00:30:45,000
sort of a mechanism like action types and you know

614
00:30:45,079 --> 00:30:47,799
payload and you know dispatching sort of a thing is

615
00:30:47,839 --> 00:30:51,079
necessary or effects are necessary. At that point when when

616
00:30:51,079 --> 00:30:54,119
a learner reaches at that point, I just throw in, Okay,

617
00:30:54,319 --> 00:30:56,200
what you were trying so hard from four to five

618
00:30:56,240 --> 00:30:58,000
days is here NGRX.

619
00:30:58,039 --> 00:30:59,680
Speaker 4: This is the link. You can implement it and you

620
00:30:59,680 --> 00:31:00,559
can go ahead with it.

621
00:31:00,599 --> 00:31:04,640
Speaker 3: So so for most of the cases Angular projects, I

622
00:31:04,680 --> 00:31:07,720
don't think it need AnGRs, it needs ANGIERIC. But ng

623
00:31:07,839 --> 00:31:11,440
RX is again a good way of component communication. But

624
00:31:11,839 --> 00:31:14,920
eventually it's a service that works in the same manner

625
00:31:15,039 --> 00:31:19,079
as any service would, but but then it is more organized.

626
00:31:19,119 --> 00:31:22,799
You know, it's a global variable. We're always advised against

627
00:31:22,839 --> 00:31:26,759
global variables. But then now because we have rebels, we

628
00:31:27,119 --> 00:31:30,839
just come up with an organizational pattern to handle global variables,

629
00:31:30,839 --> 00:31:33,920
and then the whole world uses it, you know, So.

630
00:31:33,440 --> 00:31:35,559
Speaker 4: So that is that is basically what it is.

631
00:31:35,960 --> 00:31:38,480
Speaker 3: So that's what Also, that's also what I love about

632
00:31:38,480 --> 00:31:41,640
reducts and angie r ICs and VUX and you know

633
00:31:41,680 --> 00:31:45,599
more BEX and all those application state management libraries. It's

634
00:31:45,640 --> 00:31:48,799
it's the rebellious nature of those libraries that we are

635
00:31:49,000 --> 00:31:51,440
always right from the college, we were advised against using

636
00:31:51,440 --> 00:31:54,960
global variables, but here we are using global variables managing stuff.

637
00:31:55,319 --> 00:31:56,480
Speaker 4: So that is that is good.

638
00:31:56,880 --> 00:32:00,519
Speaker 5: I think you're right like this, You do see kind

639
00:32:00,559 --> 00:32:04,480
of obsession with ENNGRX. Certainly when it first started to arrive,

640
00:32:04,839 --> 00:32:07,839
it felt like everyone, it's all anyone was sort of

641
00:32:07,839 --> 00:32:12,359
blogging about in the in the angler space and X. Actually,

642
00:32:13,039 --> 00:32:16,279
you know, I've worked on several projects that use it now,

643
00:32:16,640 --> 00:32:20,359
and I could easily say that I think probably only

644
00:32:20,440 --> 00:32:24,680
one of them really needed to have ENJX, you know.

645
00:32:24,640 --> 00:32:27,640
Speaker 1: Because what's good that line, Chris, like, if you're looking

646
00:32:27,640 --> 00:32:29,920
across these projects that you're working with, is it literally

647
00:32:30,000 --> 00:32:34,480
just size of the Cobey's Yeah, I mean.

648
00:32:34,400 --> 00:32:37,359
Speaker 5: Yeah, yeah, I was just working the one that I

649
00:32:37,359 --> 00:32:40,680
think I think would have did benefit from it. It's

650
00:32:40,759 --> 00:32:46,359
just it's an application that was just handling obscene quantities

651
00:32:46,400 --> 00:32:51,599
of data and that data was constantly being shifted around

652
00:32:51,759 --> 00:32:55,200
the application, right, So in that case, it just it

653
00:32:55,319 --> 00:32:57,680
made perfect sense. And in fact, you know, when I

654
00:32:57,799 --> 00:33:00,519
when I came on board that project, they don't been

655
00:33:01,200 --> 00:33:03,599
adding ng RX to it for I think maybe a

656
00:33:03,599 --> 00:33:08,000
couple of months. It was previously just using subscriptions, and

657
00:33:08,079 --> 00:33:10,920
it's just because the app had just grown to such

658
00:33:11,440 --> 00:33:14,640
huge proportions, and say, it was just it was constantly

659
00:33:14,759 --> 00:33:18,240
shuffling data around that was just being accessed by so

660
00:33:18,359 --> 00:33:21,559
many different components sort of at once, who were all

661
00:33:22,160 --> 00:33:24,480
accessing it and changing things and needing to react to

662
00:33:24,519 --> 00:33:26,759
the to the changes. And so in that case, yeah,

663
00:33:26,960 --> 00:33:28,640
it just it made sense to have this sort of

664
00:33:28,640 --> 00:33:31,440
central data store. You know, it's exactly what it is therefore,

665
00:33:31,480 --> 00:33:34,680
to have the central data store where everything could just

666
00:33:34,720 --> 00:33:38,680
tap into that one central location forgetting data.

667
00:33:38,640 --> 00:33:39,279
Speaker 7: And changing it.

668
00:33:39,720 --> 00:33:42,319
Speaker 5: But you know, the project that I worked one directly

669
00:33:42,319 --> 00:33:45,480
before that, one that had engine X in it, and

670
00:33:46,240 --> 00:33:48,799
it was a tiny app that didn't do much and

671
00:33:49,119 --> 00:33:52,559
it was just like just so much work doing all

672
00:33:52,559 --> 00:33:54,759
the ng X stuff when I could easily just have

673
00:33:54,799 --> 00:33:57,359
been piping the stuff around with you know, with my

674
00:33:57,720 --> 00:34:00,599
services and subscriptions. So I think people get a bit

675
00:34:00,759 --> 00:34:03,279
over excited about ng X. And I think there was

676
00:34:03,920 --> 00:34:05,720
I've dug it out. It was in the back of

677
00:34:05,759 --> 00:34:07,440
my mind and I've lost I'm in the wrong browser.

678
00:34:07,519 --> 00:34:11,519
It was a talk by Mike Ryan at Anger to

679
00:34:11,599 --> 00:34:16,239
Connect in twenty eighteen. You might not need ng RX,

680
00:34:16,239 --> 00:34:19,679
And it's like just the fact that the fact that

681
00:34:20,239 --> 00:34:24,519
they need to do a talk telling people maybe that

682
00:34:24,599 --> 00:34:27,920
they don't need it says a lot about how obsessed

683
00:34:27,920 --> 00:34:28,679
people got with it.

684
00:34:28,760 --> 00:34:31,360
Speaker 1: I think, yeah, I think it's hard because people just

685
00:34:31,400 --> 00:34:36,320
get so excited and they're like, it's like whenever you taught,

686
00:34:36,400 --> 00:34:38,840
you taught them, you know, instead of inputs and outputs,

687
00:34:38,880 --> 00:34:41,280
you can use the subject and they're like, well, I'm

688
00:34:41,320 --> 00:34:43,599
going to use this everywhere, and it's the same. It's

689
00:34:43,639 --> 00:34:46,719
the same. Everyone just gets excited and they used it

690
00:34:46,760 --> 00:34:47,519
on all things.

691
00:34:47,679 --> 00:34:51,320
Speaker 3: So yeah, and I would also like to add on

692
00:34:51,360 --> 00:34:54,159
to what Chris just mentioned, there is a rule of

693
00:34:54,280 --> 00:34:58,360
thumb as well in here when that whole flash of genius,

694
00:34:58,360 --> 00:35:00,400
when you want to use angi X in your project,

695
00:35:00,400 --> 00:35:03,760
you know where if that generic service that we were

696
00:35:03,760 --> 00:35:06,280
talking about, Eddie, if if that gets out of hand,

697
00:35:06,519 --> 00:35:08,440
you know, it has so many things that you need

698
00:35:08,480 --> 00:35:12,119
to manage, and at that point you should, you know,

699
00:35:12,159 --> 00:35:14,920
make a decision and move to ng r X. And

700
00:35:15,159 --> 00:35:17,199
that is when there are a lot of components and

701
00:35:17,400 --> 00:35:19,719
you know, your state, as Chris mentioned, is affecting a

702
00:35:19,719 --> 00:35:22,239
lot of things. But right at the onset if you

703
00:35:22,280 --> 00:35:26,159
start with ng r X, because we are always nowadays

704
00:35:26,159 --> 00:35:28,199
like most of the projects are agile, we don't know

705
00:35:28,519 --> 00:35:31,440
at what point a project would go or a project

706
00:35:31,519 --> 00:35:34,519
would end at. So at that point, I mean, even

707
00:35:34,559 --> 00:35:38,760
if you're just using a good service mechanism and good

708
00:35:38,840 --> 00:35:42,639
organized service mechanism which doesn't have any learning curve, that

709
00:35:42,679 --> 00:35:45,719
would also be beneficial for the new newbies or the

710
00:35:45,719 --> 00:35:48,639
team members basically, and you would still be able to

711
00:35:48,679 --> 00:35:50,920
live with ng r X or without en gi ICs.

712
00:35:50,920 --> 00:35:51,360
Speaker 4: I'm sorry.

713
00:35:51,679 --> 00:35:54,400
Speaker 3: So basically it's it's that you know, so there is

714
00:35:54,440 --> 00:35:56,679
always a trade offer, There is always a decision that

715
00:35:56,679 --> 00:36:00,679
you have to take with Angular in every aspect right

716
00:36:00,719 --> 00:36:02,880
from the beginning, because it is really overwhelming. There are

717
00:36:02,880 --> 00:36:05,559
so many things that are there in Angle because it's

718
00:36:05,559 --> 00:36:07,719
a framework, you know, that's the that's the fact of

719
00:36:07,760 --> 00:36:10,280
the matter, and you have to take a decision and

720
00:36:10,280 --> 00:36:13,519
when you stop using or when you stop over using something,

721
00:36:14,519 --> 00:36:16,960
so that is that is there always.

722
00:36:16,719 --> 00:36:20,320
Speaker 6: We talk about how NGRX might not be needed if

723
00:36:20,320 --> 00:36:23,920
a project is too small, and then the assumption is

724
00:36:23,960 --> 00:36:27,320
that like as NGRX gets or as your project gets bigger,

725
00:36:27,480 --> 00:36:30,239
NGRX you know, is more needed on the con or

726
00:36:30,280 --> 00:36:31,360
on the inverse.

727
00:36:31,000 --> 00:36:31,559
Speaker 4: Side of that.

728
00:36:31,840 --> 00:36:35,159
Speaker 6: Like our product at the company I work with, we

729
00:36:35,280 --> 00:36:39,400
actually store so much data that there's no way we

730
00:36:39,440 --> 00:36:41,880
could load all the data into the web browser at once.

731
00:36:42,159 --> 00:36:45,840
Like we actually overwhelm my SQL databases and have to

732
00:36:45,880 --> 00:36:49,800
have this like in memory database called Hannah on some instances.

733
00:36:49,880 --> 00:36:54,000
So like we're talking about hundreds of thousands of you know, entities,

734
00:36:54,519 --> 00:36:57,239
and so because we can't store all of that in

735
00:36:57,280 --> 00:37:00,920
the web browser, we actually have to do all of

736
00:37:00,960 --> 00:37:04,280
our filtering and queerying on the server. Which we didn't

737
00:37:04,320 --> 00:37:07,000
realize this when we started doing DRX and we went

738
00:37:07,079 --> 00:37:10,519
full throat onto NDRX in one segment, but it didn't

739
00:37:10,519 --> 00:37:13,880
occur to us until after that. Because we never have

740
00:37:14,039 --> 00:37:16,440
all the data in the browser, pre filtering it on

741
00:37:16,480 --> 00:37:21,159
the server actually made NGRX almost completely useless to us

742
00:37:21,360 --> 00:37:24,920
and like a lot of overhead because every time we

743
00:37:24,960 --> 00:37:27,599
wanted to change the filters, we had to recreate the

744
00:37:27,639 --> 00:37:30,480
server anyway, and so it was essentially like a temporary

745
00:37:30,599 --> 00:37:34,880
local cache, which was not helpful. So when you get

746
00:37:34,920 --> 00:37:37,159
to the size that your project is so large you

747
00:37:37,199 --> 00:37:39,400
can't load all the data in the browser. That's also

748
00:37:39,480 --> 00:37:42,199
another kind of gotcha with NDRX.

749
00:37:41,920 --> 00:37:43,159
Speaker 4: Yep, So there is a fine line.

750
00:37:43,239 --> 00:37:47,639
Speaker 3: So definitely that's like your in memory database would do

751
00:37:47,760 --> 00:37:51,639
the or would play the role of what NGRX would.

752
00:37:51,760 --> 00:37:54,199
You know, if you're in memory database would not have

753
00:37:54,239 --> 00:37:58,800
been there. So so that is there. And again this

754
00:37:59,360 --> 00:38:02,719
angular or has provided us a lot to work with.

755
00:38:03,239 --> 00:38:06,599
This whole idea of NGI RX comes with the idea

756
00:38:06,639 --> 00:38:11,280
of reducs and React working together and people people just

757
00:38:11,360 --> 00:38:14,280
come from that reactor redex background and they expect something

758
00:38:14,400 --> 00:38:18,280
like reducts to be the savior, but then Angler already

759
00:38:18,280 --> 00:38:21,280
has it in the form of services, where you know

760
00:38:21,320 --> 00:38:24,920
it's a Singleton. You have your data in one place

761
00:38:25,199 --> 00:38:29,400
and you can you know, basically check that data anywhere

762
00:38:29,400 --> 00:38:32,079
that you want to, and at times you don't even

763
00:38:32,119 --> 00:38:35,639
have to use subject an observable pattern. So services are there,

764
00:38:35,719 --> 00:38:37,880
you know, in Angular and we're good that way. So

765
00:38:38,039 --> 00:38:39,119
that is that is there.

766
00:38:39,280 --> 00:38:41,559
Speaker 5: Of course you absolutely the nail and the head with that,

767
00:38:41,599 --> 00:38:46,079
you know. I worked with a young developer a year

768
00:38:46,159 --> 00:38:49,480
or so ago who had come from a strictly React

769
00:38:49,519 --> 00:38:53,079
background but onto a onto an Angular project. Like literally

770
00:38:53,079 --> 00:38:56,039
the first thing he did was just just added and

771
00:38:56,159 --> 00:39:00,760
direx into the project and like request, like what we're doing, Well,

772
00:39:01,159 --> 00:39:02,800
you need it, you know, you need the state management.

773
00:39:02,840 --> 00:39:04,440
Speaker 7: It's like I get it.

774
00:39:04,519 --> 00:39:06,840
Speaker 5: I totally get where it's coming from, you know, because

775
00:39:06,880 --> 00:39:10,519
you you've come just as you said, you know, it's

776
00:39:10,559 --> 00:39:13,920
come from a development environment where state management is a

777
00:39:14,039 --> 00:39:16,199
is a widely used thing. But just you know, Angular

778
00:39:16,239 --> 00:39:18,199
handles so much of that for you. This is this

779
00:39:18,239 --> 00:39:20,079
is part of my my sort of bug bear with

780
00:39:20,079 --> 00:39:22,760
with nj AX, and I now I now have grown

781
00:39:22,800 --> 00:39:25,079
to the point where I don't dislike it because I've

782
00:39:25,159 --> 00:39:28,239
used it enough in places where it's been useful that

783
00:39:28,400 --> 00:39:31,960
it's it's made my life easier. But it's yeah, people's

784
00:39:32,000 --> 00:39:34,320
obsession with just adding it because they think we need

785
00:39:34,360 --> 00:39:37,480
it because it's a thing that exists. But actually, you know,

786
00:39:37,519 --> 00:39:40,559
Angler's state management is is great a lot of the

787
00:39:40,599 --> 00:39:44,159
time until it's not until you get an expression changed

788
00:39:44,199 --> 00:39:46,519
after it was checked there, and it's not great.

789
00:39:48,480 --> 00:39:49,000
Speaker 4: Yeah.

790
00:39:49,079 --> 00:39:53,039
Speaker 3: So so again, I mean this is all nothing, nothing

791
00:39:53,039 --> 00:39:55,719
against anger exist to clarify. Every one of us whould agree.

792
00:39:56,360 --> 00:39:58,679
It's just that as a developer we should have the

793
00:39:58,719 --> 00:40:01,280
capacity of making a this and when to use stuff

794
00:40:01,280 --> 00:40:04,320
and when not to. You should not just be using

795
00:40:04,360 --> 00:40:08,079
things because you can. With great power comes great responsibility.

796
00:40:08,159 --> 00:40:11,280
So that's the responsibility that you have, you know. So

797
00:40:11,280 --> 00:40:14,199
so that is is there's a very classic one, but

798
00:40:14,320 --> 00:40:14,960
that is true.

799
00:40:15,480 --> 00:40:15,920
Speaker 7: Absolutely.

800
00:40:15,920 --> 00:40:20,400
Speaker 5: Bonus points for the Spider Man quote at least ten

801
00:40:20,599 --> 00:40:21,880
bonus points.

802
00:40:23,079 --> 00:40:25,119
Speaker 1: Is that where it originated, because I've heard it in

803
00:40:25,159 --> 00:40:26,360
so many places?

804
00:40:26,599 --> 00:40:30,079
Speaker 3: Yeah, yeah, the first Spider Man, I guess I heard it.

805
00:40:31,559 --> 00:40:33,360
Speaker 7: I dare you even ask that question?

806
00:40:34,800 --> 00:40:35,400
Speaker 2: My bad.

807
00:40:35,480 --> 00:40:40,119
Speaker 1: Apparently Spider Man is more sacred than state management to Chris, So.

808
00:40:40,760 --> 00:40:42,360
Speaker 7: You can't say it because the position of my webcom

809
00:40:42,559 --> 00:40:43,000
I've got a.

810
00:40:44,880 --> 00:40:49,920
Speaker 2: Right spider Man right right next to your minecraft.

811
00:40:50,000 --> 00:40:55,320
Speaker 5: Pick right here, there's one I can't reach. I love

812
00:40:55,360 --> 00:40:57,800
Spider Man anyway.

813
00:40:57,079 --> 00:41:01,199
Speaker 4: Nice, So I made Spider Man now or.

814
00:41:03,000 --> 00:41:04,840
Speaker 7: Ie going for hours?

815
00:41:04,840 --> 00:41:08,840
Speaker 1: If we did that, they're actually coming up on the

816
00:41:08,880 --> 00:41:11,440
top of the hour Rabbi, and I was wondering, is

817
00:41:11,440 --> 00:41:15,079
there any like last closing statements that you'd like to

818
00:41:15,079 --> 00:41:18,559
say before we move on to pics about just really

819
00:41:18,679 --> 00:41:23,119
you know, component communication and what you suggest people do

820
00:41:23,440 --> 00:41:24,880
and resources, et cetera.

821
00:41:26,519 --> 00:41:30,840
Speaker 3: So what I suggest, like not not only component communication,

822
00:41:30,960 --> 00:41:33,880
but more of a general thing whenever you want to Like,

823
00:41:34,079 --> 00:41:37,360
this is for the learners, because I think along with

824
00:41:37,400 --> 00:41:39,639
the developers, there would be people who might want to

825
00:41:39,679 --> 00:41:42,440
learn Angler who might be listening to this particular podcast.

826
00:41:42,760 --> 00:41:45,199
So if you want to learn something, just go to

827
00:41:45,239 --> 00:41:49,199
the official documentation and that's it, all right, So you

828
00:41:49,239 --> 00:41:51,440
don't have to most of the time, you don't have

829
00:41:51,480 --> 00:41:55,960
to hop around seeing long videos just to implement certain things.

830
00:41:56,039 --> 00:41:59,079
You know, official documentations are great as far as Angler

831
00:41:59,159 --> 00:42:01,760
is concerned, it's awesome. That is that is where I

832
00:42:01,880 --> 00:42:04,840
learn most of the things from, and then I go

833
00:42:04,920 --> 00:42:07,199
to the videos if something like some people might have

834
00:42:07,239 --> 00:42:10,239
some different thought process, and that is also important to

835
00:42:10,280 --> 00:42:14,119
grasp no disrespect to anyone, So we might just we

836
00:42:14,199 --> 00:42:18,000
might just want to have the documentation to be preferred first.

837
00:42:18,239 --> 00:42:22,960
Then the rest of about component communication, services, subject and observable,

838
00:42:23,199 --> 00:42:25,800
Like you should know what a subject is, you should

839
00:42:25,840 --> 00:42:28,840
know what a behavior subject is and observable is, and

840
00:42:29,480 --> 00:42:31,840
you know how to implement it. Maybe you know, if

841
00:42:31,880 --> 00:42:34,599
you want to have reactive local storage, you might want

842
00:42:34,639 --> 00:42:37,119
to go for a behavior subject. But if you don't

843
00:42:37,159 --> 00:42:40,119
want to do that, that is also possible. So RXGS

844
00:42:40,239 --> 00:42:43,400
is also not the answer to everything. So with for example,

845
00:42:44,039 --> 00:42:46,920
you know, last example I would give is that if

846
00:42:47,199 --> 00:42:49,960
for example, I have my user and my token in

847
00:42:49,960 --> 00:42:53,360
my local storage, and I have a user service getting

848
00:42:53,360 --> 00:42:56,159
that local storage for me, it is not necessary for

849
00:42:56,239 --> 00:42:58,679
me to use any RXTS concept. Still it would be

850
00:42:58,800 --> 00:43:03,480
reactive because that's how services in Angular work. So so

851
00:43:03,480 --> 00:43:05,960
so basically, the bottom line is Angular has provided us

852
00:43:06,000 --> 00:43:09,159
a lot of things to work with, and it is

853
00:43:09,800 --> 00:43:13,000
it is just not fair to go for other options

854
00:43:13,599 --> 00:43:16,920
unless you already have tried your hand on the existing

855
00:43:16,960 --> 00:43:19,719
ones and you know, if that doesn't work for you,

856
00:43:19,760 --> 00:43:23,360
then go for external resources. Because we don't want to

857
00:43:23,360 --> 00:43:26,840
make our app heavier than it is already you know, so,

858
00:43:26,840 --> 00:43:28,360
so that is that is basically what it is.

859
00:43:28,840 --> 00:43:30,119
Speaker 2: Wonderful, wonderful.

860
00:43:30,440 --> 00:43:35,199
Speaker 1: Well, I honestly I really loved listening to you explain things,

861
00:43:35,280 --> 00:43:38,360
and the examples you had were just incredible. I think

862
00:43:38,880 --> 00:43:42,519
it really lent a great hand to audio only podcasts.

863
00:43:42,559 --> 00:43:44,880
I think, so thank you for the coming on and

864
00:43:44,920 --> 00:43:48,280
teaching us and walking through things. Before we jump over

865
00:43:48,360 --> 00:43:50,119
to pics, I just wanted to say that I can

866
00:43:50,159 --> 00:43:53,639
see why people like seek you out for training because

867
00:43:53,880 --> 00:43:55,800
I could clearly listen to you talk all day.

868
00:43:55,920 --> 00:44:01,719
Speaker 3: So the thing is just a fun fact. The other day,

869
00:44:01,880 --> 00:44:04,719
like every time I review my video, I just sleep

870
00:44:04,760 --> 00:44:07,360
halfway down, you know, I just fell asleep. I just

871
00:44:07,440 --> 00:44:10,079
fall asleep when I just review my own videos that

872
00:44:10,119 --> 00:44:10,559
I record.

873
00:44:10,599 --> 00:44:10,760
Speaker 4: You know.

874
00:44:11,119 --> 00:44:13,719
Speaker 3: So, I don't know about others, but I don't really

875
00:44:13,840 --> 00:44:16,079
enjoy listening to myself that much.

876
00:44:18,119 --> 00:44:24,320
Speaker 5: Great great advertisement there for your I put myself to sleep, guys.

877
00:44:27,760 --> 00:44:29,880
Speaker 1: I make it a rule of thumb never to listen

878
00:44:29,920 --> 00:44:36,519
to myself. So, so, does anybody have picks Eddie or

879
00:44:36,599 --> 00:44:38,199
Chris before we let Rabi.

880
00:44:38,239 --> 00:44:39,000
Speaker 2: Do some pics.

881
00:44:39,239 --> 00:44:40,280
Speaker 7: Yeah, I got one pick.

882
00:44:40,519 --> 00:44:44,519
Speaker 5: The whole of like social media, certainly in my social

883
00:44:44,519 --> 00:44:47,320
media feed is just full of people obsessing over animal

884
00:44:47,360 --> 00:44:50,559
crossing at the moment looking at Eddie, now he's one

885
00:44:50,559 --> 00:44:57,599
of them. Naturally, I've done the only sensible thing. And

886
00:44:57,639 --> 00:45:00,960
I recently acquired a copy of Pokemon Sword for my

887
00:45:01,079 --> 00:45:04,000
switch and I've been really enjoying it. It's really good.

888
00:45:04,760 --> 00:45:07,480
I'm trying to resist the animal crossing bandwagon. But I

889
00:45:07,519 --> 00:45:09,280
feel like that raccoons coming after me.

890
00:45:10,480 --> 00:45:11,440
Speaker 6: He's hunting you down.

891
00:45:12,559 --> 00:45:14,639
Speaker 1: Literally, there's a raccoon chasing you.

892
00:45:14,920 --> 00:45:18,159
Speaker 5: Because you know, I don't think we have raccoons over here,

893
00:45:18,239 --> 00:45:20,679
so I think I'm probably all right. We got our

894
00:45:20,679 --> 00:45:25,159
own stuff. But yes, my pig Pokemon, I enjoy it nice.

895
00:45:25,440 --> 00:45:28,440
Speaker 6: Yeah, I've got two picks. One I don't think I've

896
00:45:28,440 --> 00:45:31,719
said this before. If I have, we'll repeat pick. But

897
00:45:32,840 --> 00:45:36,760
one pick is century like a guard s E n

898
00:45:36,840 --> 00:45:39,079
t r o I. It's a service that allows you

899
00:45:39,199 --> 00:45:43,920
to report basically like jobscript errors and stuff to a

900
00:45:44,440 --> 00:45:48,079
third party server so that you can then see, like

901
00:45:48,880 --> 00:45:52,039
you know, of your software installation, like what errors are

902
00:45:52,039 --> 00:45:54,840
coming back and so for a long time, like we've

903
00:45:54,840 --> 00:45:58,679
had no way like we find bugs with our QA team,

904
00:45:59,079 --> 00:46:01,880
like through our usage, but we have you know, if

905
00:46:01,880 --> 00:46:04,239
a customer doesn't say, hey, I have this bug, like

906
00:46:04,679 --> 00:46:07,519
we have no way to know. And so we've started

907
00:46:07,519 --> 00:46:10,960
implementing that and it's really interesting just to be able

908
00:46:11,000 --> 00:46:13,880
to suddenly have an error pop up on a dashboard

909
00:46:13,920 --> 00:46:16,920
and be like, oh wow, like okay, someone ran into

910
00:46:16,960 --> 00:46:18,519
the air, like and it shows you where in the

911
00:46:18,559 --> 00:46:21,639
code as if you're looking at the JavaScript console and

912
00:46:21,679 --> 00:46:24,119
it shows like what they clicked on just before and stuff.

913
00:46:24,159 --> 00:46:25,920
So we haven't gotten to use a whole whole lot,

914
00:46:26,039 --> 00:46:29,559
but definitely started to dive into it and it's really exciting.

915
00:46:29,760 --> 00:46:32,880
So I am super excited about that. And my second

916
00:46:32,920 --> 00:46:35,920
pick is so I was one of those Evernote people

917
00:46:36,440 --> 00:46:39,639
that like started putting everything in EVERYNOE when it came

918
00:46:39,679 --> 00:46:41,719
out with the web clipper and everything, and it was

919
00:46:41,760 --> 00:46:45,360
like my brain for everything. And then they went through

920
00:46:45,400 --> 00:46:47,760
all their changes and nothing against every note, but I

921
00:46:47,760 --> 00:46:50,960
got less excited about EVERYNOE. The problem is I had

922
00:46:51,000 --> 00:46:55,880
no replacement, and so I've just gone without an external brain,

923
00:46:56,119 --> 00:47:01,159
which is not super helpful. And so this I found Notion,

924
00:47:01,519 --> 00:47:04,559
which I'm probably late to the notion train. Probably everyone

925
00:47:04,559 --> 00:47:08,840
else knows about notion, but Notion essentially like allows you

926
00:47:08,880 --> 00:47:12,639
to kind of replace like Google Docs, and it has

927
00:47:12,800 --> 00:47:16,239
some like kind of basic like task tracking stuff in

928
00:47:16,280 --> 00:47:20,360
it and like stuff. But for me, it seems like

929
00:47:20,400 --> 00:47:22,239
a really big replacement for ever Note, where I can

930
00:47:22,320 --> 00:47:23,920
just kind of put all my thoughts in there. I

931
00:47:23,920 --> 00:47:26,239
can take notes in there. It has a web clipper,

932
00:47:26,400 --> 00:47:28,440
and so if I'm on a website, I can be like, hey,

933
00:47:28,960 --> 00:47:32,199
grab this HTML, throw it into a page and Notion.

934
00:47:32,639 --> 00:47:35,159
So I'm just getting started with it this week, but

935
00:47:35,280 --> 00:47:39,119
I am really excited to have a replacement for ever

936
00:47:39,159 --> 00:47:42,559
Note after my long dark the like.

937
00:47:43,440 --> 00:47:46,880
Speaker 1: To use the client on like the app, or to

938
00:47:47,039 --> 00:47:50,039
use like inside the browser, Like how do you use it?

939
00:47:50,280 --> 00:47:54,400
Speaker 6: Yeah, so I have an app on my Mac and

940
00:47:54,480 --> 00:47:56,639
then and I haven't started. I know there's an app

941
00:47:56,679 --> 00:47:59,440
FM on iPhone, but I haven't done that yet. But yeah,

942
00:47:59,440 --> 00:48:02,000
in the webread like I use a web clipper plug

943
00:48:02,000 --> 00:48:05,079
in for the browser. But then the actual engaging with

944
00:48:05,320 --> 00:48:08,559
the material I use in the Mac app.

945
00:48:08,519 --> 00:48:09,639
Speaker 2: Okay cool.

946
00:48:09,920 --> 00:48:14,000
Speaker 1: I've been addicted to Dropbox paper for a while now,

947
00:48:14,119 --> 00:48:20,880
but sometimes the like offline experience can be painful. So

948
00:48:20,880 --> 00:48:23,079
so yeah, I will definitely check out Notion.

949
00:48:23,280 --> 00:48:24,000
Speaker 2: It's a great pick.

950
00:48:24,119 --> 00:48:27,639
Speaker 6: Yeah, for sure, It's pretty cool, So that's mine awesome.

951
00:48:28,519 --> 00:48:31,440
Speaker 1: I've been playing around with the Oculus quest lately. My

952
00:48:31,519 --> 00:48:34,239
work sent me and the other advocates on my team

953
00:48:34,280 --> 00:48:36,840
one they said, hey, we want you to start programming

954
00:48:36,880 --> 00:48:40,880
in Unity and making online events for people, and I

955
00:48:40,920 --> 00:48:43,679
was like, that's crazy cool. So I've actually never put

956
00:48:43,719 --> 00:48:46,719
on a headset before this, so if you haven't, then

957
00:48:46,760 --> 00:48:49,400
you get an opportunity to. I definitely suggested because I

958
00:48:49,480 --> 00:48:52,559
was one of those naysayers. I was like, it's not

959
00:48:52,760 --> 00:48:57,280
going to be that cool, and it literally blew my mind.

960
00:48:57,440 --> 00:48:59,559
So definitely, if you get a chance to put on

961
00:48:59,599 --> 00:49:02,480
a VR headset, I would recommend trying it out.

962
00:49:03,280 --> 00:49:07,719
Speaker 2: So yeah, that's my pick. But also Ravi is my pick.

963
00:49:07,840 --> 00:49:10,800
Speaker 1: I'm actually so I'm so excited to have met you

964
00:49:11,000 --> 00:49:13,960
and follow you on all the social medias, So can

965
00:49:14,000 --> 00:49:16,480
you please tell us where people can find you and

966
00:49:16,559 --> 00:49:18,000
reach out to you and learn from you.

967
00:49:18,440 --> 00:49:22,000
Speaker 3: So I have my YouTube channel goes by my name itself,

968
00:49:22,079 --> 00:49:27,920
Rubb Valiat, and I have some Angular tutorials going on

969
00:49:28,039 --> 00:49:33,119
right now in that particular channel itself, so you would

970
00:49:33,199 --> 00:49:35,880
have you'd be able to, you know, see the tutorials here.

971
00:49:36,280 --> 00:49:39,880
And then my last name Valiate dot com is my

972
00:49:39,960 --> 00:49:43,239
website or my contact info is provided in there. Anyone

973
00:49:43,280 --> 00:49:47,079
who wants to basically share any thoughts or maybe ask

974
00:49:47,079 --> 00:49:50,239
any questions, they can directly. I get emails from people

975
00:49:50,280 --> 00:49:53,360
asking some doubts or questions or you know, some problems

976
00:49:53,360 --> 00:49:56,039
that they have with their projects and all, and I

977
00:49:56,079 --> 00:49:59,039
try my best to, you know, answer them basically to

978
00:49:59,039 --> 00:50:00,000
the best of my abilities.

979
00:50:00,559 --> 00:50:03,719
Speaker 4: So so that's where. And then you can follow my Twitter.

980
00:50:03,599 --> 00:50:07,599
Speaker 3: Same name, you know, So so there are base if

981
00:50:07,599 --> 00:50:11,480
you just google my name, I think my website might

982
00:50:11,519 --> 00:50:13,000
come up, so that is also there.

983
00:50:13,079 --> 00:50:14,800
Speaker 4: These are the ones that you can follow.

984
00:50:15,000 --> 00:50:17,039
Speaker 1: Yeah, and I want to spell it, so it's our

985
00:50:17,079 --> 00:50:19,119
A V I it's his first name, and then V

986
00:50:19,360 --> 00:50:22,519
E l I y A T for his last name.

987
00:50:22,559 --> 00:50:26,840
Speaker 2: So definitely worth to follow. A very cool cat. So

988
00:50:27,360 --> 00:50:28,519
thank you well.

989
00:50:28,400 --> 00:50:32,400
Speaker 1: Awesome, Thank you gentlemen for the marvelous episode today. Uh

990
00:50:32,880 --> 00:50:37,519
everyone has fun and safe programming for this afternoon and

991
00:50:37,639 --> 00:50:39,039
we'll see you guys for the next one.

992
00:50:39,079 --> 00:50:40,000
Speaker 2: So thank you so much.

993
00:50:40,519 --> 00:50:43,960
Speaker 4: Thank you, Thank you everyone, Thank you for having me here.

994
00:50:44,159 --> 00:50:47,599
Yea great chase everyone, Bye, thank you Bye.