WEBVTT

1
00:00:03.745 --> 00:00:04.495
<00:00:03.745>Hello <00:00:04.420>everyone.

2
00:00:04.875 --> 00:00:07.895
<00:00:04.875>I'm <00:00:05.050>Trish <00:00:05.225>Shul. <00:00:05.400>I'm <00:00:05.575>principal <00:00:05.750>engineer <00:00:05.925>at <00:00:06.100>West <00:00:06.275>Winging.

3
00:00:08.075 --> 00:00:10.695
<00:00:08.074>So <00:00:08.250>by <00:00:08.424>the <00:00:08.600>day <00:00:08.774>I <00:00:08.950>architect <00:00:09.125>some <00:00:09.299>e-commerce <00:00:09.475>solution

4
00:00:10.695 --> 00:00:12.615
<00:00:10.695>for <00:00:10.895>West <00:00:11.095>Wing, <00:00:11.295>and <00:00:11.495>by <00:00:11.695>night <00:00:11.895>I <00:00:12.095>want

5
00:00:12.615 --> 00:00:14.415
<00:00:12.615>to <00:00:12.895>prepare <00:00:13.175>some <00:00:13.455>stuff <00:00:13.735>for <00:00:14.015>Ola.

6
00:00:14.955 --> 00:00:17.775
<00:00:14.955>So, <00:00:15.110>um, <00:00:15.266>today <00:00:15.421>I'll <00:00:15.577>be <00:00:15.732>talking <00:00:15.888>about <00:00:16.043>structuring <00:00:16.199>mo <00:00:16.355>uh,

7
00:00:17.775 --> 00:00:19.575
<00:00:17.775>front-end <00:00:18.055>monoliths <00:00:18.334>with <00:00:18.615>micro <00:00:18.895>front <00:00:19.174>dance.

8
00:00:21.145 --> 00:00:24.195
<00:00:21.145>What <00:00:21.425>is <00:00:21.705>a <00:00:21.985>monolith <00:00:22.265>by <00:00:22.544>definition?

9
00:00:24.325 --> 00:00:26.835
<00:00:24.325>Monolithic <00:00:24.558>application <00:00:24.791>is <00:00:25.025>designed <00:00:25.258>to <00:00:25.491>be <00:00:25.724>self-contained.

10
00:00:26.835 --> 00:00:28.115
<00:00:26.835>Components <00:00:27.123>of <00:00:27.411>the <00:00:27.698>program <00:00:27.987>are

11
00:00:28.115 --> 00:00:29.635
<00:00:28.115>interconnected <00:00:28.799>and <00:00:29.483>interdependent.

12
00:00:30.055 --> 00:00:32.675
<00:00:30.055>So <00:00:30.288>basically <00:00:30.521>monolithic <00:00:30.755>application <00:00:30.988>are <00:00:31.221>all <00:00:31.455>in

13
00:00:32.675 --> 00:00:33.795
<00:00:32.674>one <00:00:33.179>solution, <00:00:33.683>right?

14
00:00:33.795 --> 00:00:35.835
<00:00:33.795>From <00:00:34.145>database <00:00:34.495>to <00:00:34.845>UI <00:00:35.195>components,

15
00:00:35.835 --> 00:00:37.875
<00:00:35.835>everything <00:00:36.115>is <00:00:36.395>in <00:00:36.675>same <00:00:36.955>code <00:00:37.235>base.

16
00:00:38.415 --> 00:00:42.195
<00:00:38.415>So <00:00:38.570>in <00:00:38.726>modern <00:00:38.881>word, <00:00:39.037>we <00:00:39.192>already, <00:00:39.348>uh, <00:00:39.503>solved <00:00:39.659>this <00:00:39.815>problem

17
00:00:42.735 --> 00:00:44.475
<00:00:42.735>by <00:00:43.015>splitting <00:00:43.295>backend <00:00:43.575>in <00:00:43.855>the <00:00:44.135>frontend

18
00:00:45.135 --> 00:00:47.275
<00:00:45.135>and <00:00:45.415>backend <00:00:45.695>is <00:00:45.974>divided <00:00:46.254>into <00:00:46.535>microservices.

19
00:00:47.275 --> 00:00:50.875
<00:00:47.275>Further <00:00:47.475>the <00:00:47.675>more, <00:00:47.875>but <00:00:48.074>with <00:00:48.275>evolution <00:00:48.475>of <00:00:48.675>JavaScript,

20
00:00:51.495 --> 00:00:52.915
<00:00:51.495>we <00:00:51.750>have <00:00:52.006>more <00:00:52.261>code <00:00:52.517>in <00:00:52.772>frontend.

21
00:00:53.175 --> 00:00:54.955
<00:00:53.175>We <00:00:53.375>put <00:00:53.574>more <00:00:53.775>business <00:00:53.974>logic <00:00:54.175>in <00:00:54.375>front <00:00:54.574>end,

22
00:00:55.375 --> 00:00:58.955
<00:00:55.375>and <00:00:55.530>now <00:00:55.686>we <00:00:55.841>have <00:00:55.997>something <00:00:56.152>we <00:00:56.308>call <00:00:56.463>as <00:00:56.619>frontend <00:00:56.775>monolith.

23
00:00:59.415 --> 00:01:00.675
<00:00:59.415>And <00:00:59.793>with <00:01:00.171>frontend <00:01:00.549>monolith,

24
00:01:00.695 --> 00:01:02.435
<00:01:00.695>we <00:01:00.975>have <00:01:01.255>same <00:01:01.535>problems <00:01:01.815>of <00:01:02.095>monolith.

25
00:01:02.435 --> 00:01:06.195
<00:01:02.435>Again, <00:01:02.635>we <00:01:02.835>have <00:01:03.035>all <00:01:03.235>code <00:01:03.435>in <00:01:03.635>single <00:01:03.835>place.

26
00:01:07.005 --> 00:01:08.465
<00:01:07.005>All <00:01:07.267>the <00:01:07.530>code <00:01:07.793>which <00:01:08.056>is <00:01:08.319>required

27
00:01:08.465 --> 00:01:11.825
<00:01:08.465>to <00:01:08.592>run <00:01:08.719>your <00:01:08.846>app <00:01:08.974>is <00:01:09.101>in <00:01:09.228>the <00:01:09.355>same <00:01:09.483>repository, <00:01:09.610>same <00:01:09.737>code <00:01:09.865>base,

28
00:01:12.495 --> 00:01:14.485
<00:01:12.495>increasing <00:01:12.775>size <00:01:13.055>of <00:01:13.335>repo <00:01:13.615>every <00:01:13.895>day.

29
00:01:14.745 --> 00:01:16.165
<00:01:14.745>So <00:01:15.064>with <00:01:15.384>each <00:01:15.703>additional <00:01:16.023>feature,

30
00:01:16.185 --> 00:01:18.445
<00:01:16.185>we <00:01:16.340>put <00:01:16.496>more <00:01:16.651>code <00:01:16.807>into <00:01:16.962>the <00:01:17.118>same <00:01:17.273>pace, <00:01:17.429>same <00:01:17.585>place,

31
00:01:18.945 --> 00:01:20.965
<00:01:18.945>and <00:01:19.294>eventually <00:01:19.645>we <00:01:19.994>put <00:01:20.345>more

32
00:01:20.965 --> 00:01:23.125
<00:01:20.965>and <00:01:21.198>more <00:01:21.431>code <00:01:21.665>into <00:01:21.898>the <00:01:22.131>same <00:01:22.365>repository

33
00:01:23.145 --> 00:01:26.395
<00:01:23.145>and <00:01:23.425>increasing <00:01:23.705>the <00:01:23.985>code <00:01:24.265>complexity <00:01:24.545>increase

34
00:01:26.395 --> 00:01:27.515
<00:01:26.395>inter-team <00:01:27.403>dependency.

35
00:01:28.175 --> 00:01:30.555
<00:01:28.175>So <00:01:28.315>all <00:01:28.455>the <00:01:28.595>teams <00:01:28.735>are <00:01:28.875>working <00:01:29.015>on <00:01:29.155>the <00:01:29.295>same <00:01:29.435>code <00:01:29.575>base.

36
00:01:30.655 --> 00:01:32.995
<00:01:30.655>So <00:01:30.855>it's <00:01:31.055>inevitable <00:01:31.255>that <00:01:31.455>there'll <00:01:31.655>be <00:01:31.855>huge <00:01:32.055>type

37
00:01:32.995 --> 00:01:34.035
<00:01:32.995>coupling <00:01:33.307>between <00:01:33.619>the <00:01:33.931>teams.

38
00:01:34.575 --> 00:01:37.235
<00:01:34.575>So <00:01:34.702>we <00:01:34.829>have <00:01:34.956>to <00:01:35.084>consider <00:01:35.211>all <00:01:35.338>the <00:01:35.465>teams <00:01:35.593>while <00:01:35.720>doing <00:01:35.847>any <00:01:35.975>feature

39
00:01:38.785 --> 00:01:40.165
<00:01:38.785>and <00:01:39.199>it <00:01:39.613>all, <00:01:40.026>all

40
00:01:40.165 --> 00:01:42.405
<00:01:40.164>of <00:01:40.339>it <00:01:40.514>results <00:01:40.690>in <00:01:40.865>slow <00:01:41.039>development <00:01:41.214>to <00:01:41.389>deploy <00:01:41.565>cycle.

41
00:01:44.015 --> 00:01:46.555
<00:01:44.015>And <00:01:44.170>finally, <00:01:44.326>we <00:01:44.481>are <00:01:44.637>as <00:01:44.792>strong <00:01:44.948>as <00:01:45.103>the <00:01:45.259>weakest <00:01:45.415>link.

42
00:01:46.935 --> 00:01:49.835
<00:01:46.935>So <00:01:47.075>if <00:01:47.215>one <00:01:47.355>team <00:01:47.495>break <00:01:47.635>anything, <00:01:47.775>we <00:01:47.915>have <00:01:48.055>to <00:01:48.195>stop <00:01:48.335>everything

43
00:01:50.055 --> 00:01:52.835
<00:01:50.055>and <00:01:50.182>first <00:01:50.309>fix <00:01:50.436>that <00:01:50.564>thing <00:01:50.691>and <00:01:50.818>then <00:01:50.945>only <00:01:51.073>we <00:01:51.200>can <00:01:51.327>move <00:01:51.455>forward.

44
00:01:52.935 --> 00:01:55.755
<00:01:52.935>We <00:01:53.110>cannot <00:01:53.285>deploy <00:01:53.460>anything <00:01:53.635>until <00:01:53.810>that <00:01:53.985>thing <00:01:54.160>is <00:01:54.335>fixed.

45
00:01:56.255 --> 00:01:58.835
<00:01:56.255>So <00:01:56.410>we <00:01:56.566>are <00:01:56.721>as <00:01:56.877>strong <00:01:57.032>as <00:01:57.188>only <00:01:57.343>the <00:01:57.499>weakest <00:01:57.655>link.

46
00:02:00.025 --> 00:02:03.315
<00:02:00.025>So <00:02:00.305>what's <00:02:00.585>the <00:02:00.865>solution? <00:02:01.145>Microphone <00:02:01.425>frontend.

47
00:02:03.975 --> 00:02:05.475
<00:02:03.975>So <00:02:04.244>what <00:02:04.515>is <00:02:04.785>a <00:02:05.054>microfund <00:02:05.324>end?

48
00:02:06.395 --> 00:02:08.365
<00:02:06.395>Microfund <00:02:06.675>architecture <00:02:06.955>is <00:02:07.235>a <00:02:07.515>design <00:02:07.795>pattern

49
00:02:08.415 --> 00:02:10.565
<00:02:08.414>where <00:02:08.695>monolithic <00:02:08.975>frontend <00:02:09.255>app <00:02:09.535>is <00:02:09.815>restructured

50
00:02:10.565 --> 00:02:11.765
<00:02:10.565>into <00:02:10.924>small <00:02:11.285>independent <00:02:11.644>apps.

51
00:02:12.015 --> 00:02:13.645
<00:02:12.015>These <00:02:12.295>micro <00:02:12.575>apps <00:02:12.855>are <00:02:13.135>stitch <00:02:13.415>together

52
00:02:14.065 --> 00:02:15.445
<00:02:14.065>as <00:02:14.272>a <00:02:14.478>single <00:02:14.686>page <00:02:14.893>on <00:02:15.100>the <00:02:15.307>fly.

53
00:02:16.025 --> 00:02:19.365
<00:02:16.025>So <00:02:16.165>in <00:02:16.305>a <00:02:16.445>nutshell, <00:02:16.585>basically <00:02:16.725>it's <00:02:16.865>a <00:02:17.005>huge <00:02:17.145>micro <00:02:17.285>frontend <00:02:17.425>is

54
00:02:19.365 --> 00:02:20.805
<00:02:19.365>just <00:02:19.689>breaking <00:02:20.013>a <00:02:20.337>huge <00:02:20.661>piece

55
00:02:20.805 --> 00:02:22.685
<00:02:20.805>of <00:02:21.038>code <00:02:21.271>into <00:02:21.505>small <00:02:21.738>pieces <00:02:21.971>of <00:02:22.205>code.

56
00:02:24.845 --> 00:02:26.775
<00:02:24.845>Each <00:02:25.078>micro <00:02:25.311>frontend <00:02:25.545>is <00:02:25.778>a <00:02:26.011>standalone <00:02:26.245>system.

57
00:02:27.315 --> 00:02:29.975
<00:02:27.315>It <00:02:27.442>is <00:02:27.569>runable <00:02:27.696>by <00:02:27.824>its <00:02:27.951>own. <00:02:28.078>It <00:02:28.205>is <00:02:28.333>maintainable <00:02:28.460>by <00:02:28.587>its <00:02:28.715>own.

58
00:02:30.645 --> 00:02:32.855
<00:02:30.645>Each <00:02:30.878>micro <00:02:31.111>frontend <00:02:31.345>is <00:02:31.578>an <00:02:31.811>independent <00:02:32.045>repository.

59
00:02:33.195 --> 00:02:34.335
<00:02:33.195>So <00:02:33.400>there <00:02:33.605>is <00:02:33.810>no <00:02:34.015>direct <00:02:34.221>code

60
00:02:34.335 --> 00:02:35.815
<00:02:34.335>dependencies <00:02:34.779>between <00:02:35.223>micro <00:02:35.667>frontend.

61
00:02:35.845 --> 00:02:37.935
<00:02:35.845>Each <00:02:36.078>micro <00:02:36.311>frontend <00:02:36.545>has <00:02:36.778>its <00:02:37.011>own <00:02:37.245>repository.

62
00:02:38.315 --> 00:02:41.855
<00:02:38.315>Uh, <00:02:38.470>the <00:02:38.626>life <00:02:38.781>of <00:02:38.937>the <00:02:39.092>code <00:02:39.248>is <00:02:39.403>within <00:02:39.559>that <00:02:39.715>repository

63
00:02:42.275 --> 00:02:44.495
<00:02:42.275>and <00:02:42.430>it <00:02:42.586>does <00:02:42.741>not <00:02:42.897>depend <00:02:43.052>on <00:02:43.208>other <00:02:43.363>micro <00:02:43.519>front <00:02:43.675>ends.

64
00:02:46.025 --> 00:02:47.815
<00:02:46.025>Since <00:02:46.375>they <00:02:46.725>have <00:02:47.075>separate <00:02:47.425>repositories,

65
00:02:47.885 --> 00:02:49.535
<00:02:47.885>they <00:02:48.118>can <00:02:48.351>write <00:02:48.584>their <00:02:48.818>own <00:02:49.051>CI <00:02:49.285>pipelines,

66
00:02:49.535 --> 00:02:51.495
<00:02:49.535>they <00:02:49.690>can <00:02:49.846>write <00:02:50.001>their <00:02:50.157>own <00:02:50.312>test <00:02:50.468>suit, <00:02:50.623>they <00:02:50.779>can <00:02:50.935>uh,

67
00:02:51.495 --> 00:02:53.935
<00:02:51.495>write <00:02:51.775>their <00:02:52.055>own <00:02:52.335>uh, <00:02:52.615>regression <00:02:52.895>pipelines.

68
00:02:53.935 --> 00:02:55.815
<00:02:53.935>They <00:02:54.168>can <00:02:54.401>write <00:02:54.635>their <00:02:54.868>own <00:02:55.101>deployment <00:02:55.335>pipelines.

69
00:02:57.675 --> 00:03:00.285
<00:02:57.675>And <00:02:57.850>hence <00:02:58.025>finally, <00:02:58.200>which <00:02:58.375>is <00:02:58.550>kind <00:02:58.725>of <00:02:58.900>most <00:02:59.075>important

70
00:03:00.345 --> 00:03:03.085
<00:03:00.345>for <00:03:00.578>micro <00:03:00.811>frontend <00:03:01.045>architecture <00:03:01.278>is <00:03:01.511>independent <00:03:01.745>deployment.

71
00:03:03.475 --> 00:03:05.925
<00:03:03.475>Each <00:03:03.755>micro <00:03:04.035>frontend <00:03:04.315>is <00:03:04.595>deployable <00:03:04.875>independently.

72
00:03:06.465 --> 00:03:08.605
<00:03:06.465>It <00:03:06.620>does <00:03:06.776>not <00:03:06.931>need <00:03:07.087>to <00:03:07.242>depend <00:03:07.398>on <00:03:07.553>other <00:03:07.709>microfund <00:03:07.865>end.

73
00:03:09.215 --> 00:03:12.385
<00:03:09.215>So <00:03:09.495>we <00:03:09.775>enable <00:03:10.055>parallel <00:03:10.335>development <00:03:10.615>cycle.

74
00:03:12.765 --> 00:03:15.505
<00:03:12.765>So <00:03:12.904>for <00:03:13.045>example, <00:03:13.184>the <00:03:13.325>problem <00:03:13.464>in <00:03:13.605>model <00:03:13.744>we <00:03:13.885>have <00:03:14.024>if <00:03:14.165>something

75
00:03:15.605 --> 00:03:17.585
<00:03:15.605>one <00:03:15.885>team <00:03:16.165>broke <00:03:16.445>something, <00:03:16.725>we <00:03:17.005>need

76
00:03:17.585 --> 00:03:19.145
<00:03:17.585>to <00:03:17.785>stop <00:03:17.985>the <00:03:18.185>development <00:03:18.385>and <00:03:18.585>fix <00:03:18.785>that <00:03:18.985>thing.

77
00:03:19.485 --> 00:03:20.585
<00:03:19.485>In <00:03:19.732>this <00:03:19.980>case, <00:03:20.227>maybe <00:03:20.475>not.

78
00:03:21.125 --> 00:03:23.225
<00:03:21.125>We <00:03:21.280>can <00:03:21.436>still <00:03:21.591>go <00:03:21.747>ahead <00:03:21.902>with <00:03:22.058>the <00:03:22.213>other <00:03:22.369>team's <00:03:22.525>deployment

79
00:03:23.405 --> 00:03:24.745
<00:03:23.405>and <00:03:23.646>make <00:03:23.887>sure <00:03:24.128>still <00:03:24.369>we <00:03:24.611>are

80
00:03:24.765 --> 00:03:26.105
<00:03:24.765>not <00:03:25.006>breaking <00:03:25.247>anything <00:03:25.488>on <00:03:25.729>the <00:03:25.971>line.

81
00:03:28.185 --> 00:03:30.405
<00:03:28.185>So <00:03:28.385>let's <00:03:28.585>have <00:03:28.785>a <00:03:28.985>look <00:03:29.185>at <00:03:29.385>this <00:03:29.585>architecture.

82
00:03:32.625 --> 00:03:34.365
<00:03:32.625>So <00:03:32.800>this <00:03:32.975>is <00:03:33.150>a <00:03:33.325>very <00:03:33.500>bird <00:03:33.675>by <00:03:33.850>overview <00:03:34.025>of

83
00:03:34.585 --> 00:03:36.485
<00:03:34.585>how <00:03:34.865>a <00:03:35.145>microfund <00:03:35.425>architecture <00:03:35.705>looks <00:03:35.985>like.

84
00:03:36.905 --> 00:03:39.285
<00:03:36.905>So <00:03:37.060>there <00:03:37.216>is <00:03:37.371>a <00:03:37.527>host <00:03:37.682>and <00:03:37.838>there <00:03:37.993>are <00:03:38.149>some <00:03:38.305>remotes.

85
00:03:39.635 --> 00:03:42.245
<00:03:39.635>Host <00:03:39.774>does <00:03:39.915>not <00:03:40.054>need <00:03:40.195>to <00:03:40.334>know <00:03:40.475>how <00:03:40.614>these <00:03:40.755>remotes <00:03:40.894>were <00:03:41.035>built,

86
00:03:42.305 --> 00:03:43.365
<00:03:42.305>how <00:03:42.623>these <00:03:42.941>were <00:03:43.259>compiled.

87
00:03:43.705 --> 00:03:46.685
<00:03:43.704>All <00:03:43.844>it <00:03:43.984>needs <00:03:44.124>a <00:03:44.265>remote <00:03:44.404>URL <00:03:44.545>where <00:03:44.684>these <00:03:44.825>remotes <00:03:44.964>are <00:03:45.105>published

88
00:03:46.785 --> 00:03:48.085
<00:03:46.785>and <00:03:47.077>host <00:03:47.370>can <00:03:47.662>consume <00:03:47.955>them.

89
00:03:48.545 --> 00:03:50.445
<00:03:48.545>On <00:03:48.825>the <00:03:49.105>other <00:03:49.385>hand, <00:03:49.665>these <00:03:49.945>remotes,

90
00:03:50.555 --> 00:03:53.005
<00:03:50.555>when <00:03:50.755>they <00:03:50.955>build <00:03:51.155>themselves, <00:03:51.355>they <00:03:51.555>do <00:03:51.755>not <00:03:51.955>need

91
00:03:53.005 --> 00:03:54.445
<00:03:53.005>to <00:03:53.190>care <00:03:53.375>about <00:03:53.560>how <00:03:53.745>they <00:03:53.930>will <00:03:54.115>be <00:03:54.301>consumed.

92
00:03:54.585 --> 00:03:56.645
<00:03:54.585>All <00:03:54.760>they <00:03:54.935>need <00:03:55.110>to <00:03:55.285>do <00:03:55.460>is <00:03:55.635>make <00:03:55.810>sure, <00:03:55.985>um,

93
00:03:56.795 --> 00:03:57.965
<00:03:56.795>they <00:03:57.146>pass <00:03:57.497>their <00:03:57.848>pipeline

94
00:03:58.265 --> 00:04:01.205
<00:03:58.265>and <00:03:58.420>publish <00:03:58.576>the <00:03:58.731>packages <00:03:58.887>so <00:03:59.042>that <00:03:59.198>the <00:03:59.353>host <00:03:59.509>can <00:03:59.665>consume.

95
00:04:03.075 --> 00:04:05.505
<00:04:03.075>Let's <00:04:03.250>take <00:04:03.424>a <00:04:03.600>deep <00:04:03.774>dive <00:04:03.950>into <00:04:04.125>how <00:04:04.299>we <00:04:04.475>build

96
00:04:05.505 --> 00:04:06.785
<00:04:05.505>that <00:04:05.889>in <00:04:06.273>West <00:04:06.656>winging.

97
00:04:07.785 --> 00:04:10.485
<00:04:07.785>So <00:04:07.984>this <00:04:08.185>is <00:04:08.385>a <00:04:08.585>very <00:04:08.785>common <00:04:08.984>e-commerce <00:04:09.185>website

98
00:04:10.785 --> 00:04:13.005
<00:04:10.785>and <00:04:11.018>same <00:04:11.251>as <00:04:11.484>our <00:04:11.718>west <00:04:11.951>winging <00:04:12.185>shop.

99
00:04:13.465 --> 00:04:16.725
<00:04:13.465>So <00:04:13.620>it <00:04:13.776>has <00:04:13.931>header <00:04:14.087>filterer, <00:04:14.242>some <00:04:14.398>pages <00:04:14.553>like <00:04:14.709>homepage <00:04:14.865>listing,

100
00:04:16.835 --> 00:04:19.005
<00:04:16.834>page <00:04:17.114>card, <00:04:17.394>checkout <00:04:17.674>page, <00:04:17.954>et <00:04:18.234>cetera.

101
00:04:19.535 --> 00:04:20.715
<00:04:19.535>So <00:04:19.800>in <00:04:20.066>a <00:04:20.331>monolithic <00:04:20.596>code,

102
00:04:21.095 --> 00:04:23.155
<00:04:21.095>all <00:04:21.295>this <00:04:21.495>code <00:04:21.695>remains <00:04:21.895>in <00:04:22.095>same <00:04:22.295>code <00:04:22.495>base.

103
00:04:23.535 --> 00:04:26.235
<00:04:23.535>All <00:04:23.690>the <00:04:23.846>teams <00:04:24.001>working <00:04:24.157>together <00:04:24.312>on <00:04:24.468>the <00:04:24.623>same <00:04:24.779>code <00:04:24.935>base.

104
00:04:26.535 --> 00:04:28.755
<00:04:26.535>And <00:04:26.768>eventually <00:04:27.001>we <00:04:27.235>will <00:04:27.468>having <00:04:27.701>all <00:04:27.935>the,

105
00:04:28.885 --> 00:04:31.035
<00:04:28.885>we'll <00:04:29.060>be <00:04:29.235>having <00:04:29.409>all <00:04:29.585>the <00:04:29.760>problems <00:04:29.935>of <00:04:30.110>a <00:04:30.284>monolith.

106
00:04:31.705 --> 00:04:34.485
<00:04:31.705>But <00:04:31.860>in <00:04:32.016>micro <00:04:32.171>frontend <00:04:32.327>work, <00:04:32.482>things <00:04:32.638>look <00:04:32.793>a <00:04:32.949>bit <00:04:33.104>different.

107
00:04:35.575 --> 00:04:38.185
<00:04:35.575>Each <00:04:35.750>of <00:04:35.925>this <00:04:36.099>page <00:04:36.275>is <00:04:36.450>a <00:04:36.625>micro <00:04:36.800>front <00:04:36.974>then

108
00:04:38.575 --> 00:04:41.065
<00:04:38.575>that <00:04:38.730>means <00:04:38.886>they <00:04:39.041>have <00:04:39.197>done, <00:04:39.352>they <00:04:39.508>have <00:04:39.663>their <00:04:39.819>own <00:04:39.974>repository,

109
00:04:41.095 --> 00:04:42.425
<00:04:41.095>they <00:04:41.334>have <00:04:41.573>their <00:04:41.813>own <00:04:42.052>code <00:04:42.292>base,

110
00:04:42.805 --> 00:04:46.025
<00:04:42.805>and <00:04:42.945>the <00:04:43.085>one <00:04:43.225>team <00:04:43.365>is <00:04:43.505>not <00:04:43.645>dependent <00:04:43.785>on <00:04:43.925>the <00:04:44.065>other <00:04:44.205>team.

111
00:04:46.495 --> 00:04:47.665
<00:04:46.495>They <00:04:46.846>can <00:04:47.197>work <00:04:47.548>individually.

112
00:04:47.665 --> 00:04:50.065
<00:04:47.665>If <00:04:47.792>some <00:04:47.919>changes <00:04:48.046>has <00:04:48.174>to <00:04:48.301>be <00:04:48.428>done <00:04:48.555>on <00:04:48.683>homepage, <00:04:48.810>they <00:04:48.937>need <00:04:49.065>not

113
00:04:50.065 --> 00:04:51.705
<00:04:50.065>to <00:04:50.240>worry <00:04:50.415>about <00:04:50.590>what's <00:04:50.765>happening <00:04:50.940>in <00:04:51.115>the <00:04:51.290>cart <00:04:51.465>team.

114
00:04:52.055 --> 00:04:53.385
<00:04:52.055>They <00:04:52.294>can <00:04:52.533>just <00:04:52.773>do <00:04:53.012>the <00:04:53.252>changes

115
00:04:53.725 --> 00:04:55.545
<00:04:53.725>and <00:04:53.958>deploy <00:04:54.191>their <00:04:54.425>stuff <00:04:54.658>and <00:04:54.891>go <00:04:55.125>ahead.

116
00:04:57.765 --> 00:05:01.745
<00:04:57.765>So <00:04:57.892>to <00:04:58.019>cover <00:04:58.146>up <00:04:58.274>all <00:04:58.401>these <00:04:58.528>pages, <00:04:58.655>uh, <00:04:58.783>we <00:04:58.910>need <00:04:59.037>a <00:04:59.164>consumer,

117
00:05:02.535 --> 00:05:05.395
<00:05:02.535>and <00:05:02.768>this <00:05:03.001>is <00:05:03.235>app <00:05:03.468>Shell <00:05:03.701>our <00:05:03.935>host.

118
00:05:06.275 --> 00:05:10.175
<00:05:06.275>So <00:05:06.430>App <00:05:06.586>Shell <00:05:06.741>is <00:05:06.897>basically <00:05:07.052>just <00:05:07.208>having <00:05:07.363>the <00:05:07.519>common <00:05:07.674>header

119
00:05:10.175 --> 00:05:14.605
<00:05:10.175>and <00:05:10.330>footer <00:05:10.486>and <00:05:10.641>it <00:05:10.797>consumes <00:05:10.952>all <00:05:11.108>the <00:05:11.263>micro <00:05:11.419>font <00:05:11.575>ends.

120
00:05:14.605 --> 00:05:17.205
<00:05:14.605>And <00:05:14.805>so <00:05:15.005>the <00:05:15.205>final <00:05:15.405>page, <00:05:15.605>so <00:05:15.805>for <00:05:16.005>example,

121
00:05:17.525 --> 00:05:20.245
<00:05:17.525>whenever <00:05:17.664>a <00:05:17.804>call <00:05:17.945>is <00:05:18.085>made <00:05:18.224>for <00:05:18.364>a <00:05:18.505>homepage, <00:05:18.645>so <00:05:18.784>it's <00:05:18.924>uh,

122
00:05:20.305 --> 00:05:23.405
<00:05:20.305>actual <00:05:20.480>consumes <00:05:20.655>the <00:05:20.830>homepage, <00:05:21.005>micro <00:05:21.180>front <00:05:21.355>end, <00:05:21.530>it's <00:05:21.705>just

123
00:05:23.405 --> 00:05:25.845
<00:05:23.405>with <00:05:23.580>header <00:05:23.755>and <00:05:23.929>footer <00:05:24.104>and <00:05:24.280>finally <00:05:24.455>serves <00:05:24.630>the <00:05:24.804>page

124
00:05:25.985 --> 00:05:27.525
<00:05:25.985>and <00:05:26.262>similarly <00:05:26.539>serve <00:05:26.816>for <00:05:27.093>other <00:05:27.371>pages.

125
00:05:28.305 --> 00:05:33.075
<00:05:28.305>So <00:05:28.421>this <00:05:28.538>on <00:05:28.655>a <00:05:28.771>whole <00:05:28.888>gives <00:05:29.005>us <00:05:29.121>a <00:05:29.238>more <00:05:29.355>freedom, <00:05:29.471>a <00:05:29.588>more <00:05:29.705>freedom

126
00:05:33.455 --> 00:05:35.515
<00:05:33.455>to <00:05:33.734>move <00:05:34.015>around <00:05:34.294>in <00:05:34.575>the <00:05:34.854>teams.

127
00:05:36.615 --> 00:05:40.675
<00:05:36.615>Now <00:05:36.755>app <00:05:36.895>actual <00:05:37.035>has <00:05:37.175>more <00:05:37.315>stuff <00:05:37.455>to <00:05:37.595>do <00:05:37.735>just <00:05:37.875>about, <00:05:38.015>uh,

128
00:05:40.675 --> 00:05:42.995
<00:05:40.675>just <00:05:40.875>not, <00:05:41.075>uh, <00:05:41.275>having <00:05:41.475>header <00:05:41.675>and <00:05:41.875>food <00:05:42.075>static,

129
00:05:43.535 --> 00:05:46.765
<00:05:43.534>but <00:05:43.734>um, <00:05:43.934>it <00:05:44.135>has <00:05:44.335>some <00:05:44.534>shared <00:05:44.734>business <00:05:44.934>logic.

130
00:05:47.685 --> 00:05:50.825
<00:05:47.685>So <00:05:47.825>by <00:05:47.965>design <00:05:48.105>we <00:05:48.245>decided <00:05:48.385>that <00:05:48.525>it's, <00:05:48.665>uh, <00:05:48.805>way <00:05:48.945>more <00:05:49.085>secure,

131
00:05:51.105 --> 00:05:54.785
<00:05:51.105>maintainable <00:05:51.305>and <00:05:51.505>easy <00:05:51.705>to <00:05:51.905>implement <00:05:52.105>unidirectional <00:05:52.305>data <00:05:52.505>flow.

132
00:05:55.215 --> 00:05:58.085
<00:05:55.215>That <00:05:55.390>is <00:05:55.565>we <00:05:55.740>flow <00:05:55.915>all <00:05:56.090>the <00:05:56.265>data <00:05:56.440>from <00:05:56.615>App

133
00:05:58.085 --> 00:05:59.365
<00:05:58.085>Shell <00:05:58.373>to <00:05:58.661>micro <00:05:58.949>front <00:05:59.237>teams.

134
00:06:00.145 --> 00:06:02.445
<00:06:00.145>So <00:06:00.300>we <00:06:00.456>try <00:06:00.611>to <00:06:00.767>keep <00:06:00.922>all <00:06:01.078>the <00:06:01.233>shared <00:06:01.389>business <00:06:01.544>logic,

135
00:06:02.695 --> 00:06:04.525
<00:06:02.695>which <00:06:03.045>is <00:06:03.395>available, <00:06:03.745>which <00:06:04.094>needs

136
00:06:04.525 --> 00:06:06.925
<00:06:04.525>to <00:06:04.700>be <00:06:04.875>available <00:06:05.049>throughout <00:06:05.224>our <00:06:05.400>e-commerce <00:06:05.575>app <00:06:05.750>and <00:06:05.924>app.

137
00:06:06.925 --> 00:06:08.965
<00:06:06.925>Shell, <00:06:07.275>for <00:06:07.625>example, <00:06:07.975>login <00:06:08.325>logic.

138
00:06:09.425 --> 00:06:12.535
<00:06:09.425>So <00:06:09.565>we <00:06:09.705>have <00:06:09.845>all <00:06:09.985>the <00:06:10.125>login <00:06:10.265>state <00:06:10.405>and <00:06:10.545>app <00:06:10.685>Shell <00:06:10.825>app.

139
00:06:12.535 --> 00:06:14.215
<00:06:12.535>She <00:06:12.815>hosts <00:06:13.095>all <00:06:13.375>the <00:06:13.655>user <00:06:13.935>data.

140
00:06:14.235 --> 00:06:16.575
<00:06:14.235>For <00:06:14.435>example, <00:06:14.635>is <00:06:14.835>user <00:06:15.035>logged <00:06:15.235>in <00:06:15.435>user <00:06:15.635>email,

141
00:06:16.605 --> 00:06:18.055
<00:06:16.605>user <00:06:17.040>address <00:06:17.475>and <00:06:17.910>whatnot.

142
00:06:18.705 --> 00:06:20.725
<00:06:18.705>And <00:06:18.905>even <00:06:19.104>if <00:06:19.305>the <00:06:19.505>user <00:06:19.705>isn't <00:06:19.905>logged <00:06:20.104>out

143
00:06:20.785 --> 00:06:23.085
<00:06:20.785>and <00:06:20.940>uh, <00:06:21.096>microfund <00:06:21.251>in <00:06:21.407>wants <00:06:21.562>the <00:06:21.718>user <00:06:21.873>to <00:06:22.029>log <00:06:22.185>in.

144
00:06:23.105 --> 00:06:25.325
<00:06:23.105>So <00:06:23.280>microfund <00:06:23.455>in <00:06:23.630>does <00:06:23.805>not <00:06:23.980>do <00:06:24.155>it <00:06:24.330>by <00:06:24.505>itself.

145
00:06:25.875 --> 00:06:28.735
<00:06:25.875>It <00:06:26.108>sends <00:06:26.341>signals <00:06:26.575>to <00:06:26.808>app <00:06:27.041>and <00:06:27.275>app.

146
00:06:28.735 --> 00:06:31.375
<00:06:28.735>She <00:06:28.935>initiates <00:06:29.135>the <00:06:29.335>login <00:06:29.535>mechanism, <00:06:29.735>for <00:06:29.935>example, <00:06:30.135>um,

147
00:06:31.375 --> 00:06:35.295
<00:06:31.375>showing <00:06:31.530>a <00:06:31.686>pop-up <00:06:31.841>for <00:06:31.997>login <00:06:32.152>and <00:06:32.308>processing <00:06:32.463>all <00:06:32.619>the <00:06:32.775>login.

148
00:06:35.365 --> 00:06:39.055
<00:06:35.365>Once <00:06:35.540>the <00:06:35.715>user <00:06:35.890>has <00:06:36.065>logged <00:06:36.240>it <00:06:36.415>updates <00:06:36.590>its <00:06:36.765>state

149
00:06:39.155 --> 00:06:42.375
<00:06:39.155>and <00:06:39.330>forward <00:06:39.505>that <00:06:39.679>forwarded <00:06:39.854>forwards <00:06:40.030>that <00:06:40.205>data <00:06:40.380>to <00:06:40.554>Microfund.

150
00:06:42.375 --> 00:06:44.345
<00:06:42.375>Then, <00:06:42.608>so <00:06:42.841>that <00:06:43.075>we <00:06:43.308>do <00:06:43.541>not <00:06:43.775>need

151
00:06:44.345 --> 00:06:46.065
<00:06:44.345>to <00:06:44.545>repeat <00:06:44.745>this <00:06:44.945>logic <00:06:45.145>in <00:06:45.345>any <00:06:45.545>Microfund <00:06:45.745>10

152
00:06:46.065 --> 00:06:47.345
<00:06:46.065>and <00:06:46.229>app, <00:06:46.394>shell <00:06:46.558>can <00:06:46.723>take <00:06:46.887>care <00:06:47.052>of <00:06:47.217>it.

153
00:06:48.175 --> 00:06:50.755
<00:06:48.175>The <00:06:48.330>second <00:06:48.486>thing <00:06:48.641>we <00:06:48.797>put <00:06:48.952>in <00:06:49.108>app, <00:06:49.263>shell <00:06:49.419>must <00:06:49.575>tracking.

154
00:06:51.455 --> 00:06:54.125
<00:06:51.455>So <00:06:51.688>we <00:06:51.921>use, <00:06:52.155>uh, <00:06:52.388>multiple <00:06:52.621>tracking <00:06:52.854>techniques

155
00:06:54.305 --> 00:06:57.005
<00:06:54.305>and <00:06:54.460>all <00:06:54.616>that <00:06:54.771>tracking <00:06:54.927>techniques <00:06:55.082>we <00:06:55.238>enable <00:06:55.393>in <00:06:55.549>App <00:06:55.705>Shell.

156
00:06:57.705 --> 00:07:00.205
<00:06:57.705>So <00:06:57.880>when <00:06:58.055>something <00:06:58.229>needs <00:06:58.405>to <00:06:58.580>be <00:06:58.755>tracked <00:06:58.930>from <00:06:59.104>microfund

157
00:07:00.225 --> 00:07:03.405
<00:07:00.225>and <00:07:00.365>let's <00:07:00.505>say <00:07:00.645>in <00:07:00.785>um, <00:07:00.925>listing <00:07:01.065>page, <00:07:01.205>we <00:07:01.345>want <00:07:01.485>to <00:07:01.625>see

158
00:07:03.555 --> 00:07:06.605
<00:07:03.555>that <00:07:03.755>users <00:07:03.955>saw <00:07:04.155>specific, <00:07:04.355>uh, <00:07:04.555>product <00:07:04.755>or <00:07:04.955>not.

159
00:07:07.175 --> 00:07:09.275
<00:07:07.175>So <00:07:07.455>listing <00:07:07.735>Page <00:07:08.015>does <00:07:08.295>not <00:07:08.575>need

160
00:07:09.275 --> 00:07:11.475
<00:07:09.275>to <00:07:09.474>implement <00:07:09.674>this <00:07:09.875>tracking <00:07:10.075>system <00:07:10.275>on <00:07:10.474>their <00:07:10.674>own.

161
00:07:11.975 --> 00:07:13.315
<00:07:11.975>All <00:07:12.176>they <00:07:12.377>need <00:07:12.578>to <00:07:12.779>do <00:07:12.980>is, <00:07:13.181>um,

162
00:07:13.455 --> 00:07:15.635
<00:07:13.455>app <00:07:13.734>Shell <00:07:14.015>exposes <00:07:14.294>some <00:07:14.575>tracking <00:07:14.854>functions

163
00:07:15.895 --> 00:07:17.235
<00:07:15.895>and <00:07:16.136>they <00:07:16.377>hook <00:07:16.618>onto <00:07:16.859>that <00:07:17.101>function.

164
00:07:17.735 --> 00:07:19.795
<00:07:17.735>And <00:07:18.085>um, <00:07:18.435>all <00:07:18.785>they <00:07:19.135>need

165
00:07:19.795 --> 00:07:21.555
<00:07:19.795>to <00:07:19.950>do <00:07:20.106>is <00:07:20.261>send <00:07:20.417>this <00:07:20.572>tracking <00:07:20.728>data <00:07:20.883>to <00:07:21.039>App <00:07:21.195>Shell.

166
00:07:21.745 --> 00:07:24.275
<00:07:21.745>It's <00:07:21.900>on <00:07:22.056>app <00:07:22.211>Shell <00:07:22.367>to <00:07:22.522>decide <00:07:22.678>where <00:07:22.833>this <00:07:22.989>data <00:07:23.145>needs

167
00:07:24.275 --> 00:07:27.275
<00:07:24.275>to <00:07:24.450>be <00:07:24.625>sent, <00:07:24.799>maybe <00:07:24.974>Google, <00:07:25.150>maybe <00:07:25.325>internal <00:07:25.500>analytics, <00:07:25.674>whatnot.

168
00:07:27.815 --> 00:07:31.825
<00:07:27.815>The <00:07:27.990>third <00:07:28.165>thing <00:07:28.340>we <00:07:28.515>put <00:07:28.690>in <00:07:28.865>was <00:07:29.040>system <00:07:29.215>contract.

169
00:07:32.415 --> 00:07:36.515
<00:07:32.415>So, <00:07:32.570>so <00:07:32.726>West <00:07:32.881>Wing <00:07:33.037>Shop <00:07:33.192>is <00:07:33.348>a <00:07:33.503>multi <00:07:33.659>multi-country <00:07:33.815>setup.

170
00:07:37.255 --> 00:07:41.395
<00:07:37.255>So <00:07:37.410>we <00:07:37.566>have <00:07:37.721>a <00:07:37.877>single <00:07:38.032>app <00:07:38.188>which <00:07:38.343>behaves <00:07:38.499>differently, <00:07:38.655>uh,

171
00:07:41.395 --> 00:07:42.675
<00:07:41.395>based <00:07:41.779>on <00:07:42.163>past <00:07:42.547>config.

172
00:07:42.975 --> 00:07:46.395
<00:07:42.975>So <00:07:43.130>this <00:07:43.286>config <00:07:43.441>we <00:07:43.597>hosted <00:07:43.752>in <00:07:43.908>App <00:07:44.063>and <00:07:44.219>microfund <00:07:44.375>and

173
00:07:46.555 --> 00:07:49.155
<00:07:46.555>whenever <00:07:46.710>they <00:07:46.866>need <00:07:47.021>any <00:07:47.177>config, <00:07:47.332>they <00:07:47.488>just <00:07:47.643>request <00:07:47.799>from <00:07:47.955>app

174
00:07:49.495 --> 00:07:50.515
<00:07:49.495>and <00:07:49.801>get <00:07:50.107>the <00:07:50.413>confi.

175
00:07:50.965 --> 00:07:53.035
<00:07:50.965>Again, <00:07:51.245>this <00:07:51.525>saves <00:07:51.805>us <00:07:52.085>from <00:07:52.365>hydration

176
00:07:53.335 --> 00:07:56.355
<00:07:53.335>of <00:07:53.568>this <00:07:53.801>config <00:07:54.034>system <00:07:54.268>throughout <00:07:54.501>micro <00:07:54.734>frontend.

177
00:07:56.355 --> 00:07:59.555
<00:07:56.355>It's <00:07:56.471>just <00:07:56.588>in <00:07:56.705>one <00:07:56.821>place <00:07:56.938>hel <00:07:57.055>so <00:07:57.171>that <00:07:57.288>we <00:07:57.405>can <00:07:57.521>get <00:07:57.638>it <00:07:57.755>everywhere.

178
00:08:00.535 --> 00:08:03.195
<00:08:00.535>And <00:08:00.675>the <00:08:00.815>final <00:08:00.955>thing <00:08:01.095>we <00:08:01.235>put <00:08:01.375>was <00:08:01.515>put <00:08:01.655>in <00:08:01.795>was <00:08:01.935>routing.

179
00:08:03.575 --> 00:08:04.715
<00:08:03.575>So <00:08:03.917>Uphill <00:08:04.258>is <00:08:04.601>responsible

180
00:08:04.715 --> 00:08:07.155
<00:08:04.715>for <00:08:04.890>all <00:08:05.065>the <00:08:05.239>routing <00:08:05.414>throughout <00:08:05.590>the <00:08:05.765>micro <00:08:05.940>frontend <00:08:06.114>system.

181
00:08:07.575 --> 00:08:10.675
<00:08:07.575>If <00:08:07.702>user <00:08:07.829>needs <00:08:07.956>to <00:08:08.084>go <00:08:08.211>from, <00:08:08.338>uh, <00:08:08.465>let's <00:08:08.593>say <00:08:08.720>product <00:08:08.847>detail <00:08:08.974>page

182
00:08:10.675 --> 00:08:13.115
<00:08:10.675>to <00:08:10.850>product <00:08:11.025>listing <00:08:11.200>page, <00:08:11.375>it's <00:08:11.550>in <00:08:11.725>signals <00:08:11.900>to <00:08:12.075>app

183
00:08:13.255 --> 00:08:14.595
<00:08:13.255>and <00:08:13.556>Appell <00:08:13.858>will <00:08:14.159>handle <00:08:14.461>that.

184
00:08:15.905 --> 00:08:19.845
<00:08:15.905>So <00:08:16.044>this <00:08:16.184>helps <00:08:16.325>us <00:08:16.465>to <00:08:16.604>kind <00:08:16.744>of, <00:08:16.885>um, <00:08:17.025>not <00:08:17.164>repeat <00:08:17.304>ourself

185
00:08:20.185 --> 00:08:22.205
<00:08:20.185>and <00:08:20.535>just <00:08:20.885>it's <00:08:21.235>one, <00:08:21.585>uh,

186
00:08:22.205 --> 00:08:24.205
<00:08:22.205>these <00:08:22.380>all <00:08:22.555>logics <00:08:22.729>are <00:08:22.905>shared <00:08:23.080>throughout <00:08:23.255>micro <00:08:23.430>front <00:08:23.604>end.

187
00:08:24.205 --> 00:08:25.725
<00:08:24.205>All <00:08:24.433>micro <00:08:24.661>front <00:08:24.889>end <00:08:25.117>needs <00:08:25.345>this <00:08:25.573>logic.

188
00:08:26.025 --> 00:08:28.565
<00:08:26.025>So <00:08:26.224>instead <00:08:26.424>of <00:08:26.625>reiterating <00:08:26.825>over <00:08:27.025>micro <00:08:27.224>front <00:08:27.424>ends,

189
00:08:28.565 --> 00:08:30.245
<00:08:28.565>we <00:08:28.720>put <00:08:28.876>in <00:08:29.031>app <00:08:29.187>so <00:08:29.342>that <00:08:29.498>we <00:08:29.653>do <00:08:29.809>not <00:08:29.965>need

190
00:08:30.245 --> 00:08:31.845
<00:08:30.245>to <00:08:30.525>care <00:08:30.805>about, <00:08:31.085>uh, <00:08:31.365>microfund <00:08:31.645>end.

191
00:08:31.845 --> 00:08:32.765
<00:08:31.845>Do <00:08:32.010>not <00:08:32.176>need <00:08:32.341>to <00:08:32.507>care <00:08:32.673>about

192
00:08:32.765 --> 00:08:34.005
<00:08:32.765>what's <00:08:33.044>happening <00:08:33.323>behind <00:08:33.602>the <00:08:33.881>scenes.

193
00:08:34.265 --> 00:08:36.125
<00:08:34.265>And <00:08:34.439>if <00:08:34.615>we <00:08:34.789>want <00:08:34.965>to <00:08:35.140>change <00:08:35.314>something <00:08:35.490>in <00:08:35.664>future,

194
00:08:36.235 --> 00:08:37.805
<00:08:36.235>there's <00:08:36.435>only <00:08:36.635>one <00:08:36.835>place <00:08:37.034>we <00:08:37.235>need <00:08:37.435>to <00:08:37.635>change

195
00:08:37.985 --> 00:08:40.165
<00:08:37.985>and <00:08:38.112>all <00:08:38.239>the <00:08:38.366>Microfund <00:08:38.494>ends <00:08:38.621>will <00:08:38.748>get <00:08:38.875>this <00:08:39.003>out <00:08:39.130>of <00:08:39.257>the <00:08:39.385>box.

196
00:08:41.015 --> 00:08:43.675
<00:08:41.015>So <00:08:41.189>as <00:08:41.365>we <00:08:41.539>see <00:08:41.715>there <00:08:41.890>are <00:08:42.064>lots <00:08:42.240>of <00:08:42.414>communication

197
00:08:43.675 --> 00:08:45.235
<00:08:43.674>between <00:08:44.025>apps <00:08:44.375>and <00:08:44.724>Microfund <00:08:45.074>end.

198
00:08:45.335 --> 00:08:47.675
<00:08:45.335>We <00:08:45.490>need <00:08:45.646>to <00:08:45.801>send <00:08:45.957>lots <00:08:46.112>of <00:08:46.268>data <00:08:46.423>from <00:08:46.579>App <00:08:46.735>Shell

199
00:08:47.675 --> 00:08:50.635
<00:08:47.675>to <00:08:47.849>Microfund <00:08:48.025>then <00:08:48.199>and <00:08:48.375>Microfund <00:08:48.550>needs <00:08:48.724>to <00:08:48.900>send <00:08:49.074>lots

200
00:08:50.635 --> 00:08:52.675
<00:08:50.635>of <00:08:50.915>signals <00:08:51.194>to <00:08:51.475>um, <00:08:51.755>app <00:08:52.035>Shell.

201
00:08:53.255 --> 00:08:54.995
<00:08:53.255>So <00:08:53.605>we <00:08:53.955>broadly <00:08:54.305>divide, <00:08:54.655>uh,

202
00:08:55.005 --> 00:08:57.365
<00:08:55.005>divided <00:08:55.238>this <00:08:55.471>whole <00:08:55.705>communication <00:08:55.938>process <00:08:56.171>into <00:08:56.405>two.

203
00:08:58.705 --> 00:09:01.765
<00:08:58.705>So <00:08:58.821>if <00:08:58.938>we <00:08:59.055>are <00:08:59.171>using <00:08:59.288>the <00:08:59.405>same <00:08:59.521>text <00:08:59.638>stack, <00:08:59.755>let's <00:08:59.871>say, <00:08:59.988>uh, <00:09:00.105>app,

204
00:09:01.765 --> 00:09:03.805
<00:09:01.765>actual <00:09:01.920>is <00:09:02.076>React <00:09:02.231>and <00:09:02.387>Micro <00:09:02.542>frontend <00:09:02.698>is <00:09:02.853>also <00:09:03.009>in <00:09:03.165>React.

205
00:09:04.105 --> 00:09:05.885
<00:09:04.105>So <00:09:04.385>this <00:09:04.665>communication <00:09:04.945>is <00:09:05.225>pretty <00:09:05.505>straightforward.

206
00:09:06.465 --> 00:09:08.485
<00:09:06.465>All <00:09:06.620>we <00:09:06.776>need <00:09:06.931>to <00:09:07.087>do <00:09:07.242>is <00:09:07.398>pass <00:09:07.553>them <00:09:07.709>via <00:09:07.865>props.

207
00:09:08.585 --> 00:09:10.005
<00:09:08.585>So <00:09:08.798>we <00:09:09.011>are <00:09:09.224>still <00:09:09.437>using <00:09:09.650>React <00:09:09.863>components.

208
00:09:10.025 --> 00:09:13.845
<00:09:10.025>So, <00:09:10.141>uh, <00:09:10.258>passing <00:09:10.375>down <00:09:10.491>a <00:09:10.608>prop, <00:09:10.725>uh, <00:09:10.841>prop <00:09:10.958>can <00:09:11.074>be <00:09:11.191>a <00:09:11.308>data <00:09:11.425>prop,

209
00:09:13.845 --> 00:09:15.125
<00:09:13.845>can <00:09:14.133>be <00:09:14.421>a <00:09:14.709>function, <00:09:14.997>anything.

210
00:09:15.465 --> 00:09:19.005
<00:09:15.465>And <00:09:15.620>this <00:09:15.776>will <00:09:15.931>kind <00:09:16.087>of, <00:09:16.242>um, <00:09:16.398>complete <00:09:16.553>the <00:09:16.709>communication <00:09:16.865>loop.

211
00:09:19.855 --> 00:09:21.835
<00:09:19.855>But <00:09:20.010>what <00:09:20.166>if <00:09:20.321>we <00:09:20.477>do <00:09:20.632>not <00:09:20.788>have <00:09:20.943>same <00:09:21.099>text <00:09:21.255>stack?

212
00:09:21.895 --> 00:09:25.155
<00:09:21.895>We <00:09:22.035>have <00:09:22.175>different <00:09:22.314>text <00:09:22.454>stack, <00:09:22.595>let's <00:09:22.735>say, <00:09:22.875>um, <00:09:23.015>is <00:09:23.155>in <00:09:23.295>React

213
00:09:25.155 --> 00:09:27.035
<00:09:25.155>and <00:09:25.388>Micro <00:09:25.621>Front <00:09:25.855>End <00:09:26.088>are <00:09:26.321>in <00:09:26.555>view.

214
00:09:28.275 --> 00:09:32.295
<00:09:28.275>So <00:09:28.402>what <00:09:28.529>would <00:09:28.656>we <00:09:28.784>do? <00:09:28.911>So <00:09:29.038>we <00:09:29.165>can <00:09:29.293>use <00:09:29.420>custom <00:09:29.547>dome <00:09:29.675>events.

215
00:09:32.555 --> 00:09:34.975
<00:09:32.555>We <00:09:32.834>exploited, <00:09:33.114>um, <00:09:33.395>native <00:09:33.675>JavaScript <00:09:33.954>functionality,

216
00:09:35.065 --> 00:09:36.735
<00:09:35.065>which <00:09:35.298>is <00:09:35.531>available <00:09:35.765>right <00:09:35.998>in <00:09:36.231>our <00:09:36.465>browser.

217
00:09:36.875 --> 00:09:38.695
<00:09:36.875>We <00:09:37.075>do <00:09:37.275>not <00:09:37.475>need <00:09:37.675>to <00:09:37.875>do <00:09:38.075>anything <00:09:38.275>extra.

218
00:09:39.115 --> 00:09:41.935
<00:09:39.115>Uh, <00:09:39.255>with <00:09:39.395>Custom <00:09:39.535>Dome <00:09:39.675>events, <00:09:39.815>we <00:09:39.955>can <00:09:40.095>create <00:09:40.235>our <00:09:40.375>own <00:09:40.515>events

219
00:09:42.315 --> 00:09:44.735
<00:09:42.315>and <00:09:42.490>it <00:09:42.665>can <00:09:42.840>be <00:09:43.015>subscribed, <00:09:43.190>it <00:09:43.365>can <00:09:43.540>be, <00:09:43.715>uh,

220
00:09:44.795 --> 00:09:46.655
<00:09:44.795>we <00:09:45.028>can <00:09:45.261>add <00:09:45.495>listeners <00:09:45.728>on <00:09:45.961>these <00:09:46.194>events

221
00:09:47.195 --> 00:09:49.655
<00:09:47.195>and <00:09:47.370>uh, <00:09:47.545>we <00:09:47.720>can <00:09:47.895>pass <00:09:48.070>data <00:09:48.245>through <00:09:48.420>this <00:09:48.595>event.

222
00:09:50.305 --> 00:09:53.345
<00:09:50.305>So <00:09:50.479>let's <00:09:50.655>have <00:09:50.829>a <00:09:51.005>look <00:09:51.180>at <00:09:51.354>Custom <00:09:51.530>Dome <00:09:51.704>event.

223
00:09:53.765 --> 00:09:57.145
<00:09:53.765>So <00:09:53.920>here <00:09:54.076>we <00:09:54.231>can, <00:09:54.387>um, <00:09:54.542>add <00:09:54.698>listener <00:09:54.853>on <00:09:55.009>this <00:09:55.165>event.

224
00:09:57.235 --> 00:09:58.345
<00:09:57.235>Let's <00:09:57.484>call <00:09:57.734>it <00:09:57.984>my <00:09:58.234>event.

225
00:09:58.765 --> 00:10:02.505
<00:09:58.765>And <00:09:58.905>do <00:09:59.045>some, <00:09:59.185>um, <00:09:59.324>we <00:09:59.465>can <00:09:59.605>do <00:09:59.745>some <00:09:59.885>kind <00:10:00.025>of, <00:10:00.165>um,

226
00:10:03.125 --> 00:10:04.545
<00:10:03.125>action <00:10:03.550>on <00:10:03.977>the <00:10:04.403>callback.

227
00:10:05.125 --> 00:10:07.785
<00:10:05.125>So <00:10:05.280>it's <00:10:05.436>like <00:10:05.591>adding <00:10:05.747>any <00:10:05.902>other <00:10:06.058>event, <00:10:06.213>like <00:10:06.369>for <00:10:06.525>example,

228
00:10:07.835 --> 00:10:12.045
<00:10:07.835>click <00:10:08.010>Listener <00:10:08.185>or <00:10:08.360>anything <00:10:08.535>and <00:10:08.710>how <00:10:08.885>to <00:10:09.060>generate <00:10:09.235>this.

229
00:10:12.265 --> 00:10:14.845
<00:10:12.265>All <00:10:12.381>you <00:10:12.498>need <00:10:12.615>to <00:10:12.731>do <00:10:12.848>is <00:10:12.965>create <00:10:13.081>a <00:10:13.198>new <00:10:13.314>instance <00:10:13.431>of <00:10:13.548>Custom <00:10:13.665>Event

230
00:10:15.305 --> 00:10:18.285
<00:10:15.305>and <00:10:15.444>pass <00:10:15.584>some <00:10:15.724>data, <00:10:15.864>whatever <00:10:16.005>you <00:10:16.145>want <00:10:16.285>to <00:10:16.425>send <00:10:16.564>the <00:10:16.704>data.

231
00:10:18.675 --> 00:10:21.165
<00:10:18.675>Once <00:10:18.830>this <00:10:18.986>data <00:10:19.141>is <00:10:19.297>prepared, <00:10:19.452>this <00:10:19.608>Custom <00:10:19.763>Event <00:10:19.919>is <00:10:20.074>prepared.

232
00:10:21.585 --> 00:10:23.565
<00:10:21.585>All <00:10:21.760>we <00:10:21.935>need <00:10:22.110>to <00:10:22.285>do <00:10:22.460>is <00:10:22.635>dispatch <00:10:22.810>this <00:10:22.985>event.

233
00:10:23.865 --> 00:10:26.285
<00:10:23.865>So <00:10:24.040>once <00:10:24.215>we <00:10:24.390>dispatch <00:10:24.565>this <00:10:24.740>event, <00:10:24.915>all <00:10:25.090>the <00:10:25.265>places

234
00:10:26.285 --> 00:10:28.945
<00:10:26.285>where <00:10:26.518>it <00:10:26.751>is <00:10:26.985>being <00:10:27.218>listened, <00:10:27.451>it'll <00:10:27.685>react.

235
00:10:29.075 --> 00:10:32.225
<00:10:29.075>It'll <00:10:29.230>call <00:10:29.386>the <00:10:29.541>callback <00:10:29.697>function <00:10:29.852>with <00:10:30.008>the <00:10:30.163>data <00:10:30.319>we <00:10:30.475>passed.

236
00:10:32.565 --> 00:10:36.065
<00:10:32.565>So <00:10:32.740>for <00:10:32.915>example <00:10:33.090>here, <00:10:33.265>um, <00:10:33.440>we <00:10:33.615>just <00:10:33.790>console <00:10:33.965>it

237
00:10:36.205 --> 00:10:37.825
<00:10:36.205>and <00:10:36.485>we <00:10:36.765>get <00:10:37.045>the <00:10:37.325>data <00:10:37.605>here.

238
00:10:38.205 --> 00:10:40.105
<00:10:38.205>So <00:10:38.555>it's <00:10:38.905>that <00:10:39.255>simple. <00:10:39.605>Um,

239
00:10:41.065 --> 00:10:44.445
<00:10:41.065>we <00:10:41.240>use <00:10:41.415>React <00:10:41.590>throughout <00:10:41.765>our <00:10:41.940>system <00:10:42.115>app <00:10:42.290>and <00:10:42.465>microfunding,

240
00:10:44.585 --> 00:10:46.805
<00:10:44.585>but <00:10:44.785>still <00:10:44.985>we <00:10:45.185>use, <00:10:45.385>um, <00:10:45.585>custom <00:10:45.785>Dome <00:10:45.985>events

241
00:10:46.805 --> 00:10:49.405
<00:10:46.805>because <00:10:47.038>it's <00:10:47.271>easy <00:10:47.505>to <00:10:47.738>do <00:10:47.971>communication <00:10:48.204>from

242
00:10:49.405 --> 00:10:50.645
<00:10:49.405>Microfund <00:10:49.684>ends <00:10:49.963>to <00:10:50.242>app <00:10:50.521>Shell.

243
00:10:50.905 --> 00:10:53.005
<00:10:50.905>So <00:10:51.138>depending <00:10:51.371>on <00:10:51.605>your <00:10:51.838>use <00:10:52.071>case, <00:10:52.305>um,

244
00:10:53.345 --> 00:10:55.005
<00:10:53.345>you <00:10:53.578>can <00:10:53.811>choose <00:10:54.045>either <00:10:54.278>passing <00:10:54.511>down <00:10:54.745>the

245
00:10:55.005 --> 00:10:56.205
<00:10:55.005>probes <00:10:55.275>or <00:10:55.545>custom <00:10:55.815>dome <00:10:56.085>events.

246
00:10:56.225 --> 00:10:58.365
<00:10:56.225>Custom <00:10:56.400>dome <00:10:56.575>events, <00:10:56.750>uh, <00:10:56.925>it's <00:10:57.100>a <00:10:57.275>bit <00:10:57.450>more <00:10:57.625>helpful

247
00:10:58.365 --> 00:11:00.805
<00:10:58.365>because, <00:10:58.645>um, <00:10:58.925>these <00:10:59.205>are <00:10:59.485>technology <00:10:59.765>agnostic

248
00:11:01.025 --> 00:11:02.285
<00:11:01.025>and <00:11:01.251>we <00:11:01.478>really <00:11:01.705>do <00:11:01.932>not <00:11:02.159>need

249
00:11:02.285 --> 00:11:03.685
<00:11:02.285>to <00:11:02.536>bind <00:11:02.789>ourselves <00:11:03.040>into <00:11:03.293>the <00:11:03.545>systems.

250
00:11:05.355 --> 00:11:09.685
<00:11:05.355>Okay, <00:11:05.495>so <00:11:05.635>this <00:11:05.775>was <00:11:05.915>the <00:11:06.055>whole <00:11:06.195>architecture <00:11:06.335>which <00:11:06.475>we <00:11:06.615>kind <00:11:06.755>of,

251
00:11:09.745 --> 00:11:13.285
<00:11:09.745>um, <00:11:09.900>come <00:11:10.056>up <00:11:10.211>with, <00:11:10.367>uh, <00:11:10.522>come <00:11:10.678>up <00:11:10.833>when <00:11:10.989>we <00:11:11.145>wanted

252
00:11:13.345 --> 00:11:16.685
<00:11:13.345>to <00:11:13.500>implement <00:11:13.656>the <00:11:13.811>Microfund <00:11:13.967>and <00:11:14.122>ecosystem <00:11:14.278>in <00:11:14.433>our <00:11:14.589>best <00:11:14.745>way.

253
00:11:17.195 --> 00:11:18.975
<00:11:17.195>So <00:11:17.350>let's <00:11:17.506>have <00:11:17.661>a <00:11:17.817>look. <00:11:17.972>How <00:11:18.128>did <00:11:18.283>we <00:11:18.439>do <00:11:18.595>that?

254
00:11:21.525 --> 00:11:23.505
<00:11:21.525>So <00:11:21.725>first <00:11:21.925>we <00:11:22.125>thought <00:11:22.324>of <00:11:22.525>some <00:11:22.725>traditional <00:11:22.925>approaches.

255
00:11:23.925 --> 00:11:26.345
<00:11:23.925>The <00:11:24.080>first <00:11:24.236>one <00:11:24.391>which <00:11:24.547>came <00:11:24.702>to <00:11:24.858>our <00:11:25.013>mind <00:11:25.169>was <00:11:25.324>iframes.

256
00:11:27.265 --> 00:11:29.645
<00:11:27.265>And <00:11:27.545>we <00:11:27.824>rejected <00:11:28.105>that <00:11:28.385>Heidi <00:11:28.665>immediately.

257
00:11:29.645 --> 00:11:30.765
<00:11:29.645>We <00:11:29.981>are <00:11:30.317>in <00:11:30.653>2021

258
00:11:30.765 --> 00:11:33.845
<00:11:30.765>and <00:11:30.892>we <00:11:31.019>really <00:11:31.146>do <00:11:31.274>not <00:11:31.401>want <00:11:31.528>to <00:11:31.655>go <00:11:31.783>in <00:11:31.910>iframes <00:11:32.037>at <00:11:32.165>all.

259
00:11:34.835 --> 00:11:36.605
<00:11:34.835>Then <00:11:35.115>we <00:11:35.395>thought <00:11:35.675>of <00:11:35.955>node <00:11:36.235>modules.

260
00:11:36.995 --> 00:11:40.085
<00:11:36.995>Okay, <00:11:37.135>we <00:11:37.275>can, <00:11:37.415>um, <00:11:37.555>take <00:11:37.695>out <00:11:37.835>the <00:11:37.975>code <00:11:38.115>in <00:11:38.255>different <00:11:38.395>repository

261
00:11:40.145 --> 00:11:41.605
<00:11:40.145>and <00:11:40.407>treat <00:11:40.670>them <00:11:40.933>as <00:11:41.196>node <00:11:41.459>modules

262
00:11:41.865 --> 00:11:45.125
<00:11:41.865>and <00:11:42.005>just, <00:11:42.145>uh, <00:11:42.285>push <00:11:42.425>them <00:11:42.565>in <00:11:42.705>our <00:11:42.845>private, <00:11:42.985>uh, <00:11:43.125>NPM <00:11:43.265>rep

263
00:11:45.225 --> 00:11:47.845
<00:11:45.225>and <00:11:45.458>NPM <00:11:45.691>registry <00:11:45.925>and <00:11:46.158>consume <00:11:46.391>from <00:11:46.625>them.

264
00:11:48.955 --> 00:11:51.295
<00:11:48.955>But <00:11:49.130>again, <00:11:49.305>uh, <00:11:49.480>with <00:11:49.655>this <00:11:49.830>note, <00:11:50.005>with <00:11:50.180>this <00:11:50.355>approach,

265
00:11:51.435 --> 00:11:54.200
<00:11:51.435>we <00:11:51.574>will <00:11:51.714>be <00:11:51.854>falling <00:11:51.994>in <00:11:52.135>the <00:11:52.275>same <00:11:52.415>trap <00:11:52.555>of <00:11:52.694>block <00:11:52.834>deployment

266
00:11:54.235 --> 00:11:57.525
<00:11:54.235>because <00:11:54.375>to <00:11:54.515>update <00:11:54.655>node <00:11:54.795>modules, <00:11:54.935>we <00:11:55.075>need <00:11:55.215>to <00:11:55.355>deploy <00:11:55.495>app <00:11:55.635>shell

267
00:11:57.825 --> 00:12:00.685
<00:11:57.825>or <00:11:58.000>we <00:11:58.175>need <00:11:58.350>to <00:11:58.525>deploy <00:11:58.700>the <00:11:58.875>known <00:11:59.050>modules <00:11:59.225>itself

268
00:12:01.105 --> 00:12:03.445
<00:12:01.105>and <00:12:01.385>it <00:12:01.665>cannot, <00:12:01.945>uh, <00:12:02.225>go <00:12:02.505>individually.

269
00:12:03.625 --> 00:12:05.685
<00:12:03.625>So <00:12:03.752>at <00:12:03.879>the <00:12:04.006>end <00:12:04.134>of <00:12:04.261>the <00:12:04.388>day, <00:12:04.515>we'll <00:12:04.643>be <00:12:04.770>still <00:12:04.897>tied <00:12:05.025>up.

270
00:12:06.845 --> 00:12:10.445
<00:12:06.845>So <00:12:07.045>what <00:12:07.245>did <00:12:07.445>we <00:12:07.645>do <00:12:07.845>with <00:12:08.045>Webpack <00:12:08.245>five?

271
00:12:10.465 --> 00:12:11.645
<00:12:10.465>We <00:12:10.819>have <00:12:11.173>module <00:12:11.527>federation.

272
00:12:12.225 --> 00:12:15.245
<00:12:12.225>So <00:12:12.425>what <00:12:12.625>module <00:12:12.825>federation <00:12:13.025>is <00:12:13.225>Module <00:12:13.425>Federation <00:12:13.625>basically

273
00:12:15.245 --> 00:12:18.045
<00:12:15.245>allows <00:12:15.478>web <00:12:15.711>pack <00:12:15.945>to <00:12:16.178>reference <00:12:16.411>a <00:12:16.645>module,

274
00:12:18.655 --> 00:12:20.845
<00:12:18.655>which <00:12:18.855>is <00:12:19.055>not <00:12:19.255>available <00:12:19.454>at <00:12:19.655>the <00:12:19.855>compile <00:12:20.055>time.

275
00:12:21.385 --> 00:12:24.645
<00:12:21.385>So, <00:12:21.585>um, <00:12:21.785>we <00:12:21.985>can <00:12:22.185>reference <00:12:22.385>some <00:12:22.585>remote <00:12:22.785>modules,

276
00:12:24.695 --> 00:12:26.765
<00:12:24.695>which <00:12:24.928>can <00:12:25.161>be <00:12:25.395>at <00:12:25.628>some <00:12:25.861>remote <00:12:26.095>location

277
00:12:26.825 --> 00:12:29.805
<00:12:26.825>and <00:12:27.025>not <00:12:27.225>available <00:12:27.425>while <00:12:27.625>the <00:12:27.825>compile <00:12:28.025>compile <00:12:28.225>time

278
00:12:30.105 --> 00:12:32.525
<00:12:30.105>and <00:12:30.338>still <00:12:30.571>the <00:12:30.805>compilation <00:12:31.038>will <00:12:31.271>complete <00:12:31.505>once

279
00:12:32.525 --> 00:12:33.685
<00:12:32.525>the <00:12:32.872>compilation <00:12:33.221>is <00:12:33.569>complete.

280
00:12:34.145 --> 00:12:36.765
<00:12:34.145>Um, <00:12:34.345>it <00:12:34.545>can <00:12:34.745>be <00:12:34.944>consumed <00:12:35.145>on <00:12:35.345>the <00:12:35.545>fly.

281
00:12:37.805 --> 00:12:40.265
<00:12:37.805>So <00:12:37.944>let's <00:12:38.084>have <00:12:38.224>a, <00:12:38.364>let's <00:12:38.505>take <00:12:38.645>a <00:12:38.785>look <00:12:38.925>on <00:12:39.064>this <00:12:39.204>again.

282
00:12:40.765 --> 00:12:42.585
<00:12:40.765>So <00:12:41.045>this <00:12:41.324>is <00:12:41.605>again, <00:12:41.885>our <00:12:42.165>setup

283
00:12:43.735 --> 00:12:47.315
<00:12:43.735>and <00:12:43.935>this <00:12:44.135>host, <00:12:44.335>while <00:12:44.535>compiling <00:12:44.735>does <00:12:44.935>not <00:12:45.135>need

284
00:12:47.315 --> 00:12:49.315
<00:12:47.315>to <00:12:47.490>care <00:12:47.665>if <00:12:47.840>remote <00:12:48.015>1, <00:12:48.190>2, <00:12:48.365>3 <00:12:48.540>are <00:12:48.715>present

285
00:12:49.335 --> 00:12:52.475
<00:12:49.335>or <00:12:49.510>not, <00:12:49.685>it <00:12:49.860>just <00:12:50.035>have <00:12:50.210>some <00:12:50.385>reference <00:12:50.560>like, <00:12:50.735>okay,

286
00:12:52.475 --> 00:12:55.035
<00:12:52.475>there'll <00:12:52.650>be <00:12:52.825>a <00:12:53.000>remote <00:12:53.175>one <00:12:53.350>module <00:12:53.525>when <00:12:53.700>we <00:12:53.875>run,

287
00:12:55.375 --> 00:12:56.475
<00:12:55.375>and <00:12:55.573>same <00:12:55.771>for <00:12:55.969>two <00:12:56.167>and <00:12:56.365>three.

288
00:12:57.255 --> 00:12:59.875
<00:12:57.255>So <00:12:57.605>this <00:12:57.955>finishes <00:12:58.305>it <00:12:58.655>compilation,

289
00:13:00.135 --> 00:13:03.395
<00:13:00.135>and <00:13:00.310>meanwhile, <00:13:00.485>remote <00:13:00.660>1, <00:13:00.835>2, <00:13:01.010>3 <00:13:01.185>expose <00:13:01.360>their <00:13:01.535>modules.

290
00:13:03.655 --> 00:13:05.515
<00:13:03.655>So <00:13:03.935>when <00:13:04.214>this <00:13:04.495>whole <00:13:04.775>system <00:13:05.055>runs,

291
00:13:05.975 --> 00:13:08.195
<00:13:05.975>the <00:13:06.102>first <00:13:06.229>thing <00:13:06.356>it <00:13:06.484>does <00:13:06.611>is <00:13:06.738>it <00:13:06.865>makes <00:13:06.993>a <00:13:07.120>request <00:13:07.247>to <00:13:07.375>remote

292
00:13:08.295 --> 00:13:10.755
<00:13:08.295>and <00:13:08.574>check <00:13:08.854>for <00:13:09.135>availability <00:13:09.415>of <00:13:09.694>modules.

293
00:13:10.945 --> 00:13:14.515
<00:13:10.945>Once <00:13:11.120>these <00:13:11.295>modules <00:13:11.470>are <00:13:11.645>available, <00:13:11.820>it, <00:13:11.995>uh, <00:13:12.170>downloads <00:13:12.345>them

294
00:13:14.515 --> 00:13:17.155
<00:13:14.515>and <00:13:14.689>uses <00:13:14.865>it <00:13:15.040>at <00:13:15.215>its <00:13:15.390>native <00:13:15.564>web <00:13:15.740>Webpack <00:13:15.915>modules.

295
00:13:17.575 --> 00:13:20.315
<00:13:17.575>So <00:13:17.730>this <00:13:17.886>comes <00:13:18.041>out <00:13:18.197>of <00:13:18.352>the <00:13:18.508>box <00:13:18.663>from <00:13:18.819>Webpack <00:13:18.975>itself.

296
00:13:20.455 --> 00:13:24.115
<00:13:20.455>We <00:13:20.571>do <00:13:20.688>not <00:13:20.805>need <00:13:20.921>to <00:13:21.038>kind <00:13:21.155>of, <00:13:21.271>um, <00:13:21.388>implement <00:13:21.505>this <00:13:21.621>on <00:13:21.738>our <00:13:21.855>own.

297
00:13:24.845 --> 00:13:27.985
<00:13:24.845>So <00:13:25.000>how <00:13:25.156>to, <00:13:25.311>how <00:13:25.467>does <00:13:25.622>it <00:13:25.778>look <00:13:25.933>like <00:13:26.089>in <00:13:26.245>code?

298
00:13:29.535 --> 00:13:32.075
<00:13:29.535>So <00:13:29.690>consider <00:13:29.846>this, <00:13:30.001>this <00:13:30.157>is <00:13:30.312>a <00:13:30.468>very <00:13:30.623>simple <00:13:30.779>react <00:13:30.935>module.

299
00:13:32.615 --> 00:13:35.035
<00:13:32.615>Um, <00:13:32.770>it <00:13:32.926>has <00:13:33.081>just <00:13:33.237>H <00:13:33.392>three <00:13:33.548>title <00:13:33.703>and <00:13:33.859>nothing <00:13:34.015>else.

300
00:13:35.055 --> 00:13:36.115
<00:13:35.055>It <00:13:35.372>just <00:13:35.691>exposes <00:13:36.009>this.

301
00:13:37.065 --> 00:13:40.565
<00:13:37.065>So <00:13:37.220>how <00:13:37.376>we <00:13:37.531>will, <00:13:37.687>how <00:13:37.842>we <00:13:37.998>will <00:13:38.153>expose <00:13:38.309>this <00:13:38.465>remote.

302
00:13:41.855 --> 00:13:44.435
<00:13:41.855>So <00:13:41.995>all <00:13:42.135>we <00:13:42.275>need <00:13:42.415>to <00:13:42.555>do <00:13:42.695>is <00:13:42.835>include <00:13:42.975>this <00:13:43.115>module <00:13:43.255>federation

303
00:13:44.435 --> 00:13:45.635
<00:13:44.435>plugin <00:13:44.704>in <00:13:44.974>our <00:13:45.245>remote <00:13:45.515>conflict.

304
00:13:46.055 --> 00:13:50.955
<00:13:46.055>So <00:13:46.182>it, <00:13:46.309>uh, <00:13:46.436>it <00:13:46.564>has <00:13:46.691>some <00:13:46.818>options, <00:13:46.945>for <00:13:47.073>example, <00:13:47.200>um, <00:13:47.327>file <00:13:47.454>name

305
00:13:51.215 --> 00:13:54.075
<00:13:51.215>and <00:13:51.370>it <00:13:51.526>exposes <00:13:51.681>some <00:13:51.837>module, <00:13:51.992>the <00:13:52.148>module <00:13:52.303>which <00:13:52.459>we <00:13:52.615>discussed,

306
00:13:54.075 --> 00:13:56.635
<00:13:54.075>and <00:13:54.308>it's <00:13:54.541>a <00:13:54.775>namespace <00:13:55.008>and <00:13:55.241>we <00:13:55.475>need

307
00:13:56.635 --> 00:13:58.635
<00:13:56.635>to <00:13:56.868>consider <00:13:57.101>this <00:13:57.335>file <00:13:57.568>name <00:13:57.801>remote <00:13:58.035>entry.

308
00:13:59.015 --> 00:14:01.395
<00:13:59.015>So <00:13:59.189>remote <00:13:59.365>entry <00:13:59.540>file <00:13:59.715>is <00:13:59.890>a <00:14:00.064>very <00:14:00.240>special <00:14:00.415>file.

309
00:14:01.655 --> 00:14:03.835
<00:14:01.655>So <00:14:01.935>it <00:14:02.214>basically <00:14:02.495>is, <00:14:02.775>uh, <00:14:03.055>metadata.

310
00:14:04.215 --> 00:14:07.505
<00:14:04.215>So <00:14:04.370>it <00:14:04.526>contains <00:14:04.681>details <00:14:04.837>about <00:14:04.992>all <00:14:05.148>the <00:14:05.303>binding <00:14:05.459>from <00:14:05.615>the

311
00:14:07.625 --> 00:14:08.865
<00:14:07.625>remote, <00:14:07.997>all <00:14:08.369>the <00:14:08.741>chunks

312
00:14:09.205 --> 00:14:11.065
<00:14:09.205>and <00:14:09.438>all <00:14:09.671>the <00:14:09.905>data <00:14:10.138>which <00:14:10.371>is <00:14:10.605>required

313
00:14:11.065 --> 00:14:12.985
<00:14:11.065>to <00:14:11.345>basically <00:14:11.625>load <00:14:11.905>this <00:14:12.185>main <00:14:12.465>JSX.

314
00:14:14.025 --> 00:14:17.365
<00:14:14.025>And <00:14:14.199>then <00:14:14.375>finally <00:14:14.550>it <00:14:14.725>has <00:14:14.900>some <00:14:15.074>shared <00:14:15.250>shared <00:14:15.425>libraries.

315
00:14:17.705 --> 00:14:21.405
<00:14:17.705>So <00:14:17.880>in <00:14:18.055>Microfund <00:14:18.230>10, <00:14:18.405>um, <00:14:18.580>this <00:14:18.755>in <00:14:18.930>Model <00:14:19.105>Federation,

316
00:14:21.405 --> 00:14:22.445
<00:14:21.405>we <00:14:21.561>get <00:14:21.717>this <00:14:21.873>out <00:14:22.029>of <00:14:22.185>the <00:14:22.341>box.

317
00:14:22.445 --> 00:14:24.605
<00:14:22.445>This <00:14:22.600>is <00:14:22.756>pretty <00:14:22.911>important <00:14:23.067>because <00:14:23.222>let's <00:14:23.378>say <00:14:23.533>we <00:14:23.689>are <00:14:23.845>using

318
00:14:25.655 --> 00:14:28.465
<00:14:25.655>same <00:14:25.829>libraries <00:14:26.005>in, <00:14:26.180>um, <00:14:26.355>microfund <00:14:26.530>10 <00:14:26.704>and <00:14:26.880>app <00:14:27.055>Shell.

319
00:14:28.725 --> 00:14:31.025
<00:14:28.725>So <00:14:28.841>we <00:14:28.958>do <00:14:29.075>not <00:14:29.191>want <00:14:29.308>to <00:14:29.425>load <00:14:29.541>two <00:14:29.658>versions <00:14:29.775>of <00:14:29.891>the <00:14:30.008>same <00:14:30.125>library.

320
00:14:31.685 --> 00:14:33.905
<00:14:31.685>So <00:14:31.840>what <00:14:31.996>we <00:14:32.151>can <00:14:32.307>do <00:14:32.462>is <00:14:32.618>define <00:14:32.773>here, <00:14:32.929>like, <00:14:33.084>okay,

321
00:14:34.245 --> 00:14:37.185
<00:14:34.245>we <00:14:34.420>will <00:14:34.595>share <00:14:34.770>the <00:14:34.945>react <00:14:35.120>from <00:14:35.295>the <00:14:35.470>app <00:14:35.645>shell

322
00:14:37.645 --> 00:14:39.025
<00:14:37.645>and <00:14:37.852>react <00:14:38.059>them <00:14:38.266>from <00:14:38.473>the <00:14:38.680>app <00:14:38.887>shell.

323
00:14:39.085 --> 00:14:40.385
<00:14:39.085>So <00:14:39.319>it'll <00:14:39.553>not <00:14:39.787>load <00:14:40.021>the <00:14:40.255>version.

324
00:14:40.385 --> 00:14:41.945
<00:14:40.385>Microfund <00:14:40.618>10 <00:14:40.851>will <00:14:41.085>not <00:14:41.318>load <00:14:41.551>its <00:14:41.785>version

325
00:14:42.045 --> 00:14:43.185
<00:14:42.045>of <00:14:42.301>React <00:14:42.558>and <00:14:42.814>React <00:14:43.070>boom.

326
00:14:43.285 --> 00:14:44.705
<00:14:43.285>But <00:14:43.604>we'll <00:14:43.924>fall <00:14:44.243>back <00:14:44.563>to

327
00:14:45.245 --> 00:14:47.145
<00:14:45.245>the <00:14:45.478>version <00:14:45.711>which <00:14:45.945>is <00:14:46.178>supplied <00:14:46.411>by <00:14:46.645>option.

328
00:14:48.455 --> 00:14:51.605
<00:14:48.455>Okay, <00:14:48.630>so <00:14:48.805>with <00:14:48.980>this, <00:14:49.155>it's <00:14:49.330>already <00:14:49.505>ready <00:14:49.680>to <00:14:49.855>expose

329
00:14:51.785 --> 00:14:53.405
<00:14:51.785>and <00:14:52.064>once <00:14:52.344>you <00:14:52.625>compile <00:14:52.905>this <00:14:53.185>one,

330
00:14:53.615 --> 00:14:56.165
<00:14:53.615>it'll <00:14:53.895>already <00:14:54.175>expose <00:14:54.455>this <00:14:54.735>main <00:14:55.015>component.

331
00:14:56.755 --> 00:14:58.125
<00:14:56.755>Then <00:14:57.001>how <00:14:57.248>would <00:14:57.494>we <00:14:57.741>consume <00:14:57.988>this?

332
00:14:59.535 --> 00:15:02.315
<00:14:59.535>So <00:14:59.690>again, <00:14:59.846>uh, <00:15:00.001>we <00:15:00.157>have <00:15:00.312>to <00:15:00.468>do <00:15:00.623>the <00:15:00.779>following <00:15:00.935>in,

333
00:15:02.375 --> 00:15:03.395
<00:15:02.375>um, <00:15:02.834>host <00:15:03.293>conflict.

334
00:15:03.615 --> 00:15:05.155
<00:15:03.615>So <00:15:03.813>in <00:15:04.011>the <00:15:04.209>host <00:15:04.407>setup, <00:15:04.605>all <00:15:04.803>we <00:15:05.001>need

335
00:15:05.155 --> 00:15:07.315
<00:15:05.155>to <00:15:05.329>do <00:15:05.505>again <00:15:05.680>is <00:15:05.855>include <00:15:06.030>this <00:15:06.204>model <00:15:06.380>federation <00:15:06.555>plugin

336
00:15:07.815 --> 00:15:10.755
<00:15:07.815>and <00:15:07.990>define <00:15:08.165>the <00:15:08.340>remote, <00:15:08.515>like <00:15:08.690>which <00:15:08.865>remotely <00:15:09.040>will <00:15:09.215>be.

337
00:15:10.905 --> 00:15:13.355
<00:15:10.905>Basically <00:15:11.105>this <00:15:11.305>is <00:15:11.505>the <00:15:11.704>URL <00:15:11.905>where <00:15:12.105>this <00:15:12.305>remote,

338
00:15:13.455 --> 00:15:15.715
<00:15:13.455>the <00:15:13.735>remote <00:15:14.015>we <00:15:14.295>define <00:15:14.575>is <00:15:14.855>exposed.

339
00:15:16.375 --> 00:15:19.915
<00:15:16.375>And <00:15:16.515>this <00:15:16.655>remote <00:15:16.795>will <00:15:16.935>only <00:15:17.075>point <00:15:17.215>to <00:15:17.355>this <00:15:17.495>remote <00:15:17.635>entry <00:15:17.775>file.

340
00:15:19.935 --> 00:15:21.155
<00:15:19.935>And <00:15:20.209>as <00:15:20.483>I <00:15:20.758>explained <00:15:21.033>before,

341
00:15:21.215 --> 00:15:23.635
<00:15:21.215>remote <00:15:21.355>entry <00:15:21.495>is <00:15:21.635>just <00:15:21.775>metadata <00:15:21.915>and <00:15:22.055>it <00:15:22.195>has <00:15:22.335>all <00:15:22.475>the <00:15:22.615>data.

342
00:15:24.015 --> 00:15:27.835
<00:15:24.015>So <00:15:24.155>when <00:15:24.295>once <00:15:24.435>this <00:15:24.574>is <00:15:24.715>resolved, <00:15:24.855>it'll <00:15:24.995>get <00:15:25.135>all <00:15:25.275>the <00:15:25.415>data

343
00:15:28.055 --> 00:15:30.115
<00:15:28.055>and <00:15:28.255>it'll <00:15:28.454>set <00:15:28.655>up <00:15:28.854>all <00:15:29.055>the <00:15:29.255>modules <00:15:29.454>needed.

344
00:15:30.495 --> 00:15:33.675
<00:15:30.495>And <00:15:30.622>again, <00:15:30.749>we <00:15:30.876>need <00:15:31.004>to <00:15:31.131>define <00:15:31.258>what <00:15:31.385>share <00:15:31.513>modules <00:15:31.640>we <00:15:31.767>will <00:15:31.895>be,

345
00:15:33.895 --> 00:15:36.395
<00:15:33.895>um, <00:15:34.095>having <00:15:34.295>and <00:15:34.495>what <00:15:34.694>is <00:15:34.895>available <00:15:35.095>for <00:15:35.295>share

346
00:15:36.395 --> 00:15:38.155
<00:15:36.395>and <00:15:36.569>what <00:15:36.745>micro <00:15:36.920>front <00:15:37.095>ends <00:15:37.270>can <00:15:37.444>fall <00:15:37.620>back <00:15:37.795>to.

347
00:15:38.735 --> 00:15:42.355
<00:15:38.735>So <00:15:38.875>this <00:15:39.015>kind <00:15:39.155>of, <00:15:39.295>uh, <00:15:39.435>finishes <00:15:39.575>up <00:15:39.715>the <00:15:39.855>pipeline <00:15:39.995>for, <00:15:40.135>um,

348
00:15:43.195 --> 00:15:44.995
<00:15:43.195>exposing <00:15:43.475>and <00:15:43.755>consuming <00:15:44.035>the <00:15:44.315>remote <00:15:44.595>modules.

349
00:15:46.075 --> 00:15:48.055
<00:15:46.075>But <00:15:46.275>how <00:15:46.475>this <00:15:46.675>would <00:15:46.875>look <00:15:47.075>in <00:15:47.275>the <00:15:47.475>code,

350
00:15:48.325 --> 00:15:49.375
<00:15:48.325>this <00:15:48.514>is <00:15:48.703>all <00:15:48.892>the <00:15:49.081>setup <00:15:49.270>part,

351
00:15:49.375 --> 00:15:51.495
<00:15:49.375>but <00:15:49.530>how <00:15:49.686>will <00:15:49.841>we <00:15:49.997>actually <00:15:50.152>use <00:15:50.308>this <00:15:50.463>into <00:15:50.619>our <00:15:50.775>code?

352
00:15:53.145 --> 00:15:54.365
<00:15:53.145>So <00:15:53.419>this <00:15:53.694>is <00:15:53.968>pretty <00:15:54.243>straightforward.

353
00:15:54.665 --> 00:15:56.765
<00:15:54.665>All <00:15:54.839>you <00:15:55.015>need <00:15:55.189>to <00:15:55.365>do <00:15:55.540>is <00:15:55.714>have <00:15:55.890>this <00:15:56.064>namespace,

354
00:15:57.055 --> 00:15:59.485
<00:15:57.055>which <00:15:57.288>we <00:15:57.521>define <00:15:57.755>in <00:15:57.988>our <00:15:58.221>remote <00:15:58.454>config

355
00:15:59.825 --> 00:16:01.285
<00:15:59.825>and <00:16:00.153>the <00:16:00.482>expose <00:16:00.810>module <00:16:01.139>name.

356
00:16:01.585 --> 00:16:03.325
<00:16:01.585>So <00:16:01.760>this <00:16:01.935>is <00:16:02.110>the <00:16:02.285>namespace <00:16:02.460>of <00:16:02.635>the <00:16:02.810>remote <00:16:02.985>itself,

357
00:16:03.425 --> 00:16:05.965
<00:16:03.425>and <00:16:03.599>this <00:16:03.775>is <00:16:03.949>the <00:16:04.125>namespace <00:16:04.300>of <00:16:04.474>the <00:16:04.650>expose <00:16:04.824>module.

358
00:16:06.625 --> 00:16:07.645
<00:16:06.625>And <00:16:07.084>that's <00:16:07.543>it.

359
00:16:08.185 --> 00:16:11.525
<00:16:08.185>And <00:16:08.292>then <00:16:08.400>you <00:16:08.508>can <00:16:08.615>use <00:16:08.723>this <00:16:08.831>remote <00:16:08.938>app <00:16:09.046>as <00:16:09.154>if <00:16:09.261>it <00:16:09.369>was <00:16:09.477>a <00:16:09.584>native,

360
00:16:11.905 --> 00:16:13.645
<00:16:11.905>uh, <00:16:12.185>module <00:16:12.464>for <00:16:12.745>your <00:16:13.025>React <00:16:13.305>app,

361
00:16:13.785 --> 00:16:16.165
<00:16:13.785>and <00:16:13.940>it'll <00:16:14.096>behave <00:16:14.251>the <00:16:14.407>same <00:16:14.562>way <00:16:14.718>as <00:16:14.873>any <00:16:15.029>other <00:16:15.185>app,

362
00:16:16.465 --> 00:16:18.925
<00:16:16.465>any <00:16:16.640>other <00:16:16.815>component <00:16:16.990>would <00:16:17.165>have <00:16:17.340>behaved <00:16:17.515>in <00:16:17.690>this <00:16:17.865>one.

363
00:16:20.285 --> 00:16:22.505
<00:16:20.285>So <00:16:20.564>this <00:16:20.844>completes <00:16:21.125>the <00:16:21.405>implementation <00:16:21.685>part.

364
00:16:24.415 --> 00:16:28.875
<00:16:24.415>Now <00:16:24.570>let's <00:16:24.726>have <00:16:24.881>a <00:16:25.037>demo <00:16:25.192>for <00:16:25.348>this <00:16:25.503>micro, <00:16:25.659>uh, <00:16:25.814>microphone.

365
00:16:28.875 --> 00:16:32.435
<00:16:28.875>Then <00:16:29.015>I <00:16:29.155>will <00:16:29.295>try <00:16:29.435>to <00:16:29.575>do <00:16:29.715>a <00:16:29.855>demo. <00:16:29.995>Hopefully <00:16:30.135>it <00:16:30.275>succeeds.

366
00:16:32.855 --> 00:16:35.395
<00:16:32.855>The <00:16:33.030>chances <00:16:33.205>are <00:16:33.380>it <00:16:33.555>can <00:16:33.730>go <00:16:33.905>a <00:16:34.080>bit <00:16:34.255>sideways,

367
00:16:35.935 --> 00:16:37.475
<00:16:35.935>but <00:16:36.212>let's <00:16:36.489>check <00:16:36.766>if <00:16:37.043>that <00:16:37.321>works.

368
00:16:38.135 --> 00:16:42.115
<00:16:38.135>Um, <00:16:38.275>I <00:16:38.415>have <00:16:38.555>already <00:16:38.694>zoomed <00:16:38.835>in <00:16:38.975>my <00:16:39.115>screen, <00:16:39.255>so <00:16:39.395>if, <00:16:39.535>um,

369
00:16:43.425 --> 00:16:45.285
<00:16:43.425>if <00:16:43.599>it's <00:16:43.775>not <00:16:43.949>visible, <00:16:44.125>just <00:16:44.300>let <00:16:44.474>me <00:16:44.650>know <00:16:44.824>somehow.

370
00:16:47.325 --> 00:16:52.095
<00:16:47.325>So <00:16:47.500>here, <00:16:47.675>there <00:16:47.850>are, <00:16:48.025>um, <00:16:48.200>two <00:16:48.375>repositories <00:16:48.550>I <00:16:48.725>have.

371
00:16:52.095 --> 00:16:53.255
<00:16:52.095>One <00:16:52.303>is <00:16:52.512>host, <00:16:52.721>one <00:16:52.930>is <00:16:53.139>remote,

372
00:16:53.835 --> 00:16:55.695
<00:16:53.835>and <00:16:54.068>let's <00:16:54.301>look <00:16:54.535>at <00:16:54.768>the <00:16:55.001>remote <00:16:55.235>first.

373
00:16:56.235 --> 00:16:58.015
<00:16:56.235>In <00:16:56.468>remote <00:16:56.701>we <00:16:56.935>have <00:16:57.168>this <00:16:57.401>webpac <00:16:57.635>config

374
00:16:58.395 --> 00:17:02.215
<00:16:58.395>and <00:16:58.569>it <00:16:58.745>has <00:16:58.920>some <00:16:59.095>web <00:16:59.270>standards, <00:16:59.444>webpac <00:16:59.620>config <00:16:59.795>stuff,

375
00:17:02.565 --> 00:17:03.815
<00:17:02.565>some <00:17:03.127>module <00:17:03.690>translators.

376
00:17:04.395 --> 00:17:06.935
<00:17:04.395>And <00:17:04.569>finally <00:17:04.744>what's <00:17:04.920>we <00:17:05.095>are <00:17:05.270>interested <00:17:05.444>in <00:17:05.619>is <00:17:05.795>module

377
00:17:06.935 --> 00:17:07.975
<00:17:06.935>penetration <00:17:07.870>plugin.

378
00:17:08.075 --> 00:17:10.135
<00:17:08.075>So <00:17:08.275>here <00:17:08.475>I <00:17:08.675>put <00:17:08.875>LI <00:17:09.075>remote <00:17:09.275>entry <00:17:09.475>file

379
00:17:10.555 --> 00:17:12.815
<00:17:10.555>and <00:17:10.788>I <00:17:11.021>expose <00:17:11.255>a <00:17:11.488>component, <00:17:11.721>shared <00:17:11.955>component,

380
00:17:12.825 --> 00:17:15.095
<00:17:12.825>which <00:17:13.058>comes <00:17:13.291>from <00:17:13.525>this <00:17:13.758>SRC <00:17:13.991>shared <00:17:14.225>component.

381
00:17:15.515 --> 00:17:17.655
<00:17:15.515>So <00:17:15.690>let's <00:17:15.865>have <00:17:16.040>a <00:17:16.215>look <00:17:16.390>at <00:17:16.565>this <00:17:16.740>shared <00:17:16.915>component.

382
00:17:21.915 --> 00:17:24.335
<00:17:21.915>So <00:17:22.089>the <00:17:22.264>shared <00:17:22.440>component <00:17:22.615>is <00:17:22.790>just <00:17:22.964>very <00:17:23.139>simple <00:17:23.315>component,

383
00:17:24.345 --> 00:17:25.855
<00:17:24.345>which <00:17:24.684>is <00:17:25.024>basically <00:17:25.364>H <00:17:25.704>four.

384
00:17:26.235 --> 00:17:28.455
<00:17:26.234>And <00:17:26.468>it <00:17:26.701>has <00:17:26.935>a <00:17:27.168>text <00:17:27.401>current <00:17:27.635>count

385
00:17:28.595 --> 00:17:31.375
<00:17:28.595>and <00:17:28.795>it <00:17:28.995>displays <00:17:29.195>a <00:17:29.395>property <00:17:29.595>which <00:17:29.795>is <00:17:29.995>passed,

386
00:17:31.555 --> 00:17:32.975
<00:17:31.555>uh, <00:17:31.981>into <00:17:32.407>the <00:17:32.832>component.

387
00:17:33.235 --> 00:17:35.295
<00:17:33.235>So <00:17:33.514>whatever <00:17:33.794>is <00:17:34.074>counter, <00:17:34.354>it'll <00:17:34.635>display.

388
00:17:35.295 --> 00:17:37.055
<00:17:35.295>So <00:17:35.528>it'll <00:17:35.761>display <00:17:35.995>something <00:17:36.228>like <00:17:36.461>current <00:17:36.695>count

389
00:17:37.055 --> 00:17:38.175
<00:17:37.055>five <00:17:37.391>one <00:17:37.727>or <00:17:38.062>something.

390
00:17:38.675 --> 00:17:40.655
<00:17:38.675>So <00:17:38.875>first <00:17:39.075>let's <00:17:39.274>check <00:17:39.475>in <00:17:39.675>our <00:17:39.875>local <00:17:40.075>setup.

391
00:17:42.105 --> 00:17:44.205
<00:17:42.105>So <00:17:42.385>let <00:17:42.665>me <00:17:42.945>run <00:17:43.225>this <00:17:43.505>one

392
00:17:48.665 --> 00:17:49.710
<00:17:48.665>while <00:17:49.135>it <00:17:49.605>builds.

393
00:17:49.815 --> 00:17:52.205
<00:17:49.815>Let's <00:17:49.990>check <00:17:50.165>what <00:17:50.340>we <00:17:50.515>have <00:17:50.690>in, <00:17:50.865>uh, <00:17:51.040>remote <00:17:51.215>app.

394
00:17:52.305 --> 00:17:54.365
<00:17:52.305>In <00:17:52.505>remote <00:17:52.705>app, <00:17:52.905>we <00:17:53.105>have <00:17:53.305>this <00:17:53.505>count <00:17:53.705>one

395
00:17:55.455 --> 00:17:58.995
<00:17:55.455>and <00:17:55.595>um, <00:17:55.735>shared <00:17:55.875>co <00:17:56.014>we <00:17:56.155>pass <00:17:56.294>this <00:17:56.435>count <00:17:56.574>to <00:17:56.715>shared <00:17:56.855>component.

396
00:17:59.775 --> 00:18:02.235
<00:17:59.775>And <00:18:00.055>that's <00:18:00.335>it. <00:18:00.615>Nothing <00:18:00.895>fancy <00:18:01.175>here.

397
00:18:02.695 --> 00:18:05.555
<00:18:02.695>So <00:18:02.928>let's <00:18:03.161>check <00:18:03.395>if <00:18:03.628>this <00:18:03.861>pass <00:18:04.095>through.

398
00:18:10.355 --> 00:18:11.885
<00:18:10.355>Okay, <00:18:10.584>this <00:18:10.814>is <00:18:11.043>the <00:18:11.273>remote <00:18:11.502>app <00:18:11.732>running.

399
00:18:11.905 --> 00:18:13.165
<00:18:11.905>We <00:18:12.188>have <00:18:12.472>current <00:18:12.755>count <00:18:13.039>one.

400
00:18:13.505 --> 00:18:16.485
<00:18:13.505>We <00:18:13.660>can <00:18:13.816>quickly <00:18:13.971>check <00:18:14.127>by <00:18:14.282>changing <00:18:14.438>it. <00:18:14.593>Let's <00:18:14.749>say <00:18:14.905>three.

401
00:18:18.345 --> 00:18:21.125
<00:18:18.345>And <00:18:18.500>it's <00:18:18.656>three. <00:18:18.811>So <00:18:18.967>this <00:18:19.122>is <00:18:19.278>a <00:18:19.433>simple <00:18:19.589>remote <00:18:19.745>app.

402
00:18:21.665 --> 00:18:23.965
<00:18:21.665>And <00:18:21.865>now <00:18:22.065>let's <00:18:22.264>have <00:18:22.465>a <00:18:22.665>look <00:18:22.865>at, <00:18:23.065>um,

403
00:18:24.345 --> 00:18:25.965
<00:18:24.345>how <00:18:24.625>our <00:18:24.905>host <00:18:25.185>app <00:18:25.465>would <00:18:25.745>look.

404
00:18:28.215 --> 00:18:30.275
<00:18:28.215>So <00:18:28.389>again, <00:18:28.564>we <00:18:28.740>look <00:18:28.915>at <00:18:29.090>our <00:18:29.264>web <00:18:29.439>app <00:18:29.615>config

405
00:18:30.275 --> 00:18:32.675
<00:18:30.275>before <00:18:30.450>this <00:18:30.625>I <00:18:30.800>will <00:18:30.975>already <00:18:31.150>build <00:18:31.325>so <00:18:31.500>that, <00:18:31.675>uh,

406
00:18:32.675 --> 00:18:35.395
<00:18:32.675>we <00:18:32.875>can <00:18:33.075>save <00:18:33.274>some <00:18:33.475>time <00:18:33.675>here <00:18:33.875>and <00:18:34.075>start.

407
00:18:38.395 --> 00:18:41.205
<00:18:38.395>Okay, <00:18:38.570>so <00:18:38.745>in <00:18:38.920>the <00:18:39.095>web <00:18:39.270>pack <00:18:39.445>config <00:18:39.620>of <00:18:39.795>host,

408
00:18:41.435 --> 00:18:42.525
<00:18:41.435>it's <00:18:41.762>a <00:18:42.089>similar <00:18:42.416>thing.

409
00:18:42.625 --> 00:18:46.885
<00:18:42.625>We <00:18:42.780>have <00:18:42.936>standard <00:18:43.091>web <00:18:43.247>pack, <00:18:43.402>um, <00:18:43.558>having <00:18:43.713>some <00:18:43.869>relu <00:18:44.025>resolutions.

410
00:18:47.225 --> 00:18:49.765
<00:18:47.225>And <00:18:47.458>um, <00:18:47.691>finally <00:18:47.925>this <00:18:48.158>model <00:18:48.391>federation <00:18:48.625>plugin.

411
00:18:50.065 --> 00:18:52.845
<00:18:50.065>So <00:18:50.220>model <00:18:50.376>federation <00:18:50.531>plugin, <00:18:50.687>we <00:18:50.842>need <00:18:50.998>to <00:18:51.153>define <00:18:51.309>the <00:18:51.465>remotes.

412
00:18:53.145 --> 00:18:54.805
<00:18:53.145>So <00:18:53.611>remote <00:18:54.078>one <00:18:54.545>namespace

413
00:18:54.985 --> 00:18:56.485
<00:18:54.985>and <00:18:55.209>it'll <00:18:55.435>be <00:18:55.659>resolved <00:18:55.885>at <00:18:56.110>this <00:18:56.334>address.

414
00:18:56.505 --> 00:18:58.165
<00:18:56.505>And <00:18:56.705>we <00:18:56.905>pass <00:18:57.105>this <00:18:57.305>remote <00:18:57.505>entry <00:18:57.705>Rod <00:18:57.905>Chase

415
00:18:58.545 --> 00:19:00.365
<00:18:58.545>and <00:18:58.778>we <00:18:59.011>share <00:18:59.245>react <00:18:59.478>and <00:18:59.711>react <00:18:59.945>home.

416
00:19:01.595 --> 00:19:04.175
<00:19:01.595>Now <00:19:01.828>let's <00:19:02.061>check <00:19:02.295>how <00:19:02.528>this <00:19:02.761>is <00:19:02.995>consumed.

417
00:19:04.435 --> 00:19:06.015
<00:19:04.435>So <00:19:04.715>we <00:19:04.995>have <00:19:05.274>this <00:19:05.554>host <00:19:05.835>app,

418
00:19:09.275 --> 00:19:12.615
<00:19:09.275>and <00:19:09.430>in <00:19:09.586>this <00:19:09.741>host <00:19:09.897>app <00:19:10.052>we <00:19:10.208>include <00:19:10.363>this <00:19:10.519>remote <00:19:10.675>one

419
00:19:12.615 --> 00:19:13.935
<00:19:12.615>slash <00:19:13.209>shared <00:19:13.803>component.

420
00:19:14.195 --> 00:19:16.655
<00:19:14.195>So <00:19:14.335>this <00:19:14.475>is <00:19:14.615>the <00:19:14.754>namespace <00:19:14.895>of <00:19:15.034>the <00:19:15.175>remote, <00:19:15.314>which <00:19:15.455>we <00:19:15.595>defined,

421
00:19:17.035 --> 00:19:18.095
<00:19:17.035>um, <00:19:17.989>here.

422
00:19:19.095 --> 00:19:23.545
<00:19:19.095>And, <00:19:19.795>and, <00:19:20.495>uh,

423
00:19:23.545 --> 00:19:24.705
<00:19:23.545>shared <00:19:23.806>component <00:19:24.067>is <00:19:24.328>the <00:19:24.589>name

424
00:19:24.705 --> 00:19:25.985
<00:19:24.705>of <00:19:24.935>the <00:19:25.165>component <00:19:25.396>which <00:19:25.626>we <00:19:25.857>exposed,

425
00:19:26.815 --> 00:19:29.275
<00:19:26.815>and <00:19:26.990>it <00:19:27.165>is <00:19:27.340>consumed <00:19:27.515>as <00:19:27.690>any <00:19:27.865>other <00:19:28.040>native <00:19:28.215>module.

426
00:19:30.015 --> 00:19:32.715
<00:19:30.015>And <00:19:30.155>what's <00:19:30.295>interesting <00:19:30.435>here <00:19:30.575>is <00:19:30.715>we <00:19:30.855>have <00:19:30.995>a <00:19:31.135>local <00:19:31.275>state <00:19:31.415>here,

427
00:19:33.175 --> 00:19:34.595
<00:19:33.175>uh, <00:19:33.388>where <00:19:33.601>we <00:19:33.814>are <00:19:34.027>having <00:19:34.240>this <00:19:34.453>counter,

428
00:19:35.375 --> 00:19:38.235
<00:19:35.375>and <00:19:35.550>this <00:19:35.725>counter <00:19:35.900>is <00:19:36.075>passed <00:19:36.250>into <00:19:36.425>the <00:19:36.600>React, <00:19:36.775>uh,

429
00:19:38.345 --> 00:19:39.435
<00:19:38.345>this <00:19:38.835>remote <00:19:39.326>component.

430
00:19:39.935 --> 00:19:40.995
<00:19:39.935>And <00:19:40.125>we <00:19:40.316>have <00:19:40.507>a <00:19:40.698>small <00:19:40.889>button,

431
00:19:41.115 --> 00:19:42.715
<00:19:41.115>a <00:19:41.348>small <00:19:41.581>functionality <00:19:41.815>on <00:19:42.048>the <00:19:42.281>button, <00:19:42.515>like

432
00:19:42.915 --> 00:19:44.995
<00:19:42.915>whenever <00:19:43.090>we <00:19:43.264>click, <00:19:43.440>we <00:19:43.615>increase <00:19:43.790>the <00:19:43.965>counter <00:19:44.139>by <00:19:44.315>one.

433
00:19:45.495 --> 00:19:47.995
<00:19:45.495>So <00:19:45.728>we <00:19:45.961>are <00:19:46.195>consuming <00:19:46.428>a <00:19:46.661>remote <00:19:46.895>component,

434
00:19:48.015 --> 00:19:50.515
<00:19:48.015>but <00:19:48.155>we <00:19:48.295>are <00:19:48.435>passing <00:19:48.575>the <00:19:48.715>local <00:19:48.855>state <00:19:48.995>to <00:19:49.135>this <00:19:49.275>remote <00:19:49.415>component.

435
00:19:50.805 --> 00:19:52.235
<00:19:50.805>Let's <00:19:51.019>check <00:19:51.234>if <00:19:51.448>this <00:19:51.663>work <00:19:51.877>or <00:19:52.091>not.

436
00:19:54.225 --> 00:19:55.685
<00:19:54.225>So <00:19:54.553>our <00:19:54.881>package <00:19:55.210>is <00:19:55.539>filled

437
00:19:56.835 --> 00:20:00.855
<00:19:56.835>and <00:19:57.115>let's <00:19:57.395>check <00:19:57.675>if <00:19:57.955>this <00:19:58.235>works.

438
00:20:02.455 --> 00:20:05.385
<00:20:02.455>Okay, <00:20:02.629>this <00:20:02.804>works. <00:20:02.980>So <00:20:03.155>this <00:20:03.330>is <00:20:03.504>the <00:20:03.679>same <00:20:03.855>component

439
00:20:06.015 --> 00:20:09.685
<00:20:06.015>which <00:20:06.155>we <00:20:06.295>are <00:20:06.435>using <00:20:06.575>here, <00:20:06.715>and <00:20:06.855>we <00:20:06.995>passed <00:20:07.135>the <00:20:07.275>local <00:20:07.415>state.

440
00:20:09.685 --> 00:20:12.405
<00:20:09.685>Initially <00:20:09.840>it <00:20:09.996>was <00:20:10.151>three <00:20:10.307>and <00:20:10.462>now <00:20:10.618>we <00:20:10.773>are <00:20:10.929>passing <00:20:11.085>zero,

441
00:20:12.425 --> 00:20:16.165
<00:20:12.425>and <00:20:12.625>we <00:20:12.825>can <00:20:13.024>check <00:20:13.225>that <00:20:13.425>with <00:20:13.625>every <00:20:13.825>increase.

442
00:20:16.705 --> 00:20:19.885
<00:20:16.705>The <00:20:16.821>local <00:20:16.938>state <00:20:17.054>of <00:20:17.171>the <00:20:17.288>host <00:20:17.405>app <00:20:17.521>is <00:20:17.638>in, <00:20:17.754>uh, <00:20:17.871>changing <00:20:17.988>to <00:20:18.105>six.

443
00:20:20.345 --> 00:20:22.565
<00:20:20.345>And <00:20:20.625>also <00:20:20.905>the <00:20:21.185>state <00:20:21.465>of, <00:20:21.745>um,

444
00:20:22.905 --> 00:20:25.445
<00:20:22.905>remote <00:20:23.254>app <00:20:23.605>is <00:20:23.955>also <00:20:24.305>increasing.

445
00:20:26.185 --> 00:20:30.485
<00:20:26.185>So <00:20:26.312>as <00:20:26.439>I <00:20:26.566>said, <00:20:26.694>it's <00:20:26.821>basically <00:20:26.948>just <00:20:27.075>using <00:20:27.203>it <00:20:27.330>like <00:20:27.457>any <00:20:27.585>other,

446
00:20:31.805 --> 00:20:33.385
<00:20:31.805>any <00:20:32.155>other, <00:20:32.505>uh, <00:20:32.855>react <00:20:33.205>component.

447
00:20:33.655 --> 00:20:36.505
<00:20:33.655>Once <00:20:33.935>it's <00:20:34.215>imported, <00:20:34.495>it's <00:20:34.774>uh, <00:20:35.055>it,

448
00:20:36.885 --> 00:20:38.225
<00:20:36.885>it <00:20:37.086>does <00:20:37.287>not <00:20:37.488>need <00:20:37.688>to <00:20:37.889>do <00:20:38.091>anything.

449
00:20:38.325 --> 00:20:41.065
<00:20:38.325>All <00:20:38.480>the <00:20:38.636>magic <00:20:38.791>is <00:20:38.947>done <00:20:39.102>by <00:20:39.258>the <00:20:39.413>Webpac <00:20:39.569>Model <00:20:39.725>Federation.

450
00:20:42.085 --> 00:20:45.375
<00:20:42.085>Okay, <00:20:42.225>one <00:20:42.365>more <00:20:42.505>thing <00:20:42.645>I <00:20:42.785>wanted <00:20:42.925>to <00:20:43.065>show <00:20:43.205>you <00:20:43.345>here <00:20:43.485>is,

451
00:20:45.755 --> 00:20:47.365
<00:20:45.755>um, <00:20:47.155>network.

452
00:20:48.135 --> 00:20:49.165
<00:20:48.135>Let's <00:20:48.444>reload <00:20:48.753>this <00:20:49.062>one.

453
00:20:50.275 --> 00:20:54.765
<00:20:50.275>And <00:20:50.450>if <00:20:50.625>you <00:20:50.800>see <00:20:50.975>we <00:20:51.150>have <00:20:51.325>this <00:20:51.500>remote <00:20:51.675>entry.

454
00:20:54.945 --> 00:20:58.245
<00:20:54.945>And <00:20:55.085>this <00:20:55.225>remote <00:20:55.365>entry <00:20:55.504>has <00:20:55.645>all <00:20:55.784>the <00:20:55.925>data, <00:20:56.064>which <00:20:56.205>is <00:20:56.345>required

455
00:20:58.265 --> 00:21:01.685
<00:20:58.265>for, <00:20:58.465>um, <00:20:58.665>modules, <00:20:58.865>which <00:20:59.065>is <00:20:59.265>required <00:20:59.465>for <00:20:59.665>running.

456
00:21:02.145 --> 00:21:04.955
<00:21:02.145>Um, <00:21:02.611>this, <00:21:03.078>this <00:21:03.545>app.

457
00:21:05.455 --> 00:21:08.555
<00:21:05.455>So <00:21:05.610>whatever <00:21:05.766>is <00:21:05.921>required, <00:21:06.077>it <00:21:06.232>is <00:21:06.388>loaded <00:21:06.543>from <00:21:06.699>remote <00:21:06.855>entry

458
00:21:08.575 --> 00:21:10.395
<00:21:08.575>and <00:21:08.808>this <00:21:09.041>whole <00:21:09.275>code <00:21:09.508>remains <00:21:09.741>from, <00:21:09.975>uh,

459
00:21:10.395 --> 00:21:11.395
<00:21:10.395>is <00:21:10.620>loaded <00:21:10.845>from <00:21:11.070>the <00:21:11.295>remote.

460
00:21:11.815 --> 00:21:13.475
<00:21:11.815>It <00:21:12.048>is <00:21:12.281>not <00:21:12.515>present <00:21:12.748>in <00:21:12.981>the <00:21:13.215>repository

461
00:21:13.525 --> 00:21:15.715
<00:21:13.525>where <00:21:13.805>this <00:21:14.085>3001 <00:21:14.365>is <00:21:14.645>running <00:21:14.925>from.

462
00:21:16.935 --> 00:21:19.275
<00:21:16.935>So <00:21:17.135>this <00:21:17.335>makes <00:21:17.534>us <00:21:17.735>pretty <00:21:17.935>kind <00:21:18.135>of <00:21:18.335>independent.

463
00:21:19.795 --> 00:21:20.835
<00:21:19.795>Whatever <00:21:19.951>we <00:21:20.107>want <00:21:20.263>to <00:21:20.419>do <00:21:20.575>in <00:21:20.731>here,

464
00:21:20.835 --> 00:21:22.195
<00:21:20.835>we <00:21:21.079>can <00:21:21.324>do <00:21:21.569>independently <00:21:21.814>of <00:21:22.059>here.

465
00:21:22.295 --> 00:21:25.235
<00:21:22.295>We <00:21:22.470>can <00:21:22.645>move <00:21:22.820>ahead <00:21:22.995>with <00:21:23.170>this <00:21:23.345>deployment <00:21:23.520>without <00:21:23.695>changing

466
00:21:25.595 --> 00:21:27.515
<00:21:25.595>anything <00:21:25.750>here, <00:21:25.906>and <00:21:26.061>it <00:21:26.217>would <00:21:26.372>work <00:21:26.528>out <00:21:26.683>of <00:21:26.839>the <00:21:26.995>box.

467
00:21:29.575 --> 00:21:31.515
<00:21:29.575>So <00:21:29.925>this <00:21:30.275>was <00:21:30.625>our <00:21:30.975>demo.

468
00:21:35.685 --> 00:21:38.615
<00:21:35.685>Cool. <00:21:35.825>So <00:21:35.965>this <00:21:36.105>is <00:21:36.245>a <00:21:36.385>very <00:21:36.524>kind <00:21:36.665>of, <00:21:36.804>um, <00:21:36.945>nutshell <00:21:37.085>approach

469
00:21:38.615 --> 00:21:40.175
<00:21:38.615>what <00:21:38.815>we, <00:21:39.015>what <00:21:39.215>we <00:21:39.415>did <00:21:39.615>in <00:21:39.815>West <00:21:40.015>Wing.

470
00:21:40.555 --> 00:21:43.495
<00:21:40.555>And <00:21:40.730>uh, <00:21:40.905>obviously <00:21:41.080>we, <00:21:41.255>uh, <00:21:41.430>while <00:21:41.605>doing <00:21:41.780>this, <00:21:41.955>um,

471
00:21:43.995 --> 00:21:46.935
<00:21:43.995>it <00:21:44.102>was <00:21:44.210>not <00:21:44.318>a <00:21:44.425>piece <00:21:44.533>of <00:21:44.641>k <00:21:44.748>uh, <00:21:44.856>it <00:21:44.964>was <00:21:45.071>a <00:21:45.179>huge <00:21:45.287>paradigm <00:21:45.395>shift.

472
00:21:46.935 --> 00:21:49.975
<00:21:46.935>It <00:21:47.075>was, <00:21:47.215>uh, <00:21:47.355>changing <00:21:47.495>the <00:21:47.635>mindset <00:21:47.774>of, <00:21:47.915>uh, <00:21:48.054>the <00:21:48.195>whole <00:21:48.335>team

473
00:21:50.395 --> 00:21:53.095
<00:21:50.395>and <00:21:50.628>additionally <00:21:50.861>how <00:21:51.095>the <00:21:51.328>whole <00:21:51.561>tech <00:21:51.795>process.

474
00:21:53.835 --> 00:21:57.415
<00:21:53.835>So <00:21:54.010>obviously <00:21:54.185>we <00:21:54.360>face <00:21:54.535>some <00:21:54.710>challenges <00:21:54.885>while <00:21:55.060>achieving <00:21:55.235>our

475
00:21:57.505 --> 00:21:58.855
<00:21:57.505>micro <00:21:57.910>front <00:21:58.315>and <00:21:58.720>architecture.

476
00:21:59.315 --> 00:22:00.615
<00:21:59.315>So <00:21:59.510>I <00:21:59.705>would <00:21:59.900>like <00:22:00.095>to <00:22:00.290>share <00:22:00.485>some

477
00:22:00.615 --> 00:22:01.935
<00:22:00.615>of <00:22:00.852>the <00:22:01.090>challenges <00:22:01.327>which <00:22:01.565>we <00:22:01.803>faced.

478
00:22:03.625 --> 00:22:05.605
<00:22:03.625>So <00:22:03.800>the <00:22:03.975>first <00:22:04.150>one <00:22:04.325>we <00:22:04.500>faced <00:22:04.675>was <00:22:04.850>design <00:22:05.025>consistency.

479
00:22:05.785 --> 00:22:08.045
<00:22:05.785>So <00:22:05.960>since <00:22:06.135>we <00:22:06.310>are <00:22:06.485>splitting <00:22:06.660>our <00:22:06.835>code <00:22:07.010>into <00:22:07.185>multiple

480
00:22:08.245 --> 00:22:11.445
<00:22:08.245>repositories, <00:22:08.524>so <00:22:08.804>it's <00:22:09.084>very, <00:22:09.364>um, <00:22:09.645>inevitable

481
00:22:11.675 --> 00:22:14.485
<00:22:11.675>that <00:22:11.875>somehow <00:22:12.075>we <00:22:12.274>will <00:22:12.475>have <00:22:12.675>some <00:22:12.875>design <00:22:13.075>inconsistencies.

482
00:22:14.775 --> 00:22:16.645
<00:22:14.775>Maybe <00:22:15.125>some <00:22:15.475>colors <00:22:15.825>are <00:22:16.175>different,

483
00:22:16.655 --> 00:22:19.045
<00:22:16.655>maybe <00:22:16.888>some <00:22:17.121>sizes <00:22:17.355>are <00:22:17.588>different <00:22:17.821>and <00:22:18.055>whatnot.

484
00:22:20.185 --> 00:22:21.765
<00:22:20.185>So, <00:22:20.360>and <00:22:20.534>at <00:22:20.710>the <00:22:20.885>end <00:22:21.060>of <00:22:21.235>the <00:22:21.409>day, <00:22:21.585>um,

485
00:22:21.765 --> 00:22:23.325
<00:22:21.765>even <00:22:21.998>if <00:22:22.231>this <00:22:22.465>is <00:22:22.698>a <00:22:22.931>different <00:22:23.165>repo,

486
00:22:23.325 --> 00:22:24.485
<00:22:23.325>there <00:22:23.673>are <00:22:24.021>different <00:22:24.369>repositories

487
00:22:24.485 --> 00:22:26.485
<00:22:24.485>for <00:22:24.685>the <00:22:24.885>user, <00:22:25.084>uh, <00:22:25.284>for <00:22:25.485>the <00:22:25.685>end <00:22:25.885>user.

488
00:22:26.825 --> 00:22:28.645
<00:22:26.825>At <00:22:26.980>the <00:22:27.136>end <00:22:27.291>of <00:22:27.447>the <00:22:27.602>day, <00:22:27.758>the <00:22:27.913>website <00:22:28.069>is <00:22:28.225>the

489
00:22:28.645 --> 00:22:29.685
<00:22:28.645>same, <00:22:28.832>it <00:22:29.019>should <00:22:29.206>look <00:22:29.393>the <00:22:29.581>same.

490
00:22:29.905 --> 00:22:31.405
<00:22:29.905>The <00:22:30.175>homepage <00:22:30.445>should <00:22:30.715>not <00:22:30.985>be <00:22:31.254>looking

491
00:22:31.405 --> 00:22:32.685
<00:22:31.405>different <00:22:31.693>from <00:22:31.981>the <00:22:32.269>listing <00:22:32.557>page.

492
00:22:33.025 --> 00:22:36.085
<00:22:33.025>So <00:22:33.152>what <00:22:33.279>did <00:22:33.406>we <00:22:33.534>do? <00:22:33.661>We <00:22:33.788>come <00:22:33.915>up <00:22:34.043>with <00:22:34.170>a <00:22:34.297>UI <00:22:34.425>kit.

493
00:22:36.675 --> 00:22:40.175
<00:22:36.675>So <00:22:36.815>UI <00:22:36.955>kit <00:22:37.095>is <00:22:37.235>basically <00:22:37.375>collection <00:22:37.514>of <00:22:37.655>all <00:22:37.794>the <00:22:37.935>UI <00:22:38.075>components,

494
00:22:40.595 --> 00:22:42.495
<00:22:40.595>uh, <00:22:40.828>which <00:22:41.061>we <00:22:41.295>use <00:22:41.528>throughout <00:22:41.761>our <00:22:41.995>website

495
00:22:42.995 --> 00:22:44.775
<00:22:42.995>and <00:22:43.344>all <00:22:43.695>the <00:22:44.044>micro <00:22:44.395>contents.

496
00:22:45.275 --> 00:22:49.335
<00:22:45.275>Use <00:22:45.402>this, <00:22:45.529>use <00:22:45.656>the <00:22:45.784>components <00:22:45.911>from <00:22:46.038>UI <00:22:46.165>kit <00:22:46.293>only <00:22:46.420>to <00:22:46.547>make <00:22:46.675>sure

497
00:22:49.365 --> 00:22:50.935
<00:22:49.365>that <00:22:49.645>all <00:22:49.925>the <00:22:50.205>design <00:22:50.485>is <00:22:50.765>consistent.

498
00:22:51.905 --> 00:22:54.505
<00:22:51.905>Whatever <00:22:52.105>is <00:22:52.305>required <00:22:52.504>is <00:22:52.705>used <00:22:52.905>from <00:22:53.105>UI <00:22:53.305>kit.

499
00:22:55.005 --> 00:22:56.705
<00:22:55.005>If <00:22:55.238>you <00:22:55.471>want <00:22:55.705>to <00:22:55.938>implement <00:22:56.171>anything <00:22:56.405>new,

500
00:22:56.965 --> 00:22:58.345
<00:22:56.965>we <00:22:57.213>implement <00:22:57.461>it <00:22:57.710>in <00:22:57.958>UI <00:22:58.207>kit

501
00:22:58.725 --> 00:23:01.065
<00:22:58.725>and <00:22:58.925>then <00:22:59.125>include <00:22:59.324>it <00:22:59.524>in <00:22:59.725>our <00:22:59.925>microphone <00:23:00.125>times.

502
00:23:01.285 --> 00:23:02.945
<00:23:01.285>So <00:23:01.518>this <00:23:01.751>helps <00:23:01.985>us <00:23:02.218>in <00:23:02.451>two <00:23:02.685>ways.

503
00:23:02.945 --> 00:23:04.625
<00:23:02.945>First, <00:23:03.225>to <00:23:03.504>keep <00:23:03.784>the <00:23:04.064>design <00:23:04.345>consistent.

504
00:23:04.885 --> 00:23:06.425
<00:23:04.885>Second, <00:23:05.231>it <00:23:05.578>saves <00:23:05.924>the <00:23:06.271>effort.

505
00:23:06.565 --> 00:23:09.905
<00:23:06.565>So, <00:23:06.798>um, <00:23:07.031>if <00:23:07.265>one <00:23:07.498>team <00:23:07.731>implemented <00:23:07.965>something

506
00:23:09.905 --> 00:23:12.065
<00:23:09.905>and <00:23:10.060>put <00:23:10.216>in <00:23:10.371>UI <00:23:10.527>kit, <00:23:10.682>the <00:23:10.838>other <00:23:10.993>team <00:23:11.149>can <00:23:11.305>just

507
00:23:12.245 --> 00:23:13.265
<00:23:12.245>get <00:23:12.474>it <00:23:12.704>from <00:23:12.933>UI <00:23:13.163>kit.

508
00:23:13.565 --> 00:23:16.305
<00:23:13.565>So <00:23:13.798>it, <00:23:14.031>it <00:23:14.265>basically <00:23:14.498>is <00:23:14.731>completely <00:23:14.965>reusable.

509
00:23:16.645 --> 00:23:20.705
<00:23:16.645>So <00:23:16.820>we <00:23:16.995>get <00:23:17.170>design <00:23:17.345>consistency, <00:23:17.520>we <00:23:17.695>get <00:23:17.870>reusable <00:23:18.045>components,

510
00:23:21.205 --> 00:23:23.745
<00:23:21.205>and <00:23:21.379>this <00:23:21.554>actually <00:23:21.730>helps <00:23:21.905>us <00:23:22.080>to <00:23:22.254>kind <00:23:22.429>of, <00:23:22.605>um,

511
00:23:24.095 --> 00:23:26.265
<00:23:24.095>keep <00:23:24.328>our <00:23:24.561>website <00:23:24.795>in <00:23:25.028>pretty <00:23:25.261>stable <00:23:25.495>state

512
00:23:26.285 --> 00:23:28.225
<00:23:26.285>and <00:23:26.485>move <00:23:26.685>forward <00:23:26.885>with <00:23:27.085>a <00:23:27.285>bit <00:23:27.485>more <00:23:27.685>speed.

513
00:23:30.195 --> 00:23:31.495
<00:23:30.195>The <00:23:30.428>second <00:23:30.663>challenge <00:23:30.897>we <00:23:31.130>faced <00:23:31.364>was

514
00:23:31.495 --> 00:23:33.055
<00:23:31.495>initializing <00:23:31.844>a <00:23:32.195>new <00:23:32.544>microfund <00:23:32.895>end.

515
00:23:33.705 --> 00:23:36.485
<00:23:33.705>So <00:23:33.879>it <00:23:34.054>sounds <00:23:34.230>pretty <00:23:34.405>easy <00:23:34.580>to, <00:23:34.754>um, <00:23:34.929>just, <00:23:35.105>uh,

516
00:23:36.625 --> 00:23:39.365
<00:23:36.625>do <00:23:36.752>some <00:23:36.879>webpac <00:23:37.006>config <00:23:37.134>and <00:23:37.261>you <00:23:37.388>will <00:23:37.515>get <00:23:37.643>a <00:23:37.770>new <00:23:37.897>Microfund <00:23:38.025>end.

517
00:23:39.745 --> 00:23:42.805
<00:23:39.745>But <00:23:39.900>in, <00:23:40.056>uh, <00:23:40.211>production <00:23:40.367>level <00:23:40.522>app, <00:23:40.678>it's <00:23:40.833>not <00:23:40.989>that <00:23:41.145>easy.

518
00:23:43.385 --> 00:23:46.245
<00:23:43.385>We <00:23:43.501>have <00:23:43.618>a <00:23:43.735>lot <00:23:43.851>of <00:23:43.968>stuff <00:23:44.085>to <00:23:44.201>put <00:23:44.318>with <00:23:44.435>each <00:23:44.551>micro <00:23:44.668>front <00:23:44.785>end.

519
00:23:46.245 --> 00:23:49.685
<00:23:46.245>We <00:23:46.361>have <00:23:46.478>to <00:23:46.594>write <00:23:46.711>our, <00:23:46.828>uh, <00:23:46.945>to <00:23:47.061>start <00:23:47.178>with <00:23:47.294>web <00:23:47.411>config, <00:23:47.528>we <00:23:47.645>have

520
00:23:49.685 --> 00:23:52.605
<00:23:49.685>to <00:23:49.840>write <00:23:49.996>our <00:23:50.151>GitLab <00:23:50.307>pipelines, <00:23:50.462>we <00:23:50.618>have <00:23:50.773>to <00:23:50.929>write, <00:23:51.085>um,

521
00:23:52.745 --> 00:23:55.965
<00:23:52.745>docker <00:23:53.024>setup, <00:23:53.304>helm <00:23:53.584>setup <00:23:53.864>and <00:23:54.145>whatnot.

522
00:23:56.345 --> 00:23:58.885
<00:23:56.345>So <00:23:56.452>with <00:23:56.560>each <00:23:56.668>micro <00:23:56.775>front <00:23:56.883>end, <00:23:56.991>we <00:23:57.098>have <00:23:57.206>a <00:23:57.314>lot <00:23:57.421>of <00:23:57.529>stuff <00:23:57.637>to <00:23:57.745>do

523
00:23:59.145 --> 00:24:03.205
<00:23:59.145>so <00:23:59.261>as <00:23:59.378>to <00:23:59.495>keep <00:23:59.611>the <00:23:59.728>mic <00:23:59.845>to, <00:23:59.961>to <00:24:00.078>start <00:24:00.195>the <00:24:00.311>micro <00:24:00.428>front <00:24:00.545>end.

524
00:24:04.315 --> 00:24:07.895
<00:24:04.315>So <00:24:04.470>instead <00:24:04.626>of <00:24:04.781>doing <00:24:04.937>this <00:24:05.092>multiple <00:24:05.248>times, <00:24:05.403>we <00:24:05.559>resorted, <00:24:05.715>uh,

525
00:24:07.915 --> 00:24:11.215
<00:24:07.915>to <00:24:08.070>a <00:24:08.226>templating <00:24:08.381>engine <00:24:08.537>we <00:24:08.692>call <00:24:08.848>it <00:24:09.003>as, <00:24:09.159>uh, <00:24:09.315>template.

526
00:24:12.055 --> 00:24:15.115
<00:24:12.055>So <00:24:12.195>this <00:24:12.335>templating <00:24:12.475>engine <00:24:12.615>actually <00:24:12.755>helps <00:24:12.895>us <00:24:13.035>to <00:24:13.175>kind <00:24:13.315>of, <00:24:13.455>um,

527
00:24:16.245 --> 00:24:18.015
<00:24:16.245>photocopy <00:24:16.594>all <00:24:16.945>our <00:24:17.294>microfund <00:24:17.645>ends.

528
00:24:18.235 --> 00:24:20.495
<00:24:18.235>So <00:24:18.390>what <00:24:18.546>it <00:24:18.701>does <00:24:18.857>is <00:24:19.012>like <00:24:19.168>we <00:24:19.323>create <00:24:19.479>a <00:24:19.635>template

529
00:24:20.825 --> 00:24:22.735
<00:24:20.825>where <00:24:21.058>we <00:24:21.291>put <00:24:21.525>all <00:24:21.758>the <00:24:21.991>required <00:24:22.225>things.

530
00:24:22.755 --> 00:24:23.775
<00:24:22.755>So <00:24:23.061>for <00:24:23.367>example, <00:24:23.673>a,

531
00:24:24.055 --> 00:24:25.695
<00:24:24.055>a <00:24:24.288>complete <00:24:24.521>code <00:24:24.755>structure <00:24:24.988>has <00:24:25.221>been <00:24:25.455>created.

532
00:24:25.835 --> 00:24:27.895
<00:24:25.835>We <00:24:26.068>write <00:24:26.301>all <00:24:26.535>the <00:24:26.768>CI <00:24:27.001>pipeline <00:24:27.235>files,

533
00:24:27.915 --> 00:24:29.575
<00:24:27.915>we <00:24:28.090>write <00:24:28.264>all <00:24:28.440>the <00:24:28.615>batch <00:24:28.790>scripts, <00:24:28.965>which <00:24:29.139>we <00:24:29.315>need.

534
00:24:29.575 --> 00:24:31.375
<00:24:29.575>We <00:24:29.808>write, <00:24:30.041>um, <00:24:30.275>a <00:24:30.508>three <00:24:30.741>publishing <00:24:30.975>script.

535
00:24:31.715 --> 00:24:34.575
<00:24:31.715>We <00:24:31.915>like, <00:24:32.115>we <00:24:32.314>write, <00:24:32.514>um, <00:24:32.715>Kubernetes, <00:24:32.915>deployment <00:24:33.115>charts,

536
00:24:34.645 --> 00:24:36.615
<00:24:34.645>whatnot, <00:24:34.878>everything <00:24:35.111>we <00:24:35.345>write <00:24:35.578>in <00:24:35.811>this <00:24:36.045>template

537
00:24:36.955 --> 00:24:39.455
<00:24:36.955>and <00:24:37.188>publish <00:24:37.421>it <00:24:37.655>into <00:24:37.888>this <00:24:38.121>templating <00:24:38.355>engine.

538
00:24:39.875 --> 00:24:42.775
<00:24:39.875>And <00:24:40.075>whenever <00:24:40.275>we <00:24:40.475>want <00:24:40.675>to <00:24:40.875>run, <00:24:41.075>uh, <00:24:41.275>uh,

539
00:24:42.775 --> 00:24:46.015
<00:24:42.775>spin <00:24:42.882>up <00:24:42.990>a <00:24:43.098>new <00:24:43.205>microfund <00:24:43.313>end, <00:24:43.421>all <00:24:43.528>we <00:24:43.636>need <00:24:43.744>to <00:24:43.851>do <00:24:43.959>is <00:24:44.067>just <00:24:44.175>kind

540
00:24:46.015 --> 00:24:49.335
<00:24:46.015>of, <00:24:46.142>um, <00:24:46.269>on <00:24:46.396>the, <00:24:46.524>uh, <00:24:46.651>with <00:24:46.778>the <00:24:46.905>help <00:24:47.033>of <00:24:47.160>command <00:24:47.287>line <00:24:47.415>tool,

541
00:24:50.075 --> 00:24:51.575
<00:24:50.075>we <00:24:50.412>just <00:24:50.750>put <00:24:51.087>some <00:24:51.425>parameters

542
00:24:51.955 --> 00:24:54.695
<00:24:51.955>and <00:24:52.129>boom, <00:24:52.304>we <00:24:52.480>have <00:24:52.655>a <00:24:52.830>new <00:24:53.004>microfund <00:24:53.179>end <00:24:53.355>ready

543
00:24:54.695 --> 00:24:55.815
<00:24:54.695>with <00:24:54.863>all <00:24:55.031>the <00:24:55.199>goodies <00:24:55.367>which <00:24:55.535>we <00:24:55.703>need.

544
00:24:56.315 --> 00:24:59.855
<00:24:56.315>So <00:24:56.548>it <00:24:56.781>would <00:24:57.015>look <00:24:57.248>something <00:24:57.481>like <00:24:57.715>this.

545
00:25:00.395 --> 00:25:02.695
<00:25:00.395>So, <00:25:00.570>um, <00:25:00.745>all <00:25:00.920>we <00:25:01.095>need <00:25:01.270>to <00:25:01.445>do <00:25:01.620>is <00:25:01.795>refer

546
00:25:02.695 --> 00:25:05.375
<00:25:02.695>to <00:25:02.895>our <00:25:03.095>template <00:25:03.294>repository, <00:25:03.495>which <00:25:03.695>has <00:25:03.895>multiple <00:25:04.095>templates.

547
00:25:05.375 --> 00:25:08.255
<00:25:05.375>We <00:25:05.530>have <00:25:05.686>been <00:25:05.841>using <00:25:05.997>this <00:25:06.152>solution <00:25:06.308>for <00:25:06.463>our <00:25:06.619>NPM <00:25:06.775>Regi,

548
00:25:08.435 --> 00:25:10.335
<00:25:08.435>our <00:25:08.715>own <00:25:08.995>NPM <00:25:09.274>packages <00:25:09.554>and <00:25:09.835>whatnot.

549
00:25:10.675 --> 00:25:11.775
<00:25:10.675>But, <00:25:11.005>uh, <00:25:11.335>what's <00:25:11.665>interesting

550
00:25:11.775 --> 00:25:13.215
<00:25:11.775>for <00:25:11.960>us <00:25:12.145>is <00:25:12.330>this <00:25:12.515>micro <00:25:12.700>front <00:25:12.885>end <00:25:13.071>setup.

551
00:25:13.595 --> 00:25:16.935
<00:25:13.595>So <00:25:13.711>with <00:25:13.828>this <00:25:13.945>setup, <00:25:14.061>all <00:25:14.178>we <00:25:14.295>need <00:25:14.411>to <00:25:14.528>do <00:25:14.645>is <00:25:14.761>pass <00:25:14.878>some, <00:25:14.995>um,

552
00:25:17.505 --> 00:25:19.455
<00:25:17.505>parameters, <00:25:17.855>for <00:25:18.205>example, <00:25:18.555>micro <00:25:18.905>front

553
00:25:19.455 --> 00:25:21.615
<00:25:19.455>and <00:25:19.688>names, <00:25:19.921>some <00:25:20.155>identifier <00:25:20.388>and <00:25:20.621>some <00:25:20.855>description.

554
00:25:22.355 --> 00:25:25.115
<00:25:22.355>And <00:25:22.588>with <00:25:22.821>it, <00:25:23.055>once <00:25:23.288>we <00:25:23.521>do <00:25:23.755>this,

555
00:25:25.915 --> 00:25:29.415
<00:25:25.915>the <00:25:26.070>output <00:25:26.226>is <00:25:26.381>all <00:25:26.537>the <00:25:26.692>complete <00:25:26.848>setup <00:25:27.003>of <00:25:27.159>micro <00:25:27.315>frontend.

556
00:25:29.675 --> 00:25:32.775
<00:25:29.675>We <00:25:29.802>have <00:25:29.929>our <00:25:30.056>docker <00:25:30.184>setup, <00:25:30.311>we <00:25:30.438>have <00:25:30.565>our <00:25:30.693>CI <00:25:30.820>setup, <00:25:30.947>helm <00:25:31.075>setup,

557
00:25:33.195 --> 00:25:35.135
<00:25:33.195>and <00:25:33.544>also <00:25:33.895>our <00:25:34.245>end-to-end <00:25:34.595>test

558
00:25:35.715 --> 00:25:38.495
<00:25:35.715>and <00:25:36.064>all <00:25:36.415>the <00:25:36.764>linter <00:25:37.115>purifier

559
00:25:38.595 --> 00:25:41.135
<00:25:38.595>and <00:25:38.795>whatnot, <00:25:38.995>everything <00:25:39.195>comes <00:25:39.395>out <00:25:39.595>of <00:25:39.795>the <00:25:39.995>box.

560
00:25:41.435 --> 00:25:44.095
<00:25:41.435>So <00:25:41.668>this <00:25:41.901>tool <00:25:42.135>actually <00:25:42.368>helps <00:25:42.601>us <00:25:42.835>to

561
00:25:44.965 --> 00:25:47.615
<00:25:44.965>spin <00:25:45.120>up <00:25:45.276>our <00:25:45.431>new <00:25:45.587>micro <00:25:45.742>front <00:25:45.898>then <00:25:46.053>within <00:25:46.209>a <00:25:46.365>minute.

562
00:25:48.315 --> 00:25:51.015
<00:25:48.315>And <00:25:48.490>that's <00:25:48.665>not <00:25:48.840>all, <00:25:49.015>it <00:25:49.190>has <00:25:49.365>a <00:25:49.540>bit <00:25:49.715>more,

563
00:25:51.115 --> 00:25:52.255
<00:25:51.115>uh, <00:25:51.628>interesting <00:25:52.141>functionality.

564
00:25:52.715 --> 00:25:54.575
<00:25:52.715>So <00:25:53.064>while <00:25:53.415>creating <00:25:53.764>this, <00:25:54.115>um,

565
00:25:54.645 --> 00:25:56.855
<00:25:54.645>it's <00:25:54.845>still <00:25:55.045>an <00:25:55.245>ongoing <00:25:55.445>pro <00:25:55.645>process <00:25:55.845>for <00:25:56.045>us.

566
00:25:56.925 --> 00:25:58.935
<00:25:56.925>It's <00:25:57.065>not <00:25:57.205>like <00:25:57.345>we <00:25:57.485>have <00:25:57.625>created <00:25:57.764>once <00:25:57.905>and <00:25:58.044>it <00:25:58.185>is <00:25:58.325>done.

567
00:25:59.235 --> 00:26:01.175
<00:25:59.235>Um, <00:25:59.435>every <00:25:59.635>new, <00:25:59.834>every <00:26:00.034>day <00:26:00.235>we <00:26:00.435>have <00:26:00.635>kind

568
00:26:01.175 --> 00:26:02.935
<00:26:01.175>of <00:26:01.408>a <00:26:01.641>new <00:26:01.875>functionality <00:26:02.108>which <00:26:02.341>we <00:26:02.575>want

569
00:26:02.935 --> 00:26:04.175
<00:26:02.935>to <00:26:03.158>add <00:26:03.381>to <00:26:03.604>our <00:26:03.827>micro <00:26:04.051>frontend.

570
00:26:04.555 --> 00:26:07.535
<00:26:04.555>For <00:26:04.695>example, <00:26:04.835>we <00:26:04.975>need <00:26:05.115>to <00:26:05.255>publish <00:26:05.395>it <00:26:05.535>to, <00:26:05.675>let's <00:26:05.815>say, <00:26:05.955>uh,

571
00:26:08.075 --> 00:26:10.575
<00:26:08.075>new <00:26:08.230>place, <00:26:08.386>uh, <00:26:08.541>not <00:26:08.697>on <00:26:08.852>S3, <00:26:09.008>maybe <00:26:09.163>just <00:26:09.319>we <00:26:09.475>need

572
00:26:10.575 --> 00:26:11.815
<00:26:10.575>to <00:26:10.761>change <00:26:10.947>a <00:26:11.133>CD <00:26:11.319>name <00:26:11.505>or <00:26:11.691>something.

573
00:26:12.115 --> 00:26:15.055
<00:26:12.115>So <00:26:12.255>instead <00:26:12.395>of <00:26:12.535>going <00:26:12.675>to <00:26:12.815>every <00:26:12.955>micro <00:26:13.095>frontend <00:26:13.235>in <00:26:13.375>doing <00:26:13.515>this,

574
00:26:15.405 --> 00:26:19.865
<00:26:15.405>what <00:26:15.560>we <00:26:15.716>can <00:26:15.871>do <00:26:16.027>is, <00:26:16.182>um, <00:26:16.338>actually <00:26:16.493>ator <00:26:16.649>allows <00:26:16.805>us

575
00:26:19.865 --> 00:26:20.945
<00:26:19.865>to <00:26:20.189>update <00:26:20.513>the <00:26:20.837>template.

576
00:26:21.245 --> 00:26:23.985
<00:26:21.245>So <00:26:21.400>what <00:26:21.556>that <00:26:21.711>means <00:26:21.867>is <00:26:22.022>whatever <00:26:22.178>you <00:26:22.333>want <00:26:22.489>to <00:26:22.645>change,

577
00:26:24.125 --> 00:26:25.465
<00:26:24.125>you <00:26:24.366>just <00:26:24.607>change <00:26:24.848>in <00:26:25.089>the <00:26:25.331>template

578
00:26:25.605 --> 00:26:27.745
<00:26:25.605>and <00:26:25.780>all <00:26:25.955>microfund <00:26:26.130>ends <00:26:26.305>can <00:26:26.480>just <00:26:26.655>hang <00:26:26.830>onto <00:26:27.005>that

579
00:26:27.845 --> 00:26:29.025
<00:26:27.845>and <00:26:28.199>update <00:26:28.553>their <00:26:28.907>template.

580
00:26:29.285 --> 00:26:30.745
<00:26:29.285>So <00:26:29.547>once <00:26:29.810>they <00:26:30.073>update <00:26:30.336>their <00:26:30.599>template,

581
00:26:31.015 --> 00:26:33.985
<00:26:31.015>they <00:26:31.142>get <00:26:31.269>all <00:26:31.396>the <00:26:31.524>changes, <00:26:31.651>which <00:26:31.778>is, <00:26:31.905>which <00:26:32.033>was <00:26:32.160>done <00:26:32.287>in <00:26:32.415>the,

582
00:26:34.325 --> 00:26:38.105
<00:26:34.325>uh, <00:26:34.465>template, <00:26:34.605>and <00:26:34.745>it'll <00:26:34.885>be <00:26:35.025>kind <00:26:35.165>of, <00:26:35.305>it's <00:26:35.445>generally <00:26:35.585>kind <00:26:35.725>of,

583
00:26:38.105 --> 00:26:39.625
<00:26:38.105>um, <00:26:38.561>get, <00:26:39.017>get <00:26:39.473>merged.

584
00:26:40.165 --> 00:26:41.955
<00:26:40.165>So, <00:26:41.565>uh,

585
00:26:41.975 --> 00:26:44.205
<00:26:41.975>all <00:26:42.130>the <00:26:42.286>micro <00:26:42.441>frontends <00:26:42.597>will <00:26:42.752>get <00:26:42.908>all <00:26:43.063>the <00:26:43.219>available <00:26:43.375>changes

586
00:26:44.235 --> 00:26:46.605
<00:26:44.235>from <00:26:44.468>the <00:26:44.701>previous <00:26:44.935>state <00:26:45.168>of <00:26:45.401>this <00:26:45.635>template.

587
00:26:47.105 --> 00:26:49.485
<00:26:47.105>So <00:26:47.385>this <00:26:47.665>tool <00:26:47.945>is <00:26:48.225>pretty <00:26:48.505>awesome

588
00:26:49.485 --> 00:26:53.365
<00:26:49.485>because <00:26:49.625>it <00:26:49.764>first <00:26:49.905>lets <00:26:50.044>us <00:26:50.185>to <00:26:50.324>kind <00:26:50.465>of, <00:26:50.604>um, <00:26:50.745>have, <00:26:50.885>uh,

589
00:26:53.755 --> 00:26:56.325
<00:26:53.755>easy <00:26:53.895>generation <00:26:54.035>of <00:26:54.175>the <00:26:54.315>temp, <00:26:54.455>uh, <00:26:54.595>of <00:26:54.735>the <00:26:54.875>micro <00:26:55.015>front <00:26:55.155>end.

590
00:26:56.545 --> 00:26:59.845
<00:26:56.545>And <00:26:56.661>second, <00:26:56.778>it <00:26:56.895>helps <00:26:57.011>us <00:26:57.128>to <00:26:57.245>keep <00:26:57.361>all <00:26:57.478>the <00:26:57.595>micro <00:26:57.711>front <00:26:57.828>ends <00:26:57.945>on

591
00:27:00.155 --> 00:27:02.645
<00:27:00.155>same <00:27:00.355>page, <00:27:00.555>at <00:27:00.754>least <00:27:00.955>on <00:27:01.155>the <00:27:01.355>architectural <00:27:01.555>side.

592
00:27:04.715 --> 00:27:08.965
<00:27:04.715>So <00:27:04.915>the <00:27:05.115>next <00:27:05.314>big <00:27:05.514>problem <00:27:05.715>we <00:27:05.915>faced <00:27:06.115>was

593
00:27:08.965 --> 00:27:10.325
<00:27:08.965>decoupling <00:27:09.271>code <00:27:09.577>from <00:27:09.883>up <00:27:10.189>shell.

594
00:27:11.035 --> 00:27:12.695
<00:27:11.035>So <00:27:11.268>in <00:27:11.501>theory <00:27:11.735>it <00:27:11.968>looks <00:27:12.201>very <00:27:12.435>easy,

595
00:27:13.235 --> 00:27:17.095
<00:27:13.235>but <00:27:13.390>um, <00:27:13.546>in <00:27:13.701>practicality <00:27:13.857>it's <00:27:14.012>really <00:27:14.168>a <00:27:14.323>huge <00:27:14.479>humongous <00:27:14.635>task.

596
00:27:17.675 --> 00:27:19.055
<00:27:17.675>So <00:27:17.985>there's <00:27:18.296>lots <00:27:18.606>of <00:27:18.917>code

597
00:27:19.315 --> 00:27:22.855
<00:27:19.315>and <00:27:19.442>we <00:27:19.569>need <00:27:19.696>to <00:27:19.824>think <00:27:19.951>like <00:27:20.078>how <00:27:20.205>we <00:27:20.333>will <00:27:20.460>split <00:27:20.587>it <00:27:20.715>up.

598
00:27:23.275 --> 00:27:25.575
<00:27:23.275>So <00:27:23.475>instead <00:27:23.675>of <00:27:23.875>creating <00:27:24.075>a <00:27:24.275>new <00:27:24.475>app, <00:27:24.675>shell,

599
00:27:26.195 --> 00:27:29.175
<00:27:26.195>we <00:27:26.370>named <00:27:26.544>the <00:27:26.720>existing <00:27:26.895>monolith <00:27:27.070>as <00:27:27.245>an <00:27:27.419>app <00:27:27.595>shell,

600
00:27:29.435 --> 00:27:31.335
<00:27:29.435>and <00:27:29.635>one <00:27:29.835>by <00:27:30.034>one <00:27:30.235>we <00:27:30.435>tried <00:27:30.635>to, <00:27:30.835>uh,

601
00:27:31.345 --> 00:27:32.615
<00:27:31.345>split <00:27:31.573>out <00:27:31.802>the <00:27:32.030>things <00:27:32.259>from <00:27:32.488>it.

602
00:27:32.795 --> 00:27:36.185
<00:27:32.795>So <00:27:32.922>the <00:27:33.049>very <00:27:33.176>first <00:27:33.304>thing <00:27:33.431>we <00:27:33.558>split <00:27:33.685>it <00:27:33.813>out <00:27:33.940>was, <00:27:34.067>uh, <00:27:34.195>uh,

603
00:27:36.185 --> 00:27:37.185
<00:27:36.185>the <00:27:36.635>UI <00:27:37.085>components.

604
00:27:37.525 --> 00:27:40.425
<00:27:37.525>So <00:27:37.725>we <00:27:37.925>started <00:27:38.125>moving <00:27:38.325>all <00:27:38.525>the <00:27:38.725>UI <00:27:38.925>components

605
00:27:40.425 --> 00:27:41.425
<00:27:40.425>to <00:27:40.725>our <00:27:41.024>design <00:27:41.325>system.

606
00:27:42.045 --> 00:27:45.525
<00:27:42.045>So <00:27:42.220>this <00:27:42.395>actually <00:27:42.570>helped <00:27:42.745>us <00:27:42.920>to <00:27:43.095>kind <00:27:43.270>of, <00:27:43.445>um,

607
00:27:46.545 --> 00:27:48.445
<00:27:46.545>reduce <00:27:46.825>the <00:27:47.105>lowest <00:27:47.385>into <00:27:47.665>half <00:27:47.945>maybe

608
00:27:48.595 --> 00:27:51.605
<00:27:48.595>because, <00:27:48.828>uh, <00:27:49.061>with <00:27:49.295>this <00:27:49.528>movement, <00:27:49.761>um, <00:27:49.995>half

609
00:27:51.605 --> 00:27:54.245
<00:27:51.605>of <00:27:51.780>our <00:27:51.955>code <00:27:52.130>was <00:27:52.305>already <00:27:52.480>ported <00:27:52.655>into <00:27:52.830>UI <00:27:53.005>kit

610
00:27:54.625 --> 00:27:57.245
<00:27:54.625>and, <00:27:54.825>um, <00:27:55.025>all <00:27:55.225>the <00:27:55.425>micro <00:27:55.625>front <00:27:55.825>ends <00:27:56.025>were

611
00:27:57.755 --> 00:27:59.165
<00:27:57.755>like <00:27:58.072>relying <00:27:58.389>on <00:27:58.706>UI <00:27:59.024>kit

612
00:27:59.185 --> 00:28:02.005
<00:27:59.185>and <00:27:59.325>they <00:27:59.465>get <00:27:59.605>everything <00:27:59.745>out <00:27:59.885>of <00:28:00.024>the <00:28:00.165>box <00:28:00.304>from <00:28:00.445>UI <00:28:00.585>kit.

613
00:28:03.545 --> 00:28:05.445
<00:28:03.545>The <00:28:03.720>next <00:28:03.895>thing <00:28:04.070>we <00:28:04.245>faced <00:28:04.420>was, <00:28:04.595>um, <00:28:04.770>sharing <00:28:04.945>logic

614
00:28:05.445 --> 00:28:06.565
<00:28:05.445>between <00:28:05.781>micro <00:28:06.117>front <00:28:06.453>ends.

615
00:28:07.225 --> 00:28:12.005
<00:28:07.225>So, <00:28:07.365>um, <00:28:07.504>this <00:28:07.645>logic <00:28:07.784>is <00:28:07.925>not <00:28:08.064>kind <00:28:08.205>of <00:28:08.344>a <00:28:08.485>dynamic <00:28:08.625>logic,

616
00:28:12.025 --> 00:28:15.045
<00:28:12.025>but <00:28:12.225>static <00:28:12.425>logic, <00:28:12.625>for <00:28:12.825>example, <00:28:13.025>um, <00:28:13.225>price <00:28:13.425>formatting.

617
00:28:15.105 --> 00:28:18.165
<00:28:15.105>So <00:28:15.260>as <00:28:15.416>I <00:28:15.571>explained, <00:28:15.727>um, <00:28:15.882>west <00:28:16.038>Wing <00:28:16.193>shop <00:28:16.349>is, <00:28:16.505>uh,

618
00:28:18.195 --> 00:28:19.525
<00:28:18.195>multi-country <00:28:19.392>website.

619
00:28:20.225 --> 00:28:23.885
<00:28:20.225>So <00:28:20.399>we <00:28:20.574>have <00:28:20.750>different <00:28:20.925>price <00:28:21.100>formatting <00:28:21.274>for <00:28:21.449>every <00:28:21.625>country

620
00:28:24.495 --> 00:28:26.285
<00:28:24.495>based <00:28:24.728>on <00:28:24.961>the <00:28:25.195>region <00:28:25.428>and <00:28:25.661>et <00:28:25.895>cetera.

621
00:28:26.905 --> 00:28:30.595
<00:28:26.905>So, <00:28:27.060>um, <00:28:27.216>all <00:28:27.371>the <00:28:27.527>micro <00:28:27.682>frontends, <00:28:27.838>wherever <00:28:27.993>we <00:28:28.149>use <00:28:28.305>price,

622
00:28:30.775 --> 00:28:32.835
<00:28:30.775>we <00:28:30.930>need <00:28:31.086>to <00:28:31.241>show <00:28:31.397>the <00:28:31.552>same <00:28:31.708>formatting <00:28:31.863>for <00:28:32.019>each <00:28:32.175>price.

623
00:28:33.375 --> 00:28:36.435
<00:28:33.375>So <00:28:33.530>we <00:28:33.686>have <00:28:33.841>a <00:28:33.997>certain <00:28:34.152>logic <00:28:34.308>which <00:28:34.463>decides <00:28:34.619>the <00:28:34.775>format

624
00:28:36.435 --> 00:28:38.955
<00:28:36.435>of <00:28:36.590>the <00:28:36.746>price, <00:28:36.901>and <00:28:37.057>we <00:28:37.212>do <00:28:37.368>not <00:28:37.523>want <00:28:37.679>to <00:28:37.835>kind

625
00:28:38.955 --> 00:28:41.475
<00:28:38.955>of <00:28:39.129>write <00:28:39.304>it <00:28:39.480>every <00:28:39.655>microfund <00:28:39.830>and <00:28:40.004>the <00:28:40.179>same <00:28:40.355>logic.

626
00:28:42.135 --> 00:28:45.955
<00:28:42.135>So <00:28:42.251>what <00:28:42.368>did <00:28:42.485>we <00:28:42.601>do <00:28:42.718>is, <00:28:42.835>um, <00:28:42.951>we <00:28:43.068>created <00:28:43.185>our <00:28:43.301>own <00:28:43.418>NPM <00:28:43.535>package,

627
00:28:46.595 --> 00:28:47.715
<00:28:46.595>internal <00:28:47.099>NPM <00:28:47.602>package

628
00:28:48.055 --> 00:28:50.715
<00:28:48.055>and <00:28:48.288>ported <00:28:48.521>this <00:28:48.755>logic <00:28:48.988>into <00:28:49.221>this <00:28:49.455>package.

629
00:28:51.535 --> 00:28:56.235
<00:28:51.535>And <00:28:51.662>everyone <00:28:51.789>using <00:28:51.916>this, <00:28:52.044>um, <00:28:52.171>use, <00:28:52.298>uh, <00:28:52.425>can <00:28:52.553>use <00:28:52.680>this <00:28:52.807>mi <00:28:52.935>uh,

630
00:28:56.435 --> 00:29:00.925
<00:28:56.435>NP <00:28:56.575>module <00:28:56.715>and <00:28:56.855>get <00:28:56.995>this, <00:28:57.135>uh, <00:28:57.274>functionality <00:28:57.415>out <00:28:57.554>of <00:28:57.695>the <00:28:57.835>box.

631
00:29:01.345 --> 00:29:04.955
<00:29:01.345>So <00:29:01.485>all <00:29:01.625>that, <00:29:01.765>all <00:29:01.905>the <00:29:02.045>logic <00:29:02.185>which <00:29:02.325>are <00:29:02.465>kind <00:29:02.605>of <00:29:02.745>static,

632
00:29:05.405 --> 00:29:07.315
<00:29:05.405>which <00:29:05.580>will <00:29:05.754>not, <00:29:05.930>which <00:29:06.105>do <00:29:06.280>not <00:29:06.455>depend <00:29:06.629>on <00:29:06.805>data,

633
00:29:07.695 --> 00:29:09.995
<00:29:07.695>we <00:29:07.895>actually <00:29:08.095>put <00:29:08.294>it <00:29:08.495>to <00:29:08.695>some <00:29:08.895>NPM <00:29:09.095>modules

634
00:29:10.295 --> 00:29:12.755
<00:29:10.295>and <00:29:10.435>then <00:29:10.575>we <00:29:10.715>can <00:29:10.855>easily <00:29:10.995>use <00:29:11.135>them <00:29:11.275>out <00:29:11.415>of <00:29:11.555>the <00:29:11.695>box.

635
00:29:12.775 --> 00:29:14.675
<00:29:12.775>And <00:29:13.008>these <00:29:13.241>logics <00:29:13.475>are <00:29:13.708>not <00:29:13.941>that <00:29:14.175>dynamic.

636
00:29:15.095 --> 00:29:17.675
<00:29:15.095>We <00:29:15.222>have <00:29:15.349>to <00:29:15.476>make <00:29:15.604>sure <00:29:15.731>that, <00:29:15.858>uh, <00:29:15.985>we <00:29:16.113>are <00:29:16.240>not <00:29:16.367>dependent <00:29:16.495>on,

637
00:29:18.015 --> 00:29:20.475
<00:29:18.015>we <00:29:18.142>do, <00:29:18.269>we <00:29:18.396>should <00:29:18.524>not <00:29:18.651>kind <00:29:18.778>of, <00:29:18.905>uh, <00:29:19.033>deploy <00:29:19.160>it <00:29:19.287>multiple <00:29:19.415>times.

638
00:29:20.535 --> 00:29:21.995
<00:29:20.535>We <00:29:20.797>don't <00:29:21.060>need <00:29:21.323>these <00:29:21.586>logic <00:29:21.849>change,

639
00:29:21.995 --> 00:29:24.755
<00:29:21.995>like <00:29:22.195>price <00:29:22.395>formatting <00:29:22.594>would <00:29:22.794>not <00:29:22.995>change <00:29:23.195>like <00:29:23.395>maybe

640
00:29:24.755 --> 00:29:25.875
<00:29:24.755>in <00:29:24.956>six <00:29:25.158>month <00:29:25.359>or <00:29:25.561>a <00:29:25.763>year.

641
00:29:26.215 --> 00:29:28.355
<00:29:26.215>So <00:29:26.415>it's <00:29:26.615>safe <00:29:26.814>choice <00:29:27.014>to <00:29:27.215>put <00:29:27.415>it <00:29:27.615>there.

642
00:29:28.735 --> 00:29:31.515
<00:29:28.735>So <00:29:28.862>it <00:29:28.989>was, <00:29:29.116>uh, <00:29:29.244>kind <00:29:29.371>of, <00:29:29.498>uh, <00:29:29.625>not <00:29:29.753>kind <00:29:29.880>of <00:29:30.007>a <00:29:30.135>blocking,

643
00:29:31.515 --> 00:29:34.435
<00:29:31.515>but <00:29:31.715>uh, <00:29:31.915>indeed <00:29:32.115>helping <00:29:32.315>us <00:29:32.515>to <00:29:32.715>move <00:29:32.915>forward.

644
00:29:36.245 --> 00:29:39.145
<00:29:36.245>And <00:29:36.400>the <00:29:36.556>final <00:29:36.711>challenge <00:29:36.867>we <00:29:37.022>faced <00:29:37.178>was <00:29:37.333>building <00:29:37.489>an <00:29:37.645>efficient

645
00:29:39.295 --> 00:29:40.465
<00:29:39.295>developer <00:29:40.348>ecosystem.

646
00:29:41.425 --> 00:29:44.415
<00:29:41.425>So <00:29:41.600>if <00:29:41.774>you <00:29:41.950>think <00:29:42.125>about <00:29:42.300>it, <00:29:42.475>we <00:29:42.649>have <00:29:42.825>app,

647
00:29:44.515 --> 00:29:46.735
<00:29:44.515>we <00:29:44.670>have <00:29:44.826>micro <00:29:44.981>contents, <00:29:45.137>and <00:29:45.292>we <00:29:45.448>have <00:29:45.603>lots <00:29:45.759>of <00:29:45.915>repositories

648
00:29:47.195 --> 00:29:48.935
<00:29:47.195>and <00:29:47.395>we <00:29:47.595>have <00:29:47.794>to <00:29:47.995>clone <00:29:48.195>all <00:29:48.395>the <00:29:48.595>repositories

649
00:29:48.995 --> 00:29:51.455
<00:29:48.995>and <00:29:49.150>run <00:29:49.306>it <00:29:49.461>in <00:29:49.617>order <00:29:49.772>to <00:29:49.928>make <00:29:50.083>a <00:29:50.239>slightest <00:29:50.395>change.

650
00:29:51.515 --> 00:29:54.375
<00:29:51.515>So <00:29:51.670>we <00:29:51.826>are <00:29:51.981>again <00:29:52.137>landing <00:29:52.292>into <00:29:52.448>kind <00:29:52.603>of, <00:29:52.759>um, <00:29:52.915>this,

651
00:29:54.675 --> 00:29:56.695
<00:29:54.675>at <00:29:54.875>least <00:29:55.075>on <00:29:55.274>the <00:29:55.475>developer <00:29:55.675>side, <00:29:55.875>monolithic <00:29:56.075>problem.

652
00:29:57.315 --> 00:29:59.415
<00:29:57.315>So <00:29:57.595>we <00:29:57.875>are <00:29:58.155>running <00:29:58.435>multiple <00:29:58.715>process

653
00:30:00.055 --> 00:30:02.175
<00:30:00.055>and <00:30:00.210>checking <00:30:00.366>like, <00:30:00.521>okay, <00:30:00.677>if <00:30:00.832>it <00:30:00.988>is <00:30:01.143>working <00:30:01.299>or <00:30:01.455>not,

654
00:30:02.435 --> 00:30:03.695
<00:30:02.435>and <00:30:02.718>this <00:30:03.002>is <00:30:03.285>not <00:30:03.569>optimal.

655
00:30:04.155 --> 00:30:07.415
<00:30:04.155>So, <00:30:04.330>um, <00:30:04.504>how <00:30:04.680>we <00:30:04.855>solve <00:30:05.030>this <00:30:05.205>is <00:30:05.379>we <00:30:05.555>resorted

656
00:30:07.415 --> 00:30:08.655
<00:30:07.415>for <00:30:07.787>docker <00:30:08.158>based <00:30:08.531>solution.

657
00:30:08.955 --> 00:30:10.335
<00:30:08.955>So <00:30:09.203>we <00:30:09.451>created <00:30:09.700>a <00:30:09.948>docker <00:30:10.197>image

658
00:30:10.755 --> 00:30:15.685
<00:30:10.755>and <00:30:10.895>um, <00:30:11.035>for <00:30:11.175>the <00:30:11.315>remote <00:30:11.455>URL <00:30:11.595>we, <00:30:11.735>we <00:30:11.875>supplied <00:30:12.015>all <00:30:12.155>the

659
00:30:16.455 --> 00:30:19.165
<00:30:16.455>micro <00:30:16.735>frontend <00:30:17.014>from, <00:30:17.294>uh, <00:30:17.574>staging <00:30:17.855>URL.

660
00:30:19.855 --> 00:30:22.995
<00:30:19.855>So <00:30:20.030>we <00:30:20.205>do <00:30:20.380>not <00:30:20.555>have <00:30:20.730>anything, <00:30:20.905>we <00:30:21.080>just, <00:30:21.255>um,

661
00:30:23.105 --> 00:30:26.115
<00:30:23.105>have <00:30:23.280>this <00:30:23.455>app <00:30:23.630>shell, <00:30:23.805>which <00:30:23.980>consumes <00:30:24.155>all <00:30:24.330>the <00:30:24.505>remotes

662
00:30:26.115 --> 00:30:27.155
<00:30:26.115>from <00:30:26.583>staging <00:30:27.051>URL.

663
00:30:27.655 --> 00:30:29.155
<00:30:27.655>And <00:30:27.879>when <00:30:28.105>we <00:30:28.330>need <00:30:28.555>to <00:30:28.780>develop, <00:30:29.004>uh,

664
00:30:29.525 --> 00:30:32.715
<00:30:29.525>let's <00:30:29.641>say <00:30:29.758>a <00:30:29.875>single <00:30:29.991>micro <00:30:30.108>front <00:30:30.225>end, <00:30:30.341>all <00:30:30.458>we <00:30:30.575>need <00:30:30.691>to <00:30:30.808>do <00:30:30.925>is,

665
00:30:32.775 --> 00:30:35.515
<00:30:32.775>um, <00:30:33.125>expose <00:30:33.475>some <00:30:33.825>environment <00:30:34.175>variable

666
00:30:35.775 --> 00:30:38.355
<00:30:35.775>and <00:30:35.975>these <00:30:36.175>variables <00:30:36.375>hook <00:30:36.575>onto <00:30:36.775>this <00:30:36.975>remote <00:30:37.175>URL.

667
00:30:38.695 --> 00:30:42.355
<00:30:38.695>And <00:30:38.835>instead <00:30:38.975>of <00:30:39.115>your <00:30:39.254>remote <00:30:39.395>URL, <00:30:39.534>we <00:30:39.675>pass <00:30:39.814>the <00:30:39.955>local, <00:30:40.095>uh,

668
00:30:42.355 --> 00:30:43.355
<00:30:42.355>local <00:30:42.655>host <00:30:42.955>URL <00:30:43.255>for

669
00:30:43.355 --> 00:30:45.315
<00:30:43.355>that <00:30:43.510>specific <00:30:43.666>micro <00:30:43.821>frontend, <00:30:43.977>which <00:30:44.132>we <00:30:44.288>want <00:30:44.443>to <00:30:44.599>work <00:30:44.755>on.

670
00:30:45.975 --> 00:30:48.715
<00:30:45.975>And <00:30:46.115>all <00:30:46.254>we <00:30:46.395>need <00:30:46.534>to <00:30:46.675>do <00:30:46.814>is <00:30:46.955>run <00:30:47.094>this <00:30:47.235>docker <00:30:47.375>image

671
00:30:48.815 --> 00:30:51.155
<00:30:48.815>and <00:30:48.990>a <00:30:49.165>local <00:30:49.340>instance <00:30:49.515>of <00:30:49.690>this <00:30:49.865>micro <00:30:50.040>front <00:30:50.215>end.

672
00:30:51.575 --> 00:30:54.435
<00:30:51.575>So <00:30:51.750>basically <00:30:51.925>every <00:30:52.100>other <00:30:52.275>micro <00:30:52.450>frontend <00:30:52.625>in <00:30:52.800>the <00:30:52.975>app,

673
00:30:54.435 --> 00:30:56.635
<00:30:54.435>shell <00:30:54.610>itself <00:30:54.784>will <00:30:54.960>be <00:30:55.135>running <00:30:55.310>from <00:30:55.485>the <00:30:55.659>staging <00:30:55.835>URL,

674
00:30:56.975 --> 00:30:58.835
<00:30:56.975>but <00:30:57.175>your <00:30:57.375>micro <00:30:57.574>frontend, <00:30:57.774>which <00:30:57.975>you <00:30:58.175>are <00:30:58.375>changing,

675
00:30:59.635 --> 00:31:02.285
<00:30:59.635>will <00:30:59.790>be <00:30:59.946>running <00:31:00.101>on <00:31:00.257>your, <00:31:00.412>from <00:31:00.568>your <00:31:00.723>local <00:31:00.879>host, <00:31:01.035>URL.

676
00:31:02.665 --> 00:31:05.845
<00:31:02.665>So <00:31:02.865>this <00:31:03.065>actually <00:31:03.264>exploits <00:31:03.465>both <00:31:03.665>micro <00:31:03.865>frontend, <00:31:04.065>um,

677
00:31:06.645 --> 00:31:09.325
<00:31:06.645>functionality <00:31:06.995>and <00:31:07.345>the <00:31:07.695>docker <00:31:08.045>setup.

678
00:31:09.545 --> 00:31:11.885
<00:31:09.545>So <00:31:09.720>this <00:31:09.895>kind <00:31:10.070>of, <00:31:10.245>um, <00:31:10.420>helps <00:31:10.595>us <00:31:10.770>a <00:31:10.945>lot

679
00:31:12.225 --> 00:31:14.765
<00:31:12.225>and <00:31:12.574>this <00:31:12.925>increase <00:31:13.274>our <00:31:13.625>productivity

680
00:31:14.955 --> 00:31:18.085
<00:31:14.955>because, <00:31:15.155>uh, <00:31:15.355>it's, <00:31:15.554>uh, <00:31:15.754>just <00:31:15.955>running <00:31:16.155>one <00:31:16.355>docker

681
00:31:18.185 --> 00:31:19.845
<00:31:18.185>and, <00:31:18.534>uh, <00:31:18.885>one <00:31:19.235>node <00:31:19.585>process.

682
00:31:21.415 --> 00:31:24.195
<00:31:21.415>So, <00:31:21.695>um, <00:31:21.975>this <00:31:22.254>was <00:31:22.534>all <00:31:22.815>about

683
00:31:24.255 --> 00:31:26.275
<00:31:24.255>how <00:31:24.535>we <00:31:24.815>implemented <00:31:25.095>our <00:31:25.375>micro <00:31:25.655>frontend

684
00:31:26.275 --> 00:31:27.555
<00:31:26.275>ecosystem <00:31:26.659>in <00:31:27.043>West <00:31:27.427>Wing.

685
00:31:27.935 --> 00:31:31.595
<00:31:27.935>Um, <00:31:28.090>still <00:31:28.246>it's <00:31:28.401>a <00:31:28.557>super, <00:31:28.712>uh, <00:31:28.868>tedious <00:31:29.023>process <00:31:29.179>for <00:31:29.335>us.

686
00:31:31.625 --> 00:31:34.395
<00:31:31.625>It's, <00:31:31.825>uh, <00:31:32.025>ongoing. <00:31:32.225>Each <00:31:32.425>day <00:31:32.625>we <00:31:32.825>learn <00:31:33.025>something.

687
00:31:34.395 --> 00:31:37.115
<00:31:34.395>Each <00:31:34.595>day <00:31:34.795>we <00:31:34.995>break <00:31:35.195>something <00:31:35.395>and <00:31:35.595>make <00:31:35.795>something.

688
00:31:37.495 --> 00:31:40.755
<00:31:37.495>But <00:31:37.622>all <00:31:37.749>in <00:31:37.876>all, <00:31:38.004>I <00:31:38.131>can <00:31:38.258>say <00:31:38.385>from <00:31:38.513>my, <00:31:38.640>uh, <00:31:38.767>experience, <00:31:38.895>uh,

689
00:31:40.755 --> 00:31:42.475
<00:31:40.755>from <00:31:40.955>past <00:31:41.155>six <00:31:41.355>months <00:31:41.555>or <00:31:41.755>maybe <00:31:41.955>10 <00:31:42.155>months,

690
00:31:42.975 --> 00:31:44.955
<00:31:42.975>um, <00:31:43.324>it's <00:31:43.675>totally <00:31:44.024>worth <00:31:44.375>it.

691
00:31:45.015 --> 00:31:48.435
<00:31:45.015>And, <00:31:45.170>um, <00:31:45.326>our <00:31:45.481>teams <00:31:45.637>are <00:31:45.792>moving <00:31:45.948>with <00:31:46.103>way <00:31:46.259>more <00:31:46.415>velocity

692
00:31:48.695 --> 00:31:50.995
<00:31:48.695>and <00:31:49.044>I <00:31:49.395>would <00:31:49.745>say <00:31:50.095>happily.

693
00:31:52.095 --> 00:31:54.985
<00:31:52.095>And <00:31:52.375>with <00:31:52.655>that, <00:31:52.935>thank <00:31:53.215>you <00:31:53.495>everyone.

694
00:32:02.405 --> 00:32:03.305
<00:32:02.405>Alicia, <00:32:02.810>you're <00:32:03.215>mute.

695
00:32:03.645 --> 00:32:05.345
<00:32:03.645>Oh <00:32:03.878>yes, <00:32:04.111>thank <00:32:04.345>you. <00:32:04.578>So <00:32:04.811>thank <00:32:05.045>you

696
00:32:05.345 --> 00:32:07.265
<00:32:05.345>for <00:32:05.578>your <00:32:05.811>presentation <00:32:06.045>and <00:32:06.278>for <00:32:06.511>the <00:32:06.745>demo.

697
00:32:07.725 --> 00:32:10.385
<00:32:07.725>Uh, <00:32:07.880>we <00:32:08.036>have <00:32:08.191>a <00:32:08.347>few <00:32:08.502>questions <00:32:08.658>so <00:32:08.813>we <00:32:08.969>can <00:32:09.125>start.

698
00:32:11.005 --> 00:32:14.425
<00:32:11.005>Uh, <00:32:11.205>the <00:32:11.405>first <00:32:11.605>one <00:32:11.805>is <00:32:12.005>when <00:32:12.205>microphones <00:32:12.405>communicate

699
00:32:14.425 --> 00:32:18.185
<00:32:14.425>with <00:32:14.565>each <00:32:14.705>other, <00:32:14.845>is <00:32:14.985>it <00:32:15.125>like <00:32:15.264>the <00:32:15.405>same <00:32:15.544>in <00:32:15.685>like <00:32:15.825>OOP?

700
00:32:20.295 --> 00:32:21.795
<00:32:20.295>Uh, <00:32:20.745>no, <00:32:21.195>not <00:32:21.645>necessarily.

701
00:32:22.055 --> 00:32:24.875
<00:32:22.055>So, <00:32:22.288>um, <00:32:22.521>we <00:32:22.755>actually <00:32:22.988>kind <00:32:23.221>of <00:32:23.455>don't,

702
00:32:25.175 --> 00:32:26.675
<00:32:25.175>um, <00:32:25.512>bind <00:32:25.850>it <00:32:26.187>with <00:32:26.524>anything.

703
00:32:26.695 --> 00:32:31.435
<00:32:26.695>It <00:32:26.835>can <00:32:26.975>be, <00:32:27.115>um, <00:32:27.254>any <00:32:27.395>like, <00:32:27.534>um, <00:32:27.675>any <00:32:27.814>object <00:32:27.955>or <00:32:28.095>something.

704
00:32:31.855 --> 00:32:33.635
<00:32:31.855>But <00:32:32.135>we <00:32:32.415>do <00:32:32.695>type <00:32:32.975>these <00:32:33.255>objects

705
00:32:33.635 --> 00:32:37.915
<00:32:33.635>because, <00:32:33.835>um, <00:32:34.035>while <00:32:34.235>like, <00:32:34.435>um, <00:32:34.635>actual <00:32:34.835>expose, <00:32:35.035>uh,

706
00:32:38.145 --> 00:32:40.805
<00:32:38.145>some <00:32:38.320>functions <00:32:38.495>and <00:32:38.670>these <00:32:38.845>functions <00:32:39.020>are <00:32:39.195>typed <00:32:39.370>when <00:32:39.545>micro

707
00:32:40.805 --> 00:32:42.485
<00:32:40.805>front <00:32:41.038>and <00:32:41.271>kind <00:32:41.505>of <00:32:41.738>consume <00:32:41.971>these <00:32:42.205>functions

708
00:32:42.485 --> 00:32:45.925
<00:32:42.485>or <00:32:42.625>send <00:32:42.764>a <00:32:42.905>signal <00:32:43.044>to <00:32:43.185>these <00:32:43.324>functions, <00:32:43.465>um, <00:32:43.604>they, <00:32:43.745>they <00:32:43.885>know

709
00:32:45.925 --> 00:32:47.085
<00:32:45.925>what <00:32:46.186>needs <00:32:46.447>to <00:32:46.708>be <00:32:46.969>sent

710
00:32:47.145 --> 00:32:49.325
<00:32:47.145>and <00:32:47.345>that's <00:32:47.545>where <00:32:47.745>the <00:32:47.945>typings <00:32:48.145>comes <00:32:48.345>in <00:32:48.545>play.

711
00:32:49.585 --> 00:32:50.685
<00:32:49.585>So <00:32:49.832>we <00:32:50.080>kind <00:32:50.327>of, <00:32:50.575>um,

712
00:32:50.685 --> 00:32:53.365
<00:32:50.685>expose <00:32:50.840>a <00:32:50.996>typing <00:32:51.151>package <00:32:51.307>which <00:32:51.462>these <00:32:51.618>micro <00:32:51.773>front <00:32:51.929>ends <00:32:52.085>consume

713
00:32:53.365 --> 00:32:55.485
<00:32:53.365>and <00:32:53.565>know <00:32:53.765>exactly <00:32:53.965>what <00:32:54.165>needs <00:32:54.365>to <00:32:54.565>be <00:32:54.765>sent.

714
00:32:56.995 --> 00:32:59.335
<00:32:56.995>Thanks. <00:32:57.274>And <00:32:57.554>how <00:32:57.834>will <00:32:58.114>it <00:32:58.395>work

715
00:32:59.335 --> 00:33:01.455
<00:32:59.335>with <00:32:59.685>TypeScript <00:33:00.035>in <00:33:00.385>their <00:33:00.735>project?

716
00:33:01.485 --> 00:33:05.815
<00:33:01.485>They <00:33:01.640>define <00:33:01.796>properties, <00:33:01.951>uh, <00:33:02.107>and <00:33:02.262>um, <00:33:02.418>not <00:33:02.573>with <00:33:02.729>prop <00:33:02.885>types,

717
00:33:05.995 --> 00:33:08.215
<00:33:05.995>but <00:33:06.344>using <00:33:06.695>a <00:33:07.044>TypeScript <00:33:07.395>interface.

718
00:33:08.435 --> 00:33:11.535
<00:33:08.435>So <00:33:08.590>how <00:33:08.746>to <00:33:08.901>share <00:33:09.057>the <00:33:09.212>props <00:33:09.368>definition <00:33:09.523>between <00:33:09.679>the <00:33:09.835>host

719
00:33:11.635 --> 00:33:13.055
<00:33:11.635>and <00:33:12.061>the <00:33:12.487>component <00:33:12.913>itself.

720
00:33:13.985 --> 00:33:15.235
<00:33:13.985>Yeah, <00:33:14.360>that's, <00:33:14.735>uh, <00:33:15.110>that's

721
00:33:15.235 --> 00:33:16.435
<00:33:15.235>what <00:33:15.415>I <00:33:15.594>answered <00:33:15.774>in <00:33:15.955>the <00:33:16.135>previous <00:33:16.315>one,

722
00:33:16.435 --> 00:33:19.035
<00:33:16.435>but <00:33:16.610>getting <00:33:16.784>on <00:33:16.960>to <00:33:17.135>that <00:33:17.310>is <00:33:17.485>like, <00:33:17.659>um, <00:33:17.835>uh,

723
00:33:19.105 --> 00:33:20.275
<00:33:19.105>it's <00:33:19.368>a <00:33:19.631>very <00:33:19.894>valid <00:33:20.158>question

724
00:33:20.275 --> 00:33:23.115
<00:33:20.275>because, <00:33:20.450>um, <00:33:20.625>our <00:33:20.800>whole <00:33:20.975>system <00:33:21.150>is <00:33:21.325>based <00:33:21.500>on <00:33:21.675>TypeScript

725
00:33:23.415 --> 00:33:25.515
<00:33:23.415>and <00:33:23.615>we <00:33:23.815>want, <00:33:24.014>uh, <00:33:24.215>to <00:33:24.415>be <00:33:24.615>heavily <00:33:24.815>typed.

726
00:33:25.735 --> 00:33:29.675
<00:33:25.735>So, <00:33:25.909>uh, <00:33:26.084>whenever <00:33:26.260>we <00:33:26.435>basically <00:33:26.610>should <00:33:26.784>accept <00:33:26.959>these <00:33:27.135>kind

727
00:33:29.675 --> 00:33:34.395
<00:33:29.675>of <00:33:29.815>host, <00:33:29.955>uh, <00:33:30.095>these <00:33:30.235>messages, <00:33:30.375>so <00:33:30.514>decides <00:33:30.655>what <00:33:30.794>all <00:33:30.935>it <00:33:31.075>expects

728
00:33:34.535 --> 00:33:37.155
<00:33:34.535>and <00:33:34.735>based <00:33:34.935>on <00:33:35.135>that <00:33:35.335>expectation <00:33:35.535>it <00:33:35.735>declares <00:33:35.935>some

729
00:33:37.155 --> 00:33:38.515
<00:33:37.155>types <00:33:37.563>and <00:33:37.971>those <00:33:38.379>types.

730
00:33:38.855 --> 00:33:42.155
<00:33:38.855>We, <00:33:39.010>whenever <00:33:39.166>we <00:33:39.321>kind <00:33:39.477>of, <00:33:39.632>uh, <00:33:39.788>merger <00:33:39.943>re <00:33:40.099>pull <00:33:40.255>requests,

731
00:33:42.335 --> 00:33:44.675
<00:33:42.335>we <00:33:42.685>update <00:33:43.035>this, <00:33:43.385>um, <00:33:43.735>package.

732
00:33:45.255 --> 00:33:47.115
<00:33:45.255>So <00:33:45.488>this <00:33:45.721>package <00:33:45.955>contains <00:33:46.188>all <00:33:46.421>the <00:33:46.655>type

733
00:33:47.495 --> 00:33:49.715
<00:33:47.495>and, <00:33:47.695>uh, <00:33:47.895>each <00:33:48.094>micro <00:33:48.294>front <00:33:48.495>end <00:33:48.695>imports <00:33:48.895>this

734
00:33:49.715 --> 00:33:50.915
<00:33:49.715>package <00:33:50.254>while <00:33:50.795>building.

735
00:33:51.415 --> 00:33:55.755
<00:33:51.415>And <00:33:51.570>based <00:33:51.726>on <00:33:51.881>these, <00:33:52.037>uh, <00:33:52.192>types <00:33:52.348>package, <00:33:52.503>it <00:33:52.659>knows <00:33:52.815>already

736
00:33:55.825 --> 00:33:56.835
<00:33:55.825>what <00:33:56.052>needs <00:33:56.279>to <00:33:56.506>be <00:33:56.734>sent.

737
00:33:56.935 --> 00:34:01.595
<00:33:56.935>So <00:33:57.051>with <00:33:57.168>NPM, <00:33:57.284>uh, <00:33:57.401>to <00:33:57.518>answer <00:33:57.635>it <00:33:57.751>in <00:33:57.868>short, <00:33:57.985>we <00:33:58.101>use <00:33:58.218>NPM <00:33:58.335>types

738
00:34:02.195 --> 00:34:05.235
<00:34:02.195>NPM <00:34:02.350>packages <00:34:02.506>to <00:34:02.661>share <00:34:02.817>the <00:34:02.972>types <00:34:03.128>between <00:34:03.283>uh, <00:34:03.439>app <00:34:03.595>shell

739
00:34:05.235 --> 00:34:06.355
<00:34:05.235>and <00:34:05.739>microphone <00:34:06.243>pens.

740
00:34:07.255 --> 00:34:11.245
<00:34:07.255>Thank <00:34:07.382>you. <00:34:07.509>And <00:34:07.636>the <00:34:07.764>next <00:34:07.891>one <00:34:08.018>is <00:34:08.145>if <00:34:08.273>you <00:34:08.400>update <00:34:08.527>the <00:34:08.655>example

741
00:34:11.345 --> 00:34:12.685
<00:34:11.344>button, <00:34:11.746>do <00:34:12.149>you <00:34:12.551>have

742
00:34:12.685 --> 00:34:15.685
<00:34:12.685>to <00:34:12.840>update <00:34:12.996>the <00:34:13.151>dependencies <00:34:13.307>in <00:34:13.462>all <00:34:13.618>the <00:34:13.773>micro <00:34:13.929>front <00:34:14.085>ends

743
00:34:15.685 --> 00:34:17.245
<00:34:15.685>that <00:34:15.965>are <00:34:16.245>using <00:34:16.525>the <00:34:16.804>UI <00:34:17.085>library?

744
00:34:19.545 --> 00:34:21.405
<00:34:19.545>Yes, <00:34:19.825>uh, <00:34:20.105>you, <00:34:20.385>you <00:34:20.665>need <00:34:20.945>to

745
00:34:21.475 --> 00:34:23.605
<00:34:21.475>because, <00:34:21.674>um, <00:34:21.875>that's <00:34:22.074>the <00:34:22.275>whole <00:34:22.475>point <00:34:22.674>of <00:34:22.875>it

746
00:34:23.605 --> 00:34:25.765
<00:34:23.605>because, <00:34:23.780>um, <00:34:23.955>if <00:34:24.130>you <00:34:24.304>need <00:34:24.480>to <00:34:24.655>do <00:34:24.830>a <00:34:25.005>change,

747
00:34:26.145 --> 00:34:28.245
<00:34:26.145>if <00:34:26.320>your <00:34:26.495>design <00:34:26.670>team <00:34:26.844>thinks <00:34:27.020>that, <00:34:27.195>okay, <00:34:27.370>we <00:34:27.545>need

748
00:34:28.245 --> 00:34:29.885
<00:34:28.245>to <00:34:28.444>make <00:34:28.645>a <00:34:28.844>button <00:34:29.045>bigger, <00:34:29.245>maybe <00:34:29.444>you <00:34:29.645>need

749
00:34:29.885 --> 00:34:31.485
<00:34:29.885>to <00:34:30.165>change <00:34:30.445>it <00:34:30.725>throughout <00:34:31.005>your <00:34:31.285>website.

750
00:34:31.785 --> 00:34:34.085
<00:34:31.784>So <00:34:31.924>you <00:34:32.065>have <00:34:32.205>to <00:34:32.344>change <00:34:32.484>it <00:34:32.625>in <00:34:32.764>every <00:34:32.904>micro <00:34:33.045>front <00:34:33.185>end.

751
00:34:34.645 --> 00:34:35.975
<00:34:34.645>Yeah. <00:34:35.243>Thank <00:34:35.842>you.

752
00:34:36.075 --> 00:34:37.095
<00:34:36.074>And <00:34:36.304>the <00:34:36.533>next <00:34:36.763>one <00:34:36.993>is,

753
00:34:37.505 --> 00:34:41.535
<00:34:37.505>would <00:34:37.660>you <00:34:37.816>suggest <00:34:37.971>first <00:34:38.127>implementing <00:34:38.282>the <00:34:38.438>UI <00:34:38.593>in <00:34:38.749>the <00:34:38.905>micro

754
00:34:41.535 --> 00:34:44.815
<00:34:41.534>front <00:34:41.674>end <00:34:41.815>and <00:34:41.955>then <00:34:42.094>after <00:34:42.234>testing, <00:34:42.375>moving <00:34:42.514>to <00:34:42.654>the <00:34:42.795>UI <00:34:42.935>kit?

755
00:34:46.535 --> 00:34:47.715
<00:34:46.534>Um, <00:34:47.065>that <00:34:47.597>depends.

756
00:34:47.795 --> 00:34:52.655
<00:34:47.795>I <00:34:47.922>mean, <00:34:48.049>ideally, <00:34:48.176>uh, <00:34:48.304>what <00:34:48.431>I <00:34:48.558>would <00:34:48.685>do <00:34:48.813>is <00:34:48.940>like, <00:34:49.067>um, <00:34:49.195>uh,

757
00:34:52.655 --> 00:34:53.975
<00:34:52.655>implemented <00:34:53.051>in <00:34:53.447>UI <00:34:53.842>kit

758
00:34:54.115 --> 00:34:57.215
<00:34:54.114>and <00:34:54.254>then, <00:34:54.395>uh, <00:34:54.534>get <00:34:54.674>it <00:34:54.814>into <00:34:54.955>your <00:34:55.094>micro <00:34:55.234>front <00:34:55.375>end <00:34:55.514>so

759
00:34:57.215 --> 00:34:58.455
<00:34:57.215>that <00:34:57.494>it's <00:34:57.773>not <00:34:58.052>a <00:34:58.331>rework

760
00:34:58.455 --> 00:35:00.815
<00:34:58.455>because <00:34:58.630>eventually <00:34:58.805>you <00:34:58.980>will <00:34:59.154>move <00:34:59.330>it <00:34:59.505>to <00:34:59.680>UI <00:34:59.855>kit.

761
00:35:01.275 --> 00:35:05.135
<00:35:01.275>Um, <00:35:01.402>for <00:35:01.529>us, <00:35:01.656>uh, <00:35:01.784>we <00:35:01.911>make <00:35:02.038>a <00:35:02.165>good <00:35:02.293>use <00:35:02.420>of <00:35:02.547>storybook <00:35:02.675>so

762
00:35:05.135 --> 00:35:06.695
<00:35:05.135>that <00:35:05.368>we <00:35:05.601>know <00:35:05.835>how <00:35:06.068>our <00:35:06.301>component <00:35:06.535>looks

763
00:35:06.875 --> 00:35:10.335
<00:35:06.875>and <00:35:06.991>how <00:35:07.108>it <00:35:07.225>behaves <00:35:07.341>so <00:35:07.458>that <00:35:07.575>we <00:35:07.691>already <00:35:07.808>have <00:35:07.925>a <00:35:08.041>kind <00:35:08.158>of <00:35:08.275>visual,

764
00:35:10.675 --> 00:35:13.055
<00:35:10.675>um, <00:35:10.908>visual <00:35:11.141>view <00:35:11.375>on <00:35:11.608>the <00:35:11.841>UI <00:35:12.075>kit.

765
00:35:14.885 --> 00:35:17.305
<00:35:14.885>And <00:35:15.085>how <00:35:15.285>do <00:35:15.485>you <00:35:15.685>solve, <00:35:15.885>um, <00:35:16.085>the <00:35:16.285>problem

766
00:35:17.405 --> 00:35:20.745
<00:35:17.405>of <00:35:17.560>different <00:35:17.716>versions <00:35:17.871>of <00:35:18.027>the <00:35:18.182>UI <00:35:18.338>kit <00:35:18.493>across <00:35:18.649>micro <00:35:18.805>front

767
00:35:20.805 --> 00:35:22.585
<00:35:20.805>and <00:35:21.038>is <00:35:21.271>it <00:35:21.504>the <00:35:21.738>UI <00:35:21.971>kit <00:35:22.205>shared

768
00:35:22.645 --> 00:35:24.665
<00:35:22.645>or <00:35:22.845>bundled <00:35:23.045>with <00:35:23.245>the <00:35:23.445>micro <00:35:23.645>front <00:35:23.845>end <00:35:24.045>module?

769
00:35:26.005 --> 00:35:28.425
<00:35:26.005>So, <00:35:26.205>uh, <00:35:26.405>what <00:35:26.605>we <00:35:26.805>do <00:35:27.005>is <00:35:27.205>like, <00:35:27.405>uh,

770
00:35:28.565 --> 00:35:31.585
<00:35:28.565>we <00:35:28.740>share <00:35:28.915>the <00:35:29.090>UI <00:35:29.265>kit <00:35:29.440>from <00:35:29.615>the <00:35:29.790>app <00:35:29.965>actual,

771
00:35:32.085 --> 00:35:35.945
<00:35:32.085>but <00:35:32.212>it, <00:35:32.339>uh, <00:35:32.466>we <00:35:32.594>leave <00:35:32.721>micro <00:35:32.848>front <00:35:32.975>ends <00:35:33.103>choice <00:35:33.230>what <00:35:33.357>they <00:35:33.485>want

772
00:35:35.945 --> 00:35:39.325
<00:35:35.945>to <00:35:36.072>do, <00:35:36.199>um, <00:35:36.326>if <00:35:36.454>they <00:35:36.581>want <00:35:36.708>to, <00:35:36.835>uh, <00:35:36.963>use <00:35:37.090>the <00:35:37.217>shared <00:35:37.345>version

773
00:35:39.465 --> 00:35:40.885
<00:35:39.465>or <00:35:39.720>they <00:35:39.976>want <00:35:40.231>a <00:35:40.487>new <00:35:40.743>version.

774
00:35:41.265 --> 00:35:45.405
<00:35:41.265>So <00:35:41.381>we <00:35:41.498>do <00:35:41.615>not <00:35:41.731>kind <00:35:41.848>of, <00:35:41.964>um, <00:35:42.081>bundle <00:35:42.198>the <00:35:42.315>whole <00:35:42.431>UI <00:35:42.548>kit <00:35:42.665>together,

775
00:35:45.465 --> 00:35:48.085
<00:35:45.465>but <00:35:45.665>we <00:35:45.865>do, <00:35:46.065>uh, <00:35:46.265>we <00:35:46.465>use <00:35:46.665>absolute <00:35:46.865>imports.

776
00:35:48.085 --> 00:35:50.005
<00:35:48.085>Like <00:35:48.240>for <00:35:48.396>example, <00:35:48.551>if <00:35:48.707>you <00:35:48.862>want <00:35:49.018>button <00:35:49.173>in <00:35:49.329>your <00:35:49.485>microphone,

777
00:35:50.065 --> 00:35:54.205
<00:35:50.065>you <00:35:50.205>do <00:35:50.345>not <00:35:50.485>need <00:35:50.625>to <00:35:50.765>download <00:35:50.905>the <00:35:51.045>whole, <00:35:51.185>uh, <00:35:51.325>UI <00:35:51.465>kit,

778
00:35:54.385 --> 00:35:57.045
<00:35:54.385>but <00:35:54.618>just <00:35:54.851>the <00:35:55.085>exported <00:35:55.318>but <00:35:55.551>uh, <00:35:55.785>button.

779
00:35:57.785 --> 00:35:59.805
<00:35:57.785>So, <00:35:58.018>um, <00:35:58.251>but <00:35:58.484>having <00:35:58.718>said <00:35:58.951>that, <00:35:59.185>um,

780
00:36:00.275 --> 00:36:02.205
<00:36:00.275>some <00:36:00.475>micro <00:36:00.675>frontends <00:36:00.875>actually <00:36:01.075>have <00:36:01.275>a <00:36:01.475>use <00:36:01.675>case

781
00:36:02.205 --> 00:36:04.085
<00:36:02.205>where <00:36:02.438>they <00:36:02.671>move <00:36:02.904>forward <00:36:03.138>and <00:36:03.371>they <00:36:03.605>want

782
00:36:04.085 --> 00:36:06.205
<00:36:04.085>to <00:36:04.285>have <00:36:04.485>a <00:36:04.685>newer <00:36:04.885>version <00:36:05.085>of <00:36:05.285>UI <00:36:05.485>kit

783
00:36:06.205 --> 00:36:08.605
<00:36:06.205>because <00:36:06.485>they <00:36:06.765>installed <00:36:07.045>something <00:36:07.325>in <00:36:07.605>their,

784
00:36:09.065 --> 00:36:10.445
<00:36:09.065>in <00:36:09.272>the <00:36:09.479>new <00:36:09.686>version <00:36:09.893>which <00:36:10.100>they <00:36:10.307>want

785
00:36:10.445 --> 00:36:11.805
<00:36:10.445>to <00:36:10.689>consume <00:36:10.934>in <00:36:11.179>their <00:36:11.424>micro <00:36:11.669>frontend.

786
00:36:11.985 --> 00:36:14.285
<00:36:11.985>So <00:36:12.140>we <00:36:12.296>have <00:36:12.451>both <00:36:12.607>options. <00:36:12.762>If <00:36:12.918>micro <00:36:13.073>front <00:36:13.229>didn <00:36:13.385>want

787
00:36:14.285 --> 00:36:18.365
<00:36:14.285>to <00:36:14.440>fall <00:36:14.596>back <00:36:14.751>to <00:36:14.907>the <00:36:15.062>existing <00:36:15.218>available, <00:36:15.373>um, <00:36:15.529>UI <00:36:15.685>kit,

788
00:36:18.365 --> 00:36:20.845
<00:36:18.365>they <00:36:18.540>can <00:36:18.714>do <00:36:18.890>that <00:36:19.064>and <00:36:19.240>if <00:36:19.415>they <00:36:19.589>want <00:36:19.765>something

789
00:36:20.845 --> 00:36:22.005
<00:36:20.845>new, <00:36:21.053>they <00:36:21.262>can <00:36:21.471>do <00:36:21.680>that <00:36:21.889>too.

790
00:36:23.365 --> 00:36:26.355
<00:36:23.365>Great. <00:36:23.540>And <00:36:23.714>how <00:36:23.890>do <00:36:24.064>you <00:36:24.240>compare <00:36:24.415>the <00:36:24.589>performance <00:36:24.765>versus

791
00:36:26.595 --> 00:36:27.715
<00:36:26.595>a <00:36:27.099>analytic <00:36:27.603>approach?

792
00:36:29.525 --> 00:36:32.405
<00:36:29.525>Um, <00:36:29.805>we <00:36:30.085>have <00:36:30.365>been <00:36:30.645>monitoring <00:36:30.925>it

793
00:36:32.465 --> 00:36:35.005
<00:36:32.465>and <00:36:32.620>we <00:36:32.776>don't <00:36:32.931>see <00:36:33.087>any <00:36:33.242>kind <00:36:33.398>of <00:36:33.553>downside <00:36:33.709>on <00:36:33.865>it

794
00:36:35.005 --> 00:36:36.125
<00:36:35.005>because <00:36:35.257>again, <00:36:35.509>at <00:36:35.761>the <00:36:36.013>end

795
00:36:36.125 --> 00:36:38.165
<00:36:36.125>of <00:36:36.280>the <00:36:36.436>day <00:36:36.591>it's <00:36:36.747>just <00:36:36.902>S3 <00:36:37.058>packages <00:36:37.213>which <00:36:37.369>you're <00:36:37.525>using.

796
00:36:38.315 --> 00:36:39.805
<00:36:38.315>It's <00:36:38.583>uh, <00:36:38.851>depending <00:36:39.119>on <00:36:39.387>your <00:36:39.656>cdn.

797
00:36:40.105 --> 00:36:43.365
<00:36:40.105>So <00:36:40.232>even <00:36:40.359>in <00:36:40.486>a <00:36:40.614>monolithic <00:36:40.741>app <00:36:40.868>when <00:36:40.995>you <00:36:41.123>compile <00:36:41.250>it, <00:36:41.377>it <00:36:41.505>um,

798
00:36:44.265 --> 00:36:46.005
<00:36:44.265>you <00:36:44.615>use <00:36:44.964>either <00:36:45.315>loadable <00:36:45.665>components

799
00:36:46.065 --> 00:36:48.445
<00:36:46.065>or <00:36:46.265>some <00:36:46.465>kind <00:36:46.665>of <00:36:46.865>lazy <00:36:47.065>loading <00:36:47.265>strategy, <00:36:47.465>right?

800
00:36:48.705 --> 00:36:51.285
<00:36:48.705>And <00:36:48.880>these <00:36:49.055>basically <00:36:49.230>split <00:36:49.404>the <00:36:49.580>whole <00:36:49.755>code <00:36:49.930>into <00:36:50.105>chunks

801
00:36:51.895 --> 00:36:54.005
<00:36:51.895>while <00:36:52.070>building, <00:36:52.245>because <00:36:52.420>you <00:36:52.595>don't <00:36:52.770>want <00:36:52.945>to <00:36:53.120>serve <00:36:53.295>like,

802
00:36:54.005 --> 00:36:56.765
<00:36:54.005>let's <00:36:54.180>say <00:36:54.355>one <00:36:54.530>mb <00:36:54.705>huge <00:36:54.880>file <00:36:55.055>to <00:36:55.230>your <00:36:55.405>user.

803
00:36:57.105 --> 00:36:58.765
<00:36:57.105>So <00:36:57.338>obviously <00:36:57.571>we'll <00:36:57.805>divide <00:36:58.038>it <00:36:58.271>into <00:36:58.505>chunk,

804
00:36:59.065 --> 00:37:00.205
<00:36:59.065>so <00:36:59.321>it's <00:36:59.578>the <00:36:59.834>same <00:37:00.091>process.

805
00:37:00.945 --> 00:37:03.645
<00:37:00.945>So <00:37:01.072>the <00:37:01.199>chunks <00:37:01.326>are <00:37:01.454>the <00:37:01.581>micro <00:37:01.708>front <00:37:01.835>and <00:37:01.963>in <00:37:02.090>this <00:37:02.217>case <00:37:02.345>and

806
00:37:03.845 --> 00:37:05.885
<00:37:03.845>whenever <00:37:04.020>you <00:37:04.194>load <00:37:04.370>it, <00:37:04.544>downloads <00:37:04.720>from <00:37:04.895>the <00:37:05.069>same <00:37:05.245>CDN

807
00:37:05.905 --> 00:37:08.685
<00:37:05.905>and <00:37:06.045>uh, <00:37:06.185>assemble <00:37:06.325>it <00:37:06.465>as <00:37:06.605>if <00:37:06.745>it <00:37:06.885>is <00:37:07.025>running <00:37:07.165>a <00:37:07.305>JavaScript.

808
00:37:09.985 --> 00:37:13.195
<00:37:09.985>Okay. <00:37:10.185>And <00:37:10.385>we <00:37:10.585>have <00:37:10.785>the <00:37:10.985>question <00:37:11.185>is <00:37:11.385>ate

809
00:37:13.215 --> 00:37:14.995
<00:37:13.215>or <00:37:13.495>completely <00:37:13.775>a <00:37:14.055>self <00:37:14.335>writing <00:37:14.615>tool?

810
00:37:16.195 --> 00:37:18.655
<00:37:16.195>Oh, <00:37:16.322>it's <00:37:16.449>an <00:37:16.576>open <00:37:16.704>source <00:37:16.831>tool. <00:37:16.958>We <00:37:17.085>just <00:37:17.213>hang <00:37:17.340>on <00:37:17.467>this <00:37:17.595>one.

811
00:37:19.745 --> 00:37:23.095
<00:37:19.745>Great. <00:37:19.900>Uh, <00:37:20.056>the <00:37:20.211>next <00:37:20.367>one <00:37:20.522>is, <00:37:20.678>uh, <00:37:20.833>in <00:37:20.989>the <00:37:21.145>context

812
00:37:23.155 --> 00:37:24.375
<00:37:23.155>of <00:37:23.704>developer <00:37:24.253>experience,

813
00:37:24.645 --> 00:37:26.695
<00:37:24.645>when <00:37:24.878>you <00:37:25.111>have <00:37:25.345>a <00:37:25.578>sharing <00:37:25.811>staging <00:37:26.045>environment,

814
00:37:27.155 --> 00:37:30.095
<00:37:27.155>how <00:37:27.330>did <00:37:27.505>you <00:37:27.680>prevent <00:37:27.855>data <00:37:28.030>integrity <00:37:28.205>issues <00:37:28.380>from <00:37:28.555>breaking

815
00:37:30.575 --> 00:37:32.495
<00:37:30.575>multiple <00:37:31.041>local <00:37:31.508>development <00:37:31.975>environments?

816
00:37:33.155 --> 00:37:35.855
<00:37:33.155>And <00:37:33.330>if <00:37:33.505>you <00:37:33.680>have <00:37:33.855>any <00:37:34.030>data <00:37:34.205>mutation <00:37:34.380>change <00:37:34.555>within

817
00:37:35.875 --> 00:37:36.895
<00:37:35.875>the <00:37:36.181>micro <00:37:36.487>front <00:37:36.793>end?

818
00:37:38.285 --> 00:37:39.545
<00:37:38.285>So <00:37:38.568>to <00:37:38.852>answer <00:37:39.135>first, <00:37:39.419>um,

819
00:37:39.725 --> 00:37:41.825
<00:37:39.725>we <00:37:39.924>on <00:37:40.125>purpose <00:37:40.325>use <00:37:40.525>the <00:37:40.725>staging <00:37:40.924>environment <00:37:41.125>so

820
00:37:41.825 --> 00:37:44.385
<00:37:41.825>that <00:37:41.964>we <00:37:42.105>know <00:37:42.245>if <00:37:42.384>a <00:37:42.524>micro <00:37:42.665>front <00:37:42.805>end <00:37:42.944>is <00:37:43.085>breaking <00:37:43.225>anything.

821
00:37:44.385 --> 00:37:46.785
<00:37:44.385>So <00:37:44.560>basically, <00:37:44.735>uh, <00:37:44.910>while <00:37:45.085>developing, <00:37:45.260>you <00:37:45.435>will <00:37:45.610>already <00:37:45.785>know

822
00:37:46.785 --> 00:37:49.185
<00:37:46.785>that <00:37:46.940>you <00:37:47.096>are <00:37:47.251>breaking <00:37:47.407>something <00:37:47.562>from <00:37:47.718>the <00:37:47.873>other <00:37:48.029>micro <00:37:48.185>front

823
00:37:49.185 --> 00:37:52.265
<00:37:49.185>end <00:37:49.312>because <00:37:49.439>staging <00:37:49.566>is <00:37:49.694>a <00:37:49.821>stage <00:37:49.948>where <00:37:50.075>you <00:37:50.203>kind <00:37:50.330>of <00:37:50.457>push, <00:37:50.585>uh,

824
00:37:52.525 --> 00:37:54.265
<00:37:52.525>uh, <00:37:52.805>every, <00:37:53.085>every <00:37:53.365>micro <00:37:53.645>front <00:37:53.925>end.

825
00:37:54.565 --> 00:37:55.865
<00:37:54.565>So <00:37:54.955>first <00:37:55.345>of <00:37:55.734>all,

826
00:37:55.955 --> 00:37:58.505
<00:37:55.955>it'll <00:37:56.095>be <00:37:56.235>get <00:37:56.375>caught <00:37:56.515>on <00:37:56.654>your <00:37:56.795>local <00:37:56.935>system <00:37:57.075>if <00:37:57.215>you're <00:37:57.355>breaking

827
00:37:58.565 --> 00:38:00.665
<00:37:58.565>any <00:37:58.765>other <00:37:58.965>micro <00:37:59.165>front <00:37:59.365>end, <00:37:59.565>if <00:37:59.765>not, <00:37:59.965>uh,

828
00:38:00.665 --> 00:38:02.865
<00:38:00.665>before <00:38:00.898>merging <00:38:01.131>to, <00:38:01.365>uh, <00:38:01.598>staging <00:38:01.831>you <00:38:02.065>have,

829
00:38:02.925 --> 00:38:05.345
<00:38:02.925>we <00:38:03.100>actually <00:38:03.275>have <00:38:03.450>a <00:38:03.625>pipeline <00:38:03.800>which <00:38:03.975>runs <00:38:04.150>some <00:38:04.325>tests

830
00:38:05.845 --> 00:38:08.265
<00:38:05.845>and <00:38:06.000>if <00:38:06.156>that <00:38:06.311>test <00:38:06.467>break, <00:38:06.622>you <00:38:06.778>will <00:38:06.933>not <00:38:07.089>be <00:38:07.245>able

831
00:38:08.385 --> 00:38:11.025
<00:38:08.385>to <00:38:08.665>merge <00:38:08.945>into <00:38:09.225>the <00:38:09.505>staging <00:38:09.785>environment.

832
00:38:11.085 --> 00:38:14.345
<00:38:11.085>So <00:38:11.225>that's <00:38:11.365>kind <00:38:11.505>of, <00:38:11.645>um, <00:38:11.785>on <00:38:11.925>purpose <00:38:12.065>so <00:38:12.205>that <00:38:12.345>we <00:38:12.485>kind

833
00:38:14.345 --> 00:38:15.385
<00:38:14.345>of <00:38:14.657>maintain <00:38:14.969>the <00:38:15.281>integrity

834
00:38:15.385 --> 00:38:17.825
<00:38:15.385>and <00:38:15.525>the <00:38:15.665>stability <00:38:15.805>of <00:38:15.945>the <00:38:16.085>staging <00:38:16.225>so <00:38:16.365>that <00:38:16.505>we <00:38:16.645>are, <00:38:16.785>uh,

835
00:38:17.825 --> 00:38:20.065
<00:38:17.825>unknowingly <00:38:18.058>not <00:38:18.291>breaking <00:38:18.524>any <00:38:18.758>other <00:38:18.991>microfund <00:38:19.225>then.

836
00:38:21.365 --> 00:38:23.305
<00:38:21.365>And <00:38:21.540>the <00:38:21.714>second <00:38:21.890>part <00:38:22.064>is, <00:38:22.240>uh, <00:38:22.415>integrity <00:38:22.589>of <00:38:22.765>data.

837
00:38:23.405 --> 00:38:26.265
<00:38:23.405>So <00:38:23.532>as <00:38:23.659>I <00:38:23.786>said, <00:38:23.914>like <00:38:24.041>we <00:38:24.168>keep <00:38:24.295>all <00:38:24.423>the <00:38:24.550>kind <00:38:24.677>of, <00:38:24.805>um,

838
00:38:26.665 --> 00:38:28.905
<00:38:26.665>business <00:38:26.898>logic <00:38:27.131>data <00:38:27.365>in <00:38:27.598>app <00:38:27.831>shell <00:38:28.065>itself

839
00:38:28.965 --> 00:38:30.865
<00:38:28.965>and <00:38:29.165>micro <00:38:29.365>frontend <00:38:29.565>do <00:38:29.765>not <00:38:29.965>mutate <00:38:30.165>that <00:38:30.365>data.

840
00:38:30.965 --> 00:38:33.345
<00:38:30.965>It <00:38:31.198>only <00:38:31.431>consumes <00:38:31.665>that <00:38:31.898>data <00:38:32.131>micro <00:38:32.365>frontend.

841
00:38:33.645 --> 00:38:34.825
<00:38:33.645>Uh, <00:38:33.910>that's <00:38:34.176>the <00:38:34.441>whole <00:38:34.707>point

842
00:38:34.825 --> 00:38:37.805
<00:38:34.825>of <00:38:34.980>having <00:38:35.136>this <00:38:35.291>unidirectional <00:38:35.447>flow <00:38:35.602>of <00:38:35.758>data <00:38:35.913>so <00:38:36.069>that, <00:38:36.225>um,

843
00:38:38.385 --> 00:38:40.445
<00:38:38.385>the <00:38:38.540>single <00:38:38.696>source <00:38:38.851>of <00:38:39.007>truth <00:38:39.162>for <00:38:39.318>data <00:38:39.473>is <00:38:39.629>the <00:38:39.785>app.

844
00:38:40.445 --> 00:38:41.725
<00:38:40.445>Shell, <00:38:40.733>for <00:38:41.021>example, <00:38:41.309>login <00:38:41.596>data.

845
00:38:42.145 --> 00:38:45.685
<00:38:42.145>All <00:38:42.285>the <00:38:42.425>micro <00:38:42.565>frontends <00:38:42.705>can <00:38:42.845>only <00:38:42.985>and <00:38:43.125>only <00:38:43.265>consume <00:38:43.405>this <00:38:43.545>data.

846
00:38:46.145 --> 00:38:48.285
<00:38:46.145>And <00:38:46.285>if <00:38:46.425>they <00:38:46.565>want <00:38:46.705>to <00:38:46.845>change <00:38:46.985>this <00:38:47.125>data, <00:38:47.265>they <00:38:47.405>send <00:38:47.545>signals.

847
00:38:48.285 --> 00:38:49.765
<00:38:48.285>For <00:38:48.451>example, <00:38:48.618>if <00:38:48.784>the <00:38:48.951>user <00:38:49.117>is <00:38:49.283>not <00:38:49.450>logged <00:38:49.616>in

848
00:38:49.765 --> 00:38:53.445
<00:38:49.765>and <00:38:49.881>they <00:38:49.998>want <00:38:50.115>to <00:38:50.231>log <00:38:50.348>in <00:38:50.464>data, <00:38:50.581>so <00:38:50.698>they <00:38:50.815>notify, <00:38:50.931>uh, <00:38:51.048>micro, <00:38:51.165>uh,

849
00:38:53.545 --> 00:38:55.765
<00:38:53.545>app <00:38:53.745>shell <00:38:53.945>that <00:38:54.145>please, <00:38:54.345>uh, <00:38:54.545>do <00:38:54.745>the <00:38:54.945>login

850
00:38:55.825 --> 00:38:57.245
<00:38:55.825>and <00:38:56.080>give <00:38:56.336>us <00:38:56.591>the <00:38:56.847>login <00:38:57.103>data,

851
00:38:57.585 --> 00:39:00.565
<00:38:57.585>but <00:38:57.760>they <00:38:57.935>do <00:38:58.110>not <00:38:58.285>in <00:38:58.460>actually <00:38:58.635>mutate <00:38:58.810>the <00:38:58.985>data.

852
00:39:01.635 --> 00:39:02.805
<00:39:01.635>Okay, <00:39:02.161>thank <00:39:02.688>you.

853
00:39:03.065 --> 00:39:05.045
<00:39:03.065>And <00:39:03.240>the <00:39:03.415>next <00:39:03.590>one <00:39:03.765>is, <00:39:03.940>is <00:39:04.115>there <00:39:04.290>some <00:39:04.465>library

854
00:39:05.185 --> 00:39:07.285
<00:39:05.185>for <00:39:05.535>better <00:39:05.884>organizing <00:39:06.235>the <00:39:06.585>communication

855
00:39:07.285 --> 00:39:08.685
<00:39:07.285>between <00:39:07.600>the <00:39:07.915>micro <00:39:08.230>front <00:39:08.545>ends?

856
00:39:08.915 --> 00:39:11.485
<00:39:08.915>Just <00:39:09.115>working <00:39:09.315>with <00:39:09.515>pure <00:39:09.715>events <00:39:09.915>doesn't <00:39:10.115>feel <00:39:10.315>like

857
00:39:11.565 --> 00:39:12.805
<00:39:11.565>a <00:39:11.937>very <00:39:12.308>effective <00:39:12.681>approach,

858
00:39:14.545 --> 00:39:18.285
<00:39:14.545>Um, <00:39:14.672>till <00:39:14.799>now, <00:39:14.926>I <00:39:15.054>would <00:39:15.181>say <00:39:15.308>like, <00:39:15.435>um, <00:39:15.563>it's <00:39:15.690>fine <00:39:15.817>with <00:39:15.945>us.

859
00:39:18.585 --> 00:39:20.565
<00:39:18.585>Uh, <00:39:18.785>we <00:39:18.985>didn't <00:39:19.185>find <00:39:19.385>any <00:39:19.585>problem <00:39:19.785>with <00:39:19.985>this

860
00:39:20.565 --> 00:39:22.885
<00:39:20.565>because <00:39:20.765>we <00:39:20.965>actually, <00:39:21.165>uh, <00:39:21.365>heavily <00:39:21.565>typed <00:39:21.765>this <00:39:21.965>one

861
00:39:22.985 --> 00:39:25.725
<00:39:22.985>as <00:39:23.125>I <00:39:23.265>explained, <00:39:23.405>like, <00:39:23.545>uh, <00:39:23.685>we <00:39:23.825>expose <00:39:23.965>this, <00:39:24.105>um, <00:39:24.245>NPM <00:39:24.385>packages

862
00:39:25.725 --> 00:39:28.765
<00:39:25.725>with <00:39:25.865>types, <00:39:26.005>so <00:39:26.145>we <00:39:26.285>microfund <00:39:26.424>didn't <00:39:26.565>know <00:39:26.705>what <00:39:26.845>needs <00:39:26.985>to <00:39:27.125>be,

863
00:39:29.665 --> 00:39:31.885
<00:39:29.665>uh, <00:39:29.898>sent <00:39:30.131>as <00:39:30.365>a, <00:39:30.598>as <00:39:30.831>a <00:39:31.065>signal.

864
00:39:32.505 --> 00:39:34.845
<00:39:32.505>So <00:39:32.680>right <00:39:32.855>now <00:39:33.030>we <00:39:33.205>are <00:39:33.380>pretty <00:39:33.555>happy <00:39:33.730>with <00:39:33.905>that,

865
00:39:34.905 --> 00:39:38.245
<00:39:34.905>but <00:39:35.060>um, <00:39:35.216>nothing <00:39:35.371>is <00:39:35.527>stopping <00:39:35.682>us <00:39:35.838>to <00:39:35.993>experiment <00:39:36.149>something <00:39:36.305>new.

866
00:39:38.345 --> 00:39:40.005
<00:39:38.345>Please <00:39:38.694>put <00:39:39.044>some <00:39:39.395>suggestions <00:39:39.745>in.

867
00:39:40.555 --> 00:39:42.965
<00:39:40.555>Yeah. <00:39:40.754>And <00:39:40.955>uh, <00:39:41.154>we <00:39:41.355>have <00:39:41.555>the <00:39:41.754>last <00:39:41.955>one.

868
00:39:43.385 --> 00:39:46.045
<00:39:43.385>Uh, <00:39:43.540>so <00:39:43.696>several <00:39:43.851>pro <00:39:44.007>uh, <00:39:44.162>problems <00:39:44.318>in <00:39:44.473>the <00:39:44.629>micro <00:39:44.785>front

869
00:39:46.045 --> 00:39:47.645
<00:39:46.045>and <00:39:46.745>architectural <00:39:47.445>thesis.

870
00:39:47.675 --> 00:39:49.485
<00:39:47.675>Example, <00:39:48.141>efficient <00:39:48.608>code <00:39:49.075>sharing,

871
00:39:50.075 --> 00:39:53.405
<00:39:50.075>consistency <00:39:50.308>in <00:39:50.541>testing <00:39:50.774>a <00:39:51.008>linking <00:39:51.241>environment <00:39:51.475>ing

872
00:39:54.105 --> 00:39:56.645
<00:39:54.105>so <00:39:54.338>are <00:39:54.571>solved <00:39:54.805>by <00:39:55.038>modern <00:39:55.271>monorepo <00:39:55.505>tools.

873
00:39:57.035 --> 00:39:58.525
<00:39:57.035>Have <00:39:57.303>you <00:39:57.571>look <00:39:57.839>in <00:39:58.107>these <00:39:58.376>directions

874
00:39:58.745 --> 00:40:02.045
<00:39:58.745>and <00:39:58.884>what <00:39:59.025>was <00:39:59.165>the <00:39:59.305>main <00:39:59.444>reason <00:39:59.585>for <00:39:59.725>going <00:39:59.865>with <00:40:00.005>separate <00:40:00.145>s?

875
00:40:03.295 --> 00:40:05.835
<00:40:03.295>So <00:40:03.470>this <00:40:03.645>is <00:40:03.820>more <00:40:03.995>of <00:40:04.170>a <00:40:04.345>kind <00:40:04.520>of, <00:40:04.695>um,

876
00:40:05.865 --> 00:40:08.795
<00:40:05.865>overall <00:40:06.064>not <00:40:06.265>just <00:40:06.464>tech <00:40:06.665>architecture, <00:40:06.865>how <00:40:07.064>we <00:40:07.265>want

877
00:40:08.795 --> 00:40:11.635
<00:40:08.795>to <00:40:08.995>split <00:40:09.195>the <00:40:09.395>teams <00:40:09.595>like, <00:40:09.795>um, <00:40:09.995>different <00:40:10.195>team.

878
00:40:11.695 --> 00:40:14.875
<00:40:11.695>We <00:40:11.850>want <00:40:12.006>to <00:40:12.161>have <00:40:12.317>different <00:40:12.472>teams <00:40:12.628>working <00:40:12.783>on <00:40:12.939>different <00:40:13.095>pieces

879
00:40:14.935 --> 00:40:18.035
<00:40:14.935>of <00:40:15.062>code, <00:40:15.189>so <00:40:15.316>we <00:40:15.444>want <00:40:15.571>teams <00:40:15.698>to <00:40:15.825>take <00:40:15.953>the <00:40:16.080>responsibility <00:40:16.207>of <00:40:16.335>it

880
00:40:18.035 --> 00:40:19.395
<00:40:18.035>as <00:40:18.279>as, <00:40:18.524>uh, <00:40:18.769>as <00:40:19.014>a <00:40:19.259>whole.

881
00:40:19.655 --> 00:40:23.155
<00:40:19.655>So <00:40:19.782>having <00:40:19.909>a <00:40:20.036>different <00:40:20.164>repo <00:40:20.291>makes <00:40:20.418>us <00:40:20.545>pretty <00:40:20.673>kind <00:40:20.800>of, <00:40:20.927>um, <00:40:21.055>um,

882
00:40:23.595 --> 00:40:25.275
<00:40:23.595>efficient <00:40:23.875>in <00:40:24.154>organizing <00:40:24.435>our <00:40:24.714>team <00:40:24.995>structure.

883
00:40:25.655 --> 00:40:28.955
<00:40:25.655>For <00:40:25.782>example, <00:40:25.909>um, <00:40:26.036>the <00:40:26.164>cart <00:40:26.291>team <00:40:26.418>has <00:40:26.545>access <00:40:26.673>to <00:40:26.800>the <00:40:26.927>cart <00:40:27.055>repo

884
00:40:28.955 --> 00:40:30.955
<00:40:28.955>and <00:40:29.130>they <00:40:29.305>can <00:40:29.480>do <00:40:29.654>whatever <00:40:29.830>they <00:40:30.005>want <00:40:30.180>in <00:40:30.355>there.

885
00:40:31.255 --> 00:40:34.235
<00:40:31.255>Um, <00:40:31.455>the, <00:40:31.655>the <00:40:31.855>listing <00:40:32.055>page <00:40:32.255>team <00:40:32.455>has <00:40:32.655>their

886
00:40:34.235 --> 00:40:35.595
<00:40:34.235>own <00:40:34.439>repo <00:40:34.643>and <00:40:34.846>they <00:40:35.051>can <00:40:35.255>maintain <00:40:35.459>it.

887
00:40:35.595 --> 00:40:37.915
<00:40:35.595>They <00:40:35.734>can <00:40:35.875>enforce <00:40:36.015>some <00:40:36.154>standards <00:40:36.294>which <00:40:36.435>may <00:40:36.575>not <00:40:36.714>be <00:40:36.855>kind <00:40:36.995>of,

888
00:40:38.135 --> 00:40:39.435
<00:40:38.135>um, <00:40:38.427>okay <00:40:38.720>for <00:40:39.012>everyone <00:40:39.305>else.

889
00:40:39.465 --> 00:40:42.275
<00:40:39.465>Like <00:40:39.620>for <00:40:39.776>example, <00:40:39.931>the <00:40:40.087>merging <00:40:40.242>rules, <00:40:40.398>maybe <00:40:40.553>a <00:40:40.709>small <00:40:40.865>microfund

890
00:40:42.275 --> 00:40:44.315
<00:40:42.275>and <00:40:42.508>have <00:40:42.741>only <00:40:42.975>one <00:40:43.208>merge <00:40:43.441>approval <00:40:43.675>required,

891
00:40:44.695 --> 00:40:46.755
<00:40:44.695>but <00:40:45.045>for <00:40:45.395>the <00:40:45.745>bigger <00:40:46.095>microfund

892
00:40:46.755 --> 00:40:48.395
<00:40:46.755>and <00:40:46.988>maybe <00:40:47.221>three <00:40:47.455>merge <00:40:47.688>approvals <00:40:47.921>are <00:40:48.155>required.

893
00:40:48.415 --> 00:40:50.835
<00:40:48.415>So <00:40:48.570>these <00:40:48.726>kind <00:40:48.881>of <00:40:49.037>configuration <00:40:49.192>we <00:40:49.348>can <00:40:49.503>do <00:40:49.659>having <00:40:49.815>the

894
00:40:50.835 --> 00:40:51.835
<00:40:50.835>different <00:40:51.735>repositories.

895
00:40:52.215 --> 00:40:56.275
<00:40:52.215>And <00:40:52.342>the <00:40:52.469>main <00:40:52.596>idea <00:40:52.724>was <00:40:52.851>like <00:40:52.978>to <00:40:53.105>give <00:40:53.233>a, <00:40:53.360>give <00:40:53.487>each <00:40:53.615>team

896
00:40:56.615 --> 00:40:58.835
<00:40:56.615>as <00:40:56.814>uh, <00:40:57.015>as <00:40:57.214>much <00:40:57.415>freedom <00:40:57.615>as <00:40:57.814>we <00:40:58.015>can.

897
00:40:59.455 --> 00:41:03.675
<00:40:59.455>So <00:40:59.582>that, <00:40:59.709>and <00:40:59.836>this <00:40:59.964>individual <00:41:00.091>repo <00:41:00.218>is <00:41:00.345>one <00:41:00.473>of <00:41:00.600>the <00:41:00.727>basic, <00:41:00.855>uh,

898
00:41:03.905 --> 00:41:05.795
<00:41:03.905>setting <00:41:04.255>stone <00:41:04.605>for <00:41:04.955>that <00:41:05.305>stuff.

899
00:41:06.215 --> 00:41:09.435
<00:41:06.215>So <00:41:06.355>don't, <00:41:06.495>we <00:41:06.635>just <00:41:06.775>don't <00:41:06.915>consider <00:41:07.055>the <00:41:07.195>micro <00:41:07.335>frontend <00:41:07.475>is <00:41:07.615>just

900
00:41:09.525 --> 00:41:12.275
<00:41:09.525>about <00:41:09.700>tech, <00:41:09.875>it's <00:41:10.050>about <00:41:10.225>the <00:41:10.400>whole <00:41:10.575>kind <00:41:10.750>of, <00:41:10.925>um,

901
00:41:12.785 --> 00:41:15.715
<00:41:12.785>team <00:41:12.940>division <00:41:13.096>more <00:41:13.251>on <00:41:13.407>the, <00:41:13.562>uh, <00:41:13.718>how <00:41:13.873>we <00:41:14.029>are <00:41:14.185>moving

902
00:41:15.745 --> 00:41:17.755
<00:41:15.745>with <00:41:16.025>the <00:41:16.305>kind <00:41:16.585>of, <00:41:16.865>uh, <00:41:17.145>domain.

903
00:41:17.755 --> 00:41:20.595
<00:41:17.755>Like <00:41:17.910>for <00:41:18.066>example, <00:41:18.221>this <00:41:18.377>card <00:41:18.532>domain <00:41:18.688>has <00:41:18.843>its <00:41:18.999>own <00:41:19.155>repository,

904
00:41:20.735 --> 00:41:23.475
<00:41:20.735>own <00:41:20.875>micro <00:41:21.015>frontend, <00:41:21.155>so <00:41:21.295>they <00:41:21.435>can <00:41:21.575>move <00:41:21.715>with <00:41:21.855>their <00:41:21.995>own <00:41:22.135>pace.

905
00:41:23.475 --> 00:41:25.795
<00:41:23.475>They <00:41:23.602>do <00:41:23.729>not <00:41:23.856>need <00:41:23.984>to <00:41:24.111>be <00:41:24.238>bothered <00:41:24.365>by <00:41:24.493>what <00:41:24.620>the <00:41:24.747>listing <00:41:24.875>page

906
00:41:25.795 --> 00:41:26.795
<00:41:25.795>or <00:41:26.020>other <00:41:26.245>teams <00:41:26.470>are <00:41:26.695>doing.

907
00:41:27.215 --> 00:41:30.075
<00:41:27.215>So <00:41:27.331>it's <00:41:27.448>kind <00:41:27.565>of <00:41:27.681>giving <00:41:27.798>them <00:41:27.915>more <00:41:28.031>power <00:41:28.148>so <00:41:28.265>that <00:41:28.381>they <00:41:28.498>can <00:41:28.615>move

908
00:41:30.075 --> 00:41:31.955
<00:41:30.075>with <00:41:30.355>all <00:41:30.634>the <00:41:30.915>velocity <00:41:31.194>they <00:41:31.475>have.

909
00:41:32.145 --> 00:41:35.205
<00:41:32.145>They <00:41:32.261>do <00:41:32.378>not <00:41:32.495>need <00:41:32.611>to <00:41:32.728>depend <00:41:32.845>on <00:41:32.961>other <00:41:33.078>teams <00:41:33.195>for <00:41:33.311>kind <00:41:33.428>of, <00:41:33.545>um,

910
00:41:35.965 --> 00:41:38.165
<00:41:35.965>changing <00:41:36.245>or <00:41:36.525>waiting <00:41:36.805>for <00:41:37.085>some <00:41:37.365>stuff

911
00:41:38.425 --> 00:41:40.365
<00:41:38.425>so <00:41:38.580>they <00:41:38.736>can <00:41:38.891>have <00:41:39.047>their <00:41:39.202>own <00:41:39.358>pace <00:41:39.513>and <00:41:39.669>move <00:41:39.825>on.

912
00:41:41.595 --> 00:41:44.185
<00:41:41.595>Thank <00:41:41.750>you. <00:41:41.906>Thank <00:41:42.061>you <00:41:42.217>so <00:41:42.372>much <00:41:42.528>for <00:41:42.683>your <00:41:42.839>presentation <00:41:42.995>and.