WEBVTT

1
00:00:02.015 --> 00:00:03.205
<00:00:02.015>Thank <00:00:02.282>you <00:00:02.550>for <00:00:02.818>joining <00:00:03.086>me,

2
00:00:03.705 --> 00:00:06.765
<00:00:03.705>and <00:00:03.832>I <00:00:03.959>hope <00:00:04.086>I <00:00:04.214>can <00:00:04.341>deliver, <00:00:04.468>uh, <00:00:04.595>uh, <00:00:04.723>a <00:00:04.850>lot <00:00:04.977>of <00:00:05.105>value

3
00:00:06.765 --> 00:00:08.285
<00:00:06.765>to <00:00:06.992>you <00:00:07.221>together <00:00:07.449>with <00:00:07.677>my <00:00:07.905>colleague <00:00:08.133>Felix.

4
00:00:08.905 --> 00:00:11.285
<00:00:08.905>Uh, <00:00:09.080>he's <00:00:09.254>remote. <00:00:09.430>Maybe <00:00:09.604>you <00:00:09.780>can <00:00:09.954>check <00:00:10.129>the <00:00:10.305>sound.

5
00:00:11.345 --> 00:00:15.605
<00:00:11.345>Can <00:00:11.520>you <00:00:11.695>say <00:00:11.870>something? <00:00:12.045>Felix, <00:00:12.220>can <00:00:12.395>you <00:00:12.570>hear <00:00:12.745>him?

6
00:00:15.905 --> 00:00:20.485
<00:00:15.905>Did <00:00:16.105>he <00:00:16.305>say <00:00:16.505>something? <00:00:16.705>That <00:00:16.904>is <00:00:17.105>not <00:00:17.305>good.

7
00:00:22.595 --> 00:00:23.605
<00:00:22.595>They <00:00:22.898>cannot <00:00:23.201>hear <00:00:23.504>you.

8
00:00:24.935 --> 00:00:27.765
<00:00:24.935>Hello, <00:00:25.090>Berlin? <00:00:25.246>Ah, <00:00:25.401>no, <00:00:25.557>they <00:00:25.712>can <00:00:25.868>hear <00:00:26.023>you. <00:00:26.179>Oh, <00:00:26.334>sorry.

9
00:00:27.875 --> 00:00:30.285
<00:00:27.875>That <00:00:28.075>was <00:00:28.275>on <00:00:28.475>my <00:00:28.675>side. <00:00:28.875>Welcome <00:00:29.075>looking <00:00:29.275>forward.

10
00:00:31.035 --> 00:00:32.965
<00:00:31.035>Demo. <00:00:31.268>So <00:00:31.501>we <00:00:31.735>checked <00:00:31.968>that <00:00:32.201>before. <00:00:32.435>Awesome.

11
00:00:33.305 --> 00:00:34.605
<00:00:33.305>So <00:00:33.539>he's <00:00:33.772>later <00:00:34.007>going <00:00:34.241>to <00:00:34.474>join

12
00:00:34.945 --> 00:00:38.205
<00:00:34.945>and, <00:00:35.100>uh, <00:00:35.256>show <00:00:35.411>us <00:00:35.567>some <00:00:35.722>live <00:00:35.878>demo, <00:00:36.033>um, <00:00:36.189>of <00:00:36.345>HTMX.

13
00:00:38.265 --> 00:00:42.205
<00:00:38.265>But <00:00:38.381>before <00:00:38.498>the, <00:00:38.615>uh, <00:00:38.731>we <00:00:38.848>dive <00:00:38.965>into <00:00:39.081>the <00:00:39.198>topic, <00:00:39.315>um, <00:00:39.431>who <00:00:39.548>have <00:00:39.665>you

14
00:00:42.205 --> 00:00:45.245
<00:00:42.205>as <00:00:42.360>a <00:00:42.516>frontend <00:00:42.671>developer <00:00:42.827>or <00:00:42.982>develops <00:00:43.138>a <00:00:43.293>full <00:00:43.449>stack <00:00:43.605>developer.

15
00:00:45.245 --> 00:00:47.165
<00:00:45.245>Okay. <00:00:45.419>Okay. <00:00:45.595>Okay. <00:00:45.769>Okay. <00:00:45.945>Everybody <00:00:46.120>is <00:00:46.294>a <00:00:46.470>developer. <00:00:46.644>Okay.

16
00:00:47.165 --> 00:00:49.605
<00:00:47.165>Okay. <00:00:47.445>Okay, <00:00:47.725>great. <00:00:48.004>So, <00:00:48.285>um, <00:00:48.565>who

17
00:00:49.605 --> 00:00:51.125
<00:00:49.605>of <00:00:49.833>you <00:00:50.061>is <00:00:50.289>using <00:00:50.516>single <00:00:50.745>page <00:00:50.973>applications

18
00:00:51.145 --> 00:00:52.285
<00:00:51.145>for <00:00:51.487>their <00:00:51.829>frontend <00:00:52.171>development?

19
00:00:53.005 --> 00:00:54.525
<00:00:53.005>A <00:00:53.233>lot <00:00:53.461>of <00:00:53.689>you. <00:00:53.917>Okay. <00:00:54.144>Awesome. <00:00:54.373>Awesome.

20
00:00:56.105 --> 00:00:58.165
<00:00:56.105>Who <00:00:56.338>have <00:00:56.571>you <00:00:56.805>actually <00:00:57.038>likes <00:00:57.271>doing <00:00:57.504>that?

21
00:01:00.885 --> 00:01:04.365
<00:01:00.885>A <00:01:01.025>fewer <00:01:01.165>hands, <00:01:01.305>but <00:01:01.445>also <00:01:01.585>a <00:01:01.724>lot <00:01:01.864>of <00:01:02.004>hands. <00:01:02.144>Okay. <00:01:02.285>Okay.

22
00:01:05.105 --> 00:01:07.445
<00:01:05.105>Uh, <00:01:05.280>who <00:01:05.455>of <00:01:05.630>you <00:01:05.805>thinks, <00:01:05.980>uh, <00:01:06.155>thinks <00:01:06.330>a <00:01:06.505>lot,

23
00:01:07.445 --> 00:01:09.645
<00:01:07.445>that <00:01:07.600>there <00:01:07.756>should <00:01:07.911>be <00:01:08.067>a <00:01:08.222>different <00:01:08.378>approach <00:01:08.533>of <00:01:08.689>doing <00:01:08.845>that?

24
00:01:09.735 --> 00:01:14.525
<00:01:09.735>Maybe <00:01:09.875>like <00:01:10.015>some <00:01:10.155>slicker <00:01:10.295>pro. <00:01:10.435>Okay. <00:01:10.575>Not <00:01:10.715>so <00:01:10.855>many <00:01:10.995>hands. <00:01:11.135>Great.

25
00:01:15.225 --> 00:01:18.165
<00:01:15.225>Uh, <00:01:15.365>that <00:01:15.505>is <00:01:15.645>nice <00:01:15.785>because <00:01:15.925>then <00:01:16.065>I <00:01:16.205>can, <00:01:16.345>uh, <00:01:16.485>convince <00:01:16.625>you

26
00:01:18.195 --> 00:01:19.685
<00:01:18.195>that <00:01:18.463>there <00:01:18.731>is <00:01:18.999>a <00:01:19.267>better <00:01:19.536>approach

27
00:01:19.905 --> 00:01:22.045
<00:01:19.905>and <00:01:20.138>that <00:01:20.371>there <00:01:20.605>might <00:01:20.838>be, <00:01:21.071>um, <00:01:21.305>value

28
00:01:22.185 --> 00:01:24.125
<00:01:22.185>to <00:01:22.418>dig <00:01:22.651>deeper <00:01:22.885>into <00:01:23.118>doing <00:01:23.351>that <00:01:23.585>differently.

29
00:01:25.185 --> 00:01:27.125
<00:01:25.185>We <00:01:25.385>are <00:01:25.585>not <00:01:25.785>going <00:01:25.985>to <00:01:26.185>introduce <00:01:26.385>ourselves <00:01:26.585>anymore,

30
00:01:27.185 --> 00:01:29.645
<00:01:27.185>so <00:01:27.360>just <00:01:27.535>go <00:01:27.710>deep, <00:01:27.885>uh, <00:01:28.060>immediately <00:01:28.235>into <00:01:28.410>the <00:01:28.585>topic.

31
00:01:30.665 --> 00:01:34.085
<00:01:30.664>Um, <00:01:30.820>I <00:01:30.976>first <00:01:31.131>came <00:01:31.287>to, <00:01:31.442>to, <00:01:31.598>uh, <00:01:31.753>to <00:01:31.909>all <00:01:32.065>of

32
00:01:34.085 --> 00:01:39.005
<00:01:34.085>that <00:01:34.240>new <00:01:34.396>approach <00:01:34.551>2018 <00:01:34.707>when, <00:01:34.862>uh, <00:01:35.018>DHH <00:01:35.173>uh, <00:01:35.329>developed <00:01:35.485>Hotwire.

33
00:01:39.585 --> 00:01:41.365
<00:01:39.585>Um, <00:01:39.818>I <00:01:40.051>actually <00:01:40.285>met <00:01:40.518>him <00:01:40.751>yesterday <00:01:40.985>evening,

34
00:01:41.495 --> 00:01:42.605
<00:01:41.495>super <00:01:41.994>fanboy <00:01:42.493>moment.

35
00:01:42.705 --> 00:01:45.685
<00:01:42.705>We <00:01:42.860>talked <00:01:43.016>a <00:01:43.171>lot. <00:01:43.327>And, <00:01:43.482>um, <00:01:43.638>yeah, <00:01:43.793>I, <00:01:43.949>I, <00:01:44.105>uh,

36
00:01:45.685 --> 00:01:47.885
<00:01:45.685>started <00:01:46.035>out <00:01:46.385>using <00:01:46.735>Hotwire <00:01:47.085>2018,

37
00:01:47.985 --> 00:01:51.645
<00:01:47.985>and, <00:01:48.125>um, <00:01:48.265>I <00:01:48.405>introduced <00:01:48.545>that <00:01:48.685>to <00:01:48.825>Felix, <00:01:48.965>um, <00:01:49.105>uh, <00:01:49.245>my <00:01:49.385>colleague,

38
00:01:52.225 --> 00:01:56.125
<00:01:52.225>and <00:01:52.352>we <00:01:52.479>kind <00:01:52.606>of <00:01:52.734>both <00:01:52.861>found <00:01:52.988>that <00:01:53.115>it's, <00:01:53.243>uh, <00:01:53.370>very, <00:01:53.497>very <00:01:53.625>helpful.

39
00:01:56.425 --> 00:02:00.725
<00:01:56.425>And <00:01:56.565>we <00:01:56.705>got <00:01:56.845>immediately <00:01:56.985>deeper <00:01:57.125>into <00:01:57.265>that <00:01:57.405>a <00:01:57.545>few <00:01:57.685>years <00:01:57.825>later,

40
00:02:00.985 --> 00:02:04.885
<00:02:00.985>um, <00:02:01.112>a <00:02:01.239>very <00:02:01.366>famous <00:02:01.494>CTO <00:02:01.621>here <00:02:01.748>in <00:02:01.875>Germany <00:02:02.003>from <00:02:02.130>a <00:02:02.257>big <00:02:02.385>company,

41
00:02:05.225 --> 00:02:08.285
<00:02:05.225>um, <00:02:05.399>also <00:02:05.574>found <00:02:05.750>a <00:02:05.925>Hotwire <00:02:06.100>as <00:02:06.274>a <00:02:06.449>very, <00:02:06.625>uh,

42
00:02:08.565 --> 00:02:11.085
<00:02:08.565>interesting <00:02:08.845>framework <00:02:09.125>and <00:02:09.405>also <00:02:09.685>mentioned <00:02:09.965>HTMX

43
00:02:11.185 --> 00:02:14.485
<00:02:11.185>and, <00:02:11.535>um, <00:02:11.885>as, <00:02:12.235>um, <00:02:12.585>alternatives.

44
00:02:15.065 --> 00:02:17.605
<00:02:15.065>So <00:02:15.265>it, <00:02:15.465>it, <00:02:15.665>it <00:02:15.865>slowly <00:02:16.065>gained <00:02:16.265>traction, <00:02:16.465>right?

45
00:02:17.905 --> 00:02:20.685
<00:02:17.905>Um, <00:02:18.605>and, <00:02:19.305>Uh,

46
00:02:21.065 --> 00:02:23.085
<00:02:21.065>the <00:02:21.240>question <00:02:21.415>is <00:02:21.590>why <00:02:21.765>do <00:02:21.940>we <00:02:22.115>find <00:02:22.290>it <00:02:22.465>interesting?

47
00:02:23.145 --> 00:02:25.725
<00:02:23.145>Why <00:02:23.345>do, <00:02:23.545>uh, <00:02:23.745>CTOs, <00:02:23.945>uh, <00:02:24.145>find <00:02:24.345>it <00:02:24.545>interesting?

48
00:02:26.865 --> 00:02:29.005
<00:02:26.865>And <00:02:27.020>that's <00:02:27.176>what <00:02:27.331>I'm <00:02:27.487>going <00:02:27.642>to <00:02:27.798>tell <00:02:27.953>you <00:02:28.109>now, <00:02:28.265>right?

49
00:02:29.105 --> 00:02:32.645
<00:02:29.105>So, <00:02:29.232>um, <00:02:29.359>we, <00:02:29.486>we, <00:02:29.614>we <00:02:29.741>currently <00:02:29.868>live <00:02:29.995>in <00:02:30.123>a <00:02:30.250>world <00:02:30.377>where <00:02:30.505>it's,

50
00:02:32.675 --> 00:02:37.045
<00:02:32.675>it's <00:02:32.830>totally <00:02:32.986>usual <00:02:33.141>for <00:02:33.297>us <00:02:33.452>to, <00:02:33.608>um, <00:02:33.763>use <00:02:33.919>SPA <00:02:34.075>frameworks

51
00:02:37.625 --> 00:02:38.645
<00:02:37.625>per <00:02:38.084>default, <00:02:38.543>right?

52
00:02:38.745 --> 00:02:40.445
<00:02:38.745>So <00:02:38.945>I, <00:02:39.145>I <00:02:39.345>mean, <00:02:39.545>we <00:02:39.745>saw <00:02:39.945>the <00:02:40.145>hands.

53
00:02:41.025 --> 00:02:42.365
<00:02:41.025>The <00:02:41.197>first <00:02:41.369>thing <00:02:41.541>we <00:02:41.714>do <00:02:41.886>when <00:02:42.058>we <00:02:42.231>think

54
00:02:42.365 --> 00:02:44.485
<00:02:42.365>of <00:02:42.565>developing <00:02:42.765>front <00:02:42.965>end <00:02:43.165>is <00:02:43.365>let's <00:02:43.565>use <00:02:43.765>React.

55
00:02:44.655 --> 00:02:48.125
<00:02:44.655>Let's <00:02:44.855>use <00:02:45.055>view, <00:02:45.255>let's <00:02:45.455>use <00:02:45.655>sslt, <00:02:45.855>whatever. <00:02:46.055>Yeah.

56
00:02:48.125 --> 00:02:50.565
<00:02:48.125>And, <00:02:48.280>and <00:02:48.436>if <00:02:48.591>we <00:02:48.747>do <00:02:48.902>that <00:02:49.058>with <00:02:49.213>multiple <00:02:49.369>teams, <00:02:49.525>um,

57
00:02:50.865 --> 00:02:54.205
<00:02:50.865>we <00:02:51.040>have <00:02:51.215>something <00:02:51.390>often <00:02:51.565>now <00:02:51.740>that <00:02:51.915>that <00:02:52.090>like <00:02:52.265>Astro

58
00:02:54.345 --> 00:02:58.845
<00:02:54.345>or <00:02:54.472>some <00:02:54.599>app <00:02:54.726>reppers <00:02:54.854>that, <00:02:54.981>that <00:02:55.108>help <00:02:55.235>us <00:02:55.363>to, <00:02:55.490>to <00:02:55.617>create, <00:02:55.745>uh,

59
00:02:59.265 --> 00:03:01.805
<00:02:59.265>one <00:02:59.420>thing <00:02:59.576>of <00:02:59.731>each <00:02:59.887>application <00:03:00.042>over <00:03:00.198>multiple <00:03:00.353>teams, <00:03:00.509>which <00:03:00.665>is,

60
00:03:01.805 --> 00:03:04.165
<00:03:01.805>again, <00:03:02.085>more <00:03:02.365>complexity, <00:03:02.645>another <00:03:02.925>JavaScript <00:03:03.205>framework.

61
00:03:04.165 --> 00:03:06.045
<00:03:04.165>And <00:03:04.364>we <00:03:04.565>are <00:03:04.765>just <00:03:04.965>kind <00:03:05.165>of <00:03:05.364>like <00:03:05.565>doing

62
00:03:06.045 --> 00:03:08.765
<00:03:06.045>that <00:03:06.244>without <00:03:06.445>maybe <00:03:06.644>thinking <00:03:06.845>a <00:03:07.045>lot <00:03:07.244>about <00:03:07.445>that.

63
00:03:08.985 --> 00:03:11.565
<00:03:08.985>Um, <00:03:09.125>I <00:03:09.265>don't <00:03:09.405>know, <00:03:09.545>but <00:03:09.685>it's, <00:03:09.825>it's <00:03:09.965>just <00:03:10.105>the <00:03:10.245>default, <00:03:10.385>right?

64
00:03:11.885 --> 00:03:14.365
<00:03:11.885>Nowadays. <00:03:12.084>And, <00:03:12.285>um, <00:03:12.484>we <00:03:12.685>did <00:03:12.885>that <00:03:13.084>as <00:03:13.285>well

65
00:03:14.365 --> 00:03:15.525
<00:03:14.365>for <00:03:14.626>one <00:03:14.887>of <00:03:15.148>our <00:03:15.409>projects.

66
00:03:15.705 --> 00:03:16.765
<00:03:15.705>Um, <00:03:15.895>and <00:03:16.086>it <00:03:16.277>looked <00:03:16.468>like <00:03:16.659>this.

67
00:03:17.905 --> 00:03:20.845
<00:03:17.905>And <00:03:18.045>when <00:03:18.185>we <00:03:18.325>developed <00:03:18.465>it, <00:03:18.605>uh, <00:03:18.745>we <00:03:18.885>came <00:03:19.025>across <00:03:19.165>bug, <00:03:19.305>um,

68
00:03:21.485 --> 00:03:22.725
<00:03:21.485>I <00:03:21.644>mean, <00:03:21.803>you <00:03:21.963>have <00:03:22.122>that <00:03:22.282>as <00:03:22.441>well, <00:03:22.601>right?

69
00:03:23.105 --> 00:03:24.165
<00:03:23.105>Coming <00:03:23.582>across <00:03:24.059>bug.

70
00:03:24.905 --> 00:03:27.405
<00:03:24.905>And, <00:03:25.080>um, <00:03:25.255>then <00:03:25.430>we <00:03:25.605>needed <00:03:25.780>to <00:03:25.955>debug <00:03:26.130>this, <00:03:26.305>um,

71
00:03:27.545 --> 00:03:29.965
<00:03:27.545>and <00:03:27.720>we <00:03:27.895>dig <00:03:28.070>deep <00:03:28.245>into <00:03:28.420>the <00:03:28.595>code <00:03:28.770>of <00:03:28.945>Astro,

72
00:03:30.065 --> 00:03:33.005
<00:03:30.065>and <00:03:30.204>we <00:03:30.345>had <00:03:30.484>to <00:03:30.625>read <00:03:30.765>like <00:03:30.905>millions <00:03:31.045>of <00:03:31.185>lines <00:03:31.325>of <00:03:31.465>codes.

73
00:03:33.005 --> 00:03:34.525
<00:03:33.005>And <00:03:33.461>I <00:03:33.917>understand <00:03:34.373>hydration

74
00:03:35.385 --> 00:03:38.085
<00:03:35.385>and <00:03:35.560>I, <00:03:35.734>I <00:03:35.910>even <00:03:36.084>heard <00:03:36.260>dehydration <00:03:36.435>in <00:03:36.609>the <00:03:36.785>talk

75
00:03:38.085 --> 00:03:39.205
<00:03:38.085>before, <00:03:38.337>like, <00:03:38.589>what <00:03:38.840>is <00:03:39.093>that?

76
00:03:39.235 --> 00:03:41.765
<00:03:39.235>Like, <00:03:39.468>why <00:03:39.701>do <00:03:39.935>we <00:03:40.168>have <00:03:40.401>hydration <00:03:40.635>dehydration?

77
00:03:42.385 --> 00:03:44.365
<00:03:42.385>Do <00:03:42.560>we <00:03:42.734>have <00:03:42.910>a <00:03:43.084>post <00:03:43.260>hydration? <00:03:43.435>I <00:03:43.609>don't <00:03:43.785>know.

78
00:03:44.865 --> 00:03:47.525
<00:03:44.865>And, <00:03:45.020>um, <00:03:45.176>we <00:03:45.331>found <00:03:45.487>the <00:03:45.642>buck, <00:03:45.798>we <00:03:45.953>issued <00:03:46.109>the <00:03:46.265>buck,

79
00:03:48.105 --> 00:03:51.485
<00:03:48.105>and <00:03:48.244>the <00:03:48.385>astro <00:03:48.524>guys <00:03:48.665>said, <00:03:48.804>well, <00:03:48.945>no, <00:03:49.084>we <00:03:49.225>don't <00:03:49.364>fix <00:03:49.505>that.

80
00:03:51.785 --> 00:03:54.725
<00:03:51.785>So <00:03:51.901>it's, <00:03:52.018>it's <00:03:52.135>like <00:03:52.251>an <00:03:52.368>edge <00:03:52.484>case. <00:03:52.601>We <00:03:52.718>don't <00:03:52.835>need <00:03:52.951>to <00:03:53.068>fix <00:03:53.185>that.

81
00:03:55.385 --> 00:03:57.045
<00:03:55.385>And <00:03:55.734>there <00:03:56.084>goes <00:03:56.435>our <00:03:56.785>productivity.

82
00:03:57.425 --> 00:03:59.845
<00:03:57.425>Um, <00:03:57.600>yeah, <00:03:57.775>and <00:03:57.950>we <00:03:58.125>couldn't <00:03:58.300>use <00:03:58.475>the <00:03:58.650>framework <00:03:58.825>anymore.

83
00:04:00.345 --> 00:04:01.605
<00:04:00.345>You <00:04:00.571>probably <00:04:00.798>know <00:04:01.025>that <00:04:01.252>as <00:04:01.478>well.

84
00:04:03.305 --> 00:04:05.045
<00:04:03.305>And <00:04:03.480>it <00:04:03.655>also <00:04:03.830>took <00:04:04.005>a <00:04:04.180>long <00:04:04.355>time <00:04:04.530>for <00:04:04.705>us

85
00:04:05.045 --> 00:04:06.285
<00:04:05.045>to <00:04:05.323>develop <00:04:05.602>our <00:04:05.882>front <00:04:06.161>ends

86
00:04:06.285 --> 00:04:08.645
<00:04:06.285>because <00:04:06.460>we <00:04:06.635>always <00:04:06.810>needed <00:04:06.984>to <00:04:07.160>implement <00:04:07.335>our <00:04:07.510>backend <00:04:07.685>first.

87
00:04:09.345 --> 00:04:13.845
<00:04:09.345>And, <00:04:09.484>uh, <00:04:09.625>Jason, <00:04:09.765>API <00:04:09.905>and, <00:04:10.045>um, <00:04:10.185>sometimes <00:04:10.325>even <00:04:10.465>GraphQL <00:04:10.605>or <00:04:10.745>GRPC.

88
00:04:14.425 --> 00:04:17.005
<00:04:14.425>Um, <00:04:14.705>so <00:04:14.985>we <00:04:15.265>as <00:04:15.545>frontend <00:04:15.825>developers

89
00:04:17.065 --> 00:04:20.645
<00:04:17.065>or <00:04:17.220>full <00:04:17.376>stack <00:04:17.531>developers, <00:04:17.687>kind <00:04:17.842>of <00:04:17.998>build <00:04:18.153>a <00:04:18.309>huge <00:04:18.464>chain

90
00:04:20.775 --> 00:04:22.405
<00:04:20.774>until <00:04:21.054>we <00:04:21.334>get <00:04:21.614>the <00:04:21.894>HTML, <00:04:22.174>right?

91
00:04:22.585 --> 00:04:24.285
<00:04:22.585>You <00:04:22.818>all <00:04:23.051>know <00:04:23.284>that. <00:04:23.518>Nothing <00:04:23.751>new <00:04:23.984>here.

92
00:04:25.425 --> 00:04:29.765
<00:04:25.425>Um, <00:04:25.518>and <00:04:25.611>then <00:04:25.705>to <00:04:25.798>do <00:04:25.891>all <00:04:25.985>of <00:04:26.078>that, <00:04:26.171>we <00:04:26.265>need <00:04:26.358>to <00:04:26.451>have <00:04:26.545>a <00:04:26.638>lot <00:04:26.731>of <00:04:26.825>CPU

93
00:04:29.765 --> 00:04:34.485
<00:04:29.765>and <00:04:29.920>hardware <00:04:30.076>to <00:04:30.231>be <00:04:30.387>able <00:04:30.542>to <00:04:30.698>serialize <00:04:30.853>from <00:04:31.009>the <00:04:31.164>database

94
00:04:34.585 --> 00:04:37.805
<00:04:34.585>to <00:04:34.784>the <00:04:34.984>j <00:04:35.185>again, <00:04:35.385>to <00:04:35.585>the <00:04:35.784>internal <00:04:35.984>representation

95
00:04:37.945 --> 00:04:40.445
<00:04:37.945>of <00:04:38.224>JavaScript, <00:04:38.505>then <00:04:38.784>to <00:04:39.065>the <00:04:39.344>HTML.

96
00:04:40.585 --> 00:04:43.085
<00:04:40.585>And <00:04:40.740>then <00:04:40.896>the <00:04:41.051>client <00:04:41.207>needs <00:04:41.362>to <00:04:41.518>process <00:04:41.673>the <00:04:41.829>HT <00:04:41.984>ML.

97
00:04:43.145 --> 00:04:45.285
<00:04:43.145>So <00:04:43.424>there's, <00:04:43.705>um, <00:04:43.984>the, <00:04:44.265>the <00:04:44.544>JavaScript.

98
00:04:45.305 --> 00:04:48.005
<00:04:45.305>So <00:04:45.505>there's <00:04:45.705>a <00:04:45.905>lot <00:04:46.105>of <00:04:46.305>serialization <00:04:46.505>happening, <00:04:46.705>bad

99
00:04:48.005 --> 00:04:51.205
<00:04:48.005>for <00:04:48.160>the <00:04:48.316>environment, <00:04:48.471>bad <00:04:48.627>for <00:04:48.782>our <00:04:48.938>performance <00:04:49.093>of <00:04:49.249>the <00:04:49.405>pages.

100
00:04:51.705 --> 00:04:52.845
<00:04:51.705>Um, <00:04:52.731>yeah.

101
00:04:52.845 --> 00:04:56.605
<00:04:52.845>And <00:04:52.952>in <00:04:53.060>the <00:04:53.168>end, <00:04:53.275>we <00:04:53.383>have <00:04:53.491>a <00:04:53.598>long <00:04:53.706>list <00:04:53.814>of <00:04:53.921>stuff <00:04:54.029>that <00:04:54.137>annoys <00:04:54.245>us

102
00:04:56.675 --> 00:04:58.445
<00:04:56.675>that <00:04:56.955>really, <00:04:57.235>really <00:04:57.515>annoys <00:04:57.795>us <00:04:58.075>about

103
00:04:58.445 --> 00:04:59.525
<00:04:58.445>single <00:04:58.931>edge <00:04:59.417>applications.

104
00:04:59.905 --> 00:05:02.645
<00:04:59.905>And <00:05:00.044>that <00:05:00.184>shouldn't <00:05:00.325>be <00:05:00.465>the <00:05:00.604>default, <00:05:00.744>right? <00:05:00.885>But <00:05:01.025>it, <00:05:01.164>they <00:05:01.304>are.

105
00:05:03.025 --> 00:05:06.125
<00:05:03.025>So <00:05:03.180>why, <00:05:03.336>right? <00:05:03.491>So <00:05:03.647>you <00:05:03.802>can, <00:05:03.958>you <00:05:04.113>can <00:05:04.269>read <00:05:04.424>it.

106
00:05:06.125 --> 00:05:08.445
<00:05:06.125>We <00:05:06.265>have <00:05:06.405>to <00:05:06.545>prepare <00:05:06.685>the <00:05:06.825>data. <00:05:06.965>We <00:05:07.105>have <00:05:07.245>two <00:05:07.385>deployment <00:05:07.525>units.

107
00:05:08.785 --> 00:05:10.245
<00:05:08.785>We <00:05:09.223>have <00:05:09.661>architecture, <00:05:10.099>complexity,

108
00:05:11.115 --> 00:05:13.305
<00:05:11.115>deployment <00:05:11.581>times, <00:05:12.048>security <00:05:12.515>issues.

109
00:05:14.145 --> 00:05:15.865
<00:05:14.145>I <00:05:14.378>mean, <00:05:14.611>we <00:05:14.844>have <00:05:15.078>tons <00:05:15.311>of <00:05:15.544>dependencies.

110
00:05:15.885 --> 00:05:17.505
<00:05:15.885>We <00:05:16.164>need <00:05:16.445>to <00:05:16.724>update <00:05:17.005>them <00:05:17.284>daily.

111
00:05:17.965 --> 00:05:20.905
<00:05:17.965>So <00:05:18.140>that <00:05:18.315>takes <00:05:18.489>a <00:05:18.664>lot <00:05:18.840>of <00:05:19.015>time <00:05:19.190>and <00:05:19.364>effort.

112
00:05:21.455 --> 00:05:23.025
<00:05:21.455>Then <00:05:21.734>we <00:05:22.015>do <00:05:22.294>something <00:05:22.575>like <00:05:22.854>TypeScript

113
00:05:23.025 --> 00:05:26.905
<00:05:23.025>because <00:05:23.164>we <00:05:23.304>think, <00:05:23.445>oh, <00:05:23.585>uh, <00:05:23.724>wow, <00:05:23.864>uh, <00:05:24.005>JavaScript <00:05:24.145>has <00:05:24.284>no <00:05:24.424>types,

114
00:05:26.965 --> 00:05:28.105
<00:05:26.965>so <00:05:27.307>let's <00:05:27.649>do <00:05:27.991>TypeScript,

115
00:05:28.205 --> 00:05:31.545
<00:05:28.205>but <00:05:28.405>that <00:05:28.604>it's <00:05:28.805>more <00:05:29.005>complexity, <00:05:29.205>even <00:05:29.405>more <00:05:29.604>bundling,

116
00:05:31.935 --> 00:05:35.225
<00:05:31.935>more <00:05:32.135>whatever, <00:05:32.335>you <00:05:32.535>know, <00:05:32.735>that <00:05:32.935>super <00:05:33.135>slow <00:05:33.335>pages

117
00:05:35.805 --> 00:05:39.185
<00:05:35.805>and <00:05:35.945>a <00:05:36.085>lot <00:05:36.225>of <00:05:36.365>data <00:05:36.505>that <00:05:36.645>needs <00:05:36.785>to <00:05:36.925>put <00:05:37.065>in, <00:05:37.205>uh,

118
00:05:39.285 --> 00:05:41.105
<00:05:39.284>to <00:05:39.460>be <00:05:39.635>responded <00:05:39.809>into <00:05:39.984>the <00:05:40.159>front <00:05:40.335>end <00:05:40.510>as <00:05:40.684>well.

119
00:05:42.005 --> 00:05:45.775
<00:05:42.005>Um, <00:05:42.284>but <00:05:42.565>usually <00:05:42.844>we <00:05:43.125>build, <00:05:43.405>um,

120
00:05:45.775 --> 00:05:47.335
<00:05:45.775>content <00:05:46.241>heavy <00:05:46.708>pages, <00:05:47.174>right?

121
00:05:47.435 --> 00:05:51.015
<00:05:47.435>So <00:05:47.575>as <00:05:47.715>an <00:05:47.855>example, <00:05:47.995>we <00:05:48.135>have <00:05:48.275>here, <00:05:48.415>it's <00:05:48.555>a <00:05:48.695>startup, <00:05:48.835>uh,

122
00:05:51.015 --> 00:05:52.735
<00:05:51.015>that <00:05:51.294>we <00:05:51.575>understand, <00:05:51.854>um, <00:05:52.135>helped, <00:05:52.414>um,

123
00:05:52.835 --> 00:05:55.215
<00:05:52.835>and <00:05:53.010>we <00:05:53.185>built <00:05:53.359>the <00:05:53.534>front <00:05:53.710>end, <00:05:53.885>uh, <00:05:54.060>the <00:05:54.234>shop.

124
00:05:55.355 --> 00:05:57.485
<00:05:55.355>Um, <00:05:55.635>and <00:05:55.915>it's <00:05:56.195>content <00:05:56.475>heavy, <00:05:56.755>right?

125
00:05:57.485 --> 00:05:58.645
<00:05:57.485>There's <00:05:57.833>not <00:05:58.181>much <00:05:58.529>interaction.

126
00:05:58.935 --> 00:06:01.045
<00:05:58.935>Maybe <00:05:59.285>there's <00:05:59.635>some, <00:05:59.985>some <00:06:00.335>filters

127
00:06:01.345 --> 00:06:03.965
<00:06:01.345>or <00:06:01.500>there's <00:06:01.656>like <00:06:01.811>a <00:06:01.967>little <00:06:02.122>bit <00:06:02.278>of <00:06:02.433>a <00:06:02.589>add, <00:06:02.745>uh,

128
00:06:03.985 --> 00:06:07.085
<00:06:03.985>adding <00:06:04.160>more <00:06:04.335>items <00:06:04.510>into <00:06:04.685>the <00:06:04.860>basket <00:06:05.035>or <00:06:05.210>some <00:06:05.385>validation.

129
00:06:07.585 --> 00:06:10.045
<00:06:07.585>But <00:06:07.760>do <00:06:07.935>we <00:06:08.109>really <00:06:08.284>need <00:06:08.460>the <00:06:08.635>single <00:06:08.810>page <00:06:08.984>application

130
00:06:10.185 --> 00:06:13.125
<00:06:10.185>for <00:06:10.418>like <00:06:10.651>this <00:06:10.885>small <00:06:11.118>amount <00:06:11.351>of <00:06:11.585>interaction?

131
00:06:13.965 --> 00:06:18.125
<00:06:13.965>I <00:06:14.120>don't <00:06:14.276>know. <00:06:14.431>Um, <00:06:14.587>so <00:06:14.742>our <00:06:14.898>pages <00:06:15.053>in <00:06:15.209>the <00:06:15.364>moment,

132
00:06:18.155 --> 00:06:19.245
<00:06:18.155>they <00:06:18.400>usually <00:06:18.645>look <00:06:18.890>like <00:06:19.136>this.

133
00:06:19.275 --> 00:06:23.605
<00:06:19.275>Like <00:06:19.430>we <00:06:19.586>have <00:06:19.741>super <00:06:19.897>small <00:06:20.052>HTML, <00:06:20.208>a <00:06:20.363>lot <00:06:20.519>of <00:06:20.674>JavaScript,

134
00:06:25.065 --> 00:06:27.725
<00:06:25.065>but <00:06:25.240>what <00:06:25.415>if <00:06:25.590>we <00:06:25.765>could <00:06:25.940>build <00:06:26.115>them <00:06:26.290>like <00:06:26.465>this,

135
00:06:28.155 --> 00:06:30.605
<00:06:28.155>like <00:06:28.330>focus <00:06:28.505>on <00:06:28.679>the <00:06:28.854>HTML, <00:06:29.030>focus <00:06:29.205>on <00:06:29.380>the <00:06:29.554>content,

136
00:06:31.145 --> 00:06:33.085
<00:06:31.145>do <00:06:31.300>a <00:06:31.456>little <00:06:31.611>bit <00:06:31.767>of <00:06:31.922>h <00:06:32.078>uh, <00:06:32.233>JavaScript <00:06:32.389>on <00:06:32.544>top,

137
00:06:33.285 --> 00:06:34.405
<00:06:33.284>sprinkle <00:06:33.621>it <00:06:33.957>on <00:06:34.292>top,

138
00:06:35.185 --> 00:06:39.925
<00:06:35.185>and, <00:06:35.325>um, <00:06:35.465>have <00:06:35.605>a <00:06:35.745>smaller, <00:06:35.885>um, <00:06:36.025>total <00:06:36.165>bundle, <00:06:36.305>um, <00:06:36.445>as <00:06:36.585>well,

139
00:06:40.425 --> 00:06:42.445
<00:06:40.425>and <00:06:40.658>do <00:06:40.891>the <00:06:41.125>same <00:06:41.358>that <00:06:41.591>we <00:06:41.825>do

140
00:06:42.445 --> 00:06:43.765
<00:06:42.445>with <00:06:42.682>the <00:06:42.920>thing <00:06:43.157>of <00:06:43.395>edge <00:06:43.633>application.

141
00:06:44.115 --> 00:06:45.245
<00:06:44.115>That <00:06:44.369>would <00:06:44.623>be <00:06:44.877>great, <00:06:45.132>right?

142
00:06:46.355 --> 00:06:49.655
<00:06:46.355>So, <00:06:46.482>um, <00:06:46.609>let <00:06:46.736>me <00:06:46.864>introduce <00:06:46.991>you <00:06:47.118>to <00:06:47.245>like <00:06:47.373>a <00:06:47.500>super <00:06:47.627>new <00:06:47.755>concept,

143
00:06:50.225 --> 00:06:52.055
<00:06:50.225>which <00:06:50.691>is <00:06:51.158>called <00:06:51.625>MVC.

144
00:06:52.235 --> 00:06:54.215
<00:06:52.235>It <00:06:52.585>was <00:06:52.935>developed <00:06:53.285>in <00:06:53.635>1979,

145
00:06:54.955 --> 00:06:58.455
<00:06:54.955>and <00:06:55.094>it's <00:06:55.234>super <00:06:55.375>great, <00:06:55.515>uh, <00:06:55.655>to <00:06:55.794>do <00:06:55.935>these <00:06:56.075>kind <00:06:56.215>of <00:06:56.354>things.

146
00:06:58.645 --> 00:07:01.015
<00:06:58.645>Like <00:06:58.878>you <00:06:59.111>can <00:06:59.344>immediately <00:06:59.578>have <00:06:59.811>a <00:07:00.044>backend

147
00:07:01.075 --> 00:07:03.695
<00:07:01.075>and <00:07:01.308>answer <00:07:01.541>HT <00:07:01.775>ML <00:07:02.008>to <00:07:02.241>the <00:07:02.474>client.

148
00:07:03.945 --> 00:07:06.575
<00:07:03.945>Super <00:07:04.145>awesome. <00:07:04.344>Uh, <00:07:04.545>so <00:07:04.745>we <00:07:04.945>had <00:07:05.145>that, <00:07:05.344>um,

149
00:07:07.475 --> 00:07:12.095
<00:07:07.475>and <00:07:07.615>somewhere, <00:07:07.755>sadly <00:07:07.895>along <00:07:08.035>the <00:07:08.175>long <00:07:08.315>road, <00:07:08.455>we <00:07:08.595>took <00:07:08.735>a <00:07:08.875>turn

150
00:07:12.205 --> 00:07:14.335
<00:07:12.205>that <00:07:12.405>brought <00:07:12.604>us <00:07:12.805>there <00:07:13.005>where <00:07:13.205>we <00:07:13.405>are <00:07:13.604>today.

151
00:07:15.055 --> 00:07:18.355
<00:07:15.055>So <00:07:15.195>we <00:07:15.335>started <00:07:15.475>with <00:07:15.615>PHP, <00:07:15.755>I <00:07:15.895>know, <00:07:16.035>not <00:07:16.175>the <00:07:16.315>best <00:07:16.455>language.

152
00:07:18.575 --> 00:07:21.195
<00:07:18.575>Uh, <00:07:18.775>so <00:07:18.974>we <00:07:19.175>might <00:07:19.375>we're <00:07:19.575>not <00:07:19.775>that <00:07:19.974>motivated,

153
00:07:21.255 --> 00:07:24.515
<00:07:21.255>but <00:07:21.534>already <00:07:21.815>templates <00:07:22.094>already <00:07:22.375>heavy <00:07:22.655>on

154
00:07:24.755 --> 00:07:26.275
<00:07:24.755>HTML <00:07:25.097>from <00:07:25.438>the <00:07:25.781>service <00:07:26.123>side.

155
00:07:26.785 --> 00:07:28.635
<00:07:26.785>Then <00:07:27.251>we <00:07:27.718>needed <00:07:28.185>jQuery

156
00:07:28.635 --> 00:07:30.915
<00:07:28.635>because <00:07:28.868>of <00:07:29.101>these <00:07:29.335>browser <00:07:29.568>companies <00:07:29.801>going <00:07:30.034>rogue.

157
00:07:31.015 --> 00:07:34.835
<00:07:31.015>And <00:07:31.170>we <00:07:31.326>needed <00:07:31.481>to <00:07:31.637>somehow <00:07:31.792>utilize, <00:07:31.948>like, <00:07:32.103>like <00:07:32.259>harmonize <00:07:32.414>them.

158
00:07:35.615 --> 00:07:39.515
<00:07:35.615>Um, <00:07:35.848>and <00:07:36.081>because <00:07:36.315>HTDP <00:07:36.548>was <00:07:36.781>only <00:07:37.015>able

159
00:07:39.515 --> 00:07:41.715
<00:07:39.515>to <00:07:39.748>have <00:07:39.981>like <00:07:40.215>response <00:07:40.448>request, <00:07:40.681>response <00:07:40.914>pattern,

160
00:07:41.855 --> 00:07:42.915
<00:07:41.855>we <00:07:42.332>needed <00:07:42.809>Ajax.

161
00:07:43.535 --> 00:07:45.515
<00:07:43.534>And <00:07:43.734>then <00:07:43.934>some <00:07:44.135>people <00:07:44.335>came <00:07:44.534>to <00:07:44.734>the <00:07:44.934>conclusion,

162
00:07:45.925 --> 00:07:47.635
<00:07:45.925>let's <00:07:46.275>push <00:07:46.625>everything <00:07:46.975>into <00:07:47.325>JavaScript

163
00:07:47.705 --> 00:07:49.035
<00:07:47.705>because <00:07:48.104>it's <00:07:48.503>much <00:07:48.902>better.

164
00:07:49.045 --> 00:07:51.835
<00:07:49.045>Let's <00:07:49.200>do <00:07:49.356>this. <00:07:49.511>And <00:07:49.667>we <00:07:49.822>never <00:07:49.978>thought <00:07:50.133>about <00:07:50.289>that <00:07:50.445>again.

165
00:07:52.175 --> 00:07:54.115
<00:07:52.175>Um, <00:07:52.408>and <00:07:52.641>just <00:07:52.875>followed <00:07:53.108>the <00:07:53.341>road, <00:07:53.575>right?

166
00:07:55.275 --> 00:07:59.305
<00:07:55.275>So, <00:07:55.474>um, <00:07:55.674>a <00:07:55.875>few <00:07:56.075>years <00:07:56.275>ago, <00:07:56.474>HDB <00:07:56.674>two

167
00:07:59.325 --> 00:08:02.865
<00:07:59.325>and <00:07:59.480>HDB <00:07:59.636>three <00:07:59.791>came <00:07:59.947>and <00:08:00.102>enabled <00:08:00.258>us <00:08:00.413>to <00:08:00.569>do <00:08:00.724>streaming.

168
00:08:03.045 --> 00:08:05.105
<00:08:03.045>And <00:08:03.325>it <00:08:03.605>was <00:08:03.885>not <00:08:04.165>that <00:08:04.445>bad

169
00:08:05.125 --> 00:08:08.105
<00:08:05.125>and <00:08:05.241>hard <00:08:05.358>anymore <00:08:05.475>to <00:08:05.591>do <00:08:05.708>a <00:08:05.825>lot <00:08:05.941>of, <00:08:06.058>lot <00:08:06.175>of, <00:08:06.291>lot <00:08:06.408>of, <00:08:06.525>lot

170
00:08:08.105 --> 00:08:09.505
<00:08:08.105>of <00:08:08.420>requests <00:08:08.735>into <00:08:09.050>the <00:08:09.365>backend.

171
00:08:10.005 --> 00:08:14.465
<00:08:10.005>Um, <00:08:10.160>so <00:08:10.316>there <00:08:10.471>wasn't <00:08:10.627>really <00:08:10.782>necessary <00:08:10.938>anymore <00:08:11.093>to <00:08:11.249>use <00:08:11.405>Ajax

172
00:08:14.525 --> 00:08:17.785
<00:08:14.525>or <00:08:14.652>to <00:08:14.779>use <00:08:14.906>like <00:08:15.034>some <00:08:15.161>long <00:08:15.288>polling, <00:08:15.415>uh, <00:08:15.543>and <00:08:15.670>stuff <00:08:15.797>like <00:08:15.924>that.

173
00:08:18.725 --> 00:08:22.065
<00:08:18.725>So <00:08:18.900>there <00:08:19.075>was <00:08:19.250>now <00:08:19.425>new <00:08:19.600>capabilities <00:08:19.775>in <00:08:19.950>the <00:08:20.125>standardized

174
00:08:22.385 --> 00:08:25.825
<00:08:22.385>protocol <00:08:22.618>that <00:08:22.851>enabled <00:08:23.085>new <00:08:23.318>frameworks <00:08:23.551>like <00:08:23.784>HTMX

175
00:08:25.925 --> 00:08:30.185
<00:08:25.925>or <00:08:26.080>like, <00:08:26.236>um, <00:08:26.391>Hotwire, <00:08:26.547>and, <00:08:26.702>um, <00:08:26.858>what <00:08:27.013>they <00:08:27.169>are <00:08:27.325>doing

176
00:08:30.205 --> 00:08:31.825
<00:08:30.205>and <00:08:30.405>how <00:08:30.604>they <00:08:30.805>are <00:08:31.005>doing <00:08:31.205>that <00:08:31.405>is <00:08:31.604>something

177
00:08:31.825 --> 00:08:33.225
<00:08:31.825>that <00:08:32.005>Felix <00:08:32.184>will <00:08:32.365>show <00:08:32.544>you <00:08:32.725>in <00:08:32.905>a <00:08:33.085>second.

178
00:08:33.445 --> 00:08:34.945
<00:08:33.445>So <00:08:33.670>I <00:08:33.895>only <00:08:34.120>have <00:08:34.345>five <00:08:34.570>seconds <00:08:34.795>left.

179
00:08:35.045 --> 00:08:38.265
<00:08:35.044>So, <00:08:35.219>um, <00:08:35.395>but <00:08:35.569>first <00:08:35.745>I <00:08:35.919>want <00:08:36.094>to <00:08:36.270>show <00:08:36.444>you

180
00:08:38.265 --> 00:08:40.185
<00:08:38.265>that <00:08:38.465>we <00:08:38.664>are <00:08:38.865>not <00:08:39.064>the <00:08:39.265>only <00:08:39.465>ones <00:08:39.664>that,

181
00:08:40.255 --> 00:08:41.505
<00:08:40.255>that <00:08:40.480>are <00:08:40.705>interested <00:08:40.929>in <00:08:41.155>that, <00:08:41.380>right?

182
00:08:41.525 --> 00:08:43.185
<00:08:41.525>So <00:08:41.725>you <00:08:41.924>are <00:08:42.125>all <00:08:42.324>also <00:08:42.525>interested <00:08:42.725>in <00:08:42.924>that.

183
00:08:43.185 --> 00:08:46.745
<00:08:43.184>So <00:08:43.312>that's <00:08:43.439>why <00:08:43.566>you <00:08:43.694>are <00:08:43.821>here. <00:08:43.948>I've, <00:08:44.075>I'm <00:08:44.203>super <00:08:44.330>amazed <00:08:44.457>by <00:08:44.584>that.

184
00:08:46.755 --> 00:08:50.705
<00:08:46.755>Thank <00:08:46.930>you <00:08:47.105>so <00:08:47.280>much. <00:08:47.455>But <00:08:47.630>also <00:08:47.805>the <00:08:47.980>general <00:08:48.155>population

185
00:08:50.765 --> 00:08:52.865
<00:08:50.765>around <00:08:50.998>GitHub <00:08:51.231>is <00:08:51.465>super <00:08:51.698>interested <00:08:51.931>in <00:08:52.165>that.

186
00:08:52.925 --> 00:08:55.605
<00:08:52.925>You <00:08:53.125>can <00:08:53.324>see, <00:08:53.525>um, <00:08:53.724>that <00:08:53.925>the, <00:08:54.125>um, <00:08:54.324>yeah,

187
00:08:55.605 --> 00:08:59.085
<00:08:55.605>that <00:08:55.745>the <00:08:55.885>Gub <00:08:56.025>stars <00:08:56.165>went <00:08:56.305>up <00:08:56.445>like <00:08:56.585>they <00:08:56.725>skyrocketed <00:08:56.865>this <00:08:57.005>year.

188
00:08:59.745 --> 00:09:01.965
<00:08:59.745>Um, <00:08:59.920>so <00:09:00.095>this <00:09:00.270>is <00:09:00.445>something <00:09:00.620>that <00:09:00.795>is <00:09:00.970>really <00:09:01.145>interesting

189
00:09:01.965 --> 00:09:03.965
<00:09:01.965>to <00:09:02.140>the <00:09:02.315>community, <00:09:02.490>and <00:09:02.665>I <00:09:02.840>think <00:09:03.015>we <00:09:03.190>all <00:09:03.365>feel

190
00:09:03.965 --> 00:09:05.525
<00:09:03.965>that <00:09:04.245>we <00:09:04.525>need <00:09:04.805>something <00:09:05.085>better, <00:09:05.365>right?

191
00:09:05.985 --> 00:09:09.045
<00:09:05.985>So <00:09:06.101>this <00:09:06.218>world <00:09:06.335>we <00:09:06.451>are <00:09:06.568>currently <00:09:06.685>living <00:09:06.801>in <00:09:06.918>is <00:09:07.035>not <00:09:07.151>what <00:09:07.268>we <00:09:07.385>are,

192
00:09:09.275 --> 00:09:10.485
<00:09:09.275>what <00:09:09.456>we <00:09:09.638>want <00:09:09.819>to <00:09:10.001>live <00:09:10.182>in <00:09:10.364>anymore,

193
00:09:10.545 --> 00:09:12.645
<00:09:10.545>and <00:09:10.685>we <00:09:10.824>want <00:09:10.964>to <00:09:11.104>have <00:09:11.245>some <00:09:11.385>better <00:09:11.525>world, <00:09:11.665>some <00:09:11.805>better <00:09:11.944>version

194
00:09:12.665 --> 00:09:14.605
<00:09:12.665>of <00:09:13.131>developing <00:09:13.598>frontend <00:09:14.064>frameworks.

195
00:09:15.185 --> 00:09:18.565
<00:09:15.185>And <00:09:15.312>now <00:09:15.439>I'm <00:09:15.566>going <00:09:15.694>to <00:09:15.821>give <00:09:15.948>over <00:09:16.075>to, <00:09:16.203>uh, <00:09:16.330>Felix, <00:09:16.457>he's <00:09:16.584>going

196
00:09:18.565 --> 00:09:21.645
<00:09:18.565>to <00:09:18.720>implement <00:09:18.876>it, <00:09:19.031>uh, <00:09:19.187>uh, <00:09:19.342>an <00:09:19.498>e-commerce <00:09:19.653>shop <00:09:19.809>for <00:09:19.965>us.

197
00:09:22.225 --> 00:09:23.885
<00:09:22.225>And <00:09:22.458>before <00:09:22.691>that, <00:09:22.925>I <00:09:23.158>need <00:09:23.391>an <00:09:23.625>idea.

198
00:09:24.065 --> 00:09:26.725
<00:09:24.065>So <00:09:24.181>what, <00:09:24.298>what <00:09:24.415>should <00:09:24.531>the <00:09:24.648>shop <00:09:24.765>be <00:09:24.881>about? <00:09:24.998>Do <00:09:25.115>we <00:09:25.231>have <00:09:25.348>a <00:09:25.465>wish?

199
00:09:26.725 --> 00:09:28.885
<00:09:26.725>What <00:09:26.925>do <00:09:27.125>we <00:09:27.325>wanna <00:09:27.525>sell? <00:09:27.725>Just <00:09:27.925>some <00:09:28.125>ideas.

200
00:09:29.945 --> 00:09:31.925
<00:09:29.945>Any, <00:09:30.100>anybody <00:09:30.256>has <00:09:30.411>an <00:09:30.567>idea? <00:09:30.722>What <00:09:30.878>do <00:09:31.033>we <00:09:31.189>wanna <00:09:31.345>sell?

201
00:09:32.085 --> 00:09:35.085
<00:09:32.085>Frontend <00:09:32.318>frameworks. <00:09:32.551>We <00:09:32.785>wanna <00:09:33.018>sell <00:09:33.251>frontend <00:09:33.485>frameworks.

202
00:09:35.675 --> 00:09:39.725
<00:09:35.675>Okay. <00:09:35.849>Uh, <00:09:36.025>maybe <00:09:36.199>let's <00:09:36.375>do <00:09:36.550>that. <00:09:36.724>Let's <00:09:36.900>do <00:09:37.074>that.

203
00:09:39.835 --> 00:09:41.045
<00:09:39.835>Okay. <00:09:40.198>Okay. <00:09:40.561>Okay. <00:09:40.924>Why

204
00:09:41.045 --> 00:09:41.765
<00:09:41.045>Not? <00:09:41.261>Why <00:09:41.477>not? <00:09:41.693>Why

205
00:09:41.765 --> 00:09:42.765
<00:09:41.765>Not? <00:09:42.064>Okay. <00:09:42.365>Okay, <00:09:42.665>let's

206
00:09:42.765 --> 00:09:43.005
<00:09:42.765>do <00:09:42.981>this.

207
00:09:43.185 --> 00:09:45.205
<00:09:43.185>We, <00:09:43.385>we <00:09:43.584>are <00:09:43.785>going <00:09:43.984>to <00:09:44.185>sell <00:09:44.385>frontend <00:09:44.584>frameworks.

208
00:09:45.665 --> 00:09:47.205
<00:09:45.665>I'm <00:09:45.863>going <00:09:46.061>to <00:09:46.259>switch <00:09:46.457>over <00:09:46.655>to <00:09:46.853>Felix <00:09:47.051>now,

209
00:09:47.265 --> 00:09:50.165
<00:09:47.265>and <00:09:47.465>he's <00:09:47.665>going <00:09:47.865>to <00:09:48.064>implement, <00:09:48.265>uh, <00:09:48.465>a <00:09:48.665>shop

210
00:09:50.225 --> 00:09:53.885
<00:09:50.225>for <00:09:50.458>us <00:09:50.691>in <00:09:50.925>HGMX <00:09:51.158>selling <00:09:51.391>frontend <00:09:51.625>frameworks.

211
00:09:54.255 --> 00:09:56.165
<00:09:54.255>Let's <00:09:54.430>go <00:09:54.605>Felix. <00:09:54.780>Yeah, <00:09:54.955>thanks. <00:09:55.130>You're <00:09:55.305>on <00:09:55.480>stage <00:09:55.655>now.

212
00:09:56.165 --> 00:09:59.725
<00:09:56.165>Thanks <00:09:56.320>Finn. <00:09:56.476>Can <00:09:56.631>everyone <00:09:56.787>see <00:09:56.942>me? <00:09:57.098>Pretty <00:09:57.253>much? <00:09:57.409>Um, <00:09:57.564>yeah.

213
00:09:59.935 --> 00:10:01.445
<00:09:59.935>Hello? <00:10:00.206>Hello? <00:10:00.478>Can <00:10:00.750>you <00:10:01.022>hear <00:10:01.294>me?

214
00:10:02.745 --> 00:10:04.645
<00:10:02.745>Yes, <00:10:02.945>is <00:10:03.145>working. <00:10:03.345>You <00:10:03.545>can <00:10:03.745>go <00:10:03.945>ahead. <00:10:04.145>It's

215
00:10:04.795 --> 00:10:05.795
<00:10:04.795>Okay. <00:10:05.245>Perfect. <00:10:05.694>So,

216
00:10:05.795 --> 00:10:07.365
<00:10:05.795>yeah, <00:10:06.028>my <00:10:06.261>name <00:10:06.495>is <00:10:06.728>Felix, <00:10:06.961>already <00:10:07.194>mentioned,

217
00:10:07.365 --> 00:10:09.085
<00:10:07.365>thanks <00:10:07.645>Bina <00:10:07.925>for <00:10:08.205>the <00:10:08.485>nice <00:10:08.765>introduction.

218
00:10:09.585 --> 00:10:13.485
<00:10:09.585>Um, <00:10:09.701>you <00:10:09.818>can <00:10:09.935>see <00:10:10.051>me <00:10:10.168>on <00:10:10.285>the <00:10:10.401>left <00:10:10.518>becoming, <00:10:10.635>uh, <00:10:10.751>HD <00:10:10.868>mix <00:10:10.985>fanboy.

219
00:10:13.585 --> 00:10:15.365
<00:10:13.585>And <00:10:13.785>the <00:10:13.985>question <00:10:14.185>is, <00:10:14.385>how <00:10:14.585>did <00:10:14.785>this <00:10:14.985>happen?

220
00:10:15.635 --> 00:10:17.085
<00:10:15.635>This <00:10:15.896>happened <00:10:16.157>during <00:10:16.418>the <00:10:16.679>last <00:10:16.940>project,

221
00:10:17.085 --> 00:10:18.485
<00:10:17.085>which <00:10:17.505>Bina <00:10:17.925>already <00:10:18.345>mentioned.

222
00:10:18.485 --> 00:10:22.445
<00:10:18.485>We <00:10:18.640>had <00:10:18.796>a <00:10:18.951>Astros <00:10:19.107>weld <00:10:19.262>set <00:10:19.418>up <00:10:19.573>with <00:10:19.729>adjacent <00:10:19.885>front

223
00:10:22.505 --> 00:10:24.805
<00:10:22.505>and <00:10:22.705>back <00:10:22.905>end, <00:10:23.105>and <00:10:23.305>just, <00:10:23.505>yeah, <00:10:23.705>we <00:10:23.905>wanted

224
00:10:24.805 --> 00:10:25.845
<00:10:24.805>to <00:10:25.039>build <00:10:25.273>an <00:10:25.507>e-commerce <00:10:25.741>shop,

225
00:10:25.845 --> 00:10:27.925
<00:10:25.845>but <00:10:26.078>it <00:10:26.311>took <00:10:26.545>so <00:10:26.778>long, <00:10:27.011>you <00:10:27.245>know,

226
00:10:27.925 --> 00:10:30.405
<00:10:27.925>even <00:10:28.158>small <00:10:28.391>steps <00:10:28.625>took <00:10:28.858>way <00:10:29.091>too <00:10:29.324>long.

227
00:10:30.425 --> 00:10:33.725
<00:10:30.425>And <00:10:30.599>I, <00:10:30.775>I <00:10:30.949>was <00:10:31.125>desperate, <00:10:31.300>desperate, <00:10:31.474>uh, <00:10:31.650>desperate, <00:10:31.824>looking

228
00:10:33.785 --> 00:10:38.005
<00:10:33.785>for <00:10:33.925>a <00:10:34.064>way <00:10:34.204>to <00:10:34.344>make <00:10:34.485>that <00:10:34.625>better, <00:10:34.765>to <00:10:34.905>find <00:10:35.045>something <00:10:35.185>simpler.

229
00:10:38.305 --> 00:10:40.645
<00:10:38.305>And <00:10:38.505>then <00:10:38.704>Vina <00:10:38.905>came <00:10:39.104>around <00:10:39.305>with <00:10:39.505>hot <00:10:39.704>wire,

230
00:10:40.665 --> 00:10:42.685
<00:10:40.665>but <00:10:40.820>that <00:10:40.976>wasn't <00:10:41.131>the <00:10:41.287>way <00:10:41.442>I <00:10:41.598>wanted <00:10:41.753>to <00:10:41.909>jump <00:10:42.064>on.

231
00:10:42.785 --> 00:10:46.565
<00:10:42.785>So <00:10:42.892>I <00:10:43.000>found <00:10:43.108>HDMX <00:10:43.215>and <00:10:43.323>I, <00:10:43.431>uh, <00:10:43.538>I <00:10:43.646>saw, <00:10:43.754>wow, <00:10:43.861>this <00:10:43.969>is <00:10:44.077>really <00:10:44.185>cool.

232
00:10:46.825 --> 00:10:48.045
<00:10:46.825>And <00:10:47.191>people <00:10:47.557>like <00:10:47.923>primates

233
00:10:48.065 --> 00:10:50.605
<00:10:48.065>and <00:10:48.205>stuff <00:10:48.345>like <00:10:48.485>that, <00:10:48.625>I <00:10:48.765>dunno <00:10:48.905>if <00:10:49.045>you <00:10:49.185>know <00:10:49.325>him, <00:10:49.465>started

234
00:10:50.625 --> 00:10:52.405
<00:10:50.625>to <00:10:50.858>say, <00:10:51.091>Hey, <00:10:51.325>look <00:10:51.558>at <00:10:51.791>HD <00:10:52.025>mix.

235
00:10:52.475 --> 00:10:54.005
<00:10:52.475>They, <00:10:52.750>they <00:10:53.025>doing <00:10:53.301>an <00:10:53.576>awesome <00:10:53.852>job.

236
00:10:54.005 --> 00:10:55.205
<00:10:54.005>They're <00:10:54.275>turning <00:10:54.545>around <00:10:54.815>the <00:10:55.085>world.

237
00:10:55.265 --> 00:10:57.765
<00:10:55.265>And <00:10:55.420>at <00:10:55.576>first <00:10:55.731>I <00:10:55.887>thought <00:10:56.042>it's <00:10:56.198>about <00:10:56.353>JavaScript <00:10:56.509>that <00:10:56.665>much,

238
00:10:57.785 --> 00:11:00.285
<00:10:57.785>but <00:10:58.018>actually <00:10:58.251>it's <00:10:58.485>about <00:10:58.718>enabling <00:10:58.951>template <00:10:59.185>engine,

239
00:11:00.535 --> 00:11:02.205
<00:11:00.535>which <00:11:01.001>PHP <00:11:01.468>started <00:11:01.935>with,

240
00:11:02.465 --> 00:11:05.005
<00:11:02.465>and <00:11:02.640>now <00:11:02.815>it's <00:11:02.990>bringing <00:11:03.165>back <00:11:03.340>thanks <00:11:03.515>to <00:11:03.690>HDM <00:11:03.865>Mix.

241
00:11:05.105 --> 00:11:07.285
<00:11:05.105>So, <00:11:05.338>um, <00:11:05.571>me <00:11:05.805>as <00:11:06.038>a <00:11:06.271>developer, <00:11:06.505>I'm,

242
00:11:07.305 --> 00:11:09.485
<00:11:07.305>I'm <00:11:07.460>coming <00:11:07.616>more <00:11:07.771>from <00:11:07.927>a <00:11:08.082>backend <00:11:08.238>than <00:11:08.393>a <00:11:08.549>front <00:11:08.704>end,

243
00:11:09.505 --> 00:11:12.325
<00:11:09.505>but <00:11:09.660>it <00:11:09.816>enables <00:11:09.971>me <00:11:10.127>to <00:11:10.282>be <00:11:10.438>a <00:11:10.593>full <00:11:10.749>stack <00:11:10.905>developer,

244
00:11:12.385 --> 00:11:13.765
<00:11:12.385>and <00:11:12.633>that <00:11:12.881>is <00:11:13.130>a <00:11:13.378>great <00:11:13.627>gift.

245
00:11:14.305 --> 00:11:16.165
<00:11:14.305>And <00:11:14.505>so, <00:11:14.704>yeah, <00:11:14.905>thanks <00:11:15.104>again <00:11:15.305>to <00:11:15.505>my <00:11:15.704>team

246
00:11:16.185 --> 00:11:17.525
<00:11:16.185>for <00:11:16.486>making <00:11:16.788>this <00:11:17.089>lovely <00:11:17.391>merge.

247
00:11:17.525 --> 00:11:20.045
<00:11:17.525>Maybe <00:11:17.680>at <00:11:17.836>some <00:11:17.991>point <00:11:18.147>I'm <00:11:18.302>gonna <00:11:18.458>open <00:11:18.613>up <00:11:18.769>a <00:11:18.925>shop.

248
00:11:20.845 --> 00:11:22.085
<00:11:20.845>I, <00:11:21.068>no, <00:11:21.291>but <00:11:21.514>let's <00:11:21.737>get <00:11:21.961>started.

249
00:11:22.355 --> 00:11:25.885
<00:11:22.355>What <00:11:22.482>we're <00:11:22.609>gonna <00:11:22.736>build <00:11:22.864>now <00:11:22.991>is, <00:11:23.118>uh, <00:11:23.245>I'm, <00:11:23.373>I, <00:11:23.500>I <00:11:23.627>chose <00:11:23.755>Spring,

250
00:11:26.025 --> 00:11:27.205
<00:11:26.025>uh, <00:11:26.379>as <00:11:26.733>my <00:11:27.087>backend.

251
00:11:27.625 --> 00:11:29.525
<00:11:27.625>Um, <00:11:27.825>um, <00:11:28.025>you <00:11:28.225>can <00:11:28.425>choose <00:11:28.625>whatever <00:11:28.825>you <00:11:29.025>want.

252
00:11:29.525 --> 00:11:31.845
<00:11:29.525>That's <00:11:29.665>the <00:11:29.805>beauty <00:11:29.944>about <00:11:30.084>HD <00:11:30.225>Mix. <00:11:30.365>It's <00:11:30.505>not <00:11:30.645>tied <00:11:30.785>to <00:11:30.925>any,

253
00:11:32.385 --> 00:11:33.925
<00:11:32.385>Can <00:11:32.616>you <00:11:32.847>make <00:11:33.078>yourself <00:11:33.309>smaller <00:11:33.540>beauty <00:11:33.771>side,

254
00:11:33.945 --> 00:11:35.365
<00:11:33.945>You <00:11:34.200>forgot <00:11:34.456>to <00:11:34.711>make <00:11:34.967>yourself <00:11:35.223>smaller.

255
00:11:35.745 --> 00:11:37.125
<00:11:35.745>Can <00:11:35.922>you <00:11:36.099>make <00:11:36.277>yourself <00:11:36.454>smaller <00:11:36.632>for <00:11:36.809>a <00:11:36.987>second?

256
00:11:37.995 --> 00:11:39.645
<00:11:37.995>Yeah, <00:11:38.275>yeah, <00:11:38.555>good <00:11:38.835>point, <00:11:39.115>good <00:11:39.395>point.

257
00:11:40.105 --> 00:11:42.885
<00:11:40.105>Um, <00:11:40.260>yeah, <00:11:40.416>so <00:11:40.571>you <00:11:40.727>can <00:11:40.882>choose, <00:11:41.038>you <00:11:41.193>can <00:11:41.349>choose <00:11:41.505>Jungle,

258
00:11:43.065 --> 00:11:45.485
<00:11:43.065>you <00:11:43.265>can <00:11:43.465>go <00:11:43.665>with, <00:11:43.865>go <00:11:44.065>whatever <00:11:44.265>you <00:11:44.465>want.

259
00:11:45.945 --> 00:11:48.205
<00:11:45.945>Um, <00:11:46.178>then <00:11:46.411>the <00:11:46.645>template <00:11:46.878>engine <00:11:47.111>becomes <00:11:47.345>the

260
00:11:48.205 --> 00:11:49.565
<00:11:48.205>most <00:11:48.511>powerful <00:11:48.817>piece <00:11:49.123>in <00:11:49.429>there.

261
00:11:49.745 --> 00:11:52.085
<00:11:49.745>And <00:11:49.945>HTM <00:11:50.145>X <00:11:50.345>just <00:11:50.545>do <00:11:50.745>the <00:11:50.945>reactive <00:11:51.145>part,

262
00:11:52.095 --> 00:11:53.325
<00:11:52.095>which <00:11:52.371>is <00:11:52.648>really, <00:11:52.925>really <00:11:53.202>nice.

263
00:11:53.335 --> 00:11:55.285
<00:11:53.335>We're <00:11:53.535>gonna <00:11:53.735>see <00:11:53.935>that <00:11:54.135>in <00:11:54.335>a <00:11:54.535>few <00:11:54.735>moments.

264
00:11:55.465 --> 00:11:57.365
<00:11:55.465>But <00:11:55.745>it <00:11:56.025>is <00:11:56.305>all <00:11:56.585>just <00:11:56.865>MVC.

265
00:11:57.385 --> 00:11:59.725
<00:11:57.385>You <00:11:57.618>have <00:11:57.851>a <00:11:58.085>controller, <00:11:58.318>which, <00:11:58.551>uh, <00:11:58.785>uh,

266
00:11:59.725 --> 00:12:00.885
<00:11:59.725>serves <00:12:00.073>all <00:12:00.421>the <00:12:00.769>endpoints.

267
00:12:00.885 --> 00:12:03.805
<00:12:00.885>You <00:12:01.085>a <00:12:01.285>service <00:12:01.485>which <00:12:01.685>communicates <00:12:01.885>with <00:12:02.085>services <00:12:02.285>adapters,

268
00:12:04.105 --> 00:12:05.965
<00:12:04.105>and <00:12:04.305>you <00:12:04.505>have <00:12:04.705>something <00:12:04.905>like <00:12:05.105>a <00:12:05.305>template <00:12:05.505>engine.

269
00:12:06.385 --> 00:12:09.005
<00:12:06.385>Now <00:12:06.585>we're <00:12:06.785>using <00:12:06.985>JTE, <00:12:07.185>the <00:12:07.385>Java <00:12:07.585>template <00:12:07.785>engine,

270
00:12:09.005 --> 00:12:10.685
<00:12:09.005>and <00:12:09.355>it's <00:12:09.705>the <00:12:10.055>sorry <00:12:10.405>language.

271
00:12:10.875 --> 00:12:13.205
<00:12:10.875>It's <00:12:11.155>really, <00:12:11.435>really <00:12:11.715>good <00:12:11.995>template <00:12:12.275>engine,

272
00:12:13.305 --> 00:12:15.965
<00:12:13.305>as <00:12:13.479>Prime <00:12:13.655>Age <00:12:13.829>would <00:12:14.005>say, <00:12:14.180>it's, <00:12:14.354>it's <00:12:14.530>blazing <00:12:14.704>fast.

273
00:12:16.305 --> 00:12:19.525
<00:12:16.305>It <00:12:16.432>can <00:12:16.559>do <00:12:16.686>a <00:12:16.814>million <00:12:16.941>requests <00:12:17.068>a <00:12:17.195>second <00:12:17.323>on <00:12:17.450>a <00:12:17.577>single <00:12:17.704>machine.

274
00:12:19.595 --> 00:12:20.925
<00:12:19.595>It's, <00:12:19.894>it's <00:12:20.193>really, <00:12:20.492>really <00:12:20.791>good.

275
00:12:21.425 --> 00:12:23.845
<00:12:21.425>Um, <00:12:21.599>and <00:12:21.775>so <00:12:21.949>we're <00:12:22.125>gonna <00:12:22.300>stick <00:12:22.474>to <00:12:22.650>that <00:12:22.824>one.

276
00:12:23.865 --> 00:12:26.045
<00:12:23.865>But <00:12:24.098>again, <00:12:24.331>um, <00:12:24.565>you <00:12:24.798>can <00:12:25.031>choose <00:12:25.265>your

277
00:12:26.115 --> 00:12:27.605
<00:12:26.115>backend, <00:12:26.562>whatever <00:12:27.009>you <00:12:27.456>want.

278
00:12:27.865 --> 00:12:30.005
<00:12:27.865>Um, <00:12:28.215>we're <00:12:28.565>gonna <00:12:28.915>serve <00:12:29.265>HTMX

279
00:12:30.225 --> 00:12:32.005
<00:12:30.225>and <00:12:30.505>we're <00:12:30.785>gonna <00:12:31.065>use, <00:12:31.345>uh, <00:12:31.625>bootstrap

280
00:12:32.005 --> 00:12:34.805
<00:12:32.005>that <00:12:32.180>are <00:12:32.355>the <00:12:32.530>only <00:12:32.705>frontend <00:12:32.880>dependencies <00:12:33.055>we <00:12:33.230>use <00:12:33.405>it.

281
00:12:35.205 --> 00:12:36.845
<00:12:35.205>I <00:12:35.405>know <00:12:35.605>I <00:12:35.805>wanted <00:12:36.005>to <00:12:36.205>do <00:12:36.405>with <00:12:36.605>Tailwind,

282
00:12:36.845 --> 00:12:39.165
<00:12:36.845>but <00:12:36.985>I <00:12:37.125>have <00:12:37.265>to <00:12:37.405>write <00:12:37.545>too <00:12:37.685>many <00:12:37.825>classes, <00:12:37.965>so <00:12:38.105>I <00:12:38.245>decided,

283
00:12:39.685 --> 00:12:42.205
<00:12:39.685>'cause <00:12:39.840>I <00:12:39.996>don't <00:12:40.151>have <00:12:40.307>time, <00:12:40.462>let's <00:12:40.618>do <00:12:40.773>it <00:12:40.929>with, <00:12:41.084>uh,

284
00:12:42.235 --> 00:12:43.805
<00:12:42.235>just <00:12:42.585>Bootstrap <00:12:42.935>makes <00:12:43.285>life <00:12:43.635>easier.

285
00:12:44.105 --> 00:12:48.485
<00:12:44.105>So <00:12:44.232>let's <00:12:44.359>jump <00:12:44.486>right <00:12:44.614>into <00:12:44.741>the <00:12:44.868>code. <00:12:44.995>Um, <00:12:45.123>go <00:12:45.250>to <00:12:45.377>my <00:12:45.505>project.

286
00:12:48.805 --> 00:12:50.885
<00:12:48.805>I <00:12:48.932>already <00:12:49.059>set <00:12:49.186>it <00:12:49.314>up <00:12:49.441>a <00:12:49.568>little <00:12:49.695>bit. <00:12:49.823>I'm <00:12:49.950>sorry <00:12:50.077>for <00:12:50.204>that.

287
00:12:51.005 --> 00:12:54.245
<00:12:51.005>I <00:12:51.145>wanted <00:12:51.285>to <00:12:51.425>start <00:12:51.564>from <00:12:51.705>scratch, <00:12:51.845>but <00:12:51.985>just <00:12:52.125>way <00:12:52.265>too <00:12:52.405>hard.

288
00:12:54.585 --> 00:12:57.525
<00:12:54.585>So <00:12:54.760>what <00:12:54.935>I <00:12:55.110>did, <00:12:55.285>um, <00:12:55.460>look <00:12:55.635>at <00:12:55.810>the <00:12:55.985>dependencies.

289
00:12:57.525 --> 00:13:01.005
<00:12:57.525>Again, <00:12:57.665>this <00:12:57.805>is <00:12:57.944>Gradle, <00:12:58.084>this <00:12:58.225>is <00:12:58.365>kind <00:12:58.505>of <00:12:58.645>NPM <00:12:58.785>for <00:12:58.925>Java,

290
00:13:01.305 --> 00:13:02.405
<00:13:01.305>if <00:13:01.502>you're <00:13:01.700>not <00:13:01.899>familiar <00:13:02.097>with <00:13:02.295>that.

291
00:13:02.945 --> 00:13:06.805
<00:13:02.945>Um, <00:13:03.120>so <00:13:03.295>here <00:13:03.470>we <00:13:03.645>have <00:13:03.820>Bootstrap <00:13:03.995>for <00:13:04.170>our <00:13:04.345>styling

292
00:13:06.805 --> 00:13:09.965
<00:13:06.805>and <00:13:06.979>HDMX <00:13:07.155>to <00:13:07.329>do <00:13:07.505>some <00:13:07.680>reactive <00:13:07.854>stuff <00:13:08.030>later <00:13:08.204>on.

293
00:13:10.545 --> 00:13:14.085
<00:13:10.545>And <00:13:10.700>of <00:13:10.856>course <00:13:11.011>the <00:13:11.167>masterpiece, <00:13:11.322>the <00:13:11.478>JTE, <00:13:11.633>the <00:13:11.789>template <00:13:11.944>engine,

294
00:13:14.295 --> 00:13:15.565
<00:13:14.295>which <00:13:14.675>does <00:13:15.057>the <00:13:15.438>rendering,

295
00:13:15.665 --> 00:13:18.565
<00:13:15.665>and <00:13:15.898>then <00:13:16.131>some <00:13:16.365>default <00:13:16.598>spring <00:13:16.831>stuff, <00:13:17.064>uh,

296
00:13:18.565 --> 00:13:19.765
<00:13:18.565>which <00:13:18.781>I'm <00:13:18.997>not <00:13:19.213>going <00:13:19.429>into <00:13:19.645>that.

297
00:13:19.875 --> 00:13:23.045
<00:13:19.875>It's <00:13:20.030>just <00:13:20.186>regular <00:13:20.341>stuff. <00:13:20.497>You <00:13:20.652>need <00:13:20.808>to <00:13:20.963>get <00:13:21.119>spring <00:13:21.275>working.

298
00:13:23.785 --> 00:13:25.365
<00:13:23.785>Um, <00:13:24.251>from <00:13:24.718>the <00:13:25.185>packages,

299
00:13:25.665 --> 00:13:28.205
<00:13:25.665>we <00:13:25.820>have <00:13:25.976>a <00:13:26.131>product <00:13:26.287>which <00:13:26.442>we're <00:13:26.598>gonna <00:13:26.753>deliver <00:13:26.909>later <00:13:27.064>on.

300
00:13:28.785 --> 00:13:32.005
<00:13:28.785>Um, <00:13:28.925>and <00:13:29.064>we <00:13:29.204>have <00:13:29.344>our <00:13:29.485>repository, <00:13:29.625>which <00:13:29.765>we're <00:13:29.905>going <00:13:30.045>to <00:13:30.185>fill.

301
00:13:32.475 --> 00:13:35.165
<00:13:32.475>Then <00:13:32.630>we <00:13:32.786>have <00:13:32.941>a <00:13:33.097>service <00:13:33.252>as <00:13:33.408>the <00:13:33.563>glue <00:13:33.719>between, <00:13:33.875>uh,

302
00:13:35.185 --> 00:13:37.605
<00:13:35.185>the <00:13:35.535>repository <00:13:35.885>and <00:13:36.234>the <00:13:36.584>controller.

303
00:13:38.185 --> 00:13:41.885
<00:13:38.185>And, <00:13:38.324>uh, <00:13:38.464>yeah, <00:13:38.604>of <00:13:38.744>course <00:13:38.885>the <00:13:39.025>controller <00:13:39.165>is <00:13:39.305>acting <00:13:39.444>to, <00:13:39.584>uh,

304
00:13:42.015 --> 00:13:45.165
<00:13:42.015>serve <00:13:42.189>the <00:13:42.365>endpoints <00:13:42.540>and <00:13:42.715>to <00:13:42.890>do <00:13:43.064>the <00:13:43.240>template <00:13:43.415>rendering.

305
00:13:45.505 --> 00:13:47.045
<00:13:45.505>Pretty <00:13:45.967>much <00:13:46.429>pretty <00:13:46.891>simple.

306
00:13:47.185 --> 00:13:49.845
<00:13:47.185>And <00:13:47.340>we <00:13:47.496>already <00:13:47.651>have <00:13:47.807>a <00:13:47.962>few <00:13:48.118>templates <00:13:48.273>to <00:13:48.429>get <00:13:48.584>started.

307
00:13:50.525 --> 00:13:52.365
<00:13:50.525>I <00:13:50.699>am <00:13:50.875>going <00:13:51.050>to <00:13:51.225>start <00:13:51.400>with <00:13:51.574>the <00:13:51.750>base <00:13:51.925>template

308
00:13:52.465 --> 00:13:55.565
<00:13:52.465>or <00:13:52.605>not <00:13:52.745>with <00:13:52.885>the <00:13:53.025>index <00:13:53.165>template <00:13:53.305>here, <00:13:53.445>you <00:13:53.585>see <00:13:53.725>pretty <00:13:53.865>much,

309
00:13:55.825 --> 00:13:57.685
<00:13:55.825>uh, <00:13:56.105>just <00:13:56.385>I <00:13:56.665>love <00:13:56.945>HD <00:13:57.225>Mix.

310
00:13:57.685 --> 00:13:59.165
<00:13:57.685>Let's <00:13:57.875>have <00:13:58.065>a <00:13:58.255>look <00:13:58.446>how <00:13:58.636>that <00:13:58.826>looks <00:13:59.016>like.

311
00:14:00.065 --> 00:14:03.645
<00:14:00.065>Uh, <00:14:00.345>wrong <00:14:00.625>window. <00:14:00.905>There <00:14:01.185>we <00:14:01.465>go.

312
00:14:03.795 --> 00:14:06.005
<00:14:03.795>It's <00:14:04.028>just, <00:14:04.261>I <00:14:04.495>love <00:14:04.728>HD <00:14:04.961>Mix. <00:14:05.194>Perfect.

313
00:14:06.465 --> 00:14:09.165
<00:14:06.465>But <00:14:06.665>now <00:14:06.865>let's, <00:14:07.065>let's <00:14:07.265>start <00:14:07.465>with <00:14:07.665>something <00:14:07.865>simple

314
00:14:09.745 --> 00:14:13.525
<00:14:09.745>and <00:14:09.920>make <00:14:10.095>a <00:14:10.270>button <00:14:10.445>like, <00:14:10.620>uh, <00:14:10.795>so <00:14:10.970>you <00:14:11.145>understand

315
00:14:13.525 --> 00:14:14.565
<00:14:13.525>how <00:14:13.837>HDM <00:14:14.149>Mix <00:14:14.461>works.

316
00:14:15.145 --> 00:14:17.125
<00:14:15.145>So <00:14:15.285>we <00:14:15.425>are <00:14:15.564>gonna <00:14:15.704>click <00:14:15.845>on <00:14:15.985>a <00:14:16.125>button, <00:14:16.265>tell <00:14:16.405>a <00:14:16.545>joke

317
00:14:17.125 --> 00:14:18.645
<00:14:17.125>that's <00:14:17.467>gonna <00:14:17.809>trigger <00:14:18.151>the <00:14:18.492>controller

318
00:14:18.645 --> 00:14:21.125
<00:14:18.645>and <00:14:18.845>the <00:14:19.045>controller <00:14:19.245>gonna <00:14:19.444>return <00:14:19.645>a <00:14:19.845>joke <00:14:20.045>just

319
00:14:21.325 --> 00:14:23.605
<00:14:21.325>to <00:14:21.500>get <00:14:21.675>you <00:14:21.850>familiar <00:14:22.025>with <00:14:22.200>how <00:14:22.375>H <00:14:22.550>Mix <00:14:22.725>works.

320
00:14:24.345 --> 00:14:27.405
<00:14:24.345>Um, <00:14:24.520>so <00:14:24.695>back <00:14:24.870>to <00:14:25.045>the <00:14:25.220>code, <00:14:25.395>add <00:14:25.570>a <00:14:25.745>button

321
00:14:29.145 --> 00:14:31.845
<00:14:29.145>and <00:14:29.272>we're <00:14:29.399>gonna <00:14:29.526>style <00:14:29.654>it <00:14:29.781>a <00:14:29.908>little <00:14:30.035>bit <00:14:30.163>to <00:14:30.290>make <00:14:30.417>it <00:14:30.545>beautiful.

322
00:14:32.235 --> 00:14:36.525
<00:14:32.235>Tell <00:14:32.362>a <00:14:32.489>joke <00:14:32.616>and <00:14:32.744>the <00:14:32.871>joke <00:14:32.998>should <00:14:33.125>be <00:14:33.253>delivered <00:14:33.380>in <00:14:33.507>the <00:14:33.635>div.

323
00:14:36.525 --> 00:14:40.365
<00:14:36.525>Sorry, <00:14:36.665>I'm <00:14:36.805>a <00:14:36.944>little <00:14:37.084>bit <00:14:37.225>excited, <00:14:37.365>let's <00:14:37.505>put <00:14:37.645>it <00:14:37.785>that <00:14:37.925>way.

324
00:14:40.665 --> 00:14:42.125
<00:14:40.665>And <00:14:40.927>here <00:14:41.190>should <00:14:41.453>be <00:14:41.716>the <00:14:41.979>jol.

325
00:14:42.185 --> 00:14:45.045
<00:14:42.185>So <00:14:42.359>for, <00:14:42.535>that's <00:14:42.709>pretty <00:14:42.885>much <00:14:43.060>the <00:14:43.234>HTML <00:14:43.410>we <00:14:43.584>use.

326
00:14:45.145 --> 00:14:47.325
<00:14:45.145>And <00:14:45.425>now <00:14:45.704>comes <00:14:45.985>the <00:14:46.265>HT <00:14:46.545>MX,

327
00:14:47.325 --> 00:14:50.325
<00:14:47.325>which <00:14:47.465>we <00:14:47.605>have <00:14:47.745>included <00:14:47.885>again <00:14:48.025>in <00:14:48.165>the <00:14:48.305>base <00:14:48.445>image <00:14:48.585>right <00:14:48.725>here,

328
00:14:50.735 --> 00:14:53.485
<00:14:50.735>which <00:14:51.015>gonna <00:14:51.295>add <00:14:51.575>some <00:14:51.855>extra <00:14:52.135>functionality.

329
00:14:53.745 --> 00:14:57.205
<00:14:53.745>So <00:14:53.861>we <00:14:53.978>are <00:14:54.095>gonna <00:14:54.211>say, <00:14:54.328>alright, <00:14:54.445>do <00:14:54.561>an <00:14:54.678>do <00:14:54.795>an <00:14:54.911>A <00:14:55.028>get <00:14:55.145>request.

330
00:14:57.225 --> 00:15:00.805
<00:14:57.225>So <00:14:57.365>every <00:14:57.505>time <00:14:57.645>you <00:14:57.785>have <00:14:57.925>the <00:14:58.065>special <00:14:58.205>HDM <00:14:58.345>x <00:14:58.485>uh, <00:14:58.625>directive,

331
00:15:01.185 --> 00:15:03.765
<00:15:01.185>it <00:15:01.418>will <00:15:01.651>automatically <00:15:01.885>on <00:15:02.118>the <00:15:02.351>click <00:15:02.584>submit.

332
00:15:03.905 --> 00:15:06.325
<00:15:03.905>We <00:15:04.032>change <00:15:04.159>that <00:15:04.286>later <00:15:04.414>on. <00:15:04.541>But <00:15:04.668>for <00:15:04.795>now, <00:15:04.923>let's <00:15:05.050>do <00:15:05.177>like <00:15:05.305>this.

333
00:15:06.825 --> 00:15:10.045
<00:15:06.825>So <00:15:06.941>it <00:15:07.058>will <00:15:07.175>go <00:15:07.291>to <00:15:07.408>the <00:15:07.525>endpoint <00:15:07.641>joke <00:15:07.758>once <00:15:07.875>you <00:15:07.991>click <00:15:08.108>on <00:15:08.225>it,

334
00:15:10.305 --> 00:15:13.805
<00:15:10.305>and <00:15:10.432>now <00:15:10.559>we <00:15:10.686>just <00:15:10.814>have <00:15:10.941>to <00:15:11.068>specify <00:15:11.195>the <00:15:11.323>content <00:15:11.450>of <00:15:11.577>that <00:15:11.704>one.

335
00:15:14.425 --> 00:15:17.965
<00:15:14.425>Um, <00:15:14.658>should <00:15:14.891>be <00:15:15.125>delivered <00:15:15.358>to <00:15:15.591>that <00:15:15.824>diff.

336
00:15:18.065 --> 00:15:21.085
<00:15:18.065>So <00:15:18.220>that's <00:15:18.376>pretty <00:15:18.531>much, <00:15:18.687>it's <00:15:18.842>gonna <00:15:18.998>call <00:15:19.153>the <00:15:19.309>joke <00:15:19.465>endpoint

337
00:15:21.185 --> 00:15:23.165
<00:15:21.185>and <00:15:21.385>gonna <00:15:21.584>deliver <00:15:21.785>the <00:15:21.984>content <00:15:22.185>into <00:15:22.385>the <00:15:22.584>diff.

338
00:15:23.995 --> 00:15:26.405
<00:15:23.995>Alright, <00:15:24.345>let's <00:15:24.695>do <00:15:25.045>the <00:15:25.395>endpoint.

339
00:15:26.785 --> 00:15:30.205
<00:15:26.785>Um, <00:15:26.925>yeah, <00:15:27.064>we <00:15:27.204>do <00:15:27.344>have <00:15:27.485>only <00:15:27.625>the <00:15:27.765>endpoint <00:15:27.905>for <00:15:28.045>the <00:15:28.185>index,

340
00:15:30.205 --> 00:15:31.285
<00:15:30.205>what <00:15:30.399>you <00:15:30.593>have <00:15:30.788>seen <00:15:30.982>right <00:15:31.177>now,

341
00:15:31.285 --> 00:15:32.965
<00:15:31.285>which <00:15:31.564>is <00:15:31.844>called <00:15:32.125>the <00:15:32.405>index <00:15:32.685>template.

342
00:15:33.015 --> 00:15:36.125
<00:15:33.015>Let's <00:15:33.215>now <00:15:33.415>add <00:15:33.615>a <00:15:33.814>route <00:15:34.015>for <00:15:34.215>the <00:15:34.415>joke.

343
00:15:36.745 --> 00:15:40.925
<00:15:36.745>So <00:15:36.920>here <00:15:37.095>we <00:15:37.270>have <00:15:37.445>the <00:15:37.620>joke, <00:15:37.795>the <00:15:37.970>joke <00:15:38.145>string.

344
00:15:41.015 --> 00:15:42.205
<00:15:41.015>We're <00:15:41.193>gonna <00:15:41.372>have <00:15:41.550>a <00:15:41.729>list <00:15:41.907>of <00:15:42.086>joke.

345
00:15:42.225 --> 00:15:45.725
<00:15:42.225>I'm <00:15:42.365>not <00:15:42.505>really <00:15:42.645>good <00:15:42.785>in <00:15:42.925>telling <00:15:43.065>jokes, <00:15:43.205>so <00:15:43.345>let's <00:15:43.485>use <00:15:43.625>AI

346
00:15:46.435 --> 00:15:47.485
<00:15:46.435>like <00:15:46.907>everyone <00:15:47.380>does.

347
00:15:47.585 --> 00:15:52.445
<00:15:47.585>Now, <00:15:47.760>uh, <00:15:47.935>give <00:15:48.110>some <00:15:48.285>funny <00:15:48.460>jokes <00:15:48.635>for <00:15:48.810>my <00:15:48.985>list

348
00:15:52.585 --> 00:15:54.885
<00:15:52.585>of, <00:15:52.935>all <00:15:53.285>right, <00:15:53.635>let's <00:15:53.985>see.

349
00:15:55.235 --> 00:15:58.885
<00:15:55.235>Okay, <00:15:55.390>don't <00:15:55.546>have <00:15:55.701>to, <00:15:55.857>God, <00:15:56.012>so <00:15:56.168>many <00:15:56.323>jokes <00:15:56.479>don't <00:15:56.635>care.

350
00:15:59.385 --> 00:16:00.845
<00:15:59.385>Um, <00:15:59.572>I <00:15:59.760>don't <00:15:59.948>have <00:16:00.135>time <00:16:00.323>to <00:16:00.511>read <00:16:00.699>them.

351
00:16:00.945 --> 00:16:03.725
<00:16:00.945>You <00:16:01.085>can <00:16:01.225>read <00:16:01.365>them <00:16:01.505>while <00:16:01.645>I'm <00:16:01.785>pasting <00:16:01.925>them <00:16:02.065>in. <00:16:02.205>I <00:16:02.345>dunno.

352
00:16:03.935 --> 00:16:06.765
<00:16:03.935>Let's <00:16:04.109>pick <00:16:04.285>a <00:16:04.459>random <00:16:04.635>one <00:16:04.810>once <00:16:04.984>on <00:16:05.160>that <00:16:05.334>one.

353
00:16:06.905 --> 00:16:11.245
<00:16:06.905>And <00:16:07.079>then <00:16:07.255>we're <00:16:07.430>just <00:16:07.605>gonna <00:16:07.780>say, <00:16:07.954>listen, <00:16:08.130>dear <00:16:08.305>Springing,

354
00:16:11.335 --> 00:16:13.405
<00:16:11.335>don't <00:16:11.685>return, <00:16:12.035>uh, <00:16:12.385>template, <00:16:12.735>because

355
00:16:13.405 --> 00:16:14.965
<00:16:13.405>otherwise <00:16:13.871>default <00:16:14.338>by <00:16:14.805>default.

356
00:16:15.025 --> 00:16:17.245
<00:16:15.025>If <00:16:15.258>it's <00:16:15.491>season <00:16:15.725>string, <00:16:15.958>it <00:16:16.191>will <00:16:16.425>try

357
00:16:17.245 --> 00:16:18.805
<00:16:17.245>to <00:16:17.595>find, <00:16:17.945>uh, <00:16:18.295>the <00:16:18.645>template.

358
00:16:19.105 --> 00:16:22.845
<00:16:19.105>We <00:16:19.245>just <00:16:19.385>want <00:16:19.525>to <00:16:19.665>return <00:16:19.805>the <00:16:19.945>plane <00:16:20.085>string. <00:16:20.225>So <00:16:20.365>that's <00:16:20.505>it.

359
00:16:23.065 --> 00:16:26.825
<00:16:23.065>Um, <00:16:23.265>we're <00:16:23.465>ready. <00:16:23.665>Let's <00:16:23.865>go <00:16:24.065>to <00:16:24.265>our <00:16:24.465>page.

360
00:16:26.875 --> 00:16:31.795
<00:16:26.875>Let's <00:16:27.015>see <00:16:27.155>how <00:16:27.295>it <00:16:27.435>works. <00:16:27.575>Refresh, <00:16:27.715>there <00:16:27.855>is <00:16:27.995>tell <00:16:28.135>a <00:16:28.275>joke.

361
00:16:31.795 --> 00:16:33.075
<00:16:31.795>Perfect. <00:16:32.083>I <00:16:32.371>click <00:16:32.659>on <00:16:32.947>it

362
00:16:33.215 --> 00:16:36.635
<00:16:33.215>and <00:16:33.331>I <00:16:33.448>get <00:16:33.565>a <00:16:33.681>joke <00:16:33.798>every <00:16:33.915>time <00:16:34.031>I <00:16:34.148>click <00:16:34.265>random <00:16:34.381>from <00:16:34.498>my <00:16:34.615>backend.

363
00:16:36.655 --> 00:16:39.595
<00:16:36.655>That's <00:16:36.810>pretty <00:16:36.966>much <00:16:37.121>it. <00:16:37.277>And <00:16:37.432>if <00:16:37.588>we <00:16:37.743>now <00:16:37.899>take <00:16:38.055>a

364
00:16:40.145 --> 00:16:44.075
<00:16:40.145>peak <00:16:40.272>at <00:16:40.399>the <00:16:40.526>network, <00:16:40.654>we <00:16:40.781>can <00:16:40.908>see <00:16:41.035>it's <00:16:41.163>really <00:16:41.290>doing <00:16:41.417>just <00:16:41.545>that.

365
00:16:44.265 --> 00:16:47.435
<00:16:44.265>It's <00:16:44.420>just <00:16:44.576>sending <00:16:44.731>a <00:16:44.887>request <00:16:45.042>to <00:16:45.198>get, <00:16:45.353>request <00:16:45.509>to <00:16:45.665>joke

366
00:16:47.455 --> 00:16:49.355
<00:16:47.455>and <00:16:47.735>it's <00:16:48.015>returning <00:16:48.295>just <00:16:48.575>a <00:16:48.855>joke.

367
00:16:49.455 --> 00:16:52.755
<00:16:49.455>That's <00:16:49.630>it. <00:16:49.805>That <00:16:49.980>is <00:16:50.155>the <00:16:50.330>power <00:16:50.505>of <00:16:50.680>HTM <00:16:50.855>X.

368
00:16:52.755 --> 00:16:54.755
<00:16:52.755>There's <00:16:52.930>much <00:16:53.105>more <00:16:53.280>you <00:16:53.455>can <00:16:53.630>add <00:16:53.805>on <00:16:53.980>to <00:16:54.155>that,

369
00:16:54.815 --> 00:16:57.155
<00:16:54.815>but <00:16:55.015>in <00:16:55.215>the <00:16:55.415>basic <00:16:55.615>sense, <00:16:55.815>that's <00:16:56.015>HT <00:16:56.215>MX.

370
00:16:57.625 --> 00:17:01.555
<00:16:57.625>Alright, <00:16:57.800>um, <00:16:57.975>let's <00:16:58.150>stop <00:16:58.325>with <00:16:58.500>jokes. <00:16:58.675>Let's <00:16:58.850>get <00:16:59.025>serious.

371
00:17:01.855 --> 00:17:05.195
<00:17:01.855>Um, <00:17:02.088>there <00:17:02.321>is <00:17:02.555>a <00:17:02.788>platform <00:17:03.021>called, <00:17:03.255>uh,

372
00:17:05.335 --> 00:17:09.195
<00:17:05.335>web <00:17:05.490>Sim <00:17:05.646>we're <00:17:05.801>gonna <00:17:05.957>use <00:17:06.112>now <00:17:06.268>to <00:17:06.423>generate <00:17:06.579>our, <00:17:06.735>uh,

373
00:17:09.255 --> 00:17:10.835
<00:17:09.255>little <00:17:09.955>online <00:17:10.655>shops.

374
00:17:10.855 --> 00:17:14.835
<00:17:10.855>So, <00:17:11.010>um, <00:17:11.166>we <00:17:11.321>set <00:17:11.477>Frameworks, <00:17:11.632>online <00:17:11.788>frameworks, <00:17:11.943>what <00:17:12.099>was <00:17:12.255>it?

375
00:17:15.655 --> 00:17:17.395
<00:17:15.655>It <00:17:15.935>was <00:17:16.214>actually <00:17:16.494>Front <00:17:16.774>End <00:17:17.055>Frameworks

376
00:17:18.375 --> 00:17:22.475
<00:17:18.375>Online <00:17:18.608>Shop <00:17:18.841>with <00:17:19.075>nine <00:17:19.308>Pro <00:17:19.541>Products <00:17:19.775>for

377
00:17:23.135 --> 00:17:24.275
<00:17:23.135>on <00:17:23.648>content <00:17:24.161>framework.

378
00:17:24.335 --> 00:17:25.875
<00:17:24.335>No <00:17:24.612>front <00:17:24.889>end, <00:17:25.166>like, <00:17:25.443>like <00:17:25.721>our

379
00:17:25.875 --> 00:17:27.115
<00:17:25.875>front <00:17:26.154>end <00:17:26.433>framework, <00:17:26.712>like <00:17:26.991>React

380
00:17:27.115 --> 00:17:28.355
<00:17:27.115>And <00:17:27.394>View <00:17:27.673>Front <00:17:27.952>end <00:17:28.231>Frameworks.

381
00:17:28.355 --> 00:17:31.795
<00:17:28.355>Yeah, <00:17:28.530>yeah, <00:17:28.705>yeah. <00:17:28.880>Okay, <00:17:29.055>perfect. <00:17:29.230>We're <00:17:29.405>gonna <00:17:29.580>use <00:17:29.755>Bootstrap.

382
00:17:31.795 --> 00:17:34.155
<00:17:31.795>Please <00:17:32.028>use <00:17:32.261>Bootstrap <00:17:32.495>for <00:17:32.728>that <00:17:32.961>little <00:17:33.195>AI

383
00:17:34.535 --> 00:17:36.915
<00:17:34.535>and <00:17:34.735>let's <00:17:34.935>hit <00:17:35.135>Andrew, <00:17:35.335>see <00:17:35.535>what <00:17:35.735>comes <00:17:35.935>out,

384
00:17:37.065 --> 00:17:40.875
<00:17:37.065>because <00:17:37.240>that's <00:17:37.415>gonna <00:17:37.590>be <00:17:37.765>our <00:17:37.940>source <00:17:38.115>of <00:17:38.290>our, <00:17:38.465>uh,

385
00:17:40.875 --> 00:17:43.275
<00:17:40.875>little <00:17:41.225>e-commerce <00:17:41.575>shop, <00:17:41.925>frontend <00:17:42.275>framework,

386
00:17:43.275 --> 00:17:45.515
<00:17:43.275>shop <00:17:43.450>a <00:17:43.625>little <00:17:43.800>bit <00:17:43.975>our <00:17:44.150>frontend <00:17:44.325>web <00:17:44.500>shop, <00:17:44.675>where

387
00:17:45.615 --> 00:17:50.405
<00:17:45.615>of <00:17:45.815>course <00:17:46.015>react <00:17:46.215>of <00:17:46.415>course, <00:17:46.615>view <00:17:46.815>JS <00:17:47.015>on

388
00:17:50.405 --> 00:17:51.405
<00:17:50.405>The <00:17:50.585>big <00:17:50.764>three. <00:17:50.945>Big <00:17:51.125>three <00:17:51.305>next.

389
00:17:51.405 --> 00:17:53.325
<00:17:51.405>Yeah, <00:17:51.871>next <00:17:52.338>Tailwinds. <00:17:52.805>Oh,

390
00:17:53.605 --> 00:17:54.605
<00:17:53.605>Interesting. <00:17:54.055>Is <00:17:54.505>that

391
00:17:54.605 --> 00:17:56.165
<00:17:54.605>mix <00:17:54.838>there? <00:17:55.071>No, <00:17:55.305>it's <00:17:55.538>probably <00:17:55.771>not <00:17:56.005>there.

392
00:17:56.795 --> 00:17:58.325
<00:17:56.795>It's <00:17:57.070>probably <00:17:57.345>missing. <00:17:57.621>It's <00:17:57.896>too <00:17:58.172>new.

393
00:17:58.325 --> 00:17:59.925
<00:17:58.325>Anyway, <00:17:58.558>it <00:17:58.791>was <00:17:59.025>a <00:17:59.258>great <00:17:59.491>idea <00:17:59.725>though.

394
00:18:00.445 --> 00:18:01.685
<00:18:00.445>Yeah, <00:18:00.724>that, <00:18:01.003>that <00:18:01.282>is <00:18:01.561>perfect.

395
00:18:01.905 --> 00:18:05.165
<00:18:01.905>So <00:18:02.032>we <00:18:02.159>just <00:18:02.286>have, <00:18:02.414>I <00:18:02.541>normally <00:18:02.668>have <00:18:02.795>prices <00:18:02.923>and <00:18:03.050>all <00:18:03.177>that <00:18:03.305>stuff.

396
00:18:05.265 --> 00:18:08.085
<00:18:05.265>We <00:18:05.465>don't <00:18:05.665>have <00:18:05.865>prices <00:18:06.065>here, <00:18:06.265>but <00:18:06.465>doesn't <00:18:06.665>matter.

397
00:18:08.645 --> 00:18:11.365
<00:18:08.645>I <00:18:08.761>think <00:18:08.878>we <00:18:08.995>can <00:18:09.111>still <00:18:09.228>do <00:18:09.345>it. <00:18:09.461>We <00:18:09.578>can <00:18:09.695>still <00:18:09.811>pull <00:18:09.928>it <00:18:10.045>off.

398
00:18:11.435 --> 00:18:14.485
<00:18:11.435>Doesn't <00:18:11.610>matter. <00:18:11.784>I <00:18:11.960>have <00:18:12.135>to <00:18:12.310>copy <00:18:12.485>now <00:18:12.659>the <00:18:12.835>navigation.

399
00:18:14.895 --> 00:18:16.165
<00:18:14.895>Let's <00:18:15.276>take <00:18:15.657>the <00:18:16.038>navigation

400
00:18:16.345 --> 00:18:20.925
<00:18:16.345>and <00:18:16.472>just <00:18:16.599>put <00:18:16.726>it <00:18:16.854>into <00:18:16.981>our <00:18:17.108>base <00:18:17.235>image, <00:18:17.363>just <00:18:17.490>above <00:18:17.617>the <00:18:17.745>content.

401
00:18:21.035 --> 00:18:24.605
<00:18:21.035>Perfect. <00:18:21.190>Now <00:18:21.346>I'm <00:18:21.501>just <00:18:21.657>gonna <00:18:21.812>pick <00:18:21.968>to <00:18:22.123>make <00:18:22.279>things <00:18:22.435>faster.

402
00:18:24.865 --> 00:18:26.845
<00:18:24.865>The <00:18:25.145>future. <00:18:25.425>There's <00:18:25.705>the <00:18:25.985>future. <00:18:26.265>Perfect.

403
00:18:27.215 --> 00:18:31.165
<00:18:27.215>Gonna <00:18:27.370>put <00:18:27.526>it <00:18:27.681>below <00:18:27.837>the <00:18:27.992>content. <00:18:28.148>All <00:18:28.303>right, <00:18:28.459>that's <00:18:28.615>set.

404
00:18:31.305 --> 00:18:32.525
<00:18:31.305>Now <00:18:31.524>we're <00:18:31.744>going <00:18:31.963>to <00:18:32.183>the <00:18:32.403>index.

405
00:18:32.535 --> 00:18:36.725
<00:18:32.535>We're <00:18:32.690>gonna <00:18:32.846>remove <00:18:33.001>the <00:18:33.157>joke <00:18:33.312>thing <00:18:33.468>that's <00:18:33.623>not <00:18:33.779>needed <00:18:33.935>anymore.

406
00:18:37.015 --> 00:18:39.965
<00:18:37.015>Let's <00:18:37.170>start <00:18:37.326>building <00:18:37.481>the <00:18:37.637>page. <00:18:37.792>Okay, <00:18:37.948>it <00:18:38.103>has <00:18:38.259>the <00:18:38.415>header.

407
00:18:39.965 --> 00:18:42.845
<00:18:39.965>Let's <00:18:40.139>take <00:18:40.314>the <00:18:40.490>header. <00:18:40.665>Let's <00:18:40.840>just <00:18:41.014>copy <00:18:41.189>that. <00:18:41.365>Perfect.

408
00:18:43.465 --> 00:18:46.445
<00:18:43.465>And <00:18:43.605>now <00:18:43.745>we're <00:18:43.885>gonna <00:18:44.024>have <00:18:44.165>a <00:18:44.304>diff <00:18:44.445>where <00:18:44.584>the <00:18:44.725>products <00:18:44.865>are.

409
00:18:47.145 --> 00:18:48.965
<00:18:47.145>Um, <00:18:47.495>gonna <00:18:47.845>have <00:18:48.195>a <00:18:48.545>class.

410
00:18:49.095 --> 00:18:51.725
<00:18:49.095>Let's <00:18:49.235>just <00:18:49.375>pick <00:18:49.515>the <00:18:49.655>one <00:18:49.795>they <00:18:49.935>use <00:18:50.075>to <00:18:50.215>make <00:18:50.355>things <00:18:50.495>easy.

411
00:18:51.875 --> 00:18:54.325
<00:18:51.875>They <00:18:52.050>just <00:18:52.225>have <00:18:52.400>row, <00:18:52.575>I'm <00:18:52.750>gonna <00:18:52.925>stick <00:18:53.100>with <00:18:53.275>row.

412
00:18:55.265 --> 00:18:57.685
<00:18:55.265>And <00:18:55.465>then <00:18:55.665>the <00:18:55.865>one <00:18:56.065>thing <00:18:56.265>I <00:18:56.465>already <00:18:56.665>prepared,

413
00:18:57.685 --> 00:18:59.205
<00:18:57.685>because <00:18:57.913>I <00:18:58.140>know <00:18:58.369>we're <00:18:58.597>gonna <00:18:58.824>have <00:18:59.053>products,

414
00:18:59.445 --> 00:19:03.125
<00:18:59.445>I <00:18:59.585>made <00:18:59.725>a <00:18:59.865>little <00:19:00.004>product <00:19:00.145>template, <00:19:00.284>uh, <00:19:00.425>which <00:19:00.564>is <00:19:00.705>nothing <00:19:00.845>else

415
00:19:03.225 --> 00:19:05.205
<00:19:03.225>as <00:19:03.425>a <00:19:03.625>component <00:19:03.824>when <00:19:04.024>you're <00:19:04.225>coming <00:19:04.425>from <00:19:04.625>React.

416
00:19:05.265 --> 00:19:09.405
<00:19:05.265>So <00:19:05.420>you <00:19:05.576>can <00:19:05.731>build <00:19:05.887>your <00:19:06.042>own, <00:19:06.198>um, <00:19:06.353>your <00:19:06.509>own, <00:19:06.665>uh,

417
00:19:09.405 --> 00:19:11.325
<00:19:09.405>little <00:19:09.685>components, <00:19:09.965>which <00:19:10.245>helps <00:19:10.524>you <00:19:10.805>out

418
00:19:11.425 --> 00:19:13.645
<00:19:11.425>and <00:19:11.705>helps <00:19:11.985>you <00:19:12.264>do <00:19:12.544>abstract <00:19:12.825>things.

419
00:19:14.315 --> 00:19:17.045
<00:19:14.315>Yeah. <00:19:14.490>And <00:19:14.665>now <00:19:14.840>we <00:19:15.015>need <00:19:15.190>a <00:19:15.365>list <00:19:15.540>of <00:19:15.715>products.

420
00:19:17.185 --> 00:19:19.285
<00:19:17.185>So <00:19:17.418>product <00:19:17.651>is <00:19:17.885>already <00:19:18.118>defined <00:19:18.351>by <00:19:18.585>me.

421
00:19:19.305 --> 00:19:23.205
<00:19:19.305>And <00:19:19.432>because <00:19:19.559>I <00:19:19.686>don't <00:19:19.814>want <00:19:19.941>to <00:19:20.068>copy <00:19:20.195>all <00:19:20.323>these <00:19:20.450>things <00:19:20.577>by <00:19:20.705>myself,

422
00:19:23.385 --> 00:19:25.685
<00:19:23.385>I'm <00:19:23.665>gonna <00:19:23.945>ask <00:19:24.225>my <00:19:24.504>friend <00:19:24.785>Claude.

423
00:19:27.065 --> 00:19:30.175
<00:19:27.065>And <00:19:27.298>Hey <00:19:27.531>Claude, <00:19:27.765>I <00:19:27.998>need <00:19:28.231>your <00:19:28.465>help.

424
00:19:32.285 --> 00:19:36.635
<00:19:32.285>Can <00:19:32.565>you <00:19:32.845>please, <00:19:33.125>um, <00:19:33.405>bill, <00:19:33.685>uh,

425
00:19:37.105 --> 00:19:41.955
<00:19:37.105>data <00:19:37.385>classes <00:19:37.665>for <00:19:37.945>me <00:19:38.225>in <00:19:38.505>Kolin

426
00:19:42.615 --> 00:19:46.395
<00:19:42.615>co <00:19:42.895>Kotlin <00:19:43.175>from <00:19:43.455>co <00:19:43.735>Hot <00:19:44.015>Lynn,

427
00:19:46.415 --> 00:19:49.275
<00:19:46.415>or <00:19:46.615>God, <00:19:46.815>I <00:19:47.014>don't <00:19:47.215>know, <00:19:47.415>it's <00:19:47.615>written <00:19:47.815>like

428
00:19:49.275 --> 00:19:52.795
<00:19:49.275>that <00:19:49.475>from <00:19:49.675>me <00:19:49.875>in <00:19:50.075>Kotlin, <00:19:50.275>from <00:19:50.475>EHD <00:19:50.675>email.

429
00:19:53.975 --> 00:19:56.195
<00:19:53.975>So <00:19:54.208>I'm <00:19:54.441>gonna <00:19:54.675>copy <00:19:54.908>him <00:19:55.141>the <00:19:55.375>data

430
00:19:56.375 --> 00:19:58.075
<00:19:56.375>and <00:19:56.575>we're <00:19:56.775>just <00:19:56.975>gonna <00:19:57.175>give <00:19:57.375>him <00:19:57.575>the <00:19:57.775>product.

431
00:19:58.245 --> 00:20:01.595
<00:19:58.245>Let's <00:19:58.385>see <00:19:58.524>what <00:19:58.665>he <00:19:58.804>does <00:19:58.945>with <00:19:59.084>the <00:19:59.225>price. <00:19:59.364>I <00:19:59.504>don't <00:19:59.645>know.

432
00:20:01.745 --> 00:20:04.035
<00:20:01.745>Okay, <00:20:01.900>while <00:20:02.056>he <00:20:02.211>is <00:20:02.367>doing <00:20:02.522>that, <00:20:02.678>we <00:20:02.833>are <00:20:02.989>going <00:20:03.145>back

433
00:20:04.175 --> 00:20:06.595
<00:20:04.175>and <00:20:04.375>actually <00:20:04.575>filling <00:20:04.774>up, <00:20:04.975>taking <00:20:05.175>the <00:20:05.375>first <00:20:05.575>template,

434
00:20:06.985 --> 00:20:09.795
<00:20:06.985>just <00:20:07.218>taking <00:20:07.451>this <00:20:07.685>card <00:20:07.918>for <00:20:08.151>styling, <00:20:08.385>um,

435
00:20:09.795 --> 00:20:12.835
<00:20:09.795>jumping <00:20:10.028>into <00:20:10.261>my <00:20:10.495>product <00:20:10.728>list <00:20:10.961>right <00:20:11.195>here.

436
00:20:12.895 --> 00:20:15.075
<00:20:12.895>So <00:20:13.070>that's <00:20:13.245>pretty <00:20:13.420>much <00:20:13.595>just <00:20:13.770>the <00:20:13.945>product <00:20:14.120>list <00:20:14.295>component,

437
00:20:15.075 --> 00:20:17.195
<00:20:15.075>which <00:20:15.250>will <00:20:15.425>iterate <00:20:15.600>of <00:20:15.775>all <00:20:15.950>the <00:20:16.125>products <00:20:16.300>we <00:20:16.475>have

438
00:20:17.935 --> 00:20:21.075
<00:20:17.935>and <00:20:18.168>just <00:20:18.401>fill <00:20:18.635>in <00:20:18.868>the <00:20:19.101>image <00:20:19.335>source.

439
00:20:21.175 --> 00:20:22.955
<00:20:21.175>And <00:20:21.408>you <00:20:21.641>know <00:20:21.875>what, <00:20:22.108>that <00:20:22.341>is <00:20:22.575>one

440
00:20:22.955 --> 00:20:26.235
<00:20:22.955>of <00:20:23.082>the <00:20:23.209>biggest <00:20:23.336>thing <00:20:23.464>I <00:20:23.591>love <00:20:23.718>about <00:20:23.845>the <00:20:23.973>approach <00:20:24.100>of <00:20:24.227>HDM <00:20:24.355>X

441
00:20:26.235 --> 00:20:27.755
<00:20:26.235>or <00:20:26.577>the <00:20:26.919>MVC <00:20:27.261>in <00:20:27.603>general,

442
00:20:28.225 --> 00:20:30.835
<00:20:28.225>because <00:20:28.425>now <00:20:28.625>I <00:20:28.824>can <00:20:29.024>just <00:20:29.225>access <00:20:29.425>backend <00:20:29.625>data.

443
00:20:31.025 --> 00:20:33.875
<00:20:31.025>What <00:20:31.141>I <00:20:31.258>normally, <00:20:31.375>what <00:20:31.491>I <00:20:31.608>need <00:20:31.725>to <00:20:31.841>do <00:20:31.958>is <00:20:32.075>do <00:20:32.191>the <00:20:32.308>j <00:20:32.425>there,

444
00:20:33.915 --> 00:20:35.075
<00:20:33.915>I <00:20:34.123>have <00:20:34.332>to <00:20:34.541>think <00:20:34.750>about <00:20:34.959>backend.

445
00:20:35.105 --> 00:20:36.995
<00:20:35.105>Okay, <00:20:35.338>how <00:20:35.571>do <00:20:35.805>I <00:20:36.038>person <00:20:36.271>the <00:20:36.505>API,

446
00:20:37.115 --> 00:20:39.595
<00:20:37.115>which <00:20:37.290>will <00:20:37.465>deliver <00:20:37.640>these <00:20:37.815>things <00:20:37.990>to <00:20:38.165>the <00:20:38.340>other <00:20:38.515>side?

447
00:20:39.625 --> 00:20:41.275
<00:20:39.625>Then <00:20:39.800>I <00:20:39.975>have <00:20:40.150>to <00:20:40.325>think <00:20:40.500>on <00:20:40.675>the <00:20:40.850>other <00:20:41.025>side,

448
00:20:41.375 --> 00:20:44.195
<00:20:41.375>how <00:20:41.530>do <00:20:41.686>I <00:20:41.841>do <00:20:41.997>server <00:20:42.152>site <00:20:42.308>render <00:20:42.463>not <00:20:42.619>needed <00:20:42.775>here.

449
00:20:44.695 --> 00:20:48.965
<00:20:44.695>So, <00:20:44.822>um, <00:20:44.949>let's <00:20:45.076>go <00:20:45.204>with <00:20:45.331>the <00:20:45.458>image. <00:20:45.585>Let's <00:20:45.713>go <00:20:45.840>with <00:20:45.967>the <00:20:46.095>title.

450
00:20:53.275 --> 00:20:56.565
<00:20:53.275>With <00:20:53.555>the <00:20:53.835>title <00:20:54.115>and <00:20:54.395>the <00:20:54.675>description.

451
00:20:56.745 --> 00:20:58.525
<00:20:56.745>So <00:20:56.919>I'm <00:20:57.094>just <00:20:57.270>gonna <00:20:57.445>fill <00:20:57.620>out <00:20:57.794>the <00:20:57.969>blanks <00:20:58.145>here

452
00:20:58.545 --> 00:21:00.045
<00:20:58.545>to <00:20:58.882>make <00:20:59.220>this <00:20:59.557>template <00:20:59.895>work.

453
00:21:00.785 --> 00:21:03.245
<00:21:00.785>And <00:21:00.940>yeah, <00:21:01.096>that's <00:21:01.251>pretty <00:21:01.407>much <00:21:01.562>it. <00:21:01.718>We <00:21:01.873>are <00:21:02.029>done <00:21:02.185>here.

454
00:21:04.255 --> 00:21:07.325
<00:21:04.255>We're <00:21:04.488>done <00:21:04.721>here. <00:21:04.955>We're <00:21:05.188>done <00:21:05.421>here. <00:21:05.655>Perfect.

455
00:21:07.985 --> 00:21:12.285
<00:21:07.985>So <00:21:08.101>now <00:21:08.218>what <00:21:08.334>we <00:21:08.451>can <00:21:08.568>do <00:21:08.685>is, <00:21:08.801>wait <00:21:08.918>a <00:21:09.034>minute, <00:21:09.151>I <00:21:09.268>forgot <00:21:09.385>something.

456
00:21:12.865 --> 00:21:16.125
<00:21:12.865>You <00:21:13.098>know <00:21:13.331>what, <00:21:13.565>this <00:21:13.798>template <00:21:14.031>of <00:21:14.265>course

457
00:21:16.655 --> 00:21:18.085
<00:21:16.655>still <00:21:17.298>needs <00:21:17.942>products.

458
00:21:18.505 --> 00:21:20.805
<00:21:18.505>So <00:21:18.660>in <00:21:18.816>the <00:21:18.971>controller, <00:21:19.127>I <00:21:19.282>have <00:21:19.438>to <00:21:19.593>pass <00:21:19.749>them <00:21:19.905>in.

459
00:21:21.145 --> 00:21:25.365
<00:21:21.145>And <00:21:21.285>that's <00:21:21.425>how <00:21:21.565>you <00:21:21.705>actually <00:21:21.845>do <00:21:21.985>it <00:21:22.125>when <00:21:22.264>you <00:21:22.405>program <00:21:22.545>MBC.

460
00:21:26.705 --> 00:21:28.765
<00:21:26.705>So <00:21:26.938>I'm <00:21:27.171>just <00:21:27.405>gonna <00:21:27.638>have <00:21:27.871>my <00:21:28.105>controller

461
00:21:28.865 --> 00:21:32.725
<00:21:28.865>and <00:21:29.005>just <00:21:29.145>use <00:21:29.285>my <00:21:29.425>product <00:21:29.565>service, <00:21:29.705>which <00:21:29.845>is <00:21:29.985>just <00:21:30.125>a <00:21:30.265>wrap

462
00:21:32.745 --> 00:21:34.285
<00:21:32.745>around <00:21:33.437>the <00:21:34.131>repository.

463
00:21:34.505 --> 00:21:37.005
<00:21:34.505>And <00:21:34.660>then <00:21:34.816>I'm <00:21:34.971>gonna <00:21:35.127>blow <00:21:35.282>this <00:21:35.438>up <00:21:35.593>a <00:21:35.749>little <00:21:35.905>bit

464
00:21:37.105 --> 00:21:40.565
<00:21:37.105>and <00:21:37.280>just <00:21:37.455>say, <00:21:37.630>listen, <00:21:37.805>now <00:21:37.980>we <00:21:38.155>have <00:21:38.330>to <00:21:38.505>return.

465
00:21:40.905 --> 00:21:44.445
<00:21:40.905>And <00:21:41.060>the <00:21:41.216>model <00:21:41.371>is <00:21:41.527>used <00:21:41.682>to <00:21:41.838>communicate <00:21:41.993>with <00:21:42.149>the <00:21:42.305>template.

466
00:21:44.585 --> 00:21:48.165
<00:21:44.585>So <00:21:44.740>I'm <00:21:44.896>just <00:21:45.051>saying <00:21:45.207>the <00:21:45.362>parameter <00:21:45.518>product <00:21:45.673>should <00:21:45.829>be <00:21:45.985>filled,

467
00:21:48.165 --> 00:21:51.805
<00:21:48.165>product <00:21:48.340>service, <00:21:48.514>and <00:21:48.690>we're <00:21:48.865>gonna <00:21:49.040>go <00:21:49.215>with <00:21:49.389>all <00:21:49.565>products.

468
00:21:51.905 --> 00:21:53.325
<00:21:51.905>That's <00:21:52.544>it. <00:21:53.183>Okay.

469
00:21:53.325 --> 00:21:54.365
<00:21:53.325>Gonna <00:21:53.793>deploy <00:21:54.261>that

470
00:21:55.265 --> 00:21:57.445
<00:21:55.265>and <00:21:55.498>hopefully <00:21:55.731>cross <00:21:55.965>fingers, <00:21:56.198>everything <00:21:56.431>will <00:21:56.665>work.

471
00:21:57.795 --> 00:22:00.485
<00:21:57.795>Last <00:21:58.075>famous <00:21:58.355>words. <00:21:58.635>So <00:21:58.915>I'm <00:21:59.195>refreshing

472
00:22:01.545 --> 00:22:04.605
<00:22:01.545>and <00:22:01.720>we <00:22:01.895>have <00:22:02.070>every, <00:22:02.245>um, <00:22:02.420>do <00:22:02.595>you <00:22:02.770>know <00:22:02.945>what?

473
00:22:04.605 --> 00:22:07.325
<00:22:04.605>We <00:22:05.071>forgot <00:22:05.538>the <00:22:06.005>products.

474
00:22:08.665 --> 00:22:09.995
<00:22:08.665>It's <00:22:08.904>gonna <00:22:09.143>work <00:22:09.383>without <00:22:09.622>the <00:22:09.861>product.

475
00:22:10.365 --> 00:22:12.195
<00:22:10.365>Thank <00:22:10.598>you <00:22:10.831>Claude, <00:22:11.065>for <00:22:11.298>filling <00:22:11.531>that <00:22:11.765>in.

476
00:22:12.455 --> 00:22:14.675
<00:22:12.455>Of <00:22:12.688>course, <00:22:12.921>without <00:22:13.155>products, <00:22:13.388>nothing <00:22:13.621>will <00:22:13.855>work.

477
00:22:14.815 --> 00:22:16.155
<00:22:14.815>So <00:22:15.016>we're <00:22:15.217>just <00:22:15.418>gonna <00:22:15.619>take <00:22:15.820>that <00:22:16.021>one

478
00:22:16.655 --> 00:22:20.115
<00:22:16.655>and <00:22:16.795>go <00:22:16.935>into <00:22:17.075>that <00:22:17.215>product <00:22:17.355>repository <00:22:17.495>and <00:22:17.635>just <00:22:17.774>fill <00:22:17.915>it <00:22:18.055>in.

479
00:22:20.665 --> 00:22:23.835
<00:22:20.665>Yeah, <00:22:20.840>I <00:22:21.014>need <00:22:21.190>a <00:22:21.365>UID <00:22:21.540>generated. <00:22:21.715>Oh, <00:22:21.889>so <00:22:22.065>good.

480
00:22:24.175 --> 00:22:26.515
<00:22:24.175>So <00:22:24.350>good <00:22:24.524>to <00:22:24.700>have <00:22:24.875>AI <00:22:25.050>in <00:22:25.225>this <00:22:25.399>ages <00:22:25.575>just

481
00:22:26.515 --> 00:22:27.715
<00:22:26.515>makes <00:22:26.875>everything <00:22:27.235>so <00:22:27.595>easy.

482
00:22:27.775 --> 00:22:30.195
<00:22:27.775>That's <00:22:27.930>how <00:22:28.086>I <00:22:28.241>think <00:22:28.397>we <00:22:28.552>should <00:22:28.708>use <00:22:28.863>it <00:22:29.019>as <00:22:29.175>developers.

483
00:22:30.225 --> 00:22:32.995
<00:22:30.225>It's <00:22:30.365>a <00:22:30.504>system. <00:22:30.645>It's <00:22:30.784>a <00:22:30.925>super <00:22:31.064>smart <00:22:31.205>student, <00:22:31.344>not <00:22:31.485>super <00:22:31.625>smart.

484
00:22:32.995 --> 00:22:34.275
<00:22:32.995>Maybe <00:22:33.225>a <00:22:33.455>little <00:22:33.686>bit <00:22:33.916>dumb <00:22:34.147>sometimes,

485
00:22:34.295 --> 00:22:38.155
<00:22:34.295>but <00:22:34.422>anyway, <00:22:34.549>it's <00:22:34.676>not <00:22:34.804>about <00:22:34.931>ai, <00:22:35.058>it's <00:22:35.185>just, <00:22:35.313>um, <00:22:35.440>you <00:22:35.567>know, <00:22:35.695>um,

486
00:22:39.215 --> 00:22:41.595
<00:22:39.215>all <00:22:39.415>right, <00:22:39.615>let's <00:22:39.814>just, <00:22:40.014>um, <00:22:40.215>I <00:22:40.415>stopped <00:22:40.615>talking.

487
00:22:41.765 --> 00:22:43.755
<00:22:41.765>There <00:22:41.998>we <00:22:42.231>go. <00:22:42.465>Now <00:22:42.698>we <00:22:42.931>have <00:22:43.165>products.

488
00:22:43.755 --> 00:22:45.115
<00:22:43.755>Everything <00:22:44.163>is <00:22:44.571>working <00:22:44.979>perfect.

489
00:22:45.695 --> 00:22:47.995
<00:22:45.695>And <00:22:45.835>you <00:22:45.975>know <00:22:46.115>what <00:22:46.254>happens <00:22:46.395>in <00:22:46.534>this <00:22:46.675>moment <00:22:46.814>when <00:22:46.955>you <00:22:47.095>think,

490
00:22:48.095 --> 00:22:49.395
<00:22:48.095>oh, <00:22:48.680>I'm <00:22:49.264>done.

491
00:22:49.625 --> 00:22:50.875
<00:22:49.625>That <00:22:49.906>was <00:22:50.187>a <00:22:50.468>beautiful <00:22:50.750>day.

492
00:22:51.635 --> 00:22:52.835
<00:22:51.635>A <00:22:51.905>product <00:22:52.175>manager <00:22:52.445>comes <00:22:52.715>around

493
00:22:52.835 --> 00:22:56.235
<00:22:52.835>and <00:22:52.975>says, <00:22:53.115>our <00:22:53.255>server, <00:22:53.395>just <00:22:53.535>figure <00:22:53.675>it <00:22:53.815>out <00:22:53.955>that, <00:22:54.095>um, <00:22:54.235>people,

494
00:22:56.455 --> 00:22:58.395
<00:22:56.455>um, <00:22:56.804>wanna <00:22:57.155>search <00:22:57.504>for <00:22:57.855>products.

495
00:22:58.455 --> 00:23:00.755
<00:22:58.455>Um, <00:22:58.610>can <00:22:58.766>you <00:22:58.921>build <00:22:59.077>it? <00:22:59.232>Uh, <00:22:59.388>we <00:22:59.543>forgot <00:22:59.699>about <00:22:59.855>that.

496
00:23:00.895 --> 00:23:04.235
<00:23:00.895>Can <00:23:00.995>you <00:23:01.095>do <00:23:01.195>it <00:23:01.295>in <00:23:01.395>a <00:23:01.495>week? <00:23:01.595>And <00:23:01.695>I, <00:23:01.795>and <00:23:01.895>we <00:23:01.995>say, <00:23:02.095>yeah, <00:23:02.195>of <00:23:02.295>course.

497
00:23:04.295 --> 00:23:06.035
<00:23:04.295>Uh, <00:23:04.470>we <00:23:04.645>have <00:23:04.820>four <00:23:04.995>minutes <00:23:05.170>left. <00:23:05.345>Let's <00:23:05.520>do <00:23:05.695>it.

498
00:23:06.415 --> 00:23:10.115
<00:23:06.415>So <00:23:06.590>let's <00:23:06.764>go <00:23:06.940>back <00:23:07.115>into, <00:23:07.290>um, <00:23:07.465>into <00:23:07.639>our <00:23:07.815>index

499
00:23:10.115 --> 00:23:11.635
<00:23:10.115>and <00:23:10.571>our <00:23:11.027>base <00:23:11.483>here.

500
00:23:11.695 --> 00:23:14.035
<00:23:11.695>We <00:23:11.835>want <00:23:11.975>to <00:23:12.115>have <00:23:12.254>a <00:23:12.395>search. <00:23:12.534>I <00:23:12.675>already <00:23:12.814>prepared <00:23:12.955>a <00:23:13.095>search

501
00:23:14.035 --> 00:23:15.635
<00:23:14.035>because <00:23:14.268>I <00:23:14.501>don't <00:23:14.735>have <00:23:14.968>time <00:23:15.201>to <00:23:15.435>write.

502
00:23:15.935 --> 00:23:17.035
<00:23:15.935>So <00:23:16.182>it's <00:23:16.430>a <00:23:16.677>simple <00:23:16.925>search.

503
00:23:17.105 --> 00:23:18.595
<00:23:17.105>It's <00:23:17.440>a <00:23:17.775>form, <00:23:18.110>it's <00:23:18.446>a,

504
00:23:18.625 --> 00:23:21.435
<00:23:18.625>it's <00:23:18.780>like <00:23:18.936>the <00:23:19.091>most <00:23:19.247>basic <00:23:19.402>form <00:23:19.558>you <00:23:19.713>can <00:23:19.869>ever <00:23:20.025>have.

505
00:23:21.985 --> 00:23:23.155
<00:23:21.985>It's <00:23:22.336>just <00:23:22.687>like <00:23:23.038>this.

506
00:23:23.465 --> 00:23:26.915
<00:23:23.465>It's <00:23:23.620>an <00:23:23.776>input <00:23:23.931>field <00:23:24.087>with <00:23:24.242>a <00:23:24.398>text <00:23:24.553>and <00:23:24.709>a <00:23:24.865>search.

507
00:23:28.085 --> 00:23:29.695
<00:23:28.085>It's, <00:23:28.240>let's <00:23:28.396>have <00:23:28.551>a <00:23:28.707>look <00:23:28.862>at <00:23:29.018>it, <00:23:29.173>how <00:23:29.329>it <00:23:29.485>looks.

508
00:23:30.025 --> 00:23:32.735
<00:23:30.025>There <00:23:30.180>it <00:23:30.336>is <00:23:30.491>perfect. <00:23:30.647>Now, <00:23:30.802>if <00:23:30.958>we <00:23:31.113>type <00:23:31.269>in <00:23:31.425>react,

509
00:23:32.735 --> 00:23:36.135
<00:23:32.735>because <00:23:32.909>we <00:23:33.084>wanna <00:23:33.260>search <00:23:33.435>for <00:23:33.610>react <00:23:33.784>doesn't <00:23:33.959>work, <00:23:34.135>uh,

510
00:23:36.135 --> 00:23:37.775
<00:23:36.135>because <00:23:36.415>we <00:23:36.695>haven't <00:23:36.975>connected <00:23:37.254>it <00:23:37.535>yet.

511
00:23:37.955 --> 00:23:42.295
<00:23:37.955>And <00:23:38.095>that <00:23:38.235>is <00:23:38.375>one <00:23:38.514>of <00:23:38.655>my <00:23:38.794>lovely <00:23:38.935>parts <00:23:39.074>about <00:23:39.215>this <00:23:39.355>approach.

512
00:23:42.435 --> 00:23:44.575
<00:23:42.435>Now <00:23:42.635>we <00:23:42.835>go <00:23:43.034>on <00:23:43.235>server <00:23:43.435>site <00:23:43.635>rendering <00:23:43.835>first,

513
00:23:44.665 --> 00:23:47.245
<00:23:44.665>which <00:23:44.865>means <00:23:45.065>I'm <00:23:45.264>gonna <00:23:45.465>make <00:23:45.665>it <00:23:45.865>work <00:23:46.065>first.

514
00:23:47.745 --> 00:23:50.165
<00:23:47.745>So <00:23:47.945>it <00:23:48.145>is <00:23:48.344>stateless, <00:23:48.544>it's <00:23:48.745>just <00:23:48.945>like <00:23:49.145>the,

515
00:23:50.345 --> 00:23:52.045
<00:23:50.345>the <00:23:50.625>URL <00:23:50.905>is <00:23:51.185>the <00:23:51.465>demanding <00:23:51.745>part.

516
00:23:52.065 --> 00:23:53.485
<00:23:52.065>And <00:23:52.320>this <00:23:52.576>will <00:23:52.831>be <00:23:53.087>just <00:23:53.342>rendered.

517
00:23:53.485 --> 00:23:56.565
<00:23:53.485>This <00:23:53.834>is <00:23:54.185>absolutely <00:23:54.534>S-S-O-C-E-O <00:23:54.885>friendly.

518
00:23:56.905 --> 00:23:59.525
<00:23:56.905>You <00:23:57.060>don't <00:23:57.216>have <00:23:57.371>to <00:23:57.527>worry <00:23:57.682>about <00:23:57.838>that. <00:23:57.993>No <00:23:58.149>hydration, <00:23:58.305>nothing.

519
00:24:00.025 --> 00:24:04.125
<00:24:00.025>So <00:24:00.132>the <00:24:00.240>thing <00:24:00.348>I'm <00:24:00.455>going <00:24:00.563>to <00:24:00.671>do <00:24:00.778>is <00:24:00.886>now <00:24:00.994>say, <00:24:01.101>all <00:24:01.209>right, <00:24:01.317>you <00:24:01.425>know

520
00:24:04.125 --> 00:24:05.885
<00:24:04.125>what, <00:24:04.405>we <00:24:04.685>need <00:24:04.965>the <00:24:05.245>request <00:24:05.525>parameter.

521
00:24:06.265 --> 00:24:08.725
<00:24:06.265>So <00:24:06.465>that's <00:24:06.665>the <00:24:06.865>good <00:24:07.065>thing <00:24:07.265>about, <00:24:07.465>um, <00:24:07.665>spring,

522
00:24:08.725 --> 00:24:11.325
<00:24:08.725>because <00:24:09.004>you <00:24:09.284>can <00:24:09.564>just <00:24:09.844>say, <00:24:10.125>listen,

523
00:24:11.475 --> 00:24:12.805
<00:24:11.475>there's <00:24:11.774>now <00:24:12.073>a <00:24:12.372>query <00:24:12.672>string.

524
00:24:12.865 --> 00:24:14.165
<00:24:12.865>Of <00:24:13.099>course <00:24:13.333>that <00:24:13.567>can <00:24:13.801>be <00:24:14.034>optional.

525
00:24:14.305 --> 00:24:16.325
<00:24:14.305>That's <00:24:14.505>Scotland <00:24:14.705>by <00:24:14.905>the <00:24:15.105>way, <00:24:15.305>saying <00:24:15.505>it's <00:24:15.705>optional.

526
00:24:16.665 --> 00:24:20.125
<00:24:16.665>Now <00:24:16.805>we <00:24:16.945>just <00:24:17.085>have <00:24:17.225>to <00:24:17.365>check <00:24:17.504>if <00:24:17.645>the <00:24:17.784>query <00:24:17.925>is <00:24:18.065>null

527
00:24:20.265 --> 00:24:23.645
<00:24:20.265>and <00:24:20.392>if <00:24:20.519>it's <00:24:20.646>null, <00:24:20.774>we <00:24:20.901>just <00:24:21.028>do <00:24:21.155>the <00:24:21.283>same <00:24:21.410>thing <00:24:21.537>as <00:24:21.665>before.

528
00:24:23.825 --> 00:24:27.325
<00:24:23.825>And <00:24:24.025>if <00:24:24.225>not, <00:24:24.425>then <00:24:24.625>we <00:24:24.825>just <00:24:25.025>say, <00:24:25.225>alright,

529
00:24:28.015 --> 00:24:29.085
<00:24:28.015>let's <00:24:28.255>search <00:24:28.496>for <00:24:28.737>the <00:24:28.978>product.

530
00:24:30.015 --> 00:24:33.405
<00:24:30.015>Thankfully <00:24:30.248>our <00:24:30.481>service <00:24:30.715>already <00:24:30.948>implemented <00:24:31.181>that <00:24:31.415>one

531
00:24:33.585 --> 00:24:35.085
<00:24:33.585>and <00:24:33.810>we <00:24:34.035>just <00:24:34.260>gonna <00:24:34.485>give <00:24:34.710>the <00:24:34.935>query

532
00:24:35.225 --> 00:24:36.485
<00:24:35.225>and <00:24:35.451>we're <00:24:35.678>done <00:24:35.905>on <00:24:36.132>this <00:24:36.359>site.

533
00:24:37.425 --> 00:24:39.965
<00:24:37.425>One <00:24:37.580>more <00:24:37.736>thing <00:24:37.891>I'm <00:24:38.047>just <00:24:38.202>gonna <00:24:38.358>do <00:24:38.513>right <00:24:38.669>away <00:24:38.825>is

534
00:24:40.625 --> 00:24:42.045
<00:24:40.625>we <00:24:41.051>now <00:24:41.477>why <00:24:41.903>not?

535
00:24:42.095 --> 00:24:44.045
<00:24:42.095>Let's <00:24:42.295>first <00:24:42.495>do <00:24:42.695>this <00:24:42.895>so <00:24:43.095>you <00:24:43.295>understand <00:24:43.495>how

536
00:24:44.045 --> 00:24:45.685
<00:24:44.045>that <00:24:44.395>works <00:24:44.745>step <00:24:45.095>by <00:24:45.445>step.

537
00:24:46.345 --> 00:24:47.605
<00:24:46.345>So <00:24:46.628>when <00:24:46.912>I'm <00:24:47.195>typing <00:24:47.479>in,

538
00:24:47.605 --> 00:24:51.545
<00:24:47.605>now <00:24:47.885>react, <00:24:48.165>you <00:24:48.445>need <00:24:48.725>to <00:24:49.005>restart.

539
00:24:51.545 --> 00:24:53.745
<00:24:51.545>When <00:24:51.720>I'm <00:24:51.895>typing <00:24:52.070>on <00:24:52.245>react, <00:24:52.420>I <00:24:52.595>have <00:24:52.770>to <00:24:52.945>restart.

540
00:24:53.925 --> 00:24:55.945
<00:24:53.925>I'm <00:24:54.205>sorry, <00:24:54.485>that <00:24:54.764>was <00:24:55.044>too <00:24:55.325>hot.

541
00:24:56.045 --> 00:24:58.345
<00:24:56.045>You <00:24:56.278>know, <00:24:56.511>some <00:24:56.745>parts <00:24:56.978>can <00:24:57.211>be <00:24:57.445>swapped,

542
00:24:58.605 --> 00:25:00.705
<00:24:58.605>but <00:24:58.885>some <00:24:59.165>parts <00:24:59.445>are <00:24:59.725>too <00:25:00.005>hot.

543
00:25:01.215 --> 00:25:04.465
<00:25:01.215>That <00:25:01.342>was <00:25:01.469>too <00:25:01.596>hot. <00:25:01.724>So <00:25:01.851>if <00:25:01.978>I <00:25:02.105>type <00:25:02.233>in <00:25:02.360>now <00:25:02.487>react <00:25:02.615>it

544
00:25:04.465 --> 00:25:06.025
<00:25:04.465>instantly, <00:25:05.165>search <00:25:05.865>rear.

545
00:25:06.205 --> 00:25:09.345
<00:25:06.205>But <00:25:06.332>the <00:25:06.459>problem <00:25:06.586>is <00:25:06.714>we <00:25:06.841>are <00:25:06.968>not <00:25:07.095>seeing <00:25:07.223>it <00:25:07.350>in <00:25:07.477>the <00:25:07.605>search.

546
00:25:09.725 --> 00:25:12.945
<00:25:09.725>So <00:25:09.880>let's <00:25:10.036>just <00:25:10.191>fix <00:25:10.347>that <00:25:10.502>really <00:25:10.658>quickly. <00:25:10.813>And <00:25:10.969>that's <00:25:11.125>easy.

547
00:25:13.645 --> 00:25:17.185
<00:25:13.645>No <00:25:13.800>biggie <00:25:13.956>as <00:25:14.111>the <00:25:14.267>Australians <00:25:14.422>say <00:25:14.578>to <00:25:14.733>the <00:25:14.889>Australian <00:25:15.045>seller.

548
00:25:17.305 --> 00:25:18.505
<00:25:17.305>I <00:25:17.665>don't <00:25:18.025>know. <00:25:18.385>Um,

549
00:25:18.685 --> 00:25:22.305
<00:25:18.685>so <00:25:18.812>I'm <00:25:18.939>just <00:25:19.066>gonna <00:25:19.194>say <00:25:19.321>pass <00:25:19.448>the <00:25:19.575>query <00:25:19.703>also <00:25:19.830>to <00:25:19.957>the <00:25:20.085>template.

550
00:25:22.515 --> 00:25:25.585
<00:25:22.515>We're <00:25:22.655>going <00:25:22.795>back <00:25:22.935>to <00:25:23.075>the <00:25:23.215>index <00:25:23.355>template <00:25:23.495>where <00:25:23.635>we <00:25:23.775>just <00:25:23.915>say,

551
00:25:25.645 --> 00:25:29.155
<00:25:25.645>all <00:25:25.772>right, <00:25:25.899>now <00:25:26.026>we <00:25:26.154>just <00:25:26.281>have <00:25:26.408>a <00:25:26.535>new <00:25:26.663>attribute, <00:25:26.790>which <00:25:26.917>is, <00:25:27.045>uh,

552
00:25:29.295 --> 00:25:32.075
<00:25:29.295>the <00:25:29.528>query <00:25:29.761>and <00:25:29.995>it's <00:25:30.228>an <00:25:30.461>optional <00:25:30.695>string

553
00:25:32.135 --> 00:25:34.595
<00:25:32.135>and <00:25:32.262>we're <00:25:32.389>just <00:25:32.516>gonna <00:25:32.644>assign <00:25:32.771>it <00:25:32.898>to <00:25:33.025>the <00:25:33.153>value <00:25:33.280>of <00:25:33.407>the <00:25:33.535>input.

554
00:25:35.095 --> 00:25:39.035
<00:25:35.095>And <00:25:35.270>we <00:25:35.445>are <00:25:35.620>done. <00:25:35.795>And <00:25:35.970>now <00:25:36.145>look <00:25:36.320>at <00:25:36.495>this.

555
00:25:39.255 --> 00:25:42.355
<00:25:39.255>The <00:25:39.410>react <00:25:39.566>is <00:25:39.721>there, <00:25:39.877>and <00:25:40.032>this <00:25:40.188>is <00:25:40.343>the <00:25:40.499>cool <00:25:40.655>thing.

556
00:25:42.545 --> 00:25:44.955
<00:25:42.545>Like <00:25:42.720>we <00:25:42.895>just <00:25:43.070>created <00:25:43.245>a <00:25:43.420>search, <00:25:43.595>which <00:25:43.770>is, <00:25:43.945>uh,

557
00:25:44.955 --> 00:25:46.355
<00:25:44.955>working <00:25:45.206>right <00:25:45.459>out <00:25:45.711>of <00:25:45.963>the <00:25:46.215>box.

558
00:25:46.665 --> 00:25:49.195
<00:25:46.665>It's <00:25:46.865>working <00:25:47.065>with <00:25:47.264>the, <00:25:47.465>um, <00:25:47.665>with <00:25:47.865>the <00:25:48.065>endpoint

559
00:25:49.495 --> 00:25:51.435
<00:25:49.495>and <00:25:49.695>just <00:25:49.895>a <00:25:50.094>little <00:25:50.294>bit <00:25:50.495>lines <00:25:50.695>of <00:25:50.895>code.

560
00:25:52.175 --> 00:25:54.035
<00:25:52.175>But <00:25:52.455>before <00:25:52.735>you <00:25:53.014>all <00:25:53.294>get <00:25:53.575>disappointed

561
00:25:54.095 --> 00:25:56.555
<00:25:54.095>and <00:25:54.270>say, <00:25:54.445>listen, <00:25:54.620>where's <00:25:54.795>the <00:25:54.970>HD <00:25:55.145>mix <00:25:55.320>here <00:25:55.495>guys?

562
00:25:56.565 --> 00:25:59.635
<00:25:56.565>Where <00:25:56.720>is <00:25:56.876>it? <00:25:57.031>We're <00:25:57.187>gonna <00:25:57.342>put <00:25:57.498>in <00:25:57.653>HD <00:25:57.809>mix <00:25:57.965>now

563
00:25:59.635 --> 00:26:02.075
<00:25:59.635>because <00:25:59.915>of <00:26:00.195>course <00:26:00.475>everything <00:26:00.754>is <00:26:01.035>reactive.

564
00:26:02.135 --> 00:26:06.035
<00:26:02.135>So <00:26:02.290>let's <00:26:02.446>make <00:26:02.601>that <00:26:02.757>reactive <00:26:02.912>and <00:26:03.068>uh, <00:26:03.223>make <00:26:03.379>it <00:26:03.535>interactive.

565
00:26:06.055 --> 00:26:08.475
<00:26:06.055>So <00:26:06.255>once <00:26:06.455>we <00:26:06.655>type, <00:26:06.855>it <00:26:07.055>will <00:26:07.255>automatically <00:26:07.455>filter

566
00:26:08.585 --> 00:26:09.715
<00:26:08.585>that <00:26:09.601>straightaway.

567
00:26:09.735 --> 00:26:11.515
<00:26:09.735>And <00:26:09.935>just <00:26:10.135>a, <00:26:10.334>just <00:26:10.534>with <00:26:10.735>a <00:26:10.935>few <00:26:11.135>lines.

568
00:26:12.095 --> 00:26:13.995
<00:26:12.095>So <00:26:12.328>we <00:26:12.561>going <00:26:12.795>back <00:26:13.028>into <00:26:13.261>the <00:26:13.495>search

569
00:26:13.995 --> 00:26:16.155
<00:26:13.995>and <00:26:14.195>give <00:26:14.395>it <00:26:14.594>superpower <00:26:14.794>thanks <00:26:14.995>to <00:26:15.195>HDM <00:26:15.395>Max

570
00:26:16.175 --> 00:26:19.195
<00:26:16.175>and <00:26:16.350>just <00:26:16.524>say, <00:26:16.700>all <00:26:16.875>right, <00:26:17.050>now <00:26:17.225>post <00:26:17.399>a <00:26:17.575>search.

571
00:26:19.895 --> 00:26:21.275
<00:26:19.895>But <00:26:20.102>we <00:26:20.309>don't <00:26:20.516>want <00:26:20.723>you <00:26:20.930>to <00:26:21.137>post

572
00:26:21.275 --> 00:26:23.875
<00:26:21.275>because <00:26:21.415>the <00:26:21.555>default <00:26:21.695>is <00:26:21.835>if <00:26:21.975>you <00:26:22.115>just <00:26:22.255>press <00:26:22.395>enter <00:26:22.535>on <00:26:22.675>it,

573
00:26:24.015 --> 00:26:27.555
<00:26:24.015>we <00:26:24.142>want <00:26:24.269>it <00:26:24.396>to <00:26:24.524>be <00:26:24.651>triggered <00:26:24.778>on <00:26:24.905>a, <00:26:25.033>in <00:26:25.160>a <00:26:25.287>certain <00:26:25.415>moment.

574
00:26:28.055 --> 00:26:30.875
<00:26:28.055>So <00:26:28.210>we <00:26:28.366>want <00:26:28.521>to <00:26:28.677>have <00:26:28.832>it <00:26:28.988>when <00:26:29.143>you <00:26:29.299>input <00:26:29.455>something.

575
00:26:31.695 --> 00:26:36.185
<00:26:31.695>So <00:26:31.870>the <00:26:32.044>input <00:26:32.220>change, <00:26:32.395>you <00:26:32.570>should <00:26:32.745>cool <00:26:32.919>off <00:26:33.095>time

576
00:26:36.245 --> 00:26:37.665
<00:26:36.245>of <00:26:36.884>200 <00:26:37.523>milliseconds.

577
00:26:38.325 --> 00:26:41.225
<00:26:38.325>And <00:26:38.452>now <00:26:38.579>we <00:26:38.706>just <00:26:38.834>have <00:26:38.961>to <00:26:39.088>define <00:26:39.215>again, <00:26:39.343>like <00:26:39.470>at <00:26:39.597>the <00:26:39.725>joke

578
00:26:41.395 --> 00:26:42.625
<00:26:41.395>where <00:26:41.616>we <00:26:41.837>want <00:26:42.059>to <00:26:42.280>deliver <00:26:42.502>it,

579
00:26:42.645 --> 00:26:44.450
<00:26:42.645>we <00:26:42.845>want <00:26:43.045>wanna <00:26:43.245>deliver <00:26:43.445>it <00:26:43.645>to <00:26:43.845>the <00:26:44.045>products.

580
00:26:44.705 --> 00:26:49.045
<00:26:44.705>And <00:26:44.879>the <00:26:45.054>product <00:26:45.230>is <00:26:45.405>down <00:26:45.580>here. <00:26:45.754>So <00:26:45.929>products <00:26:46.105>perfect.

581
00:26:49.345 --> 00:26:52.245
<00:26:49.345>That's <00:26:49.500>all <00:26:49.656>we <00:26:49.811>have <00:26:49.967>to <00:26:50.122>do <00:26:50.278>in <00:26:50.433>the <00:26:50.589>front <00:26:50.745>end.

582
00:26:52.505 --> 00:26:55.085
<00:26:52.505>Now <00:26:52.612>we <00:26:52.720>just <00:26:52.828>have <00:26:52.935>to <00:26:53.043>go <00:26:53.151>to <00:26:53.258>the <00:26:53.366>back <00:26:53.474>end <00:26:53.581>to <00:26:53.689>make <00:26:53.797>this <00:26:53.905>work

583
00:26:55.145 --> 00:26:56.925
<00:26:55.145>and <00:26:55.425>to <00:26:55.705>program <00:26:55.985>the <00:26:56.264>endpoint <00:26:56.545>search.

584
00:26:57.265 --> 00:26:59.365
<00:26:57.265>So <00:26:57.405>let's <00:26:57.545>do <00:26:57.685>that. <00:26:57.825>We <00:26:57.965>go <00:26:58.105>back <00:26:58.245>to <00:26:58.385>the <00:26:58.525>end <00:26:58.665>point

585
00:27:00.875 --> 00:27:04.205
<00:27:00.875>post <00:27:01.075>mapping <00:27:01.275>this <00:27:01.475>time <00:27:01.675>and <00:27:01.875>just <00:27:02.075>a <00:27:02.275>search.

586
00:27:04.785 --> 00:27:09.565
<00:27:04.785>And <00:27:04.960>then <00:27:05.135>we <00:27:05.310>say <00:27:05.485>search <00:27:05.660>the <00:27:05.835>query <00:27:06.010>string <00:27:06.185>as

587
00:27:09.585 --> 00:27:11.805
<00:27:09.585>before <00:27:09.865>we're <00:27:10.145>gonna <00:27:10.425>return <00:27:10.705>the <00:27:10.985>template.

588
00:27:11.915 --> 00:27:13.005
<00:27:11.915>Same <00:27:12.160>thing <00:27:12.405>as <00:27:12.650>the <00:27:12.896>bot.

589
00:27:13.065 --> 00:27:14.925
<00:27:13.065>Ah, <00:27:13.240>by <00:27:13.415>the <00:27:13.590>way, <00:27:13.765>let's <00:27:13.940>just <00:27:14.115>take <00:27:14.290>this <00:27:14.465>code

590
00:27:14.925 --> 00:27:16.085
<00:27:14.925>because <00:27:15.133>it's <00:27:15.342>pretty <00:27:15.551>much <00:27:15.760>the <00:27:15.969>same.

591
00:27:16.165 --> 00:27:18.405
<00:27:16.165>I <00:27:16.292>know <00:27:16.419>we <00:27:16.546>can <00:27:16.674>centralize <00:27:16.801>it, <00:27:16.928>we <00:27:17.055>can <00:27:17.183>make <00:27:17.310>it <00:27:17.437>more <00:27:17.565>beautiful,

592
00:27:18.825 --> 00:27:20.085
<00:27:18.825>but <00:27:19.108>we <00:27:19.392>don't <00:27:19.675>have <00:27:19.959>title.

593
00:27:20.545 --> 00:27:22.165
<00:27:20.545>So, <00:27:21.945>alright.

594
00:27:22.425 --> 00:27:23.805
<00:27:22.425>And <00:27:22.735>now <00:27:23.046>let's <00:27:23.356>just <00:27:23.667>return,

595
00:27:23.805 --> 00:27:26.245
<00:27:23.805>because <00:27:24.005>now <00:27:24.205>we're <00:27:24.405>not <00:27:24.605>returning <00:27:24.805>the <00:27:25.005>entire <00:27:25.205>page,

596
00:27:26.295 --> 00:27:27.765
<00:27:26.295>we're <00:27:26.625>just <00:27:26.956>returning <00:27:27.287>the <00:27:27.618>component,

597
00:27:27.765 --> 00:27:29.485
<00:27:27.765>which <00:27:27.998>should <00:27:28.231>be <00:27:28.465>rendered <00:27:28.698>into <00:27:28.931>the <00:27:29.165>diff.

598
00:27:29.945 --> 00:27:31.685
<00:27:29.945>So, <00:27:30.225>uh, <00:27:30.504>this <00:27:30.784>one <00:27:31.064>pretty <00:27:31.345>much.

599
00:27:32.065 --> 00:27:36.205
<00:27:32.065>So <00:27:32.220>we're <00:27:32.376>gonna <00:27:32.531>just <00:27:32.687>give, <00:27:32.842>um, <00:27:32.998>the <00:27:33.153>uh, <00:27:33.309>index <00:27:33.465>controller,

600
00:27:36.205 --> 00:27:39.525
<00:27:36.205>not <00:27:36.438>the <00:27:36.671>index, <00:27:36.905>but <00:27:37.138>the <00:27:37.371>POP <00:27:37.605>component

601
00:27:40.875 --> 00:27:42.005
<00:27:40.875>product <00:27:41.892>list.

602
00:27:43.345 --> 00:27:46.085
<00:27:43.345>That's <00:27:43.578>it, <00:27:43.811>that's <00:27:44.045>all <00:27:44.278>what <00:27:44.511>we <00:27:44.745>need.

603
00:27:47.355 --> 00:27:50.505
<00:27:47.355>Let's <00:27:47.510>deploy <00:27:47.666>and <00:27:47.821>see <00:27:47.977>if <00:27:48.132>it <00:27:48.288>works. <00:27:48.443>Will <00:27:48.599>it <00:27:48.755>blend?

604
00:27:53.155 --> 00:27:56.575
<00:27:53.155>So <00:27:53.282>we <00:27:53.409>have <00:27:53.536>it. <00:27:53.664>And <00:27:53.791>if <00:27:53.918>I <00:27:54.045>type <00:27:54.173>now <00:27:54.300>view, <00:27:54.427>you <00:27:54.555>see

605
00:27:57.695 --> 00:27:59.545
<00:27:57.695>automatically <00:27:58.161>just <00:27:58.628>right <00:27:59.095>there

606
00:27:59.645 --> 00:28:01.905
<00:27:59.645>and <00:27:59.800>what's <00:27:59.956>happening <00:28:00.111>in <00:28:00.267>the <00:28:00.422>background, <00:28:00.578>just <00:28:00.733>to <00:28:00.889>see <00:28:01.045>that

607
00:28:02.525 --> 00:28:06.185
<00:28:02.525>is <00:28:02.700>you <00:28:02.875>typing <00:28:03.050>and <00:28:03.225>it's <00:28:03.400>just <00:28:03.575>executing <00:28:03.750>the <00:28:03.925>query

608
00:28:06.565 --> 00:28:08.785
<00:28:06.565>and <00:28:06.798>then <00:28:07.031>replacing <00:28:07.265>what <00:28:07.498>comes <00:28:07.731>out <00:28:07.965>here,

609
00:28:08.835 --> 00:28:12.345
<00:28:08.835>which <00:28:08.990>is <00:28:09.146>just <00:28:09.301>the <00:28:09.457>found <00:28:09.612>products <00:28:09.768>into <00:28:09.923>the <00:28:10.079>diff, <00:28:10.235>um,

610
00:28:12.795 --> 00:28:15.385
<00:28:12.795>which <00:28:13.028>we <00:28:13.261>have <00:28:13.495>specified <00:28:13.728>in <00:28:13.961>our <00:28:14.195>index.

611
00:28:15.445 --> 00:28:18.385
<00:28:15.445>So <00:28:15.585>this <00:28:15.725>one <00:28:15.865>will <00:28:16.004>be <00:28:16.145>replaced. <00:28:16.284>That's <00:28:16.425>it, <00:28:16.564>that's <00:28:16.705>the <00:28:16.845>power.

612
00:28:18.645 --> 00:28:20.665
<00:28:18.645>But <00:28:18.878>again, <00:28:19.111>the <00:28:19.345>great <00:28:19.578>power <00:28:19.811>comes <00:28:20.045>through

613
00:28:20.885 --> 00:28:22.825
<00:28:20.885>and <00:28:21.118>I <00:28:21.351>dunno <00:28:21.585>how <00:28:21.818>to <00:28:22.051>highlight <00:28:22.285>that.

614
00:28:22.825 --> 00:28:26.065
<00:28:22.825>More <00:28:23.000>is <00:28:23.175>using <00:28:23.350>templates <00:28:23.525>which <00:28:23.700>are <00:28:23.875>tight, <00:28:24.050>directly <00:28:24.225>connected

615
00:28:26.065 --> 00:28:27.465
<00:28:26.065>to <00:28:26.317>your <00:28:26.569>data <00:28:26.821>at <00:28:27.072>your <00:28:27.324>backend.

616
00:28:27.615 --> 00:28:29.865
<00:28:27.615>Just <00:28:27.848>one <00:28:28.081>deployable, <00:28:28.315>all <00:28:28.548>that <00:28:28.781>good <00:28:29.015>stuff.

617
00:28:30.685 --> 00:28:32.185
<00:28:30.685>So, <00:28:30.909>ha, <00:28:31.135>I <00:28:31.360>could <00:28:31.585>talk <00:28:31.810>for <00:28:32.034>hours.

618
00:28:32.185 --> 00:28:33.985
<00:28:32.185>There's <00:28:32.385>more <00:28:32.585>to <00:28:32.784>h <00:28:32.985>mix <00:28:33.185>maybe <00:28:33.385>another <00:28:33.585>time.

619
00:28:34.045 --> 00:28:35.985
<00:28:34.045>But <00:28:34.511>thanks <00:28:34.978>for <00:28:35.445>watching

620
00:28:36.525 --> 00:28:38.225
<00:28:36.525>and <00:28:36.758>I'm <00:28:36.991>so <00:28:37.225>glad <00:28:37.458>that <00:28:37.691>everything <00:28:37.925>worked.

621
00:28:38.325 --> 00:28:40.505
<00:28:38.325>You <00:28:38.500>never, <00:28:38.675>ever <00:28:38.850>know. <00:28:39.025>Thanks. <00:28:39.200>Back <00:28:39.375>to <00:28:39.550>you <00:28:39.725>Benet.

622
00:28:40.915 --> 00:28:43.265
<00:28:40.915>Thank <00:28:41.090>you <00:28:41.264>so <00:28:41.440>much <00:28:41.615>Felix, <00:28:41.790>for <00:28:41.965>this <00:28:42.139>great <00:28:42.315>demo.

623
00:28:44.205 --> 00:28:46.105
<00:28:44.205>People <00:28:44.485>are <00:28:44.764>cheering <00:28:45.044>here <00:28:45.324>very <00:28:45.605>loudly.

624
00:28:46.185 --> 00:28:48.025
<00:28:46.185>I <00:28:46.360>don't <00:28:46.534>know <00:28:46.710>if <00:28:46.885>you <00:28:47.060>hear <00:28:47.235>that, <00:28:47.409>but, <00:28:47.585>uh,

625
00:28:48.025 --> 00:28:49.145
<00:28:48.025>they <00:28:48.361>were <00:28:48.697>super <00:28:49.033>impressed.

626
00:28:49.435 --> 00:28:51.665
<00:28:49.435>Thank <00:28:49.610>you <00:28:49.784>so <00:28:49.960>much <00:28:50.135>everybody. <00:28:50.310>That <00:28:50.485>was <00:28:50.659>our <00:28:50.835>demo.

627
00:28:51.805 --> 00:28:53.985
<00:28:51.805>If <00:28:52.005>you <00:28:52.205>wanna <00:28:52.405>learn <00:28:52.605>more, <00:28:52.805>just <00:28:53.005>contact <00:28:53.205>us.

628
00:28:54.085 --> 00:28:56.265
<00:28:54.085>We <00:28:54.285>are <00:28:54.485>happy <00:28:54.685>to <00:28:54.885>chat. <00:28:55.085>Uh, <00:28:55.285>look <00:28:55.485>online.

629
00:28:56.925 --> 00:28:58.105
<00:28:56.925>Uh, <00:28:57.101>thank <00:28:57.279>you, <00:28:57.456>thank <00:28:57.633>you <00:28:57.810>so <00:28:57.987>much.

630
00:28:58.345 --> 00:28:59.505
<00:28:58.345>I <00:28:58.606>hope <00:28:58.867>you <00:28:59.128>enjoyed <00:28:59.389>it

631
00:28:59.505 --> 00:29:01.265
<00:28:59.505>and <00:28:59.680>I <00:28:59.855>hope <00:29:00.030>you <00:29:00.205>had, <00:29:00.380>uh, <00:29:00.555>some <00:29:00.730>new <00:29:00.905>insights.

632
00:29:01.575 --> 00:29:02.065
Bye-Bye.