WEBVTT

1
00:00:03.165 --> 00:00:05.775
<00:00:03.165>Well, <00:00:03.445>super <00:00:03.725>thanks <00:00:04.005>and <00:00:04.285>hello <00:00:04.564>everyone.

2
00:00:05.995 --> 00:00:08.895
<00:00:05.995>Uh, <00:00:06.135>it's, <00:00:06.275>uh, <00:00:06.415>bright <00:00:06.555>and <00:00:06.695>early <00:00:06.835>7:00 <00:00:06.975>AM <00:00:07.115>where <00:00:07.255>I <00:00:07.395>am.

3
00:00:08.895 --> 00:00:11.655
<00:00:08.895>So <00:00:09.011>I'm <00:00:09.128>excited <00:00:09.245>to <00:00:09.361>start <00:00:09.478>the <00:00:09.594>day <00:00:09.711>by <00:00:09.828>talking <00:00:09.945>to <00:00:10.061>you <00:00:10.178>about <00:00:10.295>one

4
00:00:11.655 --> 00:00:14.695
<00:00:11.655>of <00:00:11.830>my <00:00:12.004>favorite <00:00:12.180>things <00:00:12.354>in <00:00:12.530>technology, <00:00:12.704>micro <00:00:12.879>front <00:00:13.055>ends.

5
00:00:15.555 --> 00:00:17.295
<00:00:15.555>Um, <00:00:15.834>everything <00:00:16.114>that <00:00:16.395>I'm <00:00:16.675>gonna <00:00:16.955>talk

6
00:00:17.295 --> 00:00:20.255
<00:00:17.295>to <00:00:17.435>you <00:00:17.575>about <00:00:17.715>today <00:00:17.855>is <00:00:17.995>on <00:00:18.135>my <00:00:18.275>website, <00:00:18.415>that <00:00:18.555>slide <00:00:18.695>notes.

7
00:00:20.285 --> 00:00:21.655
<00:00:20.285>I'll <00:00:20.696>text <00:00:21.107>and <00:00:21.518>attributions

8
00:00:21.655 --> 00:00:24.255
<00:00:21.655>for <00:00:21.935>images <00:00:22.215>on <00:00:22.495>joshua <00:00:22.775>k <00:00:23.055>goldberg.com.

9
00:00:24.765 --> 00:00:26.895
<00:00:24.765>I'll <00:00:24.920>note <00:00:25.076>that <00:00:25.231>I <00:00:25.387>do <00:00:25.542>have <00:00:25.698>some <00:00:25.853>looped <00:00:26.009>images <00:00:26.165>here.

10
00:00:27.155 --> 00:00:28.415
<00:00:27.155>If <00:00:27.438>you <00:00:27.722>find <00:00:28.005>those <00:00:28.288>distracting,

11
00:00:28.435 --> 00:00:30.415
<00:00:28.435>you <00:00:28.634>can <00:00:28.834>view <00:00:29.035>on <00:00:29.235>the <00:00:29.435>PowerPoint <00:00:29.634>online <00:00:29.834>viewer,

12
00:00:30.415 --> 00:00:32.815
<00:00:30.415>which <00:00:30.615>allows <00:00:30.814>you <00:00:31.015>to <00:00:31.215>pause <00:00:31.415>those <00:00:31.615>images, <00:00:31.814>uh,

13
00:00:32.835 --> 00:00:34.135
<00:00:32.835>and <00:00:33.002>has <00:00:33.169>all <00:00:33.336>texts <00:00:33.503>for <00:00:33.670>all <00:00:33.837>of <00:00:34.004>them.

14
00:00:34.185 --> 00:00:35.255
<00:00:34.185>Great <00:00:34.666>for <00:00:35.148>accessibility.

15
00:00:36.755 --> 00:00:39.135
<00:00:36.755>The <00:00:36.930>agenda <00:00:37.105>for <00:00:37.280>today <00:00:37.455>is <00:00:37.630>fairly <00:00:37.805>small <00:00:37.980>and <00:00:38.155>simple.

16
00:00:40.145 --> 00:00:42.775
<00:00:40.145>First, <00:00:40.320>we'll <00:00:40.495>talk <00:00:40.670>about <00:00:40.845>why <00:00:41.020>having <00:00:41.195>an <00:00:41.370>old <00:00:41.545>monolith

17
00:00:42.775 --> 00:00:45.575
<00:00:42.775>or <00:00:42.949>monolithic <00:00:43.125>application <00:00:43.300>can <00:00:43.475>be <00:00:43.650>difficult <00:00:43.824>in <00:00:44.000>today's <00:00:44.175>front

18
00:00:45.575 --> 00:00:48.215
<00:00:45.575>end <00:00:45.808>world <00:00:46.041>with <00:00:46.275>large <00:00:46.508>applications <00:00:46.741>and <00:00:46.975>scale.

19
00:00:49.225 --> 00:00:51.735
<00:00:49.225>We'll <00:00:49.400>talk <00:00:49.575>about <00:00:49.750>how <00:00:49.925>micro <00:00:50.100>frontends, <00:00:50.275>which <00:00:50.450>are <00:00:50.625>analogy

20
00:00:51.835 --> 00:00:54.335
<00:00:51.835>for <00:00:52.010>microservices, <00:00:52.185>but <00:00:52.360>on <00:00:52.535>the <00:00:52.710>front <00:00:52.885>end <00:00:53.060>help <00:00:53.235>alleviate

21
00:00:54.335 --> 00:00:55.495
<00:00:54.335>those <00:00:54.683>concerns <00:00:55.031>and <00:00:55.379>pains.

22
00:00:56.365 --> 00:00:58.975
<00:00:56.365>Then <00:00:56.565>we'll <00:00:56.765>talk <00:00:56.965>about <00:00:57.165>some <00:00:57.365>common <00:00:57.565>application <00:00:57.765>flows,

23
00:00:59.125 --> 00:01:01.215
<00:00:59.125>some <00:00:59.300>architectures <00:00:59.475>that <00:00:59.650>you <00:00:59.825>might <00:01:00.000>be <00:01:00.175>able <00:01:00.350>to <00:01:00.525>switch

24
00:01:01.215 --> 00:01:02.735
<00:01:01.215>between <00:01:01.557>using <00:01:01.899>micro <00:01:02.241>front <00:01:02.583>ends.

25
00:01:03.515 --> 00:01:06.695
<00:01:03.515>And <00:01:03.690>lastly, <00:01:03.865>one <00:01:04.040>of <00:01:04.215>my <00:01:04.390>favorite <00:01:04.565>subtopic <00:01:04.739>design <00:01:04.915>systems.

26
00:01:06.875 --> 00:01:09.295
<00:01:06.875>How <00:01:07.050>you <00:01:07.225>can <00:01:07.400>make <00:01:07.575>the <00:01:07.750>user <00:01:07.925>experience <00:01:08.100>seem <00:01:08.275>seamless

27
00:01:09.475 --> 00:01:12.375
<00:01:09.475>and <00:01:09.675>unified <00:01:09.875>through <00:01:10.074>those <00:01:10.274>different <00:01:10.475>front <00:01:10.675>end <00:01:10.875>applications.

28
00:01:14.195 --> 00:01:17.455
<00:01:14.195>So <00:01:14.395>let's <00:01:14.595>get <00:01:14.794>started. <00:01:14.994>Problem <00:01:15.195>statements, <00:01:15.395>more <00:01:15.595>pages,

29
00:01:18.045 --> 00:01:20.335
<00:01:18.045>more <00:01:18.325>problem, <00:01:18.605>more <00:01:18.885>code, <00:01:19.165>more <00:01:19.445>problem.

30
00:01:20.915 --> 00:01:25.055
<00:01:20.914>Bigger, <00:01:21.089>older <00:01:21.264>projects <00:01:21.440>often <00:01:21.615>have <00:01:21.789>older <00:01:21.964>code, <00:01:22.139>more <00:01:22.315>bloat

31
00:01:25.055 --> 00:01:26.295
<00:01:25.055>and <00:01:25.278>more <00:01:25.501>legacy <00:01:25.724>to <00:01:25.947>deal <00:01:26.171>with,

32
00:01:26.465 --> 00:01:29.295
<00:01:26.465>which <00:01:26.640>can <00:01:26.815>make <00:01:26.990>them <00:01:27.165>oftentimes <00:01:27.340>harder <00:01:27.515>to <00:01:27.690>work <00:01:27.865>with.

33
00:01:29.915 --> 00:01:34.055
<00:01:29.914>Um, <00:01:30.070>my <00:01:30.226>first <00:01:30.381>project <00:01:30.537>as <00:01:30.692>a <00:01:30.848>full-time <00:01:31.003>developer <00:01:31.159>was, <00:01:31.315>uh,

34
00:01:34.595 --> 00:01:37.975
<00:01:34.595>so <00:01:34.770>old <00:01:34.945>that <00:01:35.120>visual <00:01:35.295>studio <00:01:35.470>could <00:01:35.645>not <00:01:35.820>render <00:01:35.995>syntax.

35
00:01:37.975 --> 00:01:40.935
<00:01:37.975>Highlighting <00:01:38.175>it <00:01:38.375>was <00:01:38.574>an <00:01:38.774>atrocity <00:01:38.975>to <00:01:39.175>deal <00:01:39.375>with.

36
00:01:40.955 --> 00:01:44.015
<00:01:40.955>It <00:01:41.071>was <00:01:41.188>something <00:01:41.304>like <00:01:41.421>20 <00:01:41.538>or <00:01:41.655>25 <00:01:41.771>years <00:01:41.888>old, <00:01:42.005>and <00:01:42.121>I <00:01:42.238>hated <00:01:42.355>it.

37
00:01:44.315 --> 00:01:48.295
<00:01:44.315>It <00:01:44.470>had <00:01:44.626>long <00:01:44.781>build <00:01:44.937>times, <00:01:45.092>really <00:01:45.248>huge <00:01:45.403>package <00:01:45.559>build <00:01:45.715>folders

38
00:01:48.295 --> 00:01:50.375
<00:01:48.295>and <00:01:48.761>dependencies, <00:01:49.228>build <00:01:49.695>workflows.

39
00:01:50.375 --> 00:01:51.895
<00:01:50.375>Deployments <00:01:50.648>took <00:01:50.922>forever <00:01:51.195>and <00:01:51.469>a <00:01:51.743>day,

40
00:01:52.825 --> 00:01:54.765
<00:01:52.825>and <00:01:53.058>that <00:01:53.291>was <00:01:53.525>not <00:01:53.758>a <00:01:53.991>pleasant <00:01:54.225>experience

41
00:01:54.765 --> 00:01:55.885
<00:01:54.765>for <00:01:55.017>me <00:01:55.268>as <00:01:55.521>a <00:01:55.773>developer.

42
00:01:56.545 --> 00:01:59.245
<00:01:56.545>Um, <00:01:56.685>I'll <00:01:56.825>also <00:01:56.965>note <00:01:57.105>that <00:01:57.245>if <00:01:57.385>you <00:01:57.525>have <00:01:57.665>thousands <00:01:57.805>upon <00:01:57.945>thousands

43
00:01:59.245 --> 00:02:01.685
<00:01:59.245>of <00:01:59.420>lines <00:01:59.595>of <00:01:59.770>code <00:01:59.945>and <00:02:00.120>a <00:02:00.295>giant <00:02:00.470>monolith <00:02:00.645>application

44
00:02:02.155 --> 00:02:04.525
<00:02:02.155>that <00:02:02.435>has <00:02:02.715>a <00:02:02.995>bajillion <00:02:03.275>different <00:02:03.555>responsibilities,

45
00:02:04.825 --> 00:02:07.205
<00:02:04.825>it <00:02:05.025>can <00:02:05.225>be <00:02:05.425>quite <00:02:05.625>difficult <00:02:05.825>to <00:02:06.025>update <00:02:06.225>that

46
00:02:07.205 --> 00:02:10.645
<00:02:07.205>for <00:02:07.380>modern <00:02:07.554>sensibilities <00:02:07.730>as <00:02:07.905>time <00:02:08.079>goes <00:02:08.255>on <00:02:08.430>things <00:02:08.604>age,

47
00:02:10.905 --> 00:02:12.205
<00:02:10.905>and <00:02:11.197>they <00:02:11.490>don't <00:02:11.782>age <00:02:12.075>well.

48
00:02:14.725 --> 00:02:16.465
<00:02:14.725>I'd <00:02:14.864>like <00:02:15.005>to <00:02:15.144>show <00:02:15.285>off <00:02:15.424>this <00:02:15.565>chart <00:02:15.704>for <00:02:15.845>a <00:02:15.984>little <00:02:16.125>bit.

49
00:02:16.775 --> 00:02:18.665
<00:02:16.775>This <00:02:17.055>is <00:02:17.335>of <00:02:17.615>course, <00:02:17.895>an <00:02:18.175>overgeneralization.

50
00:02:18.765 --> 00:02:20.625
<00:02:18.765>I'm <00:02:18.920>sure <00:02:19.076>there <00:02:19.231>are <00:02:19.387>many <00:02:19.542>of <00:02:19.698>you <00:02:19.853>now <00:02:20.009>thinking, <00:02:20.165>oh,

51
00:02:20.705 --> 00:02:22.985
<00:02:20.704>I <00:02:20.904>have <00:02:21.105>this <00:02:21.304>20-year-old <00:02:21.505>project, <00:02:21.704>which <00:02:21.904>is <00:02:22.105>fantastic,

52
00:02:23.645 --> 00:02:26.505
<00:02:23.645>but <00:02:23.800>in <00:02:23.956>the <00:02:24.111>corporate <00:02:24.267>life <00:02:24.422>cycle <00:02:24.578>of <00:02:24.733>projects, <00:02:24.889>things <00:02:25.045>tend

53
00:02:26.505 --> 00:02:27.665
<00:02:26.505>to <00:02:26.853>degrade <00:02:27.201>over <00:02:27.548>time.

54
00:02:27.975 --> 00:02:30.265
<00:02:27.975>When <00:02:28.150>something <00:02:28.325>is <00:02:28.500>new <00:02:28.674>and <00:02:28.850>shiny, <00:02:29.025>the <00:02:29.200>project <00:02:29.375>inception,

55
00:02:30.415 --> 00:02:31.505
<00:02:30.415>it's <00:02:30.660>all <00:02:30.905>happy <00:02:31.150>and <00:02:31.396>good.

56
00:02:31.785 --> 00:02:34.945
<00:02:31.785>Everyone's <00:02:31.960>joy <00:02:32.135>is <00:02:32.310>max. <00:02:32.484>Ease <00:02:32.660>of <00:02:32.835>development <00:02:33.010>is <00:02:33.185>highest.

57
00:02:35.525 --> 00:02:37.905
<00:02:35.525>As <00:02:35.700>time <00:02:35.875>goes <00:02:36.050>on, <00:02:36.225>you <00:02:36.400>have <00:02:36.575>some <00:02:36.750>initial <00:02:36.925>successes.

58
00:02:37.965 --> 00:02:41.505
<00:02:37.965>You <00:02:38.120>add <00:02:38.276>scope, <00:02:38.431>you <00:02:38.587>add <00:02:38.742>more <00:02:38.898>scope, <00:02:39.053>lots <00:02:39.209>of <00:02:39.365>scope.

59
00:02:42.205 --> 00:02:44.905
<00:02:42.204>As <00:02:42.380>the <00:02:42.554>project <00:02:42.730>gets <00:02:42.904>more <00:02:43.079>complex, <00:02:43.255>time <00:02:43.429>goes <00:02:43.605>on,

60
00:02:44.975 --> 00:02:49.365
<00:02:44.975>development <00:02:45.174>slows <00:02:45.375>down, <00:02:45.575>test <00:02:45.775>kept <00:02:45.975>flakey, <00:02:46.174>things <00:02:46.375>degrade.

61
00:02:52.745 --> 00:02:54.445
<00:02:52.745>One <00:02:52.978>of <00:02:53.211>the <00:02:53.445>big <00:02:53.678>problems <00:02:53.911>here <00:02:54.145>is

62
00:02:54.445 --> 00:02:58.125
<00:02:54.445>that <00:02:54.620>bad <00:02:54.795>builds <00:02:54.970>are <00:02:55.144>a <00:02:55.320>key <00:02:55.495>key <00:02:55.670>negative <00:02:55.845>thing

63
00:02:58.145 --> 00:03:01.485
<00:02:58.145>for <00:02:58.378>developers <00:02:58.611>on <00:02:58.845>old <00:02:59.078>flaky <00:02:59.311>monolith <00:02:59.545>applications.

64
00:03:01.995 --> 00:03:04.045
<00:03:01.995>When <00:03:02.170>you <00:03:02.345>have <00:03:02.520>a <00:03:02.695>slow <00:03:02.870>or <00:03:03.045>unstable <00:03:03.220>build <00:03:03.395>process,

65
00:03:04.505 --> 00:03:06.925
<00:03:04.505>you <00:03:04.785>have <00:03:05.065>infuriated <00:03:05.345>developers <00:03:05.625>which <00:03:05.905>results

66
00:03:06.985 --> 00:03:08.045
<00:03:06.985>in <00:03:07.462>slower <00:03:07.939>development.

67
00:03:08.665 --> 00:03:10.045
<00:03:08.665>You <00:03:09.078>have <00:03:09.493>more <00:03:09.906>dependencies,

68
00:03:10.075 --> 00:03:11.525
<00:03:10.075>therefore <00:03:10.401>you <00:03:10.727>have <00:03:11.053>more <00:03:11.380>sources

69
00:03:11.585 --> 00:03:12.805
<00:03:11.585>of <00:03:11.859>build, <00:03:12.134>test <00:03:12.408>and <00:03:12.683>stability.

70
00:03:13.145 --> 00:03:16.685
<00:03:13.145>If <00:03:13.285>your <00:03:13.425>front <00:03:13.565>end <00:03:13.705>say, <00:03:13.845>deals <00:03:13.985>with <00:03:14.125>a <00:03:14.265>code <00:03:14.405>evaluation <00:03:14.545>service

71
00:03:16.945 --> 00:03:19.285
<00:03:16.945>and <00:03:17.144>a <00:03:17.345>payment <00:03:17.545>service <00:03:17.745>and <00:03:17.945>a <00:03:18.144>user <00:03:18.345>service

72
00:03:19.345 --> 00:03:21.445
<00:03:19.345>and <00:03:19.578>all <00:03:19.811>these <00:03:20.045>other <00:03:20.278>different <00:03:20.511>services, <00:03:20.745>each

73
00:03:21.445 --> 00:03:23.045
<00:03:21.445>of <00:03:21.678>those <00:03:21.911>services <00:03:22.144>that <00:03:22.378>are <00:03:22.611>dependent <00:03:22.845>on

74
00:03:23.585 --> 00:03:25.725
<00:03:23.585>in <00:03:23.785>tests <00:03:23.985>might <00:03:24.185>cause <00:03:24.385>the <00:03:24.585>test <00:03:24.785>to <00:03:24.985>flake.

75
00:03:27.265 --> 00:03:30.205
<00:03:27.265>If <00:03:27.420>you <00:03:27.576>have, <00:03:27.731>let's <00:03:27.887>say, <00:03:28.042>a <00:03:28.198>20 <00:03:28.353>minutes <00:03:28.509>code <00:03:28.665>build

76
00:03:30.205 --> 00:03:33.045
<00:03:30.204>and <00:03:30.332>review <00:03:30.459>cycle <00:03:30.586>with <00:03:30.714>a <00:03:30.841>10 <00:03:30.968>minute <00:03:31.095>deploy <00:03:31.223>cycle <00:03:31.350>for <00:03:31.477>a <00:03:31.605>total

77
00:03:33.065 --> 00:03:36.085
<00:03:33.065>of <00:03:33.240>30 <00:03:33.415>minutes, <00:03:33.590>then <00:03:33.765>it <00:03:33.940>takes <00:03:34.115>you <00:03:34.290>30 <00:03:34.465>minutes

78
00:03:36.145 --> 00:03:38.165
<00:03:36.145>to <00:03:36.425>hot <00:03:36.705>fix <00:03:36.985>in <00:03:37.265>production, <00:03:37.545>uh,

79
00:03:38.165 --> 00:03:40.845
<00:03:38.165>which <00:03:38.320>can <00:03:38.476>be <00:03:38.631>really <00:03:38.787>annoying <00:03:38.942>if <00:03:39.098>say, <00:03:39.253>test <00:03:39.409>flakes <00:03:39.565>halfway

80
00:03:40.845 --> 00:03:42.485
<00:03:40.845>through, <00:03:41.078>and <00:03:41.311>you <00:03:41.545>have <00:03:41.778>to <00:03:42.011>restart <00:03:42.245>from

81
00:03:42.485 --> 00:03:43.685
<00:03:42.485>failed <00:03:42.755>in <00:03:43.025>the <00:03:43.295>build <00:03:43.565>process.

82
00:03:44.905 --> 00:03:46.925
<00:03:44.905>So <00:03:45.105>you <00:03:45.305>very <00:03:45.505>much <00:03:45.705>don't <00:03:45.905>wanna <00:03:46.105>have <00:03:46.305>bad

83
00:03:46.925 --> 00:03:47.765
<00:03:46.925>or <00:03:47.303>flaky <00:03:47.680>build

84
00:03:47.765 --> 00:03:52.325
<00:03:47.765>times <00:03:48.231>Visually <00:03:48.698>representing <00:03:49.165>this.

85
00:03:52.785 --> 00:03:55.885
<00:03:52.785>If <00:03:52.960>your <00:03:53.135>code <00:03:53.310>changes <00:03:53.484>impact <00:03:53.660>just <00:03:53.835>one <00:03:54.010>small <00:03:54.185>area

86
00:03:55.945 --> 00:03:59.085
<00:03:55.945>of <00:03:56.144>your <00:03:56.345>monolith, <00:03:56.545>oftentimes <00:03:56.745>you <00:03:56.945>would <00:03:57.144>still <00:03:57.345>have

87
00:03:59.085 --> 00:04:01.525
<00:03:59.085>to <00:03:59.260>rebuild <00:03:59.435>the <00:03:59.610>whole <00:03:59.785>monolith <00:03:59.960>area <00:04:00.135>A, <00:04:00.310>B, <00:04:00.485>C,

88
00:04:01.585 --> 00:04:03.125
<00:04:01.585>and <00:04:01.783>D <00:04:01.981>in <00:04:02.179>order <00:04:02.377>to <00:04:02.575>get <00:04:02.773>that <00:04:02.971>stuff

89
00:04:03.125 --> 00:04:05.285
<00:04:03.125>to <00:04:03.405>users, <00:04:03.685>which <00:04:03.965>is <00:04:04.245>not <00:04:04.525>ideal.

90
00:04:05.505 --> 00:04:07.165
<00:04:05.505>We <00:04:05.704>don't <00:04:05.905>wanna <00:04:06.105>have <00:04:06.305>to <00:04:06.505>rebuild <00:04:06.704>the <00:04:06.905>entire

91
00:04:07.165 --> 00:04:08.645
<00:04:07.165>monolith <00:04:07.355>in <00:04:07.545>order <00:04:07.735>to <00:04:07.926>get <00:04:08.116>it <00:04:08.306>to <00:04:08.497>users.

92
00:04:09.985 --> 00:04:11.725
<00:04:09.985>Now, <00:04:10.160>some <00:04:10.335>of <00:04:10.510>you <00:04:10.685>might <00:04:10.860>already <00:04:11.035>be <00:04:11.210>thinking, <00:04:11.385>well,

93
00:04:11.765 --> 00:04:13.205
<00:04:11.765>I <00:04:12.197>have <00:04:12.629>conditional <00:04:13.061>deploys

94
00:04:13.205 --> 00:04:16.085
<00:04:13.205>or <00:04:13.312>build <00:04:13.420>set <00:04:13.528>up <00:04:13.635>where <00:04:13.743>if <00:04:13.851>I <00:04:13.958>change <00:04:14.066>just <00:04:14.174>B, <00:04:14.281>then <00:04:14.389>we <00:04:14.497>don't <00:04:14.605>have

95
00:04:16.085 --> 00:04:18.285
<00:04:16.084>to <00:04:16.318>rebuild <00:04:16.551>A <00:04:16.784>through <00:04:17.018>C <00:04:17.251>and <00:04:17.484>D.

96
00:04:19.385 --> 00:04:20.485
<00:04:19.385>Now <00:04:19.550>I <00:04:19.714>have <00:04:19.880>a <00:04:20.045>hot <00:04:20.210>take <00:04:20.375>here.

97
00:04:20.765 --> 00:04:22.925
<00:04:20.765>I <00:04:20.940>think <00:04:21.115>that <00:04:21.289>that's <00:04:21.464>great, <00:04:21.640>but <00:04:21.815>that's <00:04:21.990>not <00:04:22.164>common

98
00:04:22.985 --> 00:04:25.045
<00:04:22.985>or <00:04:23.218>standard <00:04:23.451>for <00:04:23.685>a <00:04:23.918>lot <00:04:24.151>of <00:04:24.385>repositories

99
00:04:25.105 --> 00:04:26.285
<00:04:25.105>or <00:04:25.317>a <00:04:25.529>lot <00:04:25.742>of <00:04:25.954>team <00:04:26.167>projects.

100
00:04:26.945 --> 00:04:29.605
<00:04:26.945>So <00:04:27.100>I <00:04:27.256>think <00:04:27.411>conditional <00:04:27.567>mono <00:04:27.722>repo <00:04:27.878>builds, <00:04:28.033>which <00:04:28.189>allow <00:04:28.344>you

101
00:04:29.605 --> 00:04:33.285
<00:04:29.605>to <00:04:29.732>just <00:04:29.859>rebuild <00:04:29.986>parts <00:04:30.114>of <00:04:30.241>a <00:04:30.368>mono <00:04:30.495>repo, <00:04:30.623>which <00:04:30.750>is <00:04:30.877>a <00:04:31.005>repo

102
00:04:33.285 --> 00:04:35.405
<00:04:33.284>that <00:04:33.484>can <00:04:33.684>or <00:04:33.885>repository <00:04:34.085>that <00:04:34.284>contains <00:04:34.484>a <00:04:34.684>lot

103
00:04:35.405 --> 00:04:36.885
<00:04:35.405>of <00:04:36.070>smaller <00:04:36.736>applications.

104
00:04:37.495 --> 00:04:40.045
<00:04:37.495>We'll <00:04:37.650>be <00:04:37.806>one <00:04:37.961>of <00:04:38.117>the <00:04:38.272>next <00:04:38.428>huge <00:04:38.583>important <00:04:38.739>feature <00:04:38.895>sets

105
00:04:40.045 --> 00:04:41.605
<00:04:40.045>of <00:04:40.511>ci <00:04:40.978>cd <00:04:41.445>providers

106
00:04:41.745 --> 00:04:45.195
<00:04:41.745>and <00:04:41.920>build <00:04:42.095>management <00:04:42.270>packages <00:04:42.445>soon <00:04:42.620>in <00:04:42.795>the <00:04:42.970>front <00:04:43.145>end.

107
00:04:45.195 --> 00:04:47.395
<00:04:45.195>We <00:04:45.335>have <00:04:45.474>already <00:04:45.615>started <00:04:45.755>to <00:04:45.895>see <00:04:46.034>this <00:04:46.175>with <00:04:46.315>tools <00:04:46.455>like <00:04:46.594>Learner

108
00:04:47.395 --> 00:04:51.535
<00:04:47.395>and <00:04:47.674>Dex, <00:04:47.955>but <00:04:48.234>that's <00:04:48.515>not <00:04:48.794>ready.

109
00:04:52.115 --> 00:04:55.575
<00:04:52.115>And <00:04:52.242>if <00:04:52.369>you <00:04:52.496>set <00:04:52.624>up <00:04:52.751>a <00:04:52.878>common <00:04:53.005>say, <00:04:53.133>next <00:04:53.260>JS <00:04:53.387>application <00:04:53.515>today,

110
00:04:55.755 --> 00:04:58.295
<00:04:55.755>you <00:04:55.910>still <00:04:56.066>have <00:04:56.221>to <00:04:56.377>do <00:04:56.532>a <00:04:56.688>lot <00:04:56.843>of <00:04:56.999>builds, <00:04:57.155>uh,

111
00:04:58.325 --> 00:05:00.575
<00:04:58.325>with <00:04:58.558>only <00:04:58.791>partial <00:04:59.025>caching <00:04:59.258>from <00:04:59.491>previous <00:04:59.724>areas,

112
00:05:00.755 --> 00:05:03.415
<00:05:00.755>and <00:05:00.910>you <00:05:01.066>don't <00:05:01.221>have <00:05:01.377>good <00:05:01.532>built-in <00:05:01.688>workflow <00:05:01.843>support <00:05:01.999>per <00:05:02.155>se.

113
00:05:03.415 --> 00:05:06.055
<00:05:03.415>Only <00:05:03.590>running <00:05:03.765>tests <00:05:03.940>on <00:05:04.115>change <00:05:04.290>code <00:05:04.465>for <00:05:04.640>end-to-end <00:05:04.815>tests.

114
00:05:08.885 --> 00:05:11.285
<00:05:08.885>Introducing <00:05:09.118>micro <00:05:09.351>front <00:05:09.585>ends, <00:05:09.818>which <00:05:10.051>allow <00:05:10.284>you

115
00:05:11.285 --> 00:05:13.725
<00:05:11.285>to <00:05:11.460>split <00:05:11.635>your <00:05:11.810>front <00:05:11.985>end <00:05:12.160>by <00:05:12.335>areas <00:05:12.510>of <00:05:12.685>responsibility.

116
00:05:14.785 --> 00:05:17.445
<00:05:14.785>Now, <00:05:14.912>through <00:05:15.039>this, <00:05:15.166>I <00:05:15.294>like <00:05:15.421>to <00:05:15.548>think <00:05:15.675>of <00:05:15.803>them <00:05:15.930>as <00:05:16.057>an <00:05:16.185>analogy

117
00:05:17.585 --> 00:05:20.365
<00:05:17.585>for <00:05:17.740>microservices, <00:05:17.896>which <00:05:18.051>allow <00:05:18.207>you <00:05:18.362>to <00:05:18.518>split <00:05:18.673>up <00:05:18.829>your <00:05:18.984>backend

118
00:05:20.365 --> 00:05:22.205
<00:05:20.365>by <00:05:20.715>areas <00:05:21.065>of <00:05:21.415>fraud <00:05:21.765>responsibility.

119
00:05:23.745 --> 00:05:25.925
<00:05:23.745>Uh, <00:05:23.978>micro <00:05:24.211>front <00:05:24.445>ends <00:05:24.678>putting <00:05:24.911>it <00:05:25.145>nice

120
00:05:25.925 --> 00:05:29.005
<00:05:25.925>and <00:05:26.158>concisely <00:05:26.391>are <00:05:26.625>using <00:05:26.858>separate <00:05:27.091>individual <00:05:27.325>projects

121
00:05:29.205 --> 00:05:31.485
<00:05:29.205>for <00:05:29.438>portions <00:05:29.671>of <00:05:29.905>a <00:05:30.138>front <00:05:30.371>end <00:05:30.604>application.

122
00:05:32.945 --> 00:05:36.885
<00:05:32.945>That's <00:05:33.295>our <00:05:33.645>definition <00:05:33.995>Now <00:05:34.344>instead

123
00:05:36.885 --> 00:05:39.605
<00:05:36.885>of <00:05:37.025>this <00:05:37.164>old <00:05:37.305>architecture <00:05:37.445>where <00:05:37.585>we <00:05:37.724>have <00:05:37.865>to <00:05:38.005>rebuild <00:05:38.145>the <00:05:38.284>world,

124
00:05:39.745 --> 00:05:43.085
<00:05:39.745>as <00:05:39.885>they <00:05:40.025>say, <00:05:40.165>to <00:05:40.305>get <00:05:40.445>a <00:05:40.585>single <00:05:40.725>monolith <00:05:40.865>deployed <00:05:41.005>to <00:05:41.145>users.

125
00:05:44.195 --> 00:05:45.745
<00:05:44.195>Micro <00:05:44.543>front <00:05:44.892>ends <00:05:45.241>allow <00:05:45.590>you

126
00:05:45.745 --> 00:05:47.865
<00:05:45.745>to <00:05:45.945>just <00:05:46.145>rebuild <00:05:46.345>one <00:05:46.545>little <00:05:46.745>part <00:05:46.945>of <00:05:47.145>it.

127
00:05:48.365 --> 00:05:50.105
<00:05:48.365>If <00:05:48.598>you <00:05:48.831>have, <00:05:49.065>let's <00:05:49.298>say, <00:05:49.531>area <00:05:49.765>B,

128
00:05:50.205 --> 00:05:52.465
<00:05:50.205>that's <00:05:50.484>its <00:05:50.765>own <00:05:51.044>little <00:05:51.325>discreet <00:05:51.604>application,

129
00:05:52.845 --> 00:05:55.465
<00:05:52.845>so <00:05:52.985>making <00:05:53.125>code <00:05:53.265>change <00:05:53.405>to <00:05:53.545>area <00:05:53.685>B <00:05:53.825>only <00:05:53.965>has <00:05:54.105>to <00:05:54.245>go

130
00:05:55.465 --> 00:05:58.965
<00:05:55.465>through <00:05:55.640>the <00:05:55.815>builds <00:05:55.990>test <00:05:56.165>deploy <00:05:56.340>workflow <00:05:56.515>for <00:05:56.690>that <00:05:56.865>one,

131
00:05:58.965 --> 00:06:01.375
<00:05:58.965>application <00:06:00.365>improvements

132
00:06:04.435 --> 00:06:09.335
<00:06:04.435>as <00:06:04.562>an <00:06:04.689>analogy, <00:06:04.816>the <00:06:04.944>HTP <00:06:05.071>request <00:06:05.198>that <00:06:05.325>is <00:06:05.453>then <00:06:05.580>sent <00:06:05.707>only <00:06:05.835>has

133
00:06:09.335 --> 00:06:11.375
<00:06:09.335>to <00:06:09.614>go <00:06:09.895>through <00:06:10.174>the, <00:06:10.455>uh, <00:06:10.734>logic

134
00:06:11.435 --> 00:06:15.665
<00:06:11.435>and <00:06:11.590>handling <00:06:11.746>the <00:06:11.901>request <00:06:12.057>workflow <00:06:12.212>for <00:06:12.368>application <00:06:12.523>B <00:06:12.679>in <00:06:12.835>order

135
00:06:15.665 --> 00:06:16.905
<00:06:15.665>to <00:06:15.851>get <00:06:16.037>a <00:06:16.223>response <00:06:16.409>from <00:06:16.594>the <00:06:16.780>user,

136
00:06:17.315 --> 00:06:20.585
<00:06:17.315>which <00:06:17.455>means <00:06:17.594>not <00:06:17.735>only <00:06:17.875>are <00:06:18.015>your <00:06:18.155>build <00:06:18.295>test <00:06:18.435>deploy <00:06:18.575>cycles <00:06:18.715>much

137
00:06:20.585 --> 00:06:22.865
<00:06:20.585>smaller, <00:06:20.818>if <00:06:21.051>you <00:06:21.284>have <00:06:21.518>small <00:06:21.751>discrete <00:06:21.984>packages,

138
00:06:23.205 --> 00:06:26.505
<00:06:23.205>you <00:06:23.360>also <00:06:23.516>have <00:06:23.671>request <00:06:23.827>handling <00:06:23.982>that <00:06:24.138>has <00:06:24.293>much <00:06:24.449>less <00:06:24.604>overhead.

139
00:06:27.575 --> 00:06:29.675
<00:06:27.575>Now, <00:06:27.808>practically, <00:06:28.041>you <00:06:28.275>might <00:06:28.508>be <00:06:28.741>thinking, <00:06:28.974>well,

140
00:06:29.775 --> 00:06:31.435
<00:06:29.775>my <00:06:30.054>application <00:06:30.335>is <00:06:30.614>well <00:06:30.895>split <00:06:31.174>up.

141
00:06:31.475 --> 00:06:34.435
<00:06:31.475>I <00:06:31.650>only <00:06:31.825>request <00:06:32.000>details <00:06:32.175>from <00:06:32.350>services <00:06:32.525>in <00:06:32.700>the <00:06:32.875>requests

142
00:06:34.435 --> 00:06:37.275
<00:06:34.435>that <00:06:34.610>need <00:06:34.785>them, <00:06:34.960>and <00:06:35.135>that's <00:06:35.310>fantastic, <00:06:35.485>good <00:06:35.660>for <00:06:35.835>you.

143
00:06:37.825 --> 00:06:39.955
<00:06:37.825>That <00:06:37.980>can <00:06:38.136>be <00:06:38.291>really <00:06:38.447>hard <00:06:38.602>to <00:06:38.758>set <00:06:38.913>up <00:06:39.069>at <00:06:39.224>scale.

144
00:06:40.145 --> 00:06:41.995
<00:06:40.145>When <00:06:40.378>you <00:06:40.611>have <00:06:40.844>the <00:06:41.078>the <00:06:41.311>monolith <00:06:41.544>workflow,

145
00:06:42.295 --> 00:06:44.315
<00:06:42.295>you <00:06:42.528>might <00:06:42.761>be <00:06:42.995>really <00:06:43.228>tempted <00:06:43.461>to <00:06:43.695>say,

146
00:06:44.575 --> 00:06:47.515
<00:06:44.575>add <00:06:44.808>unified <00:06:45.041>request <00:06:45.275>handlers <00:06:45.508>to <00:06:45.741>all <00:06:45.974>requests

147
00:06:47.545 --> 00:06:49.475
<00:06:47.545>that <00:06:47.778>load <00:06:48.011>a <00:06:48.245>user <00:06:48.478>and <00:06:48.711>check <00:06:48.945>something,

148
00:06:49.935 --> 00:06:51.795
<00:06:49.935>and <00:06:50.215>that's <00:06:50.495>maybe <00:06:50.775>not <00:06:51.055>super <00:06:51.335>necessary

149
00:06:51.815 --> 00:06:53.355
<00:06:51.815>for <00:06:52.092>all <00:06:52.369>parts <00:06:52.646>of <00:06:52.923>your <00:06:53.201>application.

150
00:06:54.055 --> 00:06:56.835
<00:06:54.055>And <00:06:54.195>when <00:06:54.335>you <00:06:54.475>have <00:06:54.615>a <00:06:54.755>bajillion <00:06:54.895>different <00:06:55.035>things <00:06:55.175>in <00:06:55.315>the <00:06:55.455>same

151
00:06:56.835 --> 00:06:59.795
<00:06:56.835>application, <00:06:57.034>it's <00:06:57.234>just <00:06:57.435>not <00:06:57.635>scalable <00:06:57.835>to <00:06:58.034>figure <00:06:58.234>out

152
00:06:59.895 --> 00:07:02.555
<00:06:59.895>for <00:07:00.070>each <00:07:00.245>area <00:07:00.419>which <00:07:00.594>things <00:07:00.770>are <00:07:00.945>necessary <00:07:01.120>or <00:07:01.294>not.

153
00:07:03.415 --> 00:07:04.875
<00:07:03.415>Um, <00:07:04.072>let's <00:07:04.729>say

154
00:07:04.875 --> 00:07:07.195
<00:07:04.875>that <00:07:05.030>you <00:07:05.186>have <00:07:05.341>a <00:07:05.497>large <00:07:05.652>RA <00:07:05.808>Ruby <00:07:05.963>on <00:07:06.119>Rails <00:07:06.275>application.

155
00:07:07.575 --> 00:07:08.675
<00:07:07.575>Do <00:07:07.716>you <00:07:07.857>really <00:07:07.999>need <00:07:08.140>to <00:07:08.282>load <00:07:08.423>the <00:07:08.565>user

156
00:07:08.675 --> 00:07:09.755
<00:07:08.675>object <00:07:08.999>for <00:07:09.323>every <00:07:09.647>request?

157
00:07:10.255 --> 00:07:14.115
<00:07:10.255>Do <00:07:10.410>you <00:07:10.566>have <00:07:10.721>ways <00:07:10.877>to <00:07:11.032>determine <00:07:11.188>for <00:07:11.343>each <00:07:11.499>request <00:07:11.655>path,

158
00:07:14.115 --> 00:07:15.195
<00:07:14.115>whether <00:07:14.601>that's <00:07:15.087>necessary?

159
00:07:15.735 --> 00:07:17.155
<00:07:15.735>All <00:07:15.948>these <00:07:16.161>little <00:07:16.374>things <00:07:16.587>take <00:07:16.799>up <00:07:17.013>time

160
00:07:17.155 --> 00:07:20.315
<00:07:17.155>and <00:07:17.330>add <00:07:17.505>complexity, <00:07:17.679>which <00:07:17.854>is <00:07:18.030>why <00:07:18.205>having <00:07:18.380>small <00:07:18.554>discrete

161
00:07:20.315 --> 00:07:23.675
<00:07:20.315>applications <00:07:20.470>for <00:07:20.626>each <00:07:20.781>request <00:07:20.937>route <00:07:21.092>can <00:07:21.248>be <00:07:21.403>really <00:07:21.559>nice <00:07:21.715>for,

162
00:07:23.735 --> 00:07:24.835
<00:07:23.735>for <00:07:24.065>keeping <00:07:24.395>things <00:07:24.724>simple.

163
00:07:29.115 --> 00:07:30.235
<00:07:29.115>A <00:07:29.259>lot <00:07:29.403>of <00:07:29.547>this <00:07:29.691>is <00:07:29.835>made <00:07:29.979>more <00:07:30.123>easy

164
00:07:30.235 --> 00:07:32.755
<00:07:30.235>by <00:07:30.468>something <00:07:30.701>called <00:07:30.935>edge <00:07:31.168>computing, <00:07:31.401>which <00:07:31.635>is

165
00:07:32.755 --> 00:07:34.835
<00:07:32.755>where <00:07:32.988>we <00:07:33.221>put <00:07:33.455>application <00:07:33.688>logic <00:07:33.921>on <00:07:34.155>fast

166
00:07:34.835 --> 00:07:35.995
<00:07:34.835>servers <00:07:35.183>near <00:07:35.531>the <00:07:35.879>users.

167
00:07:36.845 --> 00:07:39.625
<00:07:36.845>And <00:07:37.000>by <00:07:37.156>near <00:07:37.311>users, <00:07:37.467>I <00:07:37.622>do <00:07:37.778>mean <00:07:37.933>geographically <00:07:38.089>near <00:07:38.245>users.

168
00:07:40.065 --> 00:07:43.185
<00:07:40.065>Providers <00:07:40.240>such <00:07:40.415>as <00:07:40.590>CloudFlare <00:07:40.765>have <00:07:40.940>servers <00:07:41.115>all <00:07:41.290>over <00:07:41.465>the

169
00:07:43.185 --> 00:07:46.105
<00:07:43.185>world, <00:07:43.360>which <00:07:43.535>you <00:07:43.710>can <00:07:43.885>shove <00:07:44.060>your <00:07:44.235>application <00:07:44.410>logic <00:07:44.585>onto

170
00:07:46.205 --> 00:07:49.065
<00:07:46.205>and <00:07:46.344>let <00:07:46.484>it <00:07:46.625>run <00:07:46.765>to <00:07:46.905>handle <00:07:47.044>requests <00:07:47.185>much <00:07:47.325>closer <00:07:47.465>to <00:07:47.604>users

171
00:07:49.165 --> 00:07:50.385
<00:07:49.165>for <00:07:49.714>lower <00:07:50.263>lag.

172
00:07:52.725 --> 00:07:54.585
<00:07:52.725>And <00:07:52.958>this <00:07:53.191>is <00:07:53.425>important <00:07:53.658>because <00:07:53.891>head <00:07:54.125>workers

173
00:07:54.795 --> 00:07:58.905
<00:07:54.795>among <00:07:54.950>other <00:07:55.106>things, <00:07:55.261>allow <00:07:55.417>us <00:07:55.572>to, <00:07:55.728>uh, <00:07:55.883>direct <00:07:56.039>requests <00:07:56.195>and

174
00:07:58.905 --> 00:08:00.865
<00:07:58.905>therefore <00:07:59.255>responses <00:07:59.604>to <00:07:59.955>different <00:08:00.304>applications.

175
00:08:01.485 --> 00:08:02.945
<00:08:01.485>Uh, <00:08:01.672>the <00:08:01.860>way <00:08:02.048>we <00:08:02.235>use <00:08:02.423>that <00:08:02.611>code <00:08:02.799>academy,

176
00:08:02.945 --> 00:08:04.345
<00:08:02.945>which <00:08:03.155>we'll <00:08:03.365>see <00:08:03.575>in <00:08:03.785>a <00:08:03.995>slide, <00:08:04.205>is

177
00:08:04.345 --> 00:08:06.545
<00:08:04.345>that <00:08:04.625>we <00:08:04.905>have <00:08:05.185>a <00:08:05.465>route-based <00:08:05.745>routing

178
00:08:06.675 --> 00:08:10.145
<00:08:06.675>where <00:08:06.830>let's <00:08:06.986>say <00:08:07.141>the <00:08:07.297>blog <00:08:07.452>goes <00:08:07.608>to <00:08:07.763>our <00:08:07.919>blog <00:08:08.075>application

179
00:08:10.565 --> 00:08:13.745
<00:08:10.565>or <00:08:10.720>the <00:08:10.876>static <00:08:11.031>sites <00:08:11.187>that <00:08:11.342>we <00:08:11.498>use <00:08:11.653>for <00:08:11.809>marketing, <00:08:11.965>go

180
00:08:13.745 --> 00:08:15.265
<00:08:13.745>to <00:08:14.087>the <00:08:14.429>static <00:08:14.771>sites <00:08:15.113>application.

181
00:08:16.165 --> 00:08:17.345
<00:08:16.165>Now, <00:08:16.342>in <00:08:16.519>theory, <00:08:16.696>you <00:08:16.873>could <00:08:17.050>have <00:08:17.227>your

182
00:08:17.345 --> 00:08:18.385
<00:08:17.345>own <00:08:17.657>application <00:08:17.969>for <00:08:18.281>this.

183
00:08:18.385 --> 00:08:21.065
<00:08:18.385>You <00:08:18.525>could <00:08:18.664>have <00:08:18.805>a <00:08:18.945>your <00:08:19.085>own <00:08:19.224>custom <00:08:19.365>hosted <00:08:19.505>app <00:08:19.645>at <00:08:19.784>Amazon

184
00:08:21.125 --> 00:08:22.505
<00:08:21.125>or <00:08:21.435>whatever <00:08:21.746>your <00:08:22.056>provider <00:08:22.367>is.

185
00:08:22.925 --> 00:08:24.225
<00:08:22.925>But <00:08:23.159>one <00:08:23.393>of <00:08:23.627>the <00:08:23.861>key <00:08:24.095>advantages

186
00:08:24.225 --> 00:08:27.065
<00:08:24.225>and <00:08:24.365>innovations <00:08:24.505>of <00:08:24.645>edge <00:08:24.785>workers <00:08:24.925>is <00:08:25.065>that <00:08:25.205>they're <00:08:25.345>on <00:08:25.485>the <00:08:25.625>edge,

187
00:08:27.065 --> 00:08:28.705
<00:08:27.065>they're <00:08:27.531>fast, <00:08:27.998>they're <00:08:28.465>speedy.

188
00:08:29.165 --> 00:08:31.865
<00:08:29.165>So <00:08:29.320>instead <00:08:29.476>of <00:08:29.631>having <00:08:29.787>to <00:08:29.942>do <00:08:30.098>an <00:08:30.253>entire <00:08:30.409>application <00:08:30.565>request

189
00:08:32.265 --> 00:08:34.705
<00:08:32.265>response <00:08:32.420>cycle <00:08:32.576>where <00:08:32.731>it <00:08:32.887>goes <00:08:33.042>to <00:08:33.198>one <00:08:33.353>of <00:08:33.509>your <00:08:33.664>servers

190
00:08:34.705 --> 00:08:37.585
<00:08:34.705>and <00:08:34.845>then <00:08:34.985>gets <00:08:35.125>routed <00:08:35.265>to <00:08:35.405>another <00:08:35.545>one, <00:08:35.685>you <00:08:35.825>can <00:08:35.965>have <00:08:36.105>your

191
00:08:38.185 --> 00:08:39.305
<00:08:38.184>CDN <00:08:38.520>provider <00:08:38.857>do <00:08:39.193>that

192
00:08:39.305 --> 00:08:43.405
<00:08:39.304>for <00:08:39.460>you <00:08:39.616>at <00:08:39.771>a <00:08:39.927>much <00:08:40.082>lower <00:08:40.238>application <00:08:40.393>performance <00:08:40.549>cost, <00:08:40.704>yay,

193
00:08:43.405 --> 00:08:45.205
<00:08:43.405>speed <00:08:43.871>performance <00:08:44.338>is <00:08:44.805>good.

194
00:08:47.635 --> 00:08:50.645
<00:08:47.635>Code <00:08:47.868>Academy, <00:08:48.101>uh, <00:08:48.335>oversimplifying <00:08:48.568>it <00:08:48.801>horribly <00:08:49.035>uses,

195
00:08:50.645 --> 00:08:53.365
<00:08:50.645>let's <00:08:50.878>say <00:08:51.111>these <00:08:51.345>four <00:08:51.578>main <00:08:51.811>frontend <00:08:52.045>applications.

196
00:08:53.905 --> 00:08:57.165
<00:08:53.905>And <00:08:54.060>in <00:08:54.216>order <00:08:54.371>we <00:08:54.527>route <00:08:54.682>based <00:08:54.838>off <00:08:54.993>the <00:08:55.149>URL <00:08:55.305>catalog

197
00:08:57.345 --> 00:08:59.045
<00:08:57.345>and <00:08:57.578>pricing <00:08:57.811>are <00:08:58.045>two <00:08:58.278>examples <00:08:58.511>of <00:08:58.745>pages

198
00:08:59.045 --> 00:09:01.045
<00:08:59.045>that <00:08:59.219>we <00:08:59.395>use <00:08:59.569>in <00:08:59.745>our <00:08:59.920>modern <00:09:00.094>X <00:09:00.270>js <00:09:00.444>app.

199
00:09:01.385 --> 00:09:04.965
<00:09:01.385>So <00:09:01.525>if <00:09:01.665>you <00:09:01.805>were <00:09:01.944>to <00:09:02.085>go <00:09:02.225>to <00:09:02.365>code <00:09:02.505>academy.com/catalog <00:09:02.645>right <00:09:02.785>now,

200
00:09:05.385 --> 00:09:08.325
<00:09:05.385>you <00:09:05.618>the <00:09:05.851>enterprising <00:09:06.085>audience <00:09:06.318>individual, <00:09:06.551>you <00:09:06.785>would

201
00:09:08.865 --> 00:09:10.165
<00:09:08.865>see <00:09:09.157>a <00:09:09.450>next <00:09:09.742>JS <00:09:10.035>application,

202
00:09:10.725 --> 00:09:12.085
<00:09:10.725>although <00:09:10.861>actually <00:09:10.997>I <00:09:11.133>think <00:09:11.269>it <00:09:11.405>hasn't <00:09:11.541>been <00:09:11.677>rolled <00:09:11.813>out <00:09:11.949>yet.

203
00:09:12.085 --> 00:09:14.925
<00:09:12.085>So <00:09:12.285>let's <00:09:12.485>just <00:09:12.685>go <00:09:12.885>with <00:09:13.085>pricing <00:09:13.285>code <00:09:13.485>cabinet.com/pricing

204
00:09:15.075 --> 00:09:16.325
<00:09:15.075>catalog <00:09:15.637>coming <00:09:16.200>soon.

205
00:09:17.225 --> 00:09:19.805
<00:09:17.225>Our <00:09:17.365>blog <00:09:17.505>is <00:09:17.645>on <00:09:17.785>Ghost, <00:09:17.925>which <00:09:18.065>is <00:09:18.205>an <00:09:18.345>old <00:09:18.485>blog <00:09:18.625>provider.

206
00:09:20.225 --> 00:09:21.725
<00:09:20.225>We <00:09:20.495>have <00:09:20.765>this <00:09:21.035>business <00:09:21.305>reporting <00:09:21.575>app,

207
00:09:21.985 --> 00:09:24.125
<00:09:21.985>and <00:09:22.140>then <00:09:22.296>anything <00:09:22.451>that <00:09:22.607>doesn't <00:09:22.762>match <00:09:22.918>any <00:09:23.073>of <00:09:23.229>those <00:09:23.385>goes

208
00:09:24.125 --> 00:09:26.325
<00:09:24.125>to <00:09:24.358>our <00:09:24.591>legacy <00:09:24.825>Ruby <00:09:25.058>on <00:09:25.291>Rails <00:09:25.525>application.

209
00:09:26.905 --> 00:09:29.965
<00:09:26.905>So <00:09:27.138>today, <00:09:27.371>code <00:09:27.605>cabinet.com/ <00:09:27.838>let's <00:09:28.071>say <00:09:28.305>catalog

210
00:09:32.945 --> 00:09:34.445
<00:09:32.945>now <00:09:33.137>to <00:09:33.330>the <00:09:33.523>user, <00:09:33.716>this <00:09:33.909>is <00:09:34.102>all <00:09:34.295>seamless.

211
00:09:34.665 --> 00:09:36.685
<00:09:34.665>It <00:09:34.898>seems <00:09:35.131>like <00:09:35.365>it's <00:09:35.598>just <00:09:35.831>Code <00:09:36.064>Academy,

212
00:09:37.105 --> 00:09:39.005
<00:09:37.105>but <00:09:37.338>to <00:09:37.571>us <00:09:37.805>as <00:09:38.038>the <00:09:38.271>application <00:09:38.505>developers,

213
00:09:39.025 --> 00:09:41.325
<00:09:39.025>we <00:09:39.199>have <00:09:39.375>unique <00:09:39.550>applications <00:09:39.725>set <00:09:39.900>up <00:09:40.074>to <00:09:40.250>handle <00:09:40.425>each

214
00:09:41.325 --> 00:09:43.765
<00:09:41.325>of <00:09:41.480>these <00:09:41.636>routes, <00:09:41.791>which <00:09:41.947>means <00:09:42.102>that <00:09:42.258>people <00:09:42.413>who <00:09:42.569>work <00:09:42.725>on,

215
00:09:43.765 --> 00:09:45.565
<00:09:43.765>let's <00:09:43.998>say <00:09:44.231>the <00:09:44.465>ghost <00:09:44.698>blog, <00:09:44.931>don't <00:09:45.165>have

216
00:09:45.565 --> 00:09:46.885
<00:09:45.565>to <00:09:45.802>butt <00:09:46.040>heads <00:09:46.277>on <00:09:46.515>code <00:09:46.753>standards

217
00:09:46.885 --> 00:09:49.605
<00:09:46.885>and <00:09:47.060>hydration <00:09:47.235>techniques <00:09:47.410>with <00:09:47.585>people <00:09:47.760>who <00:09:47.935>work <00:09:48.110>on, <00:09:48.285>say,

218
00:09:49.605 --> 00:09:50.765
<00:09:49.605>the <00:09:49.953>business <00:09:50.301>reporting <00:09:50.649>tool.

219
00:09:54.275 --> 00:09:55.575
<00:09:54.275>And <00:09:54.470>that's <00:09:54.665>a <00:09:54.860>trade <00:09:55.055>off <00:09:55.250>right <00:09:55.445>there.

220
00:09:56.425 --> 00:09:58.455
<00:09:56.425>There <00:09:56.704>are <00:09:56.984>trade-offs <00:09:57.265>to <00:09:57.545>every <00:09:57.824>flow

221
00:09:58.475 --> 00:10:02.015
<00:09:58.475>and <00:09:58.675>architecture <00:09:58.875>microservices <00:09:59.075>on <00:09:59.275>the <00:09:59.475>backend, <00:09:59.675>for <00:09:59.875>example,

222
00:10:02.085 --> 00:10:03.175
<00:10:02.085>also <00:10:02.412>have <00:10:02.739>their <00:10:03.065>trade-offs.

223
00:10:03.175 --> 00:10:04.735
<00:10:03.175>They <00:10:03.375>can <00:10:03.574>be <00:10:03.775>hard <00:10:03.974>to <00:10:04.175>coordinate <00:10:04.375>data <00:10:04.574>flow

224
00:10:04.735 --> 00:10:08.335
<00:10:04.735>between <00:10:04.935>them <00:10:05.135>dependencies, <00:10:05.335>uh, <00:10:05.535>one <00:10:05.735>are <00:10:05.935>the <00:10:06.135>trade-offs

225
00:10:08.335 --> 00:10:11.855
<00:10:08.335>for <00:10:08.535>these <00:10:08.735>micro <00:10:08.935>frontend <00:10:09.135>microservices <00:10:09.335>is <00:10:09.535>the <00:10:09.735>same.

226
00:10:11.915 --> 00:10:14.415
<00:10:11.915>You <00:10:12.115>have <00:10:12.314>to <00:10:12.515>maintain <00:10:12.714>duplicate, <00:10:12.915>build <00:10:13.115>and <00:10:13.314>test

227
00:10:14.515 --> 00:10:16.055
<00:10:14.515>and <00:10:14.746>deploy <00:10:14.977>flows <00:10:15.208>for <00:10:15.439>all <00:10:15.670>your <00:10:15.901>apps.

228
00:10:16.675 --> 00:10:18.575
<00:10:16.675>So <00:10:16.849>I <00:10:17.025>sure <00:10:17.199>hope <00:10:17.375>you <00:10:17.550>have <00:10:17.724>those <00:10:17.900>things <00:10:18.074>standardized

229
00:10:18.635 --> 00:10:19.735
<00:10:18.635>across <00:10:19.130>your <00:10:19.625>organization.

230
00:10:21.285 --> 00:10:22.775
<00:10:21.285>Furthermore, <00:10:21.955>code <00:10:22.626>standards

231
00:10:22.775 --> 00:10:24.575
<00:10:22.775>and <00:10:22.949>team <00:10:23.125>knowledge <00:10:23.300>may <00:10:23.475>grow <00:10:23.650>outta <00:10:23.824>sync <00:10:24.000>between <00:10:24.175>them.

232
00:10:24.995 --> 00:10:27.415
<00:10:24.995>One <00:10:25.150>thing <00:10:25.306>we're <00:10:25.461>struggling <00:10:25.617>with <00:10:25.772>at <00:10:25.928>Code <00:10:26.083>Academy <00:10:26.239>that <00:10:26.395>we've

233
00:10:27.975 --> 00:10:30.375
<00:10:27.975>recently <00:10:28.150>tried <00:10:28.325>to <00:10:28.500>make <00:10:28.675>inroads <00:10:28.850>on <00:10:29.025>is <00:10:29.200>that, <00:10:29.375>uh,

234
00:10:30.395 --> 00:10:32.495
<00:10:30.395>it <00:10:30.535>can <00:10:30.675>be <00:10:30.814>hard <00:10:30.954>for <00:10:31.095>teams <00:10:31.235>to <00:10:31.375>signal <00:10:31.515>what <00:10:31.655>they're <00:10:31.795>doing

235
00:10:32.495 --> 00:10:34.975
<00:10:32.495>to <00:10:32.622>each <00:10:32.749>other <00:10:32.876>if <00:10:33.004>they <00:10:33.131>no <00:10:33.258>longer <00:10:33.385>work <00:10:33.513>in <00:10:33.640>the <00:10:33.767>same <00:10:33.895>repository.

236
00:10:36.155 --> 00:10:38.375
<00:10:36.155>Uh, <00:10:36.388>things <00:10:36.621>like <00:10:36.855>Slack <00:10:37.088>channels <00:10:37.321>for <00:10:37.555>updates

237
00:10:38.435 --> 00:10:41.535
<00:10:38.435>or <00:10:38.609>dedicated <00:10:38.785>email <00:10:38.959>post <00:10:39.135>groups <00:10:39.310>can <00:10:39.484>be <00:10:39.660>really <00:10:39.834>useful

238
00:10:41.535 --> 00:10:43.895
<00:10:41.535>for <00:10:41.709>letting <00:10:41.885>teams <00:10:42.060>know <00:10:42.235>these <00:10:42.410>are <00:10:42.584>the <00:10:42.760>new <00:10:42.935>standards

239
00:10:43.955 --> 00:10:45.775
<00:10:43.955>or <00:10:44.155>these <00:10:44.355>are <00:10:44.555>the <00:10:44.755>things <00:10:44.955>we're <00:10:45.155>releasing <00:10:45.355>today.

240
00:10:50.015 --> 00:10:53.275
<00:10:50.015>But <00:10:50.155>some <00:10:50.295>of <00:10:50.435>the <00:10:50.574>advantages <00:10:50.715>of <00:10:50.855>micro <00:10:50.995>front <00:10:51.135>ends <00:10:51.275>could <00:10:51.415>be

241
00:10:53.275 --> 00:10:54.835
<00:10:53.275>that <00:10:53.475>you <00:10:53.675>can <00:10:53.875>pick <00:10:54.074>and <00:10:54.275>choose <00:10:54.475>which <00:10:54.675>type

242
00:10:54.835 --> 00:10:56.395
<00:10:54.835>of <00:10:55.185>generated <00:10:55.535>pages <00:10:55.885>you <00:10:56.235>want

243
00:10:56.575 --> 00:10:58.435
<00:10:56.575>for <00:10:56.855>each <00:10:57.135>area <00:10:57.415>of <00:10:57.695>your <00:10:57.975>application.

244
00:11:00.845 --> 00:11:01.915
<00:11:00.845>Let's <00:11:01.037>talk <00:11:01.230>a <00:11:01.422>little <00:11:01.615>bit <00:11:01.808>about

245
00:11:01.975 --> 00:11:04.315
<00:11:01.975>how <00:11:02.150>client <00:11:02.325>pages <00:11:02.500>get <00:11:02.675>rendered <00:11:02.850>by <00:11:03.025>the <00:11:03.200>front <00:11:03.375>ends.

246
00:11:05.425 --> 00:11:08.355
<00:11:05.425>I'll <00:11:05.564>show <00:11:05.704>a <00:11:05.844>visualization <00:11:05.984>for <00:11:06.125>each <00:11:06.265>of <00:11:06.405>these <00:11:06.545>in <00:11:06.685>a <00:11:06.824>second.

247
00:11:09.015 --> 00:11:10.715
<00:11:09.015>But <00:11:09.295>first, <00:11:09.574>just <00:11:09.855>a <00:11:10.135>quick <00:11:10.415>overview.

248
00:11:11.255 --> 00:11:14.155
<00:11:11.255>The <00:11:11.430>simplest <00:11:11.605>the <00:11:11.780>most <00:11:11.955>traditional <00:11:12.130>client <00:11:12.305>page <00:11:12.480>using <00:11:12.655>modern

249
00:11:14.155 --> 00:11:16.795
<00:11:14.155>technologies <00:11:14.435>such <00:11:14.714>as <00:11:14.995>React <00:11:15.275>js <00:11:15.555>is

250
00:11:16.795 --> 00:11:18.355
<00:11:16.795>what <00:11:17.074>I <00:11:17.354>call <00:11:17.635>client <00:11:17.915>on <00:11:18.194>demand.

251
00:11:18.975 --> 00:11:22.235
<00:11:18.975>Uh, <00:11:19.130>the <00:11:19.286>server <00:11:19.441>sends <00:11:19.597>down <00:11:19.752>a <00:11:19.908>vaguely <00:11:20.063>blank <00:11:20.219>HTML <00:11:20.375>page

252
00:11:22.235 --> 00:11:24.355
<00:11:22.235>with <00:11:22.468>just <00:11:22.701>some <00:11:22.935>script <00:11:23.168>tag, <00:11:23.401>slow <00:11:23.635>JavaScripts,

253
00:11:25.335 --> 00:11:27.995
<00:11:25.335>and <00:11:25.490>then <00:11:25.646>the <00:11:25.801>client <00:11:25.957>picks <00:11:26.112>up <00:11:26.268>on <00:11:26.423>those <00:11:26.579>JavaScript <00:11:26.735>tags

254
00:11:28.335 --> 00:11:31.875
<00:11:28.335>to <00:11:28.490>render <00:11:28.646>the <00:11:28.801>HDML <00:11:28.957>using <00:11:29.112>some <00:11:29.268>frameworks <00:11:29.423>such <00:11:29.579>as <00:11:29.735>React

255
00:11:31.935 --> 00:11:33.435
<00:11:31.935>or <00:11:32.385>View <00:11:32.834>or <00:11:33.285>ular.

256
00:11:35.215 --> 00:11:36.595
<00:11:35.215>Now, <00:11:35.525>people <00:11:35.836>writing <00:11:36.146>those <00:11:36.457>realize

257
00:11:36.595 --> 00:11:38.555
<00:11:36.595>that <00:11:36.828>sending <00:11:37.061>down <00:11:37.295>a <00:11:37.528>blank <00:11:37.761>HDML <00:11:37.995>page

258
00:11:38.575 --> 00:11:40.715
<00:11:38.575>for <00:11:38.775>your <00:11:38.975>first <00:11:39.175>response <00:11:39.375>is <00:11:39.575>not <00:11:39.775>super <00:11:39.975>great

259
00:11:40.715 --> 00:11:42.035
<00:11:40.715>for <00:11:41.309>application <00:11:41.903>performance.

260
00:11:42.035 --> 00:11:43.475
<00:11:42.035>What <00:11:42.358>happened <00:11:42.683>to <00:11:43.007>HTML <00:11:43.331>pages?

261
00:11:44.055 --> 00:11:46.155
<00:11:44.055>So <00:11:44.288>now <00:11:44.521>we <00:11:44.755>have <00:11:44.988>server <00:11:45.221>side <00:11:45.454>rendering

262
00:11:46.155 --> 00:11:50.595
<00:11:46.155>or <00:11:46.310>server <00:11:46.466>on <00:11:46.621>demand <00:11:46.777>where <00:11:46.932>when <00:11:47.088>the <00:11:47.243>response, <00:11:47.399>excuse <00:11:47.555>me,

263
00:11:50.595 --> 00:11:54.165
<00:11:50.595>when <00:11:50.735>a <00:11:50.875>request <00:11:51.015>comes <00:11:51.155>in, <00:11:51.295>the <00:11:51.435>server <00:11:51.575>first <00:11:51.715>generates <00:11:51.855>the <00:11:51.995>HTML

264
00:11:54.165 --> 00:11:55.925
<00:11:54.165>that <00:11:54.398>would <00:11:54.631>be <00:11:54.865>rendered <00:11:55.098>by <00:11:55.331>that <00:11:55.564>application.

265
00:11:56.065 --> 00:11:58.205
<00:11:56.065>Say <00:11:56.345>React <00:11:56.625>sends <00:11:56.905>that <00:11:57.185>down <00:11:57.465>along

266
00:11:58.205 --> 00:12:00.565
<00:11:58.205>with <00:11:58.438>the <00:11:58.671>initial <00:11:58.905>script <00:11:59.138>tag, <00:11:59.371>slow <00:11:59.605>JavaScripts.

267
00:12:00.625 --> 00:12:02.125
<00:12:00.625>So <00:12:00.850>we <00:12:01.075>get <00:12:01.300>a <00:12:01.525>first <00:12:01.750>page <00:12:01.975>view,

268
00:12:02.125 --> 00:12:04.325
<00:12:02.125>which <00:12:02.405>has <00:12:02.685>the <00:12:02.965>initial <00:12:03.245>page <00:12:03.525>contents,

269
00:12:04.625 --> 00:12:06.605
<00:12:04.625>and <00:12:04.800>then <00:12:04.975>the <00:12:05.150>client <00:12:05.325>does <00:12:05.500>what's <00:12:05.675>called <00:12:05.850>a <00:12:06.025>hydration,

270
00:12:06.695 --> 00:12:09.565
<00:12:06.695>which <00:12:06.870>is <00:12:07.045>running <00:12:07.220>the <00:12:07.395>JavaScript, <00:12:07.570>picking <00:12:07.745>up <00:12:07.920>the <00:12:08.095>HTML

271
00:12:09.585 --> 00:12:10.965
<00:12:09.585>and <00:12:09.895>then <00:12:10.206>making <00:12:10.516>it <00:12:10.827>interactive.

272
00:12:14.345 --> 00:12:16.805
<00:12:14.345>Now, <00:12:14.578>furthermore, <00:12:14.811>for <00:12:15.045>performance, <00:12:15.278>people <00:12:15.511>have <00:12:15.745>realized

273
00:12:16.835 --> 00:12:20.325
<00:12:16.835>that <00:12:17.010>running <00:12:17.185>an <00:12:17.360>entire <00:12:17.535>application <00:12:17.710>every <00:12:17.885>time <00:12:18.060>there's <00:12:18.235>a

274
00:12:20.325 --> 00:12:22.645
<00:12:20.325>request <00:12:20.525>can <00:12:20.725>be <00:12:20.925>slow <00:12:21.125>and <00:12:21.325>painful <00:12:21.525>for <00:12:21.725>servers.

275
00:12:22.905 --> 00:12:25.205
<00:12:22.905>So <00:12:23.105>now <00:12:23.305>we <00:12:23.505>have <00:12:23.704>prebuilt <00:12:23.905>websites, <00:12:24.105>server <00:12:24.305>static

276
00:12:25.305 --> 00:12:29.485
<00:12:25.305>or <00:12:25.444>static <00:12:25.584>sites <00:12:25.724>where <00:12:25.864>if <00:12:26.005>a <00:12:26.145>page <00:12:26.285>can <00:12:26.425>be <00:12:26.564>catched <00:12:26.704>ahead

277
00:12:29.485 --> 00:12:33.245
<00:12:29.485>of <00:12:29.612>time, <00:12:29.739>we <00:12:29.866>do <00:12:29.994>so, <00:12:30.121>so <00:12:30.248>requests <00:12:30.375>only <00:12:30.503>receive <00:12:30.630>a <00:12:30.757>cached <00:12:30.885>version

278
00:12:33.265 --> 00:12:35.605
<00:12:33.265>of <00:12:33.405>the <00:12:33.545>page <00:12:33.685>instead <00:12:33.824>of <00:12:33.965>having <00:12:34.105>to <00:12:34.245>recreate <00:12:34.385>it <00:12:34.525>for <00:12:34.665>themselves.

279
00:12:37.615 --> 00:12:39.275
<00:12:37.615>That's <00:12:37.848>my <00:12:38.081>personal <00:12:38.315>favorite <00:12:38.548>of <00:12:38.781>the <00:12:39.015>three.

280
00:12:41.135 --> 00:12:42.795
<00:12:41.135>Now, <00:12:41.335>for <00:12:41.535>client <00:12:41.735>on <00:12:41.935>demand, <00:12:42.135>the <00:12:42.335>first <00:12:42.535>one,

281
00:12:43.345 --> 00:12:44.795
<00:12:43.345>what <00:12:43.671>happens <00:12:43.997>is <00:12:44.323>four <00:12:44.650>steps.

282
00:12:44.965 --> 00:12:46.355
<00:12:44.965>First, <00:12:45.215>a <00:12:45.465>client <00:12:45.715>requests <00:12:45.965>a <00:12:46.216>page,

283
00:12:46.745 --> 00:12:49.875
<00:12:46.745>then <00:12:46.920>the <00:12:47.095>server <00:12:47.270>sends <00:12:47.445>some <00:12:47.620>basic <00:12:47.795>HTML <00:12:47.970>and <00:12:48.145>JavaScript.

284
00:12:50.295 --> 00:12:51.715
<00:12:50.295>The <00:12:50.614>client <00:12:50.934>runs <00:12:51.253>that <00:12:51.573>JavaScript

285
00:12:51.715 --> 00:12:54.315
<00:12:51.715>and <00:12:51.870>then <00:12:52.026>renders <00:12:52.181>the <00:12:52.337>full <00:12:52.492>page <00:12:52.648>job <00:12:52.803>simple <00:12:52.959>and <00:12:53.115>easy.

286
00:12:54.775 --> 00:12:58.955
<00:12:54.775>That's <00:12:54.891>how <00:12:55.008>we <00:12:55.125>do <00:12:55.241>it. <00:12:55.358>If <00:12:55.475>you <00:12:55.591>wanna <00:12:55.708>add <00:12:55.824>in <00:12:55.941>some <00:12:56.058>fancy <00:12:56.175>server

287
00:12:58.985 --> 00:13:01.715
<00:12:58.985>side <00:12:59.160>rendering <00:12:59.335>or <00:12:59.510>SSR, <00:12:59.685>it's <00:12:59.860>a <00:13:00.035>little <00:13:00.210>more <00:13:00.385>complex.

288
00:13:02.695 --> 00:13:04.075
<00:13:02.695>The <00:13:03.005>client <00:13:03.316>requests <00:13:03.626>the <00:13:03.937>page,

289
00:13:04.415 --> 00:13:06.595
<00:13:04.415>the <00:13:04.615>server <00:13:04.814>then <00:13:05.015>computes <00:13:05.214>the <00:13:05.415>initial <00:13:05.615>DOM <00:13:05.814>layout

290
00:13:06.645 --> 00:13:07.995
<00:13:06.645>using <00:13:07.050>the <00:13:07.455>same <00:13:07.860>JavaScript.

291
00:13:08.695 --> 00:13:10.475
<00:13:08.695>The <00:13:08.928>server <00:13:09.161>sends <00:13:09.395>that <00:13:09.628>initial <00:13:09.861>DOM <00:13:10.095>layout

292
00:13:10.475 --> 00:13:12.075
<00:13:10.475>and <00:13:10.825>JavaScript <00:13:11.175>to <00:13:11.525>the <00:13:11.875>client.

293
00:13:12.615 --> 00:13:14.235
<00:13:12.615>The <00:13:12.848>client <00:13:13.081>then <00:13:13.315>receives <00:13:13.548>that <00:13:13.781>initial <00:13:14.015>layout

294
00:13:14.255 --> 00:13:16.035
<00:13:14.255>and <00:13:14.488>hydrates <00:13:14.721>it <00:13:14.955>with <00:13:15.188>the <00:13:15.421>full <00:13:15.655>JavaScript.

295
00:13:17.935 --> 00:13:20.235
<00:13:17.935>So <00:13:18.214>more <00:13:18.494>computing <00:13:18.775>in <00:13:19.055>your <00:13:19.334>servers,

296
00:13:20.735 --> 00:13:23.675
<00:13:20.735>but <00:13:20.968>faster <00:13:21.201>DOM <00:13:21.435>layout <00:13:21.668>for <00:13:21.901>your <00:13:22.135>clients.

297
00:13:24.895 --> 00:13:26.795
<00:13:24.895>And <00:13:25.175>then <00:13:25.454>lastly, <00:13:25.735>static <00:13:26.015>site <00:13:26.295>generation

298
00:13:27.045 --> 00:13:28.835
<00:13:27.045>where <00:13:27.245>the <00:13:27.444>things <00:13:27.645>are <00:13:27.844>prebuilt <00:13:28.045>ahead <00:13:28.245>of <00:13:28.444>time,

299
00:13:28.935 --> 00:13:30.515
<00:13:28.935>so <00:13:29.168>there's <00:13:29.401>no <00:13:29.635>computing <00:13:29.868>on <00:13:30.101>your <00:13:30.334>servers.

300
00:13:30.515 --> 00:13:33.755
<00:13:30.515>We <00:13:30.670>just <00:13:30.826>initially <00:13:30.981>go <00:13:31.137>send <00:13:31.292>down <00:13:31.448>the <00:13:31.603>initial <00:13:31.759>DOM <00:13:31.915>layout

301
00:13:34.015 --> 00:13:36.435
<00:13:34.015>and <00:13:34.248>JavaScript <00:13:34.481>in <00:13:34.715>the <00:13:34.948>form <00:13:35.181>of <00:13:35.415>HTML

302
00:13:36.455 --> 00:13:39.635
<00:13:36.455>and <00:13:36.610>scripts <00:13:36.766>tags, <00:13:36.921>which <00:13:37.077>then <00:13:37.232>the <00:13:37.388>client <00:13:37.543>can <00:13:37.699>pick <00:13:37.855>up

303
00:13:39.815 --> 00:13:41.355
<00:13:39.815>and <00:13:40.161>render <00:13:40.508>immediately <00:13:40.854>as <00:13:41.201>well.

304
00:13:44.655 --> 00:13:46.475
<00:13:44.655>So <00:13:45.005>again, <00:13:45.355>there <00:13:45.704>are <00:13:46.055>tradeoffs.

305
00:13:46.895 --> 00:13:49.275
<00:13:46.895>Um, <00:13:47.128>I <00:13:47.361>personally <00:13:47.595>really <00:13:47.828>like <00:13:48.061>static <00:13:48.295>sites

306
00:13:49.275 --> 00:13:51.835
<00:13:49.275>because <00:13:49.449>it's <00:13:49.625>super <00:13:49.800>fast <00:13:49.975>for <00:13:50.150>users <00:13:50.324>and <00:13:50.500>relatively <00:13:50.675>simple.

307
00:13:52.575 --> 00:13:54.635
<00:13:52.575>But <00:13:52.808>there <00:13:53.041>are <00:13:53.275>trade-offs, <00:13:53.508>there <00:13:53.741>are <00:13:53.975>pitfalls.

308
00:13:54.935 --> 00:13:58.195
<00:13:54.935>For <00:13:55.074>example, <00:13:55.214>um, <00:13:55.354>if <00:13:55.494>you <00:13:55.635>have <00:13:55.775>a <00:13:55.915>static <00:13:56.055>site, <00:13:56.194>that <00:13:56.334>means

309
00:13:58.195 --> 00:14:00.955
<00:13:58.195>that <00:13:58.335>you <00:13:58.475>can't <00:13:58.615>generate <00:13:58.755>large <00:13:58.895>portions <00:13:59.035>of <00:13:59.175>the <00:13:59.315>page <00:13:59.455>based <00:13:59.595>off

310
00:14:00.955 --> 00:14:03.155
<00:14:00.955>of <00:14:01.110>the <00:14:01.266>user <00:14:01.421>request <00:14:01.577>because <00:14:01.732>they're <00:14:01.888>built <00:14:02.043>ahead <00:14:02.199>of <00:14:02.355>time.

311
00:14:03.155 --> 00:14:05.435
<00:14:03.155>They <00:14:03.329>don't <00:14:03.505>have <00:14:03.680>any <00:14:03.855>visibility <00:14:04.030>into <00:14:04.204>the <00:14:04.380>user <00:14:04.555>request,

312
00:14:06.095 --> 00:14:07.955
<00:14:06.095>to <00:14:06.270>the <00:14:06.445>user <00:14:06.620>or <00:14:06.795>to <00:14:06.970>any <00:14:07.145>sort <00:14:07.320>of <00:14:07.495>data.

313
00:14:08.225 --> 00:14:12.075
<00:14:08.225>They're <00:14:08.505>static <00:14:08.785>For <00:14:09.065>client <00:14:09.345>side <00:14:09.625>hydration.

314
00:14:12.535 --> 00:14:14.835
<00:14:12.535>Uh, <00:14:12.768>for <00:14:13.001>this <00:14:13.235>server <00:14:13.468>side <00:14:13.701>rendered <00:14:13.935>form,

315
00:14:15.335 --> 00:14:17.195
<00:14:15.335>you <00:14:15.490>might <00:14:15.646>have <00:14:15.801>a <00:14:15.957>lot <00:14:16.112>of <00:14:16.268>props <00:14:16.423>to <00:14:16.579>deal <00:14:16.735>with.

316
00:14:17.495 --> 00:14:18.635
<00:14:17.495>Uh, <00:14:17.751>we <00:14:18.008>actually <00:14:18.264>had <00:14:18.521>a,

317
00:14:18.715 --> 00:14:21.395
<00:14:18.715>a <00:14:18.855>major <00:14:18.995>performance <00:14:19.135>issue <00:14:19.275>on <00:14:19.415>the <00:14:19.555>catalog <00:14:19.695>page <00:14:19.835>at <00:14:19.975>K <00:14:20.115>Academy.

318
00:14:22.055 --> 00:14:24.675
<00:14:22.055>Um, <00:14:22.288>the <00:14:22.521>full <00:14:22.755>catalog <00:14:22.988>had <00:14:23.221>something <00:14:23.454>like,

319
00:14:25.595 --> 00:14:28.195
<00:14:25.595>I <00:14:25.722>think <00:14:25.849>it <00:14:25.976>was <00:14:26.104>half <00:14:26.231>a <00:14:26.358>megabyte <00:14:26.485>of <00:14:26.613>data <00:14:26.740>that <00:14:26.867>needed <00:14:26.995>to

320
00:14:28.735 --> 00:14:30.675
<00:14:28.735>run <00:14:28.935>on <00:14:29.135>the <00:14:29.335>page <00:14:29.535>to <00:14:29.735>render <00:14:29.935>a <00:14:30.135>request.

321
00:14:30.815 --> 00:14:33.235
<00:14:30.815>And <00:14:30.955>then <00:14:31.095>we <00:14:31.235>were <00:14:31.375>spitting <00:14:31.515>that <00:14:31.655>data <00:14:31.795>out <00:14:31.935>onto <00:14:32.075>the <00:14:32.215>page

322
00:14:33.335 --> 00:14:36.595
<00:14:33.335>as <00:14:33.685>A-J-S-O-N <00:14:34.035>blob, <00:14:34.385>which <00:14:34.735>meant

323
00:14:36.595 --> 00:14:40.195
<00:14:36.595>that <00:14:36.770>the <00:14:36.945>page <00:14:37.120>had <00:14:37.295>some <00:14:37.470>ungodly <00:14:37.645>amounts <00:14:37.820>of <00:14:37.995>data.

324
00:14:41.095 --> 00:14:45.195
<00:14:41.095>It <00:14:41.328>was <00:14:41.561>terrible. <00:14:41.795>So <00:14:42.028>at <00:14:42.261>the <00:14:42.495>cost

325
00:14:45.295 --> 00:14:48.795
<00:14:45.295>of <00:14:45.422>needing <00:14:45.549>to <00:14:45.676>render <00:14:45.804>your <00:14:45.931>page, <00:14:46.058>you, <00:14:46.185>you <00:14:46.313>might <00:14:46.440>end <00:14:46.567>up <00:14:46.694>just

326
00:14:49.395 --> 00:14:51.405
<00:14:49.395>introducing <00:14:49.861>more <00:14:50.328>performance <00:14:50.795>degradations.

327
00:14:53.045 --> 00:14:54.745
<00:14:53.045>So, <00:14:53.395>uh, <00:14:53.745>there <00:14:54.094>are <00:14:54.444>trade-offs,

328
00:14:54.765 --> 00:14:57.065
<00:14:54.765>and <00:14:54.939>then <00:14:55.115>it's <00:14:55.290>important <00:14:55.465>that <00:14:55.640>for <00:14:55.814>each <00:14:55.990>particular <00:14:56.165>area

329
00:14:57.065 --> 00:14:59.265
<00:14:57.065>of <00:14:57.205>your <00:14:57.345>app, <00:14:57.485>you <00:14:57.625>know <00:14:57.765>which <00:14:57.905>thing <00:14:58.045>you <00:14:58.185>want <00:14:58.325>to <00:14:58.465>use

330
00:14:59.265 --> 00:15:03.105
<00:14:59.265>and <00:14:59.392>how <00:14:59.519>to <00:14:59.646>use <00:14:59.774>it, <00:14:59.901>which <00:15:00.028>is <00:15:00.155>why <00:15:00.283>microfund <00:15:00.410>pens <00:15:00.537>are <00:15:00.665>great.

331
00:15:03.375 --> 00:15:04.385
<00:15:03.375>They <00:15:03.602>allow <00:15:03.829>us <00:15:04.056>to <00:15:04.284>pick

332
00:15:04.385 --> 00:15:07.545
<00:15:04.385>and <00:15:04.525>choose <00:15:04.665>what <00:15:04.805>kinds <00:15:04.944>of <00:15:05.085>page <00:15:05.225>rendering <00:15:05.365>is <00:15:05.505>best <00:15:05.645>for <00:15:05.785>areas

333
00:15:07.565 --> 00:15:08.905
<00:15:07.565>of <00:15:07.967>our <00:15:08.369>application <00:15:08.771>suites.

334
00:15:10.015 --> 00:15:11.265
<00:15:10.015>Your <00:15:10.577>internal <00:15:11.140>reporting

335
00:15:11.265 --> 00:15:13.705
<00:15:11.265>or <00:15:11.498>business <00:15:11.731>reporting <00:15:11.965>tools <00:15:12.198>might <00:15:12.431>not <00:15:12.665>need

336
00:15:13.705 --> 00:15:16.425
<00:15:13.705>to <00:15:13.938>have <00:15:14.171>super <00:15:14.405>duper <00:15:14.638>incredible <00:15:14.871>optimized <00:15:15.105>performance.

337
00:15:16.755 --> 00:15:18.065
<00:15:16.755>Maybe <00:15:16.951>that <00:15:17.148>you <00:15:17.344>just <00:15:17.541>want <00:15:17.737>the <00:15:17.934>pages

338
00:15:18.065 --> 00:15:19.545
<00:15:18.065>to <00:15:18.287>be <00:15:18.509>simpler <00:15:18.731>so <00:15:18.953>they <00:15:19.175>crash <00:15:19.396>less.

339
00:15:19.715 --> 00:15:22.105
<00:15:19.715>Don't <00:15:19.890>have <00:15:20.065>weird <00:15:20.240>edge <00:15:20.415>cases <00:15:20.590>from <00:15:20.765>server <00:15:20.940>side <00:15:21.115>rendering

340
00:15:22.105 --> 00:15:23.185
<00:15:22.105>or <00:15:22.429>static <00:15:22.752>site <00:15:23.077>generation,

341
00:15:23.965 --> 00:15:25.825
<00:15:23.965>or <00:15:24.165>maybe <00:15:24.365>it's <00:15:24.565>a <00:15:24.765>marketing <00:15:24.965>page <00:15:25.165>that <00:15:25.365>needs

342
00:15:25.825 --> 00:15:29.345
<00:15:25.825>to <00:15:26.025>have <00:15:26.225>super <00:15:26.425>duper <00:15:26.625>spiffy <00:15:26.825>landing <00:15:27.025>page <00:15:27.225>performance

343
00:15:29.805 --> 00:15:32.865
<00:15:29.805>and <00:15:29.960>thus <00:15:30.116>needs <00:15:30.271>to <00:15:30.427>have <00:15:30.582>the <00:15:30.738>most <00:15:30.893>optimized <00:15:31.049>static <00:15:31.204>set

344
00:15:34.165 --> 00:15:35.665
<00:15:34.165>so <00:15:34.502>it <00:15:34.839>changes <00:15:35.177>per <00:15:35.515>page.

345
00:15:36.205 --> 00:15:37.825
<00:15:36.205>And <00:15:36.485>that's <00:15:36.765>why <00:15:37.045>we'd <00:15:37.325>like <00:15:37.605>microfinance

346
00:15:37.825 --> 00:15:39.185
<00:15:37.825>because <00:15:37.999>they <00:15:38.174>allow <00:15:38.349>us <00:15:38.524>to <00:15:38.699>pick <00:15:38.874>and <00:15:39.049>choose.

347
00:15:42.325 --> 00:15:43.665
<00:15:42.325>Now, <00:15:42.566>I <00:15:42.807>mentioned <00:15:43.048>there <00:15:43.289>were <00:15:43.531>trade-offs,

348
00:15:43.665 --> 00:15:45.745
<00:15:43.665>and <00:15:43.944>one <00:15:44.224>of <00:15:44.505>them <00:15:44.785>was <00:15:45.064>coordination

349
00:15:45.745 --> 00:15:47.385
<00:15:45.745>between <00:15:46.095>different <00:15:46.445>areas <00:15:46.795>of <00:15:47.145>pages.

350
00:15:48.405 --> 00:15:50.625
<00:15:48.405>So <00:15:48.560>I <00:15:48.716>wanna <00:15:48.871>talk <00:15:49.027>a <00:15:49.182>little <00:15:49.338>bit <00:15:49.493>about <00:15:49.649>design <00:15:49.805>systems,

351
00:15:50.995 --> 00:15:53.665
<00:15:50.995>which <00:15:51.150>are <00:15:51.306>ways <00:15:51.461>that <00:15:51.617>you <00:15:51.772>can <00:15:51.928>unify <00:15:52.083>the <00:15:52.239>frontend <00:15:52.395>experience

352
00:15:53.665 --> 00:15:56.385
<00:15:53.665>of <00:15:53.792>your <00:15:53.919>website <00:15:54.046>to <00:15:54.174>make <00:15:54.301>it <00:15:54.428>seem <00:15:54.555>like <00:15:54.683>it's <00:15:54.810>all <00:15:54.937>one <00:15:55.064>cohesive

353
00:15:56.385 --> 00:15:57.545
<00:15:56.385>frontend <00:15:57.429>application.

354
00:15:59.625 --> 00:16:01.605
<00:15:59.625>Now, <00:15:59.858>a <00:16:00.091>design <00:16:00.325>system <00:16:00.558>is <00:16:00.791>a <00:16:01.025>collection

355
00:16:01.605 --> 00:16:04.285
<00:16:01.605>of <00:16:01.780>shared <00:16:01.955>visuals <00:16:02.130>used <00:16:02.305>across <00:16:02.480>at <00:16:02.655>least <00:16:02.830>one <00:16:03.005>application.

356
00:16:05.385 --> 00:16:09.205
<00:16:05.385>It <00:16:05.525>can <00:16:05.665>be <00:16:05.805>as <00:16:05.944>granular <00:16:06.085>and <00:16:06.225>low <00:16:06.365>level <00:16:06.505>as <00:16:06.645>animation <00:16:06.785>colors

357
00:16:09.305 --> 00:16:12.345
<00:16:09.305>and <00:16:09.460>spacings, <00:16:09.616>and <00:16:09.771>it <00:16:09.927>can <00:16:10.082>extend <00:16:10.238>all <00:16:10.393>the <00:16:10.549>way <00:16:10.704>up

358
00:16:12.345 --> 00:16:16.105
<00:16:12.345>to <00:16:12.500>larger <00:16:12.656>components <00:16:12.811>on <00:16:12.967>the <00:16:13.122>page <00:16:13.278>buttons, <00:16:13.433>text <00:16:13.589>form <00:16:13.745>layouts.

359
00:16:16.765 --> 00:16:19.225
<00:16:16.765>Um, <00:16:17.115>this <00:16:17.465>is <00:16:17.814>really <00:16:18.165>important

360
00:16:19.325 --> 00:16:20.985
<00:16:19.325>for <00:16:19.675>micro <00:16:20.025>fronted <00:16:20.375>in <00:16:20.725>particular,

361
00:16:21.045 --> 00:16:22.545
<00:16:21.045>but <00:16:21.382>just <00:16:21.719>applications <00:16:22.057>in <00:16:22.395>general

362
00:16:22.545 --> 00:16:24.225
<00:16:22.545>because <00:16:22.824>nobody <00:16:23.104>wants <00:16:23.385>to <00:16:23.665>be <00:16:23.944>told

363
00:16:24.225 --> 00:16:26.385
<00:16:24.225>to <00:16:24.505>recreate <00:16:24.785>things <00:16:25.065>a <00:16:25.345>bajillion <00:16:25.625>times.

364
00:16:27.475 --> 00:16:30.225
<00:16:27.475>Let's, <00:16:27.630>let's <00:16:27.786>take <00:16:27.941>the, <00:16:28.097>the <00:16:28.252>button <00:16:28.408>component <00:16:28.563>on <00:16:28.719>your <00:16:28.875>pages.

365
00:16:31.455 --> 00:16:33.755
<00:16:31.455>So <00:16:31.610>I, <00:16:31.766>I <00:16:31.921>want <00:16:32.077>you <00:16:32.232>to <00:16:32.388>think <00:16:32.543>as, <00:16:32.699>as <00:16:32.855>people

366
00:16:33.775 --> 00:16:36.195
<00:16:33.775>who <00:16:33.949>might <00:16:34.125>have <00:16:34.300>a <00:16:34.475>website, <00:16:34.650>how <00:16:34.824>many <00:16:35.000>different <00:16:35.175>types

367
00:16:36.195 --> 00:16:39.235
<00:16:36.195>of <00:16:36.395>buttons <00:16:36.595>do <00:16:36.795>you <00:16:36.995>have <00:16:37.195>on <00:16:37.395>your <00:16:37.595>website?

368
00:16:41.905 --> 00:16:43.715
<00:16:41.905>There's <00:16:42.138>probably <00:16:42.371>at <00:16:42.605>least <00:16:42.838>one <00:16:43.071>primary <00:16:43.305>button

369
00:16:43.735 --> 00:16:45.395
<00:16:43.735>to <00:16:44.015>submit <00:16:44.295>button <00:16:44.575>for <00:16:44.855>a <00:16:45.135>form.

370
00:16:45.705 --> 00:16:47.515
<00:16:45.705>There's <00:16:45.938>maybe <00:16:46.171>a <00:16:46.405>disabled <00:16:46.638>state <00:16:46.871>for <00:16:47.105>that.

371
00:16:47.855 --> 00:16:49.675
<00:16:47.855>Uh, <00:16:48.055>there's <00:16:48.255>a <00:16:48.455>hover <00:16:48.655>state, <00:16:48.855>a <00:16:49.055>focus <00:16:49.255>state.

372
00:16:49.675 --> 00:16:50.915
<00:16:49.675>If <00:16:49.898>someone <00:16:50.121>tabs <00:16:50.344>over <00:16:50.567>the <00:16:50.790>button,

373
00:16:51.035 --> 00:16:52.635
<00:16:51.035>I <00:16:51.268>sure <00:16:51.501>hope <00:16:51.735>your <00:16:51.968>forms <00:16:52.201>are <00:16:52.435>accessible.

374
00:16:53.175 --> 00:16:54.955
<00:16:53.175>Um, <00:16:53.408>maybe <00:16:53.641>you <00:16:53.875>have <00:16:54.108>a <00:16:54.341>secondary <00:16:54.574>button,

375
00:16:54.955 --> 00:16:56.515
<00:16:54.955>which <00:16:55.188>also <00:16:55.421>has <00:16:55.655>all <00:16:55.888>those <00:16:56.121>different <00:16:56.355>states.

376
00:16:56.815 --> 00:16:57.995
<00:16:56.815>Do <00:16:56.966>you <00:16:57.118>have <00:16:57.270>a <00:16:57.421>light <00:16:57.573>and <00:16:57.725>dark <00:16:57.877>mode?

377
00:16:58.335 --> 00:17:00.595
<00:16:58.335>Do <00:16:58.510>you <00:16:58.685>have, <00:16:58.860>let's <00:16:59.035>say, <00:16:59.210>buttons <00:16:59.385>that <00:16:59.560>are <00:16:59.735>different

378
00:17:00.595 --> 00:17:02.355
<00:17:00.595>outside <00:17:00.945>the <00:17:01.295>form <00:17:01.645>context <00:17:01.995>inside,

379
00:17:04.655 --> 00:17:06.635
<00:17:04.655>uh, <00:17:04.935>a <00:17:05.214>lot <00:17:05.494>of <00:17:05.774>different <00:17:06.055>things.

380
00:17:07.095 --> 00:17:09.355
<00:17:07.095>So <00:17:07.250>one <00:17:07.406>way <00:17:07.561>that <00:17:07.717>we <00:17:07.872>can <00:17:08.028>categorize <00:17:08.183>the <00:17:08.339>different <00:17:08.495>types

381
00:17:09.415 --> 00:17:12.075
<00:17:09.415>of <00:17:09.555>things <00:17:09.694>on <00:17:09.835>your <00:17:09.974>website <00:17:10.115>is <00:17:10.254>a <00:17:10.395>really <00:17:10.534>nice <00:17:10.675>system <00:17:10.815>called

382
00:17:12.215 --> 00:17:14.755
<00:17:12.214>Atomic <00:17:12.494>design, <00:17:12.774>which <00:17:13.054>is <00:17:13.334>a <00:17:13.615>methodology

383
00:17:14.815 --> 00:17:17.355
<00:17:14.815>for <00:17:15.015>organizing <00:17:15.215>the <00:17:15.415>components <00:17:15.615>of <00:17:15.815>your <00:17:16.015>design <00:17:16.215>system.

384
00:17:18.895 --> 00:17:20.115
<00:17:18.895>Now, <00:17:19.169>the <00:17:19.444>basic <00:17:19.718>building <00:17:19.992>blocks

385
00:17:20.495 --> 00:17:23.235
<00:17:20.494>of <00:17:20.669>atomic <00:17:20.844>design <00:17:21.020>follow <00:17:21.194>an <00:17:21.369>analogy <00:17:21.544>that <00:17:21.719>starts <00:17:21.895>off

386
00:17:23.235 --> 00:17:25.435
<00:17:23.234>with <00:17:23.409>atoms <00:17:23.584>and <00:17:23.760>then <00:17:23.935>forgets <00:17:24.109>about <00:17:24.284>it <00:17:24.459>halfway <00:17:24.635>through.

387
00:17:26.055 --> 00:17:27.435
<00:17:26.055>Uh, <00:17:26.303>we <00:17:26.551>start <00:17:26.800>off <00:17:27.048>with <00:17:27.297>atoms,

388
00:17:27.435 --> 00:17:29.195
<00:17:27.435>which <00:17:27.668>are <00:17:27.901>the <00:17:28.135>very <00:17:28.368>small <00:17:28.601>building <00:17:28.835>blocks,

389
00:17:29.445 --> 00:17:32.115
<00:17:29.445>which <00:17:29.645>then <00:17:29.845>form <00:17:30.044>molecules, <00:17:30.245>which <00:17:30.445>then <00:17:30.645>form <00:17:30.845>organisms,

390
00:17:32.115 --> 00:17:33.995
<00:17:32.115>which <00:17:32.581>then <00:17:33.048>templates <00:17:33.515>pages.

391
00:17:34.495 --> 00:17:36.235
<00:17:34.495>It <00:17:34.669>was <00:17:34.844>made <00:17:35.020>by <00:17:35.195>a <00:17:35.370>designer <00:17:35.544>called <00:17:35.719>Brad <00:17:35.895>Frost.

392
00:17:36.605 --> 00:17:39.675
<00:17:36.605>Thank <00:17:36.745>you, <00:17:36.885>Brad <00:17:37.025>Frost. <00:17:37.165>And <00:17:37.305>we <00:17:37.445>use <00:17:37.585>it <00:17:37.725>at <00:17:37.865>Code <00:17:38.005>Academy.

393
00:17:41.905 --> 00:17:43.135
<00:17:41.905>Let's <00:17:42.181>start <00:17:42.458>off <00:17:42.735>with <00:17:43.012>Adams.

394
00:17:43.785 --> 00:17:46.135
<00:17:43.785>Adams <00:17:43.960>are <00:17:44.135>the <00:17:44.310>basic <00:17:44.485>building <00:17:44.660>blocks <00:17:44.835>of <00:17:45.010>our <00:17:45.185>matter.

395
00:17:46.885 --> 00:17:48.335
<00:17:46.885>HTML <00:17:47.320>tags, <00:17:47.755>form <00:17:48.190>labels,

396
00:17:48.745 --> 00:17:50.605
<00:17:48.745>input <00:17:49.024>buttons, <00:17:49.304>small <00:17:49.584>things <00:17:49.864>like <00:17:50.145>that.

397
00:17:51.115 --> 00:17:54.565
<00:17:51.115>They <00:17:51.270>can <00:17:51.426>also <00:17:51.581>be <00:17:51.737>abstract <00:17:51.892>like <00:17:52.048>color <00:17:52.203>palettes <00:17:52.359>and <00:17:52.515>fonts.

398
00:17:56.025 --> 00:17:58.325
<00:17:56.025>Um, <00:17:56.180>on <00:17:56.336>this <00:17:56.491>slide, <00:17:56.647>we <00:17:56.802>just <00:17:56.958>have <00:17:57.113>a <00:17:57.269>few <00:17:57.425>examples.

399
00:17:59.735 --> 00:18:02.165
<00:17:59.735>Atoms <00:17:59.935>then <00:18:00.135>can <00:18:00.334>be <00:18:00.534>everywhere <00:18:00.735>on <00:18:00.935>your <00:18:01.135>website.

400
00:18:02.985 --> 00:18:06.325
<00:18:02.985>So <00:18:03.125>I'm <00:18:03.264>gonna <00:18:03.405>take <00:18:03.544>a <00:18:03.685>few <00:18:03.824>seconds <00:18:03.965>here <00:18:04.104>to <00:18:04.245>think, <00:18:04.385>given

401
00:18:06.325 --> 00:18:09.325
<00:18:06.325>that <00:18:06.465>the <00:18:06.605>definition <00:18:06.745>of <00:18:06.885>atoms <00:18:07.025>are <00:18:07.165>the <00:18:07.305>small <00:18:07.445>things <00:18:07.585>like <00:18:07.725>the,

402
00:18:09.705 --> 00:18:11.965
<00:18:09.705>the <00:18:09.985>fonts, <00:18:10.264>the <00:18:10.544>colors, <00:18:10.824>the <00:18:11.105>buttons,

403
00:18:12.135 --> 00:18:14.525
<00:18:12.135>which <00:18:12.335>atoms <00:18:12.535>do <00:18:12.735>you <00:18:12.935>see <00:18:13.135>on <00:18:13.335>this <00:18:13.535>webpage?

404
00:18:15.385 --> 00:18:17.645
<00:18:15.385>And <00:18:15.512>I'll <00:18:15.639>know, <00:18:15.766>I <00:18:15.894>can't <00:18:16.021>see <00:18:16.148>the <00:18:16.275>chat, <00:18:16.403>so <00:18:16.530>you <00:18:16.657>don't <00:18:16.785>have

405
00:18:17.645 --> 00:18:21.725
<00:18:17.645>to <00:18:17.761>tell <00:18:17.878>me, <00:18:17.995>but <00:18:18.111>later <00:18:18.228>on <00:18:18.345>you <00:18:18.461>can <00:18:18.578>if <00:18:18.695>you <00:18:18.811>really <00:18:18.928>want <00:18:19.045>to,

406
00:18:22.465 --> 00:18:23.485
<00:18:22.465>but <00:18:22.648>I <00:18:22.832>will <00:18:23.015>give <00:18:23.199>you <00:18:23.382>answer.

407
00:18:23.545 --> 00:18:27.245
<00:18:23.545>Now. <00:18:24.011>To <00:18:24.478>start <00:18:24.945>off,

408
00:18:27.245 --> 00:18:28.605
<00:18:27.245>there <00:18:27.489>are <00:18:27.734>colors <00:18:27.979>on <00:18:28.224>the <00:18:28.469>webpage.

409
00:18:28.745 --> 00:18:32.805
<00:18:28.745>Um, <00:18:28.900>I <00:18:29.056>personally <00:18:29.211>can <00:18:29.367>spot <00:18:29.522>about <00:18:29.678>seven <00:18:29.833>unique <00:18:29.989>ones, <00:18:30.145>white,

410
00:18:32.805 --> 00:18:35.965
<00:18:32.805>gray, <00:18:32.980>black, <00:18:33.155>and <00:18:33.330>then <00:18:33.505>the <00:18:33.680>colors, <00:18:33.855>gold, <00:18:34.030>beige, <00:18:34.205>yellow,

411
00:18:36.065 --> 00:18:37.885
<00:18:36.065>and <00:18:36.298>what's <00:18:36.531>called <00:18:36.765>hyper <00:18:36.998>in <00:18:37.231>our <00:18:37.465>design

412
00:18:37.885 --> 00:18:39.245
<00:18:37.885>system, <00:18:38.293>the <00:18:38.701>purplely <00:18:39.109>blue.

413
00:18:40.985 --> 00:18:43.005
<00:18:40.985>Uh, <00:18:41.159>we <00:18:41.334>also <00:18:41.510>have <00:18:41.685>some <00:18:41.860>different <00:18:42.034>types <00:18:42.209>of <00:18:42.385>text.

414
00:18:43.345 --> 00:18:46.285
<00:18:43.345>You <00:18:43.500>can <00:18:43.656>see <00:18:43.811>on <00:18:43.967>top. <00:18:44.122>There's <00:18:44.278>menu, <00:18:44.433>text, <00:18:44.589>body <00:18:44.745>texts,

415
00:18:46.515 --> 00:18:47.965
<00:18:46.515>some <00:18:46.841>headings <00:18:47.167>and <00:18:47.493>a <00:18:47.820>caption.

416
00:18:50.385 --> 00:18:52.565
<00:18:50.385>Uh, <00:18:50.560>we <00:18:50.735>have <00:18:50.910>a <00:18:51.085>bajillion <00:18:51.260>different <00:18:51.435>types <00:18:51.610>of <00:18:51.785>buttons.

417
00:18:52.755 --> 00:18:55.925
<00:18:52.755>There's <00:18:52.930>the <00:18:53.105>inline <00:18:53.280>text <00:18:53.455>button, <00:18:53.630>there's <00:18:53.805>the <00:18:53.980>fill <00:18:54.155>button.

418
00:18:56.705 --> 00:19:00.445
<00:18:56.705>Uh, <00:18:56.860>I <00:18:57.016>debatably <00:18:57.171>the, <00:18:57.327>the <00:18:57.482>menu <00:18:57.638>areas <00:18:57.793>or <00:18:57.949>buttons <00:18:58.105>too.

419
00:19:01.885 --> 00:19:03.925
<00:19:01.885>Visually. <00:19:02.165>They <00:19:02.445>certainly <00:19:02.725>are <00:19:03.004>an <00:19:03.285>implementation.

420
00:19:06.505 --> 00:19:08.725
<00:19:06.505>Uh, <00:19:06.705>we <00:19:06.905>have <00:19:07.105>different <00:19:07.305>iconography <00:19:07.505>on <00:19:07.705>the <00:19:07.905>page,

421
00:19:08.725 --> 00:19:10.645
<00:19:08.725>search <00:19:09.074>bell <00:19:09.425>lesson, <00:19:09.774>article <00:19:10.125>quiz.

422
00:19:10.695 --> 00:19:13.045
<00:19:10.695>These <00:19:10.870>are <00:19:11.044>all <00:19:11.220>parts <00:19:11.395>of <00:19:11.570>the <00:19:11.745>atomic <00:19:11.919>design <00:19:12.095>system.

423
00:19:14.325 --> 00:19:16.945
<00:19:14.325>And <00:19:14.480>we <00:19:14.636>have <00:19:14.791>some <00:19:14.947>logos, <00:19:15.102>the <00:19:15.258>Code <00:19:15.413>Kennedy <00:19:15.569>Pro <00:19:15.725>logo,

424
00:19:17.285 --> 00:19:19.025
<00:19:17.285>the <00:19:17.635>the <00:19:17.985>standalone <00:19:18.335>Pro <00:19:18.685>logo.

425
00:19:19.885 --> 00:19:23.695
<00:19:19.885>And <00:19:20.012>then <00:19:20.139>we <00:19:20.266>have <00:19:20.394>few <00:19:20.521>really <00:19:20.648>random <00:19:20.775>ones <00:19:20.903>like <00:19:21.030>a <00:19:21.157>progress <00:19:21.285>bar

426
00:19:23.795 --> 00:19:24.935
<00:19:23.795>and <00:19:24.137>a <00:19:24.479>hex <00:19:24.821>character.

427
00:19:26.235 --> 00:19:29.015
<00:19:26.235>Anyway, <00:19:26.435>these <00:19:26.635>all <00:19:26.834>four <00:19:27.034>molecules, <00:19:27.235>which <00:19:27.435>are <00:19:27.635>groups

428
00:19:29.015 --> 00:19:30.135
<00:19:29.015>of <00:19:29.351>atoms <00:19:29.687>bonded <00:19:30.023>together

429
00:19:30.475 --> 00:19:32.895
<00:19:30.475>and <00:19:30.649>are <00:19:30.824>the <00:19:31.000>smallest <00:19:31.175>fundamental <00:19:31.350>units <00:19:31.524>of <00:19:31.699>a <00:19:31.875>compound.

430
00:19:33.475 --> 00:19:36.455
<00:19:33.475>So <00:19:33.708>instead <00:19:33.941>of <00:19:34.175>having, <00:19:34.408>um, <00:19:34.641>individual <00:19:34.875>atoms,

431
00:19:36.555 --> 00:19:38.295
<00:19:36.555>we <00:19:36.835>are <00:19:37.115>now <00:19:37.395>talking <00:19:37.675>about <00:19:37.955>compounds,

432
00:19:38.295 --> 00:19:39.535
<00:19:38.295>groups <00:19:38.574>of <00:19:38.853>things, <00:19:39.132>joint <00:19:39.411>together.

433
00:19:40.645 --> 00:19:41.945
<00:19:40.645>And <00:19:40.879>while <00:19:41.113>they <00:19:41.347>can <00:19:41.581>be <00:19:41.815>complex,

434
00:19:41.965 --> 00:19:43.745
<00:19:41.965>you <00:19:42.165>might <00:19:42.365>have <00:19:42.564>a <00:19:42.764>really <00:19:42.965>big <00:19:43.165>modal <00:19:43.365>dialogue

435
00:19:43.745 --> 00:19:45.345
<00:19:43.745>or <00:19:43.945>lots <00:19:44.145>of <00:19:44.344>things <00:19:44.544>in <00:19:44.745>your <00:19:44.945>form <00:19:45.145>group.

436
00:19:45.735 --> 00:19:47.025
<00:19:45.735>They <00:19:46.025>generally <00:19:46.315>are <00:19:46.605>pretty <00:19:46.896>simple.

437
00:19:47.485 --> 00:19:49.785
<00:19:47.485>No <00:19:47.659>more <00:19:47.834>than <00:19:48.010>three <00:19:48.185>to <00:19:48.360>five <00:19:48.534>atoms <00:19:48.709>at <00:19:48.885>once,

438
00:19:51.055 --> 00:19:52.055
<00:19:51.055>Give <00:19:51.505>or <00:19:51.955>take.

439
00:19:53.245 --> 00:19:54.465
<00:19:53.245>So <00:19:53.464>looking <00:19:53.684>at <00:19:53.903>this <00:19:54.123>page, <00:19:54.342>again,

440
00:19:54.815 --> 00:19:58.065
<00:19:54.815>curious <00:19:54.990>if <00:19:55.165>you <00:19:55.340>see <00:19:55.515>any <00:19:55.690>particular <00:19:55.865>groups, <00:19:56.040>any <00:19:56.215>compounds

441
00:19:58.085 --> 00:20:00.425
<00:19:58.085>of <00:19:58.318>atoms <00:19:58.551>linked <00:19:58.785>together <00:19:59.018>in <00:19:59.251>similar <00:19:59.485>ways?

442
00:20:05.035 --> 00:20:07.375
<00:20:05.035>Now, <00:20:05.268>personally, <00:20:05.501>I <00:20:05.735>see <00:20:05.968>a <00:20:06.201>many <00:20:06.435>dropdown.

443
00:20:07.395 --> 00:20:08.735
<00:20:07.395>If <00:20:07.567>you <00:20:07.739>were <00:20:07.911>to <00:20:08.084>interact <00:20:08.256>with <00:20:08.428>the <00:20:08.601>page,

444
00:20:08.735 --> 00:20:09.975
<00:20:08.735>those <00:20:08.958>would <00:20:09.181>all <00:20:09.404>be <00:20:09.627>the <00:20:09.851>same.

445
00:20:11.695 --> 00:20:14.215
<00:20:11.695>I <00:20:11.850>see <00:20:12.006>an <00:20:12.161>icon <00:20:12.317>list, <00:20:12.472>which <00:20:12.628>is <00:20:12.783>three <00:20:12.939>things <00:20:13.095>together,

446
00:20:14.425 --> 00:20:16.815
<00:20:14.425>which <00:20:14.600>are <00:20:14.774>an <00:20:14.950>icons <00:20:15.125>text, <00:20:15.300>and <00:20:15.475>some <00:20:15.649>more <00:20:15.825>text.

447
00:20:17.765 --> 00:20:19.445
<00:20:17.765>There's <00:20:18.231>This <00:20:18.698>accordion <00:20:19.165>thing,

448
00:20:19.445 --> 00:20:20.485
<00:20:19.445>which <00:20:19.756>appears <00:20:20.069>three <00:20:20.380>times.

449
00:20:20.825 --> 00:20:23.925
<00:20:20.825>Two <00:20:21.105>are <00:20:21.385>contracted, <00:20:21.665>one <00:20:21.945>is <00:20:22.225>expanded.

450
00:20:25.185 --> 00:20:29.145
<00:20:25.185>We <00:20:25.325>see <00:20:25.465>a <00:20:25.605>progress <00:20:25.745>of <00:20:25.885>a <00:20:26.024>couple <00:20:26.165>times, <00:20:26.304>some <00:20:26.445>progress <00:20:26.585>percent,

451
00:20:30.625 --> 00:20:31.765
<00:20:30.625>so <00:20:30.881>a <00:20:31.138>little <00:20:31.394>less <00:20:31.651>common.

452
00:20:32.025 --> 00:20:33.565
<00:20:32.025>We <00:20:32.302>have <00:20:32.579>a <00:20:32.856>checked <00:20:33.133>days <00:20:33.411>area.

453
00:20:34.505 --> 00:20:35.965
<00:20:34.505>Anyway, <00:20:34.833>these <00:20:35.162>all <00:20:35.490>form <00:20:35.819>organisms,

454
00:20:35.965 --> 00:20:37.005
<00:20:35.965>which <00:20:36.152>are <00:20:36.339>the <00:20:36.526>really <00:20:36.713>exciting <00:20:36.901>parts,

455
00:20:37.055 --> 00:20:38.485
<00:20:37.055>which <00:20:37.376>are <00:20:37.698>groups <00:20:38.020>of <00:20:38.341>molecules.

456
00:20:38.625 --> 00:20:41.085
<00:20:38.625>So <00:20:38.905>compounds <00:20:39.185>of <00:20:39.465>compounds <00:20:39.745>joined <00:20:40.025>together

457
00:20:41.105 --> 00:20:43.405
<00:20:41.105>to <00:20:41.280>form <00:20:41.455>a <00:20:41.630>complex <00:20:41.805>distinct <00:20:41.980>section <00:20:42.155>of <00:20:42.330>the <00:20:42.505>interface.

458
00:20:43.905 --> 00:20:45.165
<00:20:43.905>And <00:20:44.188>once <00:20:44.472>you <00:20:44.755>have <00:20:45.039>organisms,

459
00:20:45.165 --> 00:20:47.890
<00:20:45.165>you <00:20:45.320>see <00:20:45.476>the <00:20:45.631>final <00:20:45.787>interface <00:20:45.942>beginning <00:20:46.098>to <00:20:46.253>shape, <00:20:46.409>take <00:20:46.565>shape.

460
00:20:47.995 --> 00:20:49.445
<00:20:47.995>Instead <00:20:48.321>of <00:20:48.647>just <00:20:48.973>a <00:20:49.300>button,

461
00:20:49.985 --> 00:20:52.245
<00:20:49.985>or <00:20:50.125>let's <00:20:50.264>say <00:20:50.405>a <00:20:50.544>group <00:20:50.685>buttons, <00:20:50.824>you <00:20:50.965>have <00:20:51.104>an <00:20:51.245>entire <00:20:51.385>form

462
00:20:52.665 --> 00:20:54.965
<00:20:52.665>or <00:20:52.865>an <00:20:53.065>entire <00:20:53.264>confirmation <00:20:53.465>zone <00:20:53.665>with <00:20:53.865>a <00:20:54.065>modal.

463
00:20:56.265 --> 00:20:57.765
<00:20:56.265>And <00:20:56.433>in <00:20:56.602>this <00:20:56.771>page, <00:20:56.940>we <00:20:57.108>don't <00:20:57.277>have <00:20:57.446>too <00:20:57.615>many,

464
00:20:57.765 --> 00:20:58.885
<00:20:57.765>we <00:20:58.017>have <00:20:58.269>this <00:20:58.521>global <00:20:58.773>header.

465
00:20:59.465 --> 00:21:01.205
<00:20:59.465>We <00:20:59.814>have <00:21:00.165>two <00:21:00.514>lists <00:21:00.865>sections.

466
00:21:02.145 --> 00:21:04.045
<00:21:02.145>So <00:21:02.425>they're <00:21:02.705>a <00:21:02.985>little <00:21:03.264>more <00:21:03.545>rare,

467
00:21:04.305 --> 00:21:06.045
<00:21:04.305>but <00:21:04.480>they're <00:21:04.655>super <00:21:04.830>sweet <00:21:05.005>when <00:21:05.180>they <00:21:05.355>do <00:21:05.530>show <00:21:05.705>up,

468
00:21:06.045 --> 00:21:07.445
<00:21:06.045>they <00:21:06.297>help <00:21:06.549>you <00:21:06.801>unify <00:21:07.053>your <00:21:07.304>logic.

469
00:21:07.985 --> 00:21:10.685
<00:21:07.985>For <00:21:08.140>example, <00:21:08.296>this <00:21:08.451>global <00:21:08.607>header <00:21:08.762>is <00:21:08.918>present <00:21:09.073>on <00:21:09.229>all <00:21:09.385>code

470
00:21:10.685 --> 00:21:14.565
<00:21:10.685>academy <00:21:10.840>applications, <00:21:10.996>give <00:21:11.151>or <00:21:11.307>take <00:21:11.462>in <00:21:11.618>some <00:21:11.773>way, <00:21:11.929>almost <00:21:12.085>all.

471
00:21:17.985 --> 00:21:20.965
<00:21:17.985>Lastly, <00:21:18.159>once <00:21:18.334>we <00:21:18.510>have <00:21:18.685>these, <00:21:18.860>these <00:21:19.034>organisms <00:21:19.209>put <00:21:19.385>together,

472
00:21:21.145 --> 00:21:24.485
<00:21:21.145>we <00:21:21.320>can <00:21:21.495>use <00:21:21.670>templates <00:21:21.845>which <00:21:22.020>are <00:21:22.195>descriptions <00:21:22.370>of <00:21:22.545>how

473
00:21:24.485 --> 00:21:25.805
<00:21:24.485>to <00:21:24.722>create <00:21:24.960>a <00:21:25.197>page <00:21:25.435>using <00:21:25.673>them

474
00:21:26.745 --> 00:21:29.125
<00:21:26.745>and <00:21:26.945>pages, <00:21:27.145>which <00:21:27.344>are <00:21:27.544>instances <00:21:27.745>of <00:21:27.945>those <00:21:28.145>templates.

475
00:21:30.005 --> 00:21:31.565
<00:21:30.005>Previously, <00:21:30.205>we <00:21:30.405>might <00:21:30.605>have <00:21:30.805>had <00:21:31.005>a <00:21:31.205>template <00:21:31.405>for,

476
00:21:31.695 --> 00:21:33.845
<00:21:31.695>let's <00:21:31.870>say <00:21:32.044>a <00:21:32.220>primary <00:21:32.395>list <00:21:32.570>section <00:21:32.745>and <00:21:32.919>a <00:21:33.095>secondary.

477
00:21:33.865 --> 00:21:36.245
<00:21:33.865>And <00:21:34.065>then <00:21:34.265>we <00:21:34.465>used <00:21:34.665>that <00:21:34.865>template <00:21:35.065>for <00:21:35.265>the,

478
00:21:36.455 --> 00:21:37.685
<00:21:36.455>let's <00:21:36.823>say, <00:21:37.193>learner <00:21:37.562>dashboard.

479
00:21:40.545 --> 00:21:42.485
<00:21:40.545>So <00:21:40.720>a <00:21:40.895>a <00:21:41.070>few <00:21:41.245>pro <00:21:41.420>tips <00:21:41.595>about <00:21:41.770>design <00:21:41.945>systems

480
00:21:42.565 --> 00:21:44.605
<00:21:42.565>before <00:21:42.740>I <00:21:42.915>talk <00:21:43.090>about <00:21:43.265>why <00:21:43.440>they're <00:21:43.615>super <00:21:43.790>duper <00:21:43.965>important.

481
00:21:44.985 --> 00:21:46.525
<00:21:44.985>Um, <00:21:45.216>document <00:21:45.447>the <00:21:45.678>heck <00:21:45.909>out <00:21:46.140>of <00:21:46.371>them.

482
00:21:46.705 --> 00:21:48.085
<00:21:46.705>Things <00:21:47.015>like <00:21:47.326>where <00:21:47.636>Adam's <00:21:47.947>store,

483
00:21:48.145 --> 00:21:50.245
<00:21:48.145>how <00:21:48.320>do <00:21:48.495>you <00:21:48.670>develop <00:21:48.845>locally <00:21:49.020>against <00:21:49.195>this <00:21:49.370>design <00:21:49.545>system?

484
00:21:50.745 --> 00:21:53.245
<00:21:50.745>How <00:21:50.900>can <00:21:51.056>you <00:21:51.211>customize <00:21:51.367>components? <00:21:51.522>Where <00:21:51.678>do <00:21:51.833>you <00:21:51.989>report <00:21:52.145>bugs?

485
00:21:53.385 --> 00:21:54.765
<00:21:53.385>Uh, <00:21:53.695>definitely <00:21:54.006>have <00:21:54.316>all <00:21:54.627>these

486
00:21:54.765 --> 00:21:57.445
<00:21:54.765>and <00:21:54.940>other <00:21:55.115>FAQs <00:21:55.290>listed <00:21:55.465>somewhere <00:21:55.640>in <00:21:55.815>your <00:21:55.990>documentation <00:21:56.165>pages

487
00:21:57.445 --> 00:22:01.165
<00:21:57.445>because <00:21:57.620>design <00:21:57.794>systems <00:21:57.970>can <00:21:58.145>get <00:21:58.320>rather <00:21:58.495>complex <00:21:58.669>and <00:21:58.845>large.

488
00:22:02.925 --> 00:22:04.865
<00:22:02.925>Um, <00:22:03.274>I <00:22:03.625>personally <00:22:03.975>recommend <00:22:04.325>storybook

489
00:22:05.325 --> 00:22:08.345
<00:22:05.325>for <00:22:05.558>your <00:22:05.791>interactive <00:22:06.025>design <00:22:06.258>system <00:22:06.491>documentation <00:22:06.725>needs.

490
00:22:08.655 --> 00:22:10.425
<00:22:08.655>It's <00:22:08.888>a <00:22:09.121>fantastic <00:22:09.355>tool <00:22:09.588>that <00:22:09.821>allows <00:22:10.055>you

491
00:22:10.425 --> 00:22:11.985
<00:22:10.425>to <00:22:10.891>create <00:22:11.358>interactive <00:22:11.825>documentation

492
00:22:11.995 --> 00:22:13.545
<00:22:11.995>pages <00:22:12.460>from <00:22:12.925>your <00:22:13.390>components.

493
00:22:14.445 --> 00:22:16.505
<00:22:14.445>Um, <00:22:14.620>it <00:22:14.794>allows <00:22:14.970>you <00:22:15.145>to <00:22:15.320>write <00:22:15.495>descriptions <00:22:15.669>in <00:22:15.845>MDX,

494
00:22:16.505 --> 00:22:19.745
<00:22:16.505>which <00:22:16.660>is <00:22:16.816>kind <00:22:16.971>of <00:22:17.127>a <00:22:17.282>markdown <00:22:17.438>and <00:22:17.593>react <00:22:17.749>hybrid <00:22:17.905>formats,

495
00:22:19.925 --> 00:22:22.985
<00:22:19.925>and <00:22:20.100>it <00:22:20.274>has <00:22:20.450>really <00:22:20.625>nice <00:22:20.800>integrations <00:22:20.975>with <00:22:21.149>React <00:22:21.325>typescripts,

496
00:22:23.125 --> 00:22:25.185
<00:22:23.125>all <00:22:23.300>sorts <00:22:23.475>of <00:22:23.650>other <00:22:23.825>friends <00:22:24.000>to <00:22:24.175>make <00:22:24.350>your <00:22:24.525>docs

497
00:22:25.185 --> 00:22:26.225
<00:22:25.185>pages <00:22:25.653>super <00:22:26.120>informative.

498
00:22:26.925 --> 00:22:28.665
<00:22:26.925>Um, <00:22:27.158>at <00:22:27.391>Code <00:22:27.625>Academy <00:22:27.858>we <00:22:28.091>use <00:22:28.325>React

499
00:22:28.685 --> 00:22:30.185
<00:22:28.685>and <00:22:28.955>TypeScript <00:22:29.225>for <00:22:29.495>a <00:22:29.764>design <00:22:30.034>system.

500
00:22:30.845 --> 00:22:33.865
<00:22:30.845>So <00:22:31.000>TypeScript, <00:22:31.156>which <00:22:31.311>is <00:22:31.467>a <00:22:31.622>way <00:22:31.778>to <00:22:31.933>add <00:22:32.089>type <00:22:32.245>annotations

501
00:22:33.865 --> 00:22:36.745
<00:22:33.865>to <00:22:34.098>your <00:22:34.331>JavaScript, <00:22:34.565>uh, <00:22:34.798>the <00:22:35.031>storybook <00:22:35.265>pages,

502
00:22:36.895 --> 00:22:38.305
<00:22:36.895>pick <00:22:37.212>up <00:22:37.529>our <00:22:37.846>type <00:22:38.164>annotations

503
00:22:38.445 --> 00:22:39.745
<00:22:38.445>and <00:22:38.737>describe <00:22:39.030>for <00:22:39.322>each <00:22:39.614>component

504
00:22:39.815 --> 00:22:42.265
<00:22:39.815>what <00:22:40.015>the <00:22:40.215>different <00:22:40.415>allowed <00:22:40.615>props <00:22:40.815>or <00:22:41.015>properties <00:22:41.215>are.

505
00:22:44.775 --> 00:22:46.555
<00:22:44.775>So <00:22:45.055>just <00:22:45.335>looking <00:22:45.615>at <00:22:45.895>the <00:22:46.175>gamut,

506
00:22:46.695 --> 00:22:48.635
<00:22:46.695>dot <00:22:47.044>code <00:22:47.395>academy.com <00:22:47.745>design <00:22:48.095>docs,

507
00:22:48.635 --> 00:22:49.795
<00:22:48.635>we <00:22:48.843>have <00:22:49.052>a <00:22:49.261>homepage <00:22:49.470>which <00:22:49.679>has

508
00:22:49.795 --> 00:22:51.035
<00:22:49.795>links <00:22:49.981>to <00:22:50.167>all <00:22:50.353>of <00:22:50.539>our <00:22:50.725>different <00:22:50.911>components.

509
00:22:51.855 --> 00:22:54.235
<00:22:51.855>And <00:22:52.010>then <00:22:52.166>each <00:22:52.321>of <00:22:52.477>those <00:22:52.632>components <00:22:52.788>has <00:22:52.943>a <00:22:53.099>unique <00:22:53.255>page.

510
00:22:56.375 --> 00:22:57.635
<00:22:56.375>Now <00:22:56.601>I <00:22:56.828>bring <00:22:57.055>up <00:22:57.282>design <00:22:57.509>systems

511
00:22:57.635 --> 00:22:59.795
<00:22:57.635>because, <00:22:58.101>uh, <00:22:58.568>they're <00:22:59.035>important.

512
00:23:00.185 --> 00:23:03.115
<00:23:00.185>It's <00:23:00.325>really, <00:23:00.465>really <00:23:00.605>nice <00:23:00.745>for <00:23:00.885>users <00:23:01.024>when <00:23:01.165>you <00:23:01.304>have <00:23:01.445>a <00:23:01.585>unified,

513
00:23:03.235 --> 00:23:06.475
<00:23:03.235>coherent <00:23:03.468>visual <00:23:03.701>identity <00:23:03.935>across <00:23:04.168>all <00:23:04.401>your <00:23:04.635>applications.

514
00:23:06.935 --> 00:23:09.035
<00:23:06.935>If <00:23:07.051>we <00:23:07.168>were <00:23:07.284>to <00:23:07.401>go <00:23:07.518>back <00:23:07.635>and <00:23:07.751>look <00:23:07.868>at <00:23:07.985>all <00:23:08.101>the <00:23:08.218>different <00:23:08.335>parts

515
00:23:09.035 --> 00:23:10.355
<00:23:09.035>of <00:23:09.332>Code <00:23:09.629>Academy, <00:23:09.926>for <00:23:10.223>example,

516
00:23:10.745 --> 00:23:13.595
<00:23:10.745>we'd <00:23:10.885>wanna <00:23:11.024>see <00:23:11.165>the <00:23:11.304>same <00:23:11.445>buttons, <00:23:11.584>the <00:23:11.725>same <00:23:11.864>text, <00:23:12.004>the <00:23:12.145>same

517
00:23:14.125 --> 00:23:16.035
<00:23:14.125>atoms <00:23:14.358>and <00:23:14.591>molecules <00:23:14.825>across <00:23:15.058>all <00:23:15.291>of <00:23:15.525>them.

518
00:23:18.465 --> 00:23:21.005
<00:23:18.465>So <00:23:18.605>I <00:23:18.745>highly <00:23:18.885>recommend <00:23:19.024>setting <00:23:19.165>up <00:23:19.304>some <00:23:19.445>kind <00:23:19.584>of <00:23:19.725>design <00:23:19.865>system

519
00:23:21.665 --> 00:23:24.045
<00:23:21.665>for <00:23:21.865>your <00:23:22.065>Code <00:23:22.264>Academy, <00:23:22.465>be <00:23:22.665>equivalent, <00:23:22.865>what <00:23:23.065>other,

520
00:23:24.525 --> 00:23:25.565
<00:23:24.525>whatever <00:23:24.837>website <00:23:25.149>you're <00:23:25.461>making

521
00:23:25.825 --> 00:23:28.125
<00:23:25.825>to <00:23:26.025>give <00:23:26.225>your <00:23:26.425>users <00:23:26.625>a <00:23:26.825>cohesive, <00:23:27.025>unified <00:23:27.225>experience

522
00:23:28.125 --> 00:23:29.445
<00:23:28.125>and <00:23:28.362>let <00:23:28.600>your <00:23:28.837>developers <00:23:29.075>not <00:23:29.312>have

523
00:23:29.445 --> 00:23:31.365
<00:23:29.445>to <00:23:29.620>recreate <00:23:29.794>the <00:23:29.970>same <00:23:30.145>things <00:23:30.320>over <00:23:30.495>and <00:23:30.669>over <00:23:30.845>again.

524
00:23:34.295 --> 00:23:37.795
<00:23:34.295>Anyway, <00:23:34.450>let's <00:23:34.606>recap <00:23:34.761>all <00:23:34.917>the <00:23:35.072>things <00:23:35.228>that <00:23:35.383>we've <00:23:35.539>covered <00:23:35.695>today.

525
00:23:39.565 --> 00:23:41.635
<00:23:39.565>First, <00:23:39.798>we <00:23:40.031>talked <00:23:40.265>about <00:23:40.498>the <00:23:40.731>scaling <00:23:40.965>difficulties.

526
00:23:42.175 --> 00:23:45.155
<00:23:42.175>Why <00:23:42.330>it <00:23:42.486>can <00:23:42.641>be <00:23:42.797>really <00:23:42.952>annoying <00:23:43.108>to <00:23:43.263>build <00:23:43.419>large <00:23:43.575>monolithic

527
00:23:45.310 --> 00:23:48.205
<00:23:45.310>or <00:23:45.510>monolith <00:23:45.710>applications <00:23:45.909>in <00:23:46.110>today's <00:23:46.310>front <00:23:46.510>end <00:23:46.710>world

528
00:23:48.315 --> 00:23:52.485
<00:23:48.315>because <00:23:48.470>of <00:23:48.626>lots <00:23:48.781>of <00:23:48.937>data <00:23:49.092>dependencies, <00:23:49.248>flaky <00:23:49.403>ci, <00:23:49.559>long <00:23:49.715>tests,

529
00:23:52.625 --> 00:23:54.285
<00:23:52.625>the <00:23:52.825>need <00:23:53.025>to <00:23:53.225>be <00:23:53.425>able <00:23:53.625>to <00:23:53.825>hot <00:23:54.025>fix

530
00:23:54.285 --> 00:23:57.605
<00:23:54.285>or <00:23:54.460>deploy <00:23:54.635>quickly, <00:23:54.810>getting <00:23:54.985>camped <00:23:55.160>by <00:23:55.335>your <00:23:55.510>very <00:23:55.685>old,

531
00:23:57.635 --> 00:23:58.685
<00:23:57.635>very <00:23:58.107>ancient <00:23:58.580>builds.

532
00:23:59.965 --> 00:24:02.065
<00:23:59.965>We <00:24:00.120>talked <00:24:00.276>about <00:24:00.431>micro <00:24:00.587>front <00:24:00.742>ends, <00:24:00.898>which <00:24:01.053>are <00:24:01.209>a <00:24:01.365>way

533
00:24:02.065 --> 00:24:03.905
<00:24:02.065>to <00:24:02.345>split <00:24:02.625>up <00:24:02.905>your <00:24:03.185>different <00:24:03.465>applications.

534
00:24:04.485 --> 00:24:07.305
<00:24:04.485>We <00:24:04.612>talked <00:24:04.739>about <00:24:04.866>how <00:24:04.994>we <00:24:05.121>can <00:24:05.248>use <00:24:05.375>edge <00:24:05.503>workers <00:24:05.630>such <00:24:05.757>as <00:24:05.885>those

535
00:24:07.545 --> 00:24:10.225
<00:24:07.545>provided <00:24:07.745>by <00:24:07.945>CloudFlare <00:24:08.145>to <00:24:08.345>very <00:24:08.545>quickly <00:24:08.745>route <00:24:08.945>requests

536
00:24:10.225 --> 00:24:12.145
<00:24:10.225>to <00:24:10.574>the <00:24:10.925>appropriate <00:24:11.274>frontend <00:24:11.625>application,

537
00:24:12.925 --> 00:24:15.755
<00:24:12.925>which <00:24:13.100>then <00:24:13.274>allows <00:24:13.450>you <00:24:13.625>to <00:24:13.800>create <00:24:13.975>tailored <00:24:14.149>applications <00:24:14.325>per

538
00:24:15.755 --> 00:24:17.235
<00:24:15.755>different <00:24:16.088>areas <00:24:16.421>of <00:24:16.754>your <00:24:17.087>application.

539
00:24:19.215 --> 00:24:23.635
<00:24:19.215>We <00:24:19.355>talked <00:24:19.495>about <00:24:19.635>the <00:24:19.774>SSR <00:24:19.915>or <00:24:20.054>server <00:24:20.195>side <00:24:20.334>rendering <00:24:20.475>versus <00:24:20.615>SSG

540
00:24:23.655 --> 00:24:25.755
<00:24:23.655>or <00:24:24.004>static <00:24:24.355>site <00:24:24.705>generation <00:24:25.055>techniques

541
00:24:25.775 --> 00:24:28.235
<00:24:25.775>for <00:24:26.008>making <00:24:26.241>those <00:24:26.475>front-end <00:24:26.708>application <00:24:26.941>pages <00:24:27.175>nice

542
00:24:28.235 --> 00:24:29.555
<00:24:28.235>and <00:24:28.630>spiffy <00:24:29.027>and <00:24:29.423>good.

543
00:24:31.125 --> 00:24:34.025
<00:24:31.125>And <00:24:31.280>lastly, <00:24:31.436>we <00:24:31.591>talk <00:24:31.747>about <00:24:31.902>design <00:24:32.058>systems, <00:24:32.213>which <00:24:32.369>allow <00:24:32.525>you

544
00:24:34.025 --> 00:24:36.265
<00:24:34.025>to <00:24:34.258>have <00:24:34.491>a <00:24:34.725>cohesive, <00:24:34.958>unified, <00:24:35.191>front-end <00:24:35.425>experience

545
00:24:36.485 --> 00:24:40.825
<00:24:36.485>for <00:24:36.625>your <00:24:36.764>users, <00:24:36.905>uh, <00:24:37.044>that <00:24:37.185>then <00:24:37.324>makes <00:24:37.465>you <00:24:37.604>site <00:24:37.745>feel <00:24:37.885>cohesive

546
00:24:41.125 --> 00:24:43.945
<00:24:41.125>and <00:24:41.300>your <00:24:41.475>developers <00:24:41.650>happy <00:24:41.825>not <00:24:42.000>having <00:24:42.175>to <00:24:42.350>recreate <00:24:42.525>work.

547
00:24:46.205 --> 00:24:48.675
<00:24:46.205>Thank <00:24:46.405>you <00:24:46.605>to <00:24:46.804>you, <00:24:47.004>the <00:24:47.205>audience <00:24:47.405>for <00:24:47.605>listening

548
00:24:48.695 --> 00:24:51.115
<00:24:48.695>and <00:24:48.870>the <00:24:49.044>conference <00:24:49.220>organizers <00:24:49.395>for <00:24:49.570>setting <00:24:49.745>this <00:24:49.919>all <00:24:50.095>up.

549
00:24:51.245 --> 00:24:53.915
<00:24:51.245>Being <00:24:51.445>remote <00:24:51.645>is <00:24:51.844>hard. <00:24:52.044>Um, <00:24:52.245>I'm <00:24:52.445>Josh <00:24:52.645>Goldberg.

550
00:24:53.935 --> 00:24:56.275
<00:24:53.935>You <00:24:54.090>can <00:24:54.246>find <00:24:54.401>me <00:24:54.557>on <00:24:54.712>Twitter <00:24:54.868>at <00:24:55.023>joshua <00:24:55.179>k <00:24:55.335>Goldberg.

551
00:24:56.695 --> 00:24:59.315
<00:24:56.695>And <00:24:56.870>again, <00:24:57.044>you <00:24:57.220>can <00:24:57.395>view <00:24:57.570>this <00:24:57.745>presentation, <00:24:57.919>slide <00:24:58.095>notes,

552
00:24:59.495 --> 00:25:02.755
<00:24:59.495>et <00:24:59.844>cetera <00:25:00.195>on <00:25:00.544>my <00:25:00.895>website@joshuakgoldberg.com.

553
00:25:03.735 --> 00:25:04.735
Thanks.

554
00:25:11.005 --> 00:25:14.895
<00:25:11.005>Alright, <00:25:11.205>Josh, <00:25:11.405>uh, <00:25:11.605>thank <00:25:11.805>you <00:25:12.005>for <00:25:12.205>your <00:25:12.405>presentation.

555
00:25:14.925 --> 00:25:16.975
<00:25:14.925>This <00:25:15.274>has <00:25:15.625>been <00:25:15.975>very <00:25:16.325>informative.

556
00:25:17.515 --> 00:25:19.695
<00:25:17.515>Um, <00:25:18.915>yes,

557
00:25:19.755 --> 00:25:23.135
<00:25:19.755>so <00:25:19.955>I <00:25:20.155>have <00:25:20.355>some <00:25:20.555>questions <00:25:20.755>from <00:25:20.955>the <00:25:21.155>audience.

558
00:25:23.445 --> 00:25:27.775
<00:25:23.445>Just <00:25:23.585>let <00:25:23.725>me <00:25:23.865>pull <00:25:24.004>those <00:25:24.145>up <00:25:24.284>real <00:25:24.425>quick. <00:25:24.564>There <00:25:24.705>they <00:25:24.845>are.

559
00:25:28.135 --> 00:25:31.975
<00:25:28.135>I <00:25:28.251>think <00:25:28.368>we <00:25:28.485>can <00:25:28.601>go <00:25:28.718>through <00:25:28.835>them <00:25:28.951>in <00:25:29.068>um, <00:25:29.185>order <00:25:29.301>of <00:25:29.418>most <00:25:29.535>voted.

560
00:25:32.675 --> 00:25:37.095
<00:25:32.675>So <00:25:32.815>I <00:25:32.955>have <00:25:33.095>one <00:25:33.235>question <00:25:33.375>from <00:25:33.514>Michael, <00:25:33.655>er <00:25:33.794>or <00:25:33.935>Michel <00:25:34.075>er.

561
00:25:37.755 --> 00:25:40.055
<00:25:37.755>Um, <00:25:37.955>how <00:25:38.155>do <00:25:38.355>you <00:25:38.555>ensure <00:25:38.755>the <00:25:38.955>same <00:25:39.155>look

562
00:25:40.055 --> 00:25:42.215
<00:25:40.055>and <00:25:40.288>feel <00:25:40.521>about <00:25:40.755>all <00:25:40.988>micro <00:25:41.221>front <00:25:41.455>ends?

563
00:25:42.335 --> 00:25:45.495
<00:25:42.335>I <00:25:42.490>think <00:25:42.646>you <00:25:42.801>mentioned <00:25:42.957>that <00:25:43.112>with <00:25:43.268>your <00:25:43.423>atoms <00:25:43.579>atomic, <00:25:43.735>uh,

564
00:25:45.495 --> 00:25:46.575
<00:25:45.495>design <00:25:46.467>principle.

565
00:25:46.675 --> 00:25:49.775
<00:25:46.675>Any <00:25:46.850>best <00:25:47.024>practices <00:25:47.200>of <00:25:47.375>pitfalls <00:25:47.550>you <00:25:47.725>can <00:25:47.899>talk <00:25:48.075>about,

566
00:25:52.015 --> 00:25:55.395
<00:25:52.015>Uh, <00:25:52.248>pitfalls <00:25:52.481>regarding <00:25:52.715>design <00:25:52.948>systems, <00:25:53.181>for <00:25:53.415>example,

567
00:25:57.435 --> 00:25:58.635
<00:25:57.435>I <00:25:57.975>suppose <00:25:58.514>so.

568
00:26:00.505 --> 00:26:03.355
<00:26:00.505>Sure. <00:26:00.645>Um, <00:26:00.785>I <00:26:00.925>didn't <00:26:01.065>go <00:26:01.205>too <00:26:01.345>much <00:26:01.485>into <00:26:01.625>the, <00:26:01.765>the <00:26:01.905>pitfalls

569
00:26:03.375 --> 00:26:04.395
<00:26:03.375>of <00:26:03.681>micro <00:26:03.987>front <00:26:04.293>ends

570
00:26:04.395 --> 00:26:06.635
<00:26:04.395>or <00:26:04.595>design <00:26:04.795>systems, <00:26:04.995>so <00:26:05.195>I'll <00:26:05.395>cover <00:26:05.595>both <00:26:05.795>briefly,

571
00:26:06.935 --> 00:26:09.395
<00:26:06.935>but <00:26:07.110>if <00:26:07.284>there's <00:26:07.460>more <00:26:07.635>specific <00:26:07.810>something <00:26:07.985>else <00:26:08.159>you <00:26:08.335>wanna

572
00:26:09.395 --> 00:26:10.515
<00:26:09.395>cover, <00:26:09.647>I <00:26:09.899>certainly <00:26:10.151>can <00:26:10.403>answer.

573
00:26:11.135 --> 00:26:12.555
<00:26:11.135>Um, <00:26:12.413>sorry,

574
00:26:12.625 --> 00:26:16.315
<00:26:12.625>I've <00:26:12.905>had <00:26:13.185>a <00:26:13.465>sore <00:26:13.745>throat <00:26:14.025>paper.

575
00:26:17.055 --> 00:26:20.235
<00:26:17.055>Um, <00:26:17.255>yeah, <00:26:17.455>so, <00:26:17.655>um, <00:26:17.855>with <00:26:18.055>micro <00:26:18.255>front <00:26:18.455>ends

576
00:26:20.235 --> 00:26:22.715
<00:26:20.235>and <00:26:20.468>microservices, <00:26:20.701>you <00:26:20.935>have <00:26:21.168>a <00:26:21.401>coordination <00:26:21.635>issue

577
00:26:22.885 --> 00:26:24.355
<00:26:22.885>where <00:26:23.149>it <00:26:23.414>can <00:26:23.678>be <00:26:23.943>difficult <00:26:24.208>to

578
00:26:25.275 --> 00:26:27.115
<00:26:25.275>maintain <00:26:25.508>standard <00:26:25.741>tooling <00:26:25.975>across <00:26:26.208>all <00:26:26.441>of <00:26:26.675>them.

579
00:26:28.055 --> 00:26:29.595
<00:26:28.055>And <00:26:28.209>even <00:26:28.363>if <00:26:28.517>you <00:26:28.671>do, <00:26:28.825>you <00:26:28.979>still <00:26:29.133>have <00:26:29.287>a <00:26:29.441>lot

580
00:26:29.595 --> 00:26:31.035
<00:26:29.595>of <00:26:29.919>different <00:26:30.243>applications <00:26:30.567>getting <00:26:30.891>deployed.

581
00:26:31.535 --> 00:26:36.155
<00:26:31.535>So <00:26:31.662>it <00:26:31.789>can <00:26:31.916>be <00:26:32.044>difficult <00:26:32.171>to <00:26:32.298>make <00:26:32.425>sure <00:26:32.553>that <00:26:32.680>F1 <00:26:32.807>micro <00:26:32.935>frontend,

582
00:26:36.375 --> 00:26:39.795
<00:26:36.375>uh, <00:26:36.502>relies <00:26:36.629>on <00:26:36.756>another <00:26:36.884>for <00:26:37.011>let's <00:26:37.138>say <00:26:37.265>a <00:26:37.393>route <00:26:37.520>that <00:26:37.647>gets <00:26:37.775>linked

583
00:26:39.795 --> 00:26:42.875
<00:26:39.795>between <00:26:39.935>one <00:26:40.075>to <00:26:40.215>the <00:26:40.355>other, <00:26:40.495>that <00:26:40.635>if <00:26:40.775>you <00:26:40.915>have <00:26:41.055>updates <00:26:41.195>working

584
00:26:42.875 --> 00:26:45.765
<00:26:42.875>between <00:26:42.991>both <00:26:43.108>of <00:26:43.225>them <00:26:43.341>that <00:26:43.458>go <00:26:43.575>out <00:26:43.691>at <00:26:43.808>about <00:26:43.925>the <00:26:44.041>same <00:26:44.158>time, <00:26:44.275>um,

585
00:26:45.895 --> 00:26:48.045
<00:26:45.895>let's <00:26:46.035>say <00:26:46.175>that <00:26:46.315>micro <00:26:46.455>front <00:26:46.595>and <00:26:46.735>A <00:26:46.875>links <00:26:47.014>to <00:26:47.155>micro <00:26:47.295>front

586
00:26:48.045 --> 00:26:50.685
<00:26:48.045>and <00:26:48.200>B <00:26:48.356>at <00:26:48.511>slash <00:26:48.667>B <00:26:48.822>and <00:26:48.978>then <00:26:49.133>B <00:26:49.289>gets <00:26:49.445>renamed

587
00:26:50.685 --> 00:26:54.005
<00:26:50.685>and <00:26:50.825>changed <00:26:50.965>to <00:26:51.105>slash <00:26:51.245>C, <00:26:51.385>how <00:26:51.524>do <00:26:51.665>you <00:26:51.804>route <00:26:51.945>from <00:26:52.085>B2C?

588
00:26:54.005 --> 00:26:56.165
<00:26:54.005>Maybe <00:26:54.160>there's <00:26:54.316>a <00:26:54.471>new <00:26:54.627>application <00:26:54.782>set <00:26:54.938>up <00:26:55.093>to <00:26:55.249>handle <00:26:55.405>B.

589
00:26:56.505 --> 00:27:00.685
<00:26:56.505>So <00:26:56.645>being <00:26:56.785>able <00:26:56.925>to <00:26:57.065>keep <00:26:57.205>yourself <00:26:57.345>good <00:26:57.485>at <00:26:57.625>setting <00:26:57.765>up <00:26:57.905>redirects

590
00:27:00.745 --> 00:27:03.485
<00:27:00.745>or <00:27:00.978>having <00:27:01.211>incremental <00:27:01.445>rollouts <00:27:01.678>of, <00:27:01.911>let's <00:27:02.145>say,

591
00:27:03.485 --> 00:27:05.405
<00:27:03.485>rolling <00:27:03.718>out <00:27:03.951>the <00:27:04.185>B2C <00:27:04.418>renamed, <00:27:04.651>then <00:27:04.885>the,

592
00:27:05.465 --> 00:27:06.565
<00:27:05.465>the <00:27:05.712>newbie <00:27:05.960>can <00:27:06.207>be <00:27:06.455>typical.

593
00:27:07.665 --> 00:27:10.165
<00:27:07.665>Um, <00:27:07.840>for <00:27:08.014>design <00:27:08.190>systems, <00:27:08.365>it's <00:27:08.540>a <00:27:08.715>similar <00:27:08.889>issue <00:27:09.065>where

594
00:27:10.735 --> 00:27:13.525
<00:27:10.735>let's <00:27:10.935>say <00:27:11.135>you <00:27:11.334>have, <00:27:11.534>uh, <00:27:11.735>a <00:27:11.935>form <00:27:12.135>component

595
00:27:13.665 --> 00:27:15.885
<00:27:13.665>and <00:27:13.840>one <00:27:14.014>of <00:27:14.190>its <00:27:14.365>props, <00:27:14.540>its <00:27:14.715>properties <00:27:14.889>gets <00:27:15.065>renamed,

596
00:27:15.885 --> 00:27:19.685
<00:27:15.885>you <00:27:16.012>go <00:27:16.139>from <00:27:16.266>calling <00:27:16.394>it <00:27:16.521>fields <00:27:16.648>to <00:27:16.775>ate <00:27:16.903>contents <00:27:17.030>or <00:27:17.157>some <00:27:17.285>such.

597
00:27:20.305 --> 00:27:22.285
<00:27:20.305>Um, <00:27:20.460>now <00:27:20.616>you <00:27:20.771>have <00:27:20.927>an <00:27:21.082>update <00:27:21.238>to <00:27:21.393>your <00:27:21.549>design <00:27:21.705>system

598
00:27:22.285 --> 00:27:23.965
<00:27:22.285>that <00:27:22.460>you <00:27:22.635>have <00:27:22.810>to <00:27:22.985>roll <00:27:23.160>out <00:27:23.335>to <00:27:23.510>a <00:27:23.685>bajillion

599
00:27:23.965 --> 00:27:25.125
<00:27:23.965>different <00:27:24.486>frontend <00:27:25.009>applications.

600
00:27:25.665 --> 00:27:28.685
<00:27:25.665>Um, <00:27:25.792>do <00:27:25.919>you <00:27:26.046>get <00:27:26.174>all <00:27:26.301>teams <00:27:26.428>to <00:27:26.555>update <00:27:26.683>at <00:27:26.810>the <00:27:26.937>same <00:27:27.065>time?

601
00:27:28.915 --> 00:27:30.445
<00:27:28.915>What <00:27:29.144>happens <00:27:29.374>if <00:27:29.603>a <00:27:29.832>team <00:27:30.062>is <00:27:30.292>busy

602
00:27:30.545 --> 00:27:31.965
<00:27:30.545>and <00:27:30.800>doesn't <00:27:31.056>have <00:27:31.311>time <00:27:31.567>to <00:27:31.822>update?

603
00:27:32.155 --> 00:27:33.245
<00:27:32.155>What <00:27:32.400>happens <00:27:32.645>if <00:27:32.890>you <00:27:33.136>realize

604
00:27:33.245 --> 00:27:35.165
<00:27:33.245>after <00:27:33.419>making <00:27:33.594>the <00:27:33.770>change <00:27:33.945>that <00:27:34.120>it <00:27:34.294>actually <00:27:34.469>breaks <00:27:34.645>some

605
00:27:35.165 --> 00:27:37.605
<00:27:35.165>applications <00:27:35.305>so <00:27:35.445>you <00:27:35.585>have <00:27:35.725>to <00:27:35.865>roll <00:27:36.004>back <00:27:36.145>or <00:27:36.284>update <00:27:36.425>for <00:27:36.565>them?

606
00:27:38.585 --> 00:27:41.045
<00:27:38.585>Um, <00:27:38.785>and <00:27:38.985>when <00:27:39.185>I <00:27:39.385>was <00:27:39.585>at <00:27:39.785>Microsoft, <00:27:39.985>uh,

607
00:27:41.045 --> 00:27:43.805
<00:27:41.045>they <00:27:41.245>used <00:27:41.445>the <00:27:41.645>office <00:27:41.845>fabric, <00:27:42.045>uh, <00:27:42.245>design <00:27:42.445>system

608
00:27:43.825 --> 00:27:47.365
<00:27:43.825>and <00:27:43.965>the <00:27:44.105>office <00:27:44.245>team <00:27:44.385>and <00:27:44.525>most <00:27:44.665>teams <00:27:44.805>were <00:27:44.945>behind <00:27:45.085>some <00:27:45.225>number

609
00:27:47.425 --> 00:27:49.445
<00:27:47.425>of <00:27:47.658>days <00:27:47.891>or <00:27:48.125>weeks, <00:27:48.358>perhaps <00:27:48.591>even <00:27:48.825>months

610
00:27:49.515 --> 00:27:51.445
<00:27:49.515>because <00:27:49.795>there <00:27:50.075>was <00:27:50.355>just <00:27:50.635>no <00:27:50.915>time

611
00:27:51.545 --> 00:27:53.485
<00:27:51.545>to <00:27:51.745>constantly <00:27:51.945>be <00:27:52.145>updating <00:27:52.345>for <00:27:52.545>this <00:27:52.745>design <00:27:52.945>system.

612
00:27:54.385 --> 00:27:56.965
<00:27:54.385>Uh, <00:27:54.585>so <00:27:54.785>definitely <00:27:54.985>some <00:27:55.185>challenges <00:27:55.385>there <00:27:55.585>in <00:27:55.785>coordination,

613
00:27:57.585 --> 00:28:00.045
<00:27:57.585>but <00:27:57.712>I <00:27:57.839>will <00:27:57.966>say <00:27:58.094>that, <00:27:58.221>um, <00:27:58.348>in <00:27:58.475>every <00:27:58.603>place <00:27:58.730>I <00:27:58.857>have <00:27:58.985>been

614
00:28:00.045 --> 00:28:02.605
<00:28:00.045>so <00:28:00.220>far <00:28:00.395>it <00:28:00.570>has <00:28:00.745>definitely <00:28:00.920>been <00:28:01.095>worth <00:28:01.270>the <00:28:01.445>coordination

615
00:28:02.805 --> 00:28:06.125
<00:28:02.805>challenges, <00:28:03.005>just <00:28:03.205>having <00:28:03.405>someone <00:28:03.605>make <00:28:03.805>an <00:28:04.005>accessible <00:28:04.205>unified

616
00:28:06.125 --> 00:28:08.565
<00:28:06.125>design <00:28:06.405>system <00:28:06.685>or <00:28:06.965>a <00:28:07.245>discreet, <00:28:07.525>uh,

617
00:28:08.565 --> 00:28:10.605
<00:28:08.565>individually <00:28:08.915>crafted <00:28:09.265>frontend <00:28:09.615>apps <00:28:09.965>at

618
00:28:10.605 --> 00:28:11.645
<00:28:10.605>some <00:28:10.839>level <00:28:11.073>for <00:28:11.307>the <00:28:11.541>teams.

619
00:28:14.195 --> 00:28:17.085
<00:28:14.195>Alright, <00:28:14.428>thank <00:28:14.661>you. <00:28:14.895>Um, <00:28:15.128>thank <00:28:15.361>you <00:28:15.595>Josh.

620
00:28:17.705 --> 00:28:21.125
<00:28:17.705>Uh, <00:28:17.985>another <00:28:18.264>question <00:28:18.544>from, <00:28:18.824>uh, <00:28:19.105>Michael.

621
00:28:21.505 --> 00:28:23.125
<00:28:21.505>Uh, <00:28:21.855>do <00:28:22.205>you <00:28:22.555>have, <00:28:22.905>uh,

622
00:28:23.345 --> 00:28:27.205
<00:28:23.345>do <00:28:23.500>you <00:28:23.656>use <00:28:23.811>any <00:28:23.967>frameworks <00:28:24.122>like <00:28:24.278>Luigi <00:28:24.433>Taylor, <00:28:24.589>single <00:28:24.745>SPA

623
00:28:27.745 --> 00:28:29.805
<00:28:27.745>or <00:28:27.978>you <00:28:28.211>have <00:28:28.445>created <00:28:28.678>your <00:28:28.911>own <00:28:29.145>solution?

624
00:28:31.645 --> 00:28:35.005
<00:28:31.645>I <00:28:31.772>really <00:28:31.899>like <00:28:32.026>next <00:28:32.154>Js. <00:28:32.281>Uh, <00:28:32.408>we've <00:28:32.535>started <00:28:32.663>using <00:28:32.790>that <00:28:32.917>a <00:28:33.045>lot.

625
00:28:35.345 --> 00:28:39.405
<00:28:35.345>Um, <00:28:35.520>next <00:28:35.695>Js <00:28:35.870>we <00:28:36.045>is, <00:28:36.220>we <00:28:36.395>originally <00:28:36.570>used <00:28:36.745>Gatsby

626
00:28:39.505 --> 00:28:43.405
<00:28:39.505>as <00:28:39.705>our <00:28:39.905>next <00:28:40.105>gen <00:28:40.305>framework, <00:28:40.505>um, <00:28:40.705>following <00:28:40.905>years

627
00:28:43.425 --> 00:28:45.965
<00:28:43.425>of <00:28:43.565>using <00:28:43.705>a <00:28:43.845>Ruby <00:28:43.985>on <00:28:44.125>rails <00:28:44.264>with <00:28:44.405>custom <00:28:44.544>web <00:28:44.685>pack <00:28:44.825>builds,

628
00:28:45.965 --> 00:28:48.365
<00:28:45.965>definitely <00:28:46.165>do <00:28:46.365>not <00:28:46.564>recommend <00:28:46.764>custom <00:28:46.965>web <00:28:47.165>pack <00:28:47.365>builds.

629
00:28:48.465 --> 00:28:51.405
<00:28:48.465>I'm <00:28:48.605>currently <00:28:48.745>in <00:28:48.885>the <00:28:49.024>process <00:28:49.165>of <00:28:49.304>moving <00:28:49.445>the <00:28:49.584>web <00:28:49.725>pack <00:28:49.865>five.

630
00:28:51.645 --> 00:28:54.205
<00:28:51.645>I <00:28:51.820>filed <00:28:51.995>like <00:28:52.170>four <00:28:52.345>or <00:28:52.520>five <00:28:52.695>issues <00:28:52.870>on <00:28:53.045>GitHub.

631
00:28:54.205 --> 00:28:56.725
<00:28:54.205>I've <00:28:54.379>tweeted <00:28:54.554>about <00:28:54.730>it <00:28:54.905>angrily. <00:28:55.080>It's, <00:28:55.254>it's <00:28:55.429>a <00:28:55.605>pain.

632
00:28:57.305 --> 00:29:00.165
<00:28:57.305>Um, <00:28:57.538>definitely <00:28:57.771>recommend <00:28:58.005>something <00:28:58.238>like <00:28:58.471>next <00:28:58.705>js.

633
00:29:00.425 --> 00:29:02.485
<00:29:00.425>Uh, <00:29:00.625>one <00:29:00.825>advantage <00:29:01.024>it <00:29:01.225>has <00:29:01.425>over <00:29:01.625>Gadsby <00:29:01.825>is

634
00:29:02.485 --> 00:29:04.965
<00:29:02.485>that <00:29:02.659>it <00:29:02.834>can <00:29:03.010>do <00:29:03.185>both <00:29:03.360>SSR <00:29:03.534>server <00:29:03.709>site <00:29:03.885>rendered

635
00:29:05.225 --> 00:29:08.685
<00:29:05.225>and <00:29:05.380>SSG <00:29:05.536>static <00:29:05.691>site <00:29:05.847>generation, <00:29:06.002>uh, <00:29:06.158>which <00:29:06.313>we <00:29:06.469>really <00:29:06.625>like.

636
00:29:08.685 --> 00:29:10.525
<00:29:08.685>It's <00:29:08.885>also <00:29:09.085>got <00:29:09.284>a <00:29:09.485>really <00:29:09.685>good <00:29:09.885>dev <00:29:10.085>workflow.

637
00:29:10.745 --> 00:29:13.325
<00:29:10.745>Things <00:29:10.978>are <00:29:11.211>fast, <00:29:11.445>the <00:29:11.678>documentation <00:29:11.911>is <00:29:12.145>fantastic.

638
00:29:14.025 --> 00:29:16.565
<00:29:14.025>So <00:29:14.225>highly <00:29:14.425>recommend <00:29:14.625>next <00:29:14.825>JS <00:29:15.025>for <00:29:15.225>hybrid <00:29:15.425>apps,

639
00:29:16.625 --> 00:29:18.525
<00:29:16.625>and <00:29:16.858>I <00:29:17.091>really <00:29:17.325>like <00:29:17.558>Gadsby <00:29:17.791>as <00:29:18.025>well.

640
00:29:20.505 --> 00:29:25.005
<00:29:20.505>All <00:29:20.680>right. <00:29:20.855>Um, <00:29:21.030>next <00:29:21.205>question <00:29:21.380>from, <00:29:21.555>uh, <00:29:21.730>Sebastian <00:29:21.905>Fitz.

641
00:29:26.345 --> 00:29:31.165
<00:29:26.345>Uh, <00:29:26.520>what <00:29:26.695>about <00:29:26.870>horizontal <00:29:27.045>splitting <00:29:27.220>of <00:29:27.395>micro <00:29:27.570>front <00:29:27.745>ends?

642
00:29:31.545 --> 00:29:33.245
<00:29:31.545>Do <00:29:31.745>you <00:29:31.945>have <00:29:32.145>any <00:29:32.345>experience <00:29:32.545>in <00:29:32.745>your <00:29:32.945>team

643
00:29:33.385 --> 00:29:35.565
<00:29:33.385>or <00:29:33.618>do <00:29:33.851>you <00:29:34.085>stick <00:29:34.318>to <00:29:34.551>vertical <00:29:34.785>splitting?

644
00:29:36.225 --> 00:29:40.965
<00:29:36.225>Ooh, <00:29:36.380>great <00:29:36.536>question. <00:29:36.691>Um, <00:29:36.847>this <00:29:37.002>is <00:29:37.158>an <00:29:37.313>even <00:29:37.469>newer <00:29:37.625>topic.

645
00:29:41.665 --> 00:29:44.045
<00:29:41.665>So <00:29:41.945>what, <00:29:42.225>what <00:29:42.504>is <00:29:42.784>horizontal <00:29:43.065>splitting

646
00:29:44.045 --> 00:29:45.125
<00:29:44.045>versus <00:29:44.531>vertical <00:29:45.017>splitting?

647
00:29:45.125 --> 00:29:47.565
<00:29:45.125>Why <00:29:45.280>do <00:29:45.436>we <00:29:45.591>want <00:29:45.747>it? <00:29:45.902>Vertical <00:29:46.058>splitting <00:29:46.213>is <00:29:46.369>splitting <00:29:46.525>up

648
00:29:47.565 --> 00:29:49.565
<00:29:47.565>by <00:29:47.915>areas <00:29:48.265>of <00:29:48.615>application <00:29:48.965>responsibility.

649
00:29:49.695 --> 00:29:51.965
<00:29:49.695>Let's <00:29:49.850>say <00:29:50.006>you <00:29:50.161>have <00:29:50.317>a <00:29:50.472>catalog <00:29:50.628>and <00:29:50.783>a <00:29:50.939>pricing <00:29:51.095>page

650
00:29:51.965 --> 00:29:52.965
<00:29:51.965>and <00:29:52.264>a <00:29:52.564>learner <00:29:52.865>dashboard,

651
00:29:52.965 --> 00:29:54.845
<00:29:52.965>and <00:29:53.198>these <00:29:53.431>are <00:29:53.665>three <00:29:53.898>separate <00:29:54.131>individual <00:29:54.365>apps

652
00:29:54.845 --> 00:29:59.045
<00:29:54.845>where <00:29:55.000>the <00:29:55.156>entire <00:29:55.311>page <00:29:55.467>is, <00:29:55.622>is <00:29:55.778>generated <00:29:55.933>by <00:29:56.089>one <00:29:56.245>application.

653
00:29:59.825 --> 00:30:03.725
<00:29:59.825>Um, <00:30:00.000>that's <00:30:00.175>why, <00:30:00.350>um, <00:30:00.525>for <00:30:00.700>example, <00:30:00.875>the <00:30:01.050>the, <00:30:01.225>uh,

654
00:30:03.725 --> 00:30:05.245
<00:30:03.725>catalog <00:30:04.067>page <00:30:04.408>looks <00:30:04.751>so <00:30:05.092>unified.

655
00:30:05.245 --> 00:30:07.925
<00:30:05.245>The <00:30:05.385>header, <00:30:05.524>the <00:30:05.665>page <00:30:05.804>contents, <00:30:05.945>the <00:30:06.084>footer, <00:30:06.225>it's <00:30:06.364>all <00:30:06.504>one <00:30:06.645>app.

656
00:30:08.375 --> 00:30:09.805
<00:30:08.375>Horizontal <00:30:08.696>is <00:30:09.018>when <00:30:09.340>different <00:30:09.662>parts

657
00:30:09.805 --> 00:30:12.325
<00:30:09.805>of <00:30:10.005>the <00:30:10.205>application <00:30:10.405>are <00:30:10.605>generated <00:30:10.805>by <00:30:11.005>different <00:30:11.205>applications.

658
00:30:12.665 --> 00:30:15.365
<00:30:12.665>You <00:30:12.865>might <00:30:13.065>have <00:30:13.264>say <00:30:13.465>a <00:30:13.665>header <00:30:13.865>application <00:30:14.065>so

659
00:30:15.365 --> 00:30:17.525
<00:30:15.365>that <00:30:15.520>you <00:30:15.676>only <00:30:15.831>have <00:30:15.987>one <00:30:16.142>header <00:30:16.298>across <00:30:16.453>the <00:30:16.609>entire <00:30:16.765>site,

660
00:30:17.945 --> 00:30:20.605
<00:30:17.945>but <00:30:18.072>then <00:30:18.199>you <00:30:18.326>have <00:30:18.454>page <00:30:18.581>contents <00:30:18.708>and <00:30:18.835>then <00:30:18.963>you <00:30:19.090>have <00:30:19.217>a <00:30:19.345>footer.

661
00:30:20.605 --> 00:30:23.725
<00:30:20.605>So <00:30:20.760>three <00:30:20.916>applications <00:30:21.071>for <00:30:21.227>three <00:30:21.382>sections <00:30:21.538>of <00:30:21.693>a <00:30:21.849>single <00:30:22.005>page.

662
00:30:24.665 --> 00:30:27.005
<00:30:24.665>An <00:30:24.820>advantage <00:30:24.976>of <00:30:25.131>this <00:30:25.287>is <00:30:25.442>that <00:30:25.598>you <00:30:25.753>no <00:30:25.909>longer <00:30:26.065>have

663
00:30:27.005 --> 00:30:29.325
<00:30:27.005>to <00:30:27.160>implement <00:30:27.316>a <00:30:27.471>header <00:30:27.627>per <00:30:27.782>different <00:30:27.938>part <00:30:28.093>of <00:30:28.249>the <00:30:28.405>site

664
00:30:29.345 --> 00:30:30.885
<00:30:29.345>or <00:30:29.518>a <00:30:29.691>footer <00:30:29.864>per <00:30:30.038>different <00:30:30.211>part <00:30:30.384>of <00:30:30.557>the <00:30:30.731>site.

665
00:30:31.225 --> 00:30:33.445
<00:30:31.225>But <00:30:31.365>one <00:30:31.504>of <00:30:31.645>the <00:30:31.784>disadvantages <00:30:31.925>is <00:30:32.064>it <00:30:32.205>means <00:30:32.344>that <00:30:32.485>you <00:30:32.625>have

666
00:30:34.085 --> 00:30:36.525
<00:30:34.085>multiple <00:30:34.318>applications <00:30:34.551>depended <00:30:34.785>on <00:30:35.018>per <00:30:35.251>each <00:30:35.485>part

667
00:30:36.565 --> 00:30:38.805
<00:30:36.565>of <00:30:36.765>your <00:30:36.965>site, <00:30:37.165>and <00:30:37.365>that <00:30:37.565>gets <00:30:37.765>really <00:30:37.965>complex.

668
00:30:39.875 --> 00:30:43.135
<00:30:39.875>Uh, <00:30:40.002>back <00:30:40.129>in <00:30:40.256>the <00:30:40.384>day, <00:30:40.511>people <00:30:40.638>used <00:30:40.765>to <00:30:40.893>use <00:30:41.020>iframes <00:30:41.147>for <00:30:41.275>that

669
00:30:43.515 --> 00:30:44.815
<00:30:43.515>and <00:30:43.807>iframes <00:30:44.100>are <00:30:44.392>really <00:30:44.685>slow

670
00:30:44.955 --> 00:30:48.095
<00:30:44.955>and <00:30:45.095>no <00:30:45.235>one, <00:30:45.375>no <00:30:45.514>one <00:30:45.655>wants <00:30:45.794>that, <00:30:45.935>so <00:30:46.074>would <00:30:46.215>not <00:30:46.355>recommend.

671
00:30:48.485 --> 00:30:49.895
<00:30:48.485>That <00:30:48.802>still <00:30:49.119>gets <00:30:49.436>mentioned <00:30:49.754>sometimes.

672
00:30:50.435 --> 00:30:53.615
<00:30:50.435>Um, <00:30:50.610>I <00:30:50.784>have <00:30:50.960>not <00:30:51.135>personally <00:30:51.310>played <00:30:51.485>with <00:30:51.659>horizontal <00:30:51.835>scaling

673
00:30:53.615 --> 00:30:56.135
<00:30:53.615>because <00:30:53.790>it <00:30:53.965>of <00:30:54.140>how <00:30:54.315>much <00:30:54.490>more <00:30:54.665>complex <00:30:54.840>it <00:30:55.015>is.

674
00:30:56.315 --> 00:30:58.015
<00:30:56.315>Um, <00:30:56.515>I <00:30:56.715>haven't <00:30:56.915>had <00:30:57.115>a <00:30:57.315>need <00:30:57.515>for <00:30:57.715>it.

675
00:30:58.455 --> 00:31:01.055
<00:30:58.455>I <00:30:58.595>wouldn't <00:30:58.735>recommend <00:30:58.875>it <00:30:59.014>if <00:30:59.155>you <00:30:59.294>don't <00:30:59.435>have <00:30:59.574>anyone <00:30:59.715>on <00:30:59.855>your

676
00:31:01.055 --> 00:31:04.175
<00:31:01.055>team <00:31:01.230>who <00:31:01.405>has, <00:31:01.580>uh, <00:31:01.755>either <00:31:01.930>never <00:31:02.105>used <00:31:02.280>it <00:31:02.455>before

677
00:31:04.315 --> 00:31:06.655
<00:31:04.315>or <00:31:04.515>a <00:31:04.715>lot <00:31:04.915>of <00:31:05.115>time <00:31:05.315>to, <00:31:05.515>to <00:31:05.715>investigate.

678
00:31:07.155 --> 00:31:08.375
<00:31:07.155>But <00:31:07.374>in <00:31:07.594>theory, <00:31:07.813>it <00:31:08.033>sounds <00:31:08.253>cool.

679
00:31:08.375 --> 00:31:10.455
<00:31:08.375>Just <00:31:08.515>in <00:31:08.655>practice, <00:31:08.795>it's <00:31:08.935>not <00:31:09.075>a <00:31:09.215>common <00:31:09.355>enough <00:31:09.495>technique <00:31:09.635>for <00:31:09.775>me

680
00:31:10.455 --> 00:31:12.175
<00:31:10.455>to <00:31:10.629>really <00:31:10.804>have <00:31:10.980>put <00:31:11.155>a <00:31:11.330>lot <00:31:11.504>of <00:31:11.679>thought <00:31:11.855>into.

681
00:31:15.955 --> 00:31:17.495
<00:31:15.955>All <00:31:16.301>right. <00:31:16.648>Thank <00:31:16.994>you. <00:31:17.341>Um,

682
00:31:17.875 --> 00:31:19.895
<00:31:17.875>we <00:31:18.050>still <00:31:18.225>have <00:31:18.400>some <00:31:18.575>more <00:31:18.750>time <00:31:18.925>for <00:31:19.100>more <00:31:19.275>questions.

683
00:31:20.555 --> 00:31:25.375
<00:31:20.555>Um, <00:31:20.682>next <00:31:20.809>one, <00:31:20.936>by <00:31:21.064>Siva <00:31:21.191>Kumar, <00:31:21.318>um, <00:31:21.445>is <00:31:21.573>it <00:31:21.700>a <00:31:21.827>good <00:31:21.955>idea

684
00:31:25.395 --> 00:31:28.575
<00:31:25.395>to <00:31:25.570>keep <00:31:25.745>micro <00:31:25.920>frontend <00:31:26.095>apps <00:31:26.270>in <00:31:26.445>a <00:31:26.620>mono <00:31:26.795>repo?

685
00:31:29.245 --> 00:31:34.175
<00:31:29.245>Yeah, <00:31:29.352>I, <00:31:29.460>I <00:31:29.568>would <00:31:29.675>love <00:31:29.783>it <00:31:29.891>if <00:31:29.998>you <00:31:30.106>can, <00:31:30.214>if <00:31:30.321>you <00:31:30.429>can <00:31:30.537>get <00:31:30.645>that

686
00:31:34.175 --> 00:31:35.535
<00:31:34.175>to <00:31:34.481>work <00:31:34.787>good <00:31:35.093>for <00:31:35.399>you.

687
00:31:35.535 --> 00:31:36.775
<00:31:35.535>That's <00:31:35.907>a <00:31:36.279>fantastic <00:31:36.651>idea.

688
00:31:37.055 --> 00:31:39.255
<00:31:37.055>I <00:31:37.230>think <00:31:37.405>that <00:31:37.580>would <00:31:37.755>be <00:31:37.930>my <00:31:38.105>personal <00:31:38.280>ideal <00:31:38.455>state

689
00:31:39.255 --> 00:31:40.455
<00:31:39.255>of <00:31:39.795>application <00:31:40.335>development.

690
00:31:41.085 --> 00:31:42.415
<00:31:41.085>It's <00:31:41.484>really <00:31:41.883>annoying <00:31:42.282>having

691
00:31:42.435 --> 00:31:45.735
<00:31:42.435>to <00:31:42.590>update <00:31:42.746>our <00:31:42.901>design <00:31:43.057>system <00:31:43.212>across <00:31:43.368>half <00:31:43.523>a <00:31:43.679>dozen <00:31:43.835>different

692
00:31:45.735 --> 00:31:49.255
<00:31:45.735>repositories, <00:31:45.935>but <00:31:46.135>you <00:31:46.334>get <00:31:46.534>into <00:31:46.735>the <00:31:46.935>conditional <00:31:47.135>builds

693
00:31:49.255 --> 00:31:52.095
<00:31:49.255>problem <00:31:49.535>where <00:31:49.815>most <00:31:50.095>common <00:31:50.375>build <00:31:50.655>setups

694
00:31:52.095 --> 00:31:54.415
<00:31:52.095>and <00:31:52.295>providers <00:31:52.495>don't <00:31:52.695>have <00:31:52.895>good <00:31:53.095>conditional <00:31:53.295>build <00:31:53.495>support.

695
00:31:54.535 --> 00:31:56.375
<00:31:54.535>I <00:31:54.885>think <00:31:55.235>CircleCI <00:31:55.585>just <00:31:55.935>announced

696
00:31:56.375 --> 00:31:57.655
<00:31:56.375>adding <00:31:56.605>it <00:31:56.835>or <00:31:57.066>something <00:31:57.296>like <00:31:57.527>that.

697
00:31:58.205 --> 00:32:00.695
<00:31:58.205>It's <00:31:58.405>hard <00:31:58.605>to <00:31:58.804>set <00:31:59.004>up. <00:31:59.205>Um, <00:31:59.405>so <00:31:59.605>if,

698
00:32:00.835 --> 00:32:04.575
<00:32:00.835>if <00:32:00.990>you <00:32:01.146>don't <00:32:01.301>mind <00:32:01.457>either <00:32:01.612>having <00:32:01.768>to <00:32:01.923>use <00:32:02.079>custom <00:32:02.235>experimental

699
00:32:04.835 --> 00:32:06.695
<00:32:04.835>and <00:32:05.115>or <00:32:05.395>new <00:32:05.675>conditional <00:32:05.955>build <00:32:06.235>support

700
00:32:07.075 --> 00:32:10.135
<00:32:07.075>so <00:32:07.215>you <00:32:07.355>only <00:32:07.495>build <00:32:07.635>the <00:32:07.775>apps <00:32:07.915>that <00:32:08.055>you <00:32:08.195>need <00:32:08.335>rebuilt, <00:32:08.475>um,

701
00:32:10.475 --> 00:32:12.775
<00:32:10.475>or <00:32:10.649>you <00:32:10.824>think <00:32:11.000>it's <00:32:11.175>worth <00:32:11.350>it, <00:32:11.524>then <00:32:11.699>yeah, <00:32:11.875>great.

702
00:32:12.775 --> 00:32:14.255
<00:32:12.775>Good <00:32:13.041>for <00:32:13.307>you. <00:32:13.574>Um, <00:32:13.840>but <00:32:14.107>I,

703
00:32:14.375 --> 00:32:16.735
<00:32:14.375>I <00:32:14.530>personally <00:32:14.686>have <00:32:14.841>not <00:32:14.997>worked <00:32:15.152>at <00:32:15.308>a <00:32:15.463>place <00:32:15.619>that's <00:32:15.775>figured

704
00:32:16.735 --> 00:32:19.095
<00:32:16.735>that <00:32:16.935>problem <00:32:17.135>out <00:32:17.334>yet, <00:32:17.534>which <00:32:17.735>really <00:32:17.935>hurts <00:32:18.135>me

705
00:32:19.095 --> 00:32:20.335
<00:32:19.095>to <00:32:19.281>my <00:32:19.467>core <00:32:19.653>and <00:32:19.839>makes <00:32:20.025>me <00:32:20.211>unhappy.

706
00:32:22.685 --> 00:32:25.135
<00:32:22.685>Alright, <00:32:23.151>uh, <00:32:23.618>next <00:32:24.085>question.

707
00:32:25.195 --> 00:32:29.455
<00:32:25.195>Oh <00:32:25.370>yeah, <00:32:25.544>next <00:32:25.720>question <00:32:25.895>by, <00:32:26.070>uh, <00:32:26.245>Calvin <00:32:26.419>Sch <00:32:26.595>Schroer.

708
00:32:30.155 --> 00:32:33.975
<00:32:30.155>How <00:32:30.330>essential <00:32:30.504>is <00:32:30.680>Mode <00:32:30.855>Federation <00:32:31.030>for <00:32:31.205>micro <00:32:31.379>front <00:32:31.555>ends?

709
00:32:33.995 --> 00:32:34.995
<00:32:33.995>In <00:32:34.445>your <00:32:34.895>opinion?

710
00:32:36.205 --> 00:32:41.005
<00:32:36.205>What <00:32:36.405>is <00:32:36.605>Mode <00:32:36.804>Federation? <00:32:37.004>Mo <00:32:37.205>Module <00:32:37.405>Federation, <00:32:37.605>sorry.

711
00:32:41.625 --> 00:32:44.805
<00:32:41.625>Oh, <00:32:41.800>module <00:32:41.975>Federation, <00:32:42.150>same <00:32:42.325>question. <00:32:42.500>What <00:32:42.675>what <00:32:42.850>is <00:32:43.025>that?

712
00:32:46.625 --> 00:32:47.845
<00:32:46.625>Uh, <00:32:46.844>I <00:32:47.064>have <00:32:47.283>heard <00:32:47.503>of <00:32:47.723>it

713
00:32:47.845 --> 00:32:51.045
<00:32:47.845>before <00:32:48.045>from <00:32:48.245>one <00:32:48.445>other, <00:32:48.645>uh, <00:32:48.845>microphone <00:32:49.045>end <00:32:49.245>talk,

714
00:32:51.045 --> 00:32:52.885
<00:32:51.045>but <00:32:51.245>I'm <00:32:51.445>not <00:32:51.645>really <00:32:51.845>sure <00:32:52.045>what <00:32:52.245>it <00:32:52.445>is.

715
00:32:54.025 --> 00:32:55.085
<00:32:54.025>I'm, <00:32:54.215>I'm, <00:32:54.406>I'll <00:32:54.597>be <00:32:54.788>honest, <00:32:54.979>think

716
00:32:55.395 --> 00:32:57.525
<00:32:55.395>It's, <00:32:55.570>it's, <00:32:55.745>I <00:32:55.920>think <00:32:56.095>it's <00:32:56.270>kind <00:32:56.445>of <00:32:56.620>an <00:32:56.795>orchestrator,

717
00:32:58.185 --> 00:32:59.365
<00:32:58.185>um, <00:32:58.716>of <00:32:59.247>sort.

718
00:32:59.545 --> 00:33:02.485
<00:32:59.545>But, <00:32:59.672>uh, <00:32:59.799>I'm <00:32:59.926>not <00:33:00.054>sure. <00:33:00.181>Let's <00:33:00.308>jump <00:33:00.435>just <00:33:00.563>to <00:33:00.690>the <00:33:00.817>next, <00:33:00.945>uh,

719
00:33:02.765 --> 00:33:05.525
<00:33:02.765>question <00:33:03.115>from, <00:33:03.465>uh, <00:33:03.815>from <00:33:04.165>Renee.

720
00:33:05.545 --> 00:33:08.805
<00:33:05.545>Has, <00:33:05.720>uh, <00:33:05.895>what <00:33:06.070>do <00:33:06.245>you <00:33:06.420>think <00:33:06.595>about <00:33:06.770>micro <00:33:06.945>front

721
00:33:08.825 --> 00:33:13.125
<00:33:08.825>and <00:33:09.025>which <00:33:09.225>aren't <00:33:09.425>a <00:33:09.625>bound <00:33:09.825>to <00:33:10.025>UR <00:33:10.225>Ls?

722
00:33:13.285 --> 00:33:15.005
<00:33:13.285>I <00:33:13.460>dunno <00:33:13.635>what <00:33:13.810>that <00:33:13.985>means, <00:33:14.160>but <00:33:14.335>maybe <00:33:14.510>you <00:33:14.685>will.

723
00:33:15.465 --> 00:33:16.965
<00:33:15.465>Uh, <00:33:15.735>like <00:33:16.004>you <00:33:16.274>have <00:33:16.544>one <00:33:16.814>page

724
00:33:17.745 --> 00:33:20.965
<00:33:17.745>and <00:33:17.919>different <00:33:18.094>parts <00:33:18.270>of <00:33:18.445>the <00:33:18.620>page <00:33:18.794>are <00:33:18.969>different <00:33:19.145>applications.

725
00:33:20.995 --> 00:33:22.885
<00:33:20.995>Okay, <00:33:21.274>let <00:33:21.554>me <00:33:21.834>read <00:33:22.114>that <00:33:22.395>again.

726
00:33:23.075 --> 00:33:24.205
<00:33:23.075>Like, <00:33:23.329>you <00:33:23.583>have <00:33:23.837>one <00:33:24.091>page

727
00:33:24.225 --> 00:33:27.085
<00:33:24.225>and <00:33:24.458>difficult, <00:33:24.691>like <00:33:24.925>you <00:33:25.158>have <00:33:25.391>one <00:33:25.625>page

728
00:33:27.145 --> 00:33:31.605
<00:33:27.145>and <00:33:27.320>different <00:33:27.495>parts <00:33:27.670>of <00:33:27.845>the <00:33:28.020>page <00:33:28.195>are <00:33:28.370>different <00:33:28.545>applications.

729
00:33:32.665 --> 00:33:36.495
<00:33:32.665>Oh, <00:33:33.014>so <00:33:33.365>horizontal <00:33:33.715>front <00:33:34.065>ends

730
00:33:37.565 --> 00:33:38.625
<00:33:37.565>rather <00:33:38.042>than <00:33:38.519>vertical.

731
00:33:39.345 --> 00:33:40.425
<00:33:39.345>I <00:33:39.539>believe <00:33:39.733>this <00:33:39.928>is <00:33:40.122>a <00:33:40.317>duplicate

732
00:33:40.425 --> 00:33:42.385
<00:33:40.425>of <00:33:40.600>a <00:33:40.774>previous <00:33:40.950>question, <00:33:41.125>but <00:33:41.300>I'm <00:33:41.475>not <00:33:41.649>sure. <00:33:41.825>Okay.

733
00:33:42.995 --> 00:33:44.865
<00:33:42.995>Let's, <00:33:43.195>let's <00:33:43.395>then <00:33:43.594>skip <00:33:43.794>to <00:33:43.995>the <00:33:44.195>next <00:33:44.395>one.

734
00:33:45.005 --> 00:33:49.505
<00:33:45.005>Um, <00:33:45.238>by, <00:33:45.471>uh, <00:33:45.705>Ang <00:33:45.938>Yin, <00:33:46.171>uh, <00:33:46.405>what's,

735
00:33:50.085 --> 00:33:52.425
<00:33:50.085>what's <00:33:50.260>the <00:33:50.435>difference, <00:33:50.610>uh, <00:33:50.785>between <00:33:50.960>micro <00:33:51.135>front <00:33:51.310>end <00:33:51.485>and

736
00:33:54.995 --> 00:33:55.995
<00:33:54.995>Great <00:33:55.895>question.

737
00:33:56.345 --> 00:33:59.665
<00:33:56.345>I <00:33:56.500>think <00:33:56.656>of <00:33:56.811>micro <00:33:56.967>frontends <00:33:57.122>as <00:33:57.278>a, <00:33:57.433>as <00:33:57.589>a <00:33:57.745>specialization

738
00:33:59.685 --> 00:34:03.065
<00:33:59.685>and <00:33:59.965>subsection <00:34:00.245>or <00:34:00.524>subset <00:34:00.804>of <00:34:01.085>microservices.

739
00:34:03.335 --> 00:34:06.505
<00:34:03.335>It's <00:34:03.535>specifically <00:34:03.735>using <00:34:03.935>microservices <00:34:04.135>for <00:34:04.335>your <00:34:04.535>front <00:34:04.735>ends.

740
00:34:07.165 --> 00:34:08.785
<00:34:07.165>So <00:34:07.445>a <00:34:07.725>microservice <00:34:08.005>is <00:34:08.284>generally <00:34:08.565>any

741
00:34:08.875 --> 00:34:10.185
<00:34:08.875>small <00:34:09.110>service <00:34:09.346>that's <00:34:09.582>been <00:34:09.818>split <00:34:10.054>up.

742
00:34:10.185 --> 00:34:12.785
<00:34:10.185>And <00:34:10.340>then <00:34:10.496>specifically <00:34:10.651>a <00:34:10.807>micro <00:34:10.962>frontend <00:34:11.118>is <00:34:11.273>a <00:34:11.429>front <00:34:11.585>end

743
00:34:12.785 --> 00:34:13.985
<00:34:12.784>service <00:34:13.054>that's <00:34:13.324>been <00:34:13.595>split <00:34:13.865>up.

744
00:34:14.165 --> 00:34:15.745
<00:34:14.165>That's <00:34:14.631>my <00:34:15.098>personal <00:34:15.565>definition.

745
00:34:15.845 --> 00:34:17.385
<00:34:15.844>I'm <00:34:16.076>sure <00:34:16.306>others <00:34:16.538>on <00:34:16.769>the <00:34:17.000>internet <00:34:17.231>would

746
00:34:17.865 --> 00:34:19.225
<00:34:17.864>vehemently <00:34:18.170>disagree <00:34:18.476>for <00:34:18.783>some <00:34:19.089>reason.

747
00:34:20.285 --> 00:34:23.665
<00:34:20.284>Oh <00:34:20.440>yeah. <00:34:20.596>So <00:34:20.751>front <00:34:20.907>end <00:34:21.062>versus <00:34:21.218>backend. <00:34:21.373>That <00:34:21.529>makes <00:34:21.685>sense.

748
00:34:25.775 --> 00:34:28.115
<00:34:25.775>Um, <00:34:26.055>again, <00:34:26.335>another <00:34:26.615>question <00:34:26.895>from <00:34:27.175>Michael.

749
00:34:28.435 --> 00:34:32.275
<00:34:28.435>Er, <00:34:28.574>um, <00:34:28.715>which <00:34:28.855>kind <00:34:28.995>of <00:34:29.134>composition <00:34:29.275>do <00:34:29.415>you <00:34:29.554>use <00:34:29.695>and <00:34:29.835>why?

750
00:34:32.455 --> 00:34:34.795
<00:34:32.455>Server <00:34:32.804>side <00:34:33.154>or <00:34:33.505>client <00:34:33.855>side?

751
00:34:36.305 --> 00:34:37.875
<00:34:36.304>Well, <00:34:36.585>it <00:34:36.864>depends <00:34:37.145>on <00:34:37.424>the <00:34:37.705>page.

752
00:34:38.495 --> 00:34:40.115
<00:34:38.495>Um, <00:34:38.961>for <00:34:39.428>our, <00:34:39.895>most

753
00:34:40.115 --> 00:34:42.595
<00:34:40.114>of <00:34:40.314>our <00:34:40.514>pages <00:34:40.714>use <00:34:40.915>either <00:34:41.114>server <00:34:41.314>side <00:34:41.514>rendering

754
00:34:42.595 --> 00:34:43.795
<00:34:42.594>or <00:34:42.955>static <00:34:43.315>site <00:34:43.675>generation

755
00:34:44.135 --> 00:34:46.555
<00:34:44.135>for <00:34:44.335>the <00:34:44.535>pages <00:34:44.735>mostly <00:34:44.935>visited <00:34:45.135>by <00:34:45.335>anonymous <00:34:45.535>users.

756
00:34:46.585 --> 00:34:49.355
<00:34:46.585>Like <00:34:46.784>our <00:34:46.985>landing <00:34:47.185>pages, <00:34:47.385>the <00:34:47.585>catalog <00:34:47.784>pricing <00:34:47.985>pages,

757
00:34:49.975 --> 00:34:52.715
<00:34:49.975>we <00:34:50.150>are <00:34:50.324>trying <00:34:50.500>to <00:34:50.674>or <00:34:50.850>have <00:34:51.025>switched <00:34:51.199>to, <00:34:51.375>um,

758
00:34:53.255 --> 00:34:54.435
<00:34:53.255>static <00:34:53.786>site <00:34:54.317>generation.

759
00:34:54.505 --> 00:34:56.035
<00:34:54.505>It's <00:34:54.964>just <00:34:55.422>faster. <00:34:55.882>Um,

760
00:34:56.235 --> 00:34:57.795
<00:34:56.235>I <00:34:56.468>mentioned <00:34:56.701>edge <00:34:56.935>computing <00:34:57.168>in <00:34:57.401>the <00:34:57.635>talk.

761
00:34:57.965 --> 00:34:59.795
<00:34:57.965>We've <00:34:58.315>been <00:34:58.665>using <00:34:59.015>the <00:34:59.365>CloudFlare

762
00:34:59.795 --> 00:35:03.995
<00:34:59.795>and <00:34:59.922>next <00:35:00.049>JS <00:35:00.176>support <00:35:00.304>for <00:35:00.431>moving <00:35:00.558>next <00:35:00.685>JS <00:35:00.813>pages <00:35:00.940>into <00:35:01.067>the <00:35:01.195>edge.

763
00:35:04.295 --> 00:35:06.595
<00:35:04.295>So <00:35:04.470>not <00:35:04.645>only <00:35:04.820>do <00:35:04.995>our <00:35:05.170>edge <00:35:05.345>workers <00:35:05.520>route <00:35:05.695>pages,

764
00:35:06.665 --> 00:35:09.235
<00:35:06.665>they <00:35:06.840>can <00:35:07.015>also <00:35:07.190>just <00:35:07.365>give <00:35:07.540>you <00:35:07.715>the <00:35:07.890>HDML <00:35:08.065>quickly,

765
00:35:09.445 --> 00:35:11.475
<00:35:09.445>which <00:35:09.585>means <00:35:09.725>you <00:35:09.865>never <00:35:10.005>have <00:35:10.145>to <00:35:10.285>hit <00:35:10.425>our <00:35:10.565>servers <00:35:10.705>for <00:35:10.845>it.

766
00:35:12.075 --> 00:35:14.835
<00:35:12.075>A <00:35:12.250>lot <00:35:12.424>of <00:35:12.600>people <00:35:12.774>using <00:35:12.950>modern <00:35:13.125>deployment <00:35:13.299>techniques <00:35:13.475>like

767
00:35:14.835 --> 00:35:16.915
<00:35:14.835>with <00:35:15.035>Next <00:35:15.235>JS <00:35:15.435>and <00:35:15.635>CloudFlare <00:35:15.835>or <00:35:16.035>Next <00:35:16.235>JS

768
00:35:16.915 --> 00:35:20.635
<00:35:16.915>and <00:35:17.090>CEL <00:35:17.265>brag <00:35:17.440>that <00:35:17.615>they <00:35:17.790>don't <00:35:17.965>have <00:35:18.140>servers, <00:35:18.315>uh,

769
00:35:20.695 --> 00:35:22.755
<00:35:20.695>for <00:35:20.870>most <00:35:21.045>pages, <00:35:21.220>which <00:35:21.395>I <00:35:21.570>think <00:35:21.745>is <00:35:21.920>really <00:35:22.095>nifty.

770
00:35:23.295 --> 00:35:26.795
<00:35:23.295>Um, <00:35:23.470>for <00:35:23.645>more <00:35:23.820>complex <00:35:23.995>pages <00:35:24.170>like <00:35:24.345>the <00:35:24.520>learner <00:35:24.695>dashboard,

771
00:35:26.795 --> 00:35:28.675
<00:35:26.795>the <00:35:27.075>learning <00:35:27.355>environment, <00:35:27.635>we <00:35:27.915>use, <00:35:28.195>um,

772
00:35:29.315 --> 00:35:30.675
<00:35:29.315>SSR <00:35:29.723>service <00:35:30.131>side <00:35:30.539>rendering.

773
00:35:30.975 --> 00:35:33.035
<00:35:30.975>Um, <00:35:31.150>and <00:35:31.325>then <00:35:31.500>very <00:35:31.674>rarely <00:35:31.850>do <00:35:32.025>we <00:35:32.200>switch <00:35:32.375>back

774
00:35:33.035 --> 00:35:34.035
<00:35:33.035>to <00:35:33.335>client <00:35:33.634>side <00:35:33.935>rendering.

775
00:35:34.035 --> 00:35:35.515
<00:35:34.035>It's <00:35:34.257>really <00:35:34.479>only <00:35:34.701>for <00:35:34.923>the <00:35:35.145>pages <00:35:35.366>that

776
00:35:36.075 --> 00:35:37.405
<00:35:36.075>absolutely <00:35:36.374>don't <00:35:36.673>care <00:35:36.972>about <00:35:37.272>performance.

777
00:35:37.625 --> 00:35:40.005
<00:35:37.625>Um, <00:35:37.800>for <00:35:37.975>initial <00:35:38.150>low <00:35:38.325>time <00:35:38.500>beyond <00:35:38.675>a <00:35:38.850>few <00:35:39.025>seconds,

778
00:35:40.025 --> 00:35:41.325
<00:35:40.025>things <00:35:40.415>like <00:35:40.805>internal <00:35:41.194>tools

779
00:35:41.505 --> 00:35:43.205
<00:35:41.505>or <00:35:41.971>like <00:35:42.438>business <00:35:42.905>reporting

780
00:35:43.205 --> 00:35:44.565
<00:35:43.205>dashboards <00:35:43.511>for <00:35:43.817>our <00:35:44.123>business <00:35:44.429>clients.

781
00:35:46.405 --> 00:35:47.495
<00:35:46.405>Alright, <00:35:46.895>thank <00:35:47.386>you.

782
00:35:48.275 --> 00:35:52.295
<00:35:48.275>Um, <00:35:48.508>a <00:35:48.741>question <00:35:48.975>from <00:35:49.208>common <00:35:49.441>Fila, <00:35:49.675>uh,

783
00:35:52.675 --> 00:35:53.735
<00:35:52.675>do <00:35:52.993>you <00:35:53.311>use <00:35:53.629>versioning?

784
00:35:53.935 --> 00:35:57.175
<00:35:53.935>I <00:35:54.075>hope <00:35:54.215>so, <00:35:54.355>for <00:35:54.495>the, <00:35:54.634>from <00:35:54.775>for <00:35:54.915>the <00:35:55.055>micro <00:35:55.195>uh, <00:35:55.335>applications?

785
00:35:57.275 --> 00:35:58.735
<00:35:57.275>If <00:35:57.494>yes, <00:35:57.713>what <00:35:57.932>tool <00:35:58.151>are <00:35:58.370>you <00:35:58.589>using?

786
00:36:00.075 --> 00:36:01.455
<00:36:00.075>We <00:36:00.323>have <00:36:00.571>light <00:36:00.820>versioning <00:36:01.068>set <00:36:01.317>up.

787
00:36:01.635 --> 00:36:03.655
<00:36:01.635>Um, <00:36:01.810>so <00:36:01.985>we <00:36:02.160>have <00:36:02.335>a, <00:36:02.510>a <00:36:02.685>hash <00:36:02.860>per <00:36:03.035>deploy.

788
00:36:04.035 --> 00:36:06.335
<00:36:04.035>Um, <00:36:04.210>we <00:36:04.384>also <00:36:04.560>have <00:36:04.734>versioning <00:36:04.910>for <00:36:05.085>a <00:36:05.259>design <00:36:05.435>system

789
00:36:06.335 --> 00:36:07.775
<00:36:06.335>that's <00:36:06.767>just <00:36:07.199>semantic <00:36:07.631>versioning

790
00:36:07.775 --> 00:36:09.375
<00:36:07.775>because <00:36:08.008>it's <00:36:08.241>on <00:36:08.475>MPM <00:36:08.708>and <00:36:08.941>open <00:36:09.175>source.

791
00:36:10.035 --> 00:36:12.935
<00:36:10.035>Um, <00:36:10.315>we <00:36:10.595>don't <00:36:10.875>have <00:36:11.154>red <00:36:11.435>green

792
00:36:12.955 --> 00:36:15.335
<00:36:12.955>or <00:36:13.188>bluegreen <00:36:13.421>deployments <00:36:13.654>set <00:36:13.888>up <00:36:14.121>yet, <00:36:14.355>unfortunately,

793
00:36:15.335 --> 00:36:17.895
<00:36:15.335>we're <00:36:15.568>working <00:36:15.801>towards <00:36:16.035>it, <00:36:16.268>which <00:36:16.501>also <00:36:16.735>hurts

794
00:36:17.895 --> 00:36:18.935
<00:36:17.895>me <00:36:18.082>a <00:36:18.269>little <00:36:18.456>on <00:36:18.643>the <00:36:18.831>inside.

795
00:36:19.275 --> 00:36:21.335
<00:36:19.275>Um, <00:36:19.430>but <00:36:19.586>mostly <00:36:19.741>it's <00:36:19.897>just <00:36:20.052>there <00:36:20.208>is <00:36:20.363>a <00:36:20.519>current <00:36:20.675>version

796
00:36:21.335 --> 00:36:23.175
<00:36:21.335>of <00:36:21.615>deployment <00:36:21.895>and <00:36:22.175>then <00:36:22.455>we <00:36:22.735>switch

797
00:36:23.175 --> 00:36:24.335
<00:36:23.175>from <00:36:23.383>the <00:36:23.592>previous <00:36:23.801>to <00:36:24.010>the <00:36:24.219>next.

798
00:36:24.395 --> 00:36:26.175
<00:36:24.395>So <00:36:24.628>for <00:36:24.861>us, <00:36:25.095>versions <00:36:25.328>aren't <00:36:25.561>super <00:36:25.795>duper

799
00:36:26.175 --> 00:36:27.415
<00:36:26.175>important, <00:36:26.454>it's <00:36:26.733>just <00:36:27.012>whatever's <00:36:27.291>current.

800
00:36:27.715 --> 00:36:29.135
<00:36:27.715>And <00:36:27.928>for <00:36:28.141>us, <00:36:28.354>everything <00:36:28.567>is <00:36:28.780>GI <00:36:28.993>based.

801
00:36:29.195 --> 00:36:32.655
<00:36:29.195>So <00:36:29.350>our <00:36:29.506>workflows <00:36:29.661>are <00:36:29.817>managed <00:36:29.972>by <00:36:30.128>pull <00:36:30.283>requests, <00:36:30.439>which <00:36:30.595>is

802
00:36:32.735 --> 00:36:33.855
<00:36:32.735>where <00:36:33.071>those <00:36:33.407>actually <00:36:33.743>from.

803
00:36:35.565 --> 00:36:39.135
<00:36:35.565>Alright. <00:36:35.765>Um, <00:36:35.965>then <00:36:36.165>a <00:36:36.365>question <00:36:36.565>from <00:36:36.765>Dogo <00:36:36.965>Atari.

804
00:36:40.355 --> 00:36:43.575
<00:36:40.355>How, <00:36:40.705>how <00:36:41.055>you <00:36:41.405>use <00:36:41.755>your

805
00:36:44.375 --> 00:36:48.935
<00:36:44.375>molecules <00:36:44.550>organism <00:36:44.725>templates <00:36:44.900>to <00:36:45.075>fill <00:36:45.250>them <00:36:45.425>with <00:36:45.600>real <00:36:45.775>info.

806
00:36:49.765 --> 00:36:54.135
<00:36:49.765>Just <00:36:49.920>using <00:36:50.076>dozens <00:36:50.231>of <00:36:50.387>properties, <00:36:50.542>even <00:36:50.698>some <00:36:50.853>of <00:36:51.009>them <00:36:51.165>accept,

807
00:36:54.435 --> 00:36:58.775
<00:36:54.435>oh, <00:36:54.590>this <00:36:54.746>jumped <00:36:54.901>even <00:36:55.057>some <00:36:55.212>of <00:36:55.368>them <00:36:55.523>accept <00:36:55.679>some, <00:36:55.835>uh,

808
00:36:59.065 --> 00:37:00.535
<00:36:59.065>react <00:36:59.329>node <00:36:59.594>or <00:36:59.858>any <00:37:00.123>other <00:37:00.388>way.

809
00:37:00.605 --> 00:37:02.735
<00:37:00.605>Okay, <00:37:00.955>let <00:37:01.305>me <00:37:01.655>reread <00:37:02.005>it.

810
00:37:03.315 --> 00:37:05.975
<00:37:03.315>How <00:37:03.515>do <00:37:03.715>you <00:37:03.915>use <00:37:04.115>your <00:37:04.315>molecules <00:37:04.515>organism <00:37:04.715>templates

811
00:37:06.435 --> 00:37:07.975
<00:37:06.435>to <00:37:06.712>fill <00:37:06.989>them <00:37:07.266>with <00:37:07.543>real <00:37:07.821>info?

812
00:37:08.065 --> 00:37:11.095
<00:37:08.065>First <00:37:08.240>question <00:37:08.415>and <00:37:08.590>then <00:37:08.765>just <00:37:08.940>using <00:37:09.115>dozens <00:37:09.290>of <00:37:09.465>properties,

813
00:37:11.605 --> 00:37:14.295
<00:37:11.605>even <00:37:11.805>some <00:37:12.005>of <00:37:12.205>them <00:37:12.405>accept <00:37:12.605>some <00:37:12.805>react <00:37:13.005>node

814
00:37:14.515 --> 00:37:18.375
<00:37:14.515>or <00:37:14.795>another <00:37:15.075>way <00:37:15.355>I <00:37:15.634>what <00:37:15.915>molecules

815
00:37:19.215 --> 00:37:21.375
<00:37:19.215>organism <00:37:19.495>templates <00:37:19.775>are. <00:37:20.055>Maybe <00:37:20.335>you <00:37:20.615>do.

816
00:37:22.245 --> 00:37:24.455
<00:37:22.245>Yeah, <00:37:22.384>I, <00:37:22.525>I <00:37:22.665>think <00:37:22.805>I <00:37:22.944>know <00:37:23.085>how <00:37:23.225>to <00:37:23.365>answer <00:37:23.505>this <00:37:23.645>question,

817
00:37:24.555 --> 00:37:26.495
<00:37:24.555>but <00:37:24.904>apologies <00:37:25.254>to <00:37:25.605>the <00:37:25.955>question

818
00:37:26.495 --> 00:37:29.575
<00:37:26.495>or <00:37:26.650>if <00:37:26.806>the <00:37:26.961>asker, <00:37:27.117>if <00:37:27.272>I'm <00:37:27.428>getting <00:37:27.583>it <00:37:27.739>horribly <00:37:27.895>wrong.

819
00:37:30.035 --> 00:37:32.295
<00:37:30.035>Um, <00:37:30.210>so <00:37:30.384>there <00:37:30.560>are <00:37:30.734>a <00:37:30.910>couple <00:37:31.085>questions <00:37:31.259>in <00:37:31.435>there.

820
00:37:32.515 --> 00:37:34.535
<00:37:32.515>Um, <00:37:32.690>how <00:37:32.865>do <00:37:33.040>we <00:37:33.214>know <00:37:33.390>what <00:37:33.565>to <00:37:33.740>put <00:37:33.915>in

821
00:37:34.535 --> 00:37:38.015
<00:37:34.535>or <00:37:34.662>what, <00:37:34.789>how <00:37:34.916>do <00:37:35.044>we <00:37:35.171>fill <00:37:35.298>in <00:37:35.425>our <00:37:35.553>design <00:37:35.680>system <00:37:35.807>that <00:37:35.935>larger,

822
00:37:38.125 --> 00:37:40.495
<00:37:38.125>more <00:37:38.358>complex <00:37:38.591>organisms, <00:37:38.825>molecules <00:37:39.058>and <00:37:39.291>so <00:37:39.525>on.

823
00:37:41.075 --> 00:37:43.335
<00:37:41.075>Um, <00:37:41.214>and <00:37:41.355>then <00:37:41.495>I <00:37:41.634>think <00:37:41.774>there's <00:37:41.915>a <00:37:42.055>sub <00:37:42.194>question <00:37:42.335>there <00:37:42.475>of

824
00:37:43.335 --> 00:37:45.415
<00:37:43.335>how <00:37:43.490>do <00:37:43.646>you <00:37:43.801>restrict <00:37:43.957>it <00:37:44.112>to <00:37:44.268>be <00:37:44.423>what's, <00:37:44.579>what's <00:37:44.735>right?

825
00:37:46.155 --> 00:37:49.775
<00:37:46.155>Um, <00:37:46.388>for <00:37:46.621>the <00:37:46.855>most <00:37:47.088>part, <00:37:47.321>the, <00:37:47.555>the,

826
00:37:50.475 --> 00:37:54.535
<00:37:50.475>the <00:37:50.602>larger <00:37:50.729>a <00:37:50.856>part <00:37:50.984>of <00:37:51.111>the <00:37:51.238>design <00:37:51.365>system, <00:37:51.493>the <00:37:51.620>less <00:37:51.747>we <00:37:51.875>tend

827
00:37:54.635 --> 00:37:57.335
<00:37:54.635>to <00:37:54.835>allow <00:37:55.035>it <00:37:55.235>to <00:37:55.435>take <00:37:55.635>in, <00:37:55.835>um, <00:37:56.035>the,

828
00:37:57.395 --> 00:37:59.175
<00:37:57.395>the <00:37:57.628>really <00:37:57.861>low <00:37:58.095>level <00:37:58.328>things <00:37:58.561>like <00:37:58.795>buttons.

829
00:37:59.235 --> 00:38:00.695
<00:37:59.235>We <00:37:59.454>generally <00:37:59.673>allow <00:37:59.892>to <00:38:00.111>have <00:38:00.330>a <00:38:00.549>lot

830
00:38:00.695 --> 00:38:01.815
<00:38:00.695>of <00:38:00.947>different <00:38:01.199>props <00:38:01.451>passed <00:38:01.703>in.

831
00:38:02.235 --> 00:38:04.935
<00:38:02.235>Um, <00:38:02.410>from <00:38:02.585>the <00:38:02.760>HTML <00:38:02.935>perspective, <00:38:03.110>we <00:38:03.285>allow <00:38:03.460>all <00:38:03.635>sorts

832
00:38:04.935 --> 00:38:07.215
<00:38:04.935>of <00:38:05.134>aria <00:38:05.335>attributes <00:38:05.535>and <00:38:05.735>data <00:38:05.935>labels <00:38:06.134>and <00:38:06.335>such.

833
00:38:07.795 --> 00:38:10.615
<00:38:07.795>Um, <00:38:08.028>we <00:38:08.261>do <00:38:08.495>use <00:38:08.728>TypeScript <00:38:08.961>for <00:38:09.195>everything.

834
00:38:10.635 --> 00:38:13.135
<00:38:10.635>So <00:38:10.835>even <00:38:11.035>if <00:38:11.235>the <00:38:11.435>consuming <00:38:11.635>application <00:38:11.835>isn't <00:38:12.035>TypeScript,

835
00:38:13.225 --> 00:38:16.255
<00:38:13.225>which <00:38:13.365>has <00:38:13.505>yet <00:38:13.645>to <00:38:13.785>happen <00:38:13.924>at <00:38:14.065>Code <00:38:14.205>Academy <00:38:14.345>since <00:38:14.485>we <00:38:14.625>adopted,

836
00:38:16.395 --> 00:38:19.415
<00:38:16.395>but <00:38:16.570>may <00:38:16.745>eventually <00:38:16.920>happen, <00:38:17.095>it's <00:38:17.270>all <00:38:17.445>nicely <00:38:17.620>type <00:38:17.795>checked.

837
00:38:19.595 --> 00:38:22.015
<00:38:19.595>So <00:38:19.711>there's <00:38:19.828>a <00:38:19.944>a, <00:38:20.061>a <00:38:20.178>allow <00:38:20.294>list <00:38:20.411>of <00:38:20.528>properties <00:38:20.645>that <00:38:20.761>can <00:38:20.878>go <00:38:20.995>in.

838
00:38:22.015 --> 00:38:24.535
<00:38:22.015>You <00:38:22.248>can't <00:38:22.481>pass <00:38:22.714>a <00:38:22.948>SDF <00:38:23.181>the <00:38:23.415>property.

839
00:38:25.155 --> 00:38:26.935
<00:38:25.155>Um, <00:38:25.355>as <00:38:25.555>you <00:38:25.755>go <00:38:25.955>higher <00:38:26.155>up <00:38:26.355>though, <00:38:26.555>um,

840
00:38:27.305 --> 00:38:29.135
<00:38:27.305>there <00:38:27.538>are <00:38:27.771>fewer <00:38:28.004>props <00:38:28.238>that <00:38:28.471>are <00:38:28.705>allowed.

841
00:38:29.395 --> 00:38:31.215
<00:38:29.395>So <00:38:29.595>let's, <00:38:29.795>let's <00:38:29.995>take <00:38:30.195>forms <00:38:30.395>as <00:38:30.595>an <00:38:30.795>example.

842
00:38:31.595 --> 00:38:34.775
<00:38:31.595>Uh, <00:38:31.711>a <00:38:31.828>button <00:38:31.944>say <00:38:32.061>the <00:38:32.178>submit <00:38:32.294>button <00:38:32.411>in <00:38:32.528>the <00:38:32.645>form <00:38:32.761>might <00:38:32.878>be <00:38:32.995>in

843
00:38:34.795 --> 00:38:36.805
<00:38:34.795>on <00:38:34.935>its <00:38:35.075>own, <00:38:35.215>allowed <00:38:35.355>it <00:38:35.495>to <00:38:35.635>be <00:38:35.775>customized <00:38:35.915>with <00:38:36.055>a <00:38:36.195>lot

844
00:38:36.805 --> 00:38:39.165
<00:38:36.805>of <00:38:36.980>different <00:38:37.154>options <00:38:37.330>like <00:38:37.504>margins <00:38:37.680>and <00:38:37.855>paddings <00:38:38.029>or <00:38:38.205>whatever.

845
00:38:39.165 --> 00:38:41.365
<00:38:39.165>Ideally <00:38:39.340>not, <00:38:39.515>but <00:38:39.690>sometimes <00:38:39.865>people <00:38:40.040>throw <00:38:40.215>them <00:38:40.390>in <00:38:40.565>there.

846
00:38:41.985 --> 00:38:44.925
<00:38:41.985>Um, <00:38:42.125>in <00:38:42.265>an <00:38:42.405>ideal <00:38:42.545>world, <00:38:42.685>you, <00:38:42.825>you <00:38:42.965>never <00:38:43.105>change <00:38:43.245>your <00:38:43.385>margins

847
00:38:44.925 --> 00:38:47.165
<00:38:44.925>and <00:38:45.100>paddings <00:38:45.275>beyond <00:38:45.450>what's <00:38:45.625>allowed <00:38:45.800>in <00:38:45.975>the <00:38:46.150>design <00:38:46.325>system.

848
00:38:47.225 --> 00:38:49.925
<00:38:47.225>But <00:38:47.365>in, <00:38:47.505>in <00:38:47.645>practice, <00:38:47.785>people <00:38:47.924>do <00:38:48.065>all <00:38:48.205>sorts <00:38:48.345>of <00:38:48.485>wild <00:38:48.625>things.

849
00:38:50.385 --> 00:38:53.165
<00:38:50.385>But <00:38:50.618>for <00:38:50.851>our <00:38:51.085>unified <00:38:51.318>form, <00:38:51.551>um, <00:38:51.785>organism,

850
00:38:53.335 --> 00:38:55.565
<00:38:53.335>which <00:38:53.568>called <00:38:53.801>grid <00:38:54.035>form, <00:38:54.268>all <00:38:54.501>you're <00:38:54.735>allowed

851
00:38:55.565 --> 00:38:57.565
<00:38:55.565>to <00:38:55.845>pass <00:38:56.125>in <00:38:56.405>are <00:38:56.685>three <00:38:56.965>props.

852
00:38:57.865 --> 00:39:00.485
<00:38:57.865>Um, <00:38:58.020>you're <00:38:58.176>allowed <00:38:58.331>to <00:38:58.487>pass <00:38:58.642>in <00:38:58.798>the <00:38:58.953>on <00:38:59.109>submit <00:38:59.265>handler,

853
00:39:00.485 --> 00:39:03.325
<00:39:00.485>which <00:39:00.660>takes <00:39:00.835>in <00:39:01.010>the <00:39:01.185>form <00:39:01.360>submitted <00:39:01.535>data <00:39:01.710>and <00:39:01.885>submits.

854
00:39:03.785 --> 00:39:05.125
<00:39:03.785>Um, <00:39:04.086>you're, <00:39:04.388>you, <00:39:04.689>you're <00:39:04.991>allowed

855
00:39:05.125 --> 00:39:06.765
<00:39:05.125>to <00:39:05.358>pass <00:39:05.591>in <00:39:05.825>the <00:39:06.058>submit <00:39:06.291>button <00:39:06.525>data,

856
00:39:06.935 --> 00:39:09.645
<00:39:06.935>which <00:39:07.090>is <00:39:07.246>just <00:39:07.401>the <00:39:07.557>contents <00:39:07.712>of <00:39:07.868>the <00:39:08.023>submit <00:39:08.179>button, <00:39:08.335>which

857
00:39:10.155 --> 00:39:12.405
<00:39:10.155>type <00:39:10.310>it <00:39:10.466>is <00:39:10.621>from <00:39:10.777>a <00:39:10.932>small <00:39:11.088>list <00:39:11.243>of <00:39:11.399>allowed <00:39:11.555>types.

858
00:39:12.405 --> 00:39:15.885
<00:39:12.405>Mm-hmm. <00:39:12.580>And <00:39:12.755>it's <00:39:12.930>positioning <00:39:13.105>left <00:39:13.280>center, <00:39:13.455>right, <00:39:13.630>which <00:39:13.805>I,

859
00:39:16.005 --> 00:39:17.205
<00:39:16.005>I <00:39:16.159>personally <00:39:16.313>don't <00:39:16.467>think <00:39:16.622>we <00:39:16.776>should <00:39:16.930>have <00:39:17.085>done.

860
00:39:17.285 --> 00:39:19.365
<00:39:17.285>I <00:39:17.424>don't <00:39:17.565>think <00:39:17.705>we <00:39:17.845>should <00:39:17.984>have <00:39:18.125>allowed <00:39:18.265>people <00:39:18.404>to <00:39:18.545>change <00:39:18.685>that,

861
00:39:19.425 --> 00:39:20.845
<00:39:19.425>but <00:39:19.744>that's <00:39:20.064>a <00:39:20.383>debate <00:39:20.703>internally.

862
00:39:21.465 --> 00:39:24.285
<00:39:21.465>And <00:39:21.592>then <00:39:21.719>you <00:39:21.846>have <00:39:21.974>a <00:39:22.101>list <00:39:22.228>of <00:39:22.355>fields, <00:39:22.483>which <00:39:22.610>can <00:39:22.737>be <00:39:22.865>sections

863
00:39:24.465 --> 00:39:26.245
<00:39:24.465>of, <00:39:24.698>of <00:39:24.931>fields <00:39:25.165>or <00:39:25.398>just <00:39:25.631>fields <00:39:25.865>themselves,

864
00:39:26.245 --> 00:39:28.685
<00:39:26.245>or <00:39:26.384>each <00:39:26.525>field <00:39:26.665>is <00:39:26.805>the <00:39:26.944>type <00:39:27.085>of <00:39:27.225>fields <00:39:27.365>such <00:39:27.505>as <00:39:27.645>date

865
00:39:28.685 --> 00:39:30.525
<00:39:28.685>or <00:39:29.151>number, <00:39:29.618>the <00:39:30.085>validation

866
00:39:30.985 --> 00:39:33.765
<00:39:30.985>and <00:39:31.185>some <00:39:31.385>basic <00:39:31.585>accessibility <00:39:31.785>stuff <00:39:31.985>such <00:39:32.185>as <00:39:32.385>name.

867
00:39:34.425 --> 00:39:36.605
<00:39:34.425>So <00:39:34.600>like <00:39:34.775>you <00:39:34.950>for <00:39:35.125>a <00:39:35.300>grip <00:39:35.475>form, <00:39:35.650>the <00:39:35.825>point

868
00:39:36.605 --> 00:39:38.405
<00:39:36.605>of <00:39:36.780>the <00:39:36.955>organism <00:39:37.130>is <00:39:37.305>that <00:39:37.480>you <00:39:37.655>lock <00:39:37.830>it <00:39:38.005>down.

869
00:39:38.425 --> 00:39:41.365
<00:39:38.425>You <00:39:38.580>don't <00:39:38.736>allow <00:39:38.891>a <00:39:39.047>bajillion <00:39:39.202>things <00:39:39.358>in <00:39:39.513>there, <00:39:39.669>random <00:39:39.825>headings

870
00:39:41.425 --> 00:39:42.445
<00:39:41.425>and <00:39:41.884>other <00:39:42.343>events.

871
00:39:42.465 --> 00:39:44.685
<00:39:42.465>And <00:39:42.640>nacent, <00:39:42.815>candlers, <00:39:42.990>you <00:39:43.165>just <00:39:43.340>have <00:39:43.515>the <00:39:43.690>small <00:39:43.865>list

872
00:39:44.685 --> 00:39:46.045
<00:39:44.685>of <00:39:44.991>allowed <00:39:45.297>props <00:39:45.603>from <00:39:45.909>TypeScript.

873
00:39:46.355 --> 00:39:49.635
<00:39:46.355>Okay. <00:39:46.555>So <00:39:46.755>that, <00:39:46.955>that's <00:39:47.155>how <00:39:47.355>we <00:39:47.555>do <00:39:47.755>things.

874
00:39:49.695 --> 00:39:51.995
<00:39:49.695>We <00:39:49.850>have, <00:39:50.006>I <00:39:50.161>call <00:39:50.317>it <00:39:50.472>freedom <00:39:50.628>food <00:39:50.783>restriction, <00:39:50.939>where <00:39:51.095>you,

875
00:39:52.015 --> 00:39:53.915
<00:39:52.015>you <00:39:52.214>allow <00:39:52.415>only <00:39:52.615>a <00:39:52.815>small <00:39:53.015>list <00:39:53.214>of <00:39:53.415>things

876
00:39:53.915 --> 00:39:55.675
<00:39:53.915>to <00:39:54.148>make <00:39:54.381>everything <00:39:54.615>standardized <00:39:54.848>and <00:39:55.081>the <00:39:55.315>same.

877
00:39:56.305 --> 00:39:59.475
<00:39:56.305>Yeah, <00:39:56.444>that <00:39:56.585>makes <00:39:56.725>sense. <00:39:56.865>L <00:39:57.004>less <00:39:57.145>room <00:39:57.285>for <00:39:57.424>errors <00:39:57.565>of, <00:39:57.705>for

878
00:40:00.135 --> 00:40:02.115
<00:40:00.135>any <00:40:00.415>any <00:40:00.695>kind <00:40:00.975>of <00:40:01.255>weird <00:40:01.535>situations.

879
00:40:02.115 --> 00:40:03.115
Right?

880
00:40:03.415 --> 00:40:08.115
<00:40:03.415>For <00:40:03.615>sure. <00:40:03.815>Yeah. <00:40:04.015>Alright, <00:40:04.215>uh, <00:40:04.415>one <00:40:04.615>question <00:40:04.815>from,

881
00:40:09.565 --> 00:40:11.465
<00:40:09.565>uh, <00:40:10.965>Osman.

882
00:40:12.685 --> 00:40:14.945
<00:40:12.685>Do, <00:40:12.965>oh, <00:40:13.245>it <00:40:13.525>jumped, <00:40:13.805>hold <00:40:14.085>on.

883
00:40:15.245 --> 00:40:19.185
<00:40:15.245>Ah, <00:40:15.372>oh, <00:40:15.499>new <00:40:15.626>questions <00:40:15.754>come <00:40:15.881>in <00:40:16.008>and, <00:40:16.135>and <00:40:16.263>the <00:40:16.390>whole <00:40:16.517>page <00:40:16.645>jumps.

884
00:40:19.585 --> 00:40:21.825
<00:40:19.585>Hold <00:40:19.740>on, <00:40:19.896>let <00:40:20.051>me, <00:40:20.207>oh, <00:40:20.362>let <00:40:20.518>me <00:40:20.673>look <00:40:20.829>for <00:40:20.985>it.

885
00:40:22.005 --> 00:40:24.785
<00:40:22.005>Uh, <00:40:22.205>there, <00:40:22.405>uh, <00:40:22.605>do <00:40:22.805>molecules <00:40:23.005>have <00:40:23.205>some <00:40:23.405>logic

886
00:40:25.165 --> 00:40:27.145
<00:40:25.165>or <00:40:25.398>are <00:40:25.631>they <00:40:25.865>just <00:40:26.098>a <00:40:26.331>styling <00:40:26.565>component?

887
00:40:28.455 --> 00:40:32.105
<00:40:28.455>They <00:40:28.735>can <00:40:29.015>have <00:40:29.295>logic. <00:40:29.575>Um, <00:40:29.855>arguably

888
00:40:32.615 --> 00:40:34.825
<00:40:32.615>accordion <00:40:32.790>might <00:40:32.964>be <00:40:33.140>a <00:40:33.314>molecule, <00:40:33.490>which <00:40:33.665>is <00:40:33.839>the <00:40:34.015>thing

889
00:40:34.825 --> 00:40:36.625
<00:40:34.825>where <00:40:35.024>you <00:40:35.225>tap <00:40:35.424>the <00:40:35.625>button <00:40:35.825>and <00:40:36.024>it <00:40:36.225>expands.

890
00:40:36.625 --> 00:40:40.065
<00:40:36.625>You <00:40:36.825>tap <00:40:37.025>it <00:40:37.225>again, <00:40:37.425>in <00:40:37.625>contracts, <00:40:37.825>um, <00:40:38.025>you,

891
00:40:40.085 --> 00:40:41.785
<00:40:40.085>you <00:40:40.285>could <00:40:40.485>have <00:40:40.685>small <00:40:40.885>little <00:40:41.085>bits <00:40:41.285>of <00:40:41.485>logic.

892
00:40:41.785 --> 00:40:43.545
<00:40:41.785>Generally <00:40:42.065>the <00:40:42.345>simpler <00:40:42.625>stuff <00:40:42.904>like <00:40:43.185>atoms

893
00:40:43.545 --> 00:40:45.545
<00:40:43.545>and <00:40:43.720>molecules <00:40:43.895>have <00:40:44.070>a <00:40:44.245>lot <00:40:44.420>less <00:40:44.595>logic <00:40:44.770>in <00:40:44.945>them.

894
00:40:45.605 --> 00:40:47.665
<00:40:45.605>But <00:40:45.745>there <00:40:45.885>can <00:40:46.025>be <00:40:46.165>some, <00:40:46.305>but <00:40:46.445>most <00:40:46.585>of <00:40:46.725>the <00:40:46.865>time, <00:40:47.005>most

895
00:40:47.665 --> 00:40:49.185
<00:40:47.665>of <00:40:47.893>the <00:40:48.121>logic <00:40:48.349>is <00:40:48.577>in <00:40:48.805>the <00:40:49.033>organisms.

896
00:40:49.605 --> 00:40:51.945
<00:40:49.605>Um, <00:40:49.805>the <00:40:50.005>ideal <00:40:50.205>of <00:40:50.405>of <00:40:50.605>design <00:40:50.805>systems <00:40:51.005>is

897
00:40:51.945 --> 00:40:53.865
<00:40:51.945>that <00:40:52.295>it <00:40:52.645>encapsulates <00:40:52.995>the <00:40:53.345>logic.

898
00:40:54.035 --> 00:40:56.825
<00:40:54.035>Sorry. <00:40:54.190>It <00:40:54.346>encapsulates <00:40:54.501>the, <00:40:54.657>the <00:40:54.812>portions <00:40:54.968>of <00:40:55.123>your <00:40:55.279>front <00:40:55.435>end

899
00:40:56.825 --> 00:40:58.065
<00:40:56.825>that <00:40:57.104>are <00:40:57.383>shared <00:40:57.662>and <00:40:57.941>common.

900
00:40:58.485 --> 00:41:00.865
<00:40:58.485>So <00:40:58.718>very <00:40:58.951>often <00:40:59.185>that's <00:40:59.418>mostly <00:40:59.651>visual <00:40:59.885>styles

901
00:41:00.865 --> 00:41:01.905
<00:41:00.865>or <00:41:01.333>small <00:41:01.801>animations.

902
00:41:02.245 --> 00:41:04.385
<00:41:02.245>And <00:41:02.478>the <00:41:02.711>business <00:41:02.944>logic, <00:41:03.178>the <00:41:03.411>real <00:41:03.645>what

903
00:41:04.385 --> 00:41:07.225
<00:41:04.385>to <00:41:04.540>show <00:41:04.696>when <00:41:04.851>is <00:41:05.007>left <00:41:05.162>up <00:41:05.318>to <00:41:05.473>the <00:41:05.629>consuming <00:41:05.785>applications.

904
00:41:09.765 --> 00:41:14.545
<00:41:09.765>All <00:41:10.045>right. <00:41:10.325>Um, <00:41:10.605>Andre <00:41:10.884>Mocha, <00:41:11.165>uh,

905
00:41:14.725 --> 00:41:18.225
<00:41:14.725>writes, <00:41:14.900>what <00:41:15.075>methods <00:41:15.250>do <00:41:15.424>you <00:41:15.600>use <00:41:15.775>to <00:41:15.950>share <00:41:16.125>state

906
00:41:18.225 --> 00:41:20.785
<00:41:18.225>between <00:41:18.575>different <00:41:18.924>micro <00:41:19.275>front <00:41:19.625>ends?

907
00:41:22.005 --> 00:41:25.225
<00:41:22.005>Uh, <00:41:22.145>state <00:41:22.285>what <00:41:22.425>a <00:41:22.565>terrible <00:41:22.705>thing <00:41:22.845>to <00:41:22.985>have <00:41:23.125>to <00:41:23.265>work <00:41:23.405>with.

908
00:41:25.925 --> 00:41:28.785
<00:41:25.925>Um, <00:41:26.158>you <00:41:26.391>can <00:41:26.625>use <00:41:26.858>another <00:41:27.091>microservice, <00:41:27.325>uh,

909
00:41:28.805 --> 00:41:30.305
<00:41:28.805>for <00:41:29.142>example, <00:41:29.480>the <00:41:29.817>user <00:41:30.154>service.

910
00:41:30.925 --> 00:41:33.405
<00:41:30.925>Um, <00:41:31.100>for <00:41:31.275>the <00:41:31.450>most <00:41:31.625>part, <00:41:31.800>we <00:41:31.975>don't <00:41:32.150>share <00:41:32.325>state

911
00:41:33.405 --> 00:41:34.445
<00:41:33.405>between <00:41:33.717>micro <00:41:34.029>front <00:41:34.341>ends.

912
00:41:34.705 --> 00:41:35.965
<00:41:34.705>The, <00:41:35.083>the <00:41:35.461>core <00:41:35.839>logic

913
00:41:35.985 --> 00:41:38.565
<00:41:35.985>of <00:41:36.160>our <00:41:36.335>application <00:41:36.510>is <00:41:36.685>in <00:41:36.860>our <00:41:37.035>microservices, <00:41:37.210>the <00:41:37.385>backends,

914
00:41:38.665 --> 00:41:40.685
<00:41:38.665>and <00:41:38.840>then <00:41:39.015>the <00:41:39.190>micro <00:41:39.365>front <00:41:39.540>ends, <00:41:39.715>visualize <00:41:39.890>that <00:41:40.065>state.

915
00:41:41.345 --> 00:41:43.405
<00:41:41.345>Um, <00:41:41.544>there <00:41:41.745>are <00:41:41.944>a <00:41:42.145>few <00:41:42.345>things <00:41:42.544>that, <00:41:42.745>um,

916
00:41:43.455 --> 00:41:45.325
<00:41:43.455>might <00:41:43.688>seem <00:41:43.921>like <00:41:44.154>they're <00:41:44.388>front <00:41:44.621>end <00:41:44.855>logic,

917
00:41:45.345 --> 00:41:46.565
<00:41:45.345>but <00:41:45.619>they're <00:41:45.894>really <00:41:46.168>not <00:41:46.443>one.

918
00:41:46.585 --> 00:41:48.365
<00:41:46.585>The, <00:41:46.740>the <00:41:46.896>biggest <00:41:47.051>one, <00:41:47.207>and <00:41:47.362>the <00:41:47.518>only <00:41:47.673>example <00:41:47.829>I'll <00:41:47.985>give

919
00:41:48.365 --> 00:41:49.485
<00:41:48.365>for <00:41:48.616>now <00:41:48.869>is <00:41:49.121>the <00:41:49.373>header.

920
00:41:49.905 --> 00:41:52.525
<00:41:49.905>Um, <00:41:50.060>there's <00:41:50.216>a <00:41:50.371>user <00:41:50.527>service <00:41:50.682>which <00:41:50.838>actually <00:41:50.993>lives <00:41:51.149>in <00:41:51.305>our

921
00:41:52.525 --> 00:41:54.485
<00:41:52.525>legacy <00:41:52.991>monolith <00:41:53.458>application, <00:41:53.925>uh,

922
00:41:54.495 --> 00:41:57.005
<00:41:54.495>which <00:41:54.634>is <00:41:54.775>being <00:41:54.915>split <00:41:55.055>out <00:41:55.194>into <00:41:55.335>other <00:41:55.475>apps <00:41:55.615>as <00:41:55.755>we <00:41:55.895>speak.

923
00:41:57.625 --> 00:42:00.645
<00:41:57.625>And <00:41:57.780>then, <00:41:57.936>uh, <00:41:58.091>the <00:41:58.247>header <00:41:58.402>on <00:41:58.558>Code <00:41:58.713>Academy <00:41:58.869>properties <00:41:59.025>has

924
00:42:00.895 --> 00:42:03.965
<00:42:00.895>other <00:42:01.095>top <00:42:01.295>rights, <00:42:01.495>I <00:42:01.695>guess <00:42:01.895>for <00:42:02.095>visual <00:42:02.295>people.

925
00:42:04.305 --> 00:42:06.565
<00:42:04.305>Um, <00:42:04.480>it <00:42:04.654>has <00:42:04.830>either <00:42:05.004>a <00:42:05.180>login <00:42:05.355>sign <00:42:05.529>up <00:42:05.705>button

926
00:42:07.065 --> 00:42:08.845
<00:42:07.065>or <00:42:07.415>the, <00:42:07.765>your <00:42:08.115>user <00:42:08.465>profile.

927
00:42:08.845 --> 00:42:11.325
<00:42:08.845>If <00:42:09.000>you're <00:42:09.156>logged <00:42:09.311>in, <00:42:09.467>if <00:42:09.622>you're <00:42:09.778>free, <00:42:09.933>it, <00:42:10.089>I <00:42:10.245>mean,

928
00:42:11.325 --> 00:42:14.245
<00:42:11.325>you're <00:42:11.464>not <00:42:11.605>on <00:42:11.745>a, <00:42:11.884>a <00:42:12.024>marketing <00:42:12.165>page <00:42:12.305>from <00:42:12.444>a <00:42:12.585>small <00:42:12.725>list,

929
00:42:14.255 --> 00:42:16.245
<00:42:14.255>it'll <00:42:14.455>show <00:42:14.655>you <00:42:14.855>a <00:42:15.055>little <00:42:15.255>advertisement <00:42:15.455>for <00:42:15.655>pro.

930
00:42:16.245 --> 00:42:18.045
<00:42:16.245>And <00:42:16.400>then <00:42:16.556>if <00:42:16.711>you <00:42:16.867>have <00:42:17.022>a <00:42:17.178>dropdown, <00:42:17.333>you <00:42:17.489>can, <00:42:17.645>like,

931
00:42:18.465 --> 00:42:20.485
<00:42:18.465>you <00:42:18.605>can <00:42:18.745>click <00:42:18.885>a <00:42:19.025>dropdown <00:42:19.165>to <00:42:19.305>see <00:42:19.445>like <00:42:19.585>more <00:42:19.725>options <00:42:19.865>which

932
00:42:20.485 --> 00:42:21.525
<00:42:20.485>are <00:42:20.672>tailored <00:42:20.859>to <00:42:21.046>your <00:42:21.233>user <00:42:21.421>type.

933
00:42:21.785 --> 00:42:24.125
<00:42:21.785>So <00:42:21.960>that <00:42:22.134>thing, <00:42:22.310>that <00:42:22.484>thing <00:42:22.660>is <00:42:22.835>the <00:42:23.009>closest <00:42:23.185>thing

934
00:42:24.125 --> 00:42:25.925
<00:42:24.125>to <00:42:24.325>share <00:42:24.525>microphone <00:42:24.725>and <00:42:24.925>state <00:42:25.125>that <00:42:25.325>we <00:42:25.525>have.

935
00:42:25.945 --> 00:42:28.165
<00:42:25.945>And <00:42:26.225>it's <00:42:26.505>not <00:42:26.785>because, <00:42:27.065>uh, <00:42:27.345>every,

936
00:42:28.415 --> 00:42:31.165
<00:42:28.415>every <00:42:28.695>consuming <00:42:28.975>application <00:42:29.255>just <00:42:29.535>asynchronously <00:42:29.815>requests

937
00:42:31.165 --> 00:42:32.565
<00:42:31.165>user <00:42:31.417>data <00:42:31.669>from <00:42:31.921>the <00:42:32.173>user <00:42:32.425>service

938
00:42:32.785 --> 00:42:36.205
<00:42:32.785>and <00:42:32.924>then <00:42:33.065>renders <00:42:33.205>the <00:42:33.345>top <00:42:33.484>right <00:42:33.625>part <00:42:33.765>of <00:42:33.904>the <00:42:34.045>head <00:42:34.185>accordingly.

939
00:42:36.945 --> 00:42:39.485
<00:42:36.945>So <00:42:37.100>I <00:42:37.256>would <00:42:37.411>highly <00:42:37.567>recommend <00:42:37.722>trying <00:42:37.878>to <00:42:38.033>keep <00:42:38.189>things <00:42:38.345>simple

940
00:42:39.585 --> 00:42:41.725
<00:42:39.585>and <00:42:39.760>not <00:42:39.935>using <00:42:40.110>micro <00:42:40.285>front <00:42:40.460>ends <00:42:40.635>to <00:42:40.810>share <00:42:40.985>state,

941
00:42:41.725 --> 00:42:43.205
<00:42:41.725>otherwise, <00:42:41.947>they're <00:42:42.169>no <00:42:42.391>longer <00:42:42.613>micro <00:42:42.835>front <00:42:43.057>ends.

942
00:42:43.205 --> 00:42:45.405
<00:42:43.205>They're <00:42:43.438>a <00:42:43.671>monolith, <00:42:43.904>microservice <00:42:44.138>plus <00:42:44.371>front <00:42:44.605>end,

943
00:42:45.535 --> 00:42:46.925
<00:42:45.535>which <00:42:46.160>defeats <00:42:46.786>purpose.

944
00:42:48.835 --> 00:42:52.485
<00:42:48.835>Alright, <00:42:49.010>so, <00:42:49.185>uh, <00:42:49.360>we, <00:42:49.535>there <00:42:49.710>are <00:42:49.885>some <00:42:50.060>more <00:42:50.235>questions,

945
00:42:52.665 --> 00:42:54.325
<00:42:52.665>but <00:42:52.945>we <00:42:53.225>ran <00:42:53.505>out <00:42:53.785>of <00:42:54.065>time.

946
00:42:54.565 --> 00:42:56.445
<00:42:54.565>I <00:42:54.798>have <00:42:55.031>to <00:42:55.265>let <00:42:55.498>you <00:42:55.731>go, <00:42:55.965>Josh.

947
00:42:56.905 --> 00:43:00.605
<00:42:56.905>Um, <00:42:57.060>thank <00:42:57.216>you <00:42:57.371>again <00:42:57.527>for <00:42:57.682>your, <00:42:57.838>um, <00:42:57.993>for <00:42:58.149>your <00:42:58.305>talk

948
00:43:00.665 --> 00:43:04.325
<00:43:00.665>and, <00:43:00.805>uh, <00:43:00.945>the <00:43:01.085>questions <00:43:01.225>also, <00:43:01.365>thank <00:43:01.505>you <00:43:01.645>a <00:43:01.785>lot <00:43:01.925>for <00:43:02.065>the,

949
00:43:04.325 --> 00:43:06.685
<00:43:04.325>to <00:43:04.524>the <00:43:04.725>audience <00:43:04.924>for <00:43:05.125>all <00:43:05.325>those <00:43:05.524>amazing <00:43:05.725>questions.

950
00:43:06.845 --> 00:43:09.485
<00:43:06.845>I <00:43:06.984>think <00:43:07.125>the <00:43:07.265>q <00:43:07.404>and <00:43:07.544>a <00:43:07.685>session <00:43:07.825>was <00:43:07.964>a <00:43:08.105>great <00:43:08.245>success.

951
00:43:09.765 --> 00:43:11.605
<00:43:09.765>I <00:43:09.940>wish <00:43:10.115>we <00:43:10.290>could <00:43:10.464>continue <00:43:10.640>a <00:43:10.815>little <00:43:10.990>bit <00:43:11.165>more.

952
00:43:12.105 --> 00:43:14.805
<00:43:12.105>Um, <00:43:12.305>but <00:43:12.505>yeah, <00:43:12.705>thank <00:43:12.905>you, <00:43:13.105>uh, <00:43:13.305>Josh <00:43:13.505>and.