1
00:00:04,890 --> 00:00:07,740
Meine Lieben hier wieder aus 
Hamburg heute andere Stimme am 

2
00:00:07,750 --> 00:00:09,880
Anfang der Burka fängt heute mal
an. 

3
00:00:09,920 --> 00:00:13,100
Ich freue mich, dass ihr dabei 
seid und heute zuhört wir heute 

4
00:00:13,110 --> 00:00:17,230
ein ziemlich spannendes Thema in
Folge 29 die jetzt schon ist du 

5
00:00:17,240 --> 00:00:19,840
ein ziemlich wichtiges Thema, 
weil es wirklich ganz ganz 

6
00:00:19,850 --> 00:00:22,330
viele. 
Entwickler betrifft aber auch 

7
00:00:22,340 --> 00:00:24,350
ganz, ganz viele Nutzer 
betrifft. 

8
00:00:24,360 --> 00:00:27,850
Wir sprechen heute über Reacted 
Reactive, ein sogenanntes Web 

9
00:00:27,860 --> 00:00:32,520
Framework, und ist das also mit 
einem Web Framework erstelle ich

10
00:00:32,530 --> 00:00:36,670
quasi Web Auftritte, also nicht 
nur langweilige statische 

11
00:00:36,680 --> 00:00:39,510
Seiten, sondern alles das, was 
das moderne Internet heute 

12
00:00:39,620 --> 00:00:42,740
bietet, h. 
Und eines der der aller 

13
00:00:42,750 --> 00:00:46,420
bekanntesten ist Red und wir 
wollen heute ein bisschen 

14
00:00:46,430 --> 00:00:49,710
gucken, was das so kann, wie das
so funktioniert, warum das 

15
00:00:49,720 --> 00:00:52,300
funktioniert, warum es cool ist 
und so weiter aber ich möchte 

16
00:00:52,310 --> 00:00:54,650
euch natürlich wieder ein 
bisschen Kontext auch geben. 

17
00:00:54,740 --> 00:00:56,980
Auch wenn ihr einen seid. 
Jetzt habe ich ganz viel 

18
00:00:56,990 --> 00:00:58,990
Monolog. 
Am Anfang erzählt, man könnte 

19
00:00:59,000 --> 00:01:00,500
meinen, Ich bin hier ganz 
alleine im Podcast. 

20
00:01:00,510 --> 00:01:04,110
Aber Nein, Gerrit ist auch 
dabei, der lacht, das seht ihr 

21
00:01:04,120 --> 00:01:06,020
nicht, aber ich sag mal Hallo 
Gerrit, bist du da? 

22
00:01:06,910 --> 00:01:11,660
Ja Hallo Burkhard, Ich bin auch 
da sehr gut, aber du hast das 

23
00:01:11,670 --> 00:01:13,280
super gemacht, genau, ich gar 
nicht sagen. 

24
00:01:13,480 --> 00:01:18,320
Wusstest du, dass du red. 
Die Zweitbeliebteste Library für

25
00:01:18,360 --> 00:01:20,500
Java Script ist das wusste ich 
nicht. 

26
00:01:20,510 --> 00:01:23,500
Ich weiß aber, dass React das 
aller beliebteste Web Framework 

27
00:01:23,510 --> 00:01:26,190
ist in 2023. 
OK. 

28
00:01:26,390 --> 00:01:28,240
Ich habe auch noch ein bisschen,
ich hab mich ganz bisschen 

29
00:01:28,250 --> 00:01:31,250
vorbereitet, also außer, dass 
ich natürlich jeden Tag benutze.

30
00:01:31,630 --> 00:01:37,520
Selber hab ich gefragt, vor gut 
Bart ist ja die AI von Google 

31
00:01:38,070 --> 00:01:41,990
und ich hab bald mal gefragt, 
welches denn das bekannteste und

32
00:01:42,000 --> 00:01:48,440
beliebteste Web Framework ist. 
In 2023 und React mit 40%, 

33
00:01:48,480 --> 00:01:52,990
danach Angola. 
Mit 22 die 23% ungefähr, dann 

34
00:01:53,000 --> 00:01:56,990
View mit 19% stellte, mit 11% 
etwa und ASP. 

35
00:01:57,000 --> 00:02:00,970
Net mit ungefähr 7%. 
Ja, also wir sehen hier also das

36
00:02:00,980 --> 00:02:04,760
ist der Klassenkampf, WIG REACT 
und deswegen ist es auch 

37
00:02:05,130 --> 00:02:08,110
sinnvoll da mal rüber in Tiefe 
zu sprechen, vielleicht mal eine

38
00:02:08,120 --> 00:02:10,970
Folge mit ein bisschen mehr Dive
ist auf jeden Fall ein riesiges 

39
00:02:10,979 --> 00:02:15,720
Thema und richtig cool, ja. 
Dann lass mich doch kurz sagen, 

40
00:02:15,730 --> 00:02:18,400
welches die beliebteste 
javascript Library ist und das 

41
00:02:18,410 --> 00:02:20,940
ist J query. 
Kennst du die oder query würde 

42
00:02:20,950 --> 00:02:23,790
wahrscheinlich sagen. 
Ne ja klar kenn ich die ich bist

43
00:02:23,800 --> 00:02:28,080
du. 
Ich hab das so ist 2023, denn 

44
00:02:28,090 --> 00:02:31,710
das nimmt das absteigenden Ast 
so ja, also die das wird sich. 

45
00:02:32,600 --> 00:02:35,370
Ja, und kommt immer drauf an. 
Ne beliebteste nicht beliebteste

46
00:02:35,380 --> 00:02:39,390
das n Downloads sind das Stack 
over Flow Umfrage gewesen oder 

47
00:02:39,400 --> 00:02:41,820
irgendwas ja keine Ahnung. 
Das stimmt, hab ich. 

48
00:02:41,830 --> 00:02:43,100
Jetzt hab ich jetzt häufiger 
gefunden. 

49
00:02:43,250 --> 00:02:45,740
Genau dann lass uns doch mal ins
Thema einsteigen. 

50
00:02:45,750 --> 00:02:48,580
Ich glaube wir haben das 
irgendwann mal erwähnt, dass 

51
00:02:48,710 --> 00:02:52,680
React aus dem Hause Meta, damals
noch Facebook kommt, also wurde 

52
00:02:52,690 --> 00:02:56,460
dort entwickelt, ich glaube 2013
ging es los. 

53
00:02:56,800 --> 00:02:58,440
Ja, das ist auch meine Kenntnis,
ja. 

54
00:02:58,510 --> 00:03:01,460
Und ja, und dann ging es aber 
irgendwann über in die Open 

55
00:03:01,470 --> 00:03:03,740
Source Community. 
Ja, haben auch schon darüber 

56
00:03:03,750 --> 00:03:06,900
gesprochen wie das funktioniert,
Folge Open Source gemacht und 

57
00:03:06,910 --> 00:03:10,920
die pflegt das seitdem, da ist 
wohl eine ganze Menge los in der

58
00:03:10,930 --> 00:03:13,520
Community und auch meta ist 
natürlich schwer beteiligt. 

59
00:03:13,530 --> 00:03:15,650
Ja schätze mal, dass die dann 
einfach benutzen. 

60
00:03:15,880 --> 00:03:17,770
Und daher ein großes Interesse 
haben, dass das Ganze nicht 

61
00:03:17,780 --> 00:03:21,140
weiterentwickelt und. 
Ja, neue neue Features bekommen 

62
00:03:21,150 --> 00:03:24,050
Stabiles und Wachs gelöst werden
etwa. 

63
00:03:24,540 --> 00:03:27,210
Auf jeden Fall also, das ist 
richtig gewaltig, das fühlt sich

64
00:03:27,220 --> 00:03:29,300
an wie ein professionelles 
Produkt, führt, dass man 

65
00:03:29,310 --> 00:03:30,910
eigentlich ganz viel Euro zahlen
müsste. 

66
00:03:31,480 --> 00:03:33,910
Es gibt ganz viele 
Dokumentationen und sicherlich 

67
00:03:33,920 --> 00:03:36,270
ist das natürlich vor allem 
Metall Konzern selber, auch über

68
00:03:36,280 --> 00:03:39,440
alle meinen Satz ja. 
Lass mal so starten, weil ich 

69
00:03:39,450 --> 00:03:42,620
hatte zuerst gedacht, das ist 
vielleicht auch so eine Art 

70
00:03:42,630 --> 00:03:46,670
Programmiersprache React es 
nicht, hab ich jetzt 

71
00:03:46,680 --> 00:03:50,020
rausgefunden, ist Java Script 
und dafür ist eine Library oder 

72
00:03:50,030 --> 00:03:52,850
du hast jetzt gesagt net 
Framework klar das doch mal 

73
00:03:52,860 --> 00:03:55,100
kurz. 
Auf oder wie hängt das zusammen?

74
00:03:55,110 --> 00:03:56,730
Eine Programmiersprache und eine
Bibliothek? 

75
00:03:56,740 --> 00:03:59,280
Ich meine, wir haben schon 
angerissen, anderen Folge, aber 

76
00:03:59,290 --> 00:04:02,080
vielleicht stellst du nochmal 
Zusammenhang, dass man das 

77
00:04:02,090 --> 00:04:05,470
einordnen kann. 
Wie diese Technologie sich 

78
00:04:05,480 --> 00:04:06,950
verhält zu einer 
Programmiersprache. 

79
00:04:07,000 --> 00:04:09,130
Ja, wenn ich das tue, sind die 
unsere Zuhörer, glaube ich, 

80
00:04:09,140 --> 00:04:10,520
verwirrt. 
Ich würde, ich würde n bisschen 

81
00:04:10,530 --> 00:04:13,720
anfangen, ich komme auf den 
Punkt zurück, Gerrit, was ist 

82
00:04:13,730 --> 00:04:16,500
nämlich tatsächlich Bibliothek, 
ich etwas später, wenn wir da 

83
00:04:16,510 --> 00:04:20,269
ankommen, wo es wichtig wird, 
hab dich nicht vergessen, ich 

84
00:04:20,279 --> 00:04:24,050
würde n bisschen einziehen, ich 
würde versuchen erstmal zu 

85
00:04:24,060 --> 00:04:27,270
erzählen, wie funktioniert das 
überhaupt ne also wenn wir ne 

86
00:04:27,280 --> 00:04:30,070
wenn wir ins Web gehen und sehen
so ne tolle Anwendung eine Web 

87
00:04:30,080 --> 00:04:32,150
Anwendung was passiert da 
eigentlich? 

88
00:04:32,160 --> 00:04:35,960
Ja ich glaube darüber können wir
besseren Einstieg machen ne und 

89
00:04:36,000 --> 00:04:38,930
ich fang nochmal ein Level ich 
überleg ich erzähl doch mal kurz

90
00:04:38,940 --> 00:04:42,350
was der Browser überhaupt ist. 
Ja, der Browser ist quasi. 

91
00:04:42,390 --> 00:04:45,870
Man kann sich erst mal. 
Also wir sind einfach komplexer.

92
00:04:45,880 --> 00:04:47,660
Also ich vereinfache jetzt 
gerade sehr stark, aber wir 

93
00:04:47,670 --> 00:04:53,000
wollen ja recht verstehen, also 
ja, seit bei mir seitdem ich ein

94
00:04:53,010 --> 00:04:55,360
bisschen zu vereinfachen, aber 
für mich also erst mal ganz grob

95
00:04:55,370 --> 00:04:57,760
gesprochen, ist der Browser 
einfach eine Rendering Engine. 

96
00:04:58,410 --> 00:05:01,330
So, und der ist ziemlich der 
überhaupt nicht dumm, aber was 

97
00:05:01,340 --> 00:05:04,320
das angeht relativ dumm, denn 
der kriegt einfach ein 

98
00:05:04,330 --> 00:05:08,670
sogenanntes Dom, ein n Document 
Object Model und das ist, das 

99
00:05:08,680 --> 00:05:11,130
kennt man wenn man ihr könnt ja 
auch Rechtsklicken auf folgender

100
00:05:11,140 --> 00:05:14,090
Seite im Browser, dann sieht man
Quelltext, also kann man sich 

101
00:05:14,100 --> 00:05:18,130
den Text anzeigen lassen und 
dann typischerweise HTML, aber 

102
00:05:18,140 --> 00:05:20,950
es ist nicht nur HTML, denn das 
ist wichtig, es gibt im Prinzip 

103
00:05:20,960 --> 00:05:24,820
diese 3 wichtigen Dinge die der 
Browser bekommt um eine tolle 

104
00:05:24,830 --> 00:05:27,640
Website anzuzeigen und das zu 
ändern, ja, das ist nämlich 

105
00:05:27,680 --> 00:05:30,490
tatsächlich das HTML heute im 
Standard HTML 5. 

106
00:05:31,040 --> 00:05:33,830
Das sind diese ganzen Text. 
Haben wir schon gesprochen, also

107
00:05:33,840 --> 00:05:38,360
ein P für Paragraph h 1 für ne 
für n heading 1 h 2 heading 2 

108
00:05:38,370 --> 00:05:41,820
und so weiter so das ist quasi 
die Semantik der Seite, also 

109
00:05:41,830 --> 00:05:46,130
HTML, das ist gespickt mit CSS 
Scaling Style sheets, die 

110
00:05:46,140 --> 00:05:50,510
cascading Style sheets sagen 
quasi wie dieses H 1 h 2 oder 

111
00:05:50,520 --> 00:05:53,750
das D oder Irgendsowas 
auszusehen hat, mit welchem mit 

112
00:05:53,760 --> 00:05:56,500
welcher Farbe, Schrift, Farbe, 
Hintergrundfarbe, Schatten, 

113
00:05:56,970 --> 00:06:00,260
Animationen und so weiter das 
steckt alles in CSS und das 

114
00:06:00,270 --> 00:06:03,520
Dritte ist Java Script und das 
ist dann einfach die 

115
00:06:03,530 --> 00:06:06,080
Programmiersprache Java Script, 
die auch. 

116
00:06:06,150 --> 00:06:09,400
Mit von dem Browser quasi 
geladen wird und ausgeführt 

117
00:06:09,410 --> 00:06:10,550
wird. 
Das ist wichtig, ja. 

118
00:06:11,270 --> 00:06:14,960
Diese 3 Komponenten sind das ja 
und und und. 

119
00:06:14,970 --> 00:06:18,960
Hier kommt dann schon gleich der
Haken zu zu zu React, weil 

120
00:06:18,970 --> 00:06:23,420
Javascript quasi runtergeladen 
werden kann von einem Server und

121
00:06:23,430 --> 00:06:26,920
ausgeführt werden kann vom 
Browser und weil javascript 

122
00:06:26,930 --> 00:06:30,440
Programmiersprache ist, kann man
jetzt ganz schön viele Sachen 

123
00:06:30,450 --> 00:06:33,940
damit machen und sich überlegen.
Ja und hier auch noch mal kurz, 

124
00:06:33,950 --> 00:06:35,990
das ist wichtig wenn wir 
verstehen wollen müssen wir 

125
00:06:36,000 --> 00:06:40,430
verstehen wie kommt denn quasi 
die Information die der Browser 

126
00:06:40,440 --> 00:06:44,220
ändern soll quasi zu uns auf 
unseren Lokalen. 

127
00:06:44,890 --> 00:06:47,180
Auf unseren lokalen Browser. 
Wir sind im Web, Wir haben ja 

128
00:06:47,190 --> 00:06:50,460
erst mal einen Server, den wir 
kontaktieren, wir geben UL ein. 

129
00:06:51,390 --> 00:06:54,830
Example.com oder irgendwas und 
dann und dann passiert da was 

130
00:06:54,840 --> 00:06:57,360
und der Browser zeigt uns an, 
was passiert. 

131
00:06:57,370 --> 00:07:01,340
Wir fragen dem Server, Wir 
machen eine Anfrage an den 

132
00:07:01,350 --> 00:07:03,560
Server und der schickt was an 
den Browser zurück und früher 

133
00:07:03,570 --> 00:07:05,930
war wir hatten auch schon früher
war es einfach so, dass der 

134
00:07:06,090 --> 00:07:11,120
Server einfach fertig 
gerendertes HTML geschickt hat, 

135
00:07:11,130 --> 00:07:13,570
ja dann kann sich vorstellen der
Server kriegt ne Anfrage der 

136
00:07:13,580 --> 00:07:16,420
macht alles fertig und dann 
kriegen wir ne Seite zurück und 

137
00:07:16,430 --> 00:07:19,430
der Browser rendert das einfach 
nur noch hin und fertig wie n 

138
00:07:19,440 --> 00:07:22,560
Bild ja wenn ich dann immer 
klicke dann macht er jedes Mal 

139
00:07:22,570 --> 00:07:24,960
neues Bild oder sowas ganz grob 
gesprochen ne. 

140
00:07:25,760 --> 00:07:28,970
So, und dann sprechen wir von 
Multi Page Applications, war bei

141
00:07:28,980 --> 00:07:31,930
jedem Klick wieder ne Server 
request passiert und der was 

142
00:07:31,940 --> 00:07:34,890
neues macht. 
Ja React ist für Single Page 

143
00:07:34,900 --> 00:07:38,920
Applications und für das kann 
auch Server Side Rendering aber 

144
00:07:38,930 --> 00:07:41,430
es ist hauptsächlich dafür 
gedacht für Client Side 

145
00:07:41,440 --> 00:07:44,290
Rendering sagt man so schön ne 
und das müssen wir jetzt erstmal

146
00:07:44,300 --> 00:07:47,200
verstehen gleich ja aber Gerrit 
Ich mach mal Pause trink Schluck

147
00:07:47,210 --> 00:07:48,480
Kaffee du hast vielleicht ein 
Paar. 

148
00:07:49,210 --> 00:07:52,940
Ne, soweit noch nicht, aber 
jetzt würde ich einfach kurz 

149
00:07:52,950 --> 00:07:56,920
wiederholen, dass letzten Endes 
React immer vom Client. 

150
00:07:57,490 --> 00:07:59,530
Verstanden werden muss in dem 
Fall der Browser. 

151
00:07:59,540 --> 00:08:01,190
Ja und und der Server das 
erstmal. 

152
00:08:01,480 --> 00:08:02,950
Das ist nicht die Aufgabe des 
Servers. 

153
00:08:03,520 --> 00:08:06,330
Red zu interpretieren und 
irgendwas damit zu machen. 

154
00:08:06,590 --> 00:08:09,800
Genau das ist richtig. 
Das ist sogar ziemlich krass. 

155
00:08:09,840 --> 00:08:12,670
Der Server macht fast gar 
nichts, wenn man sich, wenn man 

156
00:08:12,680 --> 00:08:15,690
sich überlegt was passiert, der 
Server gibt eigentlich ein 

157
00:08:15,700 --> 00:08:19,390
Bundle zurück, also wenn ich 
jetzt ne REACT Web Anwendung 

158
00:08:19,400 --> 00:08:23,130
Anfrage bei einem Server dann 
bekommt dann kommt sogenanntes 

159
00:08:23,140 --> 00:08:27,500
Bundle zurück, das ist quasi 
sehr komprimiertes Javascript, 

160
00:08:27,510 --> 00:08:30,150
das heißt sogar Punkt s Punkt 
oder irgendwie. 

161
00:08:30,920 --> 00:08:33,220
Und das lässt sich dann quasi 
der Browser rein. 

162
00:08:33,230 --> 00:08:36,429
Ja und fängt damit dann an und 
dann führt er quasi im Prinzip 

163
00:08:36,440 --> 00:08:38,760
lädt ein Programm runter, ein 
javascript Programm. 

164
00:08:38,799 --> 00:08:41,929
Ja der Klient, der Browser und 
der führt dann dieses Programm 

165
00:08:41,940 --> 00:08:47,070
aus und jetzt beantworte ich die
Frage warum ist React eine 

166
00:08:47,080 --> 00:08:49,710
Software Bibliothek, das ist 
nämlich Software Bibliothek. 

167
00:08:50,710 --> 00:08:54,060
Mit React schreibe ich quasi 
oder React hilft mir quasi das 

168
00:08:54,070 --> 00:08:57,310
Programm zu schreiben. 
Das spezifische Programm für 

169
00:08:57,320 --> 00:09:01,340
meine eigene Webseite ja in 
diesem javascript Code was der 

170
00:09:01,350 --> 00:09:04,190
Client versteht. 
Ja das ist zwar javascript, aber

171
00:09:04,200 --> 00:09:07,280
das ist jetzt kompliziert, kann 
sich jeder vorstellen, wir 

172
00:09:07,290 --> 00:09:10,000
müssen ja irgendwelche Buttons 
ändern und so weiter und sofort,

173
00:09:10,010 --> 00:09:13,950
es gibt ganz viele Low Level 
Details auf die ich keine Lust 

174
00:09:13,960 --> 00:09:17,080
mehr habe mich zu kümmern, das 
nimmt mir das alles weg und ich 

175
00:09:17,090 --> 00:09:18,880
kann auf einer sehr hohen Flug 
ebene. 

176
00:09:19,600 --> 00:09:22,730
Aber immer noch sehr genau sagen
und explizit was ich haben will 

177
00:09:22,740 --> 00:09:24,470
und wie und wie was auszusehen 
hat. 

178
00:09:24,650 --> 00:09:29,000
Aber diesen ganzen, den ganzen 
Detail Kram den der da hilft mir

179
00:09:29,010 --> 00:09:31,630
Reactor. 
Jetzt hab ich irgendwas auf 

180
00:09:31,640 --> 00:09:34,680
meiner Website was ich bewegen 
soll, zum Beispiel, ich schätze 

181
00:09:34,690 --> 00:09:37,700
mal statische Sachen ist erstmal
bräuchte man nicht zwingend 

182
00:09:37,740 --> 00:09:40,510
vermutlich jetzt mal, sondern es
muss irgendwie schon was 

183
00:09:40,520 --> 00:09:43,850
anspruchsvolleres sein oder 
etwas anspruchsvollerem, spielt 

184
00:09:43,860 --> 00:09:50,360
es seine Stärken aus und aber in
dem Fall ist es dann einfach mit

185
00:09:50,580 --> 00:09:55,130
React einfacher, also mit diesem
mit dieser Library React diese 

186
00:09:55,140 --> 00:09:58,790
Dinge so zu gestalten und zu 
entwickeln, dass genau das 

187
00:09:58,800 --> 00:10:01,010
passiert was ich möchte, 
irgendwas rein pflegt das 

188
00:10:01,020 --> 00:10:03,510
irgendwie was sich kalkulator 
auf der Website ist. 

189
00:10:03,520 --> 00:10:06,200
Vielleicht n Contact Form. 
Oder irgendwie so Sachen, die ja

190
00:10:06,210 --> 00:10:09,160
schon eine gewisse Logik. 
Brauchen ja voll gute Frage. 

191
00:10:09,170 --> 00:10:11,800
Gerät genau wenn sich was 
bewegt. 

192
00:10:11,810 --> 00:10:15,450
Ja wenn sich was animieren soll 
im Browser, das lass uns ruhig 

193
00:10:15,460 --> 00:10:17,790
auseinandernehmen und was machen
was da geht. 

194
00:10:18,120 --> 00:10:20,680
Also wenn ich jetzt zum Beispiel
statischen Kontext runterladen 

195
00:10:20,690 --> 00:10:23,020
von dem Server, dann kann sich 
immer noch was bewegen. 

196
00:10:24,000 --> 00:10:27,210
Denn das CSS heutzutage, das 
kennt auch sowas wie Animationen

197
00:10:27,220 --> 00:10:31,010
und so weiter. 
Das bewegt sich dann zwar, aber 

198
00:10:31,020 --> 00:10:34,070
das ist im Prinzip bewegt sich 
das immer, immer gleich, weil 

199
00:10:34,080 --> 00:10:38,850
weil das CS es wird quasi auch 
festgelegt, fest programmiert 

200
00:10:39,380 --> 00:10:42,030
und kann dann nachdem ich es 
runtergeladen werde nicht mehr 

201
00:10:42,040 --> 00:10:44,790
sich ändern, so, denn dann sind 
die dann ist es zwar beweglich, 

202
00:10:44,800 --> 00:10:48,180
aber die Bewegungen sind quasi 
statische Animationen sag ich 

203
00:10:48,190 --> 00:10:53,630
mal ja und das liegt daran, dass
der das dem Prinzip der Dom, 

204
00:10:53,640 --> 00:10:55,920
also die Informationen die ich 
vom Server dann geladen, wenn 

205
00:10:55,930 --> 00:10:58,970
ich nicht benutze, dass die sich
nicht ändern können, sie können 

206
00:10:58,980 --> 00:11:01,240
sich erst dann wieder, wenn ich 
wieder neuen Kontakt zum Server 

207
00:11:01,250 --> 00:11:02,950
mache. 
So und jetzt der riesige 

208
00:11:02,960 --> 00:11:05,500
Unterschied ist. 
Und was macht das? 

209
00:11:05,510 --> 00:11:06,950
Muss man einmal verstanden 
haben, ist. 

210
00:11:07,680 --> 00:11:11,050
Das nennt sich auch Virtual Dom 
im Prinzip. 

211
00:11:11,120 --> 00:11:14,810
Wenn dieses React Programm 
läuft, dann kann ich mit Java 

212
00:11:14,820 --> 00:11:19,910
Script beliebige Änderungen an 
diesem Document Object Model, 

213
00:11:19,920 --> 00:11:23,290
was quasi der Baum ist, quasi 
der Auftrag ist. 

214
00:11:23,300 --> 00:11:26,530
Was der Browser zu ändern hat, 
den kann ich einfach ändern. 

215
00:11:26,540 --> 00:11:30,550
Unterm Hintern sag ich mal 
unterm Arsch von vom Browser ja 

216
00:11:30,560 --> 00:11:32,690
so der der Browser ist. 
Ich habe ja gesagt der ist 

217
00:11:32,700 --> 00:11:35,950
relativ dumm so der der sieht 
was neues und dann ändert er das

218
00:11:35,960 --> 00:11:39,410
und er ist total gut darin, das 
kann extrem schnell extrem 

219
00:11:39,420 --> 00:11:41,640
flicker frei und so weiter das 
ist das was die Browser 

220
00:11:41,650 --> 00:11:43,380
Entwickler. 
Ständig versuchen, sich zu 

221
00:11:43,390 --> 00:11:46,530
bemühen, ja, dass dass wir, auch
wenn das geht, richtig schnell 

222
00:11:46,540 --> 00:11:51,120
dann 60 sein oder irgendwas, 
dass sich der dieses, diese 

223
00:11:51,130 --> 00:11:54,560
Anleitung was zu ändern ist. 
Was besteht aus HTMLCSS und in 

224
00:11:54,570 --> 00:11:57,810
Java Script, das kann der 
Browser immer schnell ändern. 

225
00:11:57,820 --> 00:12:01,300
Javascript läuft halt 
unverändert quasi die ganze Zeit

226
00:12:01,310 --> 00:12:04,600
als würde ich wahnsinnig schnell
Server Anfragen verändert quasi 

227
00:12:04,610 --> 00:12:07,970
dieses Document Object Model. 
Ja und da hinten und hier 

228
00:12:07,980 --> 00:12:12,140
Browser, Browser, Browser wieder
hier Browser, Browser und die 

229
00:12:12,150 --> 00:12:15,080
Veränderungen können dann halt 
getriggert werden weil ich auf 

230
00:12:15,090 --> 00:12:17,970
so jetzt müssen wir überlegen 
wie, warum und wie. 

231
00:12:18,040 --> 00:12:20,820
Überhaupt war aktiv. 
Ja, ich habe immer 2 Events 

232
00:12:20,830 --> 00:12:23,620
Quellen ne. 
Entweder klickt der User 

233
00:12:23,630 --> 00:12:27,310
irgendwas Dreck and Drop Klick 
Knopf oder sowas ja dann dann 

234
00:12:27,350 --> 00:12:31,030
fordere ich ja quasi den Browser
heraus etwas Neues zu tun oder 

235
00:12:31,040 --> 00:12:33,150
ich bekomme vom Server vom 
Backend irgendwelche Daten, 

236
00:12:33,160 --> 00:12:36,160
irgendwas hat sich geändert 
Datenbank oder als Reaktion auf 

237
00:12:36,170 --> 00:12:39,260
Multi wenn wir hier heavy Multi 
online playing machen oder 

238
00:12:39,270 --> 00:12:41,940
irgendwas ne du machst irgendwas
und in meinem Browser ändert 

239
00:12:41,950 --> 00:12:45,200
sich was ja du kriegst ja nicht 
in meinem Browser, du hast dann 

240
00:12:45,210 --> 00:12:48,380
quasi was im im Backend auf dem 
Server Datenquelle verändert. 

241
00:12:49,420 --> 00:12:52,130
Die sich React zieht als Event 
und darauf reagiert. 

242
00:12:52,140 --> 00:12:55,790
Ja, ja, was soll ich jetzt? 
Muss ich mal in meinem Kopf hat 

243
00:12:55,800 --> 00:12:58,470
sich Grad Knoten gelöst. 
Ich hab natürlich bei Webseiten 

244
00:12:58,480 --> 00:13:01,110
einfach wieder in Webseiten 
gedacht ne also heisenberg.com 

245
00:13:01,120 --> 00:13:03,970
oder irgendeine Website. 
Ist natürlich Quatsch. 

246
00:13:03,980 --> 00:13:07,670
Ja, wir sprechen hier über SARS 
Anwendungen, über Online Games, 

247
00:13:07,680 --> 00:13:11,210
über diese Dinge, wo React dann 
ziemlich viel Sinn ergibt. 

248
00:13:11,500 --> 00:13:14,190
Richtig, du kannst mir doch 
Webseite machen, hatte ich auch 

249
00:13:14,200 --> 00:13:16,850
unsere erste Version der 
Webseite war mit, dann hast du 

250
00:13:16,860 --> 00:13:18,890
ne ziemlich dicke Kanone 
rausgeholt für n ziemlich 

251
00:13:18,900 --> 00:13:22,080
statisches Erlebnis, geht aber 
ja, also. 

252
00:13:22,700 --> 00:13:26,870
Ja, ja, verstehe OKOK alles 
klar, aber da spielt dann 

253
00:13:26,880 --> 00:13:29,550
beziehungsweise anders gesagt 
wenn das wirklich online 

254
00:13:29,560 --> 00:13:33,570
Anwendungen sind Drag und Drop 
oder sowas oder halt online 

255
00:13:33,580 --> 00:13:36,180
Gaming hast du jetzt gerade 
genannt, da stehst du denn 

256
00:13:36,190 --> 00:13:38,720
einfach. 
An Grenzen beziehungsweise macht

257
00:13:38,730 --> 00:13:42,210
es dir dann recht einfacher, 
weil du das mit Javascript alles

258
00:13:42,220 --> 00:13:43,890
machen kannst. 
Recht dann einfacher und 

259
00:13:43,900 --> 00:13:46,180
schneller. 
Du hast vorgefertigte Module, 

260
00:13:46,190 --> 00:13:49,750
wie auch immer und kannst diese 
manipulieren, so ungefähr. 

261
00:13:50,210 --> 00:13:54,480
Ja genau, richtig und und der 
der unglaubliche Speed kommt aus

262
00:13:54,490 --> 00:13:58,620
2 Gründen erstmal, weil weil wir
alles klein seitig also wenn der

263
00:13:58,630 --> 00:14:02,460
Nutzer einen Event abfeuert, in 
dem n Knopf drückt indem er was 

264
00:14:02,470 --> 00:14:07,200
dropt oder ein Slider bewegt, 
dann ist es so, dass wenn es 

265
00:14:07,210 --> 00:14:10,460
nicht muss direkt abfängt wieder
im Client javascript. 

266
00:14:10,530 --> 00:14:12,890
Versteht quasi o. 
Und der hat den Slider 10 nach 

267
00:14:12,900 --> 00:14:14,830
10 nach rechts gemacht. 
Ich muss jetzt hier was Neues 

268
00:14:14,840 --> 00:14:18,290
anzeigen und wenn dafür keine 
Daten neu benötigt werden, wenn 

269
00:14:18,300 --> 00:14:22,140
das alles schon da ist und ne 
neue Anzeige da sein muss. 

270
00:14:22,850 --> 00:14:26,340
Dann mach das React direkt 
quasi, dann rendert das direkt 

271
00:14:26,350 --> 00:14:30,170
den neuen, den neuen Document 
Object Model hin und es passiert

272
00:14:30,180 --> 00:14:31,800
sofort. 
Da gibt es überhaupt keinen 

273
00:14:31,810 --> 00:14:34,360
keinen Traffic, entsteht kein 
Netzwerk Traffic zum. 

274
00:14:34,850 --> 00:14:36,690
Server in der Tabelle. 
Oder irgendwie sowas. 

275
00:14:36,930 --> 00:14:40,180
Genau so ne, wenn die Daten zum 
Beispiel wir ihr wisst ja, es 

276
00:14:40,190 --> 00:14:42,430
gibt ganz viele Caches im 
Browser ne, also ich hab es, 

277
00:14:42,440 --> 00:14:44,900
kann ja sein, dass die Daten 
schon quasi mit runtergeladen 

278
00:14:44,910 --> 00:14:48,220
hab auf meinen Klienten und dann
arbeitet React einfach nur noch 

279
00:14:48,230 --> 00:14:50,580
mit diesen Daten, filtert die 
manipuliert, die zeigt die 

280
00:14:50,590 --> 00:14:53,160
anders an und so weiter und der 
Server ist gar nicht mehr im 

281
00:14:53,170 --> 00:14:56,030
Game ja das macht es ja aus ne 
Single Page application. 

282
00:14:56,470 --> 00:14:59,610
Vielleicht schon mal gesehen, 
manchmal sogar, dass wenn die 

283
00:14:59,620 --> 00:15:01,390
richtig gut gemacht sind, viel 
gemacht haben. 

284
00:15:01,620 --> 00:15:04,110
Dann kannst du quasi mit seiner 
Anwendung noch arbeiten, obwohl 

285
00:15:04,120 --> 00:15:06,800
schon längst kein Internet mehr.
Ja wunderst dich dann irgendwie 

286
00:15:06,810 --> 00:15:08,970
so wirklich tatsächlich eine 
Datenbank Update kommen soll, 

287
00:15:08,980 --> 00:15:11,410
dann kriegst du ein Timeout. 
Ja, aber die Anwendung 

288
00:15:11,420 --> 00:15:13,490
funktioniert eigentlich ganz 
hervorragend, ist nicht sofort 

289
00:15:13,500 --> 00:15:16,380
weg, ja weil halt das Internet 
gar nicht gebraucht wird, weil 

290
00:15:16,390 --> 00:15:17,950
es quasi wie ein lokales 
Programm ist. 

291
00:15:17,960 --> 00:15:21,260
Ja und der Browser ist halt die 
Rendering Engine, also so läuft 

292
00:15:21,270 --> 00:15:25,790
es, ist jetzt auch noch total 
hohe Flug Ebene funktioniert und

293
00:15:25,800 --> 00:15:28,420
ich muss noch eine Sache sagen, 
ist auch wichtig, das ist glaube

294
00:15:28,430 --> 00:15:33,100
ich ziemlich einmalig. 
Bei React dieses Konzept des 

295
00:15:33,110 --> 00:15:36,800
virtuellen Doms, also im Prinzip
ist es so, du hast ja immer das,

296
00:15:36,810 --> 00:15:39,150
was du den Browser hingelegt 
hast, das führt, das kriegt er 

297
00:15:39,160 --> 00:15:40,680
gefüttert und dann zeigt er was 
an. 

298
00:15:40,690 --> 00:15:43,150
Ja, und jetzt wollen wir was 
verändern. 

299
00:15:44,260 --> 00:15:49,030
Und was jetzt React macht als 
als Software Library, sie baut 

300
00:15:49,040 --> 00:15:53,350
quasi einen einen virtuellen, 
einen virtuelle Version wie ein 

301
00:15:53,360 --> 00:15:56,220
Zwilling, einen virtuellen 
Zwilling von dieser Renner, von 

302
00:15:56,230 --> 00:16:00,440
diesem Rendering Dom auf. 
Und macht einen sehr cleveren 

303
00:16:00,450 --> 00:16:03,260
Abtausch nur für die Sachen, die
sich geändert haben. 

304
00:16:03,690 --> 00:16:07,020
Also es wird nicht ständig alles
neu angezeigt, sondern es wird 

305
00:16:07,030 --> 00:16:09,440
quasi nur das schnell 
ausgetauscht, was sich gerade 

306
00:16:09,450 --> 00:16:13,390
geändert hatte. 
Und damit kriegst du extrem 

307
00:16:13,430 --> 00:16:16,070
krassen Speed. 
Ja, also weil ne, dann kannst 

308
00:16:16,080 --> 00:16:17,750
du, kannst du die wildesten 
Sachen machen. 

309
00:16:17,760 --> 00:16:20,910
Ja und der Browser, der kriegt 
das alles nicht mit, ja der 

310
00:16:20,920 --> 00:16:23,990
kriegt immer nur vorgelegt, so 
hier, hier, hier, hier, hier und

311
00:16:24,000 --> 00:16:29,100
zeigt dann quasi an. 
OK, sind UJS und Angela JS ich 

312
00:16:29,110 --> 00:16:32,020
glaube, das waren die anderen 
beiden berühmten Libra Ries für 

313
00:16:32,030 --> 00:16:35,870
den gleichen Zweck funktionieren
die auch so ist das der gleiche 

314
00:16:35,880 --> 00:16:38,430
Anwendungsfälle bei denen. 
Ja, im Prinzip ist das der 

315
00:16:38,440 --> 00:16:41,920
gleiche Anwendungsfall. 
Es ist halt ne andere Art. 

316
00:16:42,800 --> 00:16:44,690
Und jetzt, da sind die halt 
unterschiedlich. 

317
00:16:44,700 --> 00:16:46,410
Ne. 
Also reactivity ist halt ne 

318
00:16:46,420 --> 00:16:49,130
Bibliothek und die hat ne 
interne API, also die hat eine 

319
00:16:49,140 --> 00:16:52,050
interne Vorstellung wie man 
sowas macht, dass man zum 

320
00:16:52,060 --> 00:16:54,450
Beispiel irgendwie ne andere 
Farbe setzt an den Knopf 

321
00:16:54,460 --> 00:16:57,660
überhaupt einmal und so weiter 
das ist halt unterschiedlich in 

322
00:16:57,670 --> 00:17:00,940
den verschiedenen Frameworks, 
aber an sich von der Technologie

323
00:17:00,950 --> 00:17:04,190
sind die sehr ähnlich, ja. 
Und ich sage auch noch was, wenn

324
00:17:04,200 --> 00:17:08,490
man jetzt quasi React eine 
Anwendung programmiert und dann 

325
00:17:08,500 --> 00:17:11,390
baut man sich irgendwas hin. 
Erzähl doch mal, wie das 

326
00:17:11,400 --> 00:17:13,380
funktioniert. 
Ja, dann kann man das auch immer

327
00:17:13,390 --> 00:17:15,730
live testen auf seinem Laptop, 
das ist ziemlich ziemlich toll. 

328
00:17:15,740 --> 00:17:18,339
Du kennst das Gerät, wenn du 
siehst, dass manche, also ich, 

329
00:17:18,349 --> 00:17:22,319
ich kann quasi im Quellcode 
tippen und live wetten, dass ich

330
00:17:22,329 --> 00:17:25,319
meinen Browser quasi mit dem, 
was ich gerade getippt hab, das 

331
00:17:25,329 --> 00:17:27,569
alles ganz cool das ist. 
Solange ich entwickle, kann ich 

332
00:17:27,579 --> 00:17:31,100
das so machen und wenn ich das 
jetzt quasi produktiv einsetzen 

333
00:17:31,110 --> 00:17:34,090
möchte, dann passiert so ne Art 
Compilation. 

334
00:17:35,160 --> 00:17:37,950
Also jetzt wird jetzt quasi 
dieser ganze React Code, den man

335
00:17:37,960 --> 00:17:40,550
sehr gut lesen kann, als 
Quellcode mit mit Identizierung 

336
00:17:40,560 --> 00:17:43,770
und so weiter und mit 
Kommentaren, der wird genommen 

337
00:17:43,810 --> 00:17:46,150
und da muss ich auch noch einen 
fallen lassen, da gibt es Tools 

338
00:17:46,160 --> 00:17:51,730
wie Web Pack und Babel. 
Die sind jetzt wichtig, weil die

339
00:17:51,740 --> 00:17:54,490
nehmen jetzt quasi diesen React 
Quellcode, der für mich als 

340
00:17:54,500 --> 00:17:57,290
Entwickler sehr einfach und klar
da liegt. 

341
00:17:58,220 --> 00:18:01,910
Und das wird jetzt quasi zu 
javascript Paketen gebündelt. 

342
00:18:01,920 --> 00:18:03,960
Von diesen sehr sehr mächtigen 
Tools. 

343
00:18:04,440 --> 00:18:07,390
Und Dennis ist ja so, dass wir 
ja nicht nur einen Browser in 

344
00:18:07,400 --> 00:18:10,420
der Welt haben, ja und auch nur 
eine Version von diesem Browser,

345
00:18:10,430 --> 00:18:13,100
es gibt ja unglaublich viele 
Browsers und die sind verhalten 

346
00:18:13,110 --> 00:18:15,540
sich auch unterschiedlich, je 
nachdem wo sind n Desktop 

347
00:18:15,550 --> 00:18:18,230
Browser ist nur ein bisschen 
anders als ein Mac Browser im 

348
00:18:18,280 --> 00:18:21,380
oder Safari da auf dem Telefon 
und so weiter und sofort und 

349
00:18:21,390 --> 00:18:25,330
dann guckst du Versionen 1615 14
Safari und beim Chrome auch und 

350
00:18:25,340 --> 00:18:27,950
weiter das ist ja auch ein 
Moving Target so das ist ja die 

351
00:18:27,960 --> 00:18:31,470
ganze Zeit ist das ja sich 
andauernd am Ende dann ne und da

352
00:18:31,480 --> 00:18:34,220
wirst du ja völlig bekloppt. 
Wenn du als Entwickler das alles

353
00:18:34,230 --> 00:18:37,230
wissen musst, so und dann für 
jeden Browser da irgendwie eine 

354
00:18:37,240 --> 00:18:40,190
entsprechende Ausnahme weiche 
und so weiter programmieren 

355
00:18:40,200 --> 00:18:41,570
muss. 
Ja, so war es früher übrigens 

356
00:18:41,580 --> 00:18:42,860
ja. 
Früher. 

357
00:18:42,870 --> 00:18:45,890
Musst du das genau wissen und du
musst deinen Quellcode und sagen

358
00:18:45,900 --> 00:18:48,790
hier, wenn das Safari ist, dann 
mach das ja wenn das Opera ist, 

359
00:18:48,800 --> 00:18:51,450
dann aber das ja und wenn das 
Internet Explorer ist, vergiss 

360
00:18:51,460 --> 00:18:53,510
es kannst du gar nicht machen, 
ja musst du irgendwie sagen, 

361
00:18:53,520 --> 00:18:56,030
hier tut mir leid. 
Ja, die Zeiten kenne ich sogar 

362
00:18:56,040 --> 00:18:58,350
auch noch ne, das dann auch 
manche einfach gesagt Pass mal 

363
00:18:58,360 --> 00:19:02,190
auf nutzt das jetzt in Chrome 
oder nutzt es halt in in in in 

364
00:19:02,230 --> 00:19:06,940
was weiß ich Mozilla und 
Internet Explorer Support und. 

365
00:19:07,130 --> 00:19:09,410
Und das war es dann. 
Genau, also ganz streng genommen

366
00:19:09,420 --> 00:19:12,390
ist dann quasi nicht mehr React 
selber, also dieses Web Pack und

367
00:19:12,400 --> 00:19:15,130
dieses Baby, das sind ja quasi 
verpackungs Tools, aber die sind

368
00:19:15,140 --> 00:19:19,030
halt dieses Ökosystem um React, 
das kommt halt mit als 

369
00:19:19,040 --> 00:19:20,890
Entwickler. 
Du sagst am Anfang immer create 

370
00:19:20,900 --> 00:19:23,710
React App und dann bekommst du 
dies alles mit und das ist 

371
00:19:23,720 --> 00:19:26,700
javascript Krams mit diesen 
ganzen javascript Sachen und 

372
00:19:26,710 --> 00:19:29,850
dann sagst du eigentlich noch 
mehr zusammen als als als 

373
00:19:29,860 --> 00:19:32,920
Produktions Paket und dann 
passiert diese ganze Magie, also

374
00:19:32,930 --> 00:19:35,310
dann wird dieses Javascript was 
du da geschrieben hast React 

375
00:19:35,420 --> 00:19:41,080
aufgepumpt, sodass das quasi für
jeden Browser optimal läuft. 

376
00:19:41,150 --> 00:19:43,790
Ja, und dass du das wird dann 
auch kondensiert, das wird 

377
00:19:43,800 --> 00:19:46,980
aneinander gehängt, dass das ein
ganz kleines Paket noch ist ja 

378
00:19:46,990 --> 00:19:49,820
auch total relevant, du willst 
ja, und das ist nämlich einer 

379
00:19:49,830 --> 00:19:53,650
der wichtigen Punkte, du lädst 
ja quasi, wenn du SPA eingepackt

380
00:19:53,660 --> 00:19:55,910
application hast, die ganze 
Anwendung runter, wenn du das 

381
00:19:55,920 --> 00:19:58,210
allererste mal da bist. 
Wenn du noch nie gesehen hast 

382
00:19:58,220 --> 00:20:00,570
vorher, dann musst du das ganze 
Programm runtergeladen werden, 

383
00:20:00,580 --> 00:20:03,110
das heißt, es ist wichtig, dass 
dieses Programm nicht zu groß 

384
00:20:03,120 --> 00:20:05,810
wird, also wir wollen jetzt 
keinen 20 Gigabyte Programm 

385
00:20:05,820 --> 00:20:08,370
haben, weil dann müsstest du ja,
wenn du auf diese Webseite 

386
00:20:08,380 --> 00:20:11,020
gehst, auf den Server gehst, 
erstmal 20 Gigabyte runterladen,

387
00:20:11,030 --> 00:20:13,180
ne, wir haben die Leute auf 
abbrechen gedrückt bevor du 

388
00:20:13,190 --> 00:20:16,650
irgendwas ankommt, ne? 
Und deswegen ist dieses wichtig,

389
00:20:16,660 --> 00:20:19,300
dass dieser diese bundling Tools
und so weiter das schaffen 

390
00:20:19,340 --> 00:20:23,140
deinen Code so schlank zusammen 
zu bündeln. 

391
00:20:23,180 --> 00:20:26,670
So ein bisschen wie ein zip, ja.
Also das stimmt wieder nicht 

392
00:20:26,680 --> 00:20:29,620
technisch also so ne Art kann 
man sich vorstellen, ne und dann

393
00:20:29,630 --> 00:20:32,410
hast du noch 23 Megabyte oder 
irgend sowas, ist dann quasi das

394
00:20:32,420 --> 00:20:35,040
Programm, das man gar nicht 
sieht, das passiert hier alles 

395
00:20:35,050 --> 00:20:38,020
so, aber es ist quasi ein 
Programm, das wird dann live 

396
00:20:38,030 --> 00:20:40,700
runtergeladen, dann ist schnell 
da und dann rendert und dann 

397
00:20:40,710 --> 00:20:44,100
geht es los ja und sobald es 
runtergeladen ist den Speed von 

398
00:20:44,140 --> 00:20:48,750
von von lokalem Krams so. 
Klein ist so n Programm 23 

399
00:20:48,760 --> 00:20:50,210
Megabyte. 
Genau. 

400
00:20:50,250 --> 00:20:52,730
Vielmehr ist das meistens nicht,
also wenn es größer wird, sagt 

401
00:20:52,740 --> 00:20:56,690
so, Oh, da musst du mal, da gibt
es Mittel und Wege, das klar zu 

402
00:20:56,700 --> 00:21:00,510
machen, aber genau tatsächlich 
ist unsere selbst unser Tool 

403
00:21:00,520 --> 00:21:03,380
ist. 
Wenn du initial runterlädst auch

404
00:21:03,390 --> 00:21:05,320
glaube ich nur 3 oder 4 
Megabyte. 

405
00:21:05,330 --> 00:21:07,870
Tatsächlich sehr krass. 
Das hätte ich nicht gedacht. 

406
00:21:08,070 --> 00:21:10,500
Und dann wird nachgeladen. 
Ne, also da gibt es also 

407
00:21:10,510 --> 00:21:13,020
manchmal braucht man auch ein 
bisschen mehr Platz quasi und 

408
00:21:13,030 --> 00:21:16,570
weil es ein großes Programm ist,
das können wir auch, da gibt es 

409
00:21:16,580 --> 00:21:20,360
sogenannte Lazy loading und so 
weiter Code Splitting nennt sich

410
00:21:20,370 --> 00:21:22,520
das tatsächlich auch total 
schick? 

411
00:21:22,530 --> 00:21:25,260
Ja, das kann man, muss man als 
Entwickler n bisschen sagen, du 

412
00:21:25,270 --> 00:21:28,180
kannst sagen OK wenn der Nutzer 
das erstmal runterlädt, dann 

413
00:21:28,190 --> 00:21:31,000
bist du ja quasi auf einer 
bestimmten Landing Page und du 

414
00:21:31,010 --> 00:21:34,260
willst quasi du musst ja nicht 
gleich jede Ecke und jede Ecke 

415
00:21:34,270 --> 00:21:37,060
und jedes Detail deiner ganzen 
Software da zeigen. 

416
00:21:37,430 --> 00:21:39,950
Kann ja gar nicht. 
Du zeigst immer nur einen Teil 

417
00:21:39,960 --> 00:21:41,660
an irgendwie. 
Du hast ja meistens irgendwie 

418
00:21:41,670 --> 00:21:44,620
Menüs und was nicht alles so, ja
dann kannst du sagen, OK, ich 

419
00:21:44,630 --> 00:21:47,430
bitte den Code und das erste was
runterladen ist erstmal nur die 

420
00:21:47,440 --> 00:21:52,740
andere Page und erst wenn ich 
davon weg navigiere, dann wird 

421
00:21:52,750 --> 00:21:54,680
irgendwie überhaupt nachgeladen 
beziehungsweise ist noch 

422
00:21:54,690 --> 00:21:57,930
cleverer. 
Es wird quasi die ein minimales 

423
00:21:57,940 --> 00:22:01,200
Paket gemacht, damit du ne gute 
Experience hast als User um 

424
00:22:01,210 --> 00:22:04,530
gleich irgendwas zu sehen. 
Und während du dann da rum 

425
00:22:04,540 --> 00:22:07,510
klickst, wird im Hintergrund 
nachgeladen, weil dann haben wir

426
00:22:07,520 --> 00:22:09,270
ganz viel Zeit. 
Ja dann hat der User, der 

427
00:22:09,280 --> 00:22:12,440
orientiert sich erstmal was hier
los und bevor der in den 

428
00:22:12,450 --> 00:22:14,970
nächsten Knopf drückt ist der 
ganze Rest schon im Hintergrund 

429
00:22:14,980 --> 00:22:19,570
nachgeladen worden und dann hast
du ne fließende fließenden UX, 

430
00:22:19,610 --> 00:22:21,340
also eine User Experience 
richtig gute. 

431
00:22:21,960 --> 00:22:25,610
Und ne richtig schnelle Loading 
Time und alles das sind alles so

432
00:22:25,620 --> 00:22:28,590
Sachen, so dass das erreichst du
halt einfach nicht bei bei 

433
00:22:28,600 --> 00:22:31,500
diesen klassischen Webdings und 
das ist alles sind alles Sachen 

434
00:22:31,510 --> 00:22:35,210
die bietet die React als 
Frameworks alles mit drin so es 

435
00:22:35,220 --> 00:22:38,750
hat ziemlich mächtig ja. 
Kein Wunder, dass das von ich 

436
00:22:38,760 --> 00:22:43,390
hab nachgeguckt 18 mindestens 
18000000 Websites genutzt wird. 

437
00:22:43,400 --> 00:22:46,170
Ja, wir wollen wir noch weiter 
in die Tiefe gehen, jetzt 

438
00:22:46,180 --> 00:22:48,690
technisch, ja was das bedeutet, 
ich kann es mir nicht so richtig

439
00:22:48,700 --> 00:22:51,530
vorstellen, was man da noch so 
erörtern müsste. 

440
00:22:51,540 --> 00:22:55,070
Ja und wissen müsste als Laie 
jetzt über React, weil mal 

441
00:22:55,080 --> 00:22:56,480
ehrlich, ich benutzen werde ich 
nicht. 

442
00:22:56,700 --> 00:23:01,130
Sehen tu ich's nicht. 
Wie weit müssen wir da noch 

443
00:23:01,140 --> 00:23:03,050
rein? 
Ich hätte schon ganz gerne 

444
00:23:03,060 --> 00:23:04,850
vollgemacht, ein bisschen tiefer
einzugehen. 

445
00:23:04,920 --> 00:23:08,700
Gibt vielleicht Leute, die. 
Nicht selber mit etwas spielen 

446
00:23:08,710 --> 00:23:11,720
wollen und so weiter da kann man
klar, das ist ein bisschen, wir 

447
00:23:11,730 --> 00:23:15,450
können aber auch gern, wir haben
jetzt schon bisschen einer 2. 

448
00:23:15,460 --> 00:23:17,230
Folge machen und n bisschen 
vertieft. 

449
00:23:17,820 --> 00:23:21,360
Ansprechen, dann eine 
Detailfrage React, Deep Dive 

450
00:23:21,370 --> 00:23:23,180
oder irgend sowas. 
Was mich jetzt noch 

451
00:23:23,190 --> 00:23:25,960
interessieren würde, ist wieder 
zurückzukommen auf die anderen 

452
00:23:25,970 --> 00:23:30,240
Frameworks Angular und Future. 
Es ist dann Geschmackssache was 

453
00:23:30,250 --> 00:23:33,700
ich nehme oder ist es dann 
wirklich n harter technischer 

454
00:23:33,710 --> 00:23:36,480
Vergleich oder wie kommt man 
dazu ein bestimmtes Framework 

455
00:23:36,490 --> 00:23:38,730
auszuwählen oder eine bestimmte 
Library? 

456
00:23:38,740 --> 00:23:41,080
Ne woran orientiere ich mich an 
den Kollegen? 

457
00:23:41,090 --> 00:23:44,820
Kriege ich eine Vorgabe? 
Du darfst jetzt entscheiden als 

458
00:23:44,830 --> 00:23:48,870
als als nicht nur.de aber auch 
technischer Leiter der Firma du 

459
00:23:48,880 --> 00:23:51,570
machst einfach wie kommst du 
drauf und wie lief das? 

460
00:23:51,640 --> 00:23:54,250
Möglicherweise woanders gibt es 
verschiedene Meinungen und und 

461
00:23:54,260 --> 00:23:57,180
wird dann verglichen. 
Ne wenn ich jetzt über Marketing

462
00:23:57,190 --> 00:23:59,420
und Sales nachdenke und wieder 
neues Tool einführen wollen, 

463
00:23:59,430 --> 00:24:03,140
dann mal schöne und vergleichen 
ja und gucken uns alles mal ein 

464
00:24:03,150 --> 00:24:06,500
bisschen rum, hast ja meistens 
14 Tage gratis Zeiträume oder 

465
00:24:06,510 --> 00:24:09,910
sowas und dann entscheidest du 
dich ne und wie kommt man da im 

466
00:24:10,450 --> 00:24:13,560
wie ist das Programmieren? 
Und das ist eine eine ganz 

467
00:24:13,570 --> 00:24:15,700
entscheidende, kritische, krasse
Frage. 

468
00:24:15,710 --> 00:24:19,120
So, ja, das ist da gibt es 
Diskussionen, die sind richtig 

469
00:24:19,130 --> 00:24:21,830
lang und haarig, denn das ist 
ja, also, ich sag mal, wenn du 

470
00:24:21,840 --> 00:24:24,400
dich für Anwendungsprogramme 
entscheidest, für Sales, dann 

471
00:24:24,410 --> 00:24:26,450
hast du natürlich auch. 
Gut, dann siehst du alles um, 

472
00:24:26,460 --> 00:24:28,830
posiert vielleicht den Kontakt 
und so weiter und wenn du dann 

473
00:24:28,840 --> 00:24:32,370
doch nicht so toll findest. 
Aber wenn du natürlich irgendwie

474
00:24:32,660 --> 00:24:35,060
im schlimmsten Fall sogar selber
eine Software Company bist und 

475
00:24:35,070 --> 00:24:38,470
und und willst ein digitales 
Produkt rausbringen, ist das ja 

476
00:24:38,480 --> 00:24:41,610
sowas von essentiell für was du 
dich am Anfang entscheidest. 

477
00:24:41,620 --> 00:24:44,670
Das ist eine eine ganz wichtig 
und krasse Entscheidung, welches

478
00:24:44,680 --> 00:24:48,050
Web Framework du nimmst, weil es
überhaupt nicht klar und 

479
00:24:48,060 --> 00:24:51,650
einfach, wenn du dich einmal für
React oder oder View oder Angela

480
00:24:51,660 --> 00:24:55,020
entschieden hast und hast, dann.
Ordentlich mannstunden da 

481
00:24:55,060 --> 00:24:57,760
reingepackt, dann kommst du 
nicht mehr raus, so schnell. 

482
00:24:57,770 --> 00:25:00,570
Ja das, also das Regieren auf 
ein anderes Framework, die sind 

483
00:25:00,580 --> 00:25:03,800
sehr unterschiedlich, das ist 
der Wahnsinn, so, ja da muss man

484
00:25:03,810 --> 00:25:07,030
360 Grad Frage stellen, so ja da
muss man alles angucken, was 

485
00:25:07,040 --> 00:25:09,700
einem wichtig ist. 
Wie groß ist das Projekt? 

486
00:25:10,280 --> 00:25:12,780
Was will ich damit machen und so
weiter man muss sich genau 

487
00:25:12,790 --> 00:25:15,360
angucken, wo sind diese 
Frameworks unterschiedlich, ja 

488
00:25:15,370 --> 00:25:18,450
welche haben was für Vorteile, 
wie ist die Community, ist der 

489
00:25:18,460 --> 00:25:22,050
Support wie Dokumentation, wo 
finde ich am meisten Entwickler.

490
00:25:22,370 --> 00:25:26,680
Ich sage immer es ist schlecht 
wenn das nimmt was am Markt am 

491
00:25:26,690 --> 00:25:29,540
häufigsten vertreten ist, dass 
es wirtschaftlich sinnvoll, weil

492
00:25:29,810 --> 00:25:32,380
dann findest du auch die meisten
Entwickler, zum Beispiel ja die 

493
00:25:32,390 --> 00:25:34,530
meisten Leute die sich auskennen
und wenn es am meisten genutzt 

494
00:25:34,540 --> 00:25:37,780
wird, dann hast du auch die 
typischerweise Dokumentation und

495
00:25:37,820 --> 00:25:40,640
als Open Source schnellsten 
Lösungen, wenn es Probleme gibt.

496
00:25:41,740 --> 00:25:44,690
Das ist aber auch nur das ist 
kann nur ein Argument sein 

497
00:25:44,700 --> 00:25:48,590
dafür, was ich sagen kann. 
Ich muss sagen, ich bin selber, 

498
00:25:48,630 --> 00:25:51,490
ich mach schon lange recht, ich 
liebe das, für mich kommt nichts

499
00:25:51,500 --> 00:25:54,530
anderes in frage, ich bin aber 
auch gar nicht so tief drin in 

500
00:25:54,540 --> 00:25:57,970
den anderen, ich hab en bisschen
Angela mal gemacht und weiß 

501
00:25:57,980 --> 00:26:02,050
ungefähr was da los ist. 
Wie uns Welte in mich nur 

502
00:26:02,060 --> 00:26:03,760
informiert, aber nicht selber 
genutzt. 

503
00:26:04,640 --> 00:26:09,100
Man kann aber sagen, von diesen 
Frameworks React das wenige, was

504
00:26:09,110 --> 00:26:12,560
dir am meisten Spielraum lässt, 
verrückte Sachen zu tun. 

505
00:26:13,310 --> 00:26:18,000
Denn also Frameworks haben ja 
manchmal ne, ja, die haben ja ne

506
00:26:18,010 --> 00:26:21,190
Idee wie du was zu tun hast, wie
du was umzusetzen hast. 

507
00:26:22,040 --> 00:26:25,460
Und reacts Idee lässt ja am 
meisten Freiräume. 

508
00:26:25,660 --> 00:26:27,810
Damit kannst du echt bildest. 
Die wildesten. 

509
00:26:27,820 --> 00:26:29,770
Also du kannst ja einfach 
hinsetzen und überlegst dir was 

510
00:26:29,780 --> 00:26:32,270
ganz krasses, so wie du es gerne
hättest im Web und du kriegst 

511
00:26:32,280 --> 00:26:35,090
direkt umgesetzt. 
Ja, also Angela ist zum Beispiel

512
00:26:35,100 --> 00:26:37,710
mehr Geist. 
Ja, da gibt es genaue 

513
00:26:37,720 --> 00:26:41,390
Splittings, da musst du HTML 
TRENNEN vom CSS, vom vom 

514
00:26:41,400 --> 00:26:44,110
javascript Code, da gibt es 
bestimmte Art und Weise wie du 

515
00:26:44,120 --> 00:26:47,870
das A wie du den wie du den Code
aufbereiten musst und wie Sachen

516
00:26:47,880 --> 00:26:50,440
passieren. 
Da wird es dann schwieriger 

517
00:26:50,450 --> 00:26:52,540
auszubrechen. 
Wenn du jetzt nicht den ganz 

518
00:26:52,550 --> 00:26:57,170
klassischen Standard Webcams 
machst, sag ich mal so und bei 

519
00:26:57,180 --> 00:26:59,620
kann immer ausbrechen, ohne dass
sie sich schlecht anfühlt. 

520
00:26:59,630 --> 00:27:02,780
So ja und wir sprechen zum 
Beispiel auch ziemlich krass aus

521
00:27:02,790 --> 00:27:04,420
so. 
Also ich würde sagen, wir machen

522
00:27:04,430 --> 00:27:07,980
ja so low Code Plattform, das 
ist jetzt weg von diesen ganz 

523
00:27:07,990 --> 00:27:11,080
klassischen Standard 
Webanwendung, also wir haben wir

524
00:27:11,090 --> 00:27:14,940
haben alles drinne Drop und und 
und kann was und was nicht alles

525
00:27:14,950 --> 00:27:16,970
so ja und das geht mit Recht 
besonders gut. 

526
00:27:17,630 --> 00:27:19,640
Aber am Ende ist es 
Geschmackssache. 

527
00:27:20,130 --> 00:27:22,750
Gut Geschmackssache und dann 
musst du auch gucken, was hör 

528
00:27:22,760 --> 00:27:24,710
ich jetzt zumindest aus der 
technischen Anforderungen sind 

529
00:27:24,720 --> 00:27:28,270
und sind sie überhaupt Bilder? 
Ja, wenn wenn sich Angela zum 

530
00:27:28,280 --> 00:27:31,310
Beispiel in. 
Ja, gewisse Schranken oder 

531
00:27:31,320 --> 00:27:34,860
gewisse, Ja Leitplanken. 
Leitplanken. 

532
00:27:34,900 --> 00:27:37,670
Wenn du jetzt, wenn du jetzt 
Angela dich ins Leitplanken 

533
00:27:37,680 --> 00:27:41,020
packt und du willst vielleicht 
ja n Plattform bauen, gehst du 

534
00:27:41,030 --> 00:27:43,630
nicht zum OK. 
Cool, schöner Einblick. 

535
00:27:43,700 --> 00:27:48,460
Das heißt, wenn jemand bei uns 
ins Team kommt und für Frontend 

536
00:27:48,500 --> 00:27:50,850
zuständig ist, dann ist es 
recht, ja. 

537
00:27:51,200 --> 00:27:53,350
Das ist ja genau ja genau alles 
klar. 

538
00:27:53,690 --> 00:27:57,470
Ja, wir sind tatsächlich auch 
gerade dabei, wir suchen für 

539
00:27:57,480 --> 00:28:00,150
nächstes Jahr jemand, der 
vielleicht sogar den schwarzen 

540
00:28:00,160 --> 00:28:01,880
Gürtel, sag ich immer den 
schwarzen Gürtel trägt 

541
00:28:01,890 --> 00:28:05,160
irgendwie, ich weiß nicht, ob 
ihr auch mal Entwickler zuhört. 

542
00:28:05,230 --> 00:28:07,890
Wahrscheinlich ist das 
eigentlich zu High Level für 

543
00:28:07,900 --> 00:28:10,370
diejenigen, die, die wir jetzt 
hier ansprechen wollen. 

544
00:28:10,380 --> 00:28:13,000
Aber ja, vielleicht spricht 
sich's rum oder sowas. 

545
00:28:13,040 --> 00:28:16,050
Jemand der sehr sehr gut wirkt 
kann, der darf gerne mal hier 

546
00:28:16,270 --> 00:28:19,600
sogar anrufen, bin ich sehr 
interessiert. 

547
00:28:19,710 --> 00:28:23,490
Ja, wir machen keine Werbung, 
aber aber das darf man ruhig mal

548
00:28:23,500 --> 00:28:24,910
sagen, ja. 
Ich denke auch, ja. 

549
00:28:24,920 --> 00:28:27,390
Genau cool. 
Dann würde ich jetzt uns den 

550
00:28:27,400 --> 00:28:31,410
Rest aufheben für die Folge 
eines Tages dann ne, wir haben 

551
00:28:31,420 --> 00:28:33,950
noch ne gute Liste an Themen, 
aber das können wir auch 

552
00:28:33,960 --> 00:28:36,540
mitnehmen. 
Ja, das machen wir. 

553
00:28:36,550 --> 00:28:39,230
Ich glaube, das kann man auch 
mal erklären, selbst wenn man 

554
00:28:39,240 --> 00:28:42,340
nicht entwickelt. 
Ja, ich bin gespannt, weil so ne

555
00:28:42,380 --> 00:28:45,270
ne Software Bibliothek auf der 
Tonspur. 

556
00:28:46,100 --> 00:28:49,090
Wenn manche Leute, so wie ich, 
ja nicht mal irgendwie so, also 

557
00:28:49,100 --> 00:28:51,540
wir haben alle schon mal 
gesehen, aber so sagt mir halt 

558
00:28:51,550 --> 00:28:56,130
nicht, druckt die Matrix. 
Die Matrix ja genau, ja mal 

559
00:28:56,140 --> 00:28:58,250
gucken, vielleicht auch nicht, 
aber insofern haben wir heute 

560
00:28:58,260 --> 00:29:01,290
eine gemacht, die auch schon ein
bisschen Erleuchtung gegeben 

561
00:29:01,300 --> 00:29:02,630
hat. 
Was das so ist. 

562
00:29:03,630 --> 00:29:06,410
Absolut nicht gut, ja richtig 
gut. 

563
00:29:06,420 --> 00:29:11,210
Ja, danke, Burkhard und dann 
machen wir zu und sagen wir bis 

564
00:29:11,250 --> 00:29:15,100
nächste Woche dann bei einfach. 
Jetzt kommt diese schöne Musik, 

565
00:29:15,750 --> 00:29:19,670
es klar machs gut, Tschüss 
Hamburg ciao.