1
00:00:01,080 --> 00:00:03,000
Speaker 1: How'd you like to listen to dot net rocks with

2
00:00:03,040 --> 00:00:07,879
no ads? Easy? Become a patron for just five dollars

3
00:00:07,919 --> 00:00:10,800
a month. You get access to a private RSS feed

4
00:00:10,839 --> 00:00:14,279
where all the shows have no ads. Twenty dollars a month.

5
00:00:14,279 --> 00:00:16,920
We'll get you that and a special dot net Rocks

6
00:00:16,960 --> 00:00:21,000
patron mug. Sign up now at Patreon dot dot NetRocks

7
00:00:21,120 --> 00:00:37,000
dot com. Hey guess what, it's dot net rocks all

8
00:00:37,039 --> 00:00:42,359
over again. I'm Carl Franklin at Amateur Campbell and H Richard.

9
00:00:42,439 --> 00:00:45,399
You're still in Canada? A, yeah, yeah, it's nice here.

10
00:00:45,600 --> 00:00:52,759
Yeah cool. That's all I'm gonna say about that. We

11
00:00:52,840 --> 00:00:55,840
love Canada.

12
00:00:56,079 --> 00:00:56,399
Speaker 2: Well.

13
00:00:56,920 --> 00:00:59,600
Speaker 1: Before we get into better no framework, let's just talk

14
00:00:59,640 --> 00:01:02,679
a little bit about nineteen forty. Kind of an important year.

15
00:01:02,960 --> 00:01:06,359
Episode nineteen forty, Episode nineteen forty. So the year nineteen

16
00:01:06,439 --> 00:01:10,760
forty saw the beginning of World War two's escalation anyway,

17
00:01:11,719 --> 00:01:15,120
the signing of the Selective Training and Service Act, which

18
00:01:15,239 --> 00:01:19,319
established the first peacetime draft in the US, and the

19
00:01:19,400 --> 00:01:24,480
release of Disney's animated film Fantasia Nice. Additionally, the US

20
00:01:24,519 --> 00:01:27,959
made agreements to transfer destroyers to Great Britain in exchange

21
00:01:27,959 --> 00:01:31,120
for military base leases. As you do you have anything

22
00:01:31,159 --> 00:01:32,719
to add? I mean, a lot of stuff happened in

23
00:01:32,760 --> 00:01:34,000
nineteen forty A lot.

24
00:01:33,799 --> 00:01:36,319
Speaker 2: Of stuff happened. But you know, my personal favorite would

25
00:01:36,319 --> 00:01:40,680
be the Jeep. Oh yeah, Yeah. The US realized it

26
00:01:40,719 --> 00:01:44,120
needed a lightweight, recon vehicle, something they could be all terrain,

27
00:01:44,280 --> 00:01:47,280
and they put out or bids basically to car companies

28
00:01:47,280 --> 00:01:50,480
in the US. Everybody scrambled around. It's a crazy story

29
00:01:50,480 --> 00:01:53,480
that this little car company called the Bantam Car, a

30
00:01:53,519 --> 00:01:58,040
motor car company in Pennsylvania, hired a guy from Detroit

31
00:01:58,120 --> 00:02:02,359
named Carl Probst who in a week basically designed that

32
00:02:02,640 --> 00:02:04,120
the prototype of the Jeep.

33
00:02:04,159 --> 00:02:09,680
Speaker 1: That's longer than it took them to create JavaScript, which

34
00:02:09,719 --> 00:02:10,719
I believe wasn't a week.

35
00:02:10,800 --> 00:02:15,080
Speaker 2: This was a car anyway. Yeah, at the beginning of

36
00:02:15,080 --> 00:02:17,400
the Jeep comes with a part of the World War Two.

37
00:02:17,719 --> 00:02:20,319
Speaker 1: And you know, I know this little factoid about Jeep.

38
00:02:20,639 --> 00:02:22,520
I don't remember the character's name, but there was a

39
00:02:22,639 --> 00:02:26,680
character on the cartoon Popeye, right that's related to the Jeep.

40
00:02:28,080 --> 00:02:33,199
And it was a character. All right, I'm gonna have

41
00:02:33,240 --> 00:02:36,039
to since you got Eugene the Jeep, Yeah, that's it,

42
00:02:36,120 --> 00:02:40,800
Eugene the Jeep. And it was all right, I don't

43
00:02:40,840 --> 00:02:41,479
know as much.

44
00:02:41,319 --> 00:02:42,560
Speaker 2: As you said. Jeep jeep.

45
00:02:43,039 --> 00:02:44,560
Speaker 1: Yeah, he used to say jeep, jeep jeep.

46
00:02:44,639 --> 00:02:46,840
Speaker 2: Yeah. Yeah, yellow weird yellow critter.

47
00:02:47,080 --> 00:02:50,039
Speaker 1: I'm one of them. Started the other like it might

48
00:02:50,039 --> 00:02:54,199
have been that critter that named the jeep, or it

49
00:02:54,280 --> 00:02:57,840
might have been the jeep that inspired the cartoon character.

50
00:02:57,919 --> 00:02:59,439
I can't remember which it is.

51
00:02:59,360 --> 00:03:02,759
Speaker 2: But yeah, jeep. It was a perversion of an acronym

52
00:03:02,840 --> 00:03:04,159
for a general purpose vehicle.

53
00:03:04,360 --> 00:03:10,240
Speaker 1: Okay, so it comes through with the facts. Yeah, okay,

54
00:03:10,319 --> 00:03:12,199
Well let's get into better no framework, this is a

55
00:03:12,240 --> 00:03:21,879
good one. Roll the music, what you got. It's an

56
00:03:21,960 --> 00:03:24,879
article in the Verge. There's lots of articles around it.

57
00:03:24,960 --> 00:03:27,879
But this is where I learned about a new way

58
00:03:27,919 --> 00:03:32,840
of capturing three D content called Gauschian splatting.

59
00:03:33,879 --> 00:03:37,479
Speaker 2: Because we always trust a technology called plastic slatting.

60
00:03:37,680 --> 00:03:42,319
Speaker 1: Yes, so the the whole idea between Gauchian splatting is

61
00:03:42,439 --> 00:03:45,919
rather than let me see if I can just sort

62
00:03:45,919 --> 00:03:50,439
of you know, nail it down the ideas instead of

63
00:03:50,479 --> 00:03:55,879
doing sort of vectorizing and turning things into triangles, and

64
00:03:55,879 --> 00:03:58,479
the more triangles you have, the better resolution you have.

65
00:03:59,560 --> 00:04:03,039
This sort of of creates well, you know, a Gaussian

66
00:04:03,120 --> 00:04:06,719
blurring is right. Yeah, so it creates these sort of

67
00:04:07,280 --> 00:04:12,120
blurry things that compound on top of each other and

68
00:04:12,199 --> 00:04:17,040
make up a more realistic looking three D image. But

69
00:04:17,160 --> 00:04:21,120
here's the cool part about splatting is that you can

70
00:04:21,160 --> 00:04:24,160
do it in real time. It can render in real

71
00:04:24,240 --> 00:04:26,079
time at one hundred frames a second.

72
00:04:26,319 --> 00:04:29,000
Speaker 2: Computationally efficient would be a way to say it, as

73
00:04:29,000 --> 00:04:31,360
well as being small.

74
00:04:31,160 --> 00:04:37,079
Speaker 1: Very computationally efficient. Yeah, so I can see this coming

75
00:04:37,199 --> 00:04:40,319
to all the major tools. There are tools that you

76
00:04:40,360 --> 00:04:42,199
can use now, but they're sort of add ins, and

77
00:04:42,439 --> 00:04:46,439
it'll become more mainstream. But I think it's really really cool.

78
00:04:46,439 --> 00:04:48,279
It's going to make for some amazing games and some

79
00:04:48,360 --> 00:04:51,439
amazing three D experiences. Just the whole idea of going

80
00:04:51,439 --> 00:04:54,920
out with a camera, taking some video or taking pictures

81
00:04:55,399 --> 00:04:58,279
and then stitching them together and creating a three D

82
00:04:58,639 --> 00:05:01,800
model of that. Now that can be pretty much in

83
00:05:01,839 --> 00:05:02,360
real time.

84
00:05:02,759 --> 00:05:06,199
Speaker 2: Yeah, it's interesting, very cool. We're getting to you know,

85
00:05:06,680 --> 00:05:08,399
what's cool is what we've been able to do. This

86
00:05:08,480 --> 00:05:12,120
is just computationally intensive. This is clever tricks to reduce

87
00:05:12,199 --> 00:05:14,079
the number of bits that need to be hauled around

88
00:05:14,079 --> 00:05:15,439
to get the same similar results.

89
00:05:15,480 --> 00:05:17,920
Speaker 1: Anyway, maybe not exactly, so I think it's a kind

90
00:05:17,920 --> 00:05:20,519
of a breakthrough. So that's what I got. Who's talking

91
00:05:20,519 --> 00:05:22,720
to us today? Richard grabbed a comment of a show

92
00:05:23,040 --> 00:05:25,680
nineteen thirty five. Just a few weeks ago, we talked

93
00:05:25,720 --> 00:05:28,560
to Nathan Westfall about his app that he might the

94
00:05:28,600 --> 00:05:31,160
mobile app he was working on that migrated from Reforms

95
00:05:31,199 --> 00:05:33,920
to Blazer. This comment for Rob King, I thought was

96
00:05:33,959 --> 00:05:36,879
relevant to what we were talking about today, where I

97
00:05:36,920 --> 00:05:38,959
said where he says, I've been doing small stuff in

98
00:05:39,000 --> 00:05:41,639
Blazer since not at five and late twenty twenty three,

99
00:05:41,639 --> 00:05:43,399
we had the opportunity to build a greenfield app with

100
00:05:43,439 --> 00:05:45,720
a tight deadline. While Nathan's app sounds a bit more

101
00:05:45,759 --> 00:05:48,040
complex than ours, a lot of his reasons and decisions

102
00:05:48,079 --> 00:05:51,279
around Blazer resonated with our thoughts and considerations. I build

103
00:05:51,279 --> 00:05:53,560
Blazer using all the hosting models, but I still to

104
00:05:53,759 --> 00:05:57,160
fall to WASM for its clean separation of client server responsibilities.

105
00:05:57,240 --> 00:05:59,800
If I can do everything in the browser that reacted

106
00:06:00,000 --> 00:06:02,040
anger can do, but can write it the same language

107
00:06:02,040 --> 00:06:04,040
as a back end, why would it choose anything else?

108
00:06:04,240 --> 00:06:04,959
Why would you?

109
00:06:05,040 --> 00:06:08,079
Speaker 2: Well? And the argumator for a reactor course is if

110
00:06:08,120 --> 00:06:10,639
I can write everything in JavaScript front end and back end.

111
00:06:10,879 --> 00:06:12,279
Why wouldn't choose anything else?

112
00:06:12,439 --> 00:06:15,079
Speaker 1: Absolutely? I guess it all depends on what your skill

113
00:06:15,120 --> 00:06:17,839
set is. And yeah, you know what's your language of choice?

114
00:06:18,240 --> 00:06:21,399
Speaker 2: Too sweet? How are you happy? Absolutely so, Rob, Thank

115
00:06:21,399 --> 00:06:22,759
you so much for your comment. And the copy of

116
00:06:22,839 --> 00:06:24,160
music coby is on its way to you. And if

117
00:06:24,199 --> 00:06:25,600
you'd like a copy of music Cobey, I write a

118
00:06:25,600 --> 00:06:28,240
comment on the website attrocks dot com or on the facebooks.

119
00:06:28,240 --> 00:06:30,199
We publish every show there and if you comment there

120
00:06:30,199 --> 00:06:31,319
and I read in the show, we'll send you a

121
00:06:31,360 --> 00:06:32,079
copy of music Cope.

122
00:06:32,120 --> 00:06:36,399
Speaker 1: Music to Code Buy has a new episode track. I

123
00:06:36,399 --> 00:06:38,079
guess we call them let me say that again, Yeah,

124
00:06:38,079 --> 00:06:40,040
the tracks all right, Music code by has a new

125
00:06:40,079 --> 00:06:42,160
track track number twenty two. You can go get it

126
00:06:42,360 --> 00:06:45,600
or download the whole thing as MP three's waves or

127
00:06:46,360 --> 00:06:49,480
flax and that is it music to code dot net

128
00:06:49,560 --> 00:06:56,240
flat awesome not half flat flat flag. So yeah, And

129
00:06:56,360 --> 00:07:00,639
you can also find us on the social media's which

130
00:07:00,759 --> 00:07:05,759
include ex Twitter, Mastadon and Blue Sky and where some

131
00:07:06,639 --> 00:07:09,240
you know some version of at Carl Franklin, at Rich Campbell.

132
00:07:09,279 --> 00:07:10,600
Speaker 2: Okay, yep, across the wall.

133
00:07:10,680 --> 00:07:16,879
Speaker 1: So let's bring back Aurora Aurora Sharf She was Aurora

134
00:07:16,879 --> 00:07:20,319
Wohlberg last time we talked. She's a software developer and

135
00:07:20,399 --> 00:07:24,199
Microsoft MVP from Norway. Aurora began her career at a

136
00:07:24,240 --> 00:07:28,920
financial technology startup and now serves as consultant at Crayon Consulting.

137
00:07:29,560 --> 00:07:33,720
She focuses on web development and has extensive expertise in

138
00:07:33,759 --> 00:07:37,519
React and next dot JS and active use of React

139
00:07:37,560 --> 00:07:43,079
server components. She shares her knowledge through workshops, technical blog posts,

140
00:07:43,199 --> 00:07:47,160
social media, demo apps, and supporting fellow developers, and she

141
00:07:47,279 --> 00:07:52,000
regularly presents internationally at recognized conferences to contribute to the

142
00:07:52,000 --> 00:07:55,279
global developer community. Welcome back, Aurora, Hi.

143
00:07:55,639 --> 00:07:58,600
Speaker 3: Thank you for having me back. Get to see you guys, singin.

144
00:07:58,800 --> 00:08:00,920
Speaker 2: That's normally where we hang up is at the various

145
00:08:00,959 --> 00:08:02,519
conferences we both here in.

146
00:08:04,399 --> 00:08:06,600
Speaker 1: It was so much fun last time, and you've got

147
00:08:06,600 --> 00:08:08,680
some new stuff to talk about, so why not.

148
00:08:09,319 --> 00:08:12,639
Speaker 3: Yeah, last time I was NBC Portal and it's it's

149
00:08:12,680 --> 00:08:15,720
different now we're doing it online, but it's fun. Yeah

150
00:08:16,079 --> 00:08:17,040
this way as well.

151
00:08:17,519 --> 00:08:21,439
Speaker 1: And amazingly everything's working today. Don't chinx it oh far.

152
00:08:24,680 --> 00:08:27,680
I know lately Riverside has been kind of hostile towards

153
00:08:28,839 --> 00:08:31,439
people who want to use it as in you can't

154
00:08:31,639 --> 00:08:35,159
use your microphone or your camera. What are you crazy?

155
00:08:36,840 --> 00:08:39,960
Speaker 2: Yeah, so it's funny how this stuff that works suddenly

156
00:08:39,960 --> 00:08:43,200
gets cranked here. Yeah, so what's up with React these days?

157
00:08:43,200 --> 00:08:48,159
Speaker 3: There are lots When I was with you guys last

158
00:08:48,480 --> 00:08:53,840
year year or it was actually was it, yeah, twenty

159
00:08:53,879 --> 00:08:57,039
three us, the whole cervic component thing was pretty new.

160
00:08:57,120 --> 00:09:01,320
But since then it's i mean, React nineteen is released.

161
00:09:01,440 --> 00:09:05,440
We have lots of progression and frameworks that are using

162
00:09:05,480 --> 00:09:09,279
server components. So yeah, it's a lot more stable and

163
00:09:09,320 --> 00:09:11,240
developed now. Definitely nice.

164
00:09:11,360 --> 00:09:13,919
Speaker 2: Yeah, so it's grown up a bit. Yeah, we're on

165
00:09:14,000 --> 00:09:16,360
the nineteenth version of React. That was quick.

166
00:09:16,559 --> 00:09:20,600
Speaker 3: Yep, yep was it? I think it's been four years

167
00:09:20,639 --> 00:09:25,200
since the eighteen if I'm not mistaken with hooks. Okay, well,

168
00:09:25,279 --> 00:09:27,080
actually it's been a very long time.

169
00:09:29,320 --> 00:09:31,320
Speaker 2: Well, and I like when you're getting that mature, it

170
00:09:31,399 --> 00:09:35,039
should slow down, right, Like, I've been kind of disturbed

171
00:09:35,039 --> 00:09:37,559
at how quickly Angular has been creaking out A version

172
00:09:37,639 --> 00:09:41,320
or two a year just seems like a bit much

173
00:09:41,360 --> 00:09:42,039
if you're living in that.

174
00:09:42,080 --> 00:09:47,120
Speaker 1: Ecosystem, especially if they're breaking changes. Yeah, I've what I

175
00:09:47,120 --> 00:09:48,960
I did take a look at reacts for a while

176
00:09:49,080 --> 00:09:50,799
and what I liked about it was this sort of

177
00:09:50,840 --> 00:09:56,679
the fluent composition of it, and it seemed pretty simple

178
00:09:56,720 --> 00:10:00,120
to create React components, you know, if you do know

179
00:10:00,279 --> 00:10:04,200
anything about JavaScript, it felt very comfortable. Definitely, What are

180
00:10:04,639 --> 00:10:06,080
some of your favorite features?

181
00:10:06,480 --> 00:10:10,840
Speaker 3: I love JSX I think just it feels like you're

182
00:10:10,919 --> 00:10:15,480
just flowing through the development process and creating components that

183
00:10:15,559 --> 00:10:19,799
you can use across each each other, inside each other,

184
00:10:20,799 --> 00:10:22,639
past props. I don't know. It feels like a very

185
00:10:22,720 --> 00:10:26,440
natural model to me from building maintainable apps.

186
00:10:26,759 --> 00:10:28,480
Speaker 2: So what's JSX.

187
00:10:29,720 --> 00:10:33,240
Speaker 3: It's the templating language that is used in React. So

188
00:10:33,399 --> 00:10:37,279
that's what lets you like do your conditional rendering like

189
00:10:37,320 --> 00:10:38,919
straight inside your HTML.

190
00:10:39,159 --> 00:10:39,559
Speaker 2: Interesting.

191
00:10:39,679 --> 00:10:44,639
Speaker 1: Yeah, and you can basically create markup like you would

192
00:10:44,639 --> 00:10:47,080
create a JavaScript variable, right yeah.

193
00:10:47,080 --> 00:10:49,720
Speaker 3: Yeah, it's great, It's really great. And JSX, I mean

194
00:10:49,759 --> 00:10:54,039
that's been kind of used as a template for a

195
00:10:54,120 --> 00:10:56,919
lot of other frameworks, like for example, Astro, which is

196
00:10:56,960 --> 00:11:00,000
a different framework, is using their own sort of JS

197
00:11:00,200 --> 00:11:02,960
So clearly people like this, right well.

198
00:11:03,080 --> 00:11:06,080
Speaker 1: People have always really liked being able to blend markup

199
00:11:06,080 --> 00:11:10,399
and code together in easy ways, you know, and sometimes

200
00:11:10,399 --> 00:11:11,960
not so easy way. It's like I remember I don't

201
00:11:12,000 --> 00:11:14,879
know if you remember the first ASP active server pages

202
00:11:15,799 --> 00:11:20,039
where it was yeah, you could have mostly mark up

203
00:11:20,039 --> 00:11:21,759
with a little code. You could have mostly code with

204
00:11:21,759 --> 00:11:24,039
a little markup. You could mix and match, and you know,

205
00:11:24,080 --> 00:11:25,639
it was a big messa.

206
00:11:26,559 --> 00:11:28,679
Speaker 2: Yeah, it always felt like right only stuff like this.

207
00:11:28,720 --> 00:11:32,639
Stuff's easy to crank out, but boy, it's tough to debug.

208
00:11:32,279 --> 00:11:37,600
Speaker 1: Or consolutely horrible to debug. Yeah, So what's the debugging

209
00:11:37,679 --> 00:11:40,960
situation with reacting? What tools do you use to do that?

210
00:11:42,399 --> 00:11:45,759
Speaker 3: I mean it's always console log for me, I don't know.

211
00:11:45,799 --> 00:11:48,039
I think this is like a very It varies from

212
00:11:48,080 --> 00:11:49,240
person to person.

213
00:11:48,919 --> 00:11:50,919
Speaker 2: But for me, you're so old school.

214
00:11:51,919 --> 00:11:55,120
Speaker 3: Also, long is great, and there's some.

215
00:11:55,879 --> 00:11:58,679
Speaker 1: How many times have you written console log? Got here?

216
00:12:00,399 --> 00:12:04,759
Speaker 3: That's usually log something that's not explaining enough, and then

217
00:12:04,799 --> 00:12:06,720
I have to go and add it later. So that's

218
00:12:06,759 --> 00:12:07,519
my problem.

219
00:12:07,639 --> 00:12:10,960
Speaker 2: Yeah, God, here's one thing should never get here is enough?

220
00:12:11,200 --> 00:12:15,639
Never can't Why are you here? You can't be here?

221
00:12:20,840 --> 00:12:24,399
Speaker 3: But yeah, with typescript, I mean you don't really debug

222
00:12:24,639 --> 00:12:28,039
that much. I guess it was different before when you're

223
00:12:28,120 --> 00:12:30,759
using just yeah, yes, but types you don't really end

224
00:12:30,840 --> 00:12:33,639
up in those where what is happening?

225
00:12:33,759 --> 00:12:37,120
Speaker 1: You know as much in Typescript and JSX play well together,

226
00:12:37,279 --> 00:12:37,600
do they?

227
00:12:37,679 --> 00:12:41,519
Speaker 3: Yeah? Yeah, I don't know if I could ever code pack.

228
00:12:42,960 --> 00:12:46,120
Speaker 2: Oh wow, but you know, it's an interesting part of

229
00:12:46,159 --> 00:12:48,919
the tooling is to think in terms of I will

230
00:12:48,919 --> 00:12:50,960
only do this with these tools together.

231
00:12:51,240 --> 00:12:52,840
Speaker 3: Oh yeah, true.

232
00:12:52,960 --> 00:12:55,159
Speaker 2: So is GSX really part of reactor? It seems like

233
00:12:55,159 --> 00:12:58,919
a more generalized, you know, way of describing.

234
00:12:58,720 --> 00:13:04,679
Speaker 3: Ah in writing, I'm pretty sure JSX is a reacting Yeah.

235
00:13:04,480 --> 00:13:07,320
Speaker 1: Is a reacting but yeah, it's defined it react dot org.

236
00:13:07,519 --> 00:13:09,320
Yeah yeah, but.

237
00:13:09,240 --> 00:13:11,159
Speaker 2: It does seem like folks really like it, like it's

238
00:13:11,240 --> 00:13:11,480
kind of.

239
00:13:11,480 --> 00:13:13,799
Speaker 3: Everywhere looking around for Yeah, yeah.

240
00:13:13,639 --> 00:13:17,360
Speaker 2: Certainly specifically mentioned in the typescript docs too. Is you know,

241
00:13:17,440 --> 00:13:22,639
do it this way? M hmm, okay, so we uh

242
00:13:22,759 --> 00:13:25,639
we we're happy with this? Is there is there particular

243
00:13:25,639 --> 00:13:28,559
features and React nineteen that are important because it been

244
00:13:28,679 --> 00:13:30,600
this many years, Like what were they holding back on?

245
00:13:31,799 --> 00:13:35,919
Speaker 3: Well? React nineteen is kind of split into this improvement section,

246
00:13:36,000 --> 00:13:40,480
which is more for upgrading into and whatever it's going

247
00:13:40,559 --> 00:13:42,519
to help you with your client side apps that you

248
00:13:42,559 --> 00:13:45,480
already have, and then it's the new features that are

249
00:13:45,639 --> 00:13:50,519
primarily for the service side of things or integrating the

250
00:13:50,559 --> 00:13:53,879
server and the client in smooth ways. So that's kind

251
00:13:53,919 --> 00:13:56,360
of the trend of nineteen. I guess you have improvements

252
00:13:56,440 --> 00:13:59,399
and then you have new features that work really well

253
00:13:59,559 --> 00:14:01,279
or are for the service side.

254
00:14:01,360 --> 00:14:03,440
Speaker 2: So it seems to me that nineteen is really the

255
00:14:03,519 --> 00:14:06,720
version where server components grows up, Like it was an

256
00:14:06,759 --> 00:14:09,120
add on in eighteen and now it's like, no, this

257
00:14:09,159 --> 00:14:11,120
is a corporal to what we're doing. You want to

258
00:14:11,120 --> 00:14:13,200
do service side rendering, you use server components.

259
00:14:13,279 --> 00:14:18,200
Speaker 1: Yeah, and according to the React blog, the biggest feature

260
00:14:18,279 --> 00:14:21,399
of React nineteen is that it's now stable. Yeah, so

261
00:14:21,440 --> 00:14:22,360
that's really good.

262
00:14:22,759 --> 00:14:25,720
Speaker 3: Yeah, it took a while, it had a bit of

263
00:14:25,879 --> 00:14:28,799
it was I mean React coff was in May twenty

264
00:14:28,840 --> 00:14:31,480
twenty four, which is like the release it was the

265
00:14:31,639 --> 00:14:34,919
RS well it was the RC, but then it took

266
00:14:35,039 --> 00:14:37,679
until I think December twenty twenty four before it was

267
00:14:37,720 --> 00:14:42,879
actually released because of some suspense behavior changing drama that

268
00:14:43,120 --> 00:14:46,840
they were able to fix in collaboration with the community.

269
00:14:47,080 --> 00:14:49,840
Speaker 1: So yeah, right, what is suspense?

270
00:14:49,960 --> 00:14:51,399
Speaker 2: In some ways, you only know when you get it

271
00:14:51,440 --> 00:14:54,960
out into the world and different devs beat on it

272
00:14:55,000 --> 00:14:57,320
and do things too, and you're like, huh, didn't think

273
00:14:57,320 --> 00:14:57,600
of that.

274
00:14:58,000 --> 00:15:02,360
Speaker 1: So suspense is a feature of components. So you can

275
00:15:02,440 --> 00:15:03,960
suspend a component, is that it?

276
00:15:04,279 --> 00:15:04,440
Speaker 2: Ah?

277
00:15:04,799 --> 00:15:08,000
Speaker 3: Yeah, so it's you're going to suspend. I don't know

278
00:15:08,039 --> 00:15:10,519
the exact definition, but you typically to suspend something that's

279
00:15:10,559 --> 00:15:12,759
not ready yet. So it could be for lazy loading

280
00:15:12,879 --> 00:15:15,639
or with server components, it would be a servi component

281
00:15:15,639 --> 00:15:17,279
that's not ready yet.

282
00:15:17,480 --> 00:15:21,159
Speaker 1: Right, so instead of littering your code with boolean flags

283
00:15:21,480 --> 00:15:24,480
you know, loaded loaded now no really loaded?

284
00:15:26,919 --> 00:15:30,840
Speaker 3: Yeah, suspenses. And the reason suspense is so great is

285
00:15:30,879 --> 00:15:33,639
because it lets you define this fallback property so that

286
00:15:33,720 --> 00:15:37,519
you can easily define your skeleton, your eye, all of that.

287
00:15:38,000 --> 00:15:40,759
And yeah, it's a great pattern.

288
00:15:41,080 --> 00:15:42,840
Speaker 1: Yeah, that's pretty cool. And so I guess it was

289
00:15:43,159 --> 00:15:44,919
really improved in nineteen.

290
00:15:45,200 --> 00:15:48,120
Speaker 3: Well, it works with server components. It really completes the

291
00:15:48,159 --> 00:15:49,120
server component model.

292
00:15:49,240 --> 00:15:52,840
Speaker 2: Nice. Yeah, well, what's the fallback position if the server

293
00:15:52,879 --> 00:15:54,799
component doesn't show up? Like this sounds like a pretty

294
00:15:54,799 --> 00:15:55,519
tricky problem.

295
00:15:55,879 --> 00:15:58,519
Speaker 3: So, I mean, we didn't really talk about server components

296
00:15:58,559 --> 00:16:01,000
that much yet. But yeah, when you're waiting, I mean

297
00:16:01,039 --> 00:16:02,279
don't know, I don't know if you want to go

298
00:16:02,399 --> 00:16:07,000
back a little bit, sure, Yeah, Well, server components can

299
00:16:07,039 --> 00:16:10,919
be async, so when they're not ready, when they're still

300
00:16:11,000 --> 00:16:14,600
running on the server, you can't show them, right, and

301
00:16:14,960 --> 00:16:17,960
if you don't deal with that, you would be it

302
00:16:18,000 --> 00:16:20,320
will be like this NPA behavior where you can't go

303
00:16:20,480 --> 00:16:24,600
to the next page. So what you do is you

304
00:16:24,679 --> 00:16:27,840
actually suspend or you wrap them with suspense, and then

305
00:16:27,879 --> 00:16:33,000
you use streaming to stream in that those pieces of

306
00:16:33,919 --> 00:16:37,919
the tree with that component with a fallback you.

307
00:16:37,919 --> 00:16:40,480
Speaker 1: I so is there a concept of pre rendering?

308
00:16:40,759 --> 00:16:44,399
Speaker 3: Oh? I mean it depends. I mean in a way,

309
00:16:44,679 --> 00:16:49,039
server components are pre rendered because they're run on the server, right,

310
00:16:49,240 --> 00:16:51,919
So it's kind of like SSR also, which is also

311
00:16:52,039 --> 00:16:53,200
surrendering in that sense.

312
00:16:53,840 --> 00:16:57,679
Speaker 1: So while it's rendering, you can't access it, so it's suspended.

313
00:16:57,720 --> 00:16:58,480
While it's rendering.

314
00:16:58,639 --> 00:17:00,799
Speaker 3: You would want to suspend it, yeah, so that you

315
00:17:00,840 --> 00:17:03,600
can see something and the user would not be blocked

316
00:17:03,600 --> 00:17:04,640
from going to your page.

317
00:17:04,759 --> 00:17:08,079
Speaker 1: Well okay, so so you the fallback is what you're

318
00:17:08,119 --> 00:17:10,319
talking about, like a placeholder placeholder?

319
00:17:10,359 --> 00:17:11,119
Speaker 3: Yeah, placeholder?

320
00:17:11,240 --> 00:17:14,079
Speaker 2: Yeah, right, while you why at least show something while

321
00:17:14,119 --> 00:17:15,960
you wait to load, or at least say hey, this

322
00:17:16,039 --> 00:17:18,599
isn't isn't or what if it isn't coming like.

323
00:17:18,720 --> 00:17:22,480
Speaker 1: Right, nope, there's no button yet, or the button is disabled.

324
00:17:22,559 --> 00:17:23,160
You gotta wait.

325
00:17:23,279 --> 00:17:27,240
Speaker 3: And if you've been on like any any good modern app,

326
00:17:27,279 --> 00:17:29,799
you'll see lots of skeletons right all over. But if

327
00:17:29,799 --> 00:17:32,000
they're good, you don't think about them that much. Right,

328
00:17:32,039 --> 00:17:34,480
it just feels like, Okay, I'm just waiting for this.

329
00:17:34,559 --> 00:17:36,519
So that's the goal, right. You want it to feel

330
00:17:36,559 --> 00:17:37,359
like it's.

331
00:17:37,359 --> 00:17:39,279
Speaker 2: It's like a div tag. It's a block that's sort

332
00:17:39,279 --> 00:17:41,599
of pulsing because it's waiting for something to load, Like

333
00:17:41,640 --> 00:17:44,319
it gives you a visual indicator that something will happen here,

334
00:17:44,359 --> 00:17:46,039
it's just not happened yet.

335
00:17:46,319 --> 00:17:48,720
Speaker 3: Okay, so that's definitely there.

336
00:17:48,799 --> 00:17:51,119
Speaker 2: Yeah, we're definitely playing this game of ACYNC all the

337
00:17:51,160 --> 00:17:54,279
things so that you're not waiting lineally for each piece

338
00:17:54,319 --> 00:17:57,240
and bits can load as needed. Like it is clever

339
00:17:57,400 --> 00:18:00,920
that the trick is writing manageable code for that. Like

340
00:18:01,000 --> 00:18:04,039
that to me is we want all this a Synchristess.

341
00:18:04,079 --> 00:18:07,039
What we don't want is the debug nightmare of why

342
00:18:07,119 --> 00:18:09,359
is this not behaving correctly? What happens when it comes

343
00:18:09,359 --> 00:18:12,400
in a different order, and not having to own any

344
00:18:12,440 --> 00:18:16,920
of that problem. Okay. So, and when we talked last time,

345
00:18:17,240 --> 00:18:19,480
server components was brand new, and you did have some

346
00:18:19,559 --> 00:18:22,359
warnings and stuff for us, so things are generally better. Like,

347
00:18:22,559 --> 00:18:24,519
what do you see in server components at this point?

348
00:18:25,119 --> 00:18:29,680
Speaker 3: Well, when I started using them, server components were ready

349
00:18:29,839 --> 00:18:32,440
in that sense, they've been actually, they've been stable since

350
00:18:33,359 --> 00:18:35,519
I was on the show last time. However, all of

351
00:18:35,559 --> 00:18:39,440
the APIs that make them more manageable and make them

352
00:18:39,920 --> 00:18:43,599
work well in apps weren't because those kind of came

353
00:18:43,640 --> 00:18:46,759
with nineteen, right, So that's what's changed. So now you

354
00:18:46,759 --> 00:18:51,440
can actually build apps that feel good, not just you know,

355
00:18:51,720 --> 00:18:53,640
Yankees server components, which was a little bit of the

356
00:18:53,720 --> 00:18:55,640
vibe you got before because he didn't really know what

357
00:18:55,720 --> 00:18:57,640
to do with them, how to handle them, how you

358
00:18:58,200 --> 00:18:59,960
made performance apps, all of these things.

359
00:19:00,160 --> 00:19:02,559
Speaker 2: So it's really the UI side needed to catch up

360
00:19:02,599 --> 00:19:04,200
with what server components could do for you.

361
00:19:04,400 --> 00:19:06,519
Speaker 3: I think. So. Yeah, And for sure the reacting was

362
00:19:06,559 --> 00:19:11,440
planning this, but it wasn't really something. The docs weren't ready,

363
00:19:11,640 --> 00:19:13,440
all of them. You didn't really know what you were

364
00:19:13,480 --> 00:19:14,160
supposed to do.

365
00:19:15,079 --> 00:19:17,759
Speaker 2: So what are you supposed to do? How do I

366
00:19:17,799 --> 00:19:20,759
refactor an existing React app to really take advantage of this?

367
00:19:20,839 --> 00:19:22,039
Like the said, a lot of change.

368
00:19:22,119 --> 00:19:23,960
Speaker 3: It depends on what you mean by this. If you

369
00:19:24,000 --> 00:19:27,480
mean server components, that's not really an easy thing to do.

370
00:19:28,599 --> 00:19:31,359
But you can use React nineteen. That's all good. But

371
00:19:31,480 --> 00:19:34,319
if you want to use server components, you need some

372
00:19:34,359 --> 00:19:35,440
sort of framework for that.

373
00:19:35,599 --> 00:19:38,880
Speaker 1: Okay, so that's what the async UI and the streaming

374
00:19:39,119 --> 00:19:46,759
comes in. Does that whole process of suspending rendering does

375
00:19:46,839 --> 00:19:50,359
that all happen by default? Or do you have to say, hey,

376
00:19:50,400 --> 00:19:53,440
I want this component, but I want it to be suspended,

377
00:19:53,480 --> 00:19:56,400
and then say when it's not suspended, like, does it

378
00:19:56,519 --> 00:19:56,960
just work?

379
00:19:57,400 --> 00:19:59,839
Speaker 3: You have to define it and it's a little bit

380
00:20:00,039 --> 00:20:02,160
easy to mess it up if you don't know what

381
00:20:02,279 --> 00:20:06,920
to do yet. I would say yeah. For example, in

382
00:20:07,119 --> 00:20:10,960
next GS, which is like the most stable cervice component framework,

383
00:20:11,880 --> 00:20:15,319
you're not really told when something is being awaited and

384
00:20:15,359 --> 00:20:17,599
you don't have a fallback the way it is right now.

385
00:20:18,079 --> 00:20:20,039
So you need to kind of learn to look for

386
00:20:20,119 --> 00:20:23,559
where you're putting your ACYNC code and then define your

387
00:20:23,559 --> 00:20:24,880
suspense boundaries yourself.

388
00:20:25,000 --> 00:20:26,720
Speaker 1: Is there a good reason for that? It seems like

389
00:20:26,799 --> 00:20:29,960
plumbing code, but maybe because it doesn't always happen in

390
00:20:30,000 --> 00:20:30,640
the same way.

391
00:20:32,119 --> 00:20:34,680
Speaker 3: I think it's because, I mean, there's you could say

392
00:20:34,759 --> 00:20:37,839
that there's use cases where you don't want to have

393
00:20:37,880 --> 00:20:41,000
a fallback, you want to block the UI before you

394
00:20:41,039 --> 00:20:44,519
see something. But what next GS is doing right now

395
00:20:44,599 --> 00:20:47,559
is innovating a lot on this actually, So they have

396
00:20:47,599 --> 00:20:52,200
this new modes that will give you airs when you're

397
00:20:52,200 --> 00:20:55,200
not providing fallbacks. So yeah, there's a lot of innovation

398
00:20:55,319 --> 00:21:01,799
happening on how to make this developer experience also logical better.

399
00:21:01,920 --> 00:21:05,799
Speaker 1: Yeah, falling into the pit of success is a good thing. Yeah,

400
00:21:05,920 --> 00:21:08,319
so so I guess, yeah, we've got to watch out

401
00:21:08,319 --> 00:21:11,720
for that. But I'm sure the documentation since it's been

402
00:21:11,799 --> 00:21:15,799
redone is a lot better about explaining how that works.

403
00:21:16,079 --> 00:21:16,440
Speaker 3: M M.

404
00:21:16,759 --> 00:21:19,359
Speaker 2: Definitely at least helping you with trying to do the

405
00:21:19,400 --> 00:21:22,200
right things. But it also sounds like you don't just

406
00:21:22,279 --> 00:21:26,920
retrofit React components server components in You've got to think

407
00:21:26,960 --> 00:21:28,759
through the way your site works.

408
00:21:29,039 --> 00:21:31,200
Speaker 3: Yeah, and you would migrate to a framework if you're

409
00:21:31,200 --> 00:21:34,319
not on one. So if you're in a create rect app,

410
00:21:34,359 --> 00:21:37,960
speaking of create recD app is deprecated now, by the way,

411
00:21:38,039 --> 00:21:40,559
so you shouldn't be using it before. You should definitely

412
00:21:40,599 --> 00:21:41,880
not be using it now.

413
00:21:43,559 --> 00:21:44,839
Speaker 1: Can you say what it is? Again?

414
00:21:45,720 --> 00:21:47,359
Speaker 3: So create rerect app was.

415
00:21:47,400 --> 00:21:49,720
Speaker 1: Create rerect apprep.

416
00:21:49,759 --> 00:21:53,039
Speaker 3: It's the probably if you've built a React up that's

417
00:21:53,079 --> 00:21:56,720
what you've used for like the past years, unless you've

418
00:21:56,720 --> 00:21:59,240
been following along and you've been using it in the

419
00:21:59,400 --> 00:22:06,359
in the time, it was like the first what do you.

420
00:22:06,279 --> 00:22:09,359
Speaker 1: Say, like template generator something.

421
00:22:09,119 --> 00:22:13,279
Speaker 3: Template generator, Yeah, for React as a framework, and it

422
00:22:13,319 --> 00:22:16,079
hasn't been maintained for a long time. And then finally,

423
00:22:16,240 --> 00:22:20,680
now that React nineteen was released, the community was like,

424
00:22:21,039 --> 00:22:24,119
we need you guys to deprecate this because new devs

425
00:22:24,119 --> 00:22:26,319
are still going to fall into this trap of using

426
00:22:26,359 --> 00:22:28,799
it and it doesn't even work anymore, you know.

427
00:22:29,279 --> 00:22:31,880
Speaker 2: Okay, that's because the whole point we create React app

428
00:22:31,960 --> 00:22:34,279
was like, it's your instant Hello world. Right, it's really

429
00:22:34,640 --> 00:22:37,720
boo boo. Here you go running now, tweak it from here.

430
00:22:37,599 --> 00:22:40,599
Speaker 1: Like a visual studio template would mm hmmm. Yeah, So

431
00:22:40,759 --> 00:22:44,440
is there an alternative one of those or yes?

432
00:22:45,960 --> 00:22:48,799
Speaker 3: So for a long time already you can you would

433
00:22:48,920 --> 00:22:52,559
use vit, which is like the VIT next generation VI

434
00:22:53,319 --> 00:22:57,839
the ite Okay, it's not an intuitive pronunciation.

435
00:22:58,880 --> 00:23:04,160
Speaker 1: Okay, VIT dev Yeah, like VITE, only different French for quick.

436
00:23:04,240 --> 00:23:06,599
Speaker 3: I think it's front yep, correct, that's what it is.

437
00:23:07,480 --> 00:23:09,519
Speaker 2: Nice, is it or is it VAT?

438
00:23:09,720 --> 00:23:15,799
Speaker 1: I'm just glancing at the documentation here. Yeah, scaffolding your

439
00:23:15,839 --> 00:23:21,519
first VITT project or VAT maybe v maybe VAT.

440
00:23:21,480 --> 00:23:26,559
Speaker 3: Yeah, I don't think. Maybe some people know the proper pronunciation, but.

441
00:23:26,920 --> 00:23:30,119
Speaker 2: None of us are French, and being Canadian doesn't count.

442
00:23:30,240 --> 00:23:33,000
It says on the docks that it's on the docks.

443
00:23:33,000 --> 00:23:34,599
It says it's pronounced like VAT.

444
00:23:34,640 --> 00:23:36,640
Speaker 3: Okay, okay, then my bad.

445
00:23:37,039 --> 00:23:41,480
Speaker 1: But it looks I mean it's you use NPM and uh,

446
00:23:42,160 --> 00:23:45,000
it looks pretty simple. And then there's some community templates too.

447
00:23:45,680 --> 00:23:49,960
Speaker 3: Yeah, it's a really great Bungler build tool and it's

448
00:23:50,079 --> 00:23:55,759
created by the viegis community. I think I might be

449
00:23:55,759 --> 00:23:58,440
saying some wrong thing. Sorry, that's not are already, that's

450
00:23:58,599 --> 00:24:01,400
not entirely correct here. But it's been like ever since

451
00:24:01,640 --> 00:24:04,519
maybe twenty twenty already, it's been like the default way

452
00:24:04,519 --> 00:24:07,039
you should be creating a react at, but it hasn't

453
00:24:07,079 --> 00:24:10,519
been communicated that clearly that this is the way we

454
00:24:10,559 --> 00:24:11,079
do it now.

455
00:24:11,440 --> 00:24:14,319
Speaker 2: Nice. Yeah, it seems the relations between invite and views

456
00:24:14,720 --> 00:24:18,559
or VAT and view is also VAT and react, which

457
00:24:18,599 --> 00:24:21,640
is interesting. You keep wanting to paint these different stacks

458
00:24:21,640 --> 00:24:24,480
as rivals and then they go and collaborate on tooling

459
00:24:24,599 --> 00:24:27,079
and using the same thing. It's like, listen, not that

460
00:24:27,160 --> 00:24:29,759
big of a rival really, So wait, you can use

461
00:24:29,839 --> 00:24:30,720
VAT with view.

462
00:24:31,200 --> 00:24:33,319
Speaker 3: Yeah, and actually it can be used with like a

463
00:24:33,359 --> 00:24:37,440
lot of things. And actually many of the newer generation

464
00:24:37,519 --> 00:24:42,960
meta frameworks, like like Reactor out of v seven has

465
00:24:43,119 --> 00:24:46,799
migrated to VEAT, So it's it's already like very big

466
00:24:46,880 --> 00:24:47,880
in the framework world.

467
00:24:48,000 --> 00:24:48,319
Speaker 1: Wow.

468
00:24:48,880 --> 00:24:53,359
Speaker 2: Interesting, Yeah, it works with Angular, works with Yeah. It

469
00:24:53,440 --> 00:24:56,559
seems like a front end to a build system, right,

470
00:24:56,640 --> 00:24:59,599
whatever you want to build. That's really interesting, very cool.

471
00:24:59,640 --> 00:25:01,640
I'll make I'll make your life easier. Here you go.

472
00:25:02,559 --> 00:25:04,279
Speaker 1: So this seems like a good time for a break.

473
00:25:04,319 --> 00:25:07,039
We'll be right back after these very important messages. Stick around.

474
00:25:09,519 --> 00:25:12,240
You know. Dot net six has officially reached the end

475
00:25:12,279 --> 00:25:15,480
of support and now is the time to upgrade. Dot

476
00:25:15,559 --> 00:25:19,240
Net eight is well supported on aws. Learn more at

477
00:25:19,240 --> 00:25:26,119
aws dot Amazon dot com, slash dot net. And we're back.

478
00:25:26,240 --> 00:25:29,160
It's dot net rocks. I'm Carl Franklin. That's Richard Campbell. Hey,

479
00:25:29,240 --> 00:25:32,920
we're talking to our friend or Sharf about React and

480
00:25:33,039 --> 00:25:39,559
React server components and next JS. So what's the difference

481
00:25:39,559 --> 00:25:46,240
between NEXTJS and other frameworks. Major difference in terms of

482
00:25:46,279 --> 00:25:47,079
how you use them.

483
00:25:47,160 --> 00:25:51,160
Speaker 3: So next gs is, I mean server components were developed

484
00:25:51,200 --> 00:25:54,799
together with NEXTGS and nextgs is. Implementation of them is

485
00:25:54,880 --> 00:25:59,920
sort of reacts idea of how they're supposed to be used, okay,

486
00:26:00,319 --> 00:26:03,519
architecture Okay, but that's not the only way you can

487
00:26:03,599 --> 00:26:06,680
use them. But in server components next you as server

488
00:26:06,759 --> 00:26:11,599
components are everything is default server. So it's like server first, right,

489
00:26:11,960 --> 00:26:14,799
which is why it's also like this entirely new mental

490
00:26:14,839 --> 00:26:16,680
model for React developers.

491
00:26:18,039 --> 00:26:21,440
Speaker 1: Server first, meaning before you do any UI, you create

492
00:26:21,440 --> 00:26:24,720
your server and you build out your UI from that.

493
00:26:25,200 --> 00:26:27,960
Speaker 3: Yeah, you're starting on the server, and you opt in

494
00:26:28,039 --> 00:26:31,720
to the client whenever you need client features, okay.

495
00:26:31,480 --> 00:26:33,079
Speaker 2: Because who wants clients?

496
00:26:33,200 --> 00:26:36,799
Speaker 1: Honestly, Well, I guess what I'm getting at is I

497
00:26:36,839 --> 00:26:39,160
can see like the server first being analogous to like

498
00:26:39,200 --> 00:26:43,079
Blazer server, where you have your markup and your code

499
00:26:43,079 --> 00:26:45,480
and it all just sort of munges together and goes

500
00:26:45,519 --> 00:26:50,400
down to the client. Whereas you know, the traditional model

501
00:26:50,640 --> 00:26:53,799
is you build an HTML file and you have some JavaScript,

502
00:26:53,880 --> 00:26:55,839
You call the JavaScript to go to the server to

503
00:26:55,880 --> 00:26:57,640
get some data, and then you bring it back into

504
00:26:57,680 --> 00:27:02,680
the client. So with the next server first approach, you're

505
00:27:02,720 --> 00:27:05,519
basically doing everything from the server. You're not building an

506
00:27:05,640 --> 00:27:09,039
HTML file on the client and then going and making

507
00:27:09,119 --> 00:27:13,000
calls to a server, right, yeah, the service the server

508
00:27:13,200 --> 00:27:14,279
supplies the markup.

509
00:27:14,440 --> 00:27:16,279
Speaker 3: Everything starts from the server, and you will also be

510
00:27:16,279 --> 00:27:18,920
fetching your data on the server and then you rather

511
00:27:19,160 --> 00:27:22,720
pass it down if it needs to be available inside

512
00:27:22,839 --> 00:27:26,160
something we call client components, right, which is and that's.

513
00:27:26,039 --> 00:27:30,400
Speaker 1: Also safe, Yeah, safer, because why are you exposing APIs

514
00:27:30,440 --> 00:27:34,359
that require authorisation to a client browser.

515
00:27:34,480 --> 00:27:34,960
Speaker 3: Don't do that.

516
00:27:35,440 --> 00:27:37,160
Speaker 1: Yeah, don't do that. That's not good.

517
00:27:37,920 --> 00:27:39,480
Speaker 2: It's not that. Stop that.

518
00:27:39,680 --> 00:27:42,960
Speaker 1: Stop that. But that's how it was done for the

519
00:27:43,039 --> 00:27:45,279
longest time, right, Oh yeah, for.

520
00:27:45,240 --> 00:27:47,400
Speaker 3: The longest time, you would always have some sort of

521
00:27:47,400 --> 00:27:50,880
API in between your your client site React up because

522
00:27:50,960 --> 00:27:52,319
you had to write.

523
00:27:52,119 --> 00:27:56,680
Speaker 2: Yeah right, yeah, what was the typical React back end

524
00:27:56,759 --> 00:27:59,240
piece you would use before we got the server components?

525
00:28:00,160 --> 00:28:02,920
Speaker 3: Well, for well, I work at a consultancy and we're

526
00:28:02,920 --> 00:28:05,640
still like some a lot of projects are still using

527
00:28:05,759 --> 00:28:08,200
this old stack. You could say it's still relevant, but

528
00:28:08,240 --> 00:28:11,680
that would be like React SPA with EAT and then

529
00:28:11,759 --> 00:28:13,960
maybe done it WEBPI is something like that. That's like

530
00:28:13,960 --> 00:28:14,720
the typical I.

531
00:28:15,079 --> 00:28:16,359
Speaker 2: Was thinking of remix or.

532
00:28:16,400 --> 00:28:18,400
Speaker 3: Well remix is also a meta framework, so they can

533
00:28:18,440 --> 00:28:20,240
also do their own data fetching if they want to.

534
00:28:20,640 --> 00:28:24,839
Speaker 2: Right Like, it's just like next is the latest version.

535
00:28:24,880 --> 00:28:29,440
But there were other solutions to the SPA approach of React.

536
00:28:29,640 --> 00:28:33,359
This seems less spash, like you're basically asking the server

537
00:28:33,440 --> 00:28:34,559
to send you mark out.

538
00:28:34,680 --> 00:28:37,400
Speaker 3: Yeah, and that's why it's a big mental shift because

539
00:28:37,400 --> 00:28:40,720
it is way less spish, it's more it's more Yeah,

540
00:28:41,400 --> 00:28:43,799
it's it's serve first. It's not really a SPA until

541
00:28:43,839 --> 00:28:44,559
you make it a SPA.

542
00:28:44,680 --> 00:28:48,039
Speaker 1: Right to me, it's analogous to Blazer server, you know,

543
00:28:48,279 --> 00:28:53,160
where the server just generates everything, the markup, the data, everything.

544
00:28:53,240 --> 00:28:55,680
So there's no you know, code that needs to run

545
00:28:55,720 --> 00:28:59,559
in the browser per se, unless there's something specific that

546
00:28:59,599 --> 00:29:00,319
you have to run.

547
00:29:00,359 --> 00:29:02,759
Speaker 2: Because one of the things we liked about spas was

548
00:29:02,920 --> 00:29:06,640
then you could have pieces of the page being reloaded

549
00:29:06,720 --> 00:29:08,359
instead of a DIP and so forth. And I presume

550
00:29:08,400 --> 00:29:10,799
you can still do that. It's just the original spot

551
00:29:11,039 --> 00:29:13,599
says I'm going to download a bunch of UI, go

552
00:29:13,880 --> 00:29:16,640
to the client that then has the code to call

553
00:29:16,720 --> 00:29:20,440
to different APIs to populate bits on the page. Now

554
00:29:20,440 --> 00:29:22,640
you're saying just fetch it from the server. Server will

555
00:29:22,680 --> 00:29:25,039
render what give it what we need to render with,

556
00:29:25,440 --> 00:29:29,359
and that might include asynchronous pieces to be loaded as well.

557
00:29:29,480 --> 00:29:33,279
Speaker 1: Yep, yep, yeah, that seems really cool.

558
00:29:33,319 --> 00:29:35,079
Speaker 2: I mean I come at this from a scaling perspective,

559
00:29:35,079 --> 00:29:37,240
so I'm trying to figure out what's more resource intensive

560
00:29:37,279 --> 00:29:40,920
to the server, you know, recognizing you know, what's the

561
00:29:40,960 --> 00:29:43,599
server capable of. Although it's a cloud world now, like

562
00:29:43,799 --> 00:29:46,240
that almost means that, you know, scaling means a different

563
00:29:46,279 --> 00:29:46,759
thing today.

564
00:29:46,799 --> 00:29:48,720
Speaker 1: It's a button to push a slider.

565
00:29:48,759 --> 00:29:49,440
Speaker 2: It's a slider.

566
00:29:50,640 --> 00:29:52,599
Speaker 3: So when you're doing it on the server at least,

567
00:29:52,599 --> 00:29:54,839
I mean, you don't have to, as you're saying, download

568
00:29:54,880 --> 00:29:57,200
the code to fetch the API and get go all

569
00:29:57,240 --> 00:29:59,839
the way back to you know, communicate with API, give

570
00:29:59,880 --> 00:30:04,440
it back. You're skipping this like this long travel, I

571
00:30:04,440 --> 00:30:06,160
guess because you're already just started.

572
00:30:06,640 --> 00:30:10,279
Speaker 2: Yeah, the first page load on a SPA socks. Yeah, right,

573
00:30:10,400 --> 00:30:12,880
Like that's always the battle the later ones, because you've

574
00:30:12,880 --> 00:30:15,960
got stuff cash get better. But we got to a

575
00:30:16,039 --> 00:30:18,079
point where some of our sites where we're literally doing

576
00:30:18,119 --> 00:30:21,400
a flat rendered page that then backloaded the SPA in

577
00:30:22,240 --> 00:30:23,839
just so that your first page.

578
00:30:23,519 --> 00:30:26,000
Speaker 3: Was quick oh yeah, but.

579
00:30:26,000 --> 00:30:27,880
Speaker 2: It was literally an orphan page, like it was completely

580
00:30:27,920 --> 00:30:29,960
different than everything else on the site because it was

581
00:30:29,960 --> 00:30:33,200
all about get that landing page loaded fast so people

582
00:30:33,240 --> 00:30:34,119
have a good experience.

583
00:30:34,319 --> 00:30:35,680
Speaker 1: It's the pre rendering thing.

584
00:30:37,440 --> 00:30:40,160
Speaker 2: It's a very convoluted way of thinking. But yeah, you

585
00:30:40,400 --> 00:30:43,079
could see the I guide me. My brain is immediately

586
00:30:43,079 --> 00:30:45,720
going to what's that going to mean for server resources?

587
00:30:46,160 --> 00:30:48,240
It doesn't matter. I can just light up more functions.

588
00:30:49,319 --> 00:30:55,000
Speaker 1: So do you know how much memory per client is

589
00:30:55,160 --> 00:30:58,079
used in reacts server components about?

590
00:30:58,279 --> 00:31:01,119
Speaker 3: I don't know that, but I do know that when

591
00:31:01,119 --> 00:31:04,000
you're using the server, Actually it doesn't have to be

592
00:31:04,160 --> 00:31:07,240
like the server that you're doing your dynamic stuff. It

593
00:31:07,240 --> 00:31:11,279
can also be in the build So whatever resources you

594
00:31:12,079 --> 00:31:15,440
that you're talking about here would be for your dynamic data. Right,

595
00:31:15,759 --> 00:31:17,720
So if you have some sort of static stuff that

596
00:31:17,759 --> 00:31:20,119
you don't need, so the things that make it a

597
00:31:20,200 --> 00:31:24,759
dynamic will be like request headers or params or cookies,

598
00:31:24,799 --> 00:31:27,400
all of that stuff. If a component doesn't use it,

599
00:31:27,400 --> 00:31:29,559
it doesn't need to be rendered on the serve. It

600
00:31:29,559 --> 00:31:30,680
can be in the build data.

601
00:31:30,759 --> 00:31:33,640
Speaker 1: That's you know, based on who the client is, right,

602
00:31:34,519 --> 00:31:34,799
you know.

603
00:31:35,119 --> 00:31:36,559
Speaker 3: Yeah, correct, exactly?

604
00:31:36,960 --> 00:31:41,599
Speaker 1: Yeah, what would call state stateful stuff user state Yeah

605
00:31:42,640 --> 00:31:43,160
sounds good.

606
00:31:43,240 --> 00:31:44,839
Speaker 2: Yeah, what does this deploy like?

607
00:31:44,839 --> 00:31:44,920
Speaker 1: Like?

608
00:31:45,000 --> 00:31:47,160
Speaker 2: How what am I setting up on the back end here?

609
00:31:47,279 --> 00:31:50,680
Is this a set of functions in Azure or is

610
00:31:50,680 --> 00:31:54,680
it a ask to come out in container sets?

611
00:31:54,720 --> 00:31:54,799
Speaker 3: Like?

612
00:31:54,839 --> 00:31:57,079
Speaker 2: What's this the back end? The deploy look like.

613
00:31:58,000 --> 00:32:00,359
Speaker 3: If you have I mean previously I try it with

614
00:32:00,480 --> 00:32:05,319
app service, but right now our deployment is just no

615
00:32:05,440 --> 00:32:08,319
j is dockra image and then containerize the application. That

616
00:32:08,440 --> 00:32:13,920
works great. I think any anything, pretty much anything. And

617
00:32:13,960 --> 00:32:16,640
it's actually a misconception that a lot of people think

618
00:32:16,640 --> 00:32:19,119
that you have to use for sell and you don't

619
00:32:19,279 --> 00:32:22,519
and the Libra robins you have to use Versell, which

620
00:32:22,599 --> 00:32:26,440
is the versall the creator of NEXTJS right right, Oh, I.

621
00:32:26,400 --> 00:32:28,799
Speaker 1: See, so you can run it and Amazon, you can

622
00:32:28,880 --> 00:32:30,440
run it in containers and run anywhere.

623
00:32:30,480 --> 00:32:32,440
Speaker 2: Yep, yep, yeah, yeah, there's no reason an the end,

624
00:32:32,480 --> 00:32:34,000
you just need something that can run node right in

625
00:32:34,039 --> 00:32:35,599
terms out just about everything and run node.

626
00:32:35,880 --> 00:32:36,519
Speaker 3: Yeah.

627
00:32:36,559 --> 00:32:39,119
Speaker 2: So yeah, you could easily easily rite in a container.

628
00:32:39,200 --> 00:32:42,000
Speaker 1: Is that the only misconception people might have about React

629
00:32:42,079 --> 00:32:44,480
nineteen and React service components.

630
00:32:44,599 --> 00:32:48,039
Speaker 3: It's definitely a big one. Usually when I'm talking to

631
00:32:48,119 --> 00:32:51,720
people sometimes they would say, like, what, you're deploying next

632
00:32:51,839 --> 00:32:54,440
JS on Azure, How are you doing that? I don't.

633
00:32:54,480 --> 00:33:01,000
I didn't think that's possible. So that's a big one.

634
00:32:58,400 --> 00:33:06,359
And maybe another big one is about the compiler. So

635
00:33:06,400 --> 00:33:08,839
it's been like a big thing that React compiler, which

636
00:33:08,839 --> 00:33:11,119
is a whole other thing, is in React nineteen.

637
00:33:12,400 --> 00:33:16,039
Speaker 1: It's not beta, so there was no compiler before nineteen.

638
00:33:16,279 --> 00:33:19,359
Speaker 3: No compiler is new because it's a server thing. It's

639
00:33:19,359 --> 00:33:24,119
an Zephyr project. It's not actually it's a client thing.

640
00:33:24,519 --> 00:33:24,880
Speaker 1: Really.

641
00:33:25,200 --> 00:33:28,039
Speaker 3: Yeah, it's like this whole other thing that has not

642
00:33:28,119 --> 00:33:31,519
really that much to do with server components.

643
00:33:31,519 --> 00:33:35,559
Speaker 1: Interesting, So this is separate from the JavaScript engine in

644
00:33:35,599 --> 00:33:38,240
the browser. What do we need a compiler on the

645
00:33:38,240 --> 00:33:38,720
client for?

646
00:33:39,519 --> 00:33:43,519
Speaker 3: So in React, right, you're doing a lot of rerenders

647
00:33:44,039 --> 00:33:48,119
and React doesn't use signals like some of the other

648
00:33:48,160 --> 00:33:52,680
frameworks like Angler's got signals now right and solid JS.

649
00:33:52,720 --> 00:33:56,680
So you're doing necessary rerenders and the compiler is kind

650
00:33:56,720 --> 00:33:59,559
of here to fix that for you, so that your

651
00:33:59,680 --> 00:34:01,920
code is memoirs automatically.

652
00:34:02,039 --> 00:34:06,400
Speaker 1: Okay, So is it analogous to just taking messages that

653
00:34:06,440 --> 00:34:09,360
are like, you know, upload this div with this content

654
00:34:10,800 --> 00:34:13,079
or you know, change this list of stuff to this

655
00:34:14,280 --> 00:34:16,840
just in specific components on the page.

656
00:34:16,920 --> 00:34:20,519
Speaker 3: It will I'm actually I'm an expert on the compiler.

657
00:34:20,559 --> 00:34:23,079
I just know it's a common misconception, but it will

658
00:34:23,119 --> 00:34:27,519
do your use memmo use callback stuff. Kind of it's

659
00:34:27,559 --> 00:34:30,400
a different way of doing it, but it will substitute

660
00:34:30,400 --> 00:34:34,480
whatever extra code you would add to add momorization for you,

661
00:34:34,519 --> 00:34:36,519
so you don't have to add it. Okay, So skipping

662
00:34:36,960 --> 00:34:43,719
skipping unnecessary rerenders and caching or memorizing heavy computations, is.

663
00:34:43,679 --> 00:34:47,320
Speaker 1: There still work to do Unreact server components? Is there

664
00:34:47,400 --> 00:34:49,320
still stuff on your wish list?

665
00:34:50,440 --> 00:34:54,000
Speaker 3: Well, there is a lot of things happening actually still

666
00:34:54,039 --> 00:34:57,960
because again the next year is implementation is one one approach.

667
00:34:58,599 --> 00:35:01,400
You have other frameworks that have kind of been emerging

668
00:35:02,119 --> 00:35:06,079
recently with their own dots on how to deal with

669
00:35:06,119 --> 00:35:10,760
server components. So maybe you know, well, you know remix, right,

670
00:35:10,920 --> 00:35:17,559
you said remix Remix has now been or I guess

671
00:35:17,599 --> 00:35:20,679
renamed or been migrated to Reactor out of v seven

672
00:35:20,800 --> 00:35:22,679
or did you have you heard of that yet?

673
00:35:23,079 --> 00:35:23,480
Speaker 2: React?

674
00:35:23,480 --> 00:35:24,119
Speaker 1: What seven?

675
00:35:24,280 --> 00:35:25,599
Speaker 3: React router v seven?

676
00:35:26,000 --> 00:35:28,800
Speaker 1: Router v seven So React router is like.

677
00:35:28,760 --> 00:35:32,440
Speaker 3: The biggest React library, right, and Remix is built on

678
00:35:32,480 --> 00:35:37,079
top of it, same creator. Now it's been merged. This

679
00:35:37,119 --> 00:35:40,119
is a pretty big deal actually for those millions of

680
00:35:40,800 --> 00:35:41,880
React apps out there.

681
00:35:42,679 --> 00:35:48,599
Speaker 1: So Remix became React router v seven. Is that what happened? Yeah,

682
00:35:48,679 --> 00:35:52,360
kind of Yeah, Yeah, everything you love about remix back

683
00:35:52,400 --> 00:35:57,239
into React router proper. So they're encouraging all Remix v

684
00:35:57,320 --> 00:35:59,800
two users to upgrade the reactor outer v seven.

685
00:36:00,079 --> 00:36:00,280
Speaker 3: Yeah.

686
00:36:00,280 --> 00:36:02,639
Speaker 1: It says for the majority of the React ecosystem that

687
00:36:02,679 --> 00:36:05,119
has been around for the last ten years, we believe

688
00:36:05,199 --> 00:36:07,199
React Router B seven will be the smoothest way to

689
00:36:07,199 --> 00:36:10,880
bridge the gap between React eighteen and nineteen. Oh that's interesting.

690
00:36:11,840 --> 00:36:15,320
So if you have React eighteen with remix and you

691
00:36:15,360 --> 00:36:18,280
want to move to nineteen using React router v seven,

692
00:36:18,360 --> 00:36:18,679
that's the.

693
00:36:18,599 --> 00:36:19,039
Speaker 2: Way to go.

694
00:36:19,400 --> 00:36:21,800
Speaker 3: Yep. And also going from reactor out of B six

695
00:36:22,119 --> 00:36:26,400
and kind of incrementally adopting Ahmeda frameworks features, which is

696
00:36:26,480 --> 00:36:30,400
amazing because that's not always so easy as with if

697
00:36:30,440 --> 00:36:31,760
you worse to do it with the next ye just

698
00:36:31,800 --> 00:36:34,519
app router, it's not like that. So it's a pretty

699
00:36:34,639 --> 00:36:35,280
pretty big deal.

700
00:36:35,559 --> 00:36:37,000
Speaker 1: Yeah, yeah, seems like it.

701
00:36:37,480 --> 00:36:42,559
Speaker 2: Yeah, and definitely feels like the ecosystem trying to consolidate

702
00:36:42,599 --> 00:36:47,000
into a few more standard approaches. I grabbed a link

703
00:36:47,039 --> 00:36:49,719
off of Microsoft learned about running next JS since Azure

704
00:36:49,719 --> 00:36:53,000
static web apps, and it reminds me of things like

705
00:36:53,320 --> 00:36:55,880
making word Press run on Windows, Like just because you

706
00:36:56,039 --> 00:36:58,599
can doesn't mean you should.

707
00:36:59,320 --> 00:37:02,199
Speaker 3: I actually encounter someone who had been doing that and

708
00:37:02,400 --> 00:37:07,000
don't do that. I think they've done this. I don't

709
00:37:07,039 --> 00:37:10,679
know this, but I think that they have this docks

710
00:37:10,719 --> 00:37:13,079
on it. But it's not supposed to really be done

711
00:37:13,159 --> 00:37:15,920
this way. I just remember the person who tried it

712
00:37:15,960 --> 00:37:17,360
and it was just not something.

713
00:37:18,280 --> 00:37:20,400
Speaker 2: I mean, what is the like you said, it is

714
00:37:20,400 --> 00:37:24,360
the typical react to play with versll because that's the

715
00:37:24,679 --> 00:37:26,440
end to end sort of we know it works, all

716
00:37:26,440 --> 00:37:28,840
the docks exist, Like that's easier. What do you or

717
00:37:29,039 --> 00:37:31,719
what are the all sort of known good alternatives that

718
00:37:31,760 --> 00:37:33,280
you're going to get decent support for?

719
00:37:34,280 --> 00:37:39,719
Speaker 3: Alternative for versall or yeah, there's a lot. I know

720
00:37:39,760 --> 00:37:42,840
a lot of people deploy on netfly cloud flair right

721
00:37:43,119 --> 00:37:48,760
right in ws Azure, But at least for your own projects,

722
00:37:48,880 --> 00:37:50,599
versael is just so smooth, right.

723
00:37:50,599 --> 00:37:53,719
Speaker 1: Right, so the experience is smoother just because they own

724
00:37:53,719 --> 00:37:55,960
the whole stack. Is that the Is that the idea?

725
00:37:57,199 --> 00:37:59,519
Speaker 3: Yeah, but they also support other frameworks, by the way,

726
00:37:59,599 --> 00:38:01,960
not just but you're.

727
00:38:01,840 --> 00:38:04,440
Speaker 2: Dealing with a with a customer and they are primarily

728
00:38:04,519 --> 00:38:06,880
an Azure tenant. You want to run this an Azure

729
00:38:06,960 --> 00:38:09,559
It sounds like the way to go is is containers,

730
00:38:09,639 --> 00:38:10,079
is Docker.

731
00:38:11,039 --> 00:38:11,760
Speaker 3: That's what we see.

732
00:38:11,800 --> 00:38:15,480
Speaker 2: That's well, that's the well documented strategy deploying React. I

733
00:38:15,519 --> 00:38:17,559
mean node runs and Azure functions. I just don't that

734
00:38:17,639 --> 00:38:19,920
I'd want to try and implement it this way because

735
00:38:19,920 --> 00:38:22,239
it is kind of odd, right, You're going to be

736
00:38:22,280 --> 00:38:25,280
by yourself if you do this. Yeah, though, just trying

737
00:38:25,320 --> 00:38:27,440
to get you know, there's always these perfect well you

738
00:38:27,480 --> 00:38:30,559
could do that, but you'd be all alone if you

739
00:38:30,639 --> 00:38:33,599
did so.

740
00:38:33,880 --> 00:38:36,039
Speaker 1: Again, when I asked you, what's on your wish list?

741
00:38:36,159 --> 00:38:38,119
You said what they were doing. That's really great. So

742
00:38:38,199 --> 00:38:39,920
what's on your actual wish list?

743
00:38:40,119 --> 00:38:42,559
Speaker 3: Well? Actually I got kind of derailed here, but what

744
00:38:42,599 --> 00:38:45,360
I was going to say was that retch out of

745
00:38:45,440 --> 00:38:48,800
the seven is also getting server components in a whole

746
00:38:48,800 --> 00:38:49,400
different way.

747
00:38:49,599 --> 00:38:51,599
Speaker 2: Oh, it's so good thing.

748
00:38:51,920 --> 00:38:55,159
Speaker 3: It depends if you don't like the server first approach. Right, Yeah,

749
00:38:55,199 --> 00:38:58,039
there's and there's another one. Ten stack Start is thinking

750
00:38:58,079 --> 00:39:01,519
of server components. So base things are happening right in

751
00:39:01,639 --> 00:39:04,440
different approaches, not just the server first approach.

752
00:39:04,559 --> 00:39:06,920
Speaker 1: Okay, so I guess this was on your wish list

753
00:39:06,960 --> 00:39:07,800
and now it's happening.

754
00:39:09,000 --> 00:39:12,039
Speaker 3: I wouldn't. I mean, I already worked with the app

755
00:39:12,119 --> 00:39:14,239
router for such a long time. I like it. Yeah,

756
00:39:14,280 --> 00:39:17,840
but I'm I would be happy that there's other ways

757
00:39:17,840 --> 00:39:18,639
to do it as well.

758
00:39:18,599 --> 00:39:19,519
Speaker 1: Other ways to do it.

759
00:39:19,840 --> 00:39:22,239
Speaker 2: So what we call this the router first approach versus

760
00:39:22,280 --> 00:39:23,800
the server verst approach.

761
00:39:24,199 --> 00:39:29,079
Speaker 3: It's more like a client first I guess. But you

762
00:39:29,119 --> 00:39:32,920
can return server components from loaders, right, which is kind

763
00:39:32,960 --> 00:39:33,920
of yeah.

764
00:39:33,960 --> 00:39:36,360
Speaker 1: So your turn server components and then run them in

765
00:39:36,360 --> 00:39:36,800
the client.

766
00:39:37,840 --> 00:39:43,719
Speaker 3: Your return it's well you return. It's like returning data,

767
00:39:43,840 --> 00:39:44,760
but you're actually.

768
00:39:44,480 --> 00:39:46,880
Speaker 1: Returning so it's returning the markup.

769
00:39:47,039 --> 00:39:48,599
Speaker 3: Yeah right, in a way, so.

770
00:39:48,519 --> 00:39:51,440
Speaker 2: The router invokes the server component to write it to.

771
00:39:51,400 --> 00:39:52,000
Speaker 3: You in a way.

772
00:39:52,079 --> 00:39:54,440
Speaker 1: Yeah, it doesn't have the code behind it, but just

773
00:39:54,519 --> 00:39:56,679
the markup that's the result of running the code.

774
00:39:56,840 --> 00:39:59,320
Speaker 2: Got it. You are sort of client first instance. You're

775
00:39:59,320 --> 00:40:02,679
loading a router then invokes different server components that send

776
00:40:02,719 --> 00:40:04,679
down the markup that rents the page.

777
00:40:04,920 --> 00:40:07,199
Speaker 1: So that's different so it's a middleman, and I guess

778
00:40:07,239 --> 00:40:11,199
that's why the you know, moving from eighteen to nineteen

779
00:40:11,320 --> 00:40:14,039
is going to be easier with that because you're you've

780
00:40:14,039 --> 00:40:17,960
already got client centric code calling into the server, so

781
00:40:18,719 --> 00:40:20,800
you know you're just changing in the middleman.

782
00:40:21,079 --> 00:40:22,840
Speaker 3: So yes, if you were to answer the question how

783
00:40:22,840 --> 00:40:26,519
do you opt into server components, probably the path would

784
00:40:26,559 --> 00:40:29,639
be go from your client side app to reactor out

785
00:40:29,639 --> 00:40:32,960
of you seven, enable the meta framework features, wait for

786
00:40:33,000 --> 00:40:37,159
server components, return server components. That's kind of the incremental

787
00:40:37,159 --> 00:40:39,480
way there. If you're not going to prod.

788
00:40:40,199 --> 00:40:43,800
Speaker 2: It strikes me the next JS server components approaches a

789
00:40:43,800 --> 00:40:45,400
greenfield approach. It's a rethink.

790
00:40:45,480 --> 00:40:47,960
Speaker 1: Yeah, greenfield. Yeah, that's what I was thinking.

791
00:40:50,480 --> 00:40:52,760
Speaker 2: Yeah, where this is much more brown field. Get some

792
00:40:52,800 --> 00:40:56,199
of those capabilities your existing stuff keeps working here, you

793
00:40:56,239 --> 00:40:58,320
know you're bridging. Yeah, that's fair.

794
00:40:58,400 --> 00:40:59,320
Speaker 3: That's why it's the big deal.

795
00:41:00,440 --> 00:41:00,800
Speaker 1: Very good.

796
00:41:00,880 --> 00:41:02,760
Speaker 2: Definitely make your life a heck of a lot easier.

797
00:41:03,039 --> 00:41:06,920
Speaker 1: Yeah, it has productivity gone up with V nineteen.

798
00:41:07,119 --> 00:41:10,039
Speaker 3: For you, uh, for me, yeah, because I know how

799
00:41:10,079 --> 00:41:13,440
to use this stuff. I think if you don't, if

800
00:41:13,480 --> 00:41:15,920
you didn't catch up to nineteen, it's hard to see

801
00:41:16,079 --> 00:41:19,559
why you would need the new hooks because some of

802
00:41:19,559 --> 00:41:21,679
them are useful for clients, but a lot of them

803
00:41:21,679 --> 00:41:25,159
are for like server they're documented in the next year

804
00:41:25,199 --> 00:41:28,639
stocks for example, in a certain way, there's not enough

805
00:41:28,679 --> 00:41:33,159
examples for the client something like that. So I'm definitely productive.

806
00:41:33,159 --> 00:41:36,880
I see the uses for all the new stuff. And

807
00:41:37,000 --> 00:41:40,239
also some of the new features like this use hook

808
00:41:40,599 --> 00:41:44,440
is for server components and cash api is for server companes.

809
00:41:44,440 --> 00:41:47,400
So there's things that I'm using a lot to improve

810
00:41:47,440 --> 00:41:49,639
my performance of that building.

811
00:41:51,199 --> 00:41:56,199
Speaker 1: Well, that's great. Yeah, is there anything we haven't covered

812
00:41:56,440 --> 00:41:57,480
that you want to talk about?

813
00:41:58,719 --> 00:42:02,719
Speaker 3: We have a look here, maybe like like an RC

814
00:42:03,000 --> 00:42:04,880
one year later. So this was kind of Yeah, I'm

815
00:42:04,920 --> 00:42:06,880
still using it. I'm still it still works for me,

816
00:42:06,960 --> 00:42:12,119
you know. But actually the State of React twenty twenty

817
00:42:12,159 --> 00:42:16,840
four survey says that sixty percent still didn't try it.

818
00:42:17,199 --> 00:42:20,280
Of the of the response still didn't try server components.

819
00:42:20,480 --> 00:42:22,719
Interesting and yeah, that's very interesting.

820
00:42:24,400 --> 00:42:27,559
Speaker 1: Yeah, client side programmers like their client side.

821
00:42:27,400 --> 00:42:29,840
Speaker 3: And it's hard to get into right because you cannot

822
00:42:29,920 --> 00:42:33,559
just opt in right. And also of the some of

823
00:42:33,599 --> 00:42:38,079
the people that did try it or twenty percent found

824
00:42:38,079 --> 00:42:40,960
it to be a pain point of the new APIs,

825
00:42:41,039 --> 00:42:44,400
So it's still not you know, doesn't still have a

826
00:42:44,519 --> 00:42:48,800
very positive what can you say, vibe around it?

827
00:42:50,320 --> 00:42:52,280
Speaker 2: Do you think it's the ACNC side of things? Like,

828
00:42:52,320 --> 00:42:54,039
it's just hard to think that way if you're not

829
00:42:54,159 --> 00:42:54,639
used to it.

830
00:42:54,719 --> 00:42:57,320
Speaker 3: I think it's a big mental shift. It's a learning curve,

831
00:42:57,480 --> 00:42:59,079
and it's you have to kind of do it on

832
00:42:59,119 --> 00:43:00,920
your free time if you don't use it at work.

833
00:43:01,039 --> 00:43:03,679
So it's a very big it's a big jump.

834
00:43:03,880 --> 00:43:06,039
Speaker 1: Yeah. I was going to say there's probably less incentive

835
00:43:06,119 --> 00:43:09,159
for somebody who's maintaining or working on a project at

836
00:43:09,199 --> 00:43:13,280
a company YEP that isn't planning to move to service

837
00:43:13,320 --> 00:43:15,320
side components because it's a big rewrite.

838
00:43:15,400 --> 00:43:18,519
Speaker 2: Well, no customer asks for this, right, Like, this is

839
00:43:18,519 --> 00:43:20,639
not a customer's like, oh I wish we had server components.

840
00:43:20,639 --> 00:43:21,960
They don't care, right exactly.

841
00:43:22,119 --> 00:43:25,960
Speaker 1: But a consultant, you know, who's got multiple clients and

842
00:43:26,119 --> 00:43:28,079
is waiting for the next client to come along and say,

843
00:43:28,079 --> 00:43:29,679
we need a website. What are we going to do?

844
00:43:30,400 --> 00:43:34,159
That's when you want to whip out the nineteen server components.

845
00:43:34,360 --> 00:43:37,760
Speaker 3: Yeah, because if you have like this new project, a

846
00:43:37,800 --> 00:43:40,239
lot of apps are just okay, let's pick next to

847
00:43:40,320 --> 00:43:42,840
us and someone. Companies even have that as their default

848
00:43:43,119 --> 00:43:48,400
app stack, right, So it's inevitable that at some point

849
00:43:48,480 --> 00:43:51,079
you're probably going to encounter it if if your work

850
00:43:51,199 --> 00:43:54,559
is using it, right, And there's lots of big apps

851
00:43:54,599 --> 00:43:57,239
like PayPal, New York Public Library, And we have this

852
00:43:57,360 --> 00:44:04,239
huge e commerce in our electronics sales, will you say

853
00:44:04,280 --> 00:44:07,559
company in the nordis called Elchap, which is like all

854
00:44:07,639 --> 00:44:10,800
on at prouder end of our sell and it's a

855
00:44:10,840 --> 00:44:11,760
big success.

856
00:44:11,400 --> 00:44:14,519
Speaker 2: Story, right, but it's also not something you moved anywhere

857
00:44:14,559 --> 00:44:19,239
easily much less why Like, what is the business case here?

858
00:44:19,679 --> 00:44:22,440
Is it? I want our faster website. I want it

859
00:44:22,480 --> 00:44:24,960
more maintainable, Like what's the thing that customer is going

860
00:44:25,000 --> 00:44:26,920
to want? They're like, I'm really grad we made that move.

861
00:44:27,239 --> 00:44:30,840
Speaker 3: So e commerce is I mean speed performance? That's always

862
00:44:30,880 --> 00:44:34,400
been our sales focus or next just focus. That's their

863
00:44:34,800 --> 00:44:36,519
that's what they're always optimizing for.

864
00:44:36,760 --> 00:44:39,599
Speaker 2: Yeah, so all that psychosis we've always had about time

865
00:44:39,639 --> 00:44:42,000
to first bite, like how quickly can you get the

866
00:44:42,000 --> 00:44:44,440
page in front of people so that they don't switch away?

867
00:44:45,360 --> 00:44:48,519
Everything stays snappy and async is better for that because

868
00:44:48,599 --> 00:44:50,559
you don't get hung up on the realities of the

869
00:44:50,599 --> 00:44:53,159
Internet where some packet gets lost and the whole page

870
00:44:53,199 --> 00:44:57,119
is stalled. Oh, I appreciate that. That's the customer requests,

871
00:44:57,159 --> 00:44:58,639
can we make it faster? And it's like, yeah, we

872
00:44:58,639 --> 00:44:59,880
can reengineer it this way.

873
00:45:00,039 --> 00:45:03,760
Speaker 3: Yeah, making it fast, definitely, that's that's easy.

874
00:45:03,800 --> 00:45:03,960
Speaker 4: Pick.

875
00:45:05,119 --> 00:45:06,800
Speaker 2: Yeah, it's just a question of whether it's true. Like

876
00:45:06,840 --> 00:45:09,599
the great thing about doing a refactor like this is

877
00:45:09,800 --> 00:45:11,360
you'll leave us alone for three months. It is going

878
00:45:11,400 --> 00:45:11,960
to take a while.

879
00:45:13,440 --> 00:45:16,800
Speaker 3: Yeah. I think it took like, I don't know many

880
00:45:16,880 --> 00:45:19,000
months for the l shapre rite and that was from

881
00:45:19,039 --> 00:45:24,599
Angular actually, so it was like the biggest hall. So

882
00:45:24,639 --> 00:45:26,840
they rewrote Angular angularly next.

883
00:45:26,960 --> 00:45:29,039
Speaker 2: Woo, there's a case study for you.

884
00:45:29,239 --> 00:45:31,760
Speaker 3: Yeah Angular next Yeah.

885
00:45:31,760 --> 00:45:34,760
Speaker 2: Yeah, oy boy, Yeah, that is a big jump.

886
00:45:34,800 --> 00:45:36,880
Speaker 1: Do the View developers throw stones at you?

887
00:45:37,679 --> 00:45:40,000
Speaker 3: They have their own thing. I think View developers seem

888
00:45:40,039 --> 00:45:42,199
pretty happy with you, that's my impression.

889
00:45:42,440 --> 00:45:44,320
Speaker 2: Yeah. I don't know.

890
00:45:44,400 --> 00:45:46,760
Speaker 1: We we like to stir up hat in discontent where

891
00:45:46,760 --> 00:45:47,519
it doesn't exist.

892
00:45:47,639 --> 00:45:51,679
Speaker 2: So yeah, hey, you know what everybody has pain.

893
00:45:52,400 --> 00:45:55,440
Speaker 3: I can tell you. The View developers were very unhappy

894
00:45:55,519 --> 00:45:59,719
when the React team deprecated create Recked app and did

895
00:45:59,800 --> 00:46:04,880
not mentioned it as the primary way to replace it,

896
00:46:05,000 --> 00:46:07,760
but the community changed that. So you had some new

897
00:46:07,880 --> 00:46:09,920
developers who were a part of that.

898
00:46:10,039 --> 00:46:11,960
Speaker 2: Did they have a different idea of where to go

899
00:46:12,079 --> 00:46:12,960
besides VAT?

900
00:46:13,480 --> 00:46:16,199
Speaker 3: I mean, for a long time, the framework, the docs

901
00:46:16,199 --> 00:46:19,039
have said next or frameworks. They've been encouraging frameworks and

902
00:46:19,079 --> 00:46:23,239
they still do. Yeah, that's just the thing. They encourage frameworks.

903
00:46:23,280 --> 00:46:26,440
They think that you should use a framework unless you,

904
00:46:26,480 --> 00:46:29,039
for some reason decide not to. But that shouldn't be

905
00:46:29,119 --> 00:46:30,920
the default. The default should be a framework. That's what

906
00:46:30,960 --> 00:46:31,920
the dogs lead you to.

907
00:46:32,239 --> 00:46:35,199
Speaker 2: Right So, and actually most people, like you know, actually

908
00:46:35,280 --> 00:46:37,679
VATS an easier way to go. It gets me up

909
00:46:37,719 --> 00:46:38,159
and running.

910
00:46:38,239 --> 00:46:40,599
Speaker 3: In a lot of cases, it could be and that's

911
00:46:40,639 --> 00:46:42,519
that's the reason for the community to push back.

912
00:46:42,599 --> 00:46:43,199
Speaker 2: That's interesting.

913
00:46:43,239 --> 00:46:46,639
Speaker 1: So react as a Facebook slash meta thing, is there

914
00:46:46,800 --> 00:46:51,800
any indication that they have moved everything over to nineteen

915
00:46:51,920 --> 00:46:55,239
or they're going to I mean, I can't imagine going

916
00:46:56,159 --> 00:47:00,079
from a previous model to that, as you know, as

917
00:47:00,119 --> 00:47:01,360
big as Facebook.

918
00:47:01,039 --> 00:47:05,840
Speaker 3: Is, I don't know about that exactly if they're using it,

919
00:47:06,119 --> 00:47:08,960
but I do know that they're using the compiler in

920
00:47:09,000 --> 00:47:12,119
their internal apps like Instagram, So that's I guess a bigger,

921
00:47:12,440 --> 00:47:15,360
better metric for what they're actually building that they're using

922
00:47:15,400 --> 00:47:16,360
for themselves.

923
00:47:16,960 --> 00:47:18,920
Speaker 2: Yeah, well that's always been the claim to fame. Right,

924
00:47:18,920 --> 00:47:21,119
this is how we build Facebook, so you can use

925
00:47:21,159 --> 00:47:22,320
it too, Right, if.

926
00:47:22,199 --> 00:47:26,559
Speaker 1: We can if Facebook doesn't crash, europp won't Right.

927
00:47:29,239 --> 00:47:31,280
Speaker 2: Was that great story where they locked themselves out of

928
00:47:31,320 --> 00:47:35,000
their own data center with some security there's assisted men's

929
00:47:35,000 --> 00:47:37,320
story about literally they had to take an angle grinder

930
00:47:37,360 --> 00:47:39,119
to a door to get into a data center because

931
00:47:39,159 --> 00:47:42,480
somebody had whoa had shut down a key account that

932
00:47:42,519 --> 00:47:46,280
didn't allow that took out the door controls. Oh my

933
00:47:46,639 --> 00:47:48,559
fun stories the hardware.

934
00:47:48,920 --> 00:47:51,679
Speaker 1: Well, I guess the door controls weren't that good if

935
00:47:51,719 --> 00:47:54,199
you could take a saws all to it and cut

936
00:47:54,239 --> 00:47:54,559
it out.

937
00:47:54,880 --> 00:47:56,519
Speaker 2: Apparently it took a whole day, so I think it

938
00:47:56,559 --> 00:47:59,320
was pretty good. Like everything will eventually fail if you

939
00:47:59,360 --> 00:48:01,280
try hard enough. But then I guess you're right. Yeah,

940
00:48:01,360 --> 00:48:04,280
fort there it's like we can't get into the data center,

941
00:48:04,320 --> 00:48:08,519
both digitally or physically. Okay, yeah, this looks like a

942
00:48:08,519 --> 00:48:11,119
big important version. Like you said, four years coming, that's

943
00:48:11,159 --> 00:48:13,000
a long time in our world.

944
00:48:13,159 --> 00:48:16,880
Speaker 3: Yep, there's stuff for everyone. If you didn't like check

945
00:48:16,920 --> 00:48:19,920
it out yet you should, especially the improvement section even

946
00:48:19,920 --> 00:48:21,639
if you're a client set up. There's like a lot

947
00:48:21,639 --> 00:48:25,800
of things there that you might need, like pre loading

948
00:48:27,280 --> 00:48:32,079
CSS or other resources. And there's like acing script support

949
00:48:32,280 --> 00:48:38,239
with priority hydration air improvements for those of us who

950
00:48:38,239 --> 00:48:42,719
have experienced that, so you can actually see what is happening. Nice,

951
00:48:42,960 --> 00:48:45,079
there's a lot air handling out. There's a lot of

952
00:48:45,119 --> 00:48:48,119
like improvements that actually matter for you even though you're

953
00:48:48,119 --> 00:48:49,599
not using service components.

954
00:48:49,719 --> 00:48:50,119
Speaker 2: That's good.

955
00:48:50,159 --> 00:48:52,559
Speaker 1: Well, I imagine our listeners will have more questions than

956
00:48:52,559 --> 00:48:56,559
we do since we're not daily React users. But but

957
00:48:56,960 --> 00:48:59,800
so this would be great, you know, for to leave

958
00:48:59,800 --> 00:49:03,199
a comment on the website and you know, if you

959
00:49:03,239 --> 00:49:04,599
have any questions.

960
00:49:05,960 --> 00:49:08,719
Speaker 2: For Aurora. Yeah, and where can folks find you.

961
00:49:08,679 --> 00:49:13,559
Speaker 3: A XUS food? I'm still there. I works for me

962
00:49:13,679 --> 00:49:15,960
to communicate with people there, and I have a blog

963
00:49:16,000 --> 00:49:19,119
if you want to like read stuff. But for communicating

964
00:49:19,119 --> 00:49:20,519
probably extort Twitter.

965
00:49:20,840 --> 00:49:22,440
Speaker 2: Awesome, very good.

966
00:49:22,480 --> 00:49:24,599
Speaker 1: Well, thanks, it's been great talking to you again.

967
00:49:24,760 --> 00:49:26,320
Speaker 3: Thank you, Thank you for having me back.

968
00:49:26,440 --> 00:49:28,519
Speaker 1: All right, and we'll talk to you next time on

969
00:49:28,639 --> 00:49:29,519
dot net Bros.

970
00:49:49,960 --> 00:49:52,639
Speaker 4: Dot net Rocks is brought to you by Franklin's Net

971
00:49:52,760 --> 00:49:56,679
and produced by Pop Studios, a full service audio, video

972
00:49:56,800 --> 00:50:00,880
and post production facility located physically in New in Connecticut,

973
00:50:01,119 --> 00:50:05,920
and of course in the cloud online at pwop dot com.

974
00:50:06,119 --> 00:50:08,280
Visit our website at d O T N E t

975
00:50:08,480 --> 00:50:12,519
R O c k S dot com for RSS feeds, downloads,

976
00:50:12,679 --> 00:50:16,360
mobile apps, comments, and access to the full archives going

977
00:50:16,400 --> 00:50:19,760
back to show number one, recorded in September two thousand

978
00:50:19,800 --> 00:50:22,440
and two. And make sure you check out our sponsors.

979
00:50:22,599 --> 00:50:25,639
They keep us in business. Now, go write some code.

980
00:50:25,960 --> 00:50:26,719
Speaker 1: See you next time.

981
00:50:27,639 --> 00:50:29,480
Speaker 2: You got J middle Vans

982
00:50:31,519 --> 00:50:31,559
Speaker 3: And