WEBVTT

1
00:00:05.085 --> 00:00:06.655
<00:00:05.085>Yeah, <00:00:05.318>welcome <00:00:05.551>to <00:00:05.785>my <00:00:06.018>talk <00:00:06.251>on <00:00:06.484>how

2
00:00:06.655 --> 00:00:08.215
<00:00:06.655>to <00:00:06.935>kill <00:00:07.215>JavaScript <00:00:07.495>from <00:00:07.775>your <00:00:08.055>stack.

3
00:00:08.785 --> 00:00:10.255
<00:00:08.785>First <00:00:09.005>thing <00:00:09.226>a <00:00:09.446>little <00:00:09.667>bit <00:00:09.887>about <00:00:10.108>me,

4
00:00:10.795 --> 00:00:12.935
<00:00:10.795>I'm <00:00:11.075>a <00:00:11.355>software <00:00:11.635>craftsman <00:00:11.915>at <00:00:12.195>IITS.

5
00:00:13.195 --> 00:00:15.455
<00:00:13.195>We <00:00:13.335>do <00:00:13.475>like <00:00:13.615>team <00:00:13.755>as <00:00:13.895>a <00:00:14.035>service, <00:00:14.175>DevOps <00:00:14.315>as <00:00:14.455>a <00:00:14.595>service

6
00:00:15.555 --> 00:00:18.535
<00:00:15.555>for <00:00:15.710>larger <00:00:15.866>companies, <00:00:16.021>and <00:00:16.177>I've <00:00:16.332>been <00:00:16.488>doing <00:00:16.643>web <00:00:16.799>dev <00:00:16.955>for

7
00:00:19.315 --> 00:00:21.415
<00:00:19.315>or <00:00:19.515>about <00:00:19.715>seven <00:00:19.915>or <00:00:20.115>eight <00:00:20.315>years <00:00:20.515>right <00:00:20.715>now.

8
00:00:22.315 --> 00:00:23.935
<00:00:22.315>So <00:00:22.781>actually <00:00:23.248>professionally <00:00:23.715>getting

9
00:00:23.965 --> 00:00:25.055
<00:00:23.965>paid <00:00:24.161>for <00:00:24.357>that <00:00:24.553>kind <00:00:24.749>of <00:00:24.945>stuff.

10
00:00:25.595 --> 00:00:28.215
<00:00:25.595>Uh, <00:00:25.750>nowadays <00:00:25.906>I <00:00:26.061>do <00:00:26.217>that <00:00:26.372>mostly <00:00:26.528>with <00:00:26.683>Kotlin <00:00:26.839>Spring <00:00:26.994>Boot

11
00:00:28.955 --> 00:00:31.255
<00:00:28.955>and, <00:00:29.305>um, <00:00:29.654>random <00:00:30.005>JS <00:00:30.354>framework.

12
00:00:31.595 --> 00:00:33.615
<00:00:31.595>So <00:00:31.875>maybe <00:00:32.155>something <00:00:32.435>like, <00:00:32.714>uh, <00:00:32.995>react.

13
00:00:34.635 --> 00:00:36.735
<00:00:34.635>Um, <00:00:34.775>I <00:00:34.915>have <00:00:35.055>a <00:00:35.195>couple <00:00:35.335>quick <00:00:35.474>questions <00:00:35.614>for <00:00:35.754>you <00:00:35.894>to <00:00:36.035>kind

14
00:00:36.735 --> 00:00:38.015
<00:00:36.735>of <00:00:37.119>gauge <00:00:37.503>your <00:00:37.887>knowledge.

15
00:00:38.515 --> 00:00:40.655
<00:00:38.515>Who <00:00:38.748>have <00:00:38.981>you <00:00:39.215>guys <00:00:39.448>already <00:00:39.681>know? <00:00:39.915>Kotlin.

16
00:00:41.805 --> 00:00:46.585
<00:00:41.805>Okay, <00:00:41.980>that's <00:00:42.155>a <00:00:42.330>pretty <00:00:42.505>good <00:00:42.680>percentage. <00:00:42.855>Java <00:00:43.030>devs. <00:00:43.205>Okay.

17
00:00:46.645 --> 00:00:47.985
<00:00:46.645>I'm <00:00:46.946>about <00:00:47.248>the <00:00:47.549>same. <00:00:47.851>Cool.

18
00:00:48.325 --> 00:00:50.585
<00:00:48.325>How <00:00:48.525>many <00:00:48.725>of <00:00:48.925>you <00:00:49.125>do <00:00:49.325>already <00:00:49.525>know <00:00:49.725>HDMX?

19
00:00:52.715 --> 00:00:55.395
<00:00:52.715>A <00:00:52.995>couple <00:00:53.275>Unsure <00:00:53.555>over <00:00:53.835>there. <00:00:54.115>Okay.

20
00:00:55.895 --> 00:01:00.395
<00:00:55.895>Do <00:00:56.050>you <00:00:56.206>all <00:00:56.361>work <00:00:56.517>with <00:00:56.672>JS <00:00:56.828>frameworks? <00:00:56.983>That's <00:00:57.139>the <00:00:57.295>ticket.

21
00:01:00.535 --> 00:01:04.515
<00:01:00.535>How <00:01:00.735>many <00:01:00.934>of <00:01:01.135>you <00:01:01.334>like <00:01:01.535>it? <00:01:01.735>Ah, <00:01:01.934>okay.

22
00:01:05.295 --> 00:01:06.595
<00:01:05.295>Uh, <00:01:05.587>already <00:01:05.880>a <00:01:06.172>bit <00:01:06.465>less.

23
00:01:06.745 --> 00:01:08.795
<00:01:06.745>Okay, <00:01:06.920>so <00:01:07.095>how <00:01:07.270>now <00:01:07.445>I <00:01:07.620>want <00:01:07.795>to, <00:01:07.970>I <00:01:08.145>want

24
00:01:08.795 --> 00:01:11.795
<00:01:08.795>to <00:01:08.950>tell <00:01:09.106>you <00:01:09.261>about <00:01:09.417>my <00:01:09.572>relationship <00:01:09.728>with <00:01:09.883>JavaScript <00:01:10.039>and <00:01:10.195>how

25
00:01:11.855 --> 00:01:13.995
<00:01:11.855>and <00:01:12.010>why <00:01:12.166>I <00:01:12.321>try <00:01:12.477>to <00:01:12.632>get <00:01:12.788>rid <00:01:12.943>of <00:01:13.099>this <00:01:13.255>nowadays.

26
00:01:14.655 --> 00:01:15.835
<00:01:14.655>So <00:01:14.920>I'm <00:01:15.186>a <00:01:15.451>web <00:01:15.717>developer.

27
00:01:16.065 --> 00:01:17.675
<00:01:16.065>That <00:01:16.298>actually <00:01:16.531>just <00:01:16.765>means <00:01:16.998>these <00:01:17.231>three <00:01:17.465>things.

28
00:01:18.155 --> 00:01:21.635
<00:01:18.155>I <00:01:18.388>know <00:01:18.621>some <00:01:18.855>H-M-L-C-S-S <00:01:19.088>and <00:01:19.321>JavaScript, <00:01:19.555>um,

29
00:01:22.055 --> 00:01:24.435
<00:01:22.055>and <00:01:22.230>I <00:01:22.405>mostly <00:01:22.580>develop <00:01:22.755>business <00:01:22.930>applications, <00:01:23.105>so <00:01:23.280>a <00:01:23.455>lot

30
00:01:24.435 --> 00:01:26.595
<00:01:24.435>of <00:01:24.668>tables, <00:01:24.901>forms <00:01:25.135>that <00:01:25.368>kind <00:01:25.601>of <00:01:25.835>thing,

31
00:01:27.095 --> 00:01:29.355
<00:01:27.095>but <00:01:27.250>that's <00:01:27.406>not <00:01:27.561>what <00:01:27.717>my <00:01:27.872>tech <00:01:28.028>stack <00:01:28.183>actually <00:01:28.339>looks <00:01:28.495>like.

32
00:01:29.655 --> 00:01:31.435
<00:01:29.655>My <00:01:29.888>tech <00:01:30.121>stack <00:01:30.355>looks <00:01:30.588>more <00:01:30.821>like <00:01:31.055>this.

33
00:01:31.665 --> 00:01:34.115
<00:01:31.664>There's <00:01:31.820>a <00:01:31.976>bunch <00:01:32.131>of <00:01:32.287>technologies <00:01:32.442>over <00:01:32.598>here, <00:01:32.753>a <00:01:32.909>lot <00:01:33.065>of

34
00:01:34.115 --> 00:01:35.155
<00:01:34.115>that <00:01:34.302>on <00:01:34.489>the <00:01:34.676>front <00:01:34.863>end <00:01:35.051>side.

35
00:01:36.095 --> 00:01:39.755
<00:01:36.095>Uh, <00:01:36.270>a <00:01:36.445>bunch <00:01:36.620>of <00:01:36.795>component <00:01:36.970>libraries <00:01:37.145>build <00:01:37.320>tools, <00:01:37.495>CSS

36
00:01:39.755 --> 00:01:41.835
<00:01:39.755>and <00:01:40.035>JS, <00:01:40.315>bundlers, <00:01:40.595>you <00:01:40.875>name <00:01:41.155>it.

37
00:01:41.975 --> 00:01:44.235
<00:01:41.975>And <00:01:42.149>on <00:01:42.324>the <00:01:42.500>backend <00:01:42.675>side <00:01:42.850>it's <00:01:43.024>a <00:01:43.199>lot <00:01:43.375>less,

38
00:01:45.415 --> 00:01:48.715
<00:01:45.414>but <00:01:45.570>last <00:01:45.726>year <00:01:45.881>I <00:01:46.037>kind <00:01:46.192>of <00:01:46.348>started <00:01:46.503>reflecting, <00:01:46.659>okay, <00:01:46.815>how,

39
00:01:48.895 --> 00:01:50.635
<00:01:48.895>how <00:01:49.095>the <00:01:49.295>hell <00:01:49.495>did <00:01:49.695>I <00:01:49.895>even <00:01:50.095>get <00:01:50.295>here?

40
00:01:51.215 --> 00:01:52.235
<00:01:51.215>It <00:01:51.521>started <00:01:51.827>very <00:01:52.133>simple.

41
00:01:52.235 --> 00:01:55.315
<00:01:52.235>Like <00:01:52.375>at <00:01:52.515>university <00:01:52.655>I <00:01:52.795>was <00:01:52.935>developing <00:01:53.075>stuff <00:01:53.215>with <00:01:53.355>Java, <00:01:53.495>oh <00:01:53.635>no,

42
00:01:55.315 --> 00:01:57.715
<00:01:55.315>with, <00:01:55.515>not <00:01:55.715>with <00:01:55.914>Java, <00:01:56.115>but <00:01:56.315>with <00:01:56.515>Python, <00:01:56.715>uh,

43
00:01:57.935 --> 00:02:00.155
<00:01:57.935>and <00:01:58.215>templating <00:01:58.495>like <00:01:58.775>doing <00:01:59.055>web <00:01:59.335>UIs

44
00:02:00.155 --> 00:02:02.075
<00:02:00.155>with <00:02:00.435>a <00:02:00.715>templating <00:02:00.995>language <00:02:01.275>called <00:02:01.555>Jinja.

45
00:02:02.815 --> 00:02:04.715
<00:02:02.815>And <00:02:03.048>it <00:02:03.281>was <00:02:03.515>basically <00:02:03.748>the <00:02:03.981>same <00:02:04.215>thing.

46
00:02:04.755 --> 00:02:08.675
<00:02:04.755>I <00:02:04.895>do <00:02:05.035>know <00:02:05.175>nowadays <00:02:05.315>a <00:02:05.455>lot <00:02:05.595>of <00:02:05.735>just <00:02:05.875>data <00:02:06.015>tables, <00:02:06.155>um,

47
00:02:09.085 --> 00:02:10.115
<00:02:09.085>forms <00:02:10.012>validation.

48
00:02:11.375 --> 00:02:14.035
<00:02:11.375>Um, <00:02:11.608>then <00:02:11.841>at <00:02:12.075>my <00:02:12.308>first <00:02:12.541>jobs, <00:02:12.775>uh,

49
00:02:14.135 --> 00:02:16.635
<00:02:14.135>single <00:02:14.415>page <00:02:14.695>applications <00:02:14.975>became <00:02:15.255>more <00:02:15.535>popular.

50
00:02:17.175 --> 00:02:19.595
<00:02:17.175>The <00:02:17.350>templates <00:02:17.525>moved <00:02:17.700>to <00:02:17.875>the <00:02:18.050>front <00:02:18.225>end <00:02:18.400>and <00:02:18.575>rep

51
00:02:19.695 --> 00:02:23.235
<00:02:19.695>and <00:02:19.850>replaced <00:02:20.006>the <00:02:20.161>server <00:02:20.317>side <00:02:20.472>rendering <00:02:20.628>with <00:02:20.783>some <00:02:20.939>J <00:02:21.095>APIs.

52
00:02:24.175 --> 00:02:28.115
<00:02:24.175>Um, <00:02:24.315>I <00:02:24.455>picked <00:02:24.595>up <00:02:24.735>React, <00:02:24.875>added <00:02:25.015>some <00:02:25.155>types, <00:02:25.295>script <00:02:25.435>the <00:02:25.575>two,

53
00:02:28.495 --> 00:02:30.435
<00:02:28.495>the, <00:02:28.728>the <00:02:28.961>tech <00:02:29.195>stack <00:02:29.428>evolved <00:02:29.661>a <00:02:29.895>bunch

54
00:02:31.535 --> 00:02:35.315
<00:02:31.535>and <00:02:31.768>I <00:02:32.001>kind <00:02:32.234>of <00:02:32.468>feel <00:02:32.701>like <00:02:32.935>now

55
00:02:35.465 --> 00:02:37.675
<00:02:35.465>that <00:02:35.620>the <00:02:35.776>tools <00:02:35.931>I <00:02:36.087>picked <00:02:36.242>up <00:02:36.398>in <00:02:36.553>the <00:02:36.709>back <00:02:36.865>end

56
00:02:38.255 --> 00:02:39.355
<00:02:38.255>taught <00:02:38.502>me <00:02:38.750>a <00:02:38.997>lot <00:02:39.245>more

57
00:02:39.375 --> 00:02:42.195
<00:02:39.375>and <00:02:39.575>enabled <00:02:39.775>me <00:02:39.975>to <00:02:40.175>actually <00:02:40.375>solve <00:02:40.575>more <00:02:40.775>problems

58
00:02:42.485 --> 00:02:44.115
<00:02:42.485>while <00:02:42.835>on <00:02:43.185>the <00:02:43.535>front <00:02:43.885>end.

59
00:02:44.275 --> 00:02:46.955
<00:02:44.275>I <00:02:44.415>mostly <00:02:44.555>do <00:02:44.695>the <00:02:44.835>same <00:02:44.975>thing <00:02:45.115>I <00:02:45.255>have <00:02:45.395>been <00:02:45.535>doing <00:02:45.675>for

60
00:02:47.565 --> 00:02:48.835
<00:02:47.565>seven <00:02:47.850>or <00:02:48.136>eight <00:02:48.422>years <00:02:48.708>now.

61
00:02:48.935 --> 00:02:50.235
<00:02:48.935>It <00:02:49.227>hasn't <00:02:49.520>changed <00:02:49.812>that <00:02:50.105>much.

62
00:02:50.775 --> 00:02:52.755
<00:02:50.775>Yes, <00:02:51.125>like <00:02:51.475>we <00:02:51.825>do, <00:02:52.175>uh,

63
00:02:53.015 --> 00:02:56.195
<00:02:53.015>we <00:02:53.214>do <00:02:53.415>like <00:02:53.614>real <00:02:53.815>time <00:02:54.015>unchanged <00:02:54.214>validation <00:02:54.415>nowadays

64
00:02:56.815 --> 00:03:00.525
<00:02:56.815>and <00:02:56.990>um, <00:02:57.165>we <00:02:57.340>like <00:02:57.515>validating <00:02:57.690>on <00:02:57.865>the <00:02:58.040>JavaScript <00:02:58.215>side,

65
00:03:00.625 --> 00:03:03.085
<00:03:00.625>but <00:03:00.858>the <00:03:01.091>ecosystem <00:03:01.325>has <00:03:01.558>evolved <00:03:01.791>so <00:03:02.025>fast

66
00:03:03.185 --> 00:03:05.725
<00:03:03.185>and <00:03:03.340>we <00:03:03.496>need <00:03:03.651>so <00:03:03.807>many <00:03:03.962>new <00:03:04.118>tools <00:03:04.273>all <00:03:04.429>the <00:03:04.585>time.

67
00:03:06.545 --> 00:03:10.445
<00:03:06.545>And <00:03:06.672>it <00:03:06.799>has <00:03:06.926>actually <00:03:07.054>become <00:03:07.181>kind <00:03:07.308>of <00:03:07.435>a <00:03:07.563>meme <00:03:07.690>at <00:03:07.817>this <00:03:07.945>point.

68
00:03:10.845 --> 00:03:12.965
<00:03:10.845>I <00:03:10.972>don't <00:03:11.099>know <00:03:11.226>if <00:03:11.354>you <00:03:11.481>know <00:03:11.608>this <00:03:11.735>site, <00:03:11.863>there's <00:03:11.990>a <00:03:12.117>website <00:03:12.245>called

69
00:03:13.665 --> 00:03:17.085
<00:03:13.665>das <00:03:14.015>last <00:03:14.364>javas <00:03:14.715>framework, <00:03:15.065>um.com.

70
00:03:17.755 --> 00:03:20.285
<00:03:17.755>It's <00:03:17.988>a <00:03:18.221>counter <00:03:18.454>that's <00:03:18.688>permanently <00:03:18.921>at <00:03:19.155>zero.

71
00:03:21.045 --> 00:03:23.685
<00:03:21.045>I <00:03:21.185>don't <00:03:21.325>know <00:03:21.465>if <00:03:21.605>they <00:03:21.745>actually <00:03:21.885>have <00:03:22.025>a <00:03:22.165>script <00:03:22.305>checking <00:03:22.445>NPM

72
00:03:23.685 --> 00:03:26.085
<00:03:23.685>or <00:03:23.840>something <00:03:23.996>or <00:03:24.151>if <00:03:24.307>it's <00:03:24.462>just <00:03:24.618>hard <00:03:24.773>coded <00:03:24.929>at <00:03:25.085>zero

73
00:03:26.345 --> 00:03:27.765
<00:03:26.345>and <00:03:26.558>it's <00:03:26.771>just <00:03:26.983>there <00:03:27.197>for <00:03:27.410>the <00:03:27.623>meme.

74
00:03:27.985 --> 00:03:30.125
<00:03:27.985>If <00:03:28.160>anyone <00:03:28.335>knows, <00:03:28.510>please <00:03:28.685>come <00:03:28.860>up <00:03:29.035>and <00:03:29.210>tell <00:03:29.385>me.

75
00:03:30.245 --> 00:03:32.045
<00:03:30.245>I <00:03:30.445>would <00:03:30.645>like, <00:03:30.845>I'm <00:03:31.045>really <00:03:31.245>interested <00:03:31.445>in <00:03:31.645>this,

76
00:03:32.145 --> 00:03:35.365
<00:03:32.145>but <00:03:32.300>I <00:03:32.456>have <00:03:32.611>wasn't, <00:03:32.767>uh, <00:03:32.922>able <00:03:33.078>to <00:03:33.233>find <00:03:33.389>out <00:03:33.545>now.

77
00:03:36.065 --> 00:03:39.085
<00:03:36.065>Um, <00:03:36.265>I <00:03:36.465>started <00:03:36.665>reflecting <00:03:36.865>on <00:03:37.065>my <00:03:37.265>tech <00:03:37.465>stack

78
00:03:39.385 --> 00:03:42.005
<00:03:39.385>and <00:03:39.584>how <00:03:39.785>I've <00:03:39.984>been <00:03:40.185>developing, <00:03:40.385>uh, <00:03:40.584>web <00:03:40.785>applications

79
00:03:42.005 --> 00:03:43.045
<00:03:42.005>for <00:03:42.192>the <00:03:42.379>last <00:03:42.566>couple <00:03:42.753>of <00:03:42.941>years,

80
00:03:44.025 --> 00:03:47.125
<00:03:44.025>and <00:03:44.375>I <00:03:44.725>kind <00:03:45.075>of <00:03:45.425>had

81
00:03:47.125 --> 00:03:49.845
<00:03:47.125>to <00:03:47.358>think <00:03:47.591>about <00:03:47.825>these <00:03:48.058>programming <00:03:48.291>principles <00:03:48.525>we

82
00:03:49.845 --> 00:03:50.965
<00:03:49.845>all <00:03:50.181>learned <00:03:50.517>at <00:03:50.853>university.

83
00:03:51.345 --> 00:03:56.165
<00:03:51.345>Uh, <00:03:51.625>bootcamp, <00:03:51.905>self-taught, <00:03:52.185>um, <00:03:52.465>or <00:03:52.745>everywhere.

84
00:03:56.425 --> 00:03:59.525
<00:03:56.425>The <00:03:56.625>first <00:03:56.825>one, <00:03:57.025>kiss, <00:03:57.225>keep <00:03:57.425>it <00:03:57.625>simple, <00:03:57.825>stupid.

85
00:04:00.325 --> 00:04:03.285
<00:04:00.325>I <00:04:00.524>don't <00:04:00.725>find <00:04:00.924>single <00:04:01.125>app, <00:04:01.325>single <00:04:01.524>page <00:04:01.725>applications

86
00:04:03.505 --> 00:04:04.925
<00:04:03.505>or <00:04:03.824>also <00:04:04.144>server <00:04:04.463>side <00:04:04.783>vendor.

87
00:04:04.995 --> 00:04:08.205
<00:04:04.995>Next <00:04:05.170>js <00:04:05.345>uh, <00:04:05.520>apps <00:04:05.695>for <00:04:05.870>that <00:04:06.045>matter. <00:04:06.220>Really <00:04:06.395>simple.

88
00:04:08.345 --> 00:04:10.245
<00:04:08.345>We <00:04:08.520>have <00:04:08.695>a <00:04:08.870>lot <00:04:09.045>of <00:04:09.220>client <00:04:09.395>server <00:04:09.570>state <00:04:09.745>management.

89
00:04:10.375 --> 00:04:13.725
<00:04:10.375>Let's <00:04:10.515>have <00:04:10.655>you <00:04:10.795>have <00:04:10.935>a <00:04:11.075>lot <00:04:11.215>of <00:04:11.355>clients <00:04:11.495>side <00:04:11.635>state <00:04:11.775>management,

90
00:04:14.125 --> 00:04:17.085
<00:04:14.125>a <00:04:14.325>lot <00:04:14.525>of <00:04:14.725>client <00:04:14.925>server <00:04:15.125>validation, <00:04:15.325>uh, <00:04:15.525>synchronization.

91
00:04:17.625 --> 00:04:22.085
<00:04:17.625>Um, <00:04:17.780>and <00:04:17.936>that's <00:04:18.091>not <00:04:18.247>really <00:04:18.402>a <00:04:18.558>simple <00:04:18.713>thing <00:04:18.869>to <00:04:19.024>do.

92
00:04:22.905 --> 00:04:24.485
<00:04:22.905>Uh, <00:04:23.371>don't <00:04:23.838>repeat <00:04:24.304>yourself.

93
00:04:25.425 --> 00:04:27.845
<00:04:25.425>Um, <00:04:25.775>I <00:04:26.125>often <00:04:26.475>write, <00:04:26.825>uh,

94
00:04:27.935 --> 00:04:29.885
<00:04:27.935>enterprise <00:04:28.285>heavy <00:04:28.635>spring <00:04:28.985>boot <00:04:29.335>applications.

95
00:04:30.155 --> 00:04:32.845
<00:04:30.155>That <00:04:30.388>means <00:04:30.621>I <00:04:30.854>normally <00:04:31.088>have <00:04:31.321>some <00:04:31.554>kind

96
00:04:32.845 --> 00:04:37.045
<00:04:32.845>of <00:04:32.985>open <00:04:33.125>API <00:04:33.265>specification <00:04:33.405>or <00:04:33.545>I <00:04:33.685>have <00:04:33.825>DTS <00:04:33.965>that <00:04:34.105>I <00:04:34.245>write

97
00:04:37.545 --> 00:04:39.845
<00:04:37.545>and <00:04:37.720>I <00:04:37.895>have <00:04:38.070>to <00:04:38.245>duplicate <00:04:38.420>those <00:04:38.595>on <00:04:38.770>the <00:04:38.945>backend

98
00:04:39.845 --> 00:04:42.725
<00:04:39.845>and <00:04:40.000>on <00:04:40.156>the <00:04:40.311>front <00:04:40.467>end <00:04:40.622>when <00:04:40.778>type <00:04:40.933>scripts <00:04:41.089>to <00:04:41.245>kind

99
00:04:42.825 --> 00:04:44.925
<00:04:42.825>of <00:04:43.000>have <00:04:43.175>some <00:04:43.349>type <00:04:43.525>checking <00:04:43.700>in <00:04:43.875>my <00:04:44.050>front <00:04:44.224>end.

100
00:04:45.505 --> 00:04:48.605
<00:04:45.505>Um, <00:04:45.680>so <00:04:45.855>I <00:04:46.030>can <00:04:46.205>write <00:04:46.380>them <00:04:46.555>both <00:04:46.730>by <00:04:46.905>hand

101
00:04:48.745 --> 00:04:51.485
<00:04:48.745>or <00:04:48.872>I <00:04:48.999>can <00:04:49.126>write <00:04:49.254>them <00:04:49.381>one <00:04:49.508>in <00:04:49.635>like <00:04:49.763>an <00:04:49.890>open <00:04:50.017>API <00:04:50.145>spec

102
00:04:51.745 --> 00:04:54.165
<00:04:51.745>and <00:04:51.945>generate <00:04:52.145>it, <00:04:52.345>but <00:04:52.545>it's <00:04:52.745>still <00:04:52.945>added <00:04:53.145>complexity.

103
00:04:54.785 --> 00:04:56.805
<00:04:54.784>Uh, <00:04:55.064>validation <00:04:55.344>logic <00:04:55.624>is <00:04:55.905>another <00:04:56.184>thing

104
00:04:56.805 --> 00:04:59.685
<00:04:56.805>that <00:04:57.005>I <00:04:57.205>find <00:04:57.405>myself <00:04:57.605>duplicating <00:04:57.805>very <00:04:58.005>often, <00:04:58.205>uh,

105
00:04:59.685 --> 00:05:00.885
<00:04:59.685>because <00:04:59.955>on <00:05:00.225>the <00:05:00.495>server <00:05:00.765>side,

106
00:05:01.025 --> 00:05:03.445
<00:05:01.025>we <00:05:01.224>cannot <00:05:01.424>trust <00:05:01.625>anything <00:05:01.825>the <00:05:02.025>client <00:05:02.224>sends <00:05:02.424>us,

107
00:05:03.985 --> 00:05:05.925
<00:05:03.985>but <00:05:04.185>on <00:05:04.385>the <00:05:04.585>client <00:05:04.785>side, <00:05:04.985>we <00:05:05.185>also <00:05:05.385>want

108
00:05:05.925 --> 00:05:07.205
<00:05:05.925>to <00:05:06.155>provide <00:05:06.385>a <00:05:06.616>good <00:05:06.846>user <00:05:07.077>experience

109
00:05:07.465 --> 00:05:11.245
<00:05:07.465>and <00:05:07.620>actually <00:05:07.776>inform <00:05:07.931>the <00:05:08.087>user <00:05:08.242>if <00:05:08.398>the <00:05:08.553>form <00:05:08.709>is <00:05:08.864>valid

110
00:05:11.625 --> 00:05:14.565
<00:05:11.625>or <00:05:11.800>not, <00:05:11.975>um, <00:05:12.150>before <00:05:12.325>they <00:05:12.500>submit <00:05:12.675>or <00:05:12.850>at <00:05:13.025>least

111
00:05:14.565 --> 00:05:15.645
<00:05:14.565>after <00:05:15.051>they <00:05:15.537>submit.

112
00:05:15.705 --> 00:05:18.885
<00:05:15.705>And <00:05:15.832>we <00:05:15.959>don't <00:05:16.086>want <00:05:16.214>to <00:05:16.341>pester <00:05:16.468>them <00:05:16.595>and <00:05:16.723>make <00:05:16.850>it <00:05:16.977>really <00:05:17.104>annoying

113
00:05:19.345 --> 00:05:20.965
<00:05:19.345>and <00:05:19.578>last <00:05:19.811>year <00:05:20.045>ain't <00:05:20.278>gonna <00:05:20.511>need <00:05:20.745>it.

114
00:05:20.965 --> 00:05:22.125
<00:05:20.965>This <00:05:21.138>is <00:05:21.313>kind <00:05:21.486>of <00:05:21.661>my <00:05:21.835>favorite <00:05:22.009>thing.

115
00:05:22.665 --> 00:05:27.205
<00:05:22.665>Um, <00:05:22.865>we, <00:05:23.065>I <00:05:23.265>don't <00:05:23.465>believe <00:05:23.665>that <00:05:23.865>we <00:05:24.065>need

116
00:05:27.735 --> 00:05:30.765
<00:05:27.735>these <00:05:27.968>really, <00:05:28.201>really <00:05:28.435>powerful <00:05:28.668>JavaScript <00:05:28.901>frameworks <00:05:29.135>like

117
00:05:30.815 --> 00:05:32.725
<00:05:30.815>React <00:05:31.165>and <00:05:31.515>View <00:05:31.865>for <00:05:32.215>everything.

118
00:05:32.755 --> 00:05:35.325
<00:05:32.755>They <00:05:33.034>definitely <00:05:33.315>have <00:05:33.594>their <00:05:33.875>place, <00:05:34.155>um,

119
00:05:35.865 --> 00:05:38.405
<00:05:35.865>but <00:05:36.145>they, <00:05:36.425>we <00:05:36.705>don't <00:05:36.985>need <00:05:37.265>them

120
00:05:38.505 --> 00:05:41.485
<00:05:38.505>for <00:05:38.738>some <00:05:38.971>tables <00:05:39.205>validation <00:05:39.438>forms <00:05:39.671>or <00:05:39.905>wizards.

121
00:05:41.485 --> 00:05:44.765
<00:05:41.485>And <00:05:41.640>we <00:05:41.796>also <00:05:41.951>don't <00:05:42.107>need <00:05:42.262>them <00:05:42.418>for <00:05:42.573>basic <00:05:42.729>inter <00:05:42.885>interactivity.

122
00:05:45.865 --> 00:05:48.885
<00:05:45.865>So <00:05:46.065>I <00:05:46.265>came <00:05:46.465>to <00:05:46.665>kind <00:05:46.865>of <00:05:47.065>a <00:05:47.265>self-diagnosis

123
00:05:49.345 --> 00:05:50.685
<00:05:49.345>and <00:05:49.646>that <00:05:49.948>is <00:05:50.249>JavaScript <00:05:50.551>fatigue.

124
00:05:51.085 --> 00:05:52.365
<00:05:51.085>I <00:05:51.249>don't <00:05:51.414>know <00:05:51.578>how <00:05:51.743>many <00:05:51.907>know <00:05:52.072>of <00:05:52.237>this,

125
00:05:52.465 --> 00:05:54.965
<00:05:52.465>but <00:05:52.620>it, <00:05:52.776>I <00:05:52.931>think <00:05:53.087>the <00:05:53.242>meme <00:05:53.398>has <00:05:53.553>a <00:05:53.709>little <00:05:53.865>bit

126
00:05:54.965 --> 00:05:56.165
<00:05:54.965>down, <00:05:55.325>died <00:05:55.685>down <00:05:56.045>now.

127
00:05:56.895 --> 00:05:59.405
<00:05:56.895>About <00:05:57.050>two <00:05:57.206>years <00:05:57.361>ago <00:05:57.517>I <00:05:57.672>was <00:05:57.828>still <00:05:57.983>laughing <00:05:58.139>about <00:05:58.294>this.

128
00:05:59.565 --> 00:06:00.725
<00:05:59.565>I <00:05:59.773>was <00:05:59.982>like, <00:06:00.191>yeah, <00:06:00.400>it's <00:06:00.609>great

129
00:06:00.725 --> 00:06:04.765
<00:06:00.725>that <00:06:00.880>your <00:06:01.036>JavaScript <00:06:01.191>eco <00:06:01.347>ecosystem, <00:06:01.502>uh, <00:06:01.658>is <00:06:01.813>moving <00:06:01.969>that <00:06:02.125>fast.

130
00:06:04.775 --> 00:06:07.045
<00:06:04.775>Innovation <00:06:05.054>is <00:06:05.335>a <00:06:05.614>very <00:06:05.895>good <00:06:06.174>thing,

131
00:06:07.785 --> 00:06:10.245
<00:06:07.785>but <00:06:08.135>now <00:06:08.485>seven, <00:06:08.835>like <00:06:09.185>with

132
00:06:10.245 --> 00:06:13.285
<00:06:10.245>after <00:06:10.445>almost <00:06:10.645>seven <00:06:10.845>years <00:06:11.045>with <00:06:11.245>it, <00:06:11.445>I <00:06:11.645>kind

133
00:06:13.285 --> 00:06:14.925
<00:06:13.285>of <00:06:13.485>feel <00:06:13.685>a <00:06:13.885>little <00:06:14.085>bit <00:06:14.285>of <00:06:14.485>JavaScript <00:06:14.685>burnout.

134
00:06:15.625 --> 00:06:19.325
<00:06:15.625>Um, <00:06:15.825>I <00:06:16.025>don't <00:06:16.225>want <00:06:16.425>to <00:06:16.625>rewrite <00:06:16.825>my <00:06:17.025>react

135
00:06:19.325 --> 00:06:21.125
<00:06:19.325>or <00:06:19.791>view <00:06:20.258>application <00:06:20.724>just

136
00:06:21.265 --> 00:06:24.085
<00:06:21.265>to <00:06:21.498>include <00:06:21.731>the <00:06:21.965>newest <00:06:22.198>frameworks <00:06:22.431>and <00:06:22.664>libraries.

137
00:06:25.265 --> 00:06:26.885
<00:06:25.265>And <00:06:25.544>then <00:06:25.825>came <00:06:26.104>a <00:06:26.385>new <00:06:26.664>beginning.

138
00:06:27.465 --> 00:06:29.085
<00:06:27.465>Uh, <00:06:27.744>I <00:06:28.025>started <00:06:28.304>experimenting <00:06:28.585>a <00:06:28.864>little

139
00:06:29.085 --> 00:06:30.285
<00:06:29.085>bit, <00:06:29.355>set <00:06:29.625>myself <00:06:29.895>a <00:06:30.165>target.

140
00:06:30.425 --> 00:06:31.925
<00:06:30.425>So <00:06:30.617>I <00:06:30.810>wanted <00:06:31.003>to <00:06:31.196>do <00:06:31.389>server <00:06:31.582>side <00:06:31.775>rendering

141
00:06:32.515 --> 00:06:35.765
<00:06:32.515>because <00:06:32.670>I <00:06:32.826>think <00:06:32.981>it's <00:06:33.137>just <00:06:33.292>a <00:06:33.448>generally <00:06:33.603>more <00:06:33.759>performant <00:06:33.914>way

142
00:06:35.765 --> 00:06:37.085
<00:06:35.765>to <00:06:36.062>do <00:06:36.359>things, <00:06:36.656>at <00:06:36.953>least

143
00:06:37.225 --> 00:06:39.405
<00:06:37.225>for <00:06:37.425>the <00:06:37.625>use <00:06:37.825>cases <00:06:38.025>I'm <00:06:38.225>mostly <00:06:38.425>building <00:06:38.625>for.

144
00:06:39.985 --> 00:06:42.725
<00:06:39.985>Uh, <00:06:40.125>and <00:06:40.265>I <00:06:40.405>wanted <00:06:40.545>to <00:06:40.685>get <00:06:40.825>rid <00:06:40.965>of <00:06:41.105>like <00:06:41.245>client <00:06:41.385>state

145
00:06:43.265 --> 00:06:44.885
<00:06:43.265>JC <00:06:43.544>serialization <00:06:43.825>and <00:06:44.104>all <00:06:44.385>that <00:06:44.664>stuff.

146
00:06:45.325 --> 00:06:47.365
<00:06:45.325>I <00:06:45.500>want <00:06:45.675>to <00:06:45.849>keep <00:06:46.025>components <00:06:46.200>because <00:06:46.375>I <00:06:46.550>love <00:06:46.724>components.

147
00:06:47.425 --> 00:06:51.165
<00:06:47.425>The <00:06:47.580>idea <00:06:47.736>of <00:06:47.891>a <00:06:48.047>function, <00:06:48.202>um, <00:06:48.358>to <00:06:48.513>to <00:06:48.669>create <00:06:48.825>UI

148
00:06:51.985 --> 00:06:54.525
<00:06:51.985>is <00:06:52.265>really, <00:06:52.545>really <00:06:52.825>nice <00:06:53.105>to <00:06:53.385>me.

149
00:06:55.345 --> 00:06:58.125
<00:06:55.345>Um, <00:06:55.545>I <00:06:55.745>want <00:06:55.945>static <00:06:56.145>typing, <00:06:56.345>good <00:06:56.545>editor <00:06:56.745>support,

150
00:06:58.225 --> 00:07:01.445
<00:06:58.225>and <00:06:58.352>I <00:06:58.479>would <00:06:58.606>like <00:06:58.734>to, <00:06:58.861>uh, <00:06:58.988>keep <00:06:59.115>JS <00:06:59.243>out <00:06:59.370>of <00:06:59.497>the <00:06:59.625>picture.

151
00:07:02.465 --> 00:07:04.005
<00:07:02.465>Now <00:07:02.811>I <00:07:03.157>know <00:07:03.504>the <00:07:03.851>irony,

152
00:07:04.545 --> 00:07:06.765
<00:07:04.545>but <00:07:04.720>the <00:07:04.895>first <00:07:05.070>thing <00:07:05.245>I <00:07:05.420>experimented <00:07:05.595>with <00:07:05.770>with <00:07:05.945>remix,

153
00:07:07.225 --> 00:07:09.885
<00:07:07.225>um, <00:07:07.458>we <00:07:07.691>have <00:07:07.925>a <00:07:08.158>bunch <00:07:08.391>of <00:07:08.625>things.

154
00:07:10.005 --> 00:07:11.405
<00:07:10.005>I <00:07:10.145>have <00:07:10.284>a <00:07:10.425>bunch <00:07:10.565>of <00:07:10.705>things <00:07:10.844>there <00:07:10.984>that <00:07:11.125>I <00:07:11.265>like.

155
00:07:11.405 --> 00:07:14.285
<00:07:11.405>We <00:07:11.560>have <00:07:11.716>rendering, <00:07:11.871>we <00:07:12.027>have <00:07:12.182>components <00:07:12.338>since <00:07:12.493>it's <00:07:12.649>just <00:07:12.804>React,

156
00:07:14.635 --> 00:07:17.205
<00:07:14.635>it's <00:07:14.868>type <00:07:15.101>safe, <00:07:15.335>uh, <00:07:15.568>because <00:07:15.801>of <00:07:16.034>TypeScript

157
00:07:17.385 --> 00:07:18.645
<00:07:17.385>and <00:07:17.611>we <00:07:17.838>have <00:07:18.065>good <00:07:18.292>editor <00:07:18.519>support

158
00:07:18.645 --> 00:07:21.165
<00:07:18.645>because <00:07:18.800>it's <00:07:18.956>basically <00:07:19.111>the <00:07:19.267>same <00:07:19.422>tooling <00:07:19.578>I <00:07:19.733>was <00:07:19.889>using <00:07:20.044>before.

159
00:07:21.985 --> 00:07:23.205
<00:07:21.985>The <00:07:22.259>cons, <00:07:22.534>it's <00:07:22.808>no <00:07:23.082>JS

160
00:07:23.305 --> 00:07:26.445
<00:07:23.305>and <00:07:23.460>I <00:07:23.616>don't <00:07:23.771>like <00:07:23.927>react, <00:07:24.082>uh, <00:07:24.238>rehydration, <00:07:24.393>it's <00:07:24.549>a <00:07:24.705>kind

161
00:07:26.445 --> 00:07:28.365
<00:07:26.445>of <00:07:26.645>an <00:07:26.844>annoying <00:07:27.045>thing <00:07:27.245>and <00:07:27.445>you <00:07:27.645>also <00:07:27.844>have

162
00:07:28.365 --> 00:07:30.165
<00:07:28.365>to <00:07:28.598>ship <00:07:28.831>the <00:07:29.065>complete <00:07:29.298>react <00:07:29.531>one <00:07:29.765>time.

163
00:07:31.185 --> 00:07:36.125
<00:07:31.185>Um, <00:07:31.340>then <00:07:31.496>next <00:07:31.651>thing <00:07:31.807>I <00:07:31.962>started <00:07:32.118>is <00:07:32.273>a <00:07:32.429>JVM <00:07:32.585>tool

164
00:07:36.145 --> 00:07:37.565
<00:07:36.145>called <00:07:36.784>Time <00:07:37.423>Leave.

165
00:07:38.345 --> 00:07:42.685
<00:07:38.345>It <00:07:38.485>feels, <00:07:38.625>um, <00:07:38.765>very <00:07:38.905>clunky. <00:07:39.045>It's <00:07:39.185>also <00:07:39.325>SSR, <00:07:39.465>it's <00:07:39.605>pretty <00:07:39.745>fast.

166
00:07:42.705 --> 00:07:44.445
<00:07:42.705>It <00:07:42.938>has <00:07:43.171>an <00:07:43.405>amazing <00:07:43.638>spring <00:07:43.871>boot <00:07:44.104>integration,

167
00:07:44.905 --> 00:07:46.285
<00:07:44.905>but <00:07:45.525>no <00:07:46.147>components.

168
00:07:46.315 --> 00:07:47.845
<00:07:46.315>They <00:07:46.659>have <00:07:47.003>something <00:07:47.347>called <00:07:47.692>fragments,

169
00:07:47.845 --> 00:07:50.125
<00:07:47.845>but <00:07:48.125>the <00:07:48.405>syntax <00:07:48.685>is <00:07:48.965>atrocious <00:07:49.245>atrocious.

170
00:07:50.555 --> 00:07:52.085
<00:07:50.555>It's, <00:07:50.830>uh, <00:07:51.105>has <00:07:51.381>no <00:07:51.656>static <00:07:51.931>typing.

171
00:07:52.265 --> 00:07:55.445
<00:07:52.265>So <00:07:52.405>if <00:07:52.544>your <00:07:52.685>model <00:07:52.825>kind <00:07:52.965>of <00:07:53.104>changes, <00:07:53.245>you <00:07:53.385>have <00:07:53.525>no <00:07:53.664>chance

172
00:07:55.465 --> 00:07:58.725
<00:07:55.465>of <00:07:55.640>noticing <00:07:55.815>it <00:07:55.990>unless <00:07:56.165>you <00:07:56.340>hopefully <00:07:56.515>have <00:07:56.690>a <00:07:56.865>test

173
00:07:58.785 --> 00:08:00.165
<00:07:58.784>or <00:07:59.095>you'll <00:07:59.406>notice <00:07:59.716>in <00:08:00.027>production.

174
00:08:00.665 --> 00:08:02.765
<00:08:00.665>Um, <00:08:00.898>the <00:08:01.131>editor <00:08:01.365>support <00:08:01.598>is <00:08:01.831>very <00:08:02.065>limited

175
00:08:03.065 --> 00:08:04.845
<00:08:03.065>and <00:08:03.344>you <00:08:03.625>do <00:08:03.905>full <00:08:04.185>page <00:08:04.465>reloads.

176
00:08:05.345 --> 00:08:08.805
<00:08:05.345>Uh, <00:08:05.520>this <00:08:05.695>syntax <00:08:05.870>is <00:08:06.045>also <00:08:06.220>really <00:08:06.395>not <00:08:06.570>that <00:08:06.745>great.

177
00:08:08.805 --> 00:08:12.965
<00:08:08.805>They <00:08:09.005>do <00:08:09.205>like, <00:08:09.405>um, <00:08:09.605>XML <00:08:09.805>name <00:08:10.005>spacing <00:08:10.205>inside

178
00:08:12.965 --> 00:08:15.805
<00:08:12.965>of <00:08:13.164>the <00:08:13.364>templates <00:08:13.565>to, <00:08:13.765>to <00:08:13.965>embed <00:08:14.164>their <00:08:14.364>directives.

179
00:08:16.025 --> 00:08:18.485
<00:08:16.025>But <00:08:16.375>experimenting <00:08:16.724>with <00:08:17.075>time <00:08:17.424>leads

180
00:08:18.595 --> 00:08:20.525
<00:08:18.595>with <00:08:18.828>time <00:08:19.061>LEAF <00:08:19.295>was <00:08:19.528>not <00:08:19.761>in <00:08:19.995>vain.

181
00:08:20.865 --> 00:08:22.045
<00:08:20.865>It <00:08:21.077>led <00:08:21.289>me <00:08:21.502>to <00:08:21.714>HT <00:08:21.927>MX.

182
00:08:22.865 --> 00:08:26.645
<00:08:22.865>So <00:08:23.005>HT <00:08:23.145>MX <00:08:23.285>is <00:08:23.425>not <00:08:23.565>a <00:08:23.705>rendering <00:08:23.845>library <00:08:23.985>or <00:08:24.125>a <00:08:24.265>framework.

183
00:08:27.305 --> 00:08:31.805
<00:08:27.305>Um, <00:08:27.445>it <00:08:27.585>proclaims <00:08:27.725>itself <00:08:27.865>to <00:08:28.005>be <00:08:28.145>high <00:08:28.285>power <00:08:28.425>tools <00:08:28.565>for <00:08:28.705>HDML.

184
00:08:32.625 --> 00:08:34.845
<00:08:32.625>Um, <00:08:32.975>it <00:08:33.325>extends <00:08:33.674>H-D-M-L-A <00:08:34.025>bit.

185
00:08:35.665 --> 00:08:39.285
<00:08:35.664>So <00:08:35.804>requests <00:08:35.944>can <00:08:36.084>now <00:08:36.224>be <00:08:36.365>triggered <00:08:36.505>from <00:08:36.645>all <00:08:36.784>dom <00:08:36.924>dom <00:08:37.064>noes,

186
00:08:39.285 --> 00:08:41.405
<00:08:39.284>not <00:08:39.518>only <00:08:39.751>anchor <00:08:39.985>tags <00:08:40.218>and <00:08:40.451>form <00:08:40.684>tags.

187
00:08:42.025 --> 00:08:46.765
<00:08:42.025>Um, <00:08:42.180>and <00:08:42.336>IT <00:08:42.491>requests <00:08:42.647>can <00:08:42.802>be <00:08:42.958>triggered <00:08:43.113>by <00:08:43.269>all, <00:08:43.424>um,

188
00:08:47.485 --> 00:08:51.045
<00:08:47.485>HTP, <00:08:47.685>like <00:08:47.885>by <00:08:48.085>all <00:08:48.285>browser <00:08:48.485>events <00:08:48.685>that <00:08:48.885>is,

189
00:08:51.155 --> 00:08:52.565
<00:08:51.155>that <00:08:51.578>includes <00:08:52.001>custom <00:08:52.424>events.

190
00:08:53.065 --> 00:08:55.485
<00:08:53.065>Uh, <00:08:53.298>instead <00:08:53.531>of <00:08:53.765>like <00:08:53.998>the <00:08:54.231>HDTP <00:08:54.465>standard

191
00:08:55.585 --> 00:08:57.005
<00:08:55.585>of <00:08:55.840>just <00:08:56.096>doing <00:08:56.351>them <00:08:56.607>on <00:08:56.863>click

192
00:08:57.005 --> 00:09:01.765
<00:08:57.005>and <00:08:57.160>on <00:08:57.316>submit, <00:08:57.471>um, <00:08:57.627>we <00:08:57.782>can <00:08:57.938>use <00:08:58.093>all <00:08:58.249>HDTP <00:08:58.405>verbs

193
00:09:01.765 --> 00:09:03.645
<00:09:01.765>so <00:09:01.920>we <00:09:02.076>are <00:09:02.231>not <00:09:02.387>limited <00:09:02.542>to <00:09:02.698>get <00:09:02.853>on <00:09:03.009>post <00:09:03.165>anymore.

194
00:09:04.185 --> 00:09:07.565
<00:09:04.185>And <00:09:04.359>the <00:09:04.535>most <00:09:04.709>important <00:09:04.885>thing <00:09:05.060>we <00:09:05.234>can <00:09:05.410>swap <00:09:05.584>HDML

195
00:09:07.745 --> 00:09:09.405
<00:09:07.745>um, <00:09:09.145>dynamically.

196
00:09:10.265 --> 00:09:14.525
<00:09:10.265>How <00:09:10.405>does <00:09:10.545>this <00:09:10.685>work? <00:09:10.824>Well, <00:09:10.965>we <00:09:11.105>kind <00:09:11.245>of <00:09:11.385>embed <00:09:11.525>these, <00:09:11.665>um,

197
00:09:15.705 --> 00:09:17.605
<00:09:15.705>xh <00:09:16.055>attributes <00:09:16.405>in <00:09:16.755>our <00:09:17.105>HTML

198
00:09:17.605 --> 00:09:20.605
<00:09:17.605>and <00:09:17.745>we <00:09:17.885>need <00:09:18.025>to <00:09:18.165>include <00:09:18.305>a <00:09:18.445>very, <00:09:18.585>very <00:09:18.725>small <00:09:18.865>JavaScript, <00:09:19.005>um,

199
00:09:21.585 --> 00:09:23.805
<00:09:21.585>tag <00:09:21.785>in <00:09:21.985>the <00:09:22.185>header <00:09:22.385>for <00:09:22.585>this <00:09:22.785>to <00:09:22.985>work.

200
00:09:24.675 --> 00:09:29.525
<00:09:24.675>This <00:09:24.814>basically <00:09:24.954>means, <00:09:25.094>hey, <00:09:25.234>do <00:09:25.375>a <00:09:25.515>post <00:09:25.655>request <00:09:25.795>on <00:09:25.935>blur <00:09:26.074>at

201
00:09:30.385 --> 00:09:32.165
<00:09:30.385>and <00:09:30.851>swap <00:09:31.318>this <00:09:31.785>target.

202
00:09:32.665 --> 00:09:36.565
<00:09:32.665>So <00:09:32.820>the <00:09:32.976>input <00:09:33.131>element <00:09:33.287>that <00:09:33.442>is <00:09:33.598>that, <00:09:33.753>um, <00:09:33.909>was <00:09:34.064>blurred

203
00:09:36.795 --> 00:09:41.325
<00:09:36.795>with <00:09:36.995>whatever <00:09:37.194>comes <00:09:37.395>back <00:09:37.594>from <00:09:37.795>from <00:09:37.995>this <00:09:38.194>endpoint.

204
00:09:43.015 --> 00:09:44.885
<00:09:43.015>So <00:09:43.365>how <00:09:43.715>does <00:09:44.064>this <00:09:44.415>work?

205
00:09:44.905 --> 00:09:47.925
<00:09:44.905>We <00:09:45.060>start <00:09:45.216>with <00:09:45.371>this <00:09:45.527>pretty <00:09:45.682>normal <00:09:45.838>SSR, <00:09:45.993>the <00:09:46.149>browser <00:09:46.305>requests,

206
00:09:48.025 --> 00:09:51.885
<00:09:48.025>uh, <00:09:48.199>requests <00:09:48.375>the <00:09:48.550>webpage, <00:09:48.725>the <00:09:48.900>client <00:09:49.074>interacts <00:09:49.250>with <00:09:49.425>it

207
00:09:52.385 --> 00:09:56.045
<00:09:52.385>and <00:09:52.851>HMX <00:09:53.318>sends <00:09:53.785>the,

208
00:09:56.375 --> 00:09:58.285
<00:09:56.375>sends <00:09:56.608>an <00:09:56.841>XR <00:09:57.075>request <00:09:57.308>to <00:09:57.541>the <00:09:57.775>backend.

209
00:09:58.985 --> 00:10:01.205
<00:09:58.985>And <00:09:59.265>values <00:09:59.545>of <00:09:59.825>um, <00:10:00.105>like <00:10:00.385>inputs

210
00:10:01.205 --> 00:10:04.525
<00:10:01.205>and <00:10:01.405>forms <00:10:01.605>are <00:10:01.805>transmitted <00:10:02.005>automatically <00:10:02.205>as <00:10:02.405>form <00:10:02.605>data

211
00:10:05.105 --> 00:10:06.565
<00:10:05.105>and <00:10:05.367>then <00:10:05.630>the <00:10:05.893>server <00:10:06.156>can <00:10:06.419>respond

212
00:10:06.565 --> 00:10:09.485
<00:10:06.565>with <00:10:06.765>just <00:10:06.965>some <00:10:07.165>HML <00:10:07.365>snippet <00:10:07.565>can <00:10:07.765>be <00:10:07.965>anything

213
00:10:09.705 --> 00:10:11.565
<00:10:09.705>and <00:10:09.938>HMX <00:10:10.171>will <00:10:10.405>swap <00:10:10.638>them <00:10:10.871>in <00:10:11.105>place.

214
00:10:12.035 --> 00:10:14.005
<00:10:12.035>This <00:10:12.501>has <00:10:12.968>limitations <00:10:13.435>absolutely,

215
00:10:14.425 --> 00:10:18.805
<00:10:14.425>but <00:10:14.541>you <00:10:14.658>can <00:10:14.775>like <00:10:14.891>do <00:10:15.008>90 <00:10:15.125>to <00:10:15.241>95% <00:10:15.358>of <00:10:15.474>use <00:10:15.591>cases <00:10:15.708>with <00:10:15.824>this

216
00:10:19.145 --> 00:10:20.565
<00:10:19.145>and <00:10:19.464>for <00:10:19.784>the <00:10:20.103>last, <00:10:20.423>uh,

217
00:10:20.755 --> 00:10:24.365
<00:10:20.755>5% <00:10:20.930>you <00:10:21.105>can <00:10:21.280>just <00:10:21.455>use <00:10:21.630>plain <00:10:21.805>JS <00:10:21.980>web <00:10:22.155>components

218
00:10:24.425 --> 00:10:26.765
<00:10:24.425>or <00:10:24.658>even <00:10:24.891>embed <00:10:25.125>your <00:10:25.358>favorite <00:10:25.591>JS <00:10:25.824>framework.

219
00:10:28.595 --> 00:10:32.775
<00:10:28.595>Um, <00:10:28.770>but <00:10:28.945>I <00:10:29.120>would <00:10:29.295>keep <00:10:29.470>those <00:10:29.645>parts <00:10:29.820>that <00:10:29.995>need

220
00:10:32.775 --> 00:10:35.335
<00:10:32.775>to <00:10:33.008>be <00:10:33.241>really <00:10:33.475>interactive, <00:10:33.708>kind <00:10:33.941>of <00:10:34.175>isolated

221
00:10:35.515 --> 00:10:38.735
<00:10:35.515>and <00:10:35.670>leave <00:10:35.826>them <00:10:35.981>as <00:10:36.137>islands <00:10:36.292>in <00:10:36.448>a <00:10:36.603>sea <00:10:36.759>of <00:10:36.915>HDML.

222
00:10:39.715 --> 00:10:43.055
<00:10:39.715>And <00:10:39.870>just <00:10:40.026>to <00:10:40.181>make <00:10:40.337>it <00:10:40.492>clear <00:10:40.648>where <00:10:40.803>I <00:10:40.959>think <00:10:41.115>HDMX

223
00:10:43.055 --> 00:10:46.495
<00:10:43.055>and <00:10:43.255>this <00:10:43.454>server <00:10:43.655>side <00:10:43.854>rendering <00:10:44.055>pattern <00:10:44.255>combination <00:10:44.454>belongs,

224
00:10:47.175 --> 00:10:50.575
<00:10:47.175>I <00:10:47.330>made <00:10:47.486>a <00:10:47.641>a <00:10:47.797>small <00:10:47.952>graphic <00:10:48.108>yesterday <00:10:48.263>on <00:10:48.419>the <00:10:48.574>train.

225
00:10:51.115 --> 00:10:55.215
<00:10:51.115>So <00:10:51.290>on <00:10:51.465>a <00:10:51.640>range <00:10:51.815>from <00:10:51.990>blogs <00:10:52.165>to <00:10:52.340>Figma, <00:10:52.515>right?

226
00:10:55.225 --> 00:10:57.575
<00:10:55.225>Where <00:10:55.458>for <00:10:55.691>blogs, <00:10:55.925>static <00:10:56.158>sites <00:10:56.391>are <00:10:56.625>fine,

227
00:10:57.585 --> 00:10:59.895
<00:10:57.585>maybe <00:10:57.865>want <00:10:58.145>a <00:10:58.425>little <00:10:58.705>interactivity <00:10:58.985>like

228
00:10:59.995 --> 00:11:01.655
<00:10:59.995>for <00:11:00.461>e-commerce <00:11:00.928>business <00:11:01.395>applications

229
00:11:01.655 --> 00:11:05.535
<00:11:01.655>and <00:11:01.855>like <00:11:02.055>some <00:11:02.255>parts <00:11:02.454>of <00:11:02.655>social <00:11:02.855>media, <00:11:03.055>HGMX

230
00:11:05.535 --> 00:11:07.695
<00:11:05.535>and <00:11:05.885>SSR <00:11:06.235>is <00:11:06.584>absolutely <00:11:06.935>sufficient.

231
00:11:07.915 --> 00:11:11.455
<00:11:07.915>And <00:11:08.031>then <00:11:08.148>like <00:11:08.265>later <00:11:08.381>on <00:11:08.498>we <00:11:08.615>get <00:11:08.731>to, <00:11:08.848>uh, <00:11:08.964>with, <00:11:09.081>when <00:11:09.198>we <00:11:09.314>get

232
00:11:11.555 --> 00:11:15.055
<00:11:11.555>to <00:11:11.729>like <00:11:11.905>highly <00:11:12.079>interactive <00:11:12.255>web <00:11:12.430>pages <00:11:12.604>that <00:11:12.780>do <00:11:12.954>lots

233
00:11:15.055 --> 00:11:18.175
<00:11:15.055>of <00:11:15.288>animations, <00:11:15.521>um, <00:11:15.755>that <00:11:15.988>are <00:11:16.221>social <00:11:16.454>media

234
00:11:18.675 --> 00:11:19.895
<00:11:18.675>or <00:11:19.040>are <00:11:19.406>video <00:11:19.773>streaming

235
00:11:19.895 --> 00:11:24.255
<00:11:19.895>or <00:11:20.095>video <00:11:20.295>conferencing <00:11:20.495>with, <00:11:20.694>um, <00:11:20.895>with <00:11:21.095>web <00:11:21.295>RTC

236
00:11:24.785 --> 00:11:27.695
<00:11:24.785>there, <00:11:25.135>the <00:11:25.485>experience <00:11:25.834>I <00:11:26.185>had

237
00:11:27.695 --> 00:11:29.615
<00:11:27.695>with <00:11:27.928>HTMX <00:11:28.161>kind <00:11:28.395>of <00:11:28.628>falls <00:11:28.861>off <00:11:29.095>heart.

238
00:11:29.635 --> 00:11:30.935
<00:11:29.635>So <00:11:29.802>if <00:11:29.969>you're <00:11:30.136>doing <00:11:30.303>that <00:11:30.470>sort <00:11:30.637>of <00:11:30.805>thing,

239
00:11:31.415 --> 00:11:32.855
<00:11:31.415>I <00:11:31.674>would <00:11:31.933>suggest <00:11:32.192>not <00:11:32.451>using <00:11:32.711>it.

240
00:11:33.955 --> 00:11:37.615
<00:11:33.955>Um, <00:11:34.188>now <00:11:34.421>I <00:11:34.655>was <00:11:34.888>still <00:11:35.121>missing <00:11:35.355>something

241
00:11:37.615 --> 00:11:38.815
<00:11:37.615>to <00:11:37.831>do <00:11:38.047>my <00:11:38.263>service <00:11:38.479>at <00:11:38.695>rendering.

242
00:11:39.275 --> 00:11:43.975
<00:11:39.275>And <00:11:39.475>in <00:11:39.675>comes <00:11:39.875>Kotlin, <00:11:40.074>HTMX, <00:11:40.275>uh, <00:11:40.475>cotton <00:11:40.675>X-H-D-M-L,

243
00:11:44.725 --> 00:11:47.135
<00:11:44.725>it's <00:11:45.075>a <00:11:45.425>Kotlin, <00:11:45.775>H-D-M-L-D-S-L, <00:11:46.125>uh,

244
00:11:47.155 --> 00:11:50.575
<00:11:47.155>and <00:11:47.295>we <00:11:47.435>can <00:11:47.574>do <00:11:47.714>HML <00:11:47.855>templating <00:11:47.995>on <00:11:48.135>the <00:11:48.275>JVM <00:11:48.415>with <00:11:48.555>this.

245
00:11:51.075 --> 00:11:53.645
<00:11:51.075>Um, <00:11:51.308>it's <00:11:51.541>not <00:11:51.775>really <00:11:52.008>a <00:11:52.241>templating <00:11:52.475>language,

246
00:11:53.795 --> 00:11:55.885
<00:11:53.795>it's <00:11:54.261>just <00:11:54.728>Kotlin <00:11:55.194>functions.

247
00:11:55.915 --> 00:11:58.845
<00:11:55.915>It's <00:11:56.194>plain <00:11:56.474>Kotlin. <00:11:56.755>Uh, <00:11:57.035>so <00:11:57.314>yeah,

248
00:11:59.225 --> 00:12:01.045
<00:11:59.225>but <00:11:59.380>I've <00:11:59.536>been <00:11:59.691>talking <00:11:59.847>a <00:12:00.002>little <00:12:00.158>bit <00:12:00.313>too <00:12:00.469>long <00:12:00.625>now.

249
00:12:01.225 --> 00:12:02.765
<00:12:01.225>Uh, <00:12:01.456>I <00:12:01.687>think <00:12:01.918>you <00:12:02.149>guys <00:12:02.380>wanna <00:12:02.611>see

250
00:12:02.765 --> 00:12:03.845
<00:12:02.765>a <00:12:02.927>little <00:12:03.089>bit <00:12:03.251>of <00:12:03.413>code <00:12:03.575>at <00:12:03.737>least.

251
00:12:04.825 --> 00:12:07.325
<00:12:04.825>Um, <00:12:05.025>so <00:12:05.225>this <00:12:05.425>is <00:12:05.625>what <00:12:05.825>it <00:12:06.025>look <00:12:06.225>like.

252
00:12:07.325 --> 00:12:12.045
<00:12:07.325>It <00:12:07.500>looks <00:12:07.675>like, <00:12:07.850>um, <00:12:08.025>these <00:12:08.200>divs <00:12:08.375>H <00:12:08.550>one <00:12:08.725>p

253
00:12:12.065 --> 00:12:16.205
<00:12:12.065>and <00:12:12.240>a <00:12:12.415>are <00:12:12.590>all <00:12:12.765>just <00:12:12.940>functions <00:12:13.115>they <00:12:13.290>can <00:12:13.465>get.

254
00:12:16.585 --> 00:12:20.085
<00:12:16.585>Um, <00:12:16.760>basically <00:12:16.935>what <00:12:17.110>we <00:12:17.285>know <00:12:17.460>from <00:12:17.635>JSX <00:12:17.810>as <00:12:17.985>props

255
00:12:20.305 --> 00:12:21.725
<00:12:20.305>and <00:12:20.487>what <00:12:20.670>you <00:12:20.852>see <00:12:21.035>in <00:12:21.217>the <00:12:21.400>curly <00:12:21.583>braces

256
00:12:21.725 --> 00:12:25.525
<00:12:21.725>after <00:12:21.900>are <00:12:22.075>basically <00:12:22.250>the <00:12:22.425>children, <00:12:22.600>um, <00:12:22.775>under <00:12:22.950>the <00:12:23.125>hood.

257
00:12:25.625 --> 00:12:27.445
<00:12:25.625>The <00:12:25.825>what <00:12:26.025>you <00:12:26.225>see <00:12:26.425>in <00:12:26.625>the <00:12:26.825>curly <00:12:27.025>braces.

258
00:12:27.745 --> 00:12:29.645
<00:12:27.745>For <00:12:27.920>the <00:12:28.095>guys <00:12:28.270>that <00:12:28.445>don't <00:12:28.620>know <00:12:28.795>Kotlin <00:12:28.970>that <00:12:29.145>well,

259
00:12:30.145 --> 00:12:31.765
<00:12:30.145>it <00:12:30.495>is <00:12:30.845>just <00:12:31.194>a <00:12:31.545>lambda.

260
00:12:31.865 --> 00:12:34.285
<00:12:31.865>So <00:12:32.065>in <00:12:32.265>Kotlin, <00:12:32.465>if <00:12:32.665>you <00:12:32.865>pass, <00:12:33.065>uh, <00:12:33.265>if,

261
00:12:34.305 --> 00:12:37.725
<00:12:34.305>if <00:12:34.444>a <00:12:34.584>function <00:12:34.724>has <00:12:34.864>a <00:12:35.005>lambda <00:12:35.145>argument <00:12:35.285>as <00:12:35.425>the <00:12:35.564>last, <00:12:35.704>um,

262
00:12:38.075 --> 00:12:40.725
<00:12:38.075>parameter <00:12:38.250>to <00:12:38.425>a <00:12:38.600>function, <00:12:38.775>it <00:12:38.950>can <00:12:39.125>be <00:12:39.300>pulled <00:12:39.475>out

263
00:12:40.745 --> 00:12:43.645
<00:12:40.745>of <00:12:40.920>the <00:12:41.095>parenthesis, <00:12:41.270>um, <00:12:41.445>and <00:12:41.620>written <00:12:41.795>like <00:12:41.970>this <00:12:42.145>after.

264
00:12:43.665 --> 00:12:45.485
<00:12:43.665>So <00:12:43.865>you <00:12:44.064>can <00:12:44.265>build <00:12:44.464>this <00:12:44.665>tree <00:12:44.865>like <00:12:45.064>structure.

265
00:12:46.345 --> 00:12:49.525
<00:12:46.345>Um, <00:12:46.500>it <00:12:46.656>is <00:12:46.811>statically <00:12:46.967>typed, <00:12:47.122>so <00:12:47.278>we <00:12:47.433>have <00:12:47.589>also <00:12:47.745>good,

266
00:12:49.825 --> 00:12:51.765
<00:12:49.825>um, <00:12:50.291>good <00:12:50.758>editor <00:12:51.225>support.

267
00:12:51.765 --> 00:12:53.405
<00:12:51.765>It's <00:12:51.998>playing <00:12:52.231>Kotlin, <00:12:52.465>it's <00:12:52.698>all <00:12:52.931>type <00:12:53.165>checked.

268
00:12:54.345 --> 00:12:57.045
<00:12:54.345>Um, <00:12:54.545>one <00:12:54.745>thing <00:12:54.945>that's <00:12:55.145>still <00:12:55.345>missing <00:12:55.545>here <00:12:55.745>is

269
00:12:57.625 --> 00:12:59.325
<00:12:57.625>how <00:12:57.975>do <00:12:58.325>I <00:12:58.675>write <00:12:59.025>component?

270
00:12:59.505 --> 00:13:03.045
<00:12:59.505>How <00:12:59.645>do <00:12:59.785>I <00:12:59.925>can, <00:13:00.064>how <00:13:00.205>do <00:13:00.345>I <00:13:00.485>encapsulate, <00:13:00.625>um, <00:13:00.765>my <00:13:00.905>UI

271
00:13:03.065 --> 00:13:04.165
<00:13:03.065>to <00:13:03.395>reuse <00:13:03.725>it <00:13:04.055>everywhere?

272
00:13:05.985 --> 00:13:08.685
<00:13:05.985>We <00:13:06.160>can <00:13:06.335>do <00:13:06.510>that <00:13:06.685>just <00:13:06.860>again <00:13:07.035>using <00:13:07.210>playing <00:13:07.385>Kotlin.

273
00:13:09.185 --> 00:13:12.165
<00:13:09.185>Um, <00:13:09.418>this <00:13:09.651>is <00:13:09.885>called <00:13:10.118>an <00:13:10.351>extension <00:13:10.584>function.

274
00:13:13.025 --> 00:13:16.645
<00:13:13.025>Um, <00:13:13.180>flow <00:13:13.336>content <00:13:13.491>is <00:13:13.647>an <00:13:13.802>interface <00:13:13.958>defined <00:13:14.113>somewhere <00:13:14.269>in <00:13:14.425>the

275
00:13:17.405 --> 00:13:18.725
<00:13:17.405>Kotlin <00:13:17.999>H-D-M-L-D-S <00:13:18.593>app.

276
00:13:19.065 --> 00:13:23.245
<00:13:19.065>And <00:13:19.240>basically <00:13:19.415>all <00:13:19.590>HDM <00:13:19.765>elements <00:13:19.940>extend <00:13:20.115>from <00:13:20.290>this <00:13:20.465>in

277
00:13:23.245 --> 00:13:24.285
<00:13:23.245>some <00:13:23.557>sort <00:13:23.869>of <00:13:24.180>way.

278
00:13:24.905 --> 00:13:28.405
<00:13:24.905>Um, <00:13:25.045>an <00:13:25.185>extension <00:13:25.324>function <00:13:25.464>is <00:13:25.605>just <00:13:25.745>a <00:13:25.885>little <00:13:26.025>syntax <00:13:26.165>sugar, <00:13:26.305>uh,

279
00:13:28.475 --> 00:13:32.485
<00:13:28.475>with <00:13:28.650>clever <00:13:28.825>scoping <00:13:29.000>that <00:13:29.175>just <00:13:29.350>exists <00:13:29.525>at <00:13:29.700>compile <00:13:29.875>time

280
00:13:32.625 --> 00:13:33.725
<00:13:32.625>for <00:13:32.872>the <00:13:33.120>JVM, <00:13:33.367>it's <00:13:33.615>just

281
00:13:33.725 --> 00:13:35.165
<00:13:33.725>aesthetic <00:13:34.049>function <00:13:34.373>that's <00:13:34.697>being <00:13:35.021>called.

282
00:13:35.785 --> 00:13:38.525
<00:13:35.785>Um, <00:13:35.940>but <00:13:36.096>we <00:13:36.251>can <00:13:36.407>do <00:13:36.562>a <00:13:36.718>lot <00:13:36.873>of <00:13:37.029>things <00:13:37.185>here.

283
00:13:39.385 --> 00:13:41.125
<00:13:39.385>Um, <00:13:39.540>you <00:13:39.696>can <00:13:39.851>see <00:13:40.007>we <00:13:40.162>can <00:13:40.318>build <00:13:40.473>this <00:13:40.629>three <00:13:40.785>life,

284
00:13:41.135 --> 00:13:42.325
<00:13:41.135>three <00:13:41.492>leg <00:13:41.849>structure <00:13:42.206>again,

285
00:13:42.545 --> 00:13:44.885
<00:13:42.545>but <00:13:42.745>since <00:13:42.944>it's <00:13:43.145>just <00:13:43.344>a <00:13:43.545>normal <00:13:43.745>colan <00:13:43.944>function,

286
00:13:45.265 --> 00:13:47.365
<00:13:45.265>we <00:13:45.439>can <00:13:45.615>declare <00:13:45.790>variables, <00:13:45.965>we <00:13:46.140>can <00:13:46.314>do <00:13:46.490>if <00:13:46.665>else,

287
00:13:47.425 --> 00:13:48.565
<00:13:47.425>we <00:13:47.681>can <00:13:47.938>do <00:13:48.194>pattern <00:13:48.451>matching,

288
00:13:48.565 --> 00:13:50.485
<00:13:48.565>we <00:13:48.798>can <00:13:49.031>do <00:13:49.265>lubes, <00:13:49.498>whatever <00:13:49.731>we <00:13:49.965>like.

289
00:13:50.785 --> 00:13:54.045
<00:13:50.785>We <00:13:50.959>have <00:13:51.135>all <00:13:51.310>possibilities <00:13:51.485>of <00:13:51.660>normal <00:13:51.834>colan <00:13:52.010>control <00:13:52.185>flow.

290
00:13:55.625 --> 00:13:57.685
<00:13:55.625>And <00:13:55.800>this <00:13:55.975>is <00:13:56.150>how <00:13:56.325>we <00:13:56.500>could <00:13:56.675>use <00:13:56.850>this <00:13:57.025>field

291
00:13:57.685 --> 00:13:58.765
<00:13:57.685>set <00:13:57.928>component <00:13:58.170>we <00:13:58.414>just <00:13:58.656>wrote.

292
00:13:59.465 --> 00:14:01.445
<00:13:59.465>Um, <00:13:59.745>and <00:14:00.025>we <00:14:00.305>can <00:14:00.585>even, <00:14:00.865>uh,

293
00:14:01.605 --> 00:14:04.165
<00:14:01.605>I <00:14:01.780>didn't <00:14:01.955>mention <00:14:02.130>if <00:14:02.305>you <00:14:02.480>see <00:14:02.655>in <00:14:02.830>the <00:14:03.005>parameter,

294
00:14:04.165 --> 00:14:05.845
<00:14:04.165>there's <00:14:04.444>something <00:14:04.724>called <00:14:05.005>an <00:14:05.285>attribute <00:14:05.564>bid,

295
00:14:05.965 --> 00:14:07.645
<00:14:05.965>a <00:14:06.245>build <00:14:06.525>an <00:14:06.805>input <00:14:07.085>attribute <00:14:07.365>builder.

296
00:14:07.915 --> 00:14:12.005
<00:14:07.915>It's <00:14:08.055>basically <00:14:08.194>also <00:14:08.334>just <00:14:08.474>in <00:14:08.615>Lambda, <00:14:08.755>uh, <00:14:08.895>lambda <00:14:09.035>scoped <00:14:09.175>to <00:14:09.314>an,

297
00:14:12.545 --> 00:14:15.405
<00:14:12.545>um, <00:14:12.745>input <00:14:12.944>element <00:14:13.145>so <00:14:13.344>it <00:14:13.545>can <00:14:13.745>customize <00:14:13.944>it.

298
00:14:16.105 --> 00:14:19.005
<00:14:16.105>And <00:14:16.232>here <00:14:16.359>you <00:14:16.486>can <00:14:16.614>see, <00:14:16.741>okay, <00:14:16.868>we <00:14:16.995>have <00:14:17.123>this <00:14:17.250>field, <00:14:17.377>uh, <00:14:17.505>set,

299
00:14:19.005 --> 00:14:20.565
<00:14:19.005>we <00:14:19.355>give <00:14:19.705>it <00:14:20.055>some <00:14:20.405>props.

300
00:14:20.585 --> 00:14:22.405
<00:14:20.585>In <00:14:20.785>this <00:14:20.985>case, <00:14:21.185>because <00:14:21.385>I <00:14:21.585>had <00:14:21.785>so <00:14:21.985>many

301
00:14:22.545 --> 00:14:24.125
<00:14:22.545>and <00:14:23.011>somewhat <00:14:23.478>optional <00:14:23.944>props,

302
00:14:24.365 --> 00:14:26.125
<00:14:24.365>I <00:14:24.540>wrapped <00:14:24.715>it <00:14:24.890>in <00:14:25.065>a, <00:14:25.240>in <00:14:25.415>a <00:14:25.590>data <00:14:25.765>class.

303
00:14:26.865 --> 00:14:29.445
<00:14:26.865>Um, <00:14:27.098>and <00:14:27.331>we <00:14:27.565>can <00:14:27.798>even <00:14:28.031>customize <00:14:28.265>this,

304
00:14:29.985 --> 00:14:31.845
<00:14:29.985>the <00:14:30.265>underlying <00:14:30.545>input <00:14:30.825>from <00:14:31.105>the <00:14:31.385>outside

305
00:14:31.985 --> 00:14:34.405
<00:14:31.985>and <00:14:32.265>uh, <00:14:32.545>add <00:14:32.825>some <00:14:33.105>HDML <00:14:33.385>validation.

306
00:14:37.525 --> 00:14:39.885
<00:14:37.525>A <00:14:37.699>quick <00:14:37.875>word <00:14:38.050>about <00:14:38.225>testing <00:14:38.400>testing <00:14:38.574>is <00:14:38.750>pretty <00:14:38.925>simple.

307
00:14:40.265 --> 00:14:43.805
<00:14:40.265>Um, <00:14:40.420>there's <00:14:40.576>a <00:14:40.731>very <00:14:40.887>naive <00:14:41.042>approach <00:14:41.198>on <00:14:41.353>doing <00:14:41.509>it <00:14:41.665>where

308
00:14:43.805 --> 00:14:46.685
<00:14:43.805>what <00:14:44.005>I'm <00:14:44.204>showing <00:14:44.405>here, <00:14:44.604>just <00:14:44.805>render <00:14:45.005>the <00:14:45.204>snippet

309
00:14:46.945 --> 00:14:48.805
<00:14:46.945>and <00:14:47.225>check <00:14:47.505>if <00:14:47.785>the <00:14:48.065>HDML <00:14:48.345>matches.

310
00:14:49.265 --> 00:14:51.845
<00:14:49.265>But <00:14:49.420>you <00:14:49.576>can <00:14:49.731>also <00:14:49.887>just <00:14:50.042>poste <00:14:50.198>it <00:14:50.353>with <00:14:50.509>any, <00:14:50.665>uh,

311
00:14:52.065 --> 00:14:54.565
<00:14:52.065>dom <00:14:52.240>powers <00:14:52.415>you <00:14:52.590>want <00:14:52.765>and <00:14:52.940>do <00:14:53.115>some <00:14:53.290>assertions <00:14:53.465>based

312
00:14:54.565 --> 00:14:55.685
<00:14:54.565>on <00:14:55.069>CSS <00:14:55.573>selectors.

313
00:14:56.025 --> 00:14:58.685
<00:14:56.025>Uh, <00:14:56.180>for <00:14:56.336>integration <00:14:56.491>tests <00:14:56.647>in <00:14:56.802>like <00:14:56.958>a <00:14:57.113>spring <00:14:57.269>boot <00:14:57.425>context,

314
00:14:58.905 --> 00:15:00.405
<00:14:58.905>you <00:14:59.130>can <00:14:59.355>just <00:14:59.579>use <00:14:59.805>mock <00:15:00.030>NM <00:15:00.255>VC.

315
00:15:00.405 --> 00:15:02.725
<00:15:00.405>It'll <00:15:00.638>work <00:15:00.871>just <00:15:01.105>fine <00:15:01.338>for <00:15:01.571>end-to-end <00:15:01.805>testing.

316
00:15:03.035 --> 00:15:04.885
<00:15:03.035>It's <00:15:03.235>no <00:15:03.435>different <00:15:03.635>than <00:15:03.834>any <00:15:04.035>other <00:15:04.235>web <00:15:04.435>application.

317
00:15:04.905 --> 00:15:07.245
<00:15:04.905>Use <00:15:05.105>the <00:15:05.305>end-to-end <00:15:05.505>testing <00:15:05.704>framework <00:15:05.905>of <00:15:06.105>your <00:15:06.305>choice.

318
00:15:08.105 --> 00:15:12.405
<00:15:08.105>Um, <00:15:08.305>and <00:15:08.505>the <00:15:08.705>cool <00:15:08.905>thing <00:15:09.105>is <00:15:09.305>this <00:15:09.505>H-T-M-L-D-S-A,

319
00:15:12.405 --> 00:15:15.725
<00:15:12.405>it <00:15:12.579>can <00:15:12.755>be <00:15:12.930>integrated <00:15:13.105>into <00:15:13.280>every <00:15:13.454>JVM <00:15:13.630>based <00:15:13.805>application.

320
00:15:16.635 --> 00:15:19.525
<00:15:16.635>That <00:15:16.810>means, <00:15:16.985>uh, <00:15:17.160>it <00:15:17.335>took <00:15:17.510>me <00:15:17.685>for <00:15:17.860>Spring <00:15:18.035>Boot

321
00:15:19.865 --> 00:15:23.205
<00:15:19.865>around <00:15:20.020>a <00:15:20.176>hundred <00:15:20.331>lines, <00:15:20.487>a <00:15:20.642>little <00:15:20.798>bit <00:15:20.953>less <00:15:21.109>of <00:15:21.265>code

322
00:15:23.205 --> 00:15:25.845
<00:15:23.205>to <00:15:23.438>integrate <00:15:23.671>it <00:15:23.905>into <00:15:24.138>standard <00:15:24.371>spring <00:15:24.605>MVC.

323
00:15:26.665 --> 00:15:29.885
<00:15:26.665>Uh, <00:15:26.805>that <00:15:26.944>means <00:15:27.084>I <00:15:27.224>get <00:15:27.365>all <00:15:27.505>of <00:15:27.645>the <00:15:27.785>spring <00:15:27.925>NVC <00:15:28.064>goodness

324
00:15:30.185 --> 00:15:32.325
<00:15:30.185>or <00:15:30.464>if <00:15:30.744>you <00:15:31.025>were <00:15:31.305>using <00:15:31.584>QoS

325
00:15:32.385 --> 00:15:34.845
<00:15:32.385>or <00:15:32.665>um, <00:15:32.944>any <00:15:33.225>other <00:15:33.505>framework, <00:15:33.785>all

326
00:15:34.845 --> 00:15:36.925
<00:15:34.845>of <00:15:35.000>the <00:15:35.156>goodness <00:15:35.311>you <00:15:35.467>get <00:15:35.622>from <00:15:35.778>that <00:15:35.933>framework <00:15:36.089>as <00:15:36.245>well.

327
00:15:37.155 --> 00:15:39.765
<00:15:37.155>It's <00:15:37.355>really, <00:15:37.555>really <00:15:37.755>easy <00:15:37.954>to <00:15:38.155>integrate, <00:15:38.355>which <00:15:38.555>means

328
00:15:40.645 --> 00:15:42.645
<00:15:40.645>I <00:15:40.878>can <00:15:41.111>write <00:15:41.345>my <00:15:41.578>controllers <00:15:41.811>like <00:15:42.045>this

329
00:15:43.185 --> 00:15:47.125
<00:15:43.185>and <00:15:43.324>respond <00:15:43.464>on <00:15:43.604>the <00:15:43.744>get <00:15:43.885>request <00:15:44.025>with <00:15:44.165>the <00:15:44.305>whole <00:15:44.444>page, <00:15:44.584>right?

330
00:15:47.125 --> 00:15:48.725
<00:15:47.125>This <00:15:47.358>is <00:15:47.591>like <00:15:47.825>the <00:15:48.058>initial <00:15:48.291>page <00:15:48.525>load.

331
00:15:48.805 --> 00:15:50.045
<00:15:48.805>I <00:15:49.028>want <00:15:49.251>to <00:15:49.474>respond <00:15:49.697>with <00:15:49.920>everything.

332
00:15:50.785 --> 00:15:53.965
<00:15:50.785>Um, <00:15:50.912>there <00:15:51.039>is <00:15:51.166>a <00:15:51.294>form <00:15:51.421>on <00:15:51.548>that <00:15:51.675>page, <00:15:51.803>it's <00:15:51.930>a <00:15:52.057>register <00:15:52.185>form

333
00:15:54.265 --> 00:15:55.965
<00:15:54.265>and <00:15:54.465>I <00:15:54.665>just <00:15:54.865>simply <00:15:55.064>want <00:15:55.265>to <00:15:55.465>reset <00:15:55.665>it

334
00:15:55.965 --> 00:15:57.565
<00:15:55.965>after <00:15:56.245>it <00:15:56.525>has <00:15:56.805>been <00:15:57.085>submitted <00:15:57.365>without

335
00:15:57.565 --> 00:15:58.845
<00:15:57.565>doing <00:15:57.853>a <00:15:58.141>full <00:15:58.429>page <00:15:58.717>reload.

336
00:15:59.385 --> 00:16:03.125
<00:15:59.385>So, <00:15:59.618>um, <00:15:59.851>when <00:16:00.085>the <00:16:00.318>post <00:16:00.551>request <00:16:00.785>happens,

337
00:16:03.385 --> 00:16:06.605
<00:16:03.385>the <00:16:03.585>form <00:16:03.785>data <00:16:03.985>gets <00:16:04.185>automatically <00:16:04.385>post <00:16:04.585>into <00:16:04.785>a

338
00:16:06.605 --> 00:16:07.685
<00:16:06.605>model <00:16:06.929>that's <00:16:07.252>spring <00:16:07.577>boot.

339
00:16:08.305 --> 00:16:13.125
<00:16:08.305>Um, <00:16:08.460>I <00:16:08.616>can <00:16:08.771>like <00:16:08.927>add <00:16:09.082>my <00:16:09.238>visitor <00:16:09.393>via <00:16:09.549>the <00:16:09.704>visitor

340
00:16:13.125 --> 00:16:14.205
<00:16:13.125>service <00:16:13.449>and <00:16:13.773>I <00:16:14.097>respond

341
00:16:14.205 --> 00:16:17.125
<00:16:14.205>with <00:16:14.438>just <00:16:14.671>an <00:16:14.905>empty <00:16:15.138>register <00:16:15.371>form <00:16:15.605>basically.

342
00:16:17.825 --> 00:16:20.805
<00:16:17.825>And <00:16:17.965>with <00:16:18.105>this <00:16:18.245>pattern, <00:16:18.385>you <00:16:18.525>can <00:16:18.665>do <00:16:18.805>a <00:16:18.945>lot <00:16:19.085>of <00:16:19.225>stuff

343
00:16:21.225 --> 00:16:25.165
<00:16:21.225>and <00:16:21.380>it's <00:16:21.536>type <00:16:21.691>safe, <00:16:21.847>uh, <00:16:22.002>which <00:16:22.158>means <00:16:22.313>if <00:16:22.469>you <00:16:22.625>have,

344
00:16:25.505 --> 00:16:28.365
<00:16:25.505>if <00:16:25.705>you <00:16:25.905>pass <00:16:26.105>in <00:16:26.305>arguments <00:16:26.505>to <00:16:26.705>your <00:16:26.905>components,

345
00:16:29.065 --> 00:16:30.845
<00:16:29.065>you <00:16:29.415>will <00:16:29.765>get <00:16:30.115>compilation <00:16:30.465>errors.

346
00:16:31.025 --> 00:16:32.965
<00:16:31.025>So <00:16:31.199>we <00:16:31.375>have <00:16:31.550>a <00:16:31.725>really, <00:16:31.900>really <00:16:32.074>fast <00:16:32.250>feedback <00:16:32.425>loop.

347
00:16:33.905 --> 00:16:36.605
<00:16:33.905>Um, <00:16:34.045>this <00:16:34.185>is <00:16:34.324>kind <00:16:34.464>of <00:16:34.605>what <00:16:34.745>the <00:16:34.885>register <00:16:35.025>form <00:16:35.165>looks <00:16:35.305>like.

348
00:16:36.785 --> 00:16:38.685
<00:16:36.785>We <00:16:36.925>have <00:16:37.064>an <00:16:37.204>id, <00:16:37.344>we <00:16:37.485>have <00:16:37.625>a <00:16:37.765>trigger <00:16:37.905>that's <00:16:38.045>on <00:16:38.185>submit.

349
00:16:38.685 --> 00:16:40.965
<00:16:38.685>We <00:16:38.859>have <00:16:39.035>an <00:16:39.209>HX <00:16:39.385>post <00:16:39.560>that's <00:16:39.734>just <00:16:39.910>the <00:16:40.084>action

350
00:16:40.965 --> 00:16:44.285
<00:16:40.965>to <00:16:41.120>an <00:16:41.276>endpoint <00:16:41.431>slash <00:16:41.587>form <00:16:41.742>a <00:16:41.898>target <00:16:42.053>which <00:16:42.209>we <00:16:42.365>want

351
00:16:44.285 --> 00:16:45.725
<00:16:44.285>to <00:16:44.544>swap, <00:16:44.803>which <00:16:45.062>is <00:16:45.321>the <00:16:45.581>idea.

352
00:16:45.725 --> 00:16:48.605
<00:16:45.725>We <00:16:45.852>could <00:16:45.979>also <00:16:46.106>write <00:16:46.234>this <00:16:46.361>instead <00:16:46.488>of <00:16:46.615>the, <00:16:46.743>uh, <00:16:46.870>instead <00:16:46.997>of, <00:16:47.125>um,

353
00:16:48.915 --> 00:16:50.125
<00:16:48.915>putting <00:16:49.278>the <00:16:49.641>ID <00:16:50.004>there

354
00:16:50.345 --> 00:16:51.565
<00:16:50.345>and <00:16:50.564>we <00:16:50.784>define <00:16:51.003>a <00:16:51.223>swap <00:16:51.443>type,

355
00:16:51.565 --> 00:16:53.645
<00:16:51.565>which <00:16:51.845>means <00:16:52.125>swap <00:16:52.405>this <00:16:52.685>element <00:16:52.965>itself.

356
00:16:54.765 --> 00:16:59.145
<00:16:54.765>Um, <00:16:54.905>one <00:16:55.045>thing <00:16:55.185>I <00:16:55.324>also <00:16:55.465>want <00:16:55.605>to <00:16:55.745>mention <00:16:55.885>are <00:16:56.025>HDMX <00:16:56.165>extensions.

357
00:16:59.565 --> 00:17:02.625
<00:16:59.565>Uh, <00:16:59.705>my <00:16:59.845>favorite <00:16:59.985>one <00:17:00.125>by <00:17:00.265>four <00:17:00.405>is <00:17:00.545>the <00:17:00.685>web <00:17:00.825>socket <00:17:00.965>extension.

358
00:17:02.855 --> 00:17:06.905
<00:17:02.855>This <00:17:03.010>enables <00:17:03.166>you <00:17:03.321>to <00:17:03.477>push <00:17:03.632>HDML <00:17:03.788>directly <00:17:03.943>to <00:17:04.099>the <00:17:04.255>client,

359
00:17:08.125 --> 00:17:09.905
<00:17:08.125>um, <00:17:08.405>which <00:17:08.685>is <00:17:08.964>pretty <00:17:09.244>cool, <00:17:09.525>right?

360
00:17:09.905 --> 00:17:11.905
<00:17:09.905>Because <00:17:10.138>you <00:17:10.371>can <00:17:10.605>do <00:17:10.838>real <00:17:11.071>time <00:17:11.305>applications

361
00:17:11.905 --> 00:17:15.345
<00:17:11.905>and <00:17:12.060>real <00:17:12.216>time <00:17:12.371>updates, <00:17:12.527>uh, <00:17:12.682>without <00:17:12.838>a <00:17:12.993>lot <00:17:13.149>of <00:17:13.305>fuss.

362
00:17:18.165 --> 00:17:20.585
<00:17:18.165>So <00:17:18.339>it's <00:17:18.514>time <00:17:18.690>for <00:17:18.865>a <00:17:19.040>little <00:17:19.214>bit <00:17:19.389>of <00:17:19.565>demo

363
00:17:38.625 --> 00:17:41.165
<00:17:38.625>And <00:17:38.800>I <00:17:38.975>hope <00:17:39.150>you <00:17:39.325>can <00:17:39.500>all <00:17:39.675>see <00:17:39.850>this <00:17:40.025>fine.

364
00:17:41.945 --> 00:17:45.885
<00:17:41.945>So <00:17:42.072>very <00:17:42.199>quick <00:17:42.326>form <00:17:42.454>example, <00:17:42.581>I <00:17:42.708>will <00:17:42.835>skip <00:17:42.963>some <00:17:43.090>parts <00:17:43.217>of <00:17:43.345>it.

365
00:17:46.825 --> 00:17:50.645
<00:17:46.825>Um, <00:17:47.000>we <00:17:47.175>can <00:17:47.350>do <00:17:47.525>validation <00:17:47.700>as <00:17:47.875>if <00:17:48.050>this <00:17:48.225>was

366
00:17:51.165 --> 00:17:52.165
<00:17:51.165>a <00:17:51.465>single <00:17:51.764>page <00:17:52.065>application.

367
00:17:52.165 --> 00:17:54.685
<00:17:52.165>So <00:17:52.292>if <00:17:52.419>the <00:17:52.546>press, <00:17:52.674>just <00:17:52.801>press <00:17:52.928>the <00:17:53.055>submit <00:17:53.183>button, <00:17:53.310>you <00:17:53.437>can <00:17:53.565>see,

368
00:17:55.025 --> 00:17:57.925
<00:17:55.025>hey, <00:17:55.258>uh, <00:17:55.491>I <00:17:55.725>get <00:17:55.958>nice <00:17:56.191>things <00:17:56.425>here.

369
00:17:58.265 --> 00:18:00.645
<00:17:58.265>But <00:17:58.465>we <00:17:58.665>can <00:17:58.865>also <00:17:59.065>do <00:17:59.265>things <00:17:59.465>like, <00:17:59.665>yeah,

370
00:18:00.745 --> 00:18:02.005
<00:18:00.745>we <00:18:01.028>can, <00:18:01.312>we <00:18:01.595>can <00:18:01.879>register.

371
00:18:02.705 --> 00:18:04.165
<00:18:02.705>My <00:18:02.967>colleague <00:18:03.230>Frank, <00:18:03.493>he's <00:18:03.756>not <00:18:04.019>here,

372
00:18:04.165 --> 00:18:05.245
<00:18:04.165>but <00:18:04.408>let's <00:18:04.650>imagine <00:18:04.894>he's <00:18:05.137>coming.

373
00:18:05.765 --> 00:18:08.725
<00:18:05.765>I <00:18:05.920>press <00:18:06.076>tab <00:18:06.231>and <00:18:06.387>I <00:18:06.542>have <00:18:06.698>an <00:18:06.853>on <00:18:07.009>blur <00:18:07.165>effect

374
00:18:08.905 --> 00:18:11.445
<00:18:08.905>and <00:18:09.138>the <00:18:09.371>validation <00:18:09.605>kicks <00:18:09.838>in <00:18:10.071>it's <00:18:10.305>reevaluated.

375
00:18:11.865 --> 00:18:15.165
<00:18:11.865>Um, <00:18:12.020>and <00:18:12.176>I <00:18:12.331>see <00:18:12.487>I <00:18:12.642>made <00:18:12.798>a <00:18:12.953>small <00:18:13.109>mistake <00:18:13.265>here

376
00:18:15.165 --> 00:18:18.285
<00:18:15.165>because <00:18:15.340>I <00:18:15.514>didn't <00:18:15.690>clear <00:18:15.865>the <00:18:16.040>error <00:18:16.215>message, <00:18:16.389>but <00:18:16.565>uh,

377
00:18:18.425 --> 00:18:19.845
<00:18:18.425>or, <00:18:18.638>oh, <00:18:18.851>this <00:18:19.064>is <00:18:19.277>the <00:18:19.490>help <00:18:19.703>attacks.

378
00:18:20.125 --> 00:18:22.045
<00:18:20.125>Actually <00:18:20.325>I <00:18:20.525>can <00:18:20.725>also <00:18:20.925>add <00:18:21.125>a <00:18:21.325>number <00:18:21.525>again.

379
00:18:22.185 --> 00:18:24.725
<00:18:22.185>And <00:18:22.312>you <00:18:22.439>see <00:18:22.566>again <00:18:22.694>when <00:18:22.821>as <00:18:22.948>soon <00:18:23.075>as <00:18:23.203>the <00:18:23.330>element <00:18:23.457>is <00:18:23.585>blurred,

380
00:18:25.515 --> 00:18:27.685
<00:18:25.515>it's <00:18:25.715>added <00:18:25.915>when <00:18:26.115>I <00:18:26.315>submit, <00:18:26.515>that's <00:18:26.715>the <00:18:26.915>partnership

381
00:18:27.685 --> 00:18:29.405
<00:18:27.685>before <00:18:28.034>the <00:18:28.385>element <00:18:28.735>is <00:18:29.085>reset.

382
00:18:30.225 --> 00:18:31.685
<00:18:30.225>Um, <00:18:30.553>how <00:18:30.881>does <00:18:31.210>this <00:18:31.539>work?

383
00:18:32.725 --> 00:18:34.725
<00:18:32.725>I <00:18:32.899>will <00:18:33.074>show <00:18:33.250>you <00:18:33.425>the <00:18:33.600>network <00:18:33.774>tab <00:18:33.949>for <00:18:34.125>this.

384
00:18:35.135 --> 00:18:36.685
<00:18:35.135>Let's <00:18:35.414>take <00:18:35.693>my <00:18:35.972>next <00:18:36.251>colleague <00:18:36.530>Peter.

385
00:18:37.635 --> 00:18:39.815
<00:18:37.635>Uh, <00:18:37.915>and <00:18:38.195>let's <00:18:38.475>imagine <00:18:38.754>that <00:18:39.035>Peter,

386
00:18:40.635 --> 00:18:42.655
<00:18:40.635>or <00:18:40.810>let <00:18:40.985>me <00:18:41.160>filter <00:18:41.335>this <00:18:41.510>to <00:18:41.685>fetch <00:18:41.860>XR <00:18:42.035>actually.

387
00:18:43.355 --> 00:18:46.495
<00:18:43.355>And <00:18:43.588>you <00:18:43.821>can <00:18:44.055>see <00:18:44.288>each <00:18:44.521>time, <00:18:44.755>uh,

388
00:18:46.855 --> 00:18:49.135
<00:18:46.855>I <00:18:47.088>change <00:18:47.321>an <00:18:47.555>element <00:18:47.788>and <00:18:48.021>it's <00:18:48.255>blurred.

389
00:18:49.375 --> 00:18:50.735
<00:18:49.375>A <00:18:49.681>validate <00:18:49.986>call <00:18:50.293>is <00:18:50.599>happening

390
00:18:51.155 --> 00:18:54.535
<00:18:51.155>and <00:18:51.295>all <00:18:51.435>I'm <00:18:51.575>doing <00:18:51.715>is <00:18:51.855>basically <00:18:51.995>returning <00:18:52.135>the <00:18:52.274>same <00:18:52.415>for, <00:18:52.555>uh,

391
00:18:54.555 --> 00:18:58.095
<00:18:54.555>the, <00:18:54.755>the <00:18:54.955>form <00:18:55.155>again, <00:18:55.355>uh, <00:18:55.555>as <00:18:55.755>a <00:18:55.955>payload.

392
00:18:58.635 --> 00:19:01.975
<00:18:58.635>Um, <00:18:58.835>and <00:18:59.035>on <00:18:59.235>submit <00:18:59.435>I <00:18:59.635>do <00:18:59.835>some <00:19:00.035>validation

393
00:19:02.155 --> 00:19:04.815
<00:19:02.155>and <00:19:02.330>all <00:19:02.504>I <00:19:02.680>return <00:19:02.855>is <00:19:03.030>just <00:19:03.205>an <00:19:03.379>empty <00:19:03.555>form

394
00:19:05.245 --> 00:19:06.735
<00:19:05.245>with <00:19:05.580>the <00:19:05.915>appropriate <00:19:06.250>status <00:19:06.585>code.

395
00:19:07.005 --> 00:19:10.055
<00:19:07.005>Another <00:19:07.180>thing <00:19:07.355>that's <00:19:07.530>pretty <00:19:07.705>cool <00:19:07.880>is <00:19:08.055>I've <00:19:08.230>enabled <00:19:08.405>something

396
00:19:10.055 --> 00:19:12.295
<00:19:10.055>that's <00:19:10.210>called <00:19:10.366>HX <00:19:10.521>Boost, <00:19:10.677>which <00:19:10.832>I <00:19:10.988>didn't <00:19:11.143>tell <00:19:11.299>you <00:19:11.455>about.

397
00:19:12.705 --> 00:19:17.255
<00:19:12.705>Means <00:19:12.879>I <00:19:13.054>that <00:19:13.230>HCMX <00:19:13.405>basically <00:19:13.580>attaches <00:19:13.754>an <00:19:13.929>event <00:19:14.105>handler

398
00:19:17.255 --> 00:19:18.935
<00:19:17.255>to <00:19:17.410>all <00:19:17.566>the <00:19:17.721>anchor <00:19:17.877>tag <00:19:18.032>I <00:19:18.188>have <00:19:18.343>on <00:19:18.499>the <00:19:18.655>page.

399
00:19:19.915 --> 00:19:23.495
<00:19:19.915>And <00:19:20.070>instead <00:19:20.226>of <00:19:20.381>actually <00:19:20.537>like <00:19:20.692>letting <00:19:20.848>the <00:19:21.003>server <00:19:21.159>doing <00:19:21.315>the

400
00:19:23.495 --> 00:19:25.695
<00:19:23.495>get <00:19:23.669>request, <00:19:23.844>it'll <00:19:24.020>do <00:19:24.195>the <00:19:24.370>get <00:19:24.544>request <00:19:24.719>for <00:19:24.895>me

401
00:19:25.835 --> 00:19:27.095
<00:19:25.835>and <00:19:26.061>swap <00:19:26.288>the <00:19:26.515>dom <00:19:26.742>in <00:19:26.969>place.

402
00:19:27.155 --> 00:19:29.335
<00:19:27.155>So <00:19:27.295>I <00:19:27.435>can <00:19:27.575>click <00:19:27.715>on <00:19:27.855>this, <00:19:27.995>you <00:19:28.135>can <00:19:28.274>see <00:19:28.415>the <00:19:28.555>table

403
00:19:30.395 --> 00:19:34.055
<00:19:30.395>and <00:19:30.550>this <00:19:30.706>just <00:19:30.861>comes <00:19:31.017>back <00:19:31.172>and <00:19:31.328>it <00:19:31.483>gets <00:19:31.639>thank <00:19:31.795>you,

404
00:19:34.235 --> 00:19:36.095
<00:19:34.235>and <00:19:34.584>it <00:19:34.935>gets, <00:19:35.284>um, <00:19:35.635>swapped.

405
00:19:36.755 --> 00:19:37.815
<00:19:36.755>Now <00:19:36.945>this <00:19:37.136>is <00:19:37.327>a <00:19:37.518>data <00:19:37.709>table

406
00:19:38.155 --> 00:19:40.495
<00:19:38.155>and <00:19:38.355>I <00:19:38.555>can <00:19:38.754>basically <00:19:38.955>do <00:19:39.155>the <00:19:39.355>same <00:19:39.555>thing.

407
00:19:40.775 --> 00:19:42.095
<00:19:40.775>I <00:19:41.012>have <00:19:41.250>an <00:19:41.487>active <00:19:41.725>search <00:19:41.963>pattern,

408
00:19:42.275 --> 00:19:43.815
<00:19:42.275>so <00:19:42.506>we <00:19:42.737>just <00:19:42.968>added <00:19:43.199>my <00:19:43.430>colleague <00:19:43.661>Frank.

409
00:19:43.895 --> 00:19:45.775
<00:19:43.895>I <00:19:44.095>can <00:19:44.295>enter <00:19:44.495>Frank <00:19:44.695>and <00:19:44.895>Frank <00:19:45.095>shows <00:19:45.295>up.

410
00:19:45.895 --> 00:19:48.335
<00:19:45.895>I <00:19:46.095>can <00:19:46.295>clear <00:19:46.495>it <00:19:46.695>again, <00:19:46.895>it <00:19:47.095>goes <00:19:47.295>away

411
00:19:48.335 --> 00:19:50.415
<00:19:48.335>and <00:19:48.490>you <00:19:48.646>can <00:19:48.801>see <00:19:48.957>I <00:19:49.112>can, <00:19:49.268>I'm <00:19:49.423>just <00:19:49.579>adding, <00:19:49.735>uh,

412
00:19:50.635 --> 00:19:53.855
<00:19:50.635>I'm <00:19:50.790>just <00:19:50.946>requesting <00:19:51.101>an <00:19:51.257>endpoint <00:19:51.412>here <00:19:51.568>with <00:19:51.723>a <00:19:51.879>query <00:19:52.035>string.

413
00:19:54.615 --> 00:19:58.855
<00:19:54.615>I <00:19:54.755>can <00:19:54.895>also <00:19:55.035>sort <00:19:55.175>this <00:19:55.315>by <00:19:55.455>name <00:19:55.595>without <00:19:55.735>any <00:19:55.875>problems, <00:19:56.015>right?

414
00:19:59.195 --> 00:20:00.775
<00:19:59.195>I'm <00:19:59.544>just <00:19:59.895>calling <00:20:00.245>another <00:20:00.595>endpoint,

415
00:20:01.075 --> 00:20:02.495
<00:20:01.075>but <00:20:01.234>I <00:20:01.394>could <00:20:01.554>also <00:20:01.714>do <00:20:01.873>it <00:20:02.033>with <00:20:02.193>the <00:20:02.352>same.

416
00:20:02.635 --> 00:20:04.055
<00:20:02.635>And <00:20:02.954>I'm, <00:20:03.274>again, <00:20:03.593>just <00:20:03.913>doing,

417
00:20:04.265 --> 00:20:06.615
<00:20:04.265>doing <00:20:04.545>query <00:20:04.825>parameters <00:20:05.105>and <00:20:05.385>this <00:20:05.665>works.

418
00:20:06.885 --> 00:20:10.455
<00:20:06.885>Another <00:20:07.060>fun <00:20:07.235>thing <00:20:07.410>I <00:20:07.585>want <00:20:07.760>to <00:20:07.935>show, <00:20:08.110>uh, <00:20:08.285>is

419
00:20:10.455 --> 00:20:12.015
<00:20:10.455>that <00:20:10.735>I <00:20:11.014>have <00:20:11.294>a <00:20:11.574>model <00:20:11.855>here

420
00:20:12.795 --> 00:20:16.255
<00:20:12.795>and <00:20:12.950>this <00:20:13.106>model <00:20:13.261>is <00:20:13.417>actually <00:20:13.572>lazy <00:20:13.728>loaded <00:20:13.883>on <00:20:14.039>page <00:20:14.195>load.

421
00:20:16.255 --> 00:20:18.295
<00:20:16.255>So <00:20:16.430>you <00:20:16.605>can <00:20:16.780>see <00:20:16.955>here <00:20:17.130>is <00:20:17.305>there's <00:20:17.480>happening <00:20:17.655>in

422
00:20:18.375 --> 00:20:20.415
<00:20:18.375>HXR <00:20:18.841>request <00:20:19.308>called <00:20:19.775>Draw.

423
00:20:20.475 --> 00:20:24.535
<00:20:20.475>So <00:20:20.591>you <00:20:20.708>can <00:20:20.824>lazily <00:20:20.941>load <00:20:21.058>parts <00:20:21.175>of <00:20:21.291>your <00:20:21.408>UI <00:20:21.524>that <00:20:21.641>you <00:20:21.758>don't <00:20:21.875>want

424
00:20:24.555 --> 00:20:28.335
<00:20:24.555>to <00:20:24.710>like <00:20:24.866>initially <00:20:25.021>render <00:20:25.177>for <00:20:25.332>SEO <00:20:25.488>or <00:20:25.643>anything <00:20:25.799>like <00:20:25.955>that.

425
00:20:29.475 --> 00:20:32.175
<00:20:29.475>Um, <00:20:29.708>what's <00:20:29.941>also <00:20:30.175>pretty <00:20:30.408>cool, <00:20:30.641>this <00:20:30.875>drawer

426
00:20:33.285 --> 00:20:36.535
<00:20:33.285>does <00:20:33.460>not <00:20:33.635>need <00:20:33.810>any <00:20:33.985>HMX <00:20:34.160>Java <00:20:34.335>JavaScript <00:20:34.510>or <00:20:34.685>anything.

427
00:20:36.685 --> 00:20:41.135
<00:20:36.685>This <00:20:36.840>is <00:20:36.996>just <00:20:37.151>HTML <00:20:37.307>five, <00:20:37.462>um, <00:20:37.618>NCSS <00:20:37.773>for <00:20:37.929>that <00:20:38.085>matter.

428
00:20:41.285 --> 00:20:42.455
<00:20:41.285>Basically <00:20:41.811>this <00:20:42.338>label

429
00:20:42.595 --> 00:20:46.615
<00:20:42.595>and <00:20:42.722>is <00:20:42.849>also <00:20:42.976>this <00:20:43.104>label <00:20:43.231>is, <00:20:43.358>um, <00:20:43.485>is <00:20:43.613>in <00:20:43.740>truth <00:20:43.867>a <00:20:43.995>label.

430
00:20:46.795 --> 00:20:50.885
<00:20:46.795>So <00:20:46.911>this <00:20:47.028>add <00:20:47.145>button <00:20:47.261>isn't <00:20:47.378>truth <00:20:47.495>a <00:20:47.611>label <00:20:47.728>that <00:20:47.845>has <00:20:47.961>an <00:20:48.078>HTML <00:20:48.195>four

431
00:20:50.945 --> 00:20:52.205
<00:20:50.945>for <00:20:51.322>an <00:20:51.701>invisible <00:20:52.079>checkbox.

432
00:20:53.145 --> 00:20:56.365
<00:20:53.145>Uh, <00:20:53.320>and <00:20:53.495>also <00:20:53.670>this <00:20:53.845>backdrop <00:20:54.020>has <00:20:54.195>an <00:20:54.370>invisible <00:20:54.545>label.

433
00:20:56.595 --> 00:20:59.285
<00:20:56.595>Last <00:20:56.750>thing, <00:20:56.906>last <00:20:57.061>thing <00:20:57.217>I <00:20:57.372>quickly <00:20:57.528>want <00:20:57.683>to <00:20:57.839>show <00:20:57.995>you

434
00:21:00.225 --> 00:21:02.125
<00:21:00.225>is <00:21:00.458>we <00:21:00.691>can <00:21:00.925>do <00:21:01.158>real <00:21:01.391>time <00:21:01.625>updates.

435
00:21:02.125 --> 00:21:03.285
<00:21:02.125>This <00:21:02.386>is <00:21:02.647>a <00:21:02.908>socket <00:21:03.169>thing.

436
00:21:03.745 --> 00:21:07.565
<00:21:03.745>Uh, <00:21:03.919>let <00:21:04.094>me <00:21:04.270>just <00:21:04.445>quickly <00:21:04.620>check <00:21:04.794>where <00:21:04.969>is <00:21:05.145>my,

437
00:21:07.565 --> 00:21:09.325
<00:21:07.565>where <00:21:07.765>I <00:21:07.965>can <00:21:08.165>see <00:21:08.365>the <00:21:08.565>web <00:21:08.765>socket <00:21:08.965>here

438
00:21:10.425 --> 00:21:11.645
<00:21:10.425>and <00:21:10.699>show <00:21:10.974>you <00:21:11.248>the <00:21:11.523>messages.

439
00:21:12.185 --> 00:21:13.685
<00:21:12.185>So <00:21:12.455>each <00:21:12.725>time <00:21:12.995>I <00:21:13.264>have <00:21:13.534>a,

440
00:21:13.725 --> 00:21:15.045
<00:21:13.725>I <00:21:13.894>have <00:21:14.064>a <00:21:14.234>job <00:21:14.403>running <00:21:14.573>in <00:21:14.743>the <00:21:14.913>background

441
00:21:15.045 --> 00:21:16.205
<00:21:15.045>that <00:21:15.306>adds <00:21:15.567>some <00:21:15.828>fake <00:21:16.089>data

442
00:21:16.625 --> 00:21:19.165
<00:21:16.625>and <00:21:16.765>each <00:21:16.905>time <00:21:17.045>that <00:21:17.185>happens <00:21:17.325>I <00:21:17.465>have <00:21:17.605>a <00:21:17.745>simple <00:21:17.885>observer <00:21:18.025>pattern

443
00:21:19.235 --> 00:21:22.245
<00:21:19.235>pushing <00:21:19.514>information <00:21:19.794>to <00:21:20.074>the <00:21:20.354>front <00:21:20.635>end.

444
00:21:23.215 --> 00:21:25.995
<00:21:23.215>Um, <00:21:23.564>and <00:21:23.915>it's <00:21:24.264>just <00:21:24.615>HML

445
00:21:26.095 --> 00:21:28.795
<00:21:26.095>and <00:21:26.328>it's <00:21:26.561>again, <00:21:26.795>swapped <00:21:27.028>in <00:21:27.261>place, <00:21:27.495>uh,

446
00:21:28.945 --> 00:21:32.315
<00:21:28.945>without <00:21:29.100>like <00:21:29.256>the <00:21:29.411>client <00:21:29.567>having <00:21:29.722>to <00:21:29.878>do <00:21:30.033>any <00:21:30.189>polling, <00:21:30.345>refreshing

447
00:21:32.335 --> 00:21:33.995
<00:21:32.335>or <00:21:32.615>anything <00:21:32.895>like <00:21:33.175>that, <00:21:33.455>which <00:21:33.735>is

448
00:21:33.995 --> 00:21:35.195
<00:21:33.995>also <00:21:34.210>pretty <00:21:34.427>cool <00:21:34.643>in <00:21:34.859>my <00:21:35.074>opinion.

449
00:21:37.595 --> 00:21:39.615
<00:21:37.595>Now <00:21:38.295>let's <00:21:38.995>continue.

450
00:21:46.205 --> 00:21:48.785
<00:21:46.205>Uh, <00:21:46.671>it's <00:21:47.138>reset. <00:21:47.605>Great.

451
00:21:52.535 --> 00:21:54.865
<00:21:52.535>Okay. <00:21:52.735>The <00:21:52.935>source <00:21:53.135>code <00:21:53.335>you <00:21:53.535>can <00:21:53.735>get <00:21:53.935>here

452
00:21:56.935 --> 00:21:59.955
<00:21:56.935>and <00:21:57.110>I <00:21:57.284>will <00:21:57.460>leave <00:21:57.635>this <00:21:57.810>open <00:21:57.985>for <00:21:58.159>a <00:21:58.335>minute

453
00:22:01.175 --> 00:22:02.715
<00:22:01.175>so <00:22:01.329>you <00:22:01.483>can <00:22:01.637>check <00:22:01.791>it <00:22:01.945>out <00:22:02.099>if <00:22:02.253>you <00:22:02.407>want <00:22:02.561>to.

454
00:22:09.115 --> 00:22:10.115
<00:22:09.115>How <00:22:09.265>much <00:22:09.415>time <00:22:09.565>do <00:22:09.715>I <00:22:09.865>have <00:22:10.015>left?

455
00:22:11.565 --> 00:22:14.895
<00:22:11.565>Okay, <00:22:11.740>Um, <00:22:11.915>I <00:22:12.090>have <00:22:12.265>a <00:22:12.440>couple <00:22:12.615>honorable <00:22:12.790>mentions, <00:22:12.965>uh,

456
00:22:15.075 --> 00:22:16.255
<00:22:15.075>for <00:22:15.606>server-side <00:22:16.137>rendering.

457
00:22:16.355 --> 00:22:20.615
<00:22:16.355>Uh, <00:22:16.510>on <00:22:16.666>the <00:22:16.821>JVM, <00:22:16.977>those <00:22:17.132>are <00:22:17.288>our <00:22:17.443>alternatives <00:22:17.599>to <00:22:17.755>HMX

458
00:22:20.615 --> 00:22:22.735
<00:22:20.615>because <00:22:20.790>HMX <00:22:20.965>is <00:22:21.140>not <00:22:21.315>the <00:22:21.490>only <00:22:21.665>libraries <00:22:21.840>doing <00:22:22.015>this.

459
00:22:23.235 --> 00:22:26.135
<00:22:23.235>Uh, <00:22:23.468>the <00:22:23.701>best <00:22:23.935>one <00:22:24.168>is <00:22:24.401>J-T-E-J-T-E <00:22:24.635>is

460
00:22:26.805 --> 00:22:28.495
<00:22:26.805>more <00:22:27.085>like <00:22:27.365>a <00:22:27.645>normal <00:22:27.925>templating <00:22:28.205>engine,

461
00:22:28.515 --> 00:22:31.575
<00:22:28.515>but <00:22:28.631>they <00:22:28.748>have <00:22:28.865>a <00:22:28.981>cool <00:22:29.098>gradle <00:22:29.215>plug <00:22:29.331>in <00:22:29.448>with <00:22:29.565>which <00:22:29.681>you <00:22:29.798>can, <00:22:29.915>um,

462
00:22:32.415 --> 00:22:34.665
<00:22:32.415>like <00:22:32.764>pre-compiled <00:22:33.115>and <00:22:33.465>generate <00:22:33.815>Kotlin

463
00:22:34.665 --> 00:22:38.425
<00:22:34.665>or <00:22:34.805>Java <00:22:34.945>classes, <00:22:35.085>which <00:22:35.225>gives <00:22:35.365>you <00:22:35.504>type <00:22:35.645>safety <00:22:35.784>again <00:22:35.925>in <00:22:36.065>your

464
00:22:38.705 --> 00:22:39.905
<00:22:38.705>templates, <00:22:38.975>which <00:22:39.245>is <00:22:39.514>pretty <00:22:39.784>cool.

465
00:22:40.405 --> 00:22:43.585
<00:22:40.405>Um, <00:22:40.580>there's <00:22:40.754>Alpine <00:22:40.930>JS <00:22:41.105>in <00:22:41.280>combination <00:22:41.455>with <00:22:41.629>Alpine <00:22:41.805>Ajax,

466
00:22:43.585 --> 00:22:45.625
<00:22:43.585>which <00:22:43.760>you <00:22:43.935>can <00:22:44.110>use <00:22:44.285>if <00:22:44.460>you <00:22:44.635>like <00:22:44.810>that <00:22:44.985>better.

467
00:22:45.925 --> 00:22:48.265
<00:22:45.925>Hot <00:22:46.125>wire <00:22:46.325>Tor <00:22:46.524>is <00:22:46.725>something <00:22:46.925>from <00:22:47.125>the <00:22:47.325>more

468
00:22:48.265 --> 00:22:50.985
<00:22:48.265>of <00:22:48.420>the <00:22:48.576>rails <00:22:48.731>ecosystem, <00:22:48.887>but <00:22:49.042>it <00:22:49.198>looks <00:22:49.353>also <00:22:49.509>pretty <00:22:49.665>promising.

469
00:22:51.455 --> 00:22:53.465
<00:22:51.455>Fixy <00:22:51.804>JS <00:22:52.155>is <00:22:52.504>basically <00:22:52.855>HMX

470
00:22:53.485 --> 00:22:57.305
<00:22:53.485>but <00:22:53.659>just, <00:22:53.834>uh, <00:22:54.010>like <00:22:54.185>more <00:22:54.360>minimal, <00:22:54.534>more <00:22:54.709>minimalistic <00:22:54.885>rewrite.

471
00:22:57.405 --> 00:23:00.425
<00:22:57.405>It <00:22:57.560>has <00:22:57.716>a <00:22:57.871>couple <00:22:58.027>of <00:22:58.182>less <00:22:58.338>screws <00:22:58.493>you <00:22:58.649>could <00:22:58.805>turn.

472
00:23:01.125 --> 00:23:03.905
<00:23:01.125>Um, <00:23:01.325>and <00:23:01.525>it <00:23:01.725>uses <00:23:01.925>fetch <00:23:02.125>instead <00:23:02.325>of <00:23:02.525>XHR.

473
00:23:04.725 --> 00:23:08.065
<00:23:04.725>Um, <00:23:04.925>there's <00:23:05.125>data <00:23:05.324>star, <00:23:05.524>which <00:23:05.725>is <00:23:05.925>SSR <00:23:06.125>based.

474
00:23:08.225 --> 00:23:11.225
<00:23:08.225>I <00:23:08.341>don't <00:23:08.458>like <00:23:08.574>SSR <00:23:08.691>in <00:23:08.808>Spring <00:23:08.925>Boot, <00:23:09.041>so <00:23:09.158>I <00:23:09.274>haven't <00:23:09.391>tried <00:23:09.508>it <00:23:09.625>out,

475
00:23:11.445 --> 00:23:12.945
<00:23:11.445>but <00:23:11.669>it <00:23:11.895>seems <00:23:12.120>to <00:23:12.345>be <00:23:12.570>pretty <00:23:12.794>cool.

476
00:23:13.205 --> 00:23:17.945
<00:23:13.205>Uh, <00:23:13.332>try <00:23:13.459>Pitch <00:23:13.586>is <00:23:13.714>more <00:23:13.841>of, <00:23:13.968>um, <00:23:14.095>an <00:23:14.223>HT <00:23:14.350>ML <00:23:14.477>spec <00:23:14.605>proposal,

477
00:23:18.165 --> 00:23:19.505
<00:23:18.165>but <00:23:18.466>there's <00:23:18.768>a <00:23:19.069>for <00:23:19.371>it

478
00:23:19.525 --> 00:23:23.425
<00:23:19.525>and <00:23:19.680>it <00:23:19.836>does <00:23:19.991>a <00:23:20.147>similar <00:23:20.302>thing <00:23:20.458>thing <00:23:20.613>as <00:23:20.769>um, <00:23:20.925>HMX

479
00:23:23.685 --> 00:23:25.545
<00:23:23.685>and <00:23:23.918>you <00:23:24.151>can <00:23:24.385>always <00:23:24.618>just <00:23:24.851>use <00:23:25.085>jQuery,

480
00:23:26.575 --> 00:23:27.905
<00:23:26.575>just <00:23:26.814>don't <00:23:27.053>use <00:23:27.293>it <00:23:27.532>too <00:23:27.772>much.

481
00:23:28.405 --> 00:23:30.265
<00:23:28.405>Um, <00:23:28.560>if <00:23:28.716>you <00:23:28.871>want <00:23:29.027>to, <00:23:29.182>you <00:23:29.338>can <00:23:29.493>get <00:23:29.649>in <00:23:29.805>touch.

482
00:23:30.295 --> 00:23:32.145
<00:23:30.295>This <00:23:30.470>air <00:23:30.645>quote <00:23:30.820>will <00:23:30.995>lead <00:23:31.170>you <00:23:31.345>to <00:23:31.520>my <00:23:31.695>LinkedIn

483
00:23:32.405 --> 00:23:34.425
<00:23:32.405>or <00:23:32.580>you <00:23:32.754>can <00:23:32.930>always <00:23:33.105>meet <00:23:33.280>me <00:23:33.455>at <00:23:33.629>other <00:23:33.805>conferences.

484
00:23:34.785 --> 00:23:36.425
<00:23:34.785>I <00:23:34.985>am <00:23:35.185>at <00:23:35.385>CNS <00:23:35.585>Munich <00:23:35.785>in <00:23:35.985>two <00:23:36.185>weeks

485
00:23:36.425 --> 00:23:38.785
<00:23:36.425>and <00:23:36.580>later <00:23:36.736>this <00:23:36.891>year <00:23:37.047>also <00:23:37.202>at <00:23:37.358>VX <00:23:37.513>and <00:23:37.669>IT <00:23:37.825>Target.

486
00:23:40.075 --> 00:23:40.825
<00:23:40.075>Thank <00:23:40.300>you <00:23:40.525>very <00:23:40.750>much.