1
00:00:06,200 --> 00:00:09,279
Speaker 1: Hey everybody, and welcome to another episode of Adventures in Angular.

2
00:00:09,679 --> 00:00:12,759
This week on our panel we have Brooks Foresight. Hey everyone,

3
00:00:13,160 --> 00:00:17,320
Eddie Hinkle, what's going on? Chris Ford and Lou and

4
00:00:17,480 --> 00:00:20,399
Charles Maxwood from devchat dot tv. We have a special

5
00:00:20,399 --> 00:00:22,719
guest this week and that is Niel.

6
00:00:23,239 --> 00:00:24,679
Speaker 2: Hi everyone, if.

7
00:00:24,600 --> 00:00:26,559
Speaker 1: You want to just introduce yourself real quick, let us

8
00:00:26,600 --> 00:00:28,079
know who you are while you're famous.

9
00:00:28,519 --> 00:00:31,640
Speaker 3: Sure, so yeah again, Hi everyone, I am My name

10
00:00:31,679 --> 00:00:34,920
is Nishigil and I work as a software developer at IBM.

11
00:00:35,479 --> 00:00:38,560
I am recently being recognized as a Google Google developer

12
00:00:38,600 --> 00:00:41,719
expert in Angular and with technologies. I love writing blog

13
00:00:41,759 --> 00:00:45,359
posts around the concepts of Angular, and I also paid

14
00:00:45,359 --> 00:00:47,479
code labs, which you can refer to if you're stuck

15
00:00:47,479 --> 00:00:49,840
anywhere with any any code activities.

16
00:00:50,039 --> 00:00:51,359
Speaker 2: So yeah, thank you for having me.

17
00:00:51,479 --> 00:00:54,320
Speaker 1: Faz, Yeah, no problem. We got you on to talk

18
00:00:54,399 --> 00:00:58,600
about your article that was written oh last year. I

19
00:00:58,640 --> 00:01:00,359
was like, oh, this is real recent and it is

20
00:01:00,479 --> 00:01:02,880
kind of but the number of last year you wrote

21
00:01:02,960 --> 00:01:06,599
an article creating framework agnostic web components with Angular. Do

22
00:01:06,640 --> 00:01:07,920
you do you want to just kind of give us

23
00:01:07,920 --> 00:01:10,640
the ten thousand foot view on this that the general

24
00:01:10,640 --> 00:01:13,200
outline of what we're talking about here, and then we

25
00:01:13,239 --> 00:01:15,040
can have a conversation about what it means.

26
00:01:15,439 --> 00:01:15,840
Speaker 2: Sure.

27
00:01:16,040 --> 00:01:18,519
Speaker 3: So first of all, the idea behind this, why I

28
00:01:18,640 --> 00:01:21,640
chose to write about it was the setting that I

29
00:01:21,760 --> 00:01:24,879
work in at IBM. At my workplace is more like

30
00:01:24,959 --> 00:01:27,840
a garage concept. Now, what it really means is that

31
00:01:28,000 --> 00:01:30,400
we don't really work on a long term project which

32
00:01:30,480 --> 00:01:34,120
has one you know, tech stack involved. It's more like

33
00:01:34,159 --> 00:01:37,680
different clients coming in different text tech stack involved. So

34
00:01:38,359 --> 00:01:40,680
that's that's when you know the need of web components

35
00:01:40,719 --> 00:01:44,120
really jumps in. We have Angular for two months, let's say,

36
00:01:44,120 --> 00:01:47,079
but then React for another five months, and that's when

37
00:01:47,239 --> 00:01:50,719
creating one component and then you know maybe having the

38
00:01:50,760 --> 00:01:53,239
need to create it again with any other technology or

39
00:01:53,280 --> 00:01:56,319
any other framework is not really a smart thing to do, right,

40
00:01:56,879 --> 00:02:01,120
So what I really do at my workplace is building

41
00:02:01,159 --> 00:02:03,840
a component, exporting it as a web element, be it

42
00:02:03,920 --> 00:02:07,120
with with any framework or without any framework, pushing it

43
00:02:07,159 --> 00:02:09,879
to the Internet repository, and then using it in any

44
00:02:09,919 --> 00:02:13,159
other framework based project that we are working with. So

45
00:02:13,240 --> 00:02:15,680
I think that's the main reason why I chose to

46
00:02:15,800 --> 00:02:19,439
write behind write about web components, and then Angular is

47
00:02:19,439 --> 00:02:23,280
my forte So with Angular elements is the go to

48
00:02:23,520 --> 00:02:24,120
about this.

49
00:02:24,759 --> 00:02:29,759
Speaker 1: Block post right and web components. My understanding talking to

50
00:02:29,759 --> 00:02:33,199
people is that they pretty much run everywhere. There are

51
00:02:33,240 --> 00:02:37,680
different specifications, but it's it's pretty direct. So how does

52
00:02:37,719 --> 00:02:40,759
Angular elements actually tie into this because it seems like

53
00:02:40,800 --> 00:02:44,120
that's also supposed to run everywhere. But I've not gotten

54
00:02:44,240 --> 00:02:46,919
like the clear rundown as to what the difference is.

55
00:02:47,400 --> 00:02:49,360
Speaker 3: So if you look at it, the way we do

56
00:02:49,400 --> 00:02:52,960
property binding, event binding and Angular is almost similar to

57
00:02:53,000 --> 00:02:56,360
how web components work. There also, we do property binding

58
00:02:56,560 --> 00:02:59,000
just using a property and you know, passing it any

59
00:02:59,080 --> 00:03:02,759
value that we want to. For example, we have built

60
00:03:02,800 --> 00:03:07,520
a web component or a custom element using polymer, and

61
00:03:07,560 --> 00:03:09,800
that's when you know, we want all the properties to

62
00:03:09,840 --> 00:03:13,240
be coming in from some other component as an encapsulated

63
00:03:13,360 --> 00:03:16,719
value or any any dorm node as such. That's when

64
00:03:16,800 --> 00:03:19,400
we just simply, you know, we pass in the template

65
00:03:19,680 --> 00:03:22,719
I mean or the property and the event. This is

66
00:03:22,800 --> 00:03:25,439
exactly what we do in Angler with the custom selector

67
00:03:25,479 --> 00:03:28,520
that we use. So I think Angler was built with

68
00:03:28,599 --> 00:03:31,319
respect to, you know, thinking that we can use it

69
00:03:31,759 --> 00:03:35,759
use a component as a custom element. So it pretty

70
00:03:35,800 --> 00:03:39,400
much aligns with how web components work and the specifications.

71
00:03:39,439 --> 00:03:42,000
If you look at those, they're also very similar customer

72
00:03:42,039 --> 00:03:45,680
elements being the linchpinnefit because that's what the main role

73
00:03:45,719 --> 00:03:48,879
of web components are is. And just like we use

74
00:03:49,280 --> 00:03:54,120
view encapsulation using shadow dom in there to encapsulate the CSS,

75
00:03:54,159 --> 00:03:57,000
the styling, and the dom nodes from the rest of

76
00:03:57,039 --> 00:04:01,240
our consuming application, that's exactly what we do in Angular again,

77
00:04:01,840 --> 00:04:04,639
so yeah, pretty much. Am I able to make it

78
00:04:04,680 --> 00:04:08,520
clear to you how Angular elements aligned with web components

79
00:04:08,520 --> 00:04:09,039
in general?

80
00:04:09,599 --> 00:04:09,800
Speaker 4: Yeah?

81
00:04:09,840 --> 00:04:13,759
Speaker 1: I think so. I am curious then, does Angular elements

82
00:04:13,759 --> 00:04:18,040
actually compile down to web components in some way or

83
00:04:18,839 --> 00:04:20,759
is it it's kind of a light weight Angular that

84
00:04:20,839 --> 00:04:23,720
you tree shake everything out and throws. I don't know.

85
00:04:24,639 --> 00:04:27,000
Speaker 2: Yeah, so pretty much. Not not really.

86
00:04:27,040 --> 00:04:29,240
Speaker 3: So it's like a lot of Angular code is still

87
00:04:29,319 --> 00:04:33,439
involved in the bundle that we create. Obviously, officially it's

88
00:04:33,480 --> 00:04:36,000
not yet supported to you know, export that bundle use

89
00:04:36,040 --> 00:04:37,199
it in any other framework.

90
00:04:37,519 --> 00:04:39,120
Speaker 2: So in Angular we can use.

91
00:04:39,040 --> 00:04:42,079
Speaker 3: It as a web component, but outside in any other

92
00:04:42,120 --> 00:04:45,240
framework it's still not officially supported. But then we have

93
00:04:45,399 --> 00:04:47,839
other community projects that are helping us with that.

94
00:04:48,199 --> 00:04:50,439
Speaker 2: So for example, NGX.

95
00:04:50,160 --> 00:04:52,759
Speaker 3: Built plus if you've heard of that, that allows us

96
00:04:52,759 --> 00:04:55,720
to create a single bundle of the code of the

97
00:04:55,759 --> 00:04:59,040
component that we have created as a web component, and

98
00:04:59,079 --> 00:05:02,920
then we can use the web component in a React

99
00:05:03,000 --> 00:05:07,160
framework project maybe or any Vanilla Javisk project as well.

100
00:05:07,680 --> 00:05:10,560
Speaker 5: So there's there's a community project that lets us do that.

101
00:05:10,680 --> 00:05:13,439
I guess it's it's not out of the box yet, but.

102
00:05:14,000 --> 00:05:18,079
Speaker 3: Right, okay, it's called dx built plus. It's it's not

103
00:05:18,199 --> 00:05:21,120
just for that purpose, but many other purposes as well.

104
00:05:21,279 --> 00:05:23,519
I mean, if you want to compile down to a

105
00:05:23,639 --> 00:05:26,240
very small bundle, not just for Angular elements, but for

106
00:05:26,800 --> 00:05:29,360
you know, other purposes as well when it comes to

107
00:05:29,439 --> 00:05:31,839
dependency injection or other things.

108
00:05:32,240 --> 00:05:33,720
Speaker 4: Sounds cool. Should take a look at it.

109
00:05:34,199 --> 00:05:38,120
Speaker 6: Now, do you guys tend to just build straight web

110
00:05:38,160 --> 00:05:41,040
components and then use them in your Angular projects or

111
00:05:41,040 --> 00:05:44,319
in your React products or do you actually build it

112
00:05:44,399 --> 00:05:48,560
using Angular elements and then use build plus to export.

113
00:05:49,079 --> 00:05:50,680
Speaker 1: I guess where do you start, right?

114
00:05:50,759 --> 00:05:52,519
Speaker 6: Is it the web component level or do you actually

115
00:05:52,560 --> 00:05:54,360
start in a framework and export it.

116
00:05:54,720 --> 00:05:56,800
Speaker 3: So the basic idea is to create a lot of

117
00:05:56,879 --> 00:05:59,839
components so that you know, we align with the reuse

118
00:05:59,879 --> 00:06:03,000
it ability at our workplace, and a lot of components

119
00:06:03,079 --> 00:06:06,000
are available for other employees as well, so that you know,

120
00:06:06,040 --> 00:06:08,920
they can just come in use a component, not really

121
00:06:08,959 --> 00:06:13,079
referring to outside components which are externally available. So that's

122
00:06:13,120 --> 00:06:15,759
the basic purpose, which means that we don't really start

123
00:06:15,759 --> 00:06:18,879
at a framework level level. We would just prefer to,

124
00:06:18,920 --> 00:06:21,279
you know, create a component and export it as a

125
00:06:21,279 --> 00:06:24,279
web component. If it's an Angular then rate, If not,

126
00:06:24,680 --> 00:06:27,720
then outside maybe you know, using stensive, jas Polymer or

127
00:06:27,759 --> 00:06:31,680
any other framework or technology to build a web component.

128
00:06:31,720 --> 00:06:32,480
Speaker 2: That's the main.

129
00:06:32,360 --> 00:06:33,639
Speaker 4: Idea, gotcha.

130
00:06:33,800 --> 00:06:37,519
Speaker 6: So regardless of where you start, you're able to still

131
00:06:37,920 --> 00:06:40,959
you know, if it's Angular, use ng export plus if

132
00:06:40,959 --> 00:06:43,839
it's you know, a different framework, you do do it.

133
00:06:43,879 --> 00:06:47,680
However they support Yeah, but they just collect it all

134
00:06:47,680 --> 00:06:50,040
into like a library of web components that you guys

135
00:06:50,120 --> 00:06:51,279
can So we call.

136
00:06:51,199 --> 00:06:54,480
Speaker 3: It the internal NBM repository and push it all there

137
00:06:54,600 --> 00:06:56,839
and then use it for our internal purposes.

138
00:06:57,120 --> 00:06:58,120
Speaker 6: Awesome, very cool.

139
00:06:58,639 --> 00:07:01,560
Speaker 2: Yeah. Has anyone has created a web component before?

140
00:07:02,040 --> 00:07:04,040
Speaker 6: Yeah, nope, I don't think so.

141
00:07:06,800 --> 00:07:09,560
Speaker 4: I've only done it on a sort of a tutorial level.

142
00:07:09,639 --> 00:07:12,319
It's it's something that I'm I am interested in that

143
00:07:12,360 --> 00:07:15,000
I want to dig into when when I can find

144
00:07:15,040 --> 00:07:18,240
time in my life to dig into stuff I've I've

145
00:07:18,279 --> 00:07:21,920
mentioned before on the podcast I've Got the Manning did

146
00:07:21,959 --> 00:07:25,120
a book published a book, Web Components and Action. I

147
00:07:25,160 --> 00:07:27,279
have that book of work through some of the examples.

148
00:07:27,360 --> 00:07:30,959
It's something that I I think it is very cool.

149
00:07:31,040 --> 00:07:33,319
I think it's going to be possibly part of the

150
00:07:33,519 --> 00:07:36,079
part of the future of front and development. But yeah,

151
00:07:36,079 --> 00:07:37,959
I haven't done. I haven't dug into it as much

152
00:07:38,000 --> 00:07:38,800
as I would like to.

153
00:07:39,560 --> 00:07:39,759
Speaker 2: Right.

154
00:07:40,199 --> 00:07:42,319
Speaker 3: The very interesting thing that you mentioned here was the

155
00:07:42,360 --> 00:07:45,680
book Web Components in Action. I was reading it sometime

156
00:07:45,759 --> 00:07:48,639
back and it really mentions a very good concept there,

157
00:07:48,639 --> 00:07:51,360
which is framework fortigue. So how many of you agree

158
00:07:51,399 --> 00:07:55,120
with that framework fatigue? Do you suffer from framework for tigue?

159
00:07:56,120 --> 00:08:00,399
Speaker 6: Yeah, I think that's definitely a thing. I mean, depending

160
00:08:00,759 --> 00:08:03,360
on the work context environment. So I think like in

161
00:08:03,439 --> 00:08:06,480
the front end world we run into that a lot.

162
00:08:06,600 --> 00:08:09,399
I think like in my job, I'm able to kind

163
00:08:09,399 --> 00:08:11,839
of be insulated from that because we can just focus

164
00:08:11,879 --> 00:08:15,040
on one and forget that anything else exists. But yeah,

165
00:08:15,040 --> 00:08:18,000
in the day to day job of you know, a

166
00:08:18,040 --> 00:08:21,600
front end developer, it's definitely tough to keep up with

167
00:08:21,600 --> 00:08:24,839
all the different frameworks and what works here and what doesn't.

168
00:08:25,319 --> 00:08:28,279
Speaker 5: I just used the best framework out there and Angular,

169
00:08:28,399 --> 00:08:31,120
so you know, no fatigue for me.

170
00:08:33,360 --> 00:08:35,840
Speaker 4: I mean, I think the main thing I see with

171
00:08:36,159 --> 00:08:38,759
or feel in terms of framework fatigue is just when

172
00:08:39,679 --> 00:08:43,480
it's more of the conversations between people who who are

173
00:08:44,480 --> 00:08:47,799
just obsessed with their framework or library of choice being

174
00:08:48,000 --> 00:08:51,399
the only good one. I like to maybe I'm very enlightened,

175
00:08:51,440 --> 00:08:53,600
but I always like to go into those arguments by

176
00:08:54,080 --> 00:08:57,200
just saying, look, all of these major frameworks, they all

177
00:08:57,480 --> 00:09:01,720
address the same issue, and all have their own ways

178
00:09:01,720 --> 00:09:03,799
of handling it, and they've all got pros and cons,

179
00:09:04,240 --> 00:09:08,200
And I get frustrated when you get someone going yeah,

180
00:09:08,200 --> 00:09:10,679
but also you'll use an angler and that sucks, you know,

181
00:09:10,799 --> 00:09:14,080
something like that. So that's where I feel fatigue.

182
00:09:14,679 --> 00:09:18,200
Speaker 3: Right. Another interesting thing with web components I just remember

183
00:09:18,360 --> 00:09:21,039
is is that you know, you don't really carry the

184
00:09:21,440 --> 00:09:25,000
framework functionality into the customer element that you will. So

185
00:09:25,080 --> 00:09:28,399
somebody who's using the custom element that you have built

186
00:09:28,600 --> 00:09:30,799
doesn't need to be an Angular expert, doesn't need to.

187
00:09:30,720 --> 00:09:31,799
Speaker 2: Be a React person.

188
00:09:32,240 --> 00:09:34,360
Speaker 3: It's just that he has to use it as another

189
00:09:34,480 --> 00:09:38,360
development or another button element because it's it's just an

190
00:09:38,519 --> 00:09:42,039
HTML element right that it compiles to so my Angular component,

191
00:09:42,120 --> 00:09:46,440
let's let's call it a spider chart, but spider chat selector.

192
00:09:46,919 --> 00:09:49,360
It's going to compile down to a lot of divs

193
00:09:49,399 --> 00:09:53,840
in there. So it's very easy for the user consumer

194
00:09:53,960 --> 00:09:56,559
to you know, understand it and doesn't really need to

195
00:09:56,639 --> 00:09:59,559
be a framework or a technology expert.

196
00:10:00,120 --> 00:10:03,799
Speaker 4: Yeah, and that's exactly what you need. Because just just

197
00:10:03,919 --> 00:10:06,840
to tell a little story, I had a colleague about

198
00:10:07,039 --> 00:10:10,919
six months to a year ago who built a help

199
00:10:10,919 --> 00:10:13,759
a tool basically for the project that we were working on,

200
00:10:13,840 --> 00:10:16,000
which was an Angular project. Now, he built this help

201
00:10:16,039 --> 00:10:18,799
a tool in view because it was because he just

202
00:10:18,840 --> 00:10:20,480
saw it as a little side project. He was doing

203
00:10:20,519 --> 00:10:24,519
it to help himself. But then of course the stakeholders

204
00:10:24,519 --> 00:10:26,480
for the project come along and say, ah, we like

205
00:10:26,559 --> 00:10:28,919
this help a tool, can we please integrate into the application.

206
00:10:29,000 --> 00:10:31,960
He had to rewrite the entire thing in Angular. Now

207
00:10:32,000 --> 00:10:33,960
if he if actually we've been able to do that

208
00:10:34,080 --> 00:10:37,639
just as web components, then presumably he could have built

209
00:10:37,639 --> 00:10:39,720
that once and we could have inserted it into any

210
00:10:39,720 --> 00:10:40,720
application he wanted.

211
00:10:41,279 --> 00:10:44,320
Speaker 1: Right, So my question is is you know, we've talked

212
00:10:44,360 --> 00:10:47,360
about the portability, but besides portability or their other advantages,

213
00:10:47,399 --> 00:10:50,919
I'm thinking performance or things like that.

214
00:10:51,600 --> 00:10:56,120
Speaker 3: Yeah, so imagine using a dynamic component in Angular. So

215
00:10:56,559 --> 00:10:58,240
there's a lot of code that you write to create

216
00:10:58,279 --> 00:11:01,399
a dynamic component right now, Instead of creating a dynamic

217
00:11:01,440 --> 00:11:04,799
component within Angular, why not just use you know, a

218
00:11:04,840 --> 00:11:08,440
component that's that's already built with some other lighter functionality,

219
00:11:08,960 --> 00:11:12,679
use it as a selector in your HTML application and

220
00:11:13,600 --> 00:11:17,440
it works. But performance definitely is an issue when you

221
00:11:17,480 --> 00:11:19,399
know you are creating a big bundle for a small

222
00:11:19,639 --> 00:11:22,960
functionality which might not really be required. For example, you know,

223
00:11:23,039 --> 00:11:25,759
if I'm if I'm wanting to build a let's say,

224
00:11:26,240 --> 00:11:28,200
what do we call it. Let's take some other example,

225
00:11:28,240 --> 00:11:29,080
not a spider chart.

226
00:11:29,759 --> 00:11:30,840
Speaker 2: So let's say.

227
00:11:30,720 --> 00:11:33,159
Speaker 3: I'm creating a slider and that's what I'm creating my

228
00:11:33,240 --> 00:11:36,600
component for. But now that it's such a small functionality,

229
00:11:36,879 --> 00:11:38,840
I don't want to create a big bundle for that

230
00:11:38,919 --> 00:11:42,440
with all the Angular functionality or any other functionality per se.

231
00:11:42,759 --> 00:11:45,159
And that's when you know, we really might have to

232
00:11:45,240 --> 00:11:48,159
reconsider that. Should we create it as a web component

233
00:11:48,440 --> 00:11:50,759
or it's good enough, you know, as a native component

234
00:11:50,960 --> 00:11:54,399
it self. So yeah, that's where performance comes into a picture.

235
00:11:54,960 --> 00:11:57,919
But web components are really helpful with micro front ends,

236
00:11:58,080 --> 00:12:00,240
and people are really you know, choosing to go with

237
00:12:00,440 --> 00:12:03,960
web components when dealing with micro funds, and you know,

238
00:12:04,000 --> 00:12:07,759
having a full application parallel to let's say one Angler

239
00:12:07,759 --> 00:12:11,000
application and then using a separate application to use the

240
00:12:11,039 --> 00:12:14,200
React functionality, but then just use a web component in place.

241
00:12:14,600 --> 00:12:17,360
Speaker 5: What's what's preventing you from doing an application just in

242
00:12:17,799 --> 00:12:21,679
web components, like just building it all web components. I

243
00:12:21,759 --> 00:12:24,639
assume there's some functionality missing from there, right, like.

244
00:12:24,720 --> 00:12:27,519
Speaker 2: Routing or in case of Angular, you.

245
00:12:27,480 --> 00:12:29,360
Speaker 4: Mean Angular or in general.

246
00:12:29,879 --> 00:12:32,919
Speaker 3: So if you look at the Ironic website, it's all

247
00:12:32,919 --> 00:12:36,840
built on built on I mean stensil Jas components, so

248
00:12:36,919 --> 00:12:40,159
you can actually that it's very performant. But yeah, with

249
00:12:40,240 --> 00:12:43,080
Angular sense it's not officially supported yet and there's a

250
00:12:43,080 --> 00:12:45,519
lot of Angular code that comes in. We don't really

251
00:12:45,679 --> 00:12:47,879
you know, you know, you're not really looking forward to

252
00:12:48,279 --> 00:12:51,720
building the full application with Angular components, which means web

253
00:12:51,759 --> 00:12:55,159
components here. But yeah, I think we people are using

254
00:12:55,200 --> 00:12:58,279
a lot of sensil zas components, polymer components I mean

255
00:12:58,360 --> 00:13:02,159
lit element now and building applications just on the basis

256
00:13:02,159 --> 00:13:02,559
of those.

257
00:13:03,120 --> 00:13:06,159
Speaker 5: Yeah, I've been using Ionic four and five, so I'm

258
00:13:06,200 --> 00:13:11,120
familiar with Stencil, I was just just Stencil compile. Is

259
00:13:11,480 --> 00:13:14,399
there a difference between Besides, I know the syntax is

260
00:13:14,480 --> 00:13:18,879
difference is different, right, you're with Stencils more React based

261
00:13:19,000 --> 00:13:22,360
kind of and you know Angular Elements obviously isn't. But

262
00:13:22,480 --> 00:13:25,039
is there a difference in what comes out at the

263
00:13:25,080 --> 00:13:29,240
other end through the compiler? Is stencil just a web

264
00:13:29,279 --> 00:13:33,360
component and Angular elements you still need this other library

265
00:13:33,399 --> 00:13:36,240
to get it to work in other frameworks.

266
00:13:36,399 --> 00:13:39,559
Speaker 3: So there's a lot of dependency on zone JS as

267
00:13:39,600 --> 00:13:43,519
of now. But then again with a lot of refactoring,

268
00:13:43,600 --> 00:13:46,840
and then you know, when it comes on officially then

269
00:13:47,080 --> 00:13:49,320
we are not really going to acquire all that. But yeah,

270
00:13:49,360 --> 00:13:52,919
obviously with sensils and Polymer, we don't really need those,

271
00:13:53,279 --> 00:13:55,399
which is why they you know, people are using those

272
00:13:55,480 --> 00:13:58,320
lighter components a lot into their applications.

273
00:13:58,559 --> 00:14:00,279
Speaker 2: But at the end of the day, it's just.

274
00:14:00,279 --> 00:14:04,159
Speaker 3: An HTML element which your browser should understand and it's

275
00:14:04,200 --> 00:14:08,360
all a lot of develments. So yeah, that's that's what

276
00:14:08,399 --> 00:14:11,000
it is at the end of the day. Also, so

277
00:14:11,240 --> 00:14:14,559
let's say you have created one component. Now the browser

278
00:14:14,600 --> 00:14:17,200
is definitely not going to through an error for that.

279
00:14:17,320 --> 00:14:19,960
It's just going to consider it as an HTML unknown

280
00:14:20,039 --> 00:14:23,759
element and ignore that if it doesn't understand it.

281
00:14:24,240 --> 00:14:25,440
Speaker 2: Do you understand what I mean?

282
00:14:25,919 --> 00:14:27,519
Speaker 5: Yeah, if it doesn't recognize that all.

283
00:14:28,320 --> 00:14:30,720
Speaker 3: Yeah, So it's not gonna say I don't understand what

284
00:14:30,799 --> 00:14:34,399
spider chart, let's say spider chart selector is. It's just

285
00:14:34,399 --> 00:14:37,039
going to ignore that because it will consider it as

286
00:14:37,039 --> 00:14:38,559
an HTML unknown element.

287
00:14:39,080 --> 00:14:42,120
Speaker 4: Okay, so that makes sense. I'm curious what is the

288
00:14:42,679 --> 00:14:46,919
what is the advantage of using Angular elements over just

289
00:14:47,080 --> 00:14:50,039
a Vanilla Web components. I mean, in my head, it

290
00:14:50,080 --> 00:14:53,399
would be that I and again from from sort of

291
00:14:53,399 --> 00:14:57,519
my my small amount of dabbling, you you've got to

292
00:14:58,039 --> 00:15:01,240
not exactly a new syntax to build a Vanilla Web component,

293
00:15:01,240 --> 00:15:02,399
but you've got to kind of learn how to do

294
00:15:02,440 --> 00:15:06,200
a new thing, whereas presumably building an Angler Elements component,

295
00:15:06,759 --> 00:15:09,200
I can just go ahead and use Angular in the

296
00:15:09,240 --> 00:15:11,559
same way that I'm used to doing it. Is that

297
00:15:11,600 --> 00:15:14,240
the main advantage or are there other advantages to doing that?

298
00:15:15,080 --> 00:15:15,159
Speaker 6: So?

299
00:15:15,440 --> 00:15:18,879
Speaker 3: Yeah, I think of it as as somebody who's developing

300
00:15:19,120 --> 00:15:21,840
an Angular application for like four to five months, because

301
00:15:21,879 --> 00:15:24,759
you're you're into a full time project maybe at your workplace,

302
00:15:25,240 --> 00:15:27,600
and a lot of your colleagues have to use the

303
00:15:27,600 --> 00:15:30,559
same thing over and over again, and you definitely don't

304
00:15:30,600 --> 00:15:32,919
want them to write the code for it because maybe

305
00:15:32,919 --> 00:15:35,039
they might be working in a React application. But it's

306
00:15:35,080 --> 00:15:38,720
the same functionality, so it's just a little extra work

307
00:15:38,840 --> 00:15:41,240
you have to export it as a web component, but

308
00:15:41,279 --> 00:15:43,720
then you know it's really adding value to the efficiency

309
00:15:43,720 --> 00:15:46,039
of the work that you're doing. So if I am,

310
00:15:46,240 --> 00:15:49,080
you know, developing five components because I'm working in an

311
00:15:49,120 --> 00:15:52,960
Angular project, I might consider building them as web components,

312
00:15:53,080 --> 00:15:56,519
and you know, it really soothes and smooths the process

313
00:15:56,600 --> 00:16:00,360
for all the other my colleagues or maybe anybody there

314
00:16:00,399 --> 00:16:03,559
who's who's who might be interested to use it. So

315
00:16:03,600 --> 00:16:06,279
I think that's that's how I consider it to be

316
00:16:06,320 --> 00:16:07,039
of great use.

317
00:16:08,120 --> 00:16:10,559
Speaker 4: Do you have do you have a preference? Would you

318
00:16:10,559 --> 00:16:13,559
go Vanilla web components or would you go Angular elements?

319
00:16:13,879 --> 00:16:15,879
Speaker 2: No preferences?

320
00:16:16,240 --> 00:16:16,720
Speaker 4: Excellent.

321
00:16:17,080 --> 00:16:19,600
Speaker 1: I'm kind of curious how do you test them? Like,

322
00:16:19,679 --> 00:16:22,960
if you pull a web component in, how do you

323
00:16:22,960 --> 00:16:24,279
go about testing it to make sure it does what

324
00:16:24,279 --> 00:16:24,919
it's supposed to do.

325
00:16:25,320 --> 00:16:28,720
Speaker 3: I have not really been I'm not into testing as such,

326
00:16:28,840 --> 00:16:31,039
so no idea on that.

327
00:16:31,600 --> 00:16:33,840
Speaker 4: I think you can't you just use uh, you know,

328
00:16:33,879 --> 00:16:36,840
your your normal front end unit testing library choice or

329
00:16:36,879 --> 00:16:38,840
do you mean like to end testing or do you

330
00:16:38,879 --> 00:16:41,080
mean like unit tests? Because I mean I meant like

331
00:16:41,200 --> 00:16:43,639
unit tests. I would imagine you could just use you know,

332
00:16:44,120 --> 00:16:48,720
just or trans Yeah, yeah, just tell it because it's

333
00:16:48,720 --> 00:16:50,600
it's just it's just JavaScript. At the end of the day,

334
00:16:50,679 --> 00:16:51,679
right click it.

335
00:16:51,720 --> 00:16:52,720
Speaker 1: Did it trigger the theme?

336
00:16:53,360 --> 00:16:56,960
Speaker 4: Yeah? Yeah, fair enough, I should have a looker. I'll

337
00:16:56,960 --> 00:16:58,440
have a look at the at the manning. But because

338
00:16:58,480 --> 00:17:00,679
I'm sure it's got chapter on testing, I'll come back

339
00:17:00,679 --> 00:17:01,919
to you with a hot update.

340
00:17:02,720 --> 00:17:04,839
Speaker 5: Let's say if I have just a regular, you know,

341
00:17:04,960 --> 00:17:08,759
dumb Angular component, how much work is involved into turning

342
00:17:08,839 --> 00:17:10,920
that into an Angular Element component?

343
00:17:11,559 --> 00:17:11,799
Speaker 2: Right?

344
00:17:12,240 --> 00:17:17,160
Speaker 3: So, first of all, that okay, earlier, I mean before

345
00:17:17,279 --> 00:17:20,680
Angular AID, you had to consider creating it as an

346
00:17:20,799 --> 00:17:23,759
entry component and declare it in the entry component's ERIC.

347
00:17:23,839 --> 00:17:26,279
But now that IVY has come in, you don't really

348
00:17:26,319 --> 00:17:30,000
need to declare one component as an entering component. It

349
00:17:30,359 --> 00:17:34,240
would be considered an entering component already. That's one thing

350
00:17:34,319 --> 00:17:37,240
which we used to do before Angular AID. Another thing,

351
00:17:37,319 --> 00:17:40,839
you need to woodstrap your module, whichever module has that

352
00:17:41,240 --> 00:17:44,519
component in it. Let's say, if you don't want Angular

353
00:17:44,559 --> 00:17:47,599
application to bootstrap the module that you're looking for, you

354
00:17:47,640 --> 00:17:52,039
can you avoid bootstrapping it and then manually, you know,

355
00:17:52,160 --> 00:17:55,400
use the ng to woodstrap method. That's where you write

356
00:17:55,440 --> 00:17:58,839
the code for creating the custom element. Now that's when

357
00:17:58,880 --> 00:18:01,960
the role of web component come in. You install it,

358
00:18:02,079 --> 00:18:04,720
install the package web Components, and then use the custom

359
00:18:04,799 --> 00:18:08,200
Elements API. Then there's this defined method in that which

360
00:18:08,240 --> 00:18:11,920
you used to define the selector of the component that

361
00:18:11,960 --> 00:18:14,039
you're using. So let's say you want to build a

362
00:18:14,640 --> 00:18:18,480
slider component, you would define it there using the Customer

363
00:18:18,480 --> 00:18:21,079
Elements API, and then because you need to register it

364
00:18:21,119 --> 00:18:23,680
with your browser, that's when you'll register it with the

365
00:18:24,200 --> 00:18:26,599
I mean the selector whichever you want to give. Let's

366
00:18:26,599 --> 00:18:29,480
say you want to call it slider hyphen. Also, there's

367
00:18:29,480 --> 00:18:31,480
a convention with the naming that you give to your

368
00:18:32,079 --> 00:18:35,599
customer element. You can't just you know, call it a

369
00:18:35,640 --> 00:18:39,240
spider with a with camel case or anything. It needs

370
00:18:39,279 --> 00:18:43,759
to have a hyphen within the name of the component.

371
00:18:44,000 --> 00:18:46,519
An interesting story when I was preparing for my talk

372
00:18:46,799 --> 00:18:50,440
at Engenda recently, and that was about web components. So

373
00:18:51,440 --> 00:18:53,720
I was naming my component Hello because I was, you know,

374
00:18:54,079 --> 00:18:56,160
doing it very quickly, and I just wanted to keep

375
00:18:56,160 --> 00:18:58,759
it hello and just try it, and it didn't work

376
00:18:58,799 --> 00:19:00,920
at all, and I was like, why the hell is

377
00:19:00,920 --> 00:19:03,359
not it's not working because I tried it too many

378
00:19:03,400 --> 00:19:06,119
times before and I was using it already, but I

379
00:19:06,160 --> 00:19:08,599
didn't really focus on the convention bit. Then I thought,

380
00:19:08,640 --> 00:19:10,920
let me, let me try calling it hello there, and

381
00:19:10,960 --> 00:19:13,839
I didn't check the convention even then, and it worked.

382
00:19:14,240 --> 00:19:17,079
So that's when I understood, Okay, it's the convention, so

383
00:19:17,279 --> 00:19:19,400
it needs to we need to keep it, keep a

384
00:19:19,440 --> 00:19:22,799
hyphen in the name there. So yeah, I was talking

385
00:19:22,799 --> 00:19:26,599
about registering it with the browser, so you register it now.

386
00:19:26,640 --> 00:19:31,839
The main bit comes in anybody any less polyphylls. Polyphylls

387
00:19:31,880 --> 00:19:35,519
are a pain when you're dealing with their components because

388
00:19:36,319 --> 00:19:38,119
you need to add a lot of polyphylls and you

389
00:19:38,160 --> 00:19:42,160
need to be very particular about those. So if you're

390
00:19:42,240 --> 00:19:45,720
using Angular elements package, right there is a polyphyll which

391
00:19:45,759 --> 00:19:48,119
is a very light in size, you can use that,

392
00:19:48,359 --> 00:19:51,519
but then it's not really supporting all the different browsers.

393
00:19:51,839 --> 00:19:54,319
So that's when we choose to use the web Componence

394
00:19:54,359 --> 00:19:58,319
polyphyl We import that separately and use it inside our

395
00:19:58,519 --> 00:20:01,720
polyphils file. That's when it would support all the different

396
00:20:01,759 --> 00:20:05,680
rousers and what else do you need to do. You

397
00:20:05,720 --> 00:20:08,960
have created the web component, I mean customer element.

398
00:20:08,720 --> 00:20:10,359
Speaker 2: You have registered it with the browser.

399
00:20:11,240 --> 00:20:13,680
Speaker 3: You would declare it as an entering component if it's

400
00:20:13,720 --> 00:20:14,960
before Angular.

401
00:20:14,559 --> 00:20:17,839
Speaker 2: Aid and yes, I think that's pretty much it. You

402
00:20:17,880 --> 00:20:21,200
can use it then, Recall I didn't think, yeah, that's

403
00:20:21,480 --> 00:20:22,160
pretty much it.

404
00:20:22,759 --> 00:20:24,880
Speaker 6: We kind of touched on performance a little bit earlier,

405
00:20:24,880 --> 00:20:27,440
but I don't think in this context, like when you're

406
00:20:27,480 --> 00:20:32,319
an Angular angler is having to communicate with the web

407
00:20:32,359 --> 00:20:36,640
component with change detection and things like that, is there

408
00:20:36,680 --> 00:20:39,960
a performance that like do you notice that the web

409
00:20:40,240 --> 00:20:45,400
component doesn't work as smoothly or easily as the native

410
00:20:45,400 --> 00:20:48,519
Angular component or have you not noticed anything like that?

411
00:20:48,920 --> 00:20:52,160
Speaker 3: So I particularly didn't notice anything of that sort, because

412
00:20:52,279 --> 00:20:56,559
we usually create very small components as web components, right

413
00:20:56,880 --> 00:20:59,039
because otherwise, if it's a huge component, you would not

414
00:20:59,200 --> 00:21:02,599
consider exporting it as a web component. But yeah, it

415
00:21:02,680 --> 00:21:05,640
works very smoothly with chain detection. You just need to

416
00:21:05,680 --> 00:21:10,519
set injector service there and the dependency injection is taken

417
00:21:10,519 --> 00:21:13,319
care of. So when you are declaring your remember I

418
00:21:13,359 --> 00:21:16,480
was talking about custom elements dot define method that's where

419
00:21:16,599 --> 00:21:19,559
you can use the injector service as well, and dependency

420
00:21:19,599 --> 00:21:21,519
addction is then take taken care of.

421
00:21:22,039 --> 00:21:22,319
Speaker 4: Gosh.

422
00:21:22,440 --> 00:21:26,119
Speaker 3: Now, okay, yeah, if you're using this custom element that

423
00:21:26,160 --> 00:21:30,319
you created using Angular Elements inside an Angular application, there's

424
00:21:30,440 --> 00:21:32,240
just one thing that you need to do. So let's

425
00:21:32,240 --> 00:21:34,960
say you have another Angular application which wants to use

426
00:21:35,079 --> 00:21:38,720
a customer element which you built in this other Angle application.

427
00:21:39,079 --> 00:21:41,319
So the consuming one needs to have this schema's air

428
00:21:41,519 --> 00:21:45,279
in your engine module, which which would have custom elements schema.

429
00:21:45,559 --> 00:21:47,880
Speaker 2: You just need to define that for just to tell

430
00:21:47,960 --> 00:21:48,440
Angular that.

431
00:21:48,480 --> 00:21:50,920
Speaker 3: Okay, you might expect, you know, a component which is

432
00:21:50,960 --> 00:21:54,359
not a native Angular component, but it might come in

433
00:21:54,400 --> 00:21:58,759
as a web component custom element, and that's all about

434
00:21:58,799 --> 00:22:02,880
consuming it. So there's no no much of a hassle,

435
00:22:03,000 --> 00:22:05,599
you know, when you're dealing with web components. So yeah,

436
00:22:05,640 --> 00:22:09,599
nobody can you know, should say that, Okay, it's a

437
00:22:09,680 --> 00:22:11,759
lot of hassle and I don't really want to create

438
00:22:11,799 --> 00:22:14,240
it as a web component because it's really smoothing the

439
00:22:14,279 --> 00:22:17,920
task that you're doing and not much of the work

440
00:22:17,960 --> 00:22:18,599
to do there.

441
00:22:19,079 --> 00:22:20,200
Speaker 4: Oh cool, that's awesome.

442
00:22:20,640 --> 00:22:23,400
Speaker 1: Yeah, So one thing that I'm wondering is like what

443
00:22:23,839 --> 00:22:27,319
prompted this article in Angular in depth. I mean, was

444
00:22:27,359 --> 00:22:29,839
this something you did at work and then you reached

445
00:22:29,839 --> 00:22:32,160
out to them and said, hey, can I write an article?

446
00:22:32,519 --> 00:22:34,519
Or yeah, how did this come about?

447
00:22:35,119 --> 00:22:38,599
Speaker 3: So I actually write a blog post around Angler concepts,

448
00:22:38,880 --> 00:22:42,400
and before this as well, I was publishing articles with them.

449
00:22:42,400 --> 00:22:45,119
Speaker 2: The first time was yeah, when I approached them that

450
00:22:45,160 --> 00:22:47,000
I would like to publish it with Angler in debt.

451
00:22:47,319 --> 00:22:49,759
Speaker 3: But for this one, I mean after that first article,

452
00:22:49,799 --> 00:22:52,680
then I simply started submitting it to the publication and

453
00:22:52,720 --> 00:22:56,920
they would accept it, correct things if need be, and yeah,

454
00:22:57,160 --> 00:22:58,920
accept the article into the publication.

455
00:22:59,440 --> 00:23:00,000
Speaker 1: That makes sense.

456
00:23:00,079 --> 00:23:03,039
Speaker 3: This one is just submitting it to the publication and

457
00:23:03,400 --> 00:23:04,559
setting it right.

458
00:23:04,920 --> 00:23:07,200
Speaker 1: I guess what I'm asking because that was part of

459
00:23:07,240 --> 00:23:08,640
what I wanted to know. But the other part of

460
00:23:08,640 --> 00:23:10,799
what I wanted to know was is this something you've

461
00:23:10,839 --> 00:23:14,200
done at work or done on a personal project?

462
00:23:14,759 --> 00:23:18,039
Speaker 3: Right, I've done it at work, So, as I told

463
00:23:18,079 --> 00:23:20,640
you before, the setting in which I work, it's where

464
00:23:20,839 --> 00:23:23,799
you know, we use a lot of frameworks here. So

465
00:23:24,039 --> 00:23:26,519
if I'm working on one framework, I would create and

466
00:23:26,599 --> 00:23:29,559
there's an interesting component, let's say, I would just create it,

467
00:23:29,599 --> 00:23:32,720
push it to the repository, and anybody can use it

468
00:23:32,759 --> 00:23:35,599
in their projects. So let's say one other person is

469
00:23:35,960 --> 00:23:39,000
working for another client with another framework, they can use

470
00:23:39,039 --> 00:23:41,519
it to in their application. So that's what you made

471
00:23:41,599 --> 00:23:44,319
me actually write about it. That's when I started exploring

472
00:23:44,319 --> 00:23:47,680
a lot about their components and wrote about it.

473
00:23:48,279 --> 00:23:51,000
Speaker 1: What kinds of components then are in this shared library?

474
00:23:51,440 --> 00:23:53,799
Like what kinds of things are you finding you want

475
00:23:53,839 --> 00:23:56,079
to put into this kind of a setup.

476
00:23:56,759 --> 00:23:59,920
Speaker 3: For example, a bar chart component is the most widely

477
00:24:00,119 --> 00:24:03,240
used here that we yeah, in many applications. Also that

478
00:24:03,319 --> 00:24:06,720
gets used a lot for maybe an education based portal that.

479
00:24:06,640 --> 00:24:07,240
Speaker 2: We are building.

480
00:24:08,839 --> 00:24:12,200
Speaker 3: If it's a e commerce portal, then you know, maybe

481
00:24:12,599 --> 00:24:15,480
a source bar which we don't want to use from

482
00:24:15,640 --> 00:24:16,599
any other library.

483
00:24:17,119 --> 00:24:18,920
Speaker 2: A search bar would be another one.

484
00:24:19,039 --> 00:24:20,279
Speaker 4: Yeah, that makes sense.

485
00:24:20,680 --> 00:24:25,799
Speaker 3: Yes, has anybody used ndxbill plus before for any other purposes?

486
00:24:26,039 --> 00:24:27,880
Speaker 2: Not, if not web components.

487
00:24:28,319 --> 00:24:29,279
Speaker 4: I've never heard of it.

488
00:24:29,680 --> 00:24:32,319
Speaker 3: Okay, you must try it out for different purposes. It

489
00:24:32,400 --> 00:24:37,480
really brings down the bunch sizes to very small. And yeah,

490
00:24:37,640 --> 00:24:39,920
it's widely used for angular elements as well.

491
00:24:40,440 --> 00:24:42,319
Speaker 1: Yeah, we should see if we can get men on

492
00:24:42,400 --> 00:24:43,960
the show talk about.

493
00:24:44,279 --> 00:24:48,119
Speaker 6: Yeah, yeah, I've heard of it. One of the guys

494
00:24:48,119 --> 00:24:51,240
on my team was reading about it because we were

495
00:24:51,240 --> 00:24:53,880
trying to figure out if we wanted to, like, we

496
00:24:53,920 --> 00:24:57,440
have different sections of our rather large application, and so

497
00:24:57,480 --> 00:24:59,200
we're trying to figure out do we want to single

498
00:25:00,160 --> 00:25:04,039
large you know module where everything is one application, or

499
00:25:04,079 --> 00:25:05,680
do you want it like a couple of smaller Angler

500
00:25:05,720 --> 00:25:09,960
applications kind of micro front ends type approach, And so

501
00:25:10,640 --> 00:25:14,079
he was looking at using JX built Plus to be

502
00:25:14,160 --> 00:25:18,200
able to make that be possible. But yeah, it gains

503
00:25:18,359 --> 00:25:20,400
complicated that we're like, ah, let's just keep it simple

504
00:25:20,440 --> 00:25:25,079
for now, but keep a single Angular application. But yeah,

505
00:25:25,240 --> 00:25:28,119
NGX build Plus seemed pretty cool for that, but I

506
00:25:28,160 --> 00:25:30,880
had no idea it was also working with Angular elements

507
00:25:30,960 --> 00:25:32,519
until today, so that's awesome.

508
00:25:32,920 --> 00:25:37,000
Speaker 3: Yeah, And I'm just curious to know if anybody uses

509
00:25:37,039 --> 00:25:40,319
the HTM and I mean the Web Component specifications for

510
00:25:40,480 --> 00:25:43,559
any other purposes other than you know, creating Angular I

511
00:25:43,559 --> 00:25:47,440
mean web components, just like in gender you know, HTMIL

512
00:25:47,440 --> 00:25:51,640
templates or you know, encapsulating your code from the rest

513
00:25:51,640 --> 00:25:55,960
of your consuming application. If not web components, just just normally.

514
00:25:56,480 --> 00:25:58,759
Speaker 4: I think I guess that the advantage we have in

515
00:25:58,960 --> 00:26:01,519
using a framework such as Angler and is that it

516
00:26:02,000 --> 00:26:05,599
does such a fabulous job of scaffolding all of what

517
00:26:05,640 --> 00:26:07,640
you've just mentioned there for us, doesn't it inside of

518
00:26:07,680 --> 00:26:11,000
the inside of the framework. But the thing that the

519
00:26:11,039 --> 00:26:14,319
thing that drew me to web components in the first place,

520
00:26:14,359 --> 00:26:17,400
where when I first picked up that book, is from

521
00:26:17,480 --> 00:26:19,960
from looking through the you know, the first few chapters

522
00:26:19,960 --> 00:26:22,759
of the book, it was it made it very clear that, yeah,

523
00:26:22,799 --> 00:26:25,240
this is this has given me the option to do

524
00:26:25,759 --> 00:26:28,680
effectively what I do when I'm building angular components, just

525
00:26:28,720 --> 00:26:31,319
without necessarily being tied to Angler. And I think that's

526
00:26:31,519 --> 00:26:35,559
I think that's very powerful, and I believe fairly strongly

527
00:26:35,640 --> 00:26:38,759
that that's that's probably the direction that front end development

528
00:26:38,839 --> 00:26:43,559
is is going to head towards. I think, yeah, I

529
00:26:43,599 --> 00:26:46,000
think you still need you still need your framework. And

530
00:26:46,039 --> 00:26:49,119
this kind of leads back to I think Brooks question

531
00:26:49,440 --> 00:26:52,920
maybe you know, fifteen twenty minutes ago, but I because

532
00:26:52,960 --> 00:26:56,160
I and correct me if I'm wrong, But I feel

533
00:26:56,200 --> 00:27:00,880
like building your your web components is still it's like

534
00:27:00,920 --> 00:27:03,480
building your angular components, right, but you still there's more

535
00:27:03,480 --> 00:27:05,920
two angular than just the components, because you actually it

536
00:27:05,960 --> 00:27:09,839
gives you a really nice wrapper for making agax requests.

537
00:27:09,920 --> 00:27:13,319
It gives you your routing, you get things like your

538
00:27:13,319 --> 00:27:16,640
form validation and things like that. So it's still useful

539
00:27:16,680 --> 00:27:18,759
to use a framework to help you with all of

540
00:27:18,799 --> 00:27:21,559
that stuff. But I guess the point of web components

541
00:27:21,599 --> 00:27:23,799
is that, yeah you can. You can if you want

542
00:27:23,799 --> 00:27:26,359
to build a graph as you say, oh, you know,

543
00:27:26,400 --> 00:27:30,039
a bacher or some amazing sire you know, sign up

544
00:27:30,119 --> 00:27:32,759
for or a button that you might want to use

545
00:27:32,799 --> 00:27:36,319
across multiple applications, across different libraries and frameworks, and yeah,

546
00:27:36,400 --> 00:27:38,960
you do it a web component and then important into

547
00:27:39,000 --> 00:27:39,920
your applications.

548
00:27:40,279 --> 00:27:42,599
Speaker 3: Right And also in the first place, we always say,

549
00:27:42,680 --> 00:27:46,440
right that Angular framework is to build enterprise level applications,

550
00:27:46,480 --> 00:27:50,759
big applications, large applications. So if we take that into consideration,

551
00:27:51,440 --> 00:27:53,279
these are two different different things, right.

552
00:27:53,839 --> 00:27:56,640
Speaker 4: Yeah, absolutely nothing to stop you from using Angular for

553
00:27:56,920 --> 00:27:59,279
you know, nice little hobby apps and things, I guess.

554
00:27:59,279 --> 00:28:02,240
But I guess at the same time, it's it's quite

555
00:28:02,279 --> 00:28:02,799
heavy weight.

556
00:28:03,279 --> 00:28:03,599
Speaker 1: Well there.

557
00:28:03,640 --> 00:28:06,400
Speaker 4: I mean they improve on that every with every version,

558
00:28:06,400 --> 00:28:08,680
don't they. I mean, Angler is a lot lighter when

559
00:28:08,680 --> 00:28:11,160
you ship it now than it was when it was Angular.

560
00:28:10,799 --> 00:28:14,440
Speaker 3: Two, right, and with ivy coming in, we expect a

561
00:28:14,440 --> 00:28:16,680
lot more degrees in the size of you know, the

562
00:28:16,680 --> 00:28:21,440
web component that we'll be building. Also in in the

563
00:28:21,519 --> 00:28:24,640
talk at Engine, yeah, Rob Rob Warmer came in and

564
00:28:24,720 --> 00:28:28,559
he explained that, you know, with IVY, with Angular ten,

565
00:28:28,680 --> 00:28:30,680
maybe there will be a lot of work on Angular

566
00:28:30,720 --> 00:28:34,960
elements and it might be officially, you know, allowed to

567
00:28:35,279 --> 00:28:37,480
export it as a web component to be used in

568
00:28:37,559 --> 00:28:38,920
other frameworks as well.

569
00:28:39,400 --> 00:28:39,759
Speaker 1: Yeah, that.

570
00:28:41,279 --> 00:28:43,319
Speaker 2: Work on Angular elements in Angular ten.

571
00:28:43,799 --> 00:28:47,400
Speaker 4: Yeah, that would be cool because I'm so having Alexis

572
00:28:48,200 --> 00:28:52,039
the docs on the Angular docks site about about Angular elements,

573
00:28:52,039 --> 00:28:54,920
and it does it does sound like at the moment

574
00:28:55,039 --> 00:28:58,039
you you ship a lot of Angular like with your component,

575
00:28:58,079 --> 00:28:59,960
which is gonna just going to give you a bit

576
00:29:00,440 --> 00:29:04,039
bloated component. But yeah, it'd be nice to see something

577
00:29:04,039 --> 00:29:06,599
maybe in a CLI or something that will just compile

578
00:29:06,680 --> 00:29:09,960
it all the way out to just just straight up

579
00:29:10,200 --> 00:29:12,440
web component. That would be nice because then you know,

580
00:29:12,480 --> 00:29:14,079
you get the advantage that I can write it in

581
00:29:14,160 --> 00:29:16,880
Angular because that's a it's a framework and a syntax

582
00:29:17,039 --> 00:29:20,200
I'm comfortable and happy using, right, So it means that

583
00:29:20,279 --> 00:29:22,920
I could I could start pumping out elements for other

584
00:29:22,920 --> 00:29:25,319
people to use, regardless of their framework. But I can

585
00:29:25,400 --> 00:29:28,440
sit at home or at work using the framework and

586
00:29:28,440 --> 00:29:31,200
the syntax that I'm comfortable with, So that'd be very.

587
00:29:31,079 --> 00:29:32,160
Speaker 2: Cool, exactly.

588
00:29:32,440 --> 00:29:35,240
Speaker 3: And also, you know, your favorite functionality is in any

589
00:29:35,279 --> 00:29:37,799
framework that you work a lot in would be you

590
00:29:37,799 --> 00:29:40,039
would be able to carry those to any other framework

591
00:29:40,079 --> 00:29:43,880
that you might have to work with in any other project. Right, So,

592
00:29:44,079 --> 00:29:47,920
for example, validation and Angular forms is so advanced, so good,

593
00:29:48,000 --> 00:29:51,279
we can use it very you know, for good purposes,

594
00:29:51,519 --> 00:29:54,240
great purposes. So I think carrying that is a functionality

595
00:29:54,279 --> 00:29:56,759
to maybe any other framework or a bune in a

596
00:29:56,880 --> 00:30:00,240
project that that is something you know, with pumpan can

597
00:30:00,279 --> 00:30:00,960
really help us with.

598
00:30:01,640 --> 00:30:07,400
Speaker 4: Yeah. Absolutely. Actually, having recently built some some custom form

599
00:30:07,480 --> 00:30:11,799
validation in Vanilla JavaScript, I can attest to the fact

600
00:30:11,839 --> 00:30:14,839
that if I could have built a form in Angular

601
00:30:14,880 --> 00:30:16,920
and just exported it as a web component that I

602
00:30:16,920 --> 00:30:21,400
could have used, that would have been very nice because Angler, Yeah,

603
00:30:21,440 --> 00:30:23,839
you're absolutely right, Angler, form validation is great. You just

604
00:30:23,920 --> 00:30:27,599
drop a few things in and it works beautifully, whereas

605
00:30:27,599 --> 00:30:30,440
trying to build it yourself does turned into a hot mess.

606
00:30:30,759 --> 00:30:32,799
It was very unpleasant, Right.

607
00:30:32,799 --> 00:30:33,559
Speaker 2: I'm the scurious.

608
00:30:33,559 --> 00:30:36,839
Speaker 3: Did you write a customary validator in Vanilla JavaScript?

609
00:30:37,279 --> 00:30:39,640
Speaker 4: Yeah, I don't. I can't. I don't know how good

610
00:30:39,640 --> 00:30:41,880
it is, but it kind of did the job. But

611
00:30:41,960 --> 00:30:44,519
it wasn't I want to say it wasn't fun. It

612
00:30:44,599 --> 00:30:46,839
kind of was because I was hacking around with something,

613
00:30:46,880 --> 00:30:48,519
you know, and I had a problem to solve. But

614
00:30:49,079 --> 00:30:52,519
it was also I was sitting there, you know, just Oh,

615
00:30:52,799 --> 00:30:54,640
I wish I was doing this in Angular because I could.

616
00:30:54,680 --> 00:30:58,480
I could literally just go validator's not required done. It's like,

617
00:30:58,640 --> 00:31:02,200
instead of just messing around with lines, reams and reams

618
00:31:02,240 --> 00:31:05,559
of code and HTML and all sorts of stuff.

619
00:31:05,440 --> 00:31:08,079
Speaker 2: Are using a component build Angular.

620
00:31:08,160 --> 00:31:10,400
Speaker 4: Should have done that, should have done it in Angular

621
00:31:10,599 --> 00:31:14,480
Angler elements absolutely well. Next time I will, assuming that

622
00:31:14,480 --> 00:31:16,640
they make it so I can fully export it. Right,

623
00:31:16,680 --> 00:31:19,440
But yeah, that's the future, and that that's the future.

624
00:31:19,440 --> 00:31:20,000
That would be good.

625
00:31:20,359 --> 00:31:23,400
Speaker 1: Yeah, anything else we want to pounce on here before

626
00:31:23,440 --> 00:31:24,799
we go to picks.

627
00:31:24,920 --> 00:31:27,279
Speaker 4: I can give you an update on the testing. Let's

628
00:31:27,319 --> 00:31:29,920
do the book. I have no idea. I mean, it

629
00:31:30,000 --> 00:31:33,240
might be that the book is opinionated, right, but the

630
00:31:33,319 --> 00:31:35,880
guy who's writing it, whose name I don't have easy

631
00:31:35,920 --> 00:31:41,480
access to, excellent. He says that there is a He

632
00:31:41,519 --> 00:31:44,640
recommends using something called web Component Tester, which is a

633
00:31:44,799 --> 00:31:48,640
tool created by the Polymer team, and once you're using

634
00:31:48,680 --> 00:31:52,440
the web Component tester, you can just write everything in

635
00:31:53,440 --> 00:31:57,039
your favorite front unit testing library. It looks like he

636
00:31:58,359 --> 00:32:04,759
describes using Maca and we use it with China Think

637
00:32:04,839 --> 00:32:08,680
and then also Calmer, but all using the Web Component

638
00:32:09,000 --> 00:32:12,519
Testing tool. So yes, sounds like you maybe have to

639
00:32:12,559 --> 00:32:14,519
add a little bit of extra stuff in there, but

640
00:32:14,720 --> 00:32:16,519
I guess you could still just unit test the way

641
00:32:16,759 --> 00:32:17,279
you're used to.

642
00:32:17,880 --> 00:32:22,119
Speaker 3: Nice, okay, And about the web component specifications, I think

643
00:32:22,200 --> 00:32:25,519
I can mention more so if you all know. I mean,

644
00:32:25,519 --> 00:32:29,599
we have htmlmplate to template to you know, use templates

645
00:32:29,640 --> 00:32:32,599
just like the version of it we have in Angular right,

646
00:32:32,880 --> 00:32:35,000
just like we use Angie template or you can call

647
00:32:35,039 --> 00:32:38,279
it the success or maybe not really an alternative to that.

648
00:32:38,759 --> 00:32:41,839
But we don't really have HTML imports now because due

649
00:32:41,880 --> 00:32:46,200
to you know, many different like different bundles, multiple imports,

650
00:32:46,440 --> 00:32:49,680
we could not really many browsers didn't support HTML imports.

651
00:32:49,960 --> 00:32:53,400
So that's that's cut off as a web component specification now.

652
00:32:53,839 --> 00:32:57,000
And we have HTML template custom elements. Custom element is

653
00:32:57,000 --> 00:33:00,960
the main bit because you what really wanted the end

654
00:33:00,960 --> 00:33:03,759
of the day is a custom element of your web

655
00:33:03,839 --> 00:33:08,200
component and then shadowed on which is for encapsulating your

656
00:33:08,279 --> 00:33:12,759
styles and downloads from the rest of your component. So yeah,

657
00:33:12,799 --> 00:33:14,920
that's about the Web component specifications.

658
00:33:15,319 --> 00:33:17,920
Speaker 4: Yeah, that's interesting. Actually, in the in the early version

659
00:33:17,920 --> 00:33:20,559
of the Web Components and Action Book, because you know,

660
00:33:20,640 --> 00:33:22,559
Manning do this thing where you can just you can

661
00:33:22,599 --> 00:33:24,200
buy the book as soon as they've got a couple

662
00:33:24,200 --> 00:33:27,279
of chapters written and they update it as as it's written.

663
00:33:27,319 --> 00:33:30,359
In the In the early versions, the author was talking

664
00:33:30,400 --> 00:33:33,519
about HTML imports as being part of the spec, and

665
00:33:33,599 --> 00:33:37,039
then another version comes out and the text has changed

666
00:33:37,079 --> 00:33:39,920
to I'm not so sure this is going to be available,

667
00:33:40,079 --> 00:33:42,000
but but we'll still talk about it, and then yeah,

668
00:33:42,079 --> 00:33:43,920
that's that's pretty much out of the spec now. So

669
00:33:43,960 --> 00:33:47,480
it's interesting. I mean, it's it's it's an evolving spec,

670
00:33:47,519 --> 00:33:50,359
you know, it's kind of just the Web Component's spec

671
00:33:50,440 --> 00:33:52,799
itself is just like evolving before my eyes, just with

672
00:33:53,000 --> 00:33:55,359
literally every every version of this of this book that

673
00:33:55,400 --> 00:34:00,000
I got hold of. So, yes, it is bleeding edge stuff,

674
00:34:00,079 --> 00:34:00,440
isn't it.

675
00:34:00,759 --> 00:34:03,160
Speaker 3: Yeah, But it's also great to be, you know, a

676
00:34:03,200 --> 00:34:06,240
part of the process as it's building and becoming more

677
00:34:06,279 --> 00:34:08,519
progressive and interesting to build with.

678
00:34:09,119 --> 00:34:12,119
Speaker 4: M Yeah, absolutely, I'm going to have to move it

679
00:34:12,199 --> 00:34:13,559
up my to do list. I feel like I say

680
00:34:13,599 --> 00:34:17,199
this every week. Actually, somebody tells me about something that's

681
00:34:17,199 --> 00:34:18,880
some might to do list, I say, move it up

682
00:34:18,880 --> 00:34:20,519
my to do list. I'm just gonna end up with

683
00:34:20,679 --> 00:34:23,920
another to do list, probably with everything I've moved up.

684
00:34:24,320 --> 00:34:26,360
But yeah, I'm going to have to get into this

685
00:34:26,480 --> 00:34:29,000
because I've been fascinated for a long time and this

686
00:34:29,079 --> 00:34:30,559
is going to give me a kick out the backside

687
00:34:30,559 --> 00:34:30,960
that I need.

688
00:34:31,440 --> 00:34:33,440
Speaker 1: I see everybody else grinning when you say I've got

689
00:34:33,440 --> 00:34:35,000
to move it up my to do list. That's me.

690
00:34:35,199 --> 00:34:37,840
Like every week do an episode of any any of

691
00:34:37,840 --> 00:34:39,559
the shows, and it's like, oh, well, I got to

692
00:34:39,599 --> 00:34:41,840
figure this one out now and help.

693
00:34:41,840 --> 00:34:45,519
Speaker 3: Remember we were talking about adding polyphills manually, so with

694
00:34:45,679 --> 00:34:48,360
njxbil plus, we don't really need to add polyphils manually.

695
00:34:48,440 --> 00:34:51,039
And there is this command where you can generate those

696
00:34:51,079 --> 00:34:54,039
polyfhills using the library and it would add all the

697
00:34:54,039 --> 00:34:57,920
polyfills for you, so that again, you know, the library

698
00:34:58,000 --> 00:35:00,679
would help you with And obviously it happens a lot

699
00:35:00,679 --> 00:35:03,079
of times that. I mean I was doing the live

700
00:35:03,159 --> 00:35:05,440
then when I was giving this talk, and I forgot

701
00:35:05,480 --> 00:35:09,679
to add polyphils can you imagine? So that's where the

702
00:35:09,719 --> 00:35:11,679
library would really come to be of help.

703
00:35:12,280 --> 00:35:17,039
Speaker 6: Speaking of polyfills, that is mostly just needed for like

704
00:35:17,360 --> 00:35:22,079
wide browser support, Like if you have a modern browser,

705
00:35:22,719 --> 00:35:26,360
does it require any polyfills or where is that?

706
00:35:26,440 --> 00:35:29,039
Speaker 2: Yes? If you want to support the older browsers as.

707
00:35:28,840 --> 00:35:29,599
Speaker 4: Well, gotcha?

708
00:35:29,639 --> 00:35:32,360
Speaker 6: Okay, so if you like use Google Chrome that is

709
00:35:32,559 --> 00:35:34,840
like the current version of Google Chrome, like that'll just

710
00:35:34,880 --> 00:35:39,519
support any web components mostly yes, Okay, how.

711
00:35:39,320 --> 00:35:41,000
Speaker 4: Can we find that? Is that on? Can I use

712
00:35:41,320 --> 00:35:43,400
or is there a different thing for web components?

713
00:35:43,639 --> 00:35:45,880
Speaker 3: No, no, you can use. Can I use a website

714
00:35:45,920 --> 00:35:48,519
for that? And it would help you with all the browsers?

715
00:35:48,519 --> 00:35:49,800
That would be someppointing.

716
00:35:50,440 --> 00:35:52,880
Speaker 4: Can you just do it for web Well, I'm bound

717
00:35:52,880 --> 00:35:54,440
to find out web components.

718
00:35:54,840 --> 00:35:58,039
Speaker 3: Yes, there's another very interesting website. Let me just share

719
00:35:58,079 --> 00:35:59,840
the link to that customer.

720
00:36:00,760 --> 00:36:03,159
Speaker 4: Yeah, it's not supported in ie.

721
00:36:03,639 --> 00:36:05,639
Speaker 2: Yeah you can imagine.

722
00:36:06,000 --> 00:36:09,960
Speaker 4: Yeah, okay, so well yeah, custom elements are supported an

723
00:36:10,079 --> 00:36:14,360
edge Fire for well everywhere except Internet Explorer. Safari is

724
00:36:15,199 --> 00:36:17,639
needs a bit of work. iOS Safari needs a bit

725
00:36:17,679 --> 00:36:18,480
of work, no surprise.

726
00:36:18,599 --> 00:36:18,719
Speaker 1: Is it?

727
00:36:18,800 --> 00:36:22,440
Speaker 4: Opera Mini completely not supported, But luckily I don't think

728
00:36:22,559 --> 00:36:25,320
anyone uses that QQ browser. I don't even know what

729
00:36:25,400 --> 00:36:29,440
that is. So yeah, customer elements are there in Evergreen browsers.

730
00:36:29,880 --> 00:36:34,199
Speaker 3: Yeah, there's another link to this website that I have shared,

731
00:36:34,199 --> 00:36:37,400
which is called custom elements Everywhere. Now, this website talks

732
00:36:37,400 --> 00:36:40,519
about the compatibility of a framework to be building a

733
00:36:40,519 --> 00:36:43,679
web component. So if you scrawl through it, you would

734
00:36:43,679 --> 00:36:46,639
see that, you know, Polymer is a hundred person compatible

735
00:36:46,679 --> 00:36:50,199
to building web components. It also shows Angular to be

736
00:36:50,599 --> 00:36:54,360
perfectly compatible. Hunded person compatible. No, it's definitely not in

737
00:36:54,440 --> 00:36:57,000
terms of bill size and performance and other things, but

738
00:36:57,039 --> 00:36:59,159
in terms of you know, how you do property binding,

739
00:36:59,639 --> 00:37:02,960
how you you export, I mean emit an event when

740
00:37:02,960 --> 00:37:05,480
you have to deal with any click, let's say in

741
00:37:05,519 --> 00:37:06,360
your web component.

742
00:37:06,719 --> 00:37:10,159
Speaker 2: So again, in terms of that, it's hunded person performant.

743
00:37:10,760 --> 00:37:13,519
Speaker 3: It would tell you for different frameworks which all you

744
00:37:13,559 --> 00:37:17,440
know you can use to build your web component. It

745
00:37:17,519 --> 00:37:20,519
also mentions about DIO. I don't know what that is,

746
00:37:20,800 --> 00:37:25,719
DIO library, Angular JS, hyper HTML late Element. Again, that's

747
00:37:25,760 --> 00:37:29,639
that's hunded person. Yeah, this is interesting as well. Yeah,

748
00:37:29,679 --> 00:37:30,599
that's super helpful.

749
00:37:31,000 --> 00:37:34,119
Speaker 1: Looks like d IO is DART. I might be wrong

750
00:37:34,679 --> 00:37:35,440
just putting it out there.

751
00:37:35,440 --> 00:37:40,119
Speaker 4: I might be wrong, but it's still a thing.

752
00:37:41,360 --> 00:37:43,119
Speaker 1: You just offended a whole bunch of people.

753
00:37:44,719 --> 00:37:45,800
Speaker 4: Where's the flutter show?

754
00:37:47,719 --> 00:37:49,760
Speaker 1: Don't tell me? All right, I have enough going on

755
00:37:49,840 --> 00:37:50,280
right now.

756
00:37:50,639 --> 00:37:52,079
Speaker 4: Sorry, sorry, I'll be quiet.

757
00:37:52,519 --> 00:37:54,400
Speaker 1: No, it's true though. I've had a few people asking

758
00:37:54,440 --> 00:37:54,800
about that.

759
00:37:55,239 --> 00:37:58,559
Speaker 4: Wow, it's interesting. Had angular dart for a while?

760
00:37:58,920 --> 00:37:59,159
Speaker 1: Yes?

761
00:37:59,199 --> 00:37:59,920
Speaker 2: What pas?

762
00:38:00,360 --> 00:38:00,840
Speaker 1: What was that?

763
00:38:01,320 --> 00:38:04,760
Speaker 3: Surplus? I've not heard of this library? This is right

764
00:38:05,079 --> 00:38:08,679
above swell if you see on the website soplus. I

765
00:38:08,679 --> 00:38:10,039
don't know which library that is.

766
00:38:10,519 --> 00:38:14,000
Speaker 1: I'm not sure where is it? Oh surplus?

767
00:38:14,039 --> 00:38:18,519
Speaker 4: Is it surplus js high performance JSX web views? You

768
00:38:18,599 --> 00:38:23,400
lost me at JSX unfortunately. Yeah, let's have that fight,

769
00:38:24,199 --> 00:38:26,639
would be fighting words d I.

770
00:38:26,800 --> 00:38:28,719
Speaker 1: Oh No, that's got to be something else that is

771
00:38:28,800 --> 00:38:31,239
not the dark library.

772
00:38:32,320 --> 00:38:32,639
Speaker 4: Yeah.

773
00:38:33,239 --> 00:38:34,760
Speaker 1: I wish they had a link out.

774
00:38:34,719 --> 00:38:38,239
Speaker 2: Like, yeah, do open the document the official.

775
00:38:38,320 --> 00:38:40,039
Speaker 1: Yeah, this is d I O right.

776
00:38:40,719 --> 00:38:42,559
Speaker 4: Yeah, yeah, that would be helpful.

777
00:38:43,000 --> 00:38:45,760
Speaker 5: Wow, there's there's a lot more libraries doing this than

778
00:38:45,760 --> 00:38:46,480
I thought there was.

779
00:38:47,000 --> 00:38:50,679
Speaker 2: Yeah, me through me through as well. Yeah.

780
00:38:50,960 --> 00:38:54,360
Speaker 3: React React seems to be the lowest in terms of

781
00:38:54,400 --> 00:38:56,559
score this school.

782
00:38:57,119 --> 00:39:01,519
Speaker 6: Oh, here we go. If you click on the real issues,

783
00:39:01,599 --> 00:39:04,360
it will take you to get hub, which I believe

784
00:39:04,480 --> 00:39:06,800
that takes you to the official project gethub.

785
00:39:07,400 --> 00:39:11,960
Speaker 1: Oh they changed is d yo yo of course, now

786
00:39:12,000 --> 00:39:13,039
I want it to be today.

787
00:39:13,480 --> 00:39:21,440
Speaker 7: Oh yeah dds yeah, so yeah, this other one should

788
00:39:21,559 --> 00:39:25,920
just be updated all right, and now my autocorrect is

789
00:39:25,960 --> 00:39:28,960
correcting dodo to dip.

790
00:39:30,719 --> 00:39:33,159
Speaker 1: Well, let's go ahead and do some pics, Eddie. Do

791
00:39:33,159 --> 00:39:35,400
you want to start us off with picks? Sure?

792
00:39:35,960 --> 00:39:39,880
Speaker 6: So I have two picks today. One is sunlight and

793
00:39:39,920 --> 00:39:44,880
warm weather because this warm weather this weekend I've loved it.

794
00:39:45,440 --> 00:39:51,280
And in more practical is next JS. I am kind

795
00:39:51,280 --> 00:39:54,920
of revisiting my personal website and currently it was just

796
00:39:55,360 --> 00:39:58,840
kind of a whole bunch of JavaScript phone together in

797
00:39:59,719 --> 00:40:03,920
just express no JS and so ne sgs. I've been

798
00:40:04,199 --> 00:40:06,719
reading about and kind of starting to experiment with for

799
00:40:07,360 --> 00:40:10,480
being kind of the framework for my website, which I

800
00:40:10,559 --> 00:40:12,519
think will be much nicer because I don't have to

801
00:40:12,559 --> 00:40:15,800
kind of worry about a bunch of architectural things. I

802
00:40:15,800 --> 00:40:19,000
can just write the little bits. It kind of feels

803
00:40:19,039 --> 00:40:22,280
like Anguillar for the back end, which is nice.

804
00:40:22,360 --> 00:40:24,599
Speaker 1: So yeah, I keep hearing that I think we need

805
00:40:24,599 --> 00:40:26,760
to bring somebody out to talk about it. Chris, what

806
00:40:26,800 --> 00:40:27,599
are your picks?

807
00:40:28,039 --> 00:40:32,159
Speaker 4: I'm going to have one pick this week. Last night,

808
00:40:32,599 --> 00:40:35,760
my wife and I went to see our favorite stand

809
00:40:35,840 --> 00:40:40,239
up comedian live who's doing a UK tour. It's like

810
00:40:40,280 --> 00:40:43,000
the first time he's been out in about six or

811
00:40:43,039 --> 00:40:45,960
seven years. It was really funny. He really enjoyed it.

812
00:40:46,079 --> 00:40:50,960
His name is Rod Gilbert, which is our Hod because

813
00:40:51,000 --> 00:40:55,519
he's Welsh. He's just this sort of really abrasive Welsh

814
00:40:55,880 --> 00:40:58,559
funny man who manages to spend a couple of hours

815
00:40:58,920 --> 00:41:02,960
talking about the incredibly mundane things in life that annoy him.

816
00:41:03,000 --> 00:41:05,960
And it is just side splatantly funny. I did a

817
00:41:06,000 --> 00:41:09,519
bit of a search because I appreciate that large proportion

818
00:41:09,599 --> 00:41:11,960
of our listener base and probably in the US, I

819
00:41:11,960 --> 00:41:13,480
did a search to see if you could get his

820
00:41:13,559 --> 00:41:16,559
DVDs and things on Amazon dot Com, and you kind

821
00:41:16,559 --> 00:41:18,440
of can't. It looks like you can get his live

822
00:41:18,480 --> 00:41:22,519
shows on Amazon Music, so if you have Amazon Music,

823
00:41:22,599 --> 00:41:24,440
might be worth listening to, or if you can find

824
00:41:24,440 --> 00:41:26,960
any of his stuff on YouTube. I have no idea

825
00:41:26,960 --> 00:41:30,559
how well the Welsh humor will translate outside of the UK,

826
00:41:30,679 --> 00:41:34,400
but I thoroughly recommend it. He's hilarious. That's Rod Gilbert.

827
00:41:35,079 --> 00:41:36,840
Speaker 1: Awesome Brooks what are your picks.

828
00:41:37,159 --> 00:41:41,559
Speaker 5: I'll pick Capacitor, which is kind of the replacement or

829
00:41:41,679 --> 00:41:45,880
Ionyx version of Cordova. I've been developing some Capacitor plug

830
00:41:45,880 --> 00:41:49,719
ins and so far it hasn't been Capacitor holding me back,

831
00:41:49,760 --> 00:41:51,840
that's for sure. But yeah, it's been good so far.

832
00:41:52,199 --> 00:41:54,800
I've gotten a couple of working, so yeah, that's my pick.

833
00:41:55,280 --> 00:41:58,840
Speaker 1: Awesome. I also was doing a little bit of work

834
00:41:58,960 --> 00:42:01,119
and found that Niche I had written a book, and

835
00:42:01,159 --> 00:42:03,039
so I'll put a link to that in the show

836
00:42:03,079 --> 00:42:06,519
notes as well. It's about angular routing. We'll probably just

837
00:42:06,519 --> 00:42:08,400
how you come back and tell us what we're doing

838
00:42:08,440 --> 00:42:10,679
wrong there, because I know I'm not getting it right,

839
00:42:10,840 --> 00:42:13,079
but anyway, so I'm going to shout out about that.

840
00:42:13,280 --> 00:42:15,679
And then my wife and I have been watching a

841
00:42:15,679 --> 00:42:20,480
show called The Masks Singer and it's it's kind of fun.

842
00:42:20,800 --> 00:42:23,039
Of course, I want to go and like google all

843
00:42:23,039 --> 00:42:25,320
the people and see if I can figure out who

844
00:42:25,360 --> 00:42:28,320
these folks are, and my wife insists that's cheating, so

845
00:42:29,239 --> 00:42:32,239
we'll see. We went back and started watching season two

846
00:42:32,239 --> 00:42:33,679
because I didn't watch it and I don't know who

847
00:42:33,719 --> 00:42:36,840
all these people are under the masks and I can't

848
00:42:36,880 --> 00:42:38,800
google them. Right, because I feel like if I go

849
00:42:38,840 --> 00:42:41,360
look them up, oh this might be so, and so

850
00:42:41,679 --> 00:42:45,559
it'll actually tell me that it is. And yeah, I

851
00:42:45,599 --> 00:42:47,079
want to be some you know, I want to pull

852
00:42:47,079 --> 00:42:48,800
the mask off and then be like, see I was right.

853
00:42:48,880 --> 00:42:51,880
So anyway, so that's been fun. So I'm gonna shout

854
00:42:51,920 --> 00:42:54,519
out about that as well. The masks Singer. I guess

855
00:42:54,559 --> 00:42:56,159
I have one more pick that I'll throw out there,

856
00:42:56,159 --> 00:42:59,239
and it's called Expert Secrets. It's a book by Russell Brunson.

857
00:42:59,639 --> 00:43:02,679
It's awesome. So there you go, Nichs. You what are

858
00:43:02,719 --> 00:43:03,159
your picks?

859
00:43:03,599 --> 00:43:07,440
Speaker 3: I think web I've been exploring web assembly quite a lot.

860
00:43:07,519 --> 00:43:11,639
I'm really curious to, you know, know, how it takes

861
00:43:11,679 --> 00:43:14,239
over the world of front and which is by JavaScript

862
00:43:14,280 --> 00:43:16,320
and is it is it really a competitor? I mean,

863
00:43:16,360 --> 00:43:19,760
is it gonna run in parallel to the JavaScript way

864
00:43:19,760 --> 00:43:22,159
of building or is it going to take over that?

865
00:43:22,599 --> 00:43:25,800
So that's that's pretty interesting. Also, also the terms that

866
00:43:25,840 --> 00:43:30,239
it uses, you know, like a virtual container for for

867
00:43:30,480 --> 00:43:34,480
the building of front and also one place for you know,

868
00:43:34,559 --> 00:43:37,119
the UI, the back end and all that. So yeah,

869
00:43:37,159 --> 00:43:40,519
that's pretty interesting. I've been exploring that quite a lot. Also,

870
00:43:40,800 --> 00:43:44,119
there's a game built all based on web smile vasm.

871
00:43:44,599 --> 00:43:47,280
Speaker 2: That game, it's also is very interesting.

872
00:43:47,360 --> 00:43:49,800
Speaker 3: I don't have the link to that right now, but yeah,

873
00:43:49,880 --> 00:43:53,280
you you should check that game out. That's that's interesting.

874
00:43:53,800 --> 00:43:57,039
That's one of my picks. The other pick, I mean,

875
00:43:57,079 --> 00:43:59,840
which which should be a more of casual thing, as

876
00:43:59,880 --> 00:44:02,280
I pick up from the picks that you've been sharing.

877
00:44:02,880 --> 00:44:06,119
So I think playing with rabbits is quite an interesting

878
00:44:06,159 --> 00:44:09,119
thing that I've been doing lately. My Twitter handle is

879
00:44:09,320 --> 00:44:12,920
the name is after my rabbit, a bet rabbit that

880
00:44:13,000 --> 00:44:15,800
I had, So yeah, that's it.

881
00:44:16,280 --> 00:44:18,639
Speaker 1: Yeah, I guess I should ask that if people want

882
00:44:18,639 --> 00:44:20,079
to connect with you online, where are you?

883
00:44:20,960 --> 00:44:23,639
Speaker 3: Yeah, I'll share diet here in the chat. It's called

884
00:44:23,719 --> 00:44:27,519
Thecosta Wilson on Twitter. I know that that's a stupid name,

885
00:44:27,519 --> 00:44:29,440
but yeah, that's how I used to call my rabbit.

886
00:44:29,599 --> 00:44:32,719
Speaker 1: So oh, I think we've all had dumb handles at

887
00:44:32,719 --> 00:44:34,760
one point or another, or things that were at least

888
00:44:35,000 --> 00:44:37,559
embarrassed about that. Yeah, other people are going to look

889
00:44:37,559 --> 00:44:39,159
at it and go, oh, well that's kind of fun.

890
00:44:39,239 --> 00:44:40,800
Speaker 6: That's what internet handles are good for.

891
00:44:41,360 --> 00:44:44,880
Speaker 1: That's right. Yeah, all right, Well thanks for coming and

892
00:44:44,920 --> 00:44:46,480
talking to us, Niche thank.

893
00:44:46,320 --> 00:44:48,360
Speaker 3: You so much for having me. This is really interesting

894
00:44:48,400 --> 00:44:49,280
to talk to all of you.

895
00:44:49,800 --> 00:44:53,320
Speaker 1: Yeah. Absolutely well, we'll have another one next week. Max

896
00:44:53,360 --> 00:44:54,000
out everybody,