WEBVTT

1
00:00:04.240 --> 00:00:06.580
Welkom bij aflevering veertien van CodeKlets.

2
00:00:07.240 --> 00:00:11.980
Zoals jullie van ons wel gewend zijn dat we iedere keer wel een beetje iets een beetje

3
00:00:11.980 --> 00:00:12.520
anders doen.

4
00:00:12.760 --> 00:00:14.000
En dat is dit keer ook zo.

5
00:00:14.380 --> 00:00:19.260
En vandaag hebben we een gast co-host, compleet nieuw concept hebben we eigenlijk nog nooit

6
00:00:19.260 --> 00:00:19.540
gedaan.

7
00:00:19.860 --> 00:00:24.320
Dus een co-host die te gast is en waarom doen we dat?

8
00:00:25.500 --> 00:00:27.420
Hebben de rest van de host ruzie met mij?

9
00:00:27.420 --> 00:00:30.560
Dat is sowieso niet aan de orde.

10
00:00:30.740 --> 00:00:36.740
Maar we vinden het vooral belangrijk dat we de tweewekelijke publicatie vasthouden van

11
00:00:36.740 --> 00:00:37.300
de podcast.

12
00:00:37.620 --> 00:00:38.740
Dat is een tip van Randall.

13
00:00:39.220 --> 00:00:42.760
Randall is de host van de prijs winnende podcast met Nerds op tafel.

14
00:00:43.380 --> 00:00:45.160
En die heeft een motto, the show must go on.

15
00:00:45.400 --> 00:00:49.000
Dus kost wat kost moet je gewoon, zij doen iedere week, doen ze een opname, moet

16
00:00:49.000 --> 00:00:49.680
altijd doorgaan.

17
00:00:50.280 --> 00:00:55.940
Dus ze zorgen altijd wel dat er genoeg hosts zijn die de show door kunnen laten

18
00:00:55.940 --> 00:00:56.260
gaan.

19
00:00:56.720 --> 00:00:59.160
Nou, dat advies lijkt mij wel handig om dat op te volgen.

20
00:00:59.400 --> 00:01:05.240
Dus vandaar dat wij dat ik vandaag in ieder geval heb gevraagd aan mijn collega Joost

21
00:01:05.240 --> 00:01:12.640
Mijles om mede host te zijn is voor mij geen onbekende voor jullie misschien wel.

22
00:01:12.840 --> 00:01:16.100
Maar hij is mijn directe collega bij Aviva Solutions.

23
00:01:16.520 --> 00:01:17.540
Maar dat is niet de belangrijkste reden.

24
00:01:17.640 --> 00:01:21.220
De belangrijkste reden is dat hij zelf ook ervaring heeft met Next.js.

25
00:01:21.860 --> 00:01:25.440
Dat is vandaag voor de gast die we vandaag hebben, is dat eigenlijk komt dat we heel

26
00:01:25.440 --> 00:01:26.700
goed van pas.

27
00:01:26.960 --> 00:01:31.020
Dan kunnen we met jou ook wat hele goede inhoudelijke vragen stellen.

28
00:01:32.400 --> 00:01:36.700
Want ja, ik stel soms niet zo heel slimme vragen of ja, nou, dat is misschien wel

29
00:01:36.700 --> 00:01:36.920
goed.

30
00:01:37.240 --> 00:01:41.700
Want niet alle luisteraars die hebben ervaring met Next.js, dus dan ben ik de vertegenwoordiger

31
00:01:41.700 --> 00:01:42.540
van de luisteraars.

32
00:01:42.560 --> 00:01:45.240
Dus dat lijkt me een goede rolverdeling.

33
00:01:45.640 --> 00:01:46.760
Maar goed, welkom Joost.

34
00:01:47.460 --> 00:01:48.960
Ja, dank je wel Saber.

35
00:01:49.960 --> 00:01:55.320
Ja, niemand, tenminste, er zullen zeker wel links en rechts luisteraars zijn die

36
00:01:55.320 --> 00:01:55.880
jou kennen.

37
00:01:56.640 --> 00:01:58.780
Maar zou je zelf kunnen introduceren?

38
00:01:58.960 --> 00:02:02.200
Wat doe jij in het dagelijkse leven als developer?

39
00:02:03.300 --> 00:02:05.360
Ja, we zijn nu drie en een half jaar collega's, denk ik.

40
00:02:06.500 --> 00:02:12.040
In die afgelopen drie en een half jaar heb ik een heel stuk sitecore en commerce

41
00:02:12.040 --> 00:02:12.540
gedaan.

42
00:02:13.120 --> 00:02:16.600
Dat heb ik eigenlijk sinds ik bij Aviva ben gekomen en gespecialiseerd.

43
00:02:18.740 --> 00:02:23.780
Met sitecore, commerce, je kent onze accelerator die we gebouwd hebben met React, bovenop

44
00:02:23.780 --> 00:02:24.360
sitecommerce.

45
00:02:26.540 --> 00:02:32.340
Maar de laatste jaar ben ik steeds meer enthousiast geworden over Jamstack.

46
00:02:34.780 --> 00:02:38.440
En daar komt ook mijn interesse van Next.js vandaan.

47
00:02:40.440 --> 00:02:45.840
Als je dan nog iets verder naar het heden gaat, dan de laatste half jaar, dan worden

48
00:02:45.840 --> 00:02:50.220
we echt diep ingedoken met een nieuw initiatief binnen Aviva, een platform noemen we dat.

49
00:02:50.700 --> 00:02:55.140
En dat is eigenlijk de tegenhanger van DXP, wat sitecore is.

50
00:02:55.400 --> 00:03:01.620
Als je helemaal alles uit de box krijgt, is een platform de manier om een modeware DXP

51
00:03:01.620 --> 00:03:02.260
te hebben.

52
00:03:02.620 --> 00:03:10.340
Bij hem een SaaS-based aanpak, service naar wensen combineert, om daar je oplossingen

53
00:03:10.340 --> 00:03:14.540
uit te kiezen, om daar je platformen modeware samen te stellen.

54
00:03:15.300 --> 00:03:19.480
En in context daarvan zou je op zoek gaan naar wat past nou goed bij ons.

55
00:03:19.480 --> 00:03:24.580
Met het achterhoofd react-stuk kennis wat we hebben.

56
00:03:25.260 --> 00:03:31.240
En toen zijn we uitgekomen bij Next.js, nadat we verschillende dingen vergeleken hebben,

57
00:03:31.280 --> 00:03:32.460
bijvoorbeeld Gatsby.

58
00:03:32.660 --> 00:03:34.020
Daar komen we straks nog wel even op, denk ik.

59
00:03:36.880 --> 00:03:39.160
En dat is in heel kort wat ik doe.

60
00:03:39.580 --> 00:03:45.180
In de laatste tijd ben ik dan naast de Next.js bezig met bezigheden, ben ik met Create

61
00:03:45.180 --> 00:03:45.940
React heb bezig.

62
00:03:46.100 --> 00:03:47.900
Dat is nog een stukje sitecore werk wat ik doe.

63
00:03:49.920 --> 00:03:50.720
Oh, cool.

64
00:03:51.020 --> 00:03:55.380
Nou, dan die kennis komt denk ik al van pas voor vandaag, dus ik verwacht wel heel goede

65
00:03:55.380 --> 00:03:56.400
vragen van je.

66
00:03:59.920 --> 00:04:00.960
Ja, precies.

67
00:04:01.260 --> 00:04:07.300
Maar goed, we hebben vandaag ook een gewone gast die niet helemaal gewoon is, het is

68
00:04:07.300 --> 00:04:08.740
Tim Neutkens.

69
00:04:09.300 --> 00:04:11.260
Tim is de hoofdmaintener van Next.js.

70
00:04:11.840 --> 00:04:15.180
Hij heeft een passie voor het maken van schaalbare applicaties en het verbeteren

71
00:04:15.180 --> 00:04:17.160
van de ontwikkelaarservaring.

72
00:04:17.840 --> 00:04:22.840
Tim was al een bekend gezicht binnen de Versel community voordat hij bij Versel zelf

73
00:04:22.840 --> 00:04:23.940
ging werken.

74
00:04:24.100 --> 00:04:31.880
Verder draagt hij een steentje bij aan Next.js, Micro en MDX.

75
00:04:32.200 --> 00:04:36.160
Tim heeft een sterke achtergrond in e-commerce en CMS oplossingen.

76
00:04:36.540 --> 00:04:37.580
En welkom, Tim.

77
00:04:39.180 --> 00:04:39.700
Hoi.

78
00:04:41.160 --> 00:04:41.660
Dat was ze.

79
00:04:41.740 --> 00:04:44.920
Ik ben stiekem wel trots dat we je te pakken hebben gekregen.

80
00:04:44.920 --> 00:04:55.240
Want andere hosts weten ook dat ik hoop dat ik die jongen van Next.js te pakken

81
00:04:55.240 --> 00:04:57.460
krijg, want ik wil ook echt een keer in de show hebben.

82
00:04:58.260 --> 00:05:00.740
Twee redenen, want onze site is inmiddels met Next.js gemaakt.

83
00:05:01.180 --> 00:05:05.660
Dus ik dacht, dat lijkt wel een goede reden om jou uit te nodigen.

84
00:05:06.140 --> 00:05:07.060
Dus welkom.

85
00:05:07.580 --> 00:05:08.040
Ja, zeker.

86
00:05:08.240 --> 00:05:11.600
En ook Nederland, wat een keer anders is dan anders.

87
00:05:12.180 --> 00:05:16.160
Normaal spreek ik altijd in het Engels op podcasts en zo.

88
00:05:16.820 --> 00:05:17.140
Oh ja.

89
00:05:18.180 --> 00:05:18.420
Ja, ja.

90
00:05:19.260 --> 00:05:20.420
Dan is het normaal een dubbele eer.

91
00:05:20.920 --> 00:05:27.100
Dus ja, wel een internationaal werkveld heb je natuurlijk.

92
00:05:27.400 --> 00:05:29.940
Dus dat gaan we denk ik zo ook wel over hebben.

93
00:05:33.480 --> 00:05:37.540
Ja, de ijsbreker is misschien een groot woord, maar wat we heel vaak vragen aan

94
00:05:37.540 --> 00:05:41.080
onze gasten is van, hoe ben je nou echt begonnen met software ontwikkelingen?

95
00:05:41.080 --> 00:05:42.640
En van welke leeftijd?

96
00:05:42.740 --> 00:05:44.240
Want dat verschilt nog best wel bij mensen.

97
00:05:44.420 --> 00:05:51.660
De ene is echt, Wanderen was echt begonnen vanaf zijn zesde jaar en sommigen zijn

98
00:05:51.660 --> 00:05:56.620
echt, nou weet ik veel, 30's of 35's, dat zijn wat later rollen ze erin.

99
00:05:56.900 --> 00:05:59.260
Maar hoe ben jij begonnen met software ontwikkelingen?

100
00:06:00.660 --> 00:06:01.480
Ja, goede vraag.

101
00:06:02.300 --> 00:06:09.860
Ik ben begonnen met programmeren op mijn 14e, 15e zoiets.

102
00:06:10.020 --> 00:06:10.820
Misschien 16e.

103
00:06:10.820 --> 00:06:12.540
Ik kan het me niet helemaal meer herinneren.

104
00:06:13.680 --> 00:06:15.120
Ik zat in ieder geval op de middelbare school.

105
00:06:17.500 --> 00:06:25.560
En ik was gewoon in vrije tijd dingen aan het lezen over software engineering.

106
00:06:28.240 --> 00:06:32.140
En toen kwam ik uiteindelijk, deed een site teken die heette CodeAcademy.

107
00:06:32.880 --> 00:06:34.800
Daar kon je cursus op doen.

108
00:06:35.580 --> 00:06:39.620
Dat was in, ik denk het eerste of tweede jaar dat CodeAcademy bestond.

109
00:06:40.540 --> 00:06:46.580
Daarvoor waren er niet echt van die hele interactieve platforms waar je kon leren eigenlijk.

110
00:06:47.040 --> 00:06:52.920
Je had zeg maar geen CodeSandbox of Rapelit of wat dan ook zeg maar.

111
00:06:54.640 --> 00:06:57.980
Dus toen kwam CodeAcademy uit.

112
00:06:58.460 --> 00:07:03.960
En CodeAcademy was eigenlijk interactief leren van programmeertalen.

113
00:07:03.960 --> 00:07:14.200
Dus je kon er JavaScript leren of PHP of Python en Java enzovoort.

114
00:07:15.700 --> 00:07:18.960
En ik begon toen met JavaScript.

115
00:07:20.740 --> 00:07:23.140
Dat vond ik zelf heel erg lastig op dat moment.

116
00:07:23.760 --> 00:07:25.360
Het was toen 15 weken ofzo.

117
00:07:26.360 --> 00:07:31.230
En dat kwam ook omdat ik niet direct de resultaten kon zien van de code die je schreef.

118
00:07:31.730 --> 00:07:36.070
En toen kwamen ze met de nieuwe cursus PHP.

119
00:07:37.130 --> 00:07:39.050
Daar had ik al heel erg snel bij van oh wacht.

120
00:07:39.370 --> 00:07:45.130
Als ik hier iets in schrijf kan ik ook meteen in mijn browser zien wat het resultaat is.

121
00:07:46.150 --> 00:07:51.290
En dat hield heel erg met het visueel leren van dingen.

122
00:07:51.390 --> 00:07:54.230
Zeg maar als je iets veranderde dan hoef je alleen met refreshen.

123
00:07:54.230 --> 00:07:59.250
En dan zag je de aanpassing die je had gemaakt live of op een website.

124
00:07:59.810 --> 00:08:03.670
En dat was toen ook heel makkelijk om het live te zetten op een website enzovoort.

125
00:08:03.730 --> 00:08:08.450
Omdat je gewoon het FTP, gewoon een bestandje over sleet en het staat online zeg maar.

126
00:08:10.450 --> 00:08:12.310
Dus zo ben ik eigenlijk begonnen.

127
00:08:13.130 --> 00:08:17.250
En toen eigenlijk steeds verder erin gegaan.

128
00:08:19.050 --> 00:08:22.730
Dus steeds meer persoonlijke websites gaan maken enzovoort.

129
00:08:23.730 --> 00:08:25.750
Gewoon om het te proberen.

130
00:08:26.670 --> 00:08:29.230
Niet eerst met heel veel druk erachter van oké ik wil dit persoonlijk.

131
00:08:29.230 --> 00:08:31.790
Of wat dan ook. Ik vond het gewoon leuk om te doen.

132
00:08:33.230 --> 00:08:38.230
En toen uiteindelijk ook een paar websites voor het bedrijf van mijn ouders.

133
00:08:39.350 --> 00:08:41.410
Meegeholpen met maken enzovoort.

134
00:08:42.010 --> 00:08:43.930
Mijn ouders hebben een tuincentrum.

135
00:08:46.610 --> 00:08:48.530
En die gingen steeds meer online.

136
00:08:48.790 --> 00:08:51.670
Dus hadden niet eens een webshop op dat moment.

137
00:08:52.250 --> 00:08:54.930
Dat was in, ik kan me niet eens meer herinneren welk jaar.

138
00:08:55.050 --> 00:08:57.010
Maar echt heel lang geleden, tien jaar geleden ofzo.

139
00:09:00.250 --> 00:09:03.010
En ze hadden eigenlijk zeg maar.

140
00:09:04.570 --> 00:09:07.590
Een paar websites en die websites waren echt super lang geleden gemaakt.

141
00:09:08.190 --> 00:09:10.310
Dat is een grote table zeg maar.

142
00:09:11.410 --> 00:09:13.790
Table layout en alles stond daarin.

143
00:09:14.950 --> 00:09:18.010
En dat was gewoon plat HTML met een klein beetje PHP.

144
00:09:21.050 --> 00:09:23.990
En die gingen toen update enzovoort.

145
00:09:24.390 --> 00:09:26.070
Soms stonden de prijzen van producten.

146
00:09:26.070 --> 00:09:28.030
Ja, dan moest je die even aanpassen en dat soort dingen.

147
00:09:29.570 --> 00:09:31.530
Dus dat begon ik steeds meer te doen.

148
00:09:31.990 --> 00:09:33.290
Dat was wel grappig.

149
00:09:34.950 --> 00:09:38.390
En toen uiteindelijk zijn ze ook begonnen met het bouwen van een webshop.

150
00:09:38.950 --> 00:09:40.410
Met Gentoo op dat moment.

151
00:09:42.730 --> 00:09:45.330
Daar hebben ze een webshop op gezet.

152
00:09:46.410 --> 00:09:47.290
Timeplantenwinkel.nl.

153
00:09:47.650 --> 00:09:50.210
Als je ooit planten zoekt, keer daar terecht.

154
00:09:51.050 --> 00:09:51.770
Shout out.

155
00:09:54.410 --> 00:09:56.900
En die webshop was gebouwd met Gentoo.

156
00:09:58.330 --> 00:09:58.960
Super ingewikkeld.

157
00:10:00.010 --> 00:10:01.250
PHP framework.

158
00:10:02.110 --> 00:10:03.410
Zeker voor een zestienjarige.

159
00:10:06.290 --> 00:10:09.010
En dat ging allemaal wel goed op zich.

160
00:10:11.690 --> 00:10:12.000
Toen...

161
00:10:12.310 --> 00:10:14.000
Ik studeerde op dat moment.

162
00:10:14.690 --> 00:10:17.050
Want ik had mijn VMBO afgemaakt.

163
00:10:19.210 --> 00:10:21.630
En toen ging ik naar de MBO toe.

164
00:10:21.630 --> 00:10:23.370
MBO-ICT-beheer.

165
00:10:23.450 --> 00:10:25.490
ICT-beheer is helemaal geen programmeren.

166
00:10:25.610 --> 00:10:28.950
Dat is alleen maar netwerken aanleggen.

167
00:10:30.410 --> 00:10:31.930
Software installeren.

168
00:10:33.310 --> 00:10:35.910
Geautomiseerd uitrollen van complete netwerken.

169
00:10:36.070 --> 00:10:36.510
Dat soort dingen.

170
00:10:38.550 --> 00:10:40.490
Alles wat niet programmeren is.

171
00:10:42.230 --> 00:10:43.850
Maar gewoon DevOps-achtige dingen.

172
00:10:43.850 --> 00:10:45.830
Alleen dan interne netwerken.

173
00:10:48.450 --> 00:10:50.790
En terwijl ik op die opleiding zat.

174
00:10:51.410 --> 00:10:54.830
Toen werd ik ook heel erg motiveerd door mijn mentor.

175
00:10:57.850 --> 00:10:58.370
Die...

176
00:10:58.370 --> 00:11:01.950
Maar ook omdat ik had gezegd dat ik programmeren wel interessant vond.

177
00:11:02.450 --> 00:11:02.970
Enzovoort.

178
00:11:03.170 --> 00:11:05.830
Van hey, je kunt ook dit en dit proberen.

179
00:11:06.050 --> 00:11:06.570
Enzovoort.

180
00:11:06.750 --> 00:11:08.130
Dus die hield me daar heel erg mee.

181
00:11:08.370 --> 00:11:10.930
Met van oké, dit kun je nog meer leren.

182
00:11:11.850 --> 00:11:14.690
Binnen software engineering en software development.

183
00:11:15.430 --> 00:11:15.950
Enzovoort.

184
00:11:17.350 --> 00:11:17.850
Zelfs...

185
00:11:17.850 --> 00:11:21.310
Ook al was dat niet een onderdeel van de opleiding zelf.

186
00:11:21.470 --> 00:11:22.590
Ik kreeg er geen punten voor.

187
00:11:22.710 --> 00:11:24.950
Ik kreeg eigenlijk helemaal...

188
00:11:26.010 --> 00:11:29.350
Daar had ik helemaal geen nut aan eigenlijk voor die opleiding.

189
00:11:29.570 --> 00:11:30.830
Maar het was heel interessant.

190
00:11:31.590 --> 00:11:34.950
En ik had eigenlijk heel veel geluk dat die mentor toen...

191
00:11:35.950 --> 00:11:39.490
Dat ook gewoon, zeg maar, motiveerde eigenlijk.

192
00:11:41.810 --> 00:11:44.310
En daardoor begon ik steeds mijn websites te maken.

193
00:11:44.310 --> 00:11:47.670
We hadden ook een soort vak.

194
00:11:47.870 --> 00:11:48.970
Dat heette Service Desk.

195
00:11:49.190 --> 00:11:53.310
Waarin je eigenlijk het bestaande bedrijfsleven...

196
00:11:54.910 --> 00:11:59.430
Of zeg maar, goede doelen enzovoort.

197
00:12:00.250 --> 00:12:02.670
Die dus een website willen en alleen gewoon geen geld hebben...

198
00:12:02.670 --> 00:12:04.030
Om die websites te laten maken.

199
00:12:04.670 --> 00:12:05.830
Die kwamen dan bij de school aan.

200
00:12:05.870 --> 00:12:07.910
Bijvoorbeeld van, hey, we willen eigenlijk wel een website.

201
00:12:08.090 --> 00:12:11.510
En dan konden wij dat doen met WordPress enzovoort.

202
00:12:11.510 --> 00:12:15.270
Nou, studenten kunnen op zich heel simpel met WordPress doen.

203
00:12:16.430 --> 00:12:19.670
Dus dan leer je meer over hoe STP werkt en dat soort dingen.

204
00:12:19.830 --> 00:12:21.350
Dat had ik al een keertje gedaan.

205
00:12:22.490 --> 00:12:23.190
Dus daar...

206
00:12:23.190 --> 00:12:25.590
Dat hielp heel erg met ontwikkelen enzovoort.

207
00:12:26.830 --> 00:12:31.510
En dan in het tweede jaar van die MBO-opleiding, dat was twee jaar lang...

208
00:12:32.070 --> 00:12:38.530
Was het, zeg maar, vier periode stage lopen en één periode nog naar school.

209
00:12:38.530 --> 00:12:43.530
En die vier periode was gewoon en één stuk doorwerken bij een bedrijf.

210
00:12:44.050 --> 00:12:55.810
En toen had ik eigenlijk het geluk dat mijn vader heel toevallig bij een of andere event van de punk iemand anders tegenkwam.

211
00:12:55.930 --> 00:13:00.530
Die toevallig heel vlakbij woonde en een klant van het bedrijf was.

212
00:13:01.490 --> 00:13:02.610
Van de tuincentrum dus.

213
00:13:03.710 --> 00:13:05.010
Alleen heel toevallig.

214
00:13:06.470 --> 00:13:08.610
En die was aan het vertellen tegen mijn vader.

215
00:13:08.750 --> 00:13:17.570
Ja, ik heb een agency waar dus een aantal developers hebben zitten die elke dag bezig zijn met het bouwen van websites.

216
00:13:19.370 --> 00:13:25.530
En toen zei mijn vader dus van oh ja, dat vindt mijn zoon vast interessant enzovoort.

217
00:13:26.270 --> 00:13:28.270
En die is nog op zoek naar een stageplek.

218
00:13:29.710 --> 00:13:30.810
Is dat misschien iets?

219
00:13:30.810 --> 00:13:33.790
En ik zat natuurlijk op een ECT wereldopleiding.

220
00:13:33.970 --> 00:13:38.810
Dus dat is eigenlijk niet echt, dat matcht niet helemaal met een website die websites bouwt.

221
00:13:40.450 --> 00:13:52.690
Maar uiteindelijk na heel veel aandringen enzovoort had ik uiteindelijk toch een sollicitatiegesprek voor die stage zeg maar.

222
00:13:53.470 --> 00:13:56.190
Dus daarheen gegaan, verteld wat ik allemaal gedaan had.

223
00:13:56.930 --> 00:13:58.930
Die webshop gebouwd enzovoort.

224
00:13:58.930 --> 00:14:01.930
Heel veel met WordPress enzovoort.

225
00:14:03.490 --> 00:14:07.170
En ja, dus ik had wel de verwachting van ja, dat gaat gewoon niet lukken enzovoort.

226
00:14:08.070 --> 00:14:18.170
En toen een paar dagen later, toen belde de leidegevende van die club toen op van hey, we willen het wel proberen met je.

227
00:14:20.830 --> 00:14:25.010
En zeg maar, de eigenaar van die agency had ook nog een ECT-beheerbedrijf daarnaast.

228
00:14:27.470 --> 00:14:33.670
Dus die had uiteindelijk al zo'n bedacht van ja, als het niet lukt, dan kan je altijd nog daar gaan proberen zeg maar.

229
00:14:33.770 --> 00:14:35.110
Als ECT-beheerder.

230
00:14:36.350 --> 00:14:38.010
Maar uiteindelijk is dat niet gebeurd gelukkig.

231
00:14:39.930 --> 00:14:44.990
Dus ik was daar gewoon begonnen en ja, gewoon zes maanden lang stage gelopen.

232
00:14:46.310 --> 00:14:49.150
Superleuke tijd met iedereen daar.

233
00:14:50.330 --> 00:14:54.010
Gewoon superveel leren van al die mensen die gewoon in de praktijk werken.

234
00:14:54.750 --> 00:14:55.230
Ja.

235
00:14:55.610 --> 00:15:02.110
Waardoor dat je gewoon heel veel dingen leert die je daarvoor nog niet kende of wel vanweest alleen het niet gebruikt had enzovoort.

236
00:15:02.250 --> 00:15:05.990
Bijvoorbeeld ja, source control, git bijvoorbeeld.

237
00:15:07.910 --> 00:15:11.310
En een heleboel andere dingen, ticket systemen enzovoort.

238
00:15:13.070 --> 00:15:22.390
En toen ik denk een maand na dat ik gestart was daar, toen kwam die eigenaar van de agency naar mijn desk toe.

239
00:15:22.390 --> 00:15:26.270
En die zei van hey, heb je een momentje?

240
00:15:26.590 --> 00:15:30.370
En die nam me toen mee naar een conference room.

241
00:15:30.470 --> 00:15:40.310
En die zei van hey, heel veel mensen binnen het bedrijf die zeggen dat we je aan moeten nemen, want je doet het heel erg goed schijnbaar.

242
00:15:44.330 --> 00:15:48.990
Dus en ik dacht dat ik iets verkeerd had gedaan ofzo, want ik werd dus even apart genomen, zeg maar.

243
00:15:52.030 --> 00:15:59.490
En dus zei die ja, heel veel mensen die vinden dat ze je aan moeten nemen als je klaar bent met school enzovoort.

244
00:15:59.910 --> 00:16:02.930
Na die stage was ik klaar met school, zeg maar.

245
00:16:04.010 --> 00:16:05.130
Met MBO in ieder geval.

246
00:16:05.710 --> 00:16:12.530
En ik had eigenlijk het doel dus om dan door te gaan studeren en gewoon software engineering ofzo te gaan doen.

247
00:16:13.810 --> 00:16:16.090
Die opties had ik toen ook nog allemaal, zeg maar.

248
00:16:16.090 --> 00:16:20.730
Dus ik had eigenlijk de optie tussen, want dan zeg je ja, denk er maar over.

249
00:16:21.470 --> 00:16:26.830
Je kunt ook zeggen ik ga door studeren nog vier jaar en dan ben je op je twintigste klaar en that's it.

250
00:16:26.850 --> 00:16:28.070
Dat kan natuurlijk ook.

251
00:16:29.370 --> 00:16:31.950
En toen heb ik met mijn ouders overlegd enzovoort.

252
00:16:32.270 --> 00:16:44.030
En mijn ouders zijn ondernemers, dus die vinden het ook heel erg dat zeg maar je leert heel erg veel door te werken en gewoon daar heel erg op te focussen.

253
00:16:45.170 --> 00:16:49.530
Het is een heel erg goed overleg met ouders enzovoort.

254
00:16:49.790 --> 00:16:54.930
Want toen was ik nog zeventien overigens om het in een context te plaatsen.

255
00:16:56.510 --> 00:17:00.470
En toen zei ik eigenlijk van ja, oké, ik heb nu dus een keuze tussen.

256
00:17:00.550 --> 00:17:03.110
Ik ga werken en ik ga heel veel ervaring opdoen.

257
00:17:03.290 --> 00:17:12.070
Of ik ga nog vier jaar naar een software engineering of media design opleiding of wat dan ook.

258
00:17:12.070 --> 00:17:18.830
En dan krijg ik waarschijnlijk heel veel van de dingen die ik al heb geleerd door te werken.

259
00:17:19.890 --> 00:17:24.670
En dan ga je er eigenlijk alleen maar heen voor het papiertje oké je hebt hbo niveau zeg maar.

260
00:17:25.450 --> 00:17:33.150
Wat ook mogelijk te bepalen is door gewoon heel veel werkervaring te hebben en te laten zien van oké dit zijn alle projecten die ik heb gedaan.

261
00:17:34.490 --> 00:17:38.030
En deze mensen die die vinden dat ik dit niveau heb zeg maar.

262
00:17:39.490 --> 00:17:43.990
Dus uiteindelijk koos ik ervoor om dat aanbod aan te nemen.

263
00:17:44.390 --> 00:17:52.370
Dus dan ga ik daar gaan werken bij die agency voor ongeveer 2,5 jaar ofzo.

264
00:17:54.030 --> 00:17:58.270
En terwijl ik daar werkte, kom ik meer aan aanraken met open source.

265
00:17:59.810 --> 00:18:05.710
Dus ik had veel, niet eens veel contact met mensen in open source of wat dan ook.

266
00:18:05.710 --> 00:18:11.810
Ik had gewoon in mijn vrije tijd veel tijd over en ik vond programmeren heel erg leuk.

267
00:18:12.250 --> 00:18:17.370
Dus ik was naast mijn baan die al veertig uur per week programmeren was.

268
00:18:17.790 --> 00:18:21.130
In principe was ik ook nog aan het programmeren.

269
00:18:22.790 --> 00:18:32.910
En toen kwam ik dus uiteindelijk uit bij een project dat binnen de Magento community relatief populair was voor front-end tooling.

270
00:18:33.550 --> 00:18:45.890
Dat was een soort package over gulp en nog wat andere tooling heen om eigenlijk het makkelijker te maken om front-ends te bouwen met Magento.

271
00:18:46.890 --> 00:18:52.130
Dus daar ben ik toen mee kunnen helpen. Heel veel PR's gedaan enzovoort.

272
00:18:52.410 --> 00:18:55.830
Omdat we dat ook gebruikten bij de agency waar ik werkte.

273
00:18:56.830 --> 00:19:04.670
En toen daarna kwam ik op Hacker News, dus nieuwspunt Y Combinator.

274
00:19:04.990 --> 00:19:10.270
Daar kwam ik een project tegen dat heette Hyper.

275
00:19:10.730 --> 00:19:16.030
Hyper is een terminal die gebouwd is op werktechniek.

276
00:19:18.030 --> 00:19:20.390
Die is gebouwd door Vercel.

277
00:19:21.930 --> 00:19:25.450
Dus dat was eigenlijk de eerste aanreking die ik had met Vercel.

278
00:19:25.450 --> 00:19:29.610
Ik had toen nog site, dat mocht je dat kennen.

279
00:19:32.650 --> 00:19:35.310
En toen kwam ik in aanraking met T-Community.

280
00:19:35.790 --> 00:19:37.330
Dus ik kwam in een Slack.

281
00:19:37.430 --> 00:19:42.570
Ik was een van de eerste 100 mensen die in die Slack zat van Vercel.

282
00:19:44.910 --> 00:19:49.710
En dat was op het moment dat ze echt nog maar met z'n vier of vijven waren binnen Vercel.

283
00:19:52.530 --> 00:19:54.710
Dus toen begon ik eigenlijk...

284
00:19:55.330 --> 00:19:56.770
Ik vond het wel een interessant project.

285
00:19:57.350 --> 00:20:00.110
Er was dus een terminal gebouwd met webtechnieken.

286
00:20:00.150 --> 00:20:01.470
Dus met Electron.

287
00:20:03.170 --> 00:20:04.770
Alle regels waren HTML enzovoort.

288
00:20:06.170 --> 00:20:07.510
Styling was gewoon CSS.

289
00:20:09.110 --> 00:20:10.770
En het gebruikte React.

290
00:20:12.190 --> 00:20:14.530
Wat ik op dat moment nog niet echt gebruikt had.

291
00:20:16.090 --> 00:20:17.910
En Redux voor de state management.

292
00:20:17.910 --> 00:20:23.350
Dus elke karakter dat je typte was een Redux action die getriggerd werd.

293
00:20:24.150 --> 00:20:32.270
En als je dan op Enter drukte, dan werd er een hoop states doorgepast naar een terminal emulator.

294
00:20:34.510 --> 00:20:36.090
En dat was allemaal interessant.

295
00:20:38.250 --> 00:20:44.110
Die approach die we hadden op dat moment, dat was niet de beste approach voor een terminal.

296
00:20:45.130 --> 00:20:52.170
Dus later is dat allemaal gefixt door een andere soort library te gebruiken.

297
00:20:52.350 --> 00:20:54.690
Die eigenlijk alles in canvas doet.

298
00:20:55.470 --> 00:20:58.290
Dus als je typen dan is het gewoon een canvas waar dingen op gerendeld worden.

299
00:20:58.750 --> 00:21:00.990
Dat veel meer performant is.

300
00:21:02.910 --> 00:21:06.290
Dat hele stukje techniek zit ook in VS Code bijvoorbeeld.

301
00:21:06.830 --> 00:21:07.910
VS Code is een terminal.

302
00:21:08.970 --> 00:21:10.530
En VS Code is ook een Electron app.

303
00:21:12.790 --> 00:21:14.370
Dus dat was wel interessant.

304
00:21:14.710 --> 00:21:16.750
Dus daar had ik heel veel aan gecontribuut.

305
00:21:18.430 --> 00:21:19.410
Ik zat in die Slack.

306
00:21:19.970 --> 00:21:21.670
Ik praatte heel veel met verschillende mensen.

307
00:21:21.810 --> 00:21:24.550
Heel de community die ze op dat moment hadden.

308
00:21:25.770 --> 00:21:28.690
En dat was gewoon heel interessant voor mij.

309
00:21:28.730 --> 00:21:30.210
Omdat ik heel veel aan het leren was van die mensen.

310
00:21:32.630 --> 00:21:34.770
Dus dat was wel gaaf.

311
00:21:34.770 --> 00:21:39.890
En toen uiteindelijk kreeg ik wat contact met de CEO van Versel.

312
00:21:40.230 --> 00:21:41.090
Kishen Marouche.

313
00:21:44.690 --> 00:21:47.630
Op dat moment ken ik hem nog niet helemaal goed.

314
00:21:48.630 --> 00:21:49.570
Dus toen zorgde ik hem een keer op.

315
00:21:49.590 --> 00:21:52.550
Toen bleek dat hij sokken-taillouden had gemaakt.

316
00:21:54.350 --> 00:21:55.390
Monkoes enzovoort.

317
00:21:57.410 --> 00:21:58.850
Monkoes is toch die ORM voor...

318
00:21:59.350 --> 00:22:00.150
Ja, voor MongoDB.

319
00:22:02.730 --> 00:22:03.850
En dat soort dingen.

320
00:22:03.850 --> 00:22:08.430
Dus hele grote open source projecten enzovoort.

321
00:22:09.390 --> 00:22:12.210
Was een van de early adopters van Node, zeg maar.

322
00:22:12.370 --> 00:22:15.950
Dus heel veel van de packages in de ecosystem waren gebouwd.

323
00:22:15.950 --> 00:22:18.690
Vanuit het bedrijf dat hij geco-founded had.

324
00:22:19.730 --> 00:22:20.370
LearnBoost.

325
00:22:22.010 --> 00:22:25.850
En toen leerde ik hem een beetje beter kennen enzovoort.

326
00:22:26.670 --> 00:22:29.670
En toen zei hij eigenlijk van...

327
00:22:29.670 --> 00:22:33.070
Oké, ik heb gezien dat je heel veel contribueert aan Hyper.

328
00:22:34.290 --> 00:22:36.870
We zijn bezig met een nieuw project, Next.js.

329
00:22:39.190 --> 00:22:43.130
En we zouden er best wel wat hulp bij kunnen gebruiken in open source, zeg maar.

330
00:22:45.290 --> 00:22:46.770
Dus ik zei oké, kijk wel een keer naar.

331
00:22:47.170 --> 00:22:50.970
En toen bleek dat dat heel erg zoals PHP was.

332
00:22:52.510 --> 00:22:55.190
Dus je maakt eigenlijk een pages directory.

333
00:22:56.370 --> 00:23:01.250
En in die pages directory kun je dus JavaScript files gooien.

334
00:23:01.630 --> 00:23:03.710
En dat is eigenlijk net zoals met PHP.

335
00:23:04.150 --> 00:23:08.350
Waar je eigenlijk dus een index punt PHP maakt.

336
00:23:08.570 --> 00:23:11.850
En dan begin je het code te schrijven in PHP.

337
00:23:12.010 --> 00:23:17.110
En dan zie je meteen wat er eigenlijk gebeurt op het scherm enzovoort.

338
00:23:18.210 --> 00:23:19.370
Dat was met Next ook zo.

339
00:23:19.430 --> 00:23:23.190
Maar dan voor Node.js en React.

340
00:23:23.190 --> 00:23:26.070
Dus je maakt een index.js.

341
00:23:26.950 --> 00:23:29.210
Daar exploiteer je een React component.

342
00:23:29.610 --> 00:23:33.510
En dat React component is meteen gerenderd op je scherm.

343
00:23:35.790 --> 00:23:37.990
Maar zelfs op dat moment al.

344
00:23:38.150 --> 00:23:41.190
Dus zeg maar, voordat ze Next 1.0 had uitgebracht.

345
00:23:44.010 --> 00:23:46.990
Was het al met HotModule Replacement.

346
00:23:48.090 --> 00:23:50.190
Dus in plaats van dat je moet refreshen.

347
00:23:51.030 --> 00:23:52.950
Kon je dus een aanpassing maken.

348
00:23:53.250 --> 00:23:55.130
Opslaan en dan zag je meteen op je scherm.

349
00:23:55.190 --> 00:23:56.690
Zonder dat je moet refreshen.

350
00:23:57.170 --> 00:23:58.490
Of hoeft te refreshen.

351
00:24:00.430 --> 00:24:01.830
Dus dat was wel interessant.

352
00:24:02.670 --> 00:24:05.210
Dus dat was wel best wel een goede developer experience.

353
00:24:07.010 --> 00:24:09.830
Alles stond wel nog in de kinderschoenen op dat moment.

354
00:24:10.070 --> 00:24:11.070
Zeg maar, als je nu terugkijkt.

355
00:24:11.190 --> 00:24:13.690
Dat is wel vier jaar geleden voor context.

356
00:24:15.050 --> 00:24:19.690
Maar er was dus wel veel potentie.

357
00:24:20.390 --> 00:24:21.690
In ieder geval dat is wat ik erin zag.

358
00:24:21.850 --> 00:24:23.690
Dus heel veel potentie voor oké.

359
00:24:24.470 --> 00:24:25.750
Als je met React werkt.

360
00:24:26.670 --> 00:24:29.870
Dan is dit wel echt een goede oplossing voor het.

361
00:24:29.910 --> 00:24:32.210
Zeg maar niet hoeven nadenken over oké.

362
00:24:32.350 --> 00:24:34.650
Welke routing oplossing ga ik gebruiken.

363
00:24:34.890 --> 00:24:37.630
Of welke compiler ga ik gebruiken.

364
00:24:38.110 --> 00:24:39.690
Hoe moet ik Webpack installeren.

365
00:24:41.150 --> 00:24:42.510
En opzetten enzovoort.

366
00:24:42.510 --> 00:24:45.150
Dat is wat toen nog echt iedereen was handmatig aan het doen.

367
00:24:45.330 --> 00:24:48.390
Dus iedereen zette handmatig zijn Webpackconfig op.

368
00:24:50.910 --> 00:24:54.890
En dan moesten ze daarna nog Babel configureren.

369
00:24:56.190 --> 00:24:59.230
Je moest uitzien te vogelen welke transforms nodig waren.

370
00:24:59.370 --> 00:25:02.110
Om een React Compiler goed te compileren.

371
00:25:02.530 --> 00:25:04.110
En als je dat dan uitgevogeld had.

372
00:25:04.950 --> 00:25:09.190
Dan bleek negen van de tien keer dat je toch niet alle transforms goed had staan.

373
00:25:09.190 --> 00:25:14.230
Waardoor je in productie niet gecompileerde code kreeg.

374
00:25:15.070 --> 00:25:17.690
Dus dat die niet geminefied was enzovoort.

375
00:25:18.890 --> 00:25:21.870
Dus ik zag dat Next daar heel erg mee hielp.

376
00:25:22.210 --> 00:25:23.370
Door eigenlijk alles te standardiseren.

377
00:25:23.930 --> 00:25:25.510
Dus alles dat er al in.

378
00:25:26.430 --> 00:25:28.810
Als je gewoon een app wilt gaan bouwen.

379
00:25:30.290 --> 00:25:31.630
Wat is het voor.

380
00:25:32.550 --> 00:25:36.670
Want dat had ik bijvoorbeeld in die tijd bij die agency gezien.

381
00:25:36.670 --> 00:25:38.830
Als er geen standaard is.

382
00:25:39.490 --> 00:25:43.270
Over dit is de manier waarop iedereen het gaat doen binnen het bedrijf.

383
00:25:44.850 --> 00:25:48.830
Dan heb je dus elk project een andere soort config.

384
00:25:50.170 --> 00:25:53.570
En over de lange termijn geeft dat heel grote problemen.

385
00:25:53.810 --> 00:25:58.050
Omdat ze dan elke keer of net gaat er iemand weg.

386
00:25:58.170 --> 00:26:00.370
Dus iemand die gaat bij een ander bedrijf werken.

387
00:26:00.390 --> 00:26:03.610
En die heeft dan net alles gemaakt binnen het bedrijf.

388
00:26:03.610 --> 00:26:07.730
Of ze zijn vergeten hoe dat de config werkt.

389
00:26:07.790 --> 00:26:09.750
Omdat er bijna geen documentatie is.

390
00:26:11.130 --> 00:26:11.730
En dat soort dingen.

391
00:26:12.030 --> 00:26:12.870
Dat is puur, dat is niets.

392
00:26:13.650 --> 00:26:19.010
Omdat, zeg maar, dat is niet dat het zo is alleen bij die agency.

393
00:26:19.510 --> 00:26:21.610
Dat is bij elk bedrijf dat ik tegenkwam.

394
00:26:22.670 --> 00:26:26.030
Op conferences, bij meetups enzovoort.

395
00:26:26.110 --> 00:26:27.570
Die vertelden allemaal hetzelfde verhaal.

396
00:26:27.730 --> 00:26:29.770
Oké, ja, we zijn niet blij met onze config.

397
00:26:30.630 --> 00:26:34.630
We gaan migreren naar deze applicatie en deze compiler.

398
00:26:34.810 --> 00:26:36.910
En dan gaat het misschien wel opgelost zijn of wat dan ook.

399
00:26:37.410 --> 00:26:40.430
Alleen, het kan er eigenlijk altijd op neer dat ze gewoon, zeg maar,

400
00:26:40.470 --> 00:26:43.410
te weinig tijd hadden om dit allemaal uit te bouwen, zeg maar.

401
00:26:44.510 --> 00:26:49.090
Zeker bij agencies waar je, zeg maar, projecten aan het bouwen bent.

402
00:26:50.690 --> 00:26:53.830
Voor, zeg maar, de eindgebruikers of de eindklanten.

403
00:26:55.370 --> 00:27:01.210
Die veelal, zeg maar, onderschatten hoeveel werk dat dan is, zeg maar.

404
00:27:01.310 --> 00:27:06.030
En dat documenteren dan eigenlijk zeggen van oké, jullie bouwen die applicatie.

405
00:27:06.410 --> 00:27:11.030
Jullie moeten ervoor zorgen dat die schaalbaar blijft enzovoort.

406
00:27:11.190 --> 00:27:13.990
En dat stukje documenteren is voor jullie rekening, zeg maar.

407
00:27:14.210 --> 00:27:19.030
Ja, precies. Maar dit was ook een beetje, even kijken.

408
00:27:20.270 --> 00:27:23.770
Ik was niet per se helemaal in het begin met React betrokken,

409
00:27:23.830 --> 00:27:26.730
maar toen ik daar een beetje bij inrolde, dat was ook vanuit Aviva,

410
00:27:26.730 --> 00:27:28.610
vanwege ons commerce platform.

411
00:27:31.330 --> 00:27:33.770
Ik deed toen daarvoor Angular.

412
00:27:34.010 --> 00:27:36.270
Ja goed, ik ben geen Angular fan, dat weten mensen wel.

413
00:27:37.030 --> 00:27:39.070
Toen ben ik React gedaan. Het was de eerste als je van,

414
00:27:39.230 --> 00:27:42.550
hey, wat is React nou? Doe die zo raar, een beetje gekke JSX.

415
00:27:43.190 --> 00:27:45.290
Het kwartje viel niet meteen. Toen het eenmaal viel,

416
00:27:45.390 --> 00:27:46.750
toen ik er een beetje mee ging spelen,

417
00:27:46.750 --> 00:27:51.670
toen je merkte, toen was het nog dat je starter kits had, zeg maar.

418
00:27:51.890 --> 00:27:53.830
Dus dat je echt gewoon iemand had dan nagedacht

419
00:27:53.830 --> 00:27:58.090
over een bundel van configs voor, wat was het toen,

420
00:27:58.510 --> 00:27:59.970
gulp, krunt soms ook nog.

421
00:28:01.330 --> 00:28:04.970
En als je geluk had ook een goede config voor webpack.

422
00:28:05.670 --> 00:28:09.870
En dan kon je dan een GitHub klonen, daar kwam het blijkop neer.

423
00:28:09.990 --> 00:28:11.370
En dan kon je mee starten.

424
00:28:11.850 --> 00:28:12.550
En dat was ook in die tijd,

425
00:28:12.550 --> 00:28:14.890
Joe Man was ook volgens mij al een beetje,

426
00:28:15.910 --> 00:28:17.990
dat moest het er ook zijn geweest.

427
00:28:18.210 --> 00:28:19.470
Dus dat was eigenlijk de beginfase.

428
00:28:19.910 --> 00:28:20.870
Ja, precies.

429
00:28:21.350 --> 00:28:22.750
Dat is vier jaar geleden of zo, denk ik toch, Saber?

430
00:28:23.450 --> 00:28:24.170
Ja, zoiets.

431
00:28:24.190 --> 00:28:25.490
Ja, net als vier jaar geleden.

432
00:28:25.950 --> 00:28:26.470
Ja, klopt.

433
00:28:27.250 --> 00:28:28.590
Ja, maar het is echt bizar,

434
00:28:28.670 --> 00:28:31.430
want eigenlijk is vier jaar geleden niet eens zo heel lang geleden.

435
00:28:32.570 --> 00:28:35.030
Ja, dat lijkt echt heel lang geleden.

436
00:28:35.190 --> 00:28:36.290
Er is echt veel gebeurd.

437
00:28:37.050 --> 00:28:38.950
Maar toen hoorde, ik denk dat ik,

438
00:28:38.970 --> 00:28:40.130
en dat durf ik echt niet te zeggen,

439
00:28:40.130 --> 00:28:42.430
dat ik Next.js zo half heb gezien liggen,

440
00:28:42.550 --> 00:28:45.070
zo van oké, één van de vijf, zes opties,

441
00:28:45.190 --> 00:28:46.550
dat ik dacht van oké, wat is nou de goede?

442
00:28:46.990 --> 00:28:48.690
Ja, ik weet, ik kan hier niet uit kiezen.

443
00:28:49.230 --> 00:28:52.070
Ja, ik had er wel echt tijd voor om daar echt helemaal in te duiken.

444
00:28:52.490 --> 00:28:54.390
Ik ben in principe niet de front-end developer,

445
00:28:54.590 --> 00:28:55.510
maar gewoon full-stack.

446
00:28:55.610 --> 00:28:57.730
En dan is het, het moet meteen werken, als het ware.

447
00:28:59.970 --> 00:29:02.230
Ja, dat hielp dan, zou dan helpen.

448
00:29:02.410 --> 00:29:05.170
Dus op dat moment was het, er was best veel reurings.

449
00:29:05.350 --> 00:29:05.750
Laat ik het zo zeggen.

450
00:29:05.870 --> 00:29:07.570
We hadden volgens mij Next.js, Gatsby,

451
00:29:07.570 --> 00:29:10.350
en zo nog tien Starter Kids en Create ReactApp.

452
00:29:10.490 --> 00:29:12.090
Was het toen al wel of niet? Dat weet ik niet eens.

453
00:29:12.670 --> 00:29:16.190
Ja, in 2016 was een interessante tijd.

454
00:29:17.210 --> 00:29:22.570
Er waren eigenlijk, zeg maar, Create ReactApp was toen net aangekondigd ofzo,

455
00:29:24.030 --> 00:29:25.850
voor als ik me kan herinneren.

456
00:29:26.450 --> 00:29:30.550
Webpack was Webpack 1, Webpack 1.0, dus nu Webpack 5.

457
00:29:32.170 --> 00:29:37.370
De bebel was bebel 6 of 5 zelfs nog.

458
00:29:40.270 --> 00:29:45.470
En er waren gewoon heel veel losse boilerplates, zoals je zei.

459
00:29:46.730 --> 00:29:50.530
Heel veel mensen die het zelf instelden omdat ze die boilerplates niet konden vinden.

460
00:29:50.930 --> 00:29:53.350
Ik was daar onder andere schuldig aan.

461
00:29:56.010 --> 00:30:01.070
Er waren gewoon heel weinig, er waren heel veel keuze.

462
00:30:01.390 --> 00:30:04.470
Alleen het was heel lastig om die keuzes te maken.

463
00:30:05.390 --> 00:30:10.310
Gatsby op dat moment was nog niet zoals je het vandaag kent.

464
00:30:10.730 --> 00:30:12.850
Next was nog niet zoals je het vandaag kent.

465
00:30:13.610 --> 00:30:18.730
Wat wel handig is bij Next is dat heel veel van de core primitives,

466
00:30:18.850 --> 00:30:22.770
dus de dingen die we vanaf het begin in het framework hebben gezet,

467
00:30:22.770 --> 00:30:24.550
zijn nog steeds hetzelfde.

468
00:30:25.790 --> 00:30:28.030
Dus vrijwel alle top-level APIs,

469
00:30:29.150 --> 00:30:34.510
dus de pages map, de link API, de router,

470
00:30:35.630 --> 00:30:40.290
alles is nog ongeveer hetzelfde als het was in Next 1.

471
00:30:41.170 --> 00:30:48.010
En het meeste wat we hebben gedaan is eigenlijk de onderliggende implementaties verbeterd

472
00:30:48.010 --> 00:30:50.030
en nieuwe features erbij gezet.

473
00:30:50.030 --> 00:30:55.990
Dus heel veel dingen om schaalderheid van je applicatie te vergroten,

474
00:30:57.150 --> 00:30:59.430
om je code te optimaliseren.

475
00:31:00.010 --> 00:31:03.030
Dus te zorgen dat de code die je schrijft

476
00:31:04.350 --> 00:31:09.030
minder, zeg maar, bundlesize oplevert dan, zeg maar, vier jaar geleden.

477
00:31:09.810 --> 00:31:14.170
En tijdens dat alles proberen om zoveel mogelijk backwards compatibility te hebben.

478
00:31:14.910 --> 00:31:18.230
Dus, zeg maar, apps die in Next 1 zijn geschreven,

479
00:31:18.230 --> 00:31:22.690
die zijn grotendeels compatible met Next 10.

480
00:31:23.050 --> 00:31:26.230
Next 10 is wat we vorige maand hebben gereleased.

481
00:31:26.390 --> 00:31:27.210
Ja, precies.

482
00:31:27.330 --> 00:31:28.330
Daar komen we zo op.

483
00:31:30.250 --> 00:31:31.750
Niet dat ik je helemaal wil afremmen,

484
00:31:31.930 --> 00:31:37.230
maar voordat we dan naar Next.js gaan, had ik nog wel...

485
00:31:39.150 --> 00:31:42.170
Vind je dat je vooral in front-end of back-end of ben je full-stack?

486
00:31:42.190 --> 00:31:43.770
Ja, dat is natuurlijk een beetje een populaire term,

487
00:31:44.150 --> 00:31:46.630
maar waar opereer je en wat vind je zelf?

488
00:31:47.250 --> 00:31:49.770
Want volgens mij, voor mij, als je nu aan iemand vraagt,

489
00:31:50.190 --> 00:31:51.510
ja, dat kom ik toch op, Next.js,

490
00:31:51.930 --> 00:31:54.090
maar hoe positioneer je Next.js?

491
00:31:54.190 --> 00:31:55.610
Dat is niet alleen maar front-end.

492
00:31:55.810 --> 00:31:57.690
Dat is ook eigenlijk het back-end-deel.

493
00:31:58.910 --> 00:32:01.010
Maar waar word je heel enthousiast van?

494
00:32:01.070 --> 00:32:03.450
Juist van de front-end of van de back-end?

495
00:32:04.390 --> 00:32:08.970
Ja, het is voor mezelf, zeg maar,

496
00:32:09.110 --> 00:32:11.130
ik kan mezelf niet goed classificeren

497
00:32:11.130 --> 00:32:14.230
en dat zou dan full-stack-ish moeten zijn of zo.

498
00:32:14.230 --> 00:32:14.470
Ja, precies.

499
00:32:15.190 --> 00:32:18.870
Want ik trouwens, ja, er is er veel over te zeggen.

500
00:32:19.690 --> 00:32:21.210
Ja precies, dat weet ik, ja.

501
00:32:21.630 --> 00:32:25.330
Zeg maar, het hele full-stack gebeuren is,

502
00:32:25.330 --> 00:32:27.770
zeg maar, als je Next gebruikt,

503
00:32:27.930 --> 00:32:30.170
dus als je applicaties aan het bouwen bent met Next,

504
00:32:30.930 --> 00:32:32.170
dan heb je een beetje,

505
00:32:33.050 --> 00:32:34.550
het enige wat je moet weten is eigenlijk

506
00:32:34.550 --> 00:32:37.410
hoe je React-components schrijft,

507
00:32:37.970 --> 00:32:39.910
hoe dat JavaScript werkt,

508
00:32:40.210 --> 00:32:41.790
en een beetje Node.js.

509
00:32:41.790 --> 00:32:44.010
Maar dat stukje is niet eens per se

510
00:32:44.430 --> 00:32:46.990
nodig om het te kunnen gebruiken,

511
00:32:47.430 --> 00:32:49.770
behalve dat je moet weten hoe package managers werken

512
00:32:49.770 --> 00:32:53.050
en hoe dat je de terminal gebruikt,

513
00:32:53.190 --> 00:32:54.790
omdat je het commando uit moet voeren enzovoort.

514
00:32:55.690 --> 00:32:55.990
Ja precies,

515
00:32:56.750 --> 00:32:57.810
maar dat is eigenlijk een beetje common,

516
00:32:58.590 --> 00:33:00.290
dat moet je altijd kunnen eigenlijk.

517
00:33:01.250 --> 00:33:02.050
Ja, het is sowieso,

518
00:33:02.190 --> 00:33:05.030
als je developer bent tegenwoordig,

519
00:33:05.230 --> 00:33:08.150
dan is command-line-knowledge gewoon nodig

520
00:33:08.150 --> 00:33:09.570
op een bepaald moment,

521
00:33:10.170 --> 00:33:11.730
omdat ze bijna geen

522
00:33:11.730 --> 00:33:13.850
graphical user interfaces hebben voor

523
00:33:13.850 --> 00:33:15.670
het overgrote deel van alles wat je doet

524
00:33:15.670 --> 00:33:18.570
in de JavaScript community op z'n minst.

525
00:33:20.590 --> 00:33:21.750
En wat je dus hebt is als je

526
00:33:21.750 --> 00:33:23.490
een next app aan het bouwen bent,

527
00:33:24.010 --> 00:33:25.570
ben je voor het grootste deel

528
00:33:25.570 --> 00:33:27.230
front-end code aan het schrijven.

529
00:33:27.930 --> 00:33:29.450
Je kunt ook API's toevoegen,

530
00:33:29.730 --> 00:33:30.330
API routes,

531
00:33:32.410 --> 00:33:33.950
en daarmee kun je

532
00:33:33.950 --> 00:33:35.750
in veel gevallen heel veel van je

533
00:33:36.270 --> 00:33:37.390
logica kwijt.

534
00:33:37.390 --> 00:33:39.050
Wat we ook even zien is dat

535
00:33:39.050 --> 00:33:41.090
grotere applicaties hebben

536
00:33:41.090 --> 00:33:43.070
een losse API die

537
00:33:43.070 --> 00:33:44.770
gebouwd is in of een andere taal,

538
00:33:44.870 --> 00:33:46.810
of in Node, of wat dan ook.

539
00:33:47.610 --> 00:33:48.970
En die staat dan helemaal los

540
00:33:48.970 --> 00:33:51.570
van de next application, zeg maar.

541
00:33:51.870 --> 00:33:54.710
Daarmee dus echt front-end developer.

542
00:33:55.450 --> 00:33:57.670
Of in ieder geval front-end developer.

543
00:33:58.750 --> 00:33:59.990
Tussen aandachtstekens, ja.

544
00:34:02.010 --> 00:34:03.510
Omdat je, zeg maar,

545
00:34:03.790 --> 00:34:04.950
dus vooral bezig bent met

546
00:34:04.950 --> 00:34:07.310
de front-end van de applicatie.

547
00:34:07.610 --> 00:34:09.290
Dat betekent niet dat je full-time

548
00:34:09.290 --> 00:34:11.050
CSS aan het schrijven bent, of wat dan ook.

549
00:34:11.070 --> 00:34:13.210
Het betekent gewoon dat je de logica voor de front-end

550
00:34:13.210 --> 00:34:13.890
van bouwen bent.

551
00:34:14.810 --> 00:34:17.550
Dat is in ieder geval mijn definitie daarvan.

552
00:34:18.030 --> 00:34:19.290
Onder andere omdat nu ook

553
00:34:19.290 --> 00:34:21.150
steeds meer, zeg maar, CSS frameworks

554
00:34:21.890 --> 00:34:22.410
uitkomen,

555
00:34:22.870 --> 00:34:25.010
zoals Tailwind, waar je

556
00:34:25.010 --> 00:34:27.230
steeds minder CSS zelf schrijft, maar je

557
00:34:27.230 --> 00:34:29.150
classes gebruikt om components

558
00:34:29.150 --> 00:34:29.750
te maken.

559
00:34:31.390 --> 00:34:32.430
Voor mijzelf,

560
00:34:33.410 --> 00:34:34.810
als iemand die aan

561
00:34:34.810 --> 00:34:36.590
Next werkt en

562
00:34:36.590 --> 00:34:38.290
contributor is, zeg maar,

563
00:34:38.610 --> 00:34:40.550
ben je eigenlijk een soort van full-stack

564
00:34:40.550 --> 00:34:42.430
developer, maar het neigt meer richting

565
00:34:42.970 --> 00:34:44.470
back-end developer.

566
00:34:44.850 --> 00:34:46.730
Maar nog steeds heel erg in touch

567
00:34:46.730 --> 00:34:48.630
met front-end, zeg maar, omdat je

568
00:34:49.890 --> 00:34:50.430
je maakt

569
00:34:50.430 --> 00:34:52.590
tools om front-end developers

570
00:34:52.590 --> 00:34:54.330
te helpen en daardoor moet je wel weten

571
00:34:54.330 --> 00:34:55.490
hoe alles in elkaar zit.

572
00:34:57.110 --> 00:34:58.850
Maar daarentegen ben je ook

573
00:34:58.850 --> 00:35:00.430
met heel erg

574
00:35:01.330 --> 00:35:02.670
verbonden dingen bezig

575
00:35:02.670 --> 00:35:04.450
die met back-end te maken

576
00:35:04.450 --> 00:35:06.570
hebben. Dus je bent bezig met

577
00:35:06.570 --> 00:35:08.270
het optimaliseren van code die

578
00:35:08.270 --> 00:35:09.950
alleen maar in Node.js draait.

579
00:35:12.110 --> 00:35:13.110
Je bent bezig met

580
00:35:13.110 --> 00:35:14.550
contributor aan

581
00:35:14.550 --> 00:35:16.190
Webpack, aan Babel,

582
00:35:17.730 --> 00:35:18.730
je bent bezig met

583
00:35:18.730 --> 00:35:20.170
het schrijven van plugins voor

584
00:35:20.690 --> 00:35:21.170
Webpack

585
00:35:22.370 --> 00:35:24.390
en dat soort dingen. En dat zijn dingen die je als

586
00:35:24.390 --> 00:35:26.570
front-end developer tegenwoordig vrijwel

587
00:35:26.570 --> 00:35:27.390
niet hoeft te doen.

588
00:35:27.930 --> 00:35:31.650
Wat heel goed is overigens, want

589
00:35:31.650 --> 00:35:33.530
dat soort dingen zijn meestal als je

590
00:35:33.530 --> 00:35:35.330
een applicatie aan het bouwen bent, niet de dingen

591
00:35:35.330 --> 00:35:36.910
waar je aan zou moeten werken.

592
00:35:38.010 --> 00:35:39.830
Voor het overgrote deel

593
00:35:39.830 --> 00:35:41.310
is het ding waar je als

594
00:35:41.310 --> 00:35:43.370
front-end developer mee bezig zou moeten zijn

595
00:35:43.370 --> 00:35:45.390
het maken van

596
00:35:46.290 --> 00:35:47.610
dingen voor je klant

597
00:35:47.610 --> 00:35:49.390
en niet voor de build tool

598
00:35:49.390 --> 00:35:51.230
chain, zeg maar. En dat is waar

599
00:35:51.230 --> 00:35:53.390
Dextus mee helpt. Want je hebt dus geen

600
00:35:53.970 --> 00:35:55.310
build tooling die je zelf moet

601
00:35:55.310 --> 00:35:57.510
onderhouden en dan steeds moet upgrade

602
00:35:57.510 --> 00:35:59.790
of moet bij je houden enzovoort.

603
00:35:59.990 --> 00:36:01.290
Dus je hebt bijvoorbeeld, je hoeft niet

604
00:36:01.290 --> 00:36:03.190
Webpack te upgrade, dat hebben wij al gedaan

605
00:36:03.190 --> 00:36:05.570
bijvoorbeeld. Dus als je Webpack 5

606
00:36:05.570 --> 00:36:07.290
wil gebruiken, dan kun je nu in Next

607
00:36:07.290 --> 00:36:09.670
zeggen, oké, ik ga Webpack 5 installeren

608
00:36:09.670 --> 00:36:11.130
op een bepaalde manier.

609
00:36:11.790 --> 00:36:13.010
Op dit moment nog in beta

610
00:36:13.790 --> 00:36:14.230
vandaar.

611
00:36:16.090 --> 00:36:17.430
En dan kun je het meteen

612
00:36:17.430 --> 00:36:19.230
gebruiken, omdat wij al die

613
00:36:19.230 --> 00:36:21.410
tijd gestoken hebben in het upgrade van Webpack.

614
00:36:21.910 --> 00:36:23.310
En dat kan soms

615
00:36:23.310 --> 00:36:25.210
heel makkelijk zijn.

616
00:36:25.270 --> 00:36:27.710
Het kan zijn van oké,

617
00:36:27.890 --> 00:36:29.690
we upgrade in dependency and that's it.

618
00:36:30.770 --> 00:36:31.090
Maar

619
00:36:31.090 --> 00:36:33.050
major upgrades van compilers,

620
00:36:33.630 --> 00:36:35.250
zoals Webpack,

621
00:36:35.450 --> 00:36:37.030
dus compilers zijn fundlers,

622
00:36:39.130 --> 00:36:39.770
is

623
00:36:39.770 --> 00:36:41.190
over het algemeen heel erg

624
00:36:41.190 --> 00:36:43.030
ingewikkeld, omdat je al je plugins

625
00:36:43.030 --> 00:36:45.350
compatible moet maken enzovoort.

626
00:36:45.790 --> 00:36:47.230
En dat kan soms

627
00:36:47.230 --> 00:36:49.210
weken duren bijvoorbeeld, omdat ze helemaal goed

628
00:36:49.210 --> 00:36:49.610
krijgen.

629
00:36:50.430 --> 00:36:50.870
Ja,

630
00:36:51.150 --> 00:36:53.230
dat zijn dingen die uit je handen worden gehaald.

631
00:36:53.350 --> 00:36:55.110
Die ervaring hebben wij ook wel, ja.

632
00:36:55.890 --> 00:36:56.890
Dat klopt, ja.

633
00:36:57.370 --> 00:36:59.590
Ja, soms komen mensen gewoon vast te zitten, zeg maar.

634
00:37:00.070 --> 00:37:01.790
Dus vast te zitten, als in

635
00:37:02.790 --> 00:37:03.230
je

636
00:37:03.230 --> 00:37:05.430
komt een project binnen en dat project gebruikt

637
00:37:05.430 --> 00:37:07.310
nog steeds Webpack 3, omdat ze nooit naar Webpack 4

638
00:37:07.310 --> 00:37:08.130
hebben kunnen upgraden.

639
00:37:09.890 --> 00:37:11.670
Dat was zeker, zeg maar, Webpack 3

640
00:37:11.670 --> 00:37:13.130
naar 4 was bijvoorbeeld een heel erg

641
00:37:13.130 --> 00:37:13.870
groot update.

642
00:37:15.010 --> 00:37:17.390
Was bijna niet te doen als je

643
00:37:17.390 --> 00:37:19.590
zeg maar, dus bij een agency werkte

644
00:37:19.590 --> 00:37:21.530
ofzo. Omdat je dan tegen een klant moet

645
00:37:21.530 --> 00:37:23.310
zeggen, hey, we gaan even 40 uur

646
00:37:23.310 --> 00:37:25.350
investeren in het upgraden

647
00:37:25.350 --> 00:37:27.270
van de compiler die 18 websites

648
00:37:27.270 --> 00:37:29.110
zit. En dan zegt de klant van,

649
00:37:29.530 --> 00:37:31.470
wat is een compiler? Waarom

650
00:37:31.470 --> 00:37:32.050
is dat nodig?

651
00:37:33.010 --> 00:37:35.110
En dan zeg maar ook niet eens van

652
00:37:35.110 --> 00:37:37.270
waarom is het nodig van, oké,

653
00:37:37.290 --> 00:37:39.390
het is belangrijk omdat je nog up to date bent, maar ook

654
00:37:39.390 --> 00:37:41.630
van, wat is de business

655
00:37:41.630 --> 00:37:43.210
metric, waarmee dat we

656
00:37:43.210 --> 00:37:45.330
gaan kijken of die 40 uur het eigenlijk wel

657
00:37:45.330 --> 00:37:46.230
bepaard zijn, zeg maar.

658
00:37:48.330 --> 00:37:49.430
En dat is heel lastig om dat weer

659
00:37:49.430 --> 00:37:50.710
uit te halen, zeg maar.

660
00:37:51.170 --> 00:37:53.110
Dus dan kun je langer termijn kijken, oké,

661
00:37:53.150 --> 00:37:55.110
over zoveel jaar heb je dan

662
00:37:56.870 --> 00:37:57.910
meer geoptimaliseerde

663
00:37:57.910 --> 00:37:59.330
bundels, bijvoorbeeld.

664
00:38:00.350 --> 00:38:01.250
Wat je nu in Webpack 5

665
00:38:01.250 --> 00:38:01.950
krijgt.

666
00:38:03.130 --> 00:38:05.330
Maar het is nog steeds niet

667
00:38:06.810 --> 00:38:07.330
makkelijk

668
00:38:07.330 --> 00:38:08.650
te verantwoorden, zeg maar.

669
00:38:11.170 --> 00:38:11.690
Oké.

670
00:38:12.050 --> 00:38:12.830
Ja, eigenlijk hebben we

671
00:38:12.830 --> 00:38:14.990
we hebben niet eens een segue nodig.

672
00:38:15.310 --> 00:38:16.830
We zitten allemaal gewoon midden in Next.js.

673
00:38:18.110 --> 00:38:18.630
Ik heb,

674
00:38:19.210 --> 00:38:20.650
ja, dat is eigenlijk wel

675
00:38:20.650 --> 00:38:23.450
een goede, want je zegt bijvoorbeeld ook in je

676
00:38:23.450 --> 00:38:24.610
in je bio zeg je ook wel

677
00:38:24.610 --> 00:38:26.830
dat je de ontwikkelaars ervaring

678
00:38:26.830 --> 00:38:28.750
wil verbeteren, dus dat omschrijf je

679
00:38:28.750 --> 00:38:31.130
ook van dat je eigenlijk met die

680
00:38:31.130 --> 00:38:32.850
tussen aanhalingstekens back-end tooling

681
00:38:32.850 --> 00:38:35.210
bezig bent om te zorgen dat het front-end

682
00:38:35.210 --> 00:38:36.890
development process soepeler en

683
00:38:36.890 --> 00:38:38.350
makkelijker gaat. Dus dat

684
00:38:39.170 --> 00:38:40.850
was wel een vraag, zeg maar,

685
00:38:40.850 --> 00:38:42.650
die ik haalde, maar dat

686
00:38:42.650 --> 00:38:44.230
heb je al beantwoord.

687
00:38:45.150 --> 00:38:46.650
Ik ben trouwens wel nieuwsgierig,

688
00:38:46.750 --> 00:38:49.250
want je hebt naast dat je

689
00:38:49.250 --> 00:38:50.570
een steentje hebt bijgedragen aan

690
00:38:50.570 --> 00:38:52.610
Next.js en

691
00:38:52.610 --> 00:38:54.990
heb je ook aan Micro.

692
00:38:55.450 --> 00:38:56.630
Dat zei mij helemaal niks.

693
00:38:56.750 --> 00:38:58.850
En MDX, MDX wel, maar Micro niet.

694
00:38:59.330 --> 00:39:00.830
Kun je vertellen wat Micro

695
00:39:00.830 --> 00:39:02.710
en MDX, ja, wat dat zijn?

696
00:39:03.550 --> 00:39:03.870
Ja,

697
00:39:04.870 --> 00:39:06.450
Micro is een

698
00:39:06.450 --> 00:39:08.230
heel kleine HTTP-server.

699
00:39:08.230 --> 00:39:10.170
Je moet eigenlijk denken, express,

700
00:39:10.470 --> 00:39:12.610
maar dan compleet uitgekleed

701
00:39:12.610 --> 00:39:14.190
zit alleen maar de request-response

702
00:39:14.190 --> 00:39:16.650
handler in. Dus dat betekent dat je geen express

703
00:39:16.650 --> 00:39:18.210
.get, of

704
00:39:18.210 --> 00:39:20.430
app.get, app.post

705
00:39:20.430 --> 00:39:22.070
enzovoort hebt. Je hebt pure

706
00:39:22.070 --> 00:39:23.930
module.export

707
00:39:23.930 --> 00:39:25.950
en dan een functie.

708
00:39:26.570 --> 00:39:27.530
En die functie is dan

709
00:39:28.230 --> 00:39:30.270
een request and response parameter

710
00:39:30.270 --> 00:39:32.430
en dan kun je dus zeggen

711
00:39:34.690 --> 00:39:35.290
response

712
00:39:35.290 --> 00:39:36.090
.end

713
00:39:36.090 --> 00:39:37.230
en

714
00:39:38.470 --> 00:39:39.990
dan data bijvoorbeeld.

715
00:39:40.210 --> 00:39:42.150
Of je kunt een return doen en dan daar

716
00:39:42.150 --> 00:39:43.490
data returnen.

717
00:39:44.890 --> 00:39:45.770
Je kunt het vergelijken.

718
00:39:46.790 --> 00:39:48.190
Micro is ook

719
00:39:48.190 --> 00:39:49.230
vier jaar geleden gemaakt.

720
00:39:50.250 --> 00:39:52.270
Dat is eigenlijk een soort

721
00:39:53.770 --> 00:39:54.370
serverless

722
00:39:54.370 --> 00:39:55.550
functions,

723
00:39:56.030 --> 00:39:56.810
een type API.

724
00:39:58.470 --> 00:39:59.570
Wat later

725
00:40:00.070 --> 00:40:01.310
kwam, zeg maar,

726
00:40:03.930 --> 00:40:04.150
die

727
00:40:04.150 --> 00:40:06.190
je dan in een container kon hosten.

728
00:40:06.410 --> 00:40:08.210
Dus je hostte dan een hele kleine container

729
00:40:08.210 --> 00:40:09.710
met micro erin.

730
00:40:10.130 --> 00:40:12.590
En dat was dan geoptimaliseerd voor

731
00:40:12.590 --> 00:40:14.030
het maken van APIs.

732
00:40:14.450 --> 00:40:15.650
Dus echt niet front-end

733
00:40:15.650 --> 00:40:18.390
gerelateerde code, maar puur back-ends.

734
00:40:20.690 --> 00:40:22.150
En dan denk je natuurlijk waarom

735
00:40:23.030 --> 00:40:24.010
heb je dat gemaakt

736
00:40:24.010 --> 00:40:25.690
enzovoort enzovoort.

737
00:40:26.330 --> 00:40:28.490
Maar dat was ook een project

738
00:40:28.490 --> 00:40:29.570
van Vercell

739
00:40:30.150 --> 00:40:32.210
en dat gebruikten we op dat

740
00:40:32.210 --> 00:40:34.500
moment voor het bouwen van die

741
00:40:35.010 --> 00:40:36.210
Vercell APIs voor

742
00:40:36.210 --> 00:40:37.850
het platform, zeg maar.

743
00:40:38.010 --> 00:40:39.750
En dan, ja,

744
00:40:40.070 --> 00:40:42.030
en dan naast is MDX.

745
00:40:42.690 --> 00:40:44.110
Dat is een project

746
00:40:44.110 --> 00:40:46.230
wat ik

747
00:40:46.230 --> 00:40:47.070
samen met Kishen,

748
00:40:47.390 --> 00:40:49.230
de CEO van Vercell,

749
00:40:50.730 --> 00:40:51.870
ben gestart.

750
00:40:52.110 --> 00:40:53.170
Toen we eigenlijk

751
00:40:54.120 --> 00:40:55.730
bezig waren om

752
00:40:56.690 --> 00:40:58.250
de, ja, we noemden het zelf

753
00:40:58.250 --> 00:41:00.050
de block-outturning experience.

754
00:41:00.050 --> 00:41:01.870
Wat is eigenlijk,

755
00:41:02.550 --> 00:41:05.030
we waren op dat moment heel veel blogs aan het schrijven.

756
00:41:06.430 --> 00:41:07.850
Headless CMS'ers waren nog niet

757
00:41:08.310 --> 00:41:10.170
helemaal, zeg maar, de hot and happening

758
00:41:10.170 --> 00:41:12.250
thing dat ze dit jaar

759
00:41:12.250 --> 00:41:13.050
zijn geworden.

760
00:41:14.310 --> 00:41:15.290
In het vorig jaar.

761
00:41:16.130 --> 00:41:17.170
Dit was in 2018.

762
00:41:19.010 --> 00:41:19.890
Dus we hadden eigenlijk

763
00:41:19.890 --> 00:41:22.150
zoiets van, oké, je wil eigenlijk alles in Markdown

764
00:41:22.150 --> 00:41:23.950
schrijven, want we schreven toen op dat moment

765
00:41:23.950 --> 00:41:25.870
alle blogposts met

766
00:41:26.390 --> 00:41:26.830
JSX.

767
00:41:26.830 --> 00:41:28.830
Dus letterlijk als je

768
00:41:30.290 --> 00:41:32.650
als je ooit JSX hebt gebruikt

769
00:41:32.650 --> 00:41:34.290
om gewoon components te maken,

770
00:41:34.550 --> 00:41:36.650
werkt helemaal perfect, maar voor het schrijven van

771
00:41:36.650 --> 00:41:38.290
blogs is het niet het meest ideale.

772
00:41:39.910 --> 00:41:40.910
Zeker omdat je

773
00:41:40.910 --> 00:41:42.450
heel veel

774
00:41:42.450 --> 00:41:44.470
dingen die je vaak gebruikt,

775
00:41:44.610 --> 00:41:46.590
dus bijvoorbeeld linkjes,

776
00:41:47.690 --> 00:41:48.210
niet

777
00:41:48.210 --> 00:41:50.770
heel snel kan maken. Je moet dan helemaal een

778
00:41:50.770 --> 00:41:52.290
component importeren,

779
00:41:52.630 --> 00:41:54.710
dat component dan gaan gebruiken,

780
00:41:54.710 --> 00:41:57.110
om dat linkje te maken, en dan

781
00:41:57.110 --> 00:41:58.430
de hitchwrap er nog in te zetten,

782
00:41:59.030 --> 00:41:59.470
enzovoort.

783
00:42:01.290 --> 00:42:02.890
Dus, en het zag er dan daarna

784
00:42:02.890 --> 00:42:04.690
heel moeilijk leesbaar uit. Dus als je dan moest gaan

785
00:42:04.690 --> 00:42:06.910
reviewen van die textstack maar die geschreven

786
00:42:06.910 --> 00:42:08.570
was, dan moest je door de

787
00:42:08.570 --> 00:42:10.610
text heen kijken, zeg maar, zelf.

788
00:42:11.930 --> 00:42:12.510
En hetzelfde met

789
00:42:12.510 --> 00:42:13.530
editen enzovoort.

790
00:42:14.670 --> 00:42:16.350
Zoiets van, ja, oké, we willen wel Markdown

791
00:42:16.350 --> 00:42:18.570
gebruiken, maar al onze blogposts

792
00:42:18.570 --> 00:42:20.490
hebben hele interactieve components

793
00:42:20.490 --> 00:42:22.810
in het midden van de content zitten.

794
00:42:22.810 --> 00:42:24.970
Dus hoe lossen we dat dan op?

795
00:42:26.650 --> 00:42:27.050
En terwijl we

796
00:42:27.050 --> 00:42:29.010
dus het idee, Kishen

797
00:42:29.010 --> 00:42:30.880
had op dat moment het idee van, ja, oké,

798
00:42:31.630 --> 00:42:32.810
wat nou als we

799
00:42:34.010 --> 00:42:35.070
mensen dus

800
00:42:35.070 --> 00:42:36.710
die import,

801
00:42:37.050 --> 00:42:38.960
dus JSX imports, laten schrijven

802
00:42:40.070 --> 00:42:40.970
in de Markdown,

803
00:42:41.110 --> 00:42:42.430
aan de bovenkant van de Markdown file,

804
00:42:43.010 --> 00:42:44.930
en dan die JSX laten

805
00:42:44.930 --> 00:42:46.790
gebruiken in de Markdown.

806
00:42:48.030 --> 00:42:49.110
Omdat Markdown

807
00:42:49.110 --> 00:42:51.030
ook support heeft voor

808
00:42:51.030 --> 00:42:53.150
HTML-text. Je kunt ook gewoon HTML

809
00:42:53.150 --> 00:42:54.230
schrijven in Markdown.

810
00:42:55.130 --> 00:42:57.230
En dat is bijna altijd valid, zolang je

811
00:42:57.230 --> 00:42:58.430
de juiste spacing houdt.

812
00:43:00.270 --> 00:43:01.230
Dus toen

813
00:43:01.710 --> 00:43:03.010
begonnen we eigenlijk met een soort

814
00:43:03.010 --> 00:43:05.030
spec. Die spec die

815
00:43:07.390 --> 00:43:09.050
de specificatie van hoe dat alles

816
00:43:09.050 --> 00:43:10.890
rijdt zou zien in de meest ideale

817
00:43:10.890 --> 00:43:12.590
situatie. Dus oké,

818
00:43:12.790 --> 00:43:14.150
hier zijn we bezig geweest.

819
00:43:15.990 --> 00:43:16.970
En toen had Kishen

820
00:43:16.970 --> 00:43:18.950
het idee van, oké,

821
00:43:18.950 --> 00:43:21.110
we gaan er niet meteen zelf aan werken, maar we gaan kijken

822
00:43:21.110 --> 00:43:22.810
wat de hele community erover denkt.

823
00:43:22.930 --> 00:43:25.350
Want het is misschien wel een interessant idee voor

824
00:43:25.350 --> 00:43:26.070
meer mensen.

825
00:43:27.430 --> 00:43:28.850
En toen op dat moment was Spectrum

826
00:43:28.850 --> 00:43:31.290
nog een ding. Spectrum is zeg maar

827
00:43:31.290 --> 00:43:32.330
een forum

828
00:43:32.770 --> 00:43:35.270
software die is overgenomen door

829
00:43:35.270 --> 00:43:35.850
GitHub.

830
00:43:37.150 --> 00:43:38.770
Ik denk ook anderhalf jaar geleden, of

831
00:43:38.770 --> 00:43:39.590
een jaar geleden.

832
00:43:43.430 --> 00:43:45.210
dat is recent.

833
00:43:46.770 --> 00:43:48.190
Ze zijn daarmee gestopt

834
00:43:48.190 --> 00:43:49.710
omdat ze nu GitHub Discussions

835
00:43:49.710 --> 00:43:50.450
hebben.

836
00:43:52.090 --> 00:43:54.010
En GitHub Discussions is zeg maar

837
00:43:54.010 --> 00:43:55.320
in GitHub ingebouwd.

838
00:43:56.410 --> 00:43:57.460
Dus dat is iets makkelijker

839
00:43:57.750 --> 00:43:59.050
om te gebruiken.

840
00:43:59.710 --> 00:44:01.370
En dat gebruiken wij nu ook voor

841
00:44:01.370 --> 00:44:01.950
Next.js.

842
00:44:04.350 --> 00:44:05.350
En dus wat wij eigenlijk deden

843
00:44:05.350 --> 00:44:07.330
was we posten daar op het forum

844
00:44:07.330 --> 00:44:09.370
voor zeg maar

845
00:44:09.370 --> 00:44:11.490
je had meerdere spaces en er was een space

846
00:44:12.110 --> 00:44:12.650
voor

847
00:44:12.650 --> 00:44:14.230
Frontend Café,

848
00:44:14.770 --> 00:44:16.750
denk ik, dat het is.

849
00:44:19.990 --> 00:44:20.710
En Frontend Café

850
00:44:20.710 --> 00:44:22.650
was zeg maar heel veel verschillende

851
00:44:23.410 --> 00:44:24.670
programmeurs. Niet eens

852
00:44:24.670 --> 00:44:26.570
alleen maar mensen die React gebruikt of alleen

853
00:44:26.570 --> 00:44:28.750
maar mensen die View of Angular gebruikte.

854
00:44:29.370 --> 00:44:30.830
Maar gewoon iedereen die

855
00:44:30.830 --> 00:44:32.810
in die spectrum zat, die

856
00:44:32.810 --> 00:44:34.370
was gewoon aan het programmeren in

857
00:44:34.370 --> 00:44:35.610
JavaScript de meeste.

858
00:44:36.990 --> 00:44:38.530
Dus Kishen had die gepost

859
00:44:40.290 --> 00:44:40.850
en

860
00:44:42.230 --> 00:44:43.690
en daarover getweet

861
00:44:43.690 --> 00:44:46.730
enzovoort. Die tweet ging best wel

862
00:44:46.730 --> 00:44:48.070
viral-ish

863
00:44:48.070 --> 00:44:48.890
in de

864
00:44:49.670 --> 00:44:50.970
Frontend community op Twitter.

865
00:44:52.330 --> 00:44:53.410
Dus heel veel mensen kwamen in

866
00:44:53.410 --> 00:44:54.930
dat forum en in dat forum begonnen

867
00:44:54.930 --> 00:44:56.850
ze ook allemaal ideeën te delen enzovoort.

868
00:44:59.470 --> 00:44:59.810
Weet je het

869
00:44:59.810 --> 00:45:00.890
standaard open source verhaal?

870
00:45:03.210 --> 00:45:05.090
zeg maar twee dagen later

871
00:45:05.370 --> 00:45:06.630
dus na het weekend

872
00:45:06.630 --> 00:45:09.150
want ze hadden het op vrijdag of zo gepost

873
00:45:10.010 --> 00:45:11.510
er kwam een post

874
00:45:11.510 --> 00:45:12.590
van iemand die zei van

875
00:45:12.990 --> 00:45:14.690
ik had dit weekend tijd

876
00:45:14.690 --> 00:45:16.930
en bleef me in mijn hoofd rondspoken

877
00:45:17.550 --> 00:45:19.150
ik heb het helemaal geïmplementeerd

878
00:45:21.510 --> 00:45:22.590
die had zeg maar

879
00:45:23.210 --> 00:45:24.950
een proof of concept gemaakt

880
00:45:24.950 --> 00:45:27.150
en op github gezet

881
00:45:27.990 --> 00:45:28.510
dus

882
00:45:29.450 --> 00:45:30.570
toen zei wij oké

883
00:45:30.570 --> 00:45:32.050
dat is mooi

884
00:45:33.390 --> 00:45:33.910
interessant

885
00:45:35.450 --> 00:45:37.130
enzovoort want we hadden wel wat ideeën

886
00:45:37.130 --> 00:45:40.250
Over hoe dat die implementatie zou moeten zijn, zeg maar.

887
00:45:41.210 --> 00:45:45.930
Een van de voornaamste dingen was we kunnen niet compileren in de browser.

888
00:45:46.950 --> 00:45:54.030
Dus die GSX-syntha of die MDX-syntha, die moet dus gecompiled worden in iets als Webpack

889
00:45:55.950 --> 00:45:57.070
of zoiets.

890
00:45:58.070 --> 00:46:01.930
Pure om ervoor te zorgen dat je niet in de browser zeg maar een hele babble moet

891
00:46:01.930 --> 00:46:03.890
draaien om dat allemaal goed te krijgen.

892
00:46:03.890 --> 00:46:11.370
Want dat is zeg maar 700 kb aan code en dan ben je sowieso al over je site-budget heen.

893
00:46:11.570 --> 00:46:20.630
Dus dat ging niet worden en die initiële implementatie door John O'Tender, een gast

894
00:46:20.630 --> 00:46:29.370
uit Amerika, die zag best goed uit en die deed dus dat exacte wat ik net uitlegde die

895
00:46:29.370 --> 00:46:42.250
en compilde het in de browser via 2 dingen, via Remark, dat is eigenlijk een parser voor

896
00:46:42.250 --> 00:46:42.890
Markdown.

897
00:46:43.950 --> 00:46:53.390
Daar zat dan een custom plugin op die eigenlijk de EST, want het is misschien heel technisch,

898
00:46:55.870 --> 00:47:04.610
een abstract syntax tree krijg je door eigenlijk de code te parsen en dan krijg je eigenlijk

899
00:47:04.610 --> 00:47:13.910
een soort JavaScript object terug met elke regel die jij in je Markdown hebt gezet en dan

900
00:47:13.910 --> 00:47:20.690
daar alle metadata van die dan de compiler eigenlijk voor die taal, dus in dit geval

901
00:47:20.690 --> 00:47:30.490
Markdown heeft gepakt en met Remark had je dus, dan parser je dat dus eigenlijk en dan

902
00:47:30.490 --> 00:47:34.810
kun je daarna plugins over de EST draaien, dat is hetzelfde als de manier waarop dat

903
00:47:34.810 --> 00:47:41.530
bevel werkt bijvoorbeeld en wat ze toen, wat ze daar dus deden was, we passten die HTML

904
00:47:41.530 --> 00:47:47.750
tags, dus die HTML tags die waren al geparsed, want de JSX was dus HTML in principe,

905
00:47:48.610 --> 00:47:55.990
daar parsen we nog die JSX uit en maakten daar dus een, in plaats van HTML node, maakten

906
00:47:55.990 --> 00:48:05.910
daar een JSX node van en wat we daarna deden was, het was niet eens, implementatie wise maakt het

907
00:48:05.910 --> 00:48:10.550
niet zoveel uit alleen we hadden ook een spec die we wilden maken voor dit is wat een MDX

908
00:48:10.550 --> 00:48:16.990
document eruit ziet in de EST, dus hebben we ook een MDX EST format zegmaar gemaakt,

909
00:48:18.330 --> 00:48:23.790
om het zo duidelijk mogelijk te krijgen voor mensen die een eigen parser zouden willen implementeren

910
00:48:23.790 --> 00:48:32.050
enzovoort, dus die MDX EST die werd daarna dus weer terug omgezet in iets anders,

911
00:48:32.150 --> 00:48:38.370
dus in HTML of JSX of wat dan ook, in die initiële implementatie werd het dus omgezet

912
00:48:38.370 --> 00:48:43.730
in React Components en dan heb je dus meteen React Components die je kunt renderen met

913
00:48:43.730 --> 00:48:48.530
React, enig probleem was, dan moest je die parser dus in je bruisel draaien,

914
00:48:48.630 --> 00:48:56.210
omdat je anders de MDX niet kon draaien in de bruisel, waardoor dat je dus je interactieve

915
00:48:56.210 --> 00:48:59.730
components niet interactief waren, die kon je dan alleen maar server renderen en dan was je klaar

916
00:48:59.730 --> 00:49:05.990
zegmaar, dus dan kon je geen interactie toevoegen, geen clicks, geen states,

917
00:49:08.110 --> 00:49:16.410
geen effects enzovoort, dus dat kon dan op dat moment niet, dus toen had ik het redelijk

918
00:49:16.410 --> 00:49:25.610
rare idee, als we weer terugkijken, om zegmaar je schrijft dus Markdown en in die Markdown

919
00:49:25.610 --> 00:49:34.110
plaats je JSX, maar wat nou als we die EST van die MDX output zegmaar dan weer omzetten in JSX,

920
00:49:34.870 --> 00:49:44.330
dus in plaats van dat je dus de input is Markdown met JSX erin, maar de output is dus JSX en

921
00:49:44.330 --> 00:49:53.710
daardoor krijg je dan zegmaar dus gewoon een JSX tree, dus elke regel, elke paragraph enzovoort,

922
00:49:54.550 --> 00:50:03.690
die werd dus een JSX node, dus er werd gewoon een P JSX node en daarna werd dat dus in

923
00:50:04.450 --> 00:50:10.270
Babel gegooid om dat dan weer om te zetten in normale JavaScript die je dan uitvoert in de

924
00:50:10.270 --> 00:50:19.110
browser of in andere environments, dus dat was eigenlijk het idee dat ik toen had en wat

925
00:50:19.110 --> 00:50:28.230
toen hebben gedaan is, dat is geïmplementeerd, dus ik en John samen binnen een paar weken tijd

926
00:50:29.690 --> 00:50:38.630
en dat is in productie gekregen op Vercellet.com in de blog en de documentatie, dus de

927
00:50:38.630 --> 00:50:47.370
documentatie en de blog waren beide gedreven door MDX zegmaar op dat moment, dus dat was

928
00:50:47.370 --> 00:50:55.410
het interne gebouwd enzovoort, niemand gebruikte het in open source enzovoort en toen hadden we onze

929
00:50:55.410 --> 00:51:04.830
eerste of onze tweede user conference dat jaar in 2018 en dat heette toen nog site day,

930
00:51:05.690 --> 00:51:14.710
dat was een conference in San Francisco, waar dan heel veel sprekers kwamen die met

931
00:51:15.270 --> 00:51:25.610
over Vercellet platform gingen praten of over Next of over andere topics die ze hadden die

932
00:51:25.610 --> 00:51:32.450
heel interessant waren en in de keynote hadden we dan een plan om dan MDX aan te kondigen,

933
00:51:32.450 --> 00:51:42.870
dus toen, ik had toen nog nooit gepresenteerd in het wagen in ieder geval, dus buiten zegmaar

934
00:51:42.870 --> 00:51:49.810
presentaties op school, dat soort dingen en toen moest ik dus gaan presenteren in de

935
00:51:49.810 --> 00:51:58.190
keynote als eerste na Nikeshemo aan het begin en dan meteen de nieuwe versie van Next aankondigen,

936
00:51:58.450 --> 00:52:07.910
nieuwe MDX format aankondigen en nieuwe website enzovoort en dat was dan voor

937
00:52:07.910 --> 00:52:20.070
350-300 mensen ofzo en bij de Palace of Fine Arts wat echt heel mooi is in San Francisco,

938
00:52:21.330 --> 00:52:37.890
dan wordt ook bijvoorbeeld Get Up Universe gehouden, dat soort dingen, dus dat is wel zo gaaf

939
00:52:39.090 --> 00:52:47.570
bijna twee en een half jaar geleden of twee jaar geleden, ja eigenlijk is dat lang geleden,

940
00:52:47.570 --> 00:52:51.890
het lijkt wel heel lang geleden, ik zat nu te denken dat ik pas voor de eerste keer op

941
00:52:52.370 --> 00:53:03.410
bij NextConf geweest, dat was afgelopen oktober was dat denk ik, ja vorige maand en het was

942
00:53:03.410 --> 00:53:11.110
natuurlijk helemaal online maar het was vele malen groter nu natuurlijk, ja zeker ja zeg maar na

943
00:53:11.110 --> 00:53:18.650
die eerste keer presenteren heb ik ook echt op conferences gesproken die vele malen groter zijn,

944
00:53:19.270 --> 00:53:27.970
echt tot aan volgens mij was React Europe was 1500 mensen ofzo in een ruimte wat je nu

945
00:53:27.970 --> 00:53:39.290
helemaal niet meer kan voorstellen zeg maar, maar ja dus dat was wel apart ja inderdaad,

946
00:53:39.450 --> 00:53:48.290
vorig jaar bij Dodges voor 2000 mensen ofzo, heel heel raar om voor zoveel mensen te staan,

947
00:53:50.330 --> 00:53:57.010
als je ooit denkt over oké ik durf niet op het podium te staan en ik ben bang dat heel

948
00:53:57.010 --> 00:54:06.090
mensen naar me kijken, het is niet zo eng als je zou verwachten omdat ze de hele ruimte dimmen en

949
00:54:06.090 --> 00:54:10.590
altijd licht op jou staat en je half verblind wordt door het licht waardoor je niet iedereen ziet in

950
00:54:10.590 --> 00:54:24.030
de ruimte, ik ben nog niet verder gekomen dan 100, dat ligt er ook nog aan wat voor ruimte want als je 100 zeg

951
00:54:24.730 --> 00:54:30.370
maar ja gewoon een hoe zeg je dat een grote, niet heel groot maar een redelijke conference en je

952
00:54:30.370 --> 00:54:38.290
kunt eigenlijk iedereen zien dat is ook al best wel ja overweldigend. Was het dit keer live Tim in

953
00:54:38.870 --> 00:54:48.270
oktober? De next best comes was niet live keynote nee we hebben dat voorgeproduceerd omdat

954
00:54:49.090 --> 00:54:53.210
we dat risico niet zouden nemen dat het zeg maar niet zou werken of dat je verbindingsproblemen

955
00:54:53.210 --> 00:55:00.210
hebt enzovoort ik heb geen stabiel internet of ik had geen stabiel internet rond die tijd dus

956
00:55:00.210 --> 00:55:08.350
dat zou je in een Zoom meeting hebben waar je half weg valt enzovoort dat weet je niet en ja dus

957
00:55:08.350 --> 00:55:16.110
dat was zeg maar allemaal voorgeproduceerd maar opgenomen in een soort professionele setting dus

958
00:55:16.110 --> 00:55:27.330
Het is met een cameraman enzovoort, en dan ook nog in drie verschillende landen en vier

959
00:55:27.330 --> 00:55:35.610
verschillende mensen, dus je had zeg maar, ik in Nederland hier dus, vlakbij Eindhoven

960
00:55:35.610 --> 00:55:36.570
opgenomen.

961
00:55:39.690 --> 00:55:45.890
De andere waren, twee waren in San Francisco en de laatste was in Buenos Aires.

962
00:55:47.490 --> 00:55:48.370
In Argentinië.

963
00:55:50.390 --> 00:55:53.410
Dus ja, dat was wel interessant.

964
00:55:53.790 --> 00:55:58.090
We moesten alles aan elkaar plakken zeg maar, al die stukken, en dat moest dan ook allemaal

965
00:55:58.090 --> 00:55:59.070
goed overlopen.

966
00:56:01.130 --> 00:56:05.650
En uiteindelijk, ik ben heel positief over het resultaat en heel veel mensen die feedback

967
00:56:05.650 --> 00:56:06.190
gaven ook.

968
00:56:06.910 --> 00:56:07.750
Dus ja, dat was wel gaaf.

969
00:56:08.550 --> 00:56:09.230
Ja, dat was leuk.

970
00:56:10.050 --> 00:56:10.290
Ja.

971
00:56:10.750 --> 00:56:13.390
Ja, ik had het er met je hoofd ook even over.

972
00:56:13.810 --> 00:56:19.190
Het stomme is, ik heb de clean-out toen gezien en ik dacht, wow, die ziet er echt wel, ja

973
00:56:19.190 --> 00:56:23.330
dat is een compliment denk ik wel, een beetje Apple-esque uit zeg maar.

974
00:56:24.270 --> 00:56:25.890
Ja, het zag er gewoon goed uit zeg maar.

975
00:56:26.370 --> 00:56:28.210
Dus dat vond ik echt wel indrukwekkend.

976
00:56:28.910 --> 00:56:32.730
Alleen er gebeurden dingen, over mijn kinderen, dat zei ik net ook al, over mijn kinderen

977
00:56:32.730 --> 00:56:36.630
of over werk, want het was aan het einde van de dag voor ons toch Joost?

978
00:56:36.650 --> 00:56:37.910
Ja, klopt.

979
00:56:38.170 --> 00:56:39.070
Ja, uiteindelijk.

980
00:56:39.970 --> 00:56:42.150
Het begon om vijf uur smiddag inderdaad.

981
00:56:42.510 --> 00:56:42.930
Ja, precies.

982
00:56:44.230 --> 00:56:44.590
Ja.

983
00:56:44.690 --> 00:56:46.010
Ja, dat is voor mij wel een overgang.

984
00:56:46.010 --> 00:56:47.330
Dus dat is precies van de etenstijd enzovoort.

985
00:56:48.330 --> 00:56:53.250
Ja, op zich was het etenstijd, ja, op zich kun je natuurlijk ruim tijd voor maken,

986
00:56:53.650 --> 00:56:59.290
maar dat was ook het idee, maar dat gebeurde, ja, kinderen gebeuren en dan heb je in

987
00:56:59.290 --> 00:57:00.190
één keer een andere planning.

988
00:57:00.790 --> 00:57:05.450
Dus dat was jammer en volgens mij staan nu een aantal talks online als ik het goed

989
00:57:05.450 --> 00:57:06.050
heb gezien.

990
00:57:06.330 --> 00:57:06.650
Ja, klopt.

991
00:57:06.810 --> 00:57:11.830
Dus de clean-out kun je al terugkijken en een aantal talks ook, dus talks van

992
00:57:11.830 --> 00:57:20.430
mensen van Lift, van Ashicorp, Tencent, Tencent is een heel groot Chinees bedrijf dat

993
00:57:21.410 --> 00:57:32.230
WeChat zit, bijvoorbeeld, en ook de grootste nieuwsite van China, de host, zegmaar,

994
00:57:32.610 --> 00:57:36.230
die dat zijn, die zitten achter de grootste nieuwsite van China, die ook op Nexus

995
00:57:36.230 --> 00:57:37.270
gebouwd overigens.

996
00:57:37.270 --> 00:57:39.270
Dus dat is wel tof.

997
00:57:39.490 --> 00:57:44.790
Ja, zegmaar, de vierde of vijfde grootste website van de wereld, op basis van een

998
00:57:44.790 --> 00:57:46.150
X-ranking.

999
00:57:47.110 --> 00:57:49.170
Draaien ze op Vercell, dan?

1000
00:57:49.830 --> 00:57:51.870
Nee, nee, die met self-hosting, ja.

1001
00:57:53.110 --> 00:57:58.470
We hebben ook klanten van Vercell die echt gigantisch groot zijn, zegmaar.

1002
00:57:58.610 --> 00:58:03.870
Dus het is niet zo dat, zegmaar, die allergrootste site, zegmaar, alleen maar

1003
00:58:08.250 --> 00:58:12.110
Ik was meer benieuwd hoe het in China werkt, want ik weet, in China is het natuurlijk

1004
00:58:12.110 --> 00:58:14.770
een vroeg ding om in Amerika te draaien, bijvoorbeeld.

1005
00:58:16.250 --> 00:58:21.370
Ja, de meeste, de manier waarop dat in China werkt is dat je dus een Chinezen

1006
00:58:21.370 --> 00:58:29.070
region moet hebben, waarin je dus bijvoorbeeld AWS heeft regio's in Mainland China en Hong

1007
00:58:29.070 --> 00:58:29.770
Kong.

1008
00:58:30.370 --> 00:58:42.690
En dat is waar je je service op draait voor die specifieke groep van klanten, zegmaar,

1009
00:58:42.770 --> 00:58:43.250
eigenlijk.

1010
00:58:46.510 --> 00:58:48.710
Oké, eens even zien.

1011
00:58:51.430 --> 00:58:53.430
Vragen, vragen, vragen.

1012
00:58:53.690 --> 00:58:54.850
Heel lijst van vragen.

1013
00:58:55.230 --> 00:58:57.250
Ja, we hebben zeker een lijst van vragen.

1014
00:58:58.070 --> 00:58:59.450
Ehm, eens even kijken.

1015
00:58:59.750 --> 00:59:03.550
Ja, het voortrekt heb ik nou wel, ik denk dat daar hebben we een aantal dingen wel besproken.

1016
00:59:03.730 --> 00:59:06.210
We zitten gewoon midden in Next.js, lekker gezellig.

1017
00:59:07.490 --> 00:59:12.890
En bij de Next.js 10, ik ga niet de hele historie bedoel, laten we het gewoon even

1018
00:59:12.890 --> 00:59:18.130
over 10 hebben, want bij die conferentie is natuurlijk redelijk recent die versie

1019
00:59:18.130 --> 00:59:18.670
gereleased.

1020
00:59:19.990 --> 00:59:24.110
Ik zag dat er een aantal grote features ook onder zijn, ik ga ze niet allemaal

1021
00:59:24.110 --> 00:59:24.590
opnoemen.

1022
00:59:25.110 --> 00:59:27.810
Een aantal waren er onder andere.

1023
00:59:27.810 --> 00:59:29.170
Image component, dat was een hele grote.

1024
00:59:29.170 --> 00:59:37.670
Ja, image component, internationalization voor de routing, next analytics, next commerce.

1025
00:59:39.330 --> 00:59:42.210
Misschien is het handig dat we die gewoon, ja dat wij even bij stilstaan,

1026
00:59:42.810 --> 00:59:46.250
maar het image component, nou dat spreekt misschien wel, dat spreekt meteen

1027
00:59:46.250 --> 00:59:46.990
mensen ook wel aan.

1028
00:59:48.830 --> 00:59:50.090
Waarom heb je die gebouwd?

1029
00:59:50.530 --> 00:59:52.330
Laten we het zo, laten we het dan maar meteen zo.

1030
00:59:53.670 --> 00:59:56.930
Ja, dat heeft eigenlijk meerdere redenen.

1031
00:59:57.310 --> 01:00:02.370
Een van die redenen is dat we er eigenlijk achter kwamen dat een heel

1032
01:00:02.370 --> 01:00:08.610
groot gedeelte van alle bytes die in een pagina zitten, images zijn.

1033
01:00:09.050 --> 01:00:12.430
Meer dan 50 procent in veel gevallen.

1034
01:00:13.330 --> 01:00:19.750
En dat heeft zeg maar een best wel groot effect op je performance van je

1035
01:00:19.750 --> 01:00:20.530
pagina's.

1036
01:00:21.130 --> 01:00:23.430
Dat heeft meerdere redenen.

1037
01:00:23.990 --> 01:00:28.470
Een van die redenen is dat je het networkrequest opneemt.

1038
01:00:28.890 --> 01:00:32.930
Dus die plokken eigenlijk andere resources die geladen moeten worden om

1039
01:00:32.930 --> 01:00:34.490
je pagina interactief te maken.

1040
01:00:35.110 --> 01:00:39.590
Dus bijvoorbeeld JavaScript die nodig is om de pagina interactief te maken.

1041
01:00:42.270 --> 01:00:46.130
En daarnaast kwamen erachter dat, of ja dat wisten we eigenlijk al,

1042
01:00:46.970 --> 01:00:52.730
dat heel veel sites niet hun images lazy loaden.

1043
01:00:53.450 --> 01:00:58.990
Dat staat eigenlijk in dat die alle images laden voor de hele pagina.

1044
01:00:59.130 --> 01:01:06.930
Terwijl je alleen maar zeg maar 30 procent van die images ziet in het

1045
01:01:06.930 --> 01:01:08.810
initiële viewport zeg maar.

1046
01:01:10.090 --> 01:01:14.350
Dus als je een site opent dan zie je een aantal images.

1047
01:01:14.350 --> 01:01:19.750
Maar alle images eronder die zijn niet nodig om jou te laten starten

1048
01:01:19.750 --> 01:01:21.210
met het lezen van de pagina.

1049
01:01:21.730 --> 01:01:27.130
En als je die dus niet lazy loadt dan heb je dus het probleem dat die

1050
01:01:27.130 --> 01:01:30.590
dus langer doet over het laden van de pagina.

1051
01:01:32.110 --> 01:01:33.370
Terwijl dat niet nodig is zeg maar.

1052
01:01:34.090 --> 01:01:36.110
Dus wilde dat eigenlijk dat probleem oplossen.

1053
01:01:36.550 --> 01:01:42.330
Dus performance wise het beter maken van het niet laden van images

1054
01:01:42.330 --> 01:01:43.870
die uit de viewport zijn.

1055
01:01:46.210 --> 01:01:49.510
En daarnaast ook het preloaden van images die heel belangrijk zijn.

1056
01:01:50.530 --> 01:01:56.410
Dus als je bijvoorbeeld kijkt Google die gaat hun search engine

1057
01:01:56.410 --> 01:02:01.230
ranking aanpassen volgend jaar naar Core Web Vitals.

1058
01:02:02.510 --> 01:02:05.050
En dat is een nieuwe factor zeg maar.

1059
01:02:05.150 --> 01:02:08.710
In Core Web Vitals zijn eigenlijk drie verschillende metrics.

1060
01:02:09.290 --> 01:02:10.810
En daar kunnen er later nog meer bij komen.

1061
01:02:10.810 --> 01:02:17.050
En de eerste drie zijn eigenlijk First Contentful Paint.

1062
01:02:17.310 --> 01:02:21.550
Dat eigenlijk hoe snel dat de pagina geredeld is met content.

1063
01:02:22.710 --> 01:02:24.030
Largest Contentful Paint.

1064
01:02:24.170 --> 01:02:28.430
Dat betekent eigenlijk wanneer het grootste element op die

1065
01:02:28.430 --> 01:02:30.850
initiële viewport geladen is.

1066
01:02:31.370 --> 01:02:33.130
En Cumulative Layout Shift.

1067
01:02:33.470 --> 01:02:37.690
En dat betekent eigenlijk de beste manier om dat uit te leggen is

1068
01:02:37.690 --> 01:02:39.490
eigenlijk je gaat naar een pagina toe.

1069
01:02:39.490 --> 01:02:42.890
En terwijl de pagina aan het laden is, zie je allemaal elementen

1070
01:02:42.890 --> 01:02:43.850
op en neerspringen.

1071
01:02:44.090 --> 01:02:46.610
Totdat je uiteindelijk het juiste resultaat ziet.

1072
01:02:48.030 --> 01:02:51.350
En vrijwel iedereen die het web ooit gebruikt heeft,

1073
01:02:51.890 --> 01:02:53.430
heeft dat ooit ergens gezien.

1074
01:02:54.310 --> 01:02:56.970
Zeker op je mobiele apparaten enzovoort.

1075
01:02:57.030 --> 01:02:57.590
Of op je telefoon.

1076
01:02:58.530 --> 01:03:00.210
Als je daar op een website zit.

1077
01:03:00.990 --> 01:03:04.530
En die website heeft advertenties of afbeeldingen of wat dan ook.

1078
01:03:05.030 --> 01:03:06.510
En je opent de pagina.

1079
01:03:06.690 --> 01:03:08.670
Dan is de kans heel groot dat je begint te scrollen.

1080
01:03:08.670 --> 01:03:11.810
Omdat je die teksten zelfs naar ingeladen en de afbeeldingen

1081
01:03:11.810 --> 01:03:12.790
bijvoorbeeld niet.

1082
01:03:13.650 --> 01:03:17.030
Zeker op 3G verbindingen of 4G verbindingen.

1083
01:03:17.470 --> 01:03:18.450
En dan begint de scroll.

1084
01:03:18.610 --> 01:03:23.510
En ineens is de tekst waar je was naar beneden geslagen.

1085
01:03:24.010 --> 01:03:25.610
Door een afbeelding die hoger zit.

1086
01:03:25.790 --> 01:03:28.190
Zelfs die afbeelding zie je niet op je telefoon.

1087
01:03:29.070 --> 01:03:30.490
Of je desktop zie je die wel.

1088
01:03:30.590 --> 01:03:31.890
Dus je ziet alles op en neerspringen.

1089
01:03:34.750 --> 01:03:36.870
Dus dat heet Cumulative Layout Shift.

1090
01:03:36.870 --> 01:03:38.610
Daar hebben ze nu een metric voor gemaakt.

1091
01:03:38.730 --> 01:03:41.170
Een manier om het bij te houden in Chrome.

1092
01:03:42.270 --> 01:03:44.290
En dat wordt ook uitgerolde naar andere browsers.

1093
01:03:45.050 --> 01:03:49.070
Voordat je kunt meten hoeveel Cumulative Layout Shift jij hebt

1094
01:03:49.070 --> 01:03:50.210
in je pagina.

1095
01:03:50.730 --> 01:03:52.150
Of Layout Shift in je pagina.

1096
01:03:53.270 --> 01:03:55.830
En dat mag niet hoger zijn dan een bepaald percentage.

1097
01:03:57.470 --> 01:03:59.050
Want als het hoger is dan een bepaald percentage

1098
01:03:59.050 --> 01:04:01.830
betekent eigenlijk dat heel je pagina op en neerspringen is.

1099
01:04:01.990 --> 01:04:03.570
Totdat de hele pagina geladen is.

1100
01:04:06.170 --> 01:04:10.910
En afbeeldingen zijn een heel groot factor in dat hele verhaal.

1101
01:04:11.210 --> 01:04:12.710
Afbeeldingen en assertenties.

1102
01:04:13.130 --> 01:04:14.890
Nou, afbeeldingen.

1103
01:04:15.070 --> 01:04:16.530
Daar waren we al naar aan het kijken natuurlijk.

1104
01:04:16.850 --> 01:04:17.590
Zoals ik zei.

1105
01:04:19.050 --> 01:04:20.950
En de manier om dat eigenlijk op te lossen,

1106
01:04:21.030 --> 01:04:22.910
dus dat Layout Shift gedeelte,

1107
01:04:23.190 --> 01:04:26.530
is om ervoor te zorgen dat developers eigenlijk zeggen

1108
01:04:26.530 --> 01:04:29.850
dit is het aspect ratio van de afbeelding

1109
01:04:29.850 --> 01:04:30.990
die hier gerenderd gaat worden.

1110
01:04:30.990 --> 01:04:34.370
Dat hoeft niet eens de width en de height te zijn.

1111
01:04:36.010 --> 01:04:37.230
Maar puur het aspect ratio.

1112
01:04:38.670 --> 01:04:43.090
En nu is het natuurlijk zo dat je het aspect ratio kan

1113
01:04:43.090 --> 01:04:46.010
berekenen door de width en height te weten.

1114
01:04:47.230 --> 01:04:48.390
Dus wat we eigenlijk gedaan hebben is

1115
01:04:48.390 --> 01:04:50.170
we hebben een React Component gemaakt

1116
01:04:51.530 --> 01:04:53.670
die width en height nodig heeft.

1117
01:04:54.850 --> 01:04:56.910
Dus je moet een SRC toevoegen.

1118
01:04:57.850 --> 01:04:59.690
Dat is gewoon de soort van image.

1119
01:05:01.150 --> 01:05:03.250
En daar moet je dan width en height aan toevoegen.

1120
01:05:04.130 --> 01:05:06.190
Dat hoeft niet per se de width en height

1121
01:05:06.190 --> 01:05:07.650
te zijn van de afbeelding zelf.

1122
01:05:08.070 --> 01:05:09.590
Dat hoeft alleen maar de width en height te zijn

1123
01:05:09.590 --> 01:05:13.390
om de aspect ratio te berekenen.

1124
01:05:13.890 --> 01:05:16.350
En dan kun je dus meerdere layouts toevoegen.

1125
01:05:16.630 --> 01:05:18.910
Dat is een layout property die bestaat

1126
01:05:18.910 --> 01:05:20.750
voor meerdere soorten layouts.

1127
01:05:21.630 --> 01:05:24.830
Omdat we erachter kwamen dat er meerdere...

1128
01:05:24.830 --> 01:05:27.330
Afbeeldingen worden op veel verschillende manieren gebruikt

1129
01:05:27.330 --> 01:05:31.190
in verschillende layouts, bijvoorbeeld in een flexbox,

1130
01:05:31.470 --> 01:05:33.090
in een grid enzovoort.

1131
01:05:33.390 --> 01:05:35.470
En die moeten op een andere manier gestaald worden

1132
01:05:35.470 --> 01:05:37.650
om dan die layout shift te voorkomen.

1133
01:05:38.410 --> 01:05:39.770
Dus er zit ook een layout property bij.

1134
01:05:41.270 --> 01:05:42.570
En dan is eigenlijk het laatste stukje

1135
01:05:42.570 --> 01:05:44.250
wat je eigenlijk helemaal niet ziet als je

1136
01:05:44.250 --> 01:05:45.130
aan het gebruiken bent.

1137
01:05:46.210 --> 01:05:47.790
Je gebruikt de image component

1138
01:05:48.330 --> 01:05:50.790
en daardoor kun je automatisch het lazy loaden.

1139
01:05:51.570 --> 01:05:53.790
En als je dan een afbeelding hebt

1140
01:05:53.790 --> 01:05:55.170
die in de viewport zit,

1141
01:05:55.170 --> 01:05:56.790
dan kun je hem ook nog priority geven.

1142
01:05:57.870 --> 01:05:59.170
En priority betekent eigenlijk...

1143
01:06:00.090 --> 01:06:01.450
Deze afbeelding is heel erg nodig

1144
01:06:01.450 --> 01:06:03.590
voor de largest contentful paint.

1145
01:06:03.810 --> 01:06:05.850
De largest contentful paint wordt meestal gemeten

1146
01:06:05.850 --> 01:06:07.850
op een hele grote afbeelding

1147
01:06:07.850 --> 01:06:08.990
die op de homepage staat,

1148
01:06:09.350 --> 01:06:10.790
op de initiale viewport.

1149
01:06:11.570 --> 01:06:13.410
Dus wat je heel vaak ziet op websites,

1150
01:06:15.350 --> 01:06:15.870
dus...

1151
01:06:15.870 --> 01:06:18.830
Zeg, je gaat naar bol.com of Coolblue, of wat dan ook,

1152
01:06:19.170 --> 01:06:21.030
dan is de eerste afbeelding die je ziet

1153
01:06:21.790 --> 01:06:24.830
in je viewport is vaak een hele grote afbeelding

1154
01:06:25.390 --> 01:06:28.330
die bijvoorbeeld een actie laat zien, of zoiets.

1155
01:06:29.190 --> 01:06:30.810
En die afbeelding moet er heel snel zijn,

1156
01:06:31.030 --> 01:06:33.910
want die largest contentful paint wordt daarop gemeten.

1157
01:06:34.850 --> 01:06:36.830
Dus wat priority dan doet, is eigenlijk...

1158
01:06:37.410 --> 01:06:39.010
Dan zeg jij tegen Next, van oké,

1159
01:06:39.870 --> 01:06:41.190
preload deze afbeelding

1160
01:06:41.670 --> 01:06:44.350
en zorg ervoor dat die zo snel mogelijk geladen is, zeg maar.

1161
01:06:45.130 --> 01:06:46.950
En dat kunnen wij dan weer

1162
01:06:46.950 --> 01:06:48.110
doorzetten naar de browser

1163
01:06:48.110 --> 01:06:50.870
door die linker op preload toe te voegen.

1164
01:06:51.850 --> 01:06:53.410
Wat gewoon een webstandard is

1165
01:06:53.410 --> 01:06:56.170
voor oké, deze resource is nodig

1166
01:06:56.170 --> 01:06:58.430
om een afbeelding snel te kunnen laden.

1167
01:06:59.870 --> 01:07:01.670
En daardoor laat hij dan ook sneller.

1168
01:07:01.810 --> 01:07:05.410
En daardoor gaat de largest contentful paint,

1169
01:07:05.410 --> 01:07:08.210
hebben we ook gezien dat die soms verbeterd wordt

1170
01:07:08.210 --> 01:07:10.310
met meer dan 15 procent.

1171
01:07:10.770 --> 01:07:12.450
Dus dan heb je 15 procent sneller

1172
01:07:12.450 --> 01:07:13.890
je largest contentful paint.

1173
01:07:15.110 --> 01:07:16.510
En largest contentful paint,

1174
01:07:17.130 --> 01:07:18.470
je moet het eigenlijk een keer opzoeken,

1175
01:07:18.670 --> 01:07:22.090
web.dev, een site van Google.

1176
01:07:22.090 --> 01:07:24.350
Daar wordt alles uitgelegd

1177
01:07:24.350 --> 01:07:26.930
over al die correct files.

1178
01:07:28.290 --> 01:07:29.410
En daar wordt ook uitgelegd

1179
01:07:29.410 --> 01:07:31.230
dat bijvoorbeeld

1180
01:07:31.230 --> 01:07:32.750
largest contentful paint

1181
01:07:32.750 --> 01:07:34.930
gemeten wordt, omdat

1182
01:07:34.930 --> 01:07:36.850
ze dus research hebben gedaan,

1183
01:07:37.010 --> 01:07:38.710
de sphecologische research

1184
01:07:39.670 --> 01:07:41.330
binnen, zeg maar, tegen

1185
01:07:41.330 --> 01:07:42.650
users bijvoorbeeld.

1186
01:07:43.850 --> 01:07:45.270
Waarin dat blijkt dat heel veel mensen

1187
01:07:45.270 --> 01:07:46.130
wachten totdat die

1188
01:07:46.130 --> 01:07:47.650
grootste afbeelding geladen is

1189
01:07:47.650 --> 01:07:50.370
voordat ze überhaupt aan de pagina beginnen te scrollen.

1190
01:07:50.370 --> 01:07:51.230
Oh.

1191
01:07:51.710 --> 01:07:52.890
Oh wow, ja.

1192
01:07:53.470 --> 01:07:55.350
En dat is natuurlijk niet handig als je dan dus mensen

1193
01:07:55.350 --> 01:07:57.570
laat zitten wachten op

1194
01:07:57.570 --> 01:07:58.950
dat hele grote

1195
01:07:58.950 --> 01:08:01.330
afbeelding ding dat er nog niet is,

1196
01:08:01.330 --> 01:08:01.950
zeg maar.

1197
01:08:03.670 --> 01:08:05.270
Als je kijkt naar

1198
01:08:06.110 --> 01:08:08.470
de concurrenten, Gatsby,

1199
01:08:08.750 --> 01:08:10.450
die hadden natuurlijk al een tijdje

1200
01:08:10.450 --> 01:08:11.750
image support.

1201
01:08:12.910 --> 01:08:15.430
Zie je dit als laatste

1202
01:08:15.430 --> 01:08:17.370
dingetje wat jullie nog niet hadden

1203
01:08:17.370 --> 01:08:19.370
bij Next.js en Gatsby wel?

1204
01:08:20.230 --> 01:08:22.130
Mag ik het zo oorschrijven?

1205
01:08:22.650 --> 01:08:25.350
Nou, je kon dit natuurlijk al zelf doen door

1206
01:08:25.350 --> 01:08:27.350
zeg maar een image component te gebruiken

1207
01:08:27.350 --> 01:08:29.550
van een

1208
01:08:29.550 --> 01:08:31.530
zeg maar die op NPM stond

1209
01:08:31.530 --> 01:08:32.210
bijvoorbeeld.

1210
01:08:34.450 --> 01:08:36.130
En daardoor kun je dus

1211
01:08:37.170 --> 01:08:39.550
zeg maar het lazy loaden in ieder geval krijgen

1212
01:08:41.290 --> 01:08:42.870
en het optimaliseren

1213
01:08:42.870 --> 01:08:45.090
van images kun je doen door bijvoorbeeld,

1214
01:08:45.350 --> 01:08:47.290
daar hebben we nog niet eens over gehad,

1215
01:08:47.290 --> 01:08:49.530
stel je wilt images optimaliseren

1216
01:08:50.130 --> 01:08:52.190
dan moet je dan een CDN gebruiken

1217
01:08:52.190 --> 01:08:54.130
dus een image CDN

1218
01:08:55.070 --> 01:08:55.950
zoals Cloudinary

1219
01:08:58.550 --> 01:08:58.990
of

1220
01:08:58.990 --> 01:08:59.690
ImageX

1221
01:08:59.690 --> 01:09:01.490
of Fastly

1222
01:09:01.490 --> 01:09:03.550
Image Optimizer of zeg maar

1223
01:09:03.550 --> 01:09:05.290
er zijn een heleboel van deze soort services

1224
01:09:06.030 --> 01:09:08.290
en die moet je dan zelf configureren en instellen

1225
01:09:08.290 --> 01:09:10.130
en dan zorgen dat het allemaal werkt

1226
01:09:10.130 --> 01:09:11.150
samen met je component

1227
01:09:11.630 --> 01:09:13.690
en dan was je nog steeds niet, want dan moet je nog steeds

1228
01:09:13.690 --> 01:09:15.210
SSC sets toevoegen

1229
01:09:15.210 --> 01:09:15.930
en

1230
01:09:16.710 --> 01:09:19.290
sizes en van alles zeg maar

1231
01:09:20.710 --> 01:09:23.510
allemaal om images zo klein mogelijk te krijgen

1232
01:09:25.070 --> 01:09:27.210
en dus zeg maar

1233
01:09:27.890 --> 01:09:29.470
Next kun je gebruiken

1234
01:09:30.370 --> 01:09:31.030
als

1235
01:09:32.170 --> 01:09:33.490
tegen dat

1236
01:09:33.490 --> 01:09:34.930
hele stuk over Gatsby bijvoorbeeld

1237
01:09:34.930 --> 01:09:37.190
Gatsby is a Static Site Generator

1238
01:09:37.190 --> 01:09:39.590
en Next is niet per se

1239
01:09:39.590 --> 01:09:40.790
a Static Site Generator

1240
01:09:40.790 --> 01:09:43.090
het is een

1241
01:09:43.090 --> 01:10:12.710
Hybrid framework, zoals we dat noemen. En dat houdt eigenlijk in dat je dus kunt zeggen, ik wil bepaalde pagina's statically generated hebben. Dus als, hetzelfde principe als een static site generator, maar alleen maar voor bepaalde pagina's. Dus je kan zeggen van oké, de homepage kan static zijn, dus we maken hem static. De blog kan static zijn, dus we maken hem static. En dashboard bijvoorbeeld kan, heeft heel veel dynamische data. Dus we maken deze,

1242
01:10:13.370 --> 01:10:42.690
server-site render. En toen Next geïntroduceerd werd, dus vier jaar geleden, hadden we alleen maar server-site renderings. Alle pagina's werden altijd server-site rendered. Zelfs als het niet nodig was om ze te server-site renderen, zeg maar voor elke request. Dus het verschil tussen static generation en server-site rendering is eigenlijk dat je bij static generation zegt, oké tijdens de build voor productie,

1243
01:10:42.690 --> 01:10:54.090
gaan we hem exporteren naar html en die html die stuur dan naar users toe. En die kunnen, dat betekent niet eens dat het niet meer geupdate kan worden.

1244
01:10:54.950 --> 01:11:12.190
Dus in Next kun je ook zeggen oké, ik wil de pagina opnieuw genereren na een bepaalde tijd. Dus kun je zeggen revalidate 1 of revalidate 10 en dan kun je zeggen oké na 10 seconden render hem opnieuw in de achtergrond.

1245
01:11:12.190 --> 01:11:31.470
Zonder dat je daar je end-user performance mee schaadt, zeg maar. Met server-site rendering, ik denk net iets anders, daar heb je elke request die binnenkomt, ga je dan een specifieke react-pagina renderen voor die gebruiker.

1246
01:11:31.470 --> 01:11:48.350
Daarvoor heb je meer resources nodig, of een caching-laag voor je server-rendered pagina's. En dan kun je dus zeggen oké, we renderen voor elke gebruiker deze specifieke content.

1247
01:11:49.170 --> 01:12:03.410
En daar zitten voor- en nadelen aan. Eentje is dus dat je meer resources nodig hebt. Omdat je dus voor elke user iets aan het renderen bent, aan de server, op de server, zeg maar.

1248
01:12:04.950 --> 01:12:25.830
Bij Static Generation heb je gewoon een statische HTML file die de CDN dan serves. Dus zeg maar, stel, ik request versatile.com, wat dus dan een beetje static is, vanuit Amsterdam, dan krijg ik hem ook vanuit Amsterdam binnen, als er al iemand anders in Amsterdam is geweest naar de website.

1249
01:12:25.830 --> 01:12:27.090
Oh, zelfs dat ja.

1250
01:12:28.250 --> 01:12:44.150
Direct via een CDN. En dan heb je de server-rendered. Zou dan zijn, we hebben deze functie gehost in San Francisco, dus je moet helemaal van Amsterdam naar San Francisco gaan, om die pagina te laten renderen door een server daar, en dan terug te krijgen, zeg maar.

1251
01:12:45.310 --> 01:12:52.150
En dat kun je dan oplossen met ook nog caching voor je server-rendered pagina's. En dat kan ook op Vercell bijvoorbeeld.

1252
01:12:54.010 --> 01:13:07.470
En dat is eigenlijk de twee verschillen. Dus je hebt static generation, server rendering, en dat is anders dan alleen maar static generation. Wat dus zeg maar, oké, ik ga een statische pagina maken, en that's it, zeg maar.

1253
01:13:10.670 --> 01:13:21.690
Oké, dus Next.js is een beetje best of both worlds, is dat goed om te omschrijven? Die hybride situatie, dat je dus de keuze hebt om?

1254
01:13:22.450 --> 01:13:32.390
Ja, anders dan, het is geen static site generator, het is ook geen, het is een soort van static site generator, maar ook een server-rendered framework.

1255
01:13:32.390 --> 01:13:40.910
Dus het zorgt eigenlijk voor dat jij als developer de trade-offs kan kiezen die handig zijn voor de pagina die je aan het bouwen bent.

1256
01:13:41.610 --> 01:13:42.710
Ja, ik vind dat...

1257
01:13:42.710 --> 01:13:57.310
Ik zou nog niet zeggen van oké, we gaan, zeg maar, we kiezen er nu voor om alles static te doen. En over twee jaar kan het zijn dat je applicatie zo gegroeid is of zo'n andere requirements heeft.

1258
01:13:57.310 --> 01:14:08.530
Dus stel je gaat A-B testing doen of andere dingen, user personalisation is een andere groting. Zorg er dat elke gebruiker een ander soort resultaat ziet.

1259
01:14:09.490 --> 01:14:13.450
Dat kun je dan doen door gewoon te zeggen oké, ik ga van static generation naar server-rendering.

1260
01:14:13.750 --> 01:14:22.210
En dat is gewoon een functie aanpassen in plaats van oké, nu moeten we een nieuw framework uitkiezen en dan alles om gaan bouwen.

1261
01:14:23.610 --> 01:14:26.830
Waarschijnlijk heel veel geld kost, heel veel tijd en heel veel moeite.

1262
01:14:28.430 --> 01:14:39.790
En dat voorkom je dan eigenlijk door tot zeg maar oké, we bouwen hybrid application, dus een hybride applicatie die het allebei kan, zeg maar.

1263
01:14:40.390 --> 01:14:48.190
En de nadruk is natuurlijk op kan, want je hoeft dus niet te zeggen van oké, ik ga per se alles static doen of alles dynamic.

1264
01:14:48.190 --> 01:14:54.330
Of een van de twee, je kan ook zeggen ik ga gewoon een hele applicatie server-rendered maken of een hele applicatie static generated.

1265
01:14:55.550 --> 01:14:59.130
Ja, al die keuzes dat maakt denk ik echt uniek Next.js.

1266
01:14:59.370 --> 01:15:04.530
Want bijvoorbeeld naar de commerce case toe die ik in het begin een beetje noemde al.

1267
01:15:04.770 --> 01:15:11.190
Ik bedoel als je dan kijkt naar Gatsby, dat is natuurlijk leuk als je maar een beperkt aantal pagina's hebt die je tijdstatisch kan genereren.

1268
01:15:12.050 --> 01:15:16.590
Maar op het moment dat je echt veel producten krijgt, dan kan je dat natuurlijk niet allemaal meer build time doen.

1269
01:15:17.110 --> 01:15:23.870
En met Next.js heb je dan de keus om dat of server-side te doen of statisch of incrementeel statisch?

1270
01:15:25.310 --> 01:15:33.410
Ja, dus wat je eigenlijk kan doen is dan zeggen van oké, ik ga de belangrijkste pagina statisch genereren.

1271
01:15:34.050 --> 01:15:37.930
En de rest van de pagina's ga ik dynamisch renderen en dan ook cache, zeg maar.

1272
01:15:37.930 --> 01:15:48.150
Dus zeggen van oké, ik heb zoveel pagina's die gewoon zeg maar, ik heb tienduizenden pagina's.

1273
01:15:48.270 --> 01:15:53.650
En niet alles hoeft statisch genereerd te worden. Maar het is wel handig als ze allemaal gecached worden.

1274
01:15:53.770 --> 01:15:56.690
Als de eerste request binnenkomt dan cacheen we ze bijvoorbeeld.

1275
01:15:57.770 --> 01:15:59.270
En dat kun je dus ook doen met Next.

1276
01:15:59.450 --> 01:16:05.830
Waardoor je duidelijk zegt van oké, we hebben een server-side rendered backend met caching laag ervoor, zeg maar.

1277
01:16:05.830 --> 01:16:09.310
Oh zo, ja. Oké, cool.

1278
01:16:11.250 --> 01:16:14.470
Nou, dat ben ik vergeten. Ik had een vraag, want jij had het er altijd over.

1279
01:16:14.610 --> 01:16:19.730
Oh ja, dat incrementeel updaten. Daar heb je mij, Joost, heb je mij een keer uitgelegd.

1280
01:16:21.010 --> 01:16:22.970
Incremental Static Regeneration, toch Tims?

1281
01:16:23.170 --> 01:16:29.910
Ja, dat. Wat is dat? Dat vinden luisteraars denk ik wel interessant om te horen.

1282
01:16:30.710 --> 01:16:31.710
Maar hoe werkt dat?

1283
01:16:32.430 --> 01:16:37.210
Ja, dit is ongeveer wat ik net verteld heb.

1284
01:16:37.950 --> 01:16:41.790
Dus je kan zeggen, het is eigenlijk dat stukje.

1285
01:16:42.010 --> 01:16:45.110
Dus het zeggen van oké, ik ga een paar pagina's statisch genereren.

1286
01:16:45.290 --> 01:16:46.750
Als helemaal geen pagina's statisch genereren.

1287
01:16:47.470 --> 01:16:50.190
Maar ik weet dat deze pagina's gecached kunnen worden.

1288
01:16:50.790 --> 01:16:53.490
Ze hebben geen user-specific data.

1289
01:16:55.030 --> 01:16:58.490
En dat kunnen we garanderen doordat je Catastatic Props gebruikt.

1290
01:16:58.490 --> 01:17:02.610
Wat dus minder toegang heeft tot bijvoorbeeld de request en response.

1291
01:17:02.830 --> 01:17:04.150
Krijg je daar niet mee en dat soort dingen.

1292
01:17:05.210 --> 01:17:13.150
En daardoor kun je eigenlijk zeggen van oké, deze pagina kan statisch genererend worden tijdens de request.

1293
01:17:13.450 --> 01:17:18.950
Dus als jij een request doet naar de pagina, dan wordt die gegenererd en daarna gecached.

1294
01:17:20.150 --> 01:17:24.070
En dan requests die daarna komen, die gaan dan in de achtergrond.

1295
01:17:24.070 --> 01:17:27.830
Dus buiten jouw request om, gaat die ook hergenereren.

1296
01:17:29.170 --> 01:17:38.070
En wat dat eigenlijk verzorgt is dat je een hele simpele API hebt als eindgebruiker.

1297
01:17:38.730 --> 01:17:42.510
Dus als de programmeur die een next step aan het bouwen is.

1298
01:17:42.850 --> 01:17:48.270
Waar je eigenlijk zegt van oké, deze pagina moet elke 5 seconden gehergeneerd worden.

1299
01:17:49.490 --> 01:17:51.950
Met zo'n request binnenkomen enzovoort.

1300
01:17:54.070 --> 01:17:56.590
En dan doet die dat ook automatisch.

1301
01:17:56.690 --> 01:18:03.150
Dus dan hoef je daar niet over na te denken van oké, stel je hebt een CMS bijvoorbeeld.

1302
01:18:03.530 --> 01:18:06.310
En je hebt mensen die in de CMS aanpassingen maken.

1303
01:18:08.210 --> 01:18:13.930
Dan hoef je niet te zeggen van oké, ik sla het op en dan moet ik een next build draaien bijvoorbeeld.

1304
01:18:13.930 --> 01:18:14.670
Ja precies.

1305
01:18:15.330 --> 01:18:17.770
Wat meestal niet het beste idee is.

1306
01:18:17.790 --> 01:18:27.370
Omdat je dan ook heel veel caches weggooit van data en JavaScript die gegeneerd is en dat soort dingen.

1307
01:18:29.290 --> 01:18:30.550
Ja oké, dat snap ik wel.

1308
01:18:30.870 --> 01:18:36.350
Maar dit is wel een feature die wel erg vast zit aan de CDN waar je op zit.

1309
01:18:36.610 --> 01:18:40.350
Dus je moet wel die Stale Revalidate functionaliteit hebben.

1310
01:18:40.350 --> 01:18:43.750
Dus bijvoorbeeld dit, dan kun je het ook prima op FirstSale doen.

1311
01:18:44.210 --> 01:18:49.370
Maar als je dan NetRefi wil, dan kun je deze even niet gebruiken.

1312
01:18:50.050 --> 01:18:55.170
Het zit zeg maar zo dat je dus als je een CDN hebt, de meeste CDN's ondersteunen Stale Revalidate ook.

1313
01:18:55.670 --> 01:19:04.430
Dus CloudFront en Festly, CloudFlare ook bijvoorbeeld.

1314
01:19:06.030 --> 01:19:07.490
Die supporten dat allemaal.

1315
01:19:08.630 --> 01:19:14.610
NetRefi is een ander verhaal omdat die niet echt, die zijn meer gefocust op statische hosting.

1316
01:19:14.990 --> 01:19:17.890
Dus die gebruiken meestal NextExport.

1317
01:19:18.530 --> 01:19:21.690
En NextExport die genereta ex statische HTML.

1318
01:19:21.810 --> 01:19:24.390
En dat is dan ook het enige wat je kan hosten zeg maar.

1319
01:19:24.670 --> 01:19:29.770
Ik heb toevallig een uitbreiding gebouwd voor ze op hun plugin voor Next.js.

1320
01:19:29.890 --> 01:19:32.730
Dus om dit te doen, die statische site generation.

1321
01:19:33.470 --> 01:19:36.490
Maar omdat ze die capability niet hebben voor Stale Revalidate.

1322
01:19:36.490 --> 01:19:39.130
Kunnen ze net het laatste stapje niet maken.

1323
01:19:40.030 --> 01:19:46.650
Ja precies. Dus omdat ze dus geen, zeg maar niet die andere CDN's gebruiken bijvoorbeeld.

1324
01:19:47.330 --> 01:19:51.210
Of Vercell CDN heeft ook support voor Stale Revalidate.

1325
01:19:51.930 --> 01:19:54.790
Kan het dan niet werken op die manier zeg maar.

1326
01:19:56.530 --> 01:19:58.390
Tegenover wat je bijvoorbeeld bij Vercell hebt.

1327
01:19:59.070 --> 01:20:00.850
Waar we het nog niet over hebben gehad overigens.

1328
01:20:00.850 --> 01:20:07.850
Vercell is eigenlijk een bedrijf achter Next en verschillende andere open source projecten.

1329
01:20:09.070 --> 01:20:11.130
En Vercell is een hosting platform.

1330
01:20:11.910 --> 01:20:16.170
Een cloud platform voor eigenlijk een workflow.

1331
01:20:16.630 --> 01:20:17.910
Die heet Develop Preview Ship.

1332
01:20:19.790 --> 01:20:22.350
En het begint eigenlijk bij het developpen van je applicatie.

1333
01:20:22.590 --> 01:20:25.850
Dus je bouwt een Next applicatie of een Gatsby applicatie.

1334
01:20:27.290 --> 01:20:29.730
Of een van de andere static generators.

1335
01:20:29.730 --> 01:20:35.690
Dus Ugo of Eleventy of Angular of Create React App.

1336
01:20:35.930 --> 01:20:36.410
Wat dan ook.

1337
01:20:38.350 --> 01:20:42.230
En dan geef je eigenlijk ons een GitHub repository.

1338
01:20:43.370 --> 01:20:46.770
En met de GitHub repository detecteren wij dan oké.

1339
01:20:46.850 --> 01:20:49.570
Dit is de applicatie die je hebt draaien in die repository.

1340
01:20:49.930 --> 01:20:51.650
Dus je zegt van oké.

1341
01:20:51.650 --> 01:20:54.150
Je hoeft niet eens te zeggen van oké ik heb een Angular applicatie.

1342
01:20:54.230 --> 01:20:57.590
We zeggen gewoon van oké je hebt een Angular applicatie waarschijnlijk.

1343
01:20:57.590 --> 01:21:00.170
Als het niet zo is dan kun je het aanpassen.

1344
01:21:01.110 --> 01:21:03.570
Maar dit zijn de settings die je wil hebben.

1345
01:21:04.810 --> 01:21:07.790
En dan gaat hij dus automatisch met zero configuration.

1346
01:21:08.330 --> 01:21:10.450
Kun je dan deployments krijgen.

1347
01:21:10.590 --> 01:21:14.530
En deployments zijn eigenlijk losse unieke URLs.

1348
01:21:15.410 --> 01:21:16.910
Voor elke commit die je doet.

1349
01:21:17.490 --> 01:21:18.650
Inclusief pull requests.

1350
01:21:18.870 --> 01:21:23.970
Dus als je een pull request maakt dan krijg je automatisch een URL.

1351
01:21:23.990 --> 01:21:26.150
Waarmee dat je dus die wijzingen kan zien.

1352
01:21:27.010 --> 01:21:29.410
Dat is voor de preview.

1353
01:21:29.410 --> 01:21:31.730
De preview stop van de develop preview ship.

1354
01:21:32.690 --> 01:21:35.890
En dan het laatste stukje is natuurlijk hoe gaan we dit in productie krijgen.

1355
01:21:36.650 --> 01:21:40.630
En dat kun je dus ook met voorstel doen door dan te merge naar de main branch.

1356
01:21:43.150 --> 01:21:46.030
En dan krijg je eigenlijk een productiedeployment.

1357
01:21:47.470 --> 01:21:50.690
Die dan gelinkt wordt aan je domain dat je al hebt.

1358
01:21:51.670 --> 01:21:55.330
Dat is eigenlijk de develop preview ship methodologie.

1359
01:21:58.350 --> 01:22:00.810
En dat werkt heel mooi samen met Next.

1360
01:22:00.970 --> 01:22:04.370
Omdat je dus met Next heel makkelijk wijzingen kan maken in je applicatie.

1361
01:22:05.190 --> 01:22:07.190
In je front-end zeg maar.

1362
01:22:08.290 --> 01:22:11.250
En dat dan ook meteen kan deployen naar het platform.

1363
01:22:12.150 --> 01:22:18.190
En dat is zeg maar een vercel platform is geïntegreerd met Next.

1364
01:22:19.570 --> 01:22:25.310
Dus eigenlijk alle features die je in Next hebt werken uit de box automatisch op het vercel platform.

1365
01:22:25.990 --> 01:22:28.190
Omdat ze die dus allebei bouwen.

1366
01:22:28.350 --> 01:22:33.110
Dus ze bouwen en het vercel platform en Next.

1367
01:22:34.990 --> 01:22:36.590
Jullie doen volgens mij ook wel iets.

1368
01:22:37.610 --> 01:22:39.290
Mijn ervaring is alleen voor onze website.

1369
01:22:39.550 --> 01:22:42.530
Dus ik ben echt geen enorme ervaringdeskundige.

1370
01:22:43.250 --> 01:22:44.610
Er zit wel magie achter.

1371
01:22:45.090 --> 01:22:46.950
Maar volgens mij doe je ook als er een commit is.

1372
01:22:47.410 --> 01:22:50.170
Het is niet dat je alles altijd helemaal beeld of wel?

1373
01:22:50.370 --> 01:22:52.310
Of heb ik dat niet helemaal goed begrepen?

1374
01:22:52.310 --> 01:22:55.710
Dat je daar wat slimmigheid in doet.

1375
01:22:56.470 --> 01:23:00.710
Ja, we proberen natuurlijk zo slecht mogelijk te zijn in hoe dat dingen optimiseerd worden.

1376
01:23:01.390 --> 01:23:07.050
Een ding dat we doen is dat we voor alle frameworks die we ondersteunen automatisch de caching goed zetten.

1377
01:23:07.570 --> 01:23:10.370
Wat je normaal bijvoorbeeld als je zelf je CI instelt.

1378
01:23:11.030 --> 01:23:13.870
Dan moet je bijvoorbeeld uitzoeken waar staan de cache folders.

1379
01:23:14.870 --> 01:23:17.390
Bij Next is dat .next slash cache.

1380
01:23:18.410 --> 01:23:22.550
En dan moet je die opslaren ergens met die CI config.

1381
01:23:23.110 --> 01:23:24.070
En dan weer terug zetten.

1382
01:23:24.710 --> 01:23:28.170
En dan gaat je veel sneller naar de eerste keer.

1383
01:23:29.810 --> 01:23:31.550
En op voor zelf heb je dat niet te doen.

1384
01:23:31.590 --> 01:23:32.910
Dat gaat allemaal automatisch.

1385
01:23:34.490 --> 01:23:38.690
Daarnaast hebben we heel erg geoptimiseerd voor workloads van Next bijvoorbeeld.

1386
01:23:41.150 --> 01:23:45.370
En andere frameworks die we veel op ons platform hosten.

1387
01:23:47.490 --> 01:23:48.310
Oké, ja.

1388
01:23:48.470 --> 01:23:51.230
Ik was positief verrast.

1389
01:23:51.490 --> 01:23:56.510
Ik dacht, cool, dit werkt wel heel erg nice qua developer experience.

1390
01:23:59.910 --> 01:24:03.170
Heb jij nog vragen over Next 10, Joost?

1391
01:24:04.570 --> 01:24:06.110
Next 10 en commerce.

1392
01:24:06.410 --> 01:24:06.910
Dat heb ik wel benieuwd.

1393
01:24:09.730 --> 01:24:14.290
Ja, tijdens de keynote over Next is 10.

1394
01:24:14.290 --> 01:24:19.290
Dus in Next 10 hebben we eigenlijk nog twee dingen aangekondigd.

1395
01:24:20.150 --> 01:24:23.270
Eentje is internationalized routing.

1396
01:24:23.630 --> 01:24:27.790
Dat is dus het vertalen van goud.

1397
01:24:28.530 --> 01:24:33.190
En het hele afhandelen van oké, hoe kan ik mijn applicatie vertalen.

1398
01:24:33.830 --> 01:24:36.290
Wat heel belangrijk is in Europa natuurlijk.

1399
01:24:36.870 --> 01:24:39.030
Omdat we heel veel verschillende talen hebben.

1400
01:24:39.910 --> 01:24:43.030
In een relatief kleine...

1401
01:24:43.730 --> 01:24:45.110
Zeg maar, de grenzen zijn heel dichtbij.

1402
01:24:45.630 --> 01:24:46.210
Ja, klopt.

1403
01:24:46.310 --> 01:24:51.030
Veel bedrijven, zeker ook in Nederland, die gaan heel vaak naar het buitenland toe.

1404
01:24:51.330 --> 01:24:52.470
Om toch te groeien, zeg maar.

1405
01:24:52.570 --> 01:24:53.250
Zeker e-commerce.

1406
01:24:54.530 --> 01:24:56.190
En dat brengt ons natuurlijk bij e-commerce.

1407
01:24:56.470 --> 01:25:01.130
E-commerce is natuurlijk een hele grote markt op dit moment.

1408
01:25:01.810 --> 01:25:04.410
Waar je eigenlijk...

1409
01:25:04.410 --> 01:25:06.490
Wat we eigenlijk zagen was...

1410
01:25:06.490 --> 01:25:12.250
Er zijn heel veel bedrijven die e-commerce sites aan het bouwen zijn op Next.

1411
01:25:13.490 --> 01:25:17.050
Ze willen eigenlijk heel graag een soort startpunt.

1412
01:25:17.390 --> 01:25:19.850
Van oké, waar beginnen we als we het gaan bouwen?

1413
01:25:21.090 --> 01:25:22.930
En daar hebben we samen gewerkt met BigCommerce.

1414
01:25:23.550 --> 01:25:27.430
Dat is een SaaS provider voor e-commerce.

1415
01:25:29.590 --> 01:25:33.790
En daarmee hebben we samen eigenlijk een starterkit gemaakt.

1416
01:25:34.610 --> 01:25:36.250
Voor het bouwen van webshops.

1417
01:25:36.890 --> 01:25:40.590
Dus die automatisch integreert met BigCommerce.

1418
01:25:41.730 --> 01:25:44.270
Straks ook met andere providers.

1419
01:25:45.890 --> 01:25:51.670
En daar kun je eigenlijk heel makkelijk e-commerce sites mee bouwen.

1420
01:25:51.930 --> 01:25:55.170
Dus je hebt de ingebouwde componenten al.

1421
01:25:56.070 --> 01:25:59.350
Om productpagina's te maken, om homepages te maken, enzovoort.

1422
01:26:00.230 --> 01:26:03.630
En het fijne, of het handige met Next is natuurlijk ook...

1423
01:26:03.630 --> 01:26:08.230
Dat je nu door die hybrid approach, waar we het straks over hadden...

1424
01:26:09.710 --> 01:26:14.230
Hoef je niet meer te zeggen van oké, we gaan nu ook het CMS in BigCommerce doen.

1425
01:26:14.770 --> 01:26:18.310
Je kunt ook zeggen van oké, we gaan naar een andere CMS provider.

1426
01:26:19.170 --> 01:26:23.670
Die helemaal gespecialiseerd is op het bouwen van CMS's.

1427
01:26:23.670 --> 01:26:28.610
En het beheren van content en niet e-commerce producten.

1428
01:26:29.270 --> 01:26:31.470
En daar ga je dan je content neerzetten.

1429
01:26:31.610 --> 01:26:33.890
Omdat het makkelijker is voor de editors.

1430
01:26:34.790 --> 01:26:37.910
Om daarin te werken dan in de BigCommerce-medule bijvoorbeeld.

1431
01:26:39.110 --> 01:26:45.030
En daarom is het steeds vaker dat bedrijven in die headless approach gaan.

1432
01:26:45.150 --> 01:26:52.770
Waarin dat ze zeggen van oké, we gaan een applicatie bouwen die verschillende providers bij elkaar kan brengen.

1433
01:26:52.770 --> 01:26:55.410
Dus verschillende providers.

1434
01:26:55.810 --> 01:26:57.670
We hebben ook een e-commerce provider.

1435
01:26:58.310 --> 01:27:00.050
Dat kan ook een legacy applicatie zijn.

1436
01:27:00.150 --> 01:27:02.130
Dus bijvoorbeeld een Outer Magenta instance.

1437
01:27:04.210 --> 01:27:07.590
Of een custom-built achterkant.

1438
01:27:08.010 --> 01:27:15.750
En die brengen we samen met die NextJet applicatie in één grote applicatie.

1439
01:27:15.770 --> 01:27:18.310
Die je dan aan het bouwen bent op basis van Next.

1440
01:27:19.010 --> 01:27:20.110
Voor de front-end.

1441
01:27:20.190 --> 01:27:22.270
Dus de front-end is dan helemaal gebouwd in Next.

1442
01:27:22.270 --> 01:27:27.610
Maar de achterkant is dan nog steeds of die legacy applicatie of een nieuwe applicatie.

1443
01:27:28.690 --> 01:27:32.270
Of een cloud provider zoals een CMS bijvoorbeeld.

1444
01:27:34.970 --> 01:27:35.610
Oké.

1445
01:27:35.710 --> 01:27:39.290
Mag je jou iets zeggen over wat andere providers gaan worden voor commerce?

1446
01:27:40.890 --> 01:27:41.630
Weet ik niet zeker.

1447
01:27:45.410 --> 01:27:50.490
De meeste cloud providers die in de e-commerce space zitten.

1448
01:27:50.490 --> 01:27:55.930
Die zijn geïnteresseerd in dit project.

1449
01:27:58.030 --> 01:27:59.590
Ik weet niet hoeveel ik erover kan zeggen.

1450
01:28:00.050 --> 01:28:00.610
Nee, nee.

1451
01:28:01.230 --> 01:28:02.390
Dat moet je vooral niet doen.

1452
01:28:02.610 --> 01:28:03.130
Nee, nee, nee.

1453
01:28:03.310 --> 01:28:03.610
Dat moet je niet doen.

1454
01:28:05.770 --> 01:28:07.790
Maar er zijn wel feature requests.

1455
01:28:08.790 --> 01:28:12.750
En als je naar giddap.com slash for sale slash commerce gaat.

1456
01:28:12.890 --> 01:28:14.910
Dan kun je ook zien wat de feature requests zijn.

1457
01:28:14.990 --> 01:28:16.210
De pull requests enzovoort.

1458
01:28:17.170 --> 01:28:18.030
Het is helemaal open source.

1459
01:28:18.030 --> 01:28:24.430
Dus daar kun je ook feature requests indienen als je een bepaalde provider zou willen zien.

1460
01:28:24.930 --> 01:28:26.670
Je hebt zelf iets gebouwd met commerce tools.

1461
01:28:26.850 --> 01:28:30.830
Eigenlijk in een beetje hetzelfde trend als Lexus, commerce en big commerce.

1462
01:28:32.410 --> 01:28:33.090
Dat is heel interessant.

1463
01:28:34.770 --> 01:28:35.410
Ja, cool, cool.

1464
01:28:35.430 --> 01:28:37.110
Ja, we zien ook heel veel.

1465
01:28:37.850 --> 01:28:41.030
Zeker voordat we commerce dus aangekondigd hadden.

1466
01:28:42.430 --> 01:28:45.570
Hebben we ook gewoon heel veel e-commerce platforms gezien.

1467
01:28:45.610 --> 01:28:47.270
Die gewoon zelf gebouwd zijn, zeg maar.

1468
01:28:47.270 --> 01:28:51.390
Dus hele grote namen in Amerika, zelfs in Nederland trouwens.

1469
01:28:52.770 --> 01:28:57.490
Die dus next gebruiken voor de frontends van een applicatie.

1470
01:28:59.750 --> 01:29:02.850
Maar is Nederland, ja dat is misschien, nou goed.

1471
01:29:03.110 --> 01:29:07.330
Is Nederland niet een beetje een bijzondere, die idee heb ik altijd met e-commerce.

1472
01:29:07.490 --> 01:29:14.130
Omdat wij best wel, hoe zeg je dat, heel goede payment hebben door Ideal.

1473
01:29:14.130 --> 01:29:18.730
Blijkbaar is het zeg maar, de kosten van transacties liggen heel erg laag.

1474
01:29:18.850 --> 01:29:21.930
En e-commerce is volgens mij enorm hard gegroeid in Nederland.

1475
01:29:22.090 --> 01:29:25.150
En harder dan in de rest van Europa, lijkt het zeg maar.

1476
01:29:25.310 --> 01:29:27.030
Ik weet niet of je iets mee hebt gekregen.

1477
01:29:27.130 --> 01:29:29.450
Ik weet niet precies de data erover.

1478
01:29:30.310 --> 01:29:33.650
Ik weet wel dat het steeds makkelijker wordt om te betalen.

1479
01:29:33.990 --> 01:29:37.110
Zeker met dingen als Apple Pay, dat je nu ook in Amerika hebt.

1480
01:29:38.370 --> 01:29:41.150
Dat is nog makkelijker dan Ideal, zeg maar.

1481
01:29:41.570 --> 01:29:42.490
Ja, dat is waar.

1482
01:29:42.490 --> 01:29:46.110
Dat je alleen maar je gezicht nog voor je iPhone heeft te houden.

1483
01:29:46.230 --> 01:29:47.690
En dat het dan gewoon werkt, zeg maar.

1484
01:29:48.350 --> 01:29:49.690
En dan ben je al klaar met betalen.

1485
01:29:53.090 --> 01:29:56.930
De e-commerce space in Nederland is niet super groot, natuurlijk.

1486
01:29:56.990 --> 01:29:59.490
Je hebt niet heel veel verschillende spelers.

1487
01:30:00.870 --> 01:30:05.650
Vooral heel veel, zeg maar, de distributie van spelers.

1488
01:30:05.910 --> 01:30:08.750
Zeker in, zeg maar, de categorieën.

1489
01:30:08.750 --> 01:30:12.250
Als in, zeg maar, Bobcom bijvoorbeeld is steeds meer een platform aan het worden.

1490
01:30:13.970 --> 01:30:18.230
Dus die trekken eigenlijk data van kleinere webshops samen.

1491
01:30:19.210 --> 01:30:22.050
En dan is het eigenlijk een soort marktplaats.

1492
01:30:22.310 --> 01:30:24.750
Alleen dan met een soort...

1493
01:30:25.470 --> 01:30:28.710
Ja, dat je het gewoon kan zien als een soort marktplaats voor spullen.

1494
01:30:29.450 --> 01:30:31.570
Die andere echte bedrijven.

1495
01:30:31.730 --> 01:30:34.790
Dus niet mensen die gewoon zeggen van oké, ik ga mijn boeken verkopen ofzo.

1496
01:30:34.790 --> 01:30:45.090
Maar gewoon bedrijven die dus hun producten willen verkopen op Bobcom, die daar dan verkopen.

1497
01:30:45.510 --> 01:30:50.210
Dan heb je natuurlijk andere spelers zoals Coolblue die zeggen van oké, we gaan alles zelf doen.

1498
01:30:51.510 --> 01:30:53.250
We hebben een heel groot magazijn staan.

1499
01:30:53.810 --> 01:30:55.250
Meerdere zelfs.

1500
01:30:56.370 --> 01:30:57.870
En daar vandaan wordt alles geleverd.

1501
01:30:58.110 --> 01:30:59.090
Ze hebben zelf bezorgers.

1502
01:30:59.150 --> 01:31:01.830
Ze hebben schijnbaar meer dan duizend, heb ik laatst gehoord.

1503
01:31:04.470 --> 01:31:09.310
En bijvoorbeeld Blokker doet nu ook dat platform ding, wat Bobcom ook doet.

1504
01:31:10.250 --> 01:31:13.090
Waar ze dus gewoon daten van kleinere webshops samenbrengen.

1505
01:31:14.090 --> 01:31:15.270
Dus dat zie je steeds meer.

1506
01:31:15.570 --> 01:31:20.370
Dus kleinere spelers die hebben zelf wel een webshop, maar dan een hele kleine webshop.

1507
01:31:20.490 --> 01:31:23.830
En dan halen ze heel veel van hun omzet uit platformen.

1508
01:31:24.950 --> 01:31:26.490
Bobcom, Blokker, Ensvoort.

1509
01:31:27.770 --> 01:31:31.490
En wat je daarnaast ziet is dat je nog steeds heel veel...

1510
01:31:32.250 --> 01:31:36.290
Er zijn wel veel grote bedrijven die ook gewoon in Nederland zitten.

1511
01:31:37.310 --> 01:31:39.790
Maar bijvoorbeeld de multinational zijn of wat dan ook, zeg maar.

1512
01:31:39.970 --> 01:31:45.190
Dus die kunnen bijvoorbeeld ook hun sites laten bouwen in Nederland.

1513
01:31:46.310 --> 01:31:48.530
En dan door heel de wereld verspreiden, bijvoorbeeld.

1514
01:31:49.470 --> 01:31:53.350
Ook andersom natuurlijk Amerikaanse bedrijven die in Nederland komen.

1515
01:31:53.350 --> 01:31:54.150
Ja, tuurlijk.

1516
01:31:54.290 --> 01:31:57.270
Bedrijven uit Londen, Deliveroo bijvoorbeeld.

1517
01:31:57.430 --> 01:31:58.770
Dat is daar een voorbeeld van.

1518
01:31:59.090 --> 01:32:03.690
Het drijft ook op Next voor een webplatform.

1519
01:32:05.510 --> 01:32:10.270
En ja, je ziet zo redelijk veel...

1520
01:32:10.270 --> 01:32:12.150
Zeg maar, e-commerce ziet nog steeds heel veel groeien.

1521
01:32:12.450 --> 01:32:17.810
Heel veel nieuwe websites, heel veel redevelopment, redesigns enzovoort.

1522
01:32:18.850 --> 01:32:21.350
Dus dat is zeker nog een...

1523
01:32:21.350 --> 01:32:25.010
Als developer is daar zeker werking te vinden in de meeste gevallen.

1524
01:32:26.170 --> 01:32:29.710
En daarnaast zijn er natuurlijk ook nog altijd mensen die gewoon websites willen.

1525
01:32:30.230 --> 01:32:35.370
Websites als in de bakker op de hoek met een openingstijde enzovoort.

1526
01:32:37.270 --> 01:32:40.150
Die worden ook gebouwd op Next in sommige gevallen.

1527
01:32:41.290 --> 01:32:43.350
Tevallig had ik laatst...

1528
01:32:43.970 --> 01:32:49.610
We kunnen soms zien dat er nieuwe sites bij zijn gekomen door bepaalde webcrawlers

1529
01:32:49.610 --> 01:32:54.590
die weten hoe ze een bepaalde technologie moeten vinden.

1530
01:32:55.330 --> 01:33:02.370
Er kwam ook de website tegen van een bepaald winkelcentrum waar ik vlakbij woon.

1531
01:33:02.910 --> 01:33:04.570
Die ook op Next was gebouwd bijvoorbeeld.

1532
01:33:06.110 --> 01:33:08.270
Maar we zien het eigenlijk van kleine websites.

1533
01:33:09.270 --> 01:33:12.630
Dus het winkelcentrum dat vlakbij mij ligt.

1534
01:33:12.790 --> 01:33:15.410
Tot aan de rest van Nederland.

1535
01:33:15.410 --> 01:33:18.610
Volgens mij iWish en Pearl.

1536
01:33:21.930 --> 01:33:26.130
En nog dichterbij een site die iedereen wel kent.

1537
01:33:26.190 --> 01:33:29.290
Ondertussen Corona Dashboard van de Rijkse overheid.

1538
01:33:29.450 --> 01:33:31.010
Dat is ook op Next.

1539
01:33:31.990 --> 01:33:33.250
Dat is compleet open source.

1540
01:33:33.650 --> 01:33:36.970
Dus die kun je ook vinden op GitHub overigens.

1541
01:33:39.170 --> 01:33:41.010
Daar heb ik niet aan meegewerkt.

1542
01:33:42.230 --> 01:33:45.090
Dat draait alleen op code die ik geschreven heb.

1543
01:33:45.990 --> 01:33:46.810
Via Next.

1544
01:33:47.250 --> 01:33:48.270
Dat zal het grappig zijn om te zien.

1545
01:33:50.270 --> 01:33:54.490
Dus je ziet heel veel verschillende soorten applicaties.

1546
01:33:54.590 --> 01:33:55.930
Die gebouwd worden op Next.

1547
01:33:57.530 --> 01:33:58.990
Omdat je dus zo flexibel bent.

1548
01:33:59.110 --> 01:34:02.010
Je kunt zeggen van oké, ik ga nu de kleinste website bouwen.

1549
01:34:02.210 --> 01:34:03.150
Waar niemand op gaat kijken.

1550
01:34:04.050 --> 01:34:05.310
Mijn eigen website bijvoorbeeld.

1551
01:34:05.510 --> 01:34:06.470
Daar kijkt niemand op.

1552
01:34:08.770 --> 01:34:13.090
Tot aan de top 5 van de hele wereld.

1553
01:34:13.090 --> 01:34:15.670
Zoals QQ van Tencent.

1554
01:34:17.990 --> 01:34:20.230
Dat is ook wel waar de kracht ligt.

1555
01:34:20.450 --> 01:34:22.870
Want als je dus weet wie een next.js applicatie bouwt.

1556
01:34:23.110 --> 01:34:28.370
Dan kun je dus van die kleinere websites doorgroeien naar oké.

1557
01:34:28.390 --> 01:34:29.950
Ik ga iets grotere websites bouwen.

1558
01:34:30.270 --> 01:34:32.350
Het schaalt dus gewoon heel erg goed.

1559
01:34:33.270 --> 01:34:34.490
Maar dat is op zich wel knap.

1560
01:34:34.810 --> 01:34:37.070
Als je binnen vier jaar, dat is het eigenlijk.

1561
01:34:37.290 --> 01:34:39.770
Dat je dan toch bij de top 5 terechtkomt.

1562
01:34:40.710 --> 01:34:42.070
Dan gaat er iets goed.

1563
01:34:42.070 --> 01:34:43.350
Het lijkt mij.

1564
01:34:44.510 --> 01:34:47.070
Dus dat is wel mooi om te zien.

1565
01:34:48.850 --> 01:34:49.970
Wauw, man.

1566
01:34:50.270 --> 01:34:55.930
Ik moet zelf gaan zoeken of ik nog vragen heb die niet langs zijn gekomen.

1567
01:34:58.610 --> 01:34:59.750
Heb jij iets?

1568
01:34:59.830 --> 01:35:01.510
Ja, ik heb het altijd aangezet.

1569
01:35:02.470 --> 01:35:03.770
TypeScript of JavaScript.

1570
01:35:08.390 --> 01:35:12.170
We hebben het een hele tijd over gedaan om het om te zetten naar TypeScript.

1571
01:35:13.930 --> 01:35:15.630
En dat hebben we incrementaal gedaan.

1572
01:35:17.030 --> 01:35:21.470
Incremental adoption is een ding waar ik best wel gepassioneerd over ben.

1573
01:35:22.690 --> 01:35:24.350
Daarom zijn er ook heel veel features van Next.

1574
01:35:24.810 --> 01:35:26.750
Niet zo van oké, je moet het nu gaan gebruiken.

1575
01:35:26.910 --> 01:35:30.390
Het is meer van hier is het en ga het gebruiken.

1576
01:35:30.390 --> 01:35:34.610
Kan het zijn dat we het deprecaten, maar de kans is niet heel groot.

1577
01:35:36.410 --> 01:35:37.510
Van oudere features dan.

1578
01:35:37.670 --> 01:35:39.510
We vervangen dan features.

1579
01:35:39.730 --> 01:35:40.990
Bijvoorbeeld get initial props.

1580
01:35:41.550 --> 01:35:43.470
Can you get server-side props, get static props.

1581
01:35:45.530 --> 01:35:49.310
En de reden dat we dat doen is dat we die upgradability willen houden.

1582
01:35:50.850 --> 01:35:52.990
En TypeScript is een heel goed voorbeeld daarvan.

1583
01:35:53.530 --> 01:35:57.210
Je kunt zeggen, ik ga TypeScript gebruiken.

1584
01:35:57.210 --> 01:36:00.730
En dat betekent niet dat je je applicatie niet eens moet ombouwen in TypeScript.

1585
01:36:01.010 --> 01:36:01.930
Er zijn mensen die dat doen.

1586
01:36:02.230 --> 01:36:05.410
Kan in sommige gevallen, in veel gevallen ook niet.

1587
01:36:05.910 --> 01:36:10.670
Voor Next zou dat betekenen dat we maandenlang, of niet maandenlang,

1588
01:36:10.810 --> 01:36:17.130
maar dat we een halve maand bezig zouden moeten zijn met het omzetten van alle JavaScript-files naar TypeScript-files.

1589
01:36:17.750 --> 01:36:21.570
En dat is niet heel logisch als je een startup bent.

1590
01:36:21.750 --> 01:36:24.770
Met heel weinig mensen als in resources.

1591
01:36:26.310 --> 01:36:31.710
Dus wat het deden was, we hadden het eigenlijk zo gedaan dat we gewoon met één bestand begonnen zijn

1592
01:36:31.710 --> 01:36:35.830
en één voor één, elke keer als we aan een bestand werken, zetten we het om naar TypeScript.

1593
01:36:38.290 --> 01:36:42.770
En op die manier ben je dus niet resources aan het weggooien,

1594
01:36:45.090 --> 01:36:49.350
doordat je gewoon elke keer net iets anders, zeg maar, omzet.

1595
01:36:51.010 --> 01:36:54.350
Dus elke keer als je een pull request maakt, verander je een verhaal naar TypeScript.

1596
01:36:56.210 --> 01:36:58.030
Conturbius hoefde dat natuurlijk niet te doen,

1597
01:36:59.310 --> 01:37:01.050
maar wij interne deden dat wel.

1598
01:37:01.730 --> 01:37:04.430
En daardoor heeft het iets langer geduurd,

1599
01:37:04.990 --> 01:37:10.390
maar hebben we er zelf geen last van gehad in hoeveel features we aan het bouwen zijn enzovoort.

1600
01:37:11.610 --> 01:37:14.590
Of waren in dat geval. Nu is alles TypeScript.

1601
01:37:15.750 --> 01:37:19.150
Ja, 99% TypeScript.

1602
01:37:20.450 --> 01:37:23.150
Als je naar de repository statistics kijkt, die kloppen niet helemaal,

1603
01:37:23.270 --> 01:37:27.270
omdat de examples in JavaScript zijn, by design.

1604
01:37:28.370 --> 01:37:30.650
Maar de core is in TypeScript.

1605
01:37:34.430 --> 01:37:38.590
Het interessante met TypeScript is dat je in een bepaalde manier,

1606
01:37:40.070 --> 01:37:43.050
omdat je types hebt, moet je nadenken over

1607
01:37:43.050 --> 01:37:48.410
hoe dat bepaalde function calls gaan en bepaalde flows in de applicatie.

1608
01:37:48.530 --> 01:37:51.350
Die kun je niet maken met TypeScript per se.

1609
01:37:51.530 --> 01:37:54.210
Het kan wel door any te gebruiken en andere dingen te doen,

1610
01:37:54.970 --> 01:37:57.490
maar het is niet zo handig als het kan zijn.

1611
01:37:58.430 --> 01:38:03.890
Daardoor word je heel erg gedwongen om iets meer functional programming te doen,

1612
01:38:05.050 --> 01:38:07.830
wat geen slecht ding is, zeker niet in een framework zoals Next.

1613
01:38:09.610 --> 01:38:14.310
En daardoor kun je ook bijvoorbeeld bugs vinden of sneller refactoring,

1614
01:38:14.450 --> 01:38:20.710
omdat je dan zegt van oké, ik wil een referentie veranderen in elk bestand

1615
01:38:20.710 --> 01:38:24.990
tot deze functie aanwoordt, bijvoorbeeld.

1616
01:38:26.810 --> 01:38:31.510
Maar ook bijvoorbeeld als je iets wilt refactoring en je wilt die argumenten aanpassen.

1617
01:38:32.270 --> 01:38:36.590
Stel dat je een argument weghaalt ergens, of een object een key weghaalt,

1618
01:38:36.590 --> 01:38:42.590
dan krijg je warnings van de rest van de applicatie van oké,

1619
01:38:43.470 --> 01:38:45.990
die property bestaat niet meer en je bent hem hier aan het gebruiken.

1620
01:38:46.130 --> 01:38:47.990
Of die property bestaat niet meer, maar je zet hem hier.

1621
01:38:48.650 --> 01:38:53.210
Het is niet eens het gebruiken stuk, het is ook het zetten van die property op dat moment.

1622
01:38:54.010 --> 01:38:59.270
Daardoor kun je dus efficiënter werken, omdat je dus als je dingen wilt refactoring sneller klaar bent.

1623
01:39:00.870 --> 01:39:04.870
En als je nu front-end applicaties zou maken, Tim,

1624
01:39:05.030 --> 01:39:09.170
zou je dan ook altijd TypeScript kiezen, of zeg je daarna,

1625
01:39:09.430 --> 01:39:11.350
is JavaScript misschien ook wel een goede optie?

1626
01:39:11.490 --> 01:39:15.050
Want je ook zei over die examples, die zijn nu bij design in JavaScript.

1627
01:39:16.850 --> 01:39:17.750
Ja, het ligt er aan.

1628
01:39:18.170 --> 01:39:22.350
Als je helemaal van scratch aan begint, zou ik TypeScript wel gebruiken,

1629
01:39:22.350 --> 01:39:29.350
omdat je het ook kan, zeg maar, de type checks kun je ook ignoren in bepaalde stukken,

1630
01:39:31.010 --> 01:39:35.490
waardoor je kunt zeggen, oké, dit stukje is niet superbelangrijk voor nu in ieder geval,

1631
01:39:36.470 --> 01:39:37.350
laten we het later fixen.

1632
01:39:38.170 --> 01:39:39.770
Doe dat ook in de Next.js-codebase.

1633
01:39:39.990 --> 01:39:45.630
Dat is niet iets waarvan je moet denken, oké, ik laat alles vallen,

1634
01:39:45.790 --> 01:39:48.630
we gaan nu alleen maar types fixen, zeg maar, dat soort dingen.

1635
01:39:50.630 --> 01:39:55.990
Want uiteindelijk, die types zijn er niet om die checks altijd goed te laten gaan,

1636
01:39:56.510 --> 01:39:58.510
bijvoorbeeld, die types zijn er om jou te helpen,

1637
01:39:58.570 --> 01:40:03.230
beter te programmeren of spelletree factoren en dat soort dingen.

1638
01:40:05.290 --> 01:40:08.730
Dus ze zijn niet een blokker voor jou als developer,

1639
01:40:09.270 --> 01:40:11.170
ze zijn meer als een hulpder, natuurlijk.

1640
01:40:11.470 --> 01:40:14.010
Ja, ja, dat is denk ik ook wel de kracht van TypeScript,

1641
01:40:14.010 --> 01:40:19.290
dat is volgens mij, oh man, ik moet me schaamelijk niet even zo de maker,

1642
01:40:21.050 --> 01:40:23.210
want ik develop nu normaal gesproken in .net,

1643
01:40:23.330 --> 01:40:25.910
en hij heeft ook C-sharp, zeg maar, gemaakt en toen TypeScript.

1644
01:40:27.050 --> 01:40:30.170
Maar hij heeft toen altijd gezegd, oké, het is iets waar je in,

1645
01:40:31.170 --> 01:40:33.490
ja, hoe zeg je dat, je ease in, zeg maar,

1646
01:40:33.590 --> 01:40:36.330
dus je loopt er stap voor stap, kun je daar in gaan,

1647
01:40:36.370 --> 01:40:39.410
je hoeft niet in één keer big bang over te gaan,

1648
01:40:39.530 --> 01:40:41.250
dus dat is een optie, precies.

1649
01:40:41.370 --> 01:40:42.690
Dus dat is wel heel sterk.

1650
01:40:42.690 --> 01:40:49.210
Ja, en dat is ook hoe bijvoorbeeld binnen Microsoft TypeScript gebruikt wordt,

1651
01:40:49.270 --> 01:40:52.690
ze hebben het steeds een stukje meer geïmplementeerd,

1652
01:40:54.430 --> 01:41:00.590
en dat helpt dus ook gewoon als je als programmer bezig bent,

1653
01:41:01.110 --> 01:41:02.770
moet je niet erover nadenken van oké,

1654
01:41:02.790 --> 01:41:04.610
we gaan de hele applicatie in TypeScript schrijven,

1655
01:41:04.750 --> 01:41:07.550
het is meer van, kunnen we deze feature in TypeScript schrijven,

1656
01:41:07.690 --> 01:41:10.830
of kunnen we dit stuk van de code dat heel erg buggy is,

1657
01:41:11.850 --> 01:41:12.890
omzetten in TypeScript,

1658
01:41:12.950 --> 01:41:15.990
zodat we de input en output altijd hetzelfde houden,

1659
01:41:16.970 --> 01:41:19.710
en daardoor niet de rest van de applicatie crashen en dat soort dingen.

1660
01:41:21.350 --> 01:41:22.150
Ja, precies.

1661
01:41:22.490 --> 01:41:23.570
Ja, ik vind dat wel,

1662
01:41:24.070 --> 01:41:25.470
het heeft me positief verrast zeg maar,

1663
01:41:25.590 --> 01:41:28.370
ook dat het zo goed opgepakt is,

1664
01:41:28.470 --> 01:41:30.270
want dat was vroeger natuurlijk altijd van oh, Microsoft,

1665
01:41:30.490 --> 01:41:32.110
nee, slecht, en dan moeten we niks mee doen,

1666
01:41:32.870 --> 01:41:35.830
maar dat is toch best wel populair gebleken.

1667
01:41:40.450 --> 01:41:47.750
Ja, ik denk dat we nu eigenlijk wel heel veel next besproken hebben,

1668
01:41:48.390 --> 01:41:49.190
zijn er nog wel,

1669
01:41:49.350 --> 01:41:52.110
nee, ik denk dat we verder moeten gaan,

1670
01:41:52.370 --> 01:41:54.830
laten we het laatste deel inleiden,

1671
01:41:56.890 --> 01:42:03.110
nog wat kletsen over wat losvast dingetjes.

1672
01:42:04.190 --> 01:42:06.410
Een onderwerp wat we altijd terug laten komen,

1673
01:42:06.550 --> 01:42:08.770
of een onderdeel, zijn de developer dilemmas.

1674
01:42:08.930 --> 01:42:11.490
Dat zijn gewoon dilemmas,

1675
01:42:11.770 --> 01:42:13.230
en je moet kiezen.

1676
01:42:13.450 --> 01:42:15.490
We hadden eerst gebruikt door de developer dilemmas site,

1677
01:42:15.530 --> 01:42:16.610
maar die hebben we een beetje uitgeput,

1678
01:42:16.730 --> 01:42:18.770
dus die gebruiken we nu niet meer,

1679
01:42:18.830 --> 01:42:21.730
dus nu verzinnen we zelf gewoon dilemmas.

1680
01:42:22.610 --> 01:42:26.150
Ik heb het geluk gehad dat mijn co-host,

1681
01:42:27.050 --> 01:42:28.430
of mijn andere host Bernard,

1682
01:42:28.450 --> 01:42:30.570
dat die er twee voor mij heeft verzonnen,

1683
01:42:30.570 --> 01:42:33.010
dus ik heb er gelukkig reden om te verzinnen.

1684
01:42:33.350 --> 01:42:34.510
Dus laten we gewoon beginnen.

1685
01:42:36.950 --> 01:42:39.570
De eerste is, je moet een feestdag afschaffen.

1686
01:42:40.610 --> 01:42:41.670
Eigenlijk is het niet eens dilemma,

1687
01:42:42.130 --> 01:42:43.430
dat is wel grappig.

1688
01:42:43.750 --> 01:42:44.670
Welke kies je?

1689
01:42:44.970 --> 01:42:48.750
Black Friday, Cyber Monday, Valentine's Day, Singles Day,

1690
01:42:48.890 --> 01:42:49.490
of Kerstmis?

1691
01:42:50.510 --> 01:42:52.570
Dit is echt wel...

1692
01:42:53.910 --> 01:42:55.570
Dat is eigenlijk best wel makkelijk,

1693
01:42:56.350 --> 01:42:57.690
want Black Friday en Cyber Monday

1694
01:42:57.690 --> 01:42:59.750
zijn eigenlijk al afgeschaft dit jaar volgens mij,

1695
01:42:59.750 --> 01:43:05.850
want ze zijn al weken van tevoren bezig met acties en zo.

1696
01:43:06.050 --> 01:43:09.390
Dus het is meer Cyber Monday of zo.

1697
01:43:09.990 --> 01:43:10.670
Ja, precies.

1698
01:43:10.770 --> 01:43:11.970
Het is echt niet normaal, ja.

1699
01:43:13.410 --> 01:43:15.070
Maar je wordt er ook niet rustiger van.

1700
01:43:15.210 --> 01:43:15.910
Je krijgt de hele tijd van,

1701
01:43:16.090 --> 01:43:18.470
oh, hier heb je nog een aanbieding, hier nog een aanbieding.

1702
01:43:18.630 --> 01:43:19.990
En je weet echt niet meer.

1703
01:43:20.830 --> 01:43:23.950
Het is niet meer zo speciaal of zo.

1704
01:43:24.290 --> 01:43:24.890
Hoe zeg je dat?

1705
01:43:25.150 --> 01:43:28.210
Het lijkt er ook op alsof bedrijven denken van,

1706
01:43:28.210 --> 01:43:28.890
weet je wat?

1707
01:43:29.150 --> 01:43:30.370
Als wij nu als eerste beginnen,

1708
01:43:30.550 --> 01:43:32.890
dan geven ze als eerste bij ons het geld uit.

1709
01:43:33.110 --> 01:43:35.310
En dan hebben we de boel binnen.

1710
01:43:36.570 --> 01:43:39.130
En dan heeft de concurrentie pech gehad.

1711
01:43:39.990 --> 01:43:43.130
Maar die singles was volgens mij in China ook bizar groot.

1712
01:43:43.450 --> 01:43:45.210
Of heftig, dat was wel...

1713
01:43:45.210 --> 01:43:49.270
Dat was volgens mij de beste dag voor Alibaba of zo.

1714
01:43:50.770 --> 01:43:53.270
Vorig jaar of zo was het echt niet normaal

1715
01:43:54.010 --> 01:43:55.670
qua inkomsten en dat soort dingen.

1716
01:43:58.130 --> 01:44:00.590
De volgende, dat is wel meer een keus.

1717
01:44:01.690 --> 01:44:04.490
Altijd jQuery of altijd COBOL?

1718
01:44:05.390 --> 01:44:06.930
En ik denk dat Bernard ook bedoelt

1719
01:44:06.930 --> 01:44:10.630
dat je mag ook kiezen uit Lisp, Haskell of Assembler.

1720
01:44:13.130 --> 01:44:13.710
JQuery.

1721
01:44:16.850 --> 01:44:20.290
Bij het bedrijf waar ik gewerkt heb,

1722
01:44:20.610 --> 01:44:23.090
hadden we een COBOL applicatie.

1723
01:44:23.090 --> 01:44:24.430
Die is nog steeds maintained.

1724
01:44:25.410 --> 01:44:26.690
Na dertig jaar.

1725
01:44:29.010 --> 01:44:29.450
Voor...

1726
01:44:29.450 --> 01:44:30.630
Ik ga de naam niet noemen.

1727
01:44:31.110 --> 01:44:31.770
Nee, precies.

1728
01:44:34.130 --> 01:44:39.370
Maar voor een heel groot bekende naam in Nederland.

1729
01:44:39.950 --> 01:44:41.010
Dus als ik die naam niet zou noemen,

1730
01:44:41.230 --> 01:44:43.130
dan zou je weten welke bedrijf dat is.

1731
01:44:43.930 --> 01:44:46.910
Je bent er waarschijnlijk als je kinderen hebt ooit geweest.

1732
01:44:47.190 --> 01:44:48.810
Maar dat is eigenlijk het enige wat ik kan hinten.

1733
01:44:50.510 --> 01:44:51.110
Oké.

1734
01:44:51.250 --> 01:44:51.850
Ja.

1735
01:44:53.270 --> 01:44:57.010
Hilarisch, hadden we een COBOL applicatie

1736
01:44:57.010 --> 01:44:58.710
in productie draaien

1737
01:44:58.710 --> 01:45:00.530
voor meer dan dertig jaar.

1738
01:45:01.850 --> 01:45:02.750
En nog steeds maintain.

1739
01:45:03.090 --> 01:45:04.250
Dus er was nog steeds iemand

1740
01:45:04.770 --> 01:45:07.810
die die applicatie geschreven had, die was nog steeds daarmee bezig.

1741
01:45:08.850 --> 01:45:11.050
En misschien nog steeds nu zelfs,

1742
01:45:11.050 --> 01:45:14.210
want ik heb het niet meer bijgehouden en zo.

1743
01:45:15.350 --> 01:45:15.830
Maar, ja.

1744
01:45:16.670 --> 01:45:17.670
Dat is ook wel iets moois.

1745
01:45:18.150 --> 01:45:20.370
Ik weet ook gewoon, iets moois hebben.

1746
01:45:21.430 --> 01:45:21.750
Ja.

1747
01:45:21.950 --> 01:45:25.190
Ja, het is wel gaaf dat je een systeem bouwt

1748
01:45:25.190 --> 01:45:29.490
dat zo stabiel is,

1749
01:45:29.810 --> 01:45:30.810
dat is eigenlijk wat het is,

1750
01:45:31.190 --> 01:45:33.790
dat je het gewoon dertig jaar lang kan laten draaien

1751
01:45:33.790 --> 01:45:37.530
zonder dat je een nieuw framework nodig hebt

1752
01:45:37.530 --> 01:45:38.970
om alles te hebben bouwen, zeg maar.

1753
01:45:40.510 --> 01:45:42.270
Ja, dat is natuurlijk aan de andere kant van het spectrum, zeg maar.

1754
01:45:43.030 --> 01:45:44.150
Nu is dat wel minder.

1755
01:45:45.090 --> 01:45:47.210
Maar in JavaScript was het op een gegeven moment,

1756
01:45:47.710 --> 01:45:49.890
iedere week had je wel een nieuwe framework

1757
01:45:49.890 --> 01:45:51.370
of een library of weet ik wat.

1758
01:45:52.610 --> 01:45:53.990
Ja, dat is natuurlijk wel compleet anders

1759
01:45:53.990 --> 01:45:54.810
dan hoe het met COBOL is.

1760
01:45:55.030 --> 01:45:57.430
COBOL staat in principe gewoon stil.

1761
01:45:58.630 --> 01:46:00.990
Ja, dat zijn volgens mij wel wat dingetjes.

1762
01:46:01.550 --> 01:46:03.150
XML, internet, ja.

1763
01:46:03.810 --> 01:46:05.210
Ja, het is ook als je...

1764
01:46:05.210 --> 01:46:08.330
Ik was vorig jaar bij de Computer History Museum geweest

1765
01:46:08.790 --> 01:46:09.910
in Mountain View.

1766
01:46:10.790 --> 01:46:13.670
En daar hadden ze een soort plaats hangen aan de muur.

1767
01:46:13.670 --> 01:46:15.650
Met alle programeertalen

1768
01:46:15.650 --> 01:46:18.490
en wanneer dat ze bedacht zijn, zeg maar,

1769
01:46:19.110 --> 01:46:21.150
en publiek gemaakt zijn enzovoort.

1770
01:46:21.710 --> 01:46:23.670
En COBOL wordt ook echt een van de eerste

1771
01:46:25.110 --> 01:46:26.970
programeertalen die daarbij stond, zeg maar.

1772
01:46:27.170 --> 01:46:28.790
Dus dat is wel grappig om te zien.

1773
01:46:29.370 --> 01:46:29.690
Ja, ja.

1774
01:46:30.830 --> 01:46:33.030
Ja, dat is wel...

1775
01:46:33.030 --> 01:46:33.630
Dat wordt nog steeds.

1776
01:46:33.690 --> 01:46:35.990
Volgens mij is de vraag naar COBOL ontwikkelaar.

1777
01:46:36.090 --> 01:46:36.630
Dat was op een gegeven moment,

1778
01:46:36.630 --> 01:46:37.850
ik weet niet of het nu nog steeds is.

1779
01:46:38.010 --> 01:46:39.390
Die was in één keer zo hoog

1780
01:46:39.390 --> 01:46:41.610
dat heel veel mensen met pensioen gingen.

1781
01:46:41.610 --> 01:46:43.790
En je werd gewoon heel goed betaald, zeg maar,

1782
01:46:43.890 --> 01:46:44.690
als je dat kon.

1783
01:46:44.910 --> 01:46:49.010
Dus er is nog wel wat in te verdienen.

1784
01:46:51.050 --> 01:46:52.930
Volgens mij de volgende vraag die daar staat,

1785
01:46:53.370 --> 01:46:54.450
die heb jij meegenomen, Joost.

1786
01:46:55.250 --> 01:46:57.590
Ja, ik heb de vrijheid genomen

1787
01:46:57.590 --> 01:46:58.870
om daar iets toe te voegen, Saber.

1788
01:46:59.310 --> 01:47:00.710
Ja, het is niet echt een dilemma.

1789
01:47:00.990 --> 01:47:01.510
Toch, of wel?

1790
01:47:01.790 --> 01:47:02.990
Van sommige mensen wel.

1791
01:47:04.210 --> 01:47:04.970
Ja, nou.

1792
01:47:06.170 --> 01:47:08.290
Theowind of SCSS?

1793
01:47:11.010 --> 01:47:11.810
Theowind.

1794
01:47:14.270 --> 01:47:18.350
En dat zeg ik niet omdat ik goede vrienden ben met Adam,

1795
01:47:19.010 --> 01:47:20.330
de creator van Theowind.

1796
01:47:22.150 --> 01:47:25.450
Maar het hele idee van Theowind

1797
01:47:27.010 --> 01:47:29.770
is om SCSS schaalbaar te maken.

1798
01:47:30.370 --> 01:47:31.490
Schaalbaar als in scalable.

1799
01:47:33.450 --> 01:47:36.210
En dat heb ik zo goed zien werken

1800
01:47:36.210 --> 01:47:40.970
in grote applicaties de afgelopen tijd met Theowind.

1801
01:47:42.290 --> 01:47:45.170
Dat ik al overtuigd ben dat het een goede keuze is

1802
01:47:48.590 --> 01:47:54.030
voor applicaties die je bouwt in je dagelijkse leven, zeg maar.

1803
01:47:54.970 --> 01:47:56.350
Dus e-commerce enzovoort.

1804
01:47:56.490 --> 01:47:59.010
Zeg maar, dingen waar je components bouwt

1805
01:47:59.010 --> 01:48:01.470
die hergebruikt gaan worden.

1806
01:48:01.930 --> 01:48:03.550
Wat dus in de meeste gevallen

1807
01:48:03.550 --> 01:48:06.010
vrijwel elke applicaties die je bouwt

1808
01:48:06.790 --> 01:48:10.850
of hergebruikt gaan worden binnen andere applicaties.

1809
01:48:11.430 --> 01:48:13.050
Dus een probleem met je bijvoorbeeld,

1810
01:48:13.050 --> 01:48:14.350
wat ik bij agencies heb gezien,

1811
01:48:14.510 --> 01:48:16.730
is dat ze voor elke klant

1812
01:48:16.730 --> 01:48:18.910
een nieuw componentsystem bouwden, bijvoorbeeld.

1813
01:48:19.790 --> 01:48:22.910
En dat was puur op designbasis.

1814
01:48:24.350 --> 01:48:25.650
Dus een compleet ander design,

1815
01:48:25.730 --> 01:48:27.930
want de klant wil niet dat het eruit ziet

1816
01:48:27.930 --> 01:48:29.790
als elke andere e-commerce site.

1817
01:48:31.510 --> 01:48:33.750
Maar het mooie aan Tailwind is

1818
01:48:33.750 --> 01:48:35.790
dat je door het aanpassen van

1819
01:48:36.430 --> 01:48:37.550
een paar parameters

1820
01:48:37.550 --> 01:48:40.010
eigenlijk kan zeggen van oké, de spacing is nu anders,

1821
01:48:40.850 --> 01:48:41.950
de kleuren zijn anders,

1822
01:48:42.090 --> 01:48:43.210
dus het thema eigenlijk,

1823
01:48:44.070 --> 01:48:45.570
de font sizes zijn anders.

1824
01:48:46.170 --> 01:48:48.670
En daardoor ziet een component

1825
01:48:48.670 --> 01:48:51.030
er niet hetzelfde uit

1826
01:48:51.030 --> 01:48:52.210
tussen de twee websites.

1827
01:48:52.370 --> 01:48:54.410
Ook al zijn het exact dezelfde components.

1828
01:48:56.630 --> 01:48:57.990
En daarnaast kun je dan ook nog

1829
01:48:57.990 --> 01:48:59.030
met klassen natuurlijk

1830
01:48:59.030 --> 01:49:00.950
een paar dingen aanpassen enzovoort.

1831
01:49:02.630 --> 01:49:06.090
Maar dat is wel interessant om te zien in ieder geval.

1832
01:49:06.990 --> 01:49:08.270
Ja, dat is wel...

1833
01:49:08.270 --> 01:49:09.190
Het is ook best wel hard.

1834
01:49:09.870 --> 01:49:10.810
Hoe oud is Tailwind?

1835
01:49:11.250 --> 01:49:13.470
Ik heb er wel...

1836
01:49:13.470 --> 01:49:14.010
1,5 jaar.

1837
01:49:14.090 --> 01:49:15.070
Ik vind het ook heel fijn.

1838
01:49:15.230 --> 01:49:16.910
1,5 jaar volgens mij.

1839
01:49:20.630 --> 01:49:23.430
In 2019 hoorde je er net iets van.

1840
01:49:23.950 --> 01:49:25.550
Een jaar geleden heb ik een talk gezien

1841
01:49:25.550 --> 01:49:30.570
van iemand die bij Alkolia werkt.

1842
01:49:32.170 --> 01:49:33.910
Die bij .js.

1843
01:49:34.390 --> 01:49:36.750
Ik kan haar naam even niet herinneren.

1844
01:49:37.830 --> 01:49:39.150
Maar als je dat opzoekt,

1845
01:49:39.270 --> 01:49:42.910
er is een talk over utility-based CSS.

1846
01:49:43.750 --> 01:49:45.810
Wat Tailwind dus eigenlijk implementeert.

1847
01:49:46.510 --> 01:49:48.730
En ook standaard geeft eigenlijk aan dat.

1848
01:49:50.030 --> 01:49:51.650
Want het moeilijkste in CSS

1849
01:49:51.650 --> 01:49:56.110
is eigenlijk het namen geven van dingen.

1850
01:49:56.850 --> 01:49:58.190
En het stylen van dingen.

1851
01:50:00.110 --> 01:50:02.290
Dat klinkt natuurlijk heel cliché-achtig.

1852
01:50:02.630 --> 01:50:06.950
Maar het is natuurlijk het bepalen van welke classes,

1853
01:50:07.790 --> 01:50:09.370
welke styling hebben.

1854
01:50:10.370 --> 01:50:12.930
En hoe die samenwerken om een component te maken.

1855
01:50:13.650 --> 01:50:15.650
En uiteindelijk wat je noemt als

1856
01:50:17.470 --> 01:50:19.490
developer of front-end developer

1857
01:50:19.490 --> 01:50:22.010
in 2020 en 2021,

1858
01:50:22.810 --> 01:50:24.610
is vooral components maken.

1859
01:50:25.650 --> 01:50:28.650
Je maakt de kans dat je

1860
01:50:30.310 --> 01:50:33.290
puur en alleen maar HTML aan het genereren bent.

1861
01:50:34.350 --> 01:50:34.990
In een bepaalde vorm.

1862
01:50:35.690 --> 01:50:37.510
Maar zelfs HTML in de meeste gevallen

1863
01:50:37.510 --> 01:50:38.590
zijn een soort van components.

1864
01:50:39.890 --> 01:50:42.870
Maar de meeste mensen die gebruiken

1865
01:50:42.870 --> 01:50:48.030
frameworks als React, Angular, Vue, Svelte.

1866
01:50:48.650 --> 01:50:55.010
En die hebben een component model in het framework gebouwd.

1867
01:50:55.370 --> 01:50:57.230
Waardoor je echt componenten aan het bouwen bent.

1868
01:50:57.930 --> 01:50:59.890
Buttons enzovoort.

1869
01:51:01.130 --> 01:51:03.410
En componenten zijn dan ook weer opgemaakt

1870
01:51:03.410 --> 01:51:04.690
uit andere componenten.

1871
01:51:04.830 --> 01:51:08.210
Waardoor je dus gewoon een systeem moet hebben

1872
01:51:08.210 --> 01:51:11.230
dat je dat eigenlijk kan schalen met

1873
01:51:11.230 --> 01:51:13.230
al die verschillende componenten.

1874
01:51:13.990 --> 01:51:16.510
Zonder dat je voor elke component

1875
01:51:16.510 --> 01:51:18.330
dus een klas aan het schrijven bent.

1876
01:51:19.730 --> 01:51:21.630
Want het goede, of eigenlijk het ding

1877
01:51:21.630 --> 01:51:24.410
wat mij het meest aansprak aan Tailwind was niet dat

1878
01:51:25.030 --> 01:51:26.730
oké nu hoef ik geen CSS meer te schrijven.

1879
01:51:26.770 --> 01:51:29.650
Want je bent nog steeds CSS clusters aan het toevoegen.

1880
01:51:31.030 --> 01:51:34.230
Het was meer het performance stukje waarin dat je

1881
01:51:34.910 --> 01:51:37.430
begin met een bundle van 70 kb.

1882
01:51:37.790 --> 01:51:40.270
Maar uiteindelijk als je naar mijn website toe gaat

1883
01:51:40.270 --> 01:51:43.190
bijvoorbeeld dan ben je maar 3 kb aan het CSS downloaden.

1884
01:51:44.610 --> 01:51:47.320
En dat kan ik als ik het handmatig schrijf

1885
01:51:48.510 --> 01:51:49.730
niet beter doen.

1886
01:51:49.830 --> 01:51:52.390
Ja dat kan ik wel voor mijn eigen website.

1887
01:51:53.230 --> 01:51:56.690
Maar als je naar een grote website

1888
01:51:59.090 --> 01:52:01.530
van een bekend Nederlands merk gaat

1889
01:52:01.530 --> 01:52:05.830
bijvoorbeeld dan is het nooit een site die je

1890
01:52:05.830 --> 01:52:07.590
handmatig hebt kunnen optimaliseren

1891
01:52:07.590 --> 01:52:09.550
in CSS basis zeg maar.

1892
01:52:09.550 --> 01:52:12.410
En dat kun je dus met Tailwind door Perch CSS

1893
01:52:12.410 --> 01:52:15.550
dat ze gebruiken heel goed te doen zeg maar.

1894
01:52:17.870 --> 01:52:19.390
Ja ja cool.

1895
01:52:20.470 --> 01:52:22.770
Ja dat waren de dilemma's.

1896
01:52:22.870 --> 01:52:23.690
We hebben er drie gehad.

1897
01:52:24.050 --> 01:52:24.210
Tips.

1898
01:52:25.250 --> 01:52:27.170
Ik weet niet of je, nou goed we behandelen tips.

1899
01:52:28.190 --> 01:52:29.770
Ja dat kan van alles zijn.

1900
01:52:30.970 --> 01:52:33.510
Tools, conferenties, boeken.

1901
01:52:34.630 --> 01:52:36.250
Best practices, alles mag.

1902
01:52:37.630 --> 01:52:38.690
Ja ik zal aftrappen

1903
01:52:38.690 --> 01:52:40.310
maar ik heb er maar één.

1904
01:52:40.930 --> 01:52:41.750
Dat is een luistertip.

1905
01:52:41.990 --> 01:52:43.570
Ik heb een podcast zeg maar.

1906
01:52:43.910 --> 01:52:46.590
Ik tip vaker ChangeLog, de ChangeLog podcast.

1907
01:52:47.170 --> 01:52:49.950
En dit keer ging het over de toekomst van de Mac.

1908
01:52:50.290 --> 01:52:54.510
Want er is natuurlijk een nieuwe chip zeg maar

1909
01:52:55.270 --> 01:52:56.310
ja uitgebracht.

1910
01:52:57.030 --> 01:53:01.190
En drie Mac's die daarmee uitgerust zijn.

1911
01:53:01.930 --> 01:53:03.190
En Tim Dreamstra.

1912
01:53:03.930 --> 01:53:05.650
Ik weet niet of hij Nederlands is.

1913
01:53:05.650 --> 01:53:08.250
Hij klonk volledig Amerikaans.

1914
01:53:08.450 --> 01:53:10.570
Maar goed die naam klinkt Nederlands.

1915
01:53:10.870 --> 01:53:12.110
Misschien is het van de oorsprong.

1916
01:53:12.350 --> 01:53:14.050
Maar hij is de product marketing manager

1917
01:53:14.050 --> 01:53:16.810
voor developer technologies bij Apple.

1918
01:53:18.610 --> 01:53:20.210
Hij is dus niet de hardware engineer

1919
01:53:20.210 --> 01:53:22.650
maar gewoon een developer.

1920
01:53:23.690 --> 01:53:25.950
Toevingen, technologie op Mac.

1921
01:53:26.950 --> 01:53:28.910
Managed, nou dat zegt de naam natuurlijk al.

1922
01:53:29.830 --> 01:53:33.210
Maar er zat heel veel enthousiasme in.

1923
01:53:33.250 --> 01:53:34.430
Ze waren echt heel blij

1924
01:53:34.430 --> 01:53:35.710
dat die M1'er was.

1925
01:53:35.890 --> 01:53:37.730
Tuurlijk is dat wel een beetje op Amerikaans.

1926
01:53:37.850 --> 01:53:40.670
Maar je merkt echt wel dat ze heel blij waren

1927
01:53:40.670 --> 01:53:41.910
dat die M1-chipper was.

1928
01:53:42.290 --> 01:53:44.870
En die zal ook echt wel een hele poos.

1929
01:53:45.190 --> 01:53:48.590
Het idee om zeg maar op arm over te gaan

1930
01:53:49.090 --> 01:53:50.770
hebben ze niet zeg maar voor gaven zonder.

1931
01:53:50.990 --> 01:53:52.910
Daar zijn ze al een poosje mee bezig.

1932
01:53:53.350 --> 01:53:54.470
En daar gaat die podcast over.

1933
01:53:54.670 --> 01:53:55.850
Dus wel een luistertip.

1934
01:53:56.030 --> 01:53:57.110
Ik vind het wel mooi.

1935
01:53:57.210 --> 01:53:59.890
Ik vind het sowieso heel stoer wat Apple gedaan heeft.

1936
01:54:00.590 --> 01:54:03.590
Als je mij drie jaar geleden had gezegd

1937
01:54:03.590 --> 01:54:07.170
dat er een arm-chip in een desktop gaat komen

1938
01:54:07.170 --> 01:54:08.950
die echt gewoon op sommige punten

1939
01:54:08.950 --> 01:54:11.210
gewoon echt een stuk sneller is dan een Intel-chip.

1940
01:54:11.350 --> 01:54:11.770
Een CPU.

1941
01:54:12.530 --> 01:54:14.590
Ja, dan had ik je wel een beetje voor gek verklaard.

1942
01:54:15.870 --> 01:54:17.110
We zagen het dan wel aankomen.

1943
01:54:17.230 --> 01:54:19.090
Maar ik vind het wel stoer.

1944
01:54:19.250 --> 01:54:22.700
Ik vind het wel interessant hoe dat zich verder gaat ontwikkelen.

1945
01:54:23.870 --> 01:54:24.910
Zeker ook voor developers.

1946
01:54:25.610 --> 01:54:27.250
Ja, kan het wel relevant zijn.

1947
01:54:27.850 --> 01:54:28.710
Maar dat was mijn tip.

1948
01:54:29.490 --> 01:54:31.350
Ik weet niet of jullie tips hebben.

1949
01:54:31.350 --> 01:54:33.970
Of ja, noem iets.

1950
01:54:34.090 --> 01:54:34.830
Maakt niet uit wat.

1951
01:54:36.030 --> 01:54:39.410
Ja, sowieso die M1-chip.

1952
01:54:39.930 --> 01:54:45.330
Die initiële resultaten over developer-work-gerelateerde dingen.

1953
01:54:46.290 --> 01:54:48.590
Dus compiler van code enzovoort.

1954
01:54:49.150 --> 01:54:52.730
Zelfs de compiler van V8, blijkbaar, is echt gigantisch veel sneller.

1955
01:54:53.770 --> 01:54:56.890
Met ook meer battery savings.

1956
01:54:57.910 --> 01:55:00.290
Dus meer batterij voor je laptop is niet leeg

1957
01:55:00.290 --> 01:55:02.610
als je klaar bent met V8 compiler en dat soort dingen.

1958
01:55:04.210 --> 01:55:06.750
Dat is dus blijkbaar met de Intel processors wel zo.

1959
01:55:06.890 --> 01:55:07.730
Dus dat is wel interessant.

1960
01:55:08.990 --> 01:55:10.450
Dat zag ik de laatste keer een tweet over.

1961
01:55:11.650 --> 01:55:15.110
En verder, als je dus meer wilt weten over Next,

1962
01:55:15.670 --> 01:55:19.030
kun je naar nextjess.org slash learn gaan.

1963
01:55:20.630 --> 01:55:24.030
Waar je eigenlijk een soort interactive tutorial,

1964
01:55:24.090 --> 01:55:27.550
dus een interactieve tutorial, kan doen.

1965
01:55:29.070 --> 01:55:32.530
Die je helemaal door het bouwen van een Next.js app heen loopt.

1966
01:55:34.130 --> 01:55:36.750
En ook hoe je Verstel gebruikt en dat soort dingen.

1967
01:55:37.630 --> 01:55:39.830
Wat niet per se nodig is als je Next gebruikt, overigens.

1968
01:55:42.370 --> 01:55:43.910
Maar daar kun je doorheen gaan

1969
01:55:43.910 --> 01:55:46.550
als je nog nooit van Next hebt gehoord enzovoort.

1970
01:55:48.830 --> 01:55:50.850
Het enige wat je nodig hebt is een beetje kennis van React.

1971
01:55:51.350 --> 01:55:52.930
En dan kun je aan de slag.

1972
01:55:55.730 --> 01:55:58.370
En ja, dat is het verder wel.

1973
01:56:01.270 --> 01:56:04.750
De tip waar veel mensen een vraag om vragen is,

1974
01:56:04.770 --> 01:56:09.950
zeg maar, hoe je aan contributen in open source begint.

1975
01:56:13.290 --> 01:56:15.090
En het antwoord dat ik meestal geef is redelijk simpel.

1976
01:56:16.470 --> 01:56:18.290
Het antwoord dat ik meestal geef is redelijk simpel.

1977
01:56:18.290 --> 01:56:20.370
Het is gewoon, doe het.

1978
01:56:21.230 --> 01:56:28.250
Maar het meest nuttige is als je naar een repository gaat.

1979
01:56:29.050 --> 01:56:30.170
Het maakt niet uit welke repositories.

1980
01:56:30.650 --> 01:56:34.090
Maar meestal de meest populaire frameworks enzovoort,

1981
01:56:34.090 --> 01:56:37.710
die hebben een Good First Issues label in Issues.

1982
01:56:38.590 --> 01:56:44.170
En als je daarheen gaat, dan kun je dus Issues vinden die relatief makkelijk zijn.

1983
01:56:45.470 --> 01:56:47.670
Soms zelfs zo makkelijk dat je denkt van,

1984
01:56:47.670 --> 01:56:49.590
waarom zou ik dit zelfs doen?

1985
01:56:51.250 --> 01:57:01.590
Maar het helpt vaak met het, zeg maar, jezelf meer kennis geven over de codebase,

1986
01:57:01.890 --> 01:57:07.830
voordat je echt aan het contributen van features of bug fixes of wat dan ook begint.

1987
01:57:08.210 --> 01:57:14.530
Stel docs changes, A moet naar B veranderd worden of wat dan ook.

1988
01:57:14.770 --> 01:57:16.330
Simpele dingen zoals dat.

1989
01:57:16.330 --> 01:57:19.750
Is ook hoe ik ben begonnen met het contributen aan Next bijvoorbeeld.

1990
01:57:20.030 --> 01:57:25.310
Was gewoon documentatie toevoegen, een beetje bug fixen,

1991
01:57:25.610 --> 01:57:32.830
bugs die relatief gezien heel erg simpel zijn, die als je JavaScript kennis hebt,

1992
01:57:33.010 --> 01:57:34.050
gewoon zou kunnen doen.

1993
01:57:34.990 --> 01:57:37.590
Ik deed het ook zonder dat ik altijd veel JavaScript kennis had.

1994
01:57:39.370 --> 01:57:45.690
En het helpt op lange termijn op medere manieren.

1995
01:57:47.950 --> 01:57:52.750
Maar hij heeft het natuurlijk op een manier geholpen die niet heel normaal is.

1996
01:57:52.930 --> 01:57:55.890
In zoverre dat ik dus, doordat ik heel veel contributen heb aan Next,

1997
01:57:57.090 --> 01:58:02.570
uiteindelijk een baan heb gekregen om aan Next te werken fulltime.

1998
01:58:03.330 --> 01:58:05.950
Wat je natuurlijk niet kunt verwachten voor iedereen.

1999
01:58:06.850 --> 01:58:11.910
Maar het heeft me vooral heel erg geholpen met het doorgroeien naar oké,

2000
01:58:11.910 --> 01:58:14.950
ik heb heel veel meer kennis over JavaScript, Node.js.

2001
01:58:17.510 --> 01:58:21.130
Contributen bij een open source project.

2002
01:58:22.490 --> 01:58:25.070
Dat staat altijd goed op je survey ook overigend.

2003
01:58:26.010 --> 01:58:30.950
Vooral iedereen die ik gesproken heb die mensen zoekt of developers zoekt

2004
01:58:34.390 --> 01:58:37.950
die bijvoorbeeld aan next year's projecten kunnen werken.

2005
01:58:38.830 --> 01:58:43.010
Vragen meestal om oké, heb je ook een GitHub of wat dan ook.

2006
01:58:43.130 --> 01:58:45.110
Zodat we daar al een keer naar kunnen kijken enzovoort.

2007
01:58:46.170 --> 01:58:50.510
En als er dan grotere projecten opstaan, of niet eens grotere projecten zijn,

2008
01:58:50.590 --> 01:58:56.030
maar gewoon projecten die je vaker hebt gezien of die in de ecosystem bestaan enzovoort.

2009
01:58:57.310 --> 01:59:00.850
Dan is dat meestal een plus tegenover andere mensen

2010
01:59:00.850 --> 01:59:03.210
die ook solliciteren voor eenzelfde slotbaan.

2011
01:59:03.270 --> 01:59:05.630
Ja, dat geloof ik al.

2012
01:59:08.790 --> 01:59:13.210
Ik had zo'n vrije chips, die wil ik eigenlijk steeds wel stellen.

2013
01:59:15.730 --> 01:59:18.630
Maar goed, Joost, heb jij nog tips toevallig?

2014
01:59:18.650 --> 01:59:23.450
Dat is bijna niet benodigd naar Tims betoog net over tailwind.

2015
01:59:24.870 --> 01:59:26.930
Iedereen aanraden tailwind een keer uit te proberen.

2016
01:59:27.270 --> 01:59:28.250
Ja, dat is wel waar.

2017
01:59:28.250 --> 01:59:30.750
Ja, ik ben ook echt positief verrast door tailwind.

2018
01:59:30.950 --> 01:59:34.050
Ik had in eerste instantie zoiets van, oké, laat maar even zien.

2019
01:59:34.870 --> 01:59:38.650
En toen dacht ik, oké, ja, gaat makkelijk, zeg maar.

2020
01:59:39.770 --> 01:59:40.930
It makes sense, zeg maar.

2021
01:59:41.750 --> 01:59:43.250
Vond ik wel interessant.

2022
01:59:46.490 --> 01:59:48.610
Kom op, kom op, ik wil die vraag.

2023
01:59:50.370 --> 01:59:57.050
Ja, ik had nog, er is natuurlijk best wel een,

2024
01:59:57.050 --> 02:00:01.850
heb je dat de kapitaalinjectie geweest voor development van Next.js?

2025
02:00:04.310 --> 02:00:08.170
Maar de druk, ontstaat er een druk, verandert er dan iets, zeg maar?

2026
02:00:08.850 --> 02:00:10.890
Je hoeft daar niet te zeggen van, ja, dat gaat af en toe.

2027
02:00:12.190 --> 02:00:15.090
Ik moet wel zeggen over wat issues.

2028
02:00:15.390 --> 02:00:19.110
Maar ik kan me voorstellen dat er wat dynamiek verandert, zeg maar.

2029
02:00:20.390 --> 02:00:24.190
Maakt het, maakt het alles, is alles makkelijker of is alles, ja?

2030
02:00:24.190 --> 02:00:28.250
Ja, om het, om het even in de context te geven.

2031
02:00:30.550 --> 02:00:35.530
De vercel, het is een bedrijf achter Next, die heeft een 3D gedaan.

2032
02:00:36.470 --> 02:00:38.210
Eerder in het jaar is dat aangekondigd.

2033
02:00:40.310 --> 02:00:44.430
En daar is toen 21 miljoen dollar opgehaald.

2034
02:00:47.770 --> 02:00:52.050
En dat is eigenlijk voor het uitbouwen van de platform,

2035
02:00:52.050 --> 02:00:57.330
het uitbouwen van Next, zeg maar, het groeien van vercel, zeg maar.

2036
02:00:57.550 --> 02:00:58.010
Daar is het voor.

2037
02:01:01.630 --> 02:01:10.730
In zoverre verschil tussen voor het raisen van het geld tegenover nu,

2038
02:01:11.450 --> 02:01:19.160
is dat daarvoor we met z'n tweeën aan Next werkte, fulltime,

2039
02:01:19.160 --> 02:01:22.980
en nu met z'n vijven fulltime in Next werken.

2040
02:01:28.360 --> 02:01:33.780
Qua projectleiding, enzovoort, heb ik nog steeds de leiding over het project.

2041
02:01:34.020 --> 02:01:37.380
Dus er is relatief gezien daar niks veranderd.

2042
02:01:38.840 --> 02:01:43.160
Ik kan nog steeds zelf de prioriteiten stellen over oké, dit is wat we gaan bouwen,

2043
02:01:43.160 --> 02:01:50.220
dit is wat er aankomt in Next, zeg maar, enzovoort.

2044
02:01:52.840 --> 02:01:55.500
Ik heb natuurlijk verantwoording die ik af moet leggen aan Qashirmo,

2045
02:01:56.280 --> 02:02:00.660
en een andere e-staff binnen vercel.

2046
02:02:05.440 --> 02:02:09.160
Eigenlijk het hele ding natuurlijk, als je naar vercel kijkt,

2047
02:02:09.160 --> 02:02:13.200
wij zijn erbij gebaatd dat NextVS groeit,

2048
02:02:15.020 --> 02:02:19.420
niet alleen op vercel, maar ook in open source.

2049
02:02:21.040 --> 02:02:24.440
Hoe groter de community is, hoe beter het is voor iedereen.

2050
02:02:24.960 --> 02:02:27.540
Dus voor de community zelf, want er zijn meer mensen,

2051
02:02:27.840 --> 02:02:33.260
dus er zijn meer banen, dus je kunt ook eerder als een NextVS developer aan de slag.

2052
02:02:34.520 --> 02:02:40.100
Er is meer interesse van andere bedrijven om te continuëren aan Next.

2053
02:02:40.980 --> 02:02:44.560
Een vraag over vorig jaar, zelfs voor de Series A announcement,

2054
02:02:46.360 --> 02:02:50.340
kwam Google, Google Chrome, een specifiek team,

2055
02:02:51.580 --> 02:02:59.160
dat de studio's bericht van hey, we zijn bezig met een soort nieuw initiatief binnen Google Chrome,

2056
02:02:59.920 --> 02:03:02.320
om samen te werken met frameworks.

2057
02:03:03.280 --> 02:03:11.400
En we zien dat Next een van de frameworks is waar we het grootste impact kunnen hebben op het web zelf,

2058
02:03:11.560 --> 02:03:14.320
zeg maar, als in dat frameworks gebruikt.

2059
02:03:16.940 --> 02:03:18.160
Wat houdt dat nu in?

2060
02:03:18.640 --> 02:03:21.420
We zijn naast mijn team, wat dus vijf mensen is.

2061
02:03:22.160 --> 02:03:25.320
Er zijn nu ook een aantal mensen van de Google Chrome team,

2062
02:03:27.300 --> 02:03:31.300
relatief gezien heel veel tijd bezig aan Next zelf.

2063
02:03:31.300 --> 02:03:41.260
Dus het verbeteren van performance, het verbeteren van de developer experience in bepaalde delen.

2064
02:03:41.980 --> 02:03:46.240
Next Image bijvoorbeeld is in samenwerking met het Chrome team gemaakt,

2065
02:03:47.640 --> 02:03:56.360
om dus al die core web files beter te maken voor een heel groot deel van de Next Applications die dus al bestaan,

2066
02:03:56.580 --> 02:03:59.040
maar ook alle nieuwe applicaties die gebouwd worden.

2067
02:04:00.200 --> 02:04:05.040
En in die samenwerking, die is nu ongeveer anderhalf jaar bezig,

2068
02:04:06.260 --> 02:04:11.960
hebben dus ook heel veel nieuwe features en nieuwe optimalisaties gemaakt.

2069
02:04:13.640 --> 02:04:19.220
En dan denk je misschien van ja, oké, leuk dat jullie dat allemaal met Next aan het doen zijn,

2070
02:04:19.940 --> 02:04:24.960
maar wat heeft dat voor nut voor mij als ik Create Reacts heb gebruikt,

2071
02:04:24.960 --> 02:04:28.960
of web Excel, ik heb zelf iets gebouwd enzovoort.

2072
02:04:30.260 --> 02:04:35.000
Maar een hele hoop van deze wijzigingen die kunnen dus eerst gevalideerd worden tegen echte applicaties,

2073
02:04:36.460 --> 02:04:41.440
NextJet applicaties in productie die miljoenen gebruikers hebben.

2074
02:04:43.500 --> 02:04:50.340
En daar kunnen we zien van oké, het werkt wat we hebben uitgevoerd en het heeft een heel goed effect.

2075
02:04:51.120 --> 02:04:57.540
Een voorbeeld ervan is een nieuwe bundelsplitting algoritme dat we hebben gemaakt samen met Chrome Team.

2076
02:04:58.960 --> 02:05:05.660
En wat je daar eigenlijk ziet is dat nieuwe algoritme wat we hebben gemaakt voor bundelsplitting,

2077
02:05:05.960 --> 02:05:08.180
is nu een default in Webhack 5.

2078
02:05:08.660 --> 02:05:13.720
Dus iedereen die Webhack 5 gebruikt, die heeft automatisch die optimalisatie,

2079
02:05:14.260 --> 02:05:19.500
zelfs als je geen Next gebruikt, als je een Next gebruikt zit die er al in als je gewoon Next installeert.

2080
02:05:20.340 --> 02:05:23.060
Alle nieuwe visies hebben die optimalisatie al.

2081
02:05:23.780 --> 02:05:29.480
En zo zijn we nog een hele hoop optimalisaties aan het maken die ook overgenomen worden in andere frameworks.

2082
02:05:30.960 --> 02:05:33.560
En daarnaast doen we dus ook, zeg maar bijvoorbeeld,

2083
02:05:34.780 --> 02:05:37.580
wat is het nut dat Vercell bijvoorbeeld in Next investeert,

2084
02:05:38.080 --> 02:05:46.460
ook dat ik bijvoorbeeld vorig jaar een memory leak in Webhack heb gevonden samen met een collega

2085
02:05:47.380 --> 02:05:51.800
en die gefixt heb en daar ook een pullercaster heb gestuurd

2086
02:05:51.800 --> 02:05:58.320
waarmee dat memory utilization van Webhack, voor alle Webhack applicaties,

2087
02:05:59.880 --> 02:06:04.900
met iets van 70% verminderd werd tijdens het beelden.

2088
02:06:04.980 --> 02:06:08.980
Waardoor je eerst, je draait Webhack en hij raakt out of memory

2089
02:06:08.980 --> 02:06:13.620
en dat wordt later dus gewoon, je draait Webhack en je krijgt gewoon een output uiteindelijk.

2090
02:06:13.620 --> 02:06:17.900
Dus we hebben nog meer dingen gevonden, bijvoorbeeld

2091
02:06:18.800 --> 02:06:24.060
een bug in de file watcher die Webhack gebruikt, ChokeyDar, op Mac.

2092
02:06:25.660 --> 02:06:27.620
Ik had toen ik Nexus applicaties aan het bouwen was,

2093
02:06:27.700 --> 02:06:30.920
kwam ik erachter dat als ik een bepaalde error maakte,

2094
02:06:32.120 --> 02:06:35.620
dus ik maakte een deep file en ik sla hem op, ik zag de error overlay enzovoort

2095
02:06:36.760 --> 02:06:40.520
en ik maakte daarna nog een weiseling, dan ging die error overlay niet meer weg.

2096
02:06:41.160 --> 02:06:43.040
En dat kwam niet omdat de error overlay kapot was,

2097
02:06:43.040 --> 02:06:46.040
of wat dan ook, alleen dat kwam gewoon omdat de watcher die Webhack gebruikte

2098
02:06:47.240 --> 02:06:52.980
stopte met watchen van dat bestand, nadat die een crash had gehad.

2099
02:06:55.320 --> 02:06:58.000
Daar ben ik toen anderhalve week mee bezig geweest,

2100
02:06:58.200 --> 02:07:01.500
omdat ik er zo, ik snapte maar niet dat dat gebeurde,

2101
02:07:01.520 --> 02:07:03.360
want het was niet heel standaard.

2102
02:07:03.680 --> 02:07:07.260
En toen ben ik dus tot Rabbit Hole eigenlijk doorgegaan

2103
02:07:09.080 --> 02:07:12.060
om een bug te vinden in ChokeyDar,

2104
02:07:12.060 --> 02:07:17.860
wat is gebruikt tot voor elke developer die een Mac heeft,

2105
02:07:19.220 --> 02:07:23.900
die node code schrijft en Webhack gebruikt of andere tools,

2106
02:07:25.160 --> 02:07:26.520
en daar die bug gefixt.

2107
02:07:27.260 --> 02:07:32.420
En dat zorgde er eigenlijk voor dat je nu dus als er iets crashed in Webhack,

2108
02:07:32.520 --> 02:07:36.700
dat je niet nog een error hebt, die error die blijft dan niet meer staan,

2109
02:07:36.740 --> 02:07:38.780
die hoeft niet te rebooten en dat soort dingen.

2110
02:07:39.400 --> 02:07:41.000
Wat dus eerst wel nodig was.

2111
02:07:41.000 --> 02:07:43.140
En je zag het niet, dus dat was ook een beetje het raar.

2112
02:07:44.800 --> 02:07:47.960
Ja, maar dat is wel nice, ja.

2113
02:07:48.500 --> 02:07:53.900
Dat is dus, ja, hoe open source bedoeld was, zeg maar.

2114
02:07:54.500 --> 02:07:56.920
Volgens mij hebben wij het wel eens hier in de podcast wel eens over gehad,

2115
02:07:57.120 --> 02:07:59.520
van ja, misschien moeten bedrijven er eens over nadenken

2116
02:07:59.520 --> 02:08:02.380
om dan, weet ik veel, 5 procent van de tijd,

2117
02:08:02.520 --> 02:08:07.480
ja, niet geforceerd, maar wat te spenderen, terug te geven aan open source.

2118
02:08:09.740 --> 02:08:11.200
Ja, zeker bij bepaalde agencies.

2119
02:08:11.360 --> 02:08:13.780
Ja, goed, je zei dat eerder wel, van ja, je wilt bouwen aan je code,

2120
02:08:13.820 --> 02:08:16.500
maar soms wil je ook iets terug kunnen geven, denk ik.

2121
02:08:18.140 --> 02:08:19.480
Ja, dat zou misschien wel mooi zijn.

2122
02:08:21.560 --> 02:08:22.200
Ja, cool.

2123
02:08:24.200 --> 02:08:25.620
Ja, daar zijn we wel door de tips heen.

2124
02:08:25.760 --> 02:08:27.220
We delen altijd Twitter Rants.

2125
02:08:27.420 --> 02:08:29.100
Ik heb geen Twitter Rants, weer niet.

2126
02:08:29.540 --> 02:08:31.820
Want als er geen is, dan gaan we die ook niet bespreken.

2127
02:08:32.080 --> 02:08:33.220
Goed, dit was het weer.

2128
02:08:34.320 --> 02:08:36.260
Zoals altijd, zorg dat je geabonneerd bent op ons.

2129
02:08:36.260 --> 02:08:39.200
Dat zul je vast misschien al zijn als je zo ver bent gekomen als nu.

2130
02:08:39.780 --> 02:08:42.460
Maar als je dat niet bent, ga je naar je favoriete podcastspeler,

2131
02:08:42.640 --> 02:08:43.680
zoek op CodeKlets.

2132
02:08:45.420 --> 02:08:47.780
Wil je met ons babbelen, want wij zijn natuurlijk super leuk

2133
02:08:47.780 --> 02:08:50.360
en onze community wordt steeds leuker, ga naar onze Slack.

2134
02:08:50.440 --> 02:08:53.220
Die kun je vinden via codeklets.nl.

2135
02:08:53.620 --> 02:08:55.260
Die link die is gewoon, die staat daar gewoon.

2136
02:08:55.520 --> 02:08:56.820
Dus dat is niet moeilijk te vinden.

2137
02:08:58.420 --> 02:09:01.180
Alle interessante links, die komen in de show notes.

2138
02:09:01.180 --> 02:09:05.180
Dus dat kun je daar naar toe.

2139
02:09:06.140 --> 02:09:07.860
Door, linken, klikken, whatever.

2140
02:09:08.680 --> 02:09:11.520
We hebben een Twitter account, dat is at codeklets.

2141
02:09:12.100 --> 02:09:15.340
Hou die in de gaten, dan hoor je links en rechts nog wat nieuwtjes.

2142
02:09:15.900 --> 02:09:19.220
En dan zie je misschien ook wel onze nieuwsbrief langskomen.

2143
02:09:19.640 --> 02:09:21.820
Daar moet nog wat werk voor verzetten.

2144
02:09:22.680 --> 02:09:24.020
En dat was het eigenlijk wel.

2145
02:09:24.700 --> 02:09:26.080
Ik wil jou bedanken Tim.

2146
02:09:26.640 --> 02:09:26.960
Graag gedaan.

2147
02:09:26.960 --> 02:09:27.720
Bedankt voor je tijd.

2148
02:09:27.720 --> 02:09:33.060
Dat is echt heel fijn dat je even gast wilde zijn.

2149
02:09:33.480 --> 02:09:34.900
Ik ga jou ook bedanken Joost.

2150
02:09:35.220 --> 02:09:36.220
Dank je wel, het was leuk.

2151
02:09:38.160 --> 02:09:38.800
Zeker.

2152
02:09:40.680 --> 02:09:41.540
Nou, dank je wel.

2153
02:09:42.200 --> 02:09:43.140
En laters.

2154
02:09:43.840 --> 02:09:44.020
Doei.