WEBVTT

1
00:00:02.775 --> 00:00:03.395
<00:00:02.775>Hi, <00:00:03.333>everyone.

2
00:00:03.405 --> 00:00:05.355
<00:00:03.405>Thank <00:00:03.579>you <00:00:03.755>for <00:00:03.929>joining <00:00:04.104>me <00:00:04.279>for <00:00:04.455>this <00:00:04.630>new <00:00:04.805>session.

3
00:00:05.605 --> 00:00:09.355
<00:00:05.605>We're <00:00:05.745>gonna <00:00:05.885>talk <00:00:06.025>about <00:00:06.165>a <00:00:06.305>topic <00:00:06.445>that <00:00:06.585>is, <00:00:06.725>uh, <00:00:06.865>really <00:00:07.005>important

4
00:00:09.455 --> 00:00:12.915
<00:00:09.455>for <00:00:09.571>me <00:00:09.688>and <00:00:09.805>that <00:00:09.921>I <00:00:10.038>do <00:00:10.155>love, <00:00:10.271>which <00:00:10.388>is <00:00:10.504>dedicated <00:00:10.621>to <00:00:10.738>dev <00:00:10.855>tools

5
00:00:13.015 --> 00:00:15.795
<00:00:13.015>and <00:00:13.365>global, <00:00:13.715>uh, <00:00:14.065>developer <00:00:14.415>experience.

6
00:00:16.545 --> 00:00:20.165
<00:00:16.545>So <00:00:16.720>we're <00:00:16.895>gonna <00:00:17.070>talk, <00:00:17.245>eh, <00:00:17.420>about <00:00:17.595>the <00:00:17.770>ethanol <00:00:17.945>sunshine

7
00:00:20.385 --> 00:00:21.885
<00:00:20.385>of <00:00:21.060>observable <00:00:21.735>pipeline.

8
00:00:22.095 --> 00:00:25.925
<00:00:22.095>Let's <00:00:22.328>go. <00:00:22.561>Uh, <00:00:22.794>to <00:00:23.028>be <00:00:23.261>short, <00:00:23.494>um,

9
00:00:26.525 --> 00:00:29.125
<00:00:26.525>I <00:00:26.758>am <00:00:26.991>especially <00:00:27.224>involved <00:00:27.458>in <00:00:27.691>developer <00:00:27.924>tools

10
00:00:29.125 --> 00:00:30.205
<00:00:29.125>and <00:00:29.611>developer <00:00:30.096>experience

11
00:00:30.205 --> 00:00:32.645
<00:00:30.205>because <00:00:30.671>I <00:00:31.138>do <00:00:31.604>think

12
00:00:32.755 --> 00:00:36.645
<00:00:32.755>that <00:00:32.930>our <00:00:33.105>curian <00:00:33.280>developer <00:00:33.455>experience <00:00:33.630>with <00:00:33.805>our <00:00:33.980>dev <00:00:34.155>tool,

13
00:00:36.645 --> 00:00:38.965
<00:00:36.645>especially <00:00:36.995>with, <00:00:37.345>uh, <00:00:37.695>web <00:00:38.045>platform

14
00:00:39.505 --> 00:00:43.565
<00:00:39.505>and <00:00:39.632>web <00:00:39.759>tools, <00:00:39.886>is <00:00:40.014>not, <00:00:40.141>uh, <00:00:40.268>the <00:00:40.395>best <00:00:40.523>that <00:00:40.650>we <00:00:40.777>could <00:00:40.905>expect.

15
00:00:44.195 --> 00:00:46.775
<00:00:44.195>Um, <00:00:44.395>because <00:00:44.595>to <00:00:44.795>be <00:00:44.995>really <00:00:45.195>short <00:00:45.395>in <00:00:45.595>it,

16
00:00:46.915 --> 00:00:50.015
<00:00:46.915>we <00:00:47.089>are <00:00:47.265>the <00:00:47.440>only <00:00:47.615>industries <00:00:47.790>that <00:00:47.964>ensuring <00:00:48.140>30 <00:00:48.315>years

17
00:00:50.015 --> 00:00:53.935
<00:00:50.015>of <00:00:50.248>backward <00:00:50.481>compatibility, <00:00:50.715>which <00:00:50.948>means <00:00:51.181>each <00:00:51.415>website

18
00:00:53.935 --> 00:00:57.495
<00:00:53.935>that <00:00:54.075>you <00:00:54.215>develop <00:00:54.355>in <00:00:54.495>the <00:00:54.635>past, <00:00:54.775>even <00:00:54.915>if <00:00:55.055>the <00:00:55.195>nineties, <00:00:55.335>um,

19
00:00:57.835 --> 00:01:00.495
<00:00:57.835>is <00:00:58.301>probably <00:00:58.768>still <00:00:59.235>relevant

20
00:01:00.635 --> 00:01:02.735
<00:01:00.635>and <00:01:00.835>still <00:01:01.035>able <00:01:01.235>to <00:01:01.434>run <00:01:01.635>in <00:01:01.835>your <00:01:02.035>browser.

21
00:01:03.435 --> 00:01:05.895
<00:01:03.435>And <00:01:03.590>we <00:01:03.746>are <00:01:03.901>probably <00:01:04.057>the <00:01:04.212>only <00:01:04.368>industry <00:01:04.523>in <00:01:04.679>the <00:01:04.835>world

22
00:01:05.925 --> 00:01:09.255
<00:01:05.925>that <00:01:06.158>is <00:01:06.391>ensuring <00:01:06.625>this <00:01:06.858>backward <00:01:07.091>compatibility <00:01:07.325>for

23
00:01:09.315 --> 00:01:12.255
<00:01:09.315>so <00:01:09.470>long <00:01:09.626>time, <00:01:09.781>and <00:01:09.937>we <00:01:10.092>do <00:01:10.248>have <00:01:10.403>to <00:01:10.559>maintain <00:01:10.715>it.

24
00:01:12.255 --> 00:01:16.495
<00:01:12.255>This <00:01:12.395>is <00:01:12.535>why <00:01:12.675>our <00:01:12.815>current <00:01:12.955>dev <00:01:13.095>tool <00:01:13.235>stack <00:01:13.375>is <00:01:13.515>probably <00:01:13.655>bloated

25
00:01:16.555 --> 00:01:19.295
<00:01:16.555>and <00:01:16.710>pre <00:01:16.866>broken, <00:01:17.021>and <00:01:17.177>we <00:01:17.332>do <00:01:17.488>have <00:01:17.643>to <00:01:17.799>fix <00:01:17.955>it.

26
00:01:19.875 --> 00:01:23.135
<00:01:19.875>We <00:01:20.050>should <00:01:20.225>know, <00:01:20.400>upgrade <00:01:20.575>our <00:01:20.750>dev <00:01:20.925>tools <00:01:21.100>right <00:01:21.275>now

27
00:01:23.135 --> 00:01:25.815
<00:01:23.135>because <00:01:23.335>this <00:01:23.535>dev <00:01:23.735>stack <00:01:23.935>is <00:01:24.135>not <00:01:24.335>working <00:01:24.535>anymore

28
00:01:25.875 --> 00:01:28.555
<00:01:25.875>and <00:01:26.075>it's <00:01:26.275>not <00:01:26.475>really <00:01:26.675>gonna <00:01:26.875>through <00:01:27.075>a <00:01:27.275>proper

29
00:01:28.815 --> 00:01:31.155
<00:01:28.815>and, <00:01:29.164>um, <00:01:29.515>Google <00:01:29.865>developer <00:01:30.215>experience.

30
00:01:31.155 --> 00:01:32.155
<00:01:31.155>So <00:01:31.305>we <00:01:31.455>need <00:01:31.605>to <00:01:31.755>make <00:01:31.905>it <00:01:32.055>better,

31
00:01:33.075 --> 00:01:34.255
<00:01:33.075>and <00:01:33.429>it <00:01:33.783>should <00:01:34.137>be

32
00:01:34.835 --> 00:01:38.175
<00:01:34.835>no <00:01:34.975>more <00:01:35.115>than <00:01:35.255>just <00:01:35.395>replacing <00:01:35.535>one <00:01:35.675>file <00:01:35.815>in <00:01:35.955>your <00:01:36.095>code <00:01:36.235>base.

33
00:01:38.235 --> 00:01:42.965
<00:01:38.235>So <00:01:38.351>let's <00:01:38.468>see <00:01:38.585>how <00:01:38.701>we <00:01:38.818>could, <00:01:38.935>um, <00:01:39.051>the <00:01:39.168>fact <00:01:39.285>is, <00:01:39.401>I, <00:01:39.518>I'm <00:01:39.635>hold

34
00:01:43.225 --> 00:01:47.965
<00:01:43.225>and <00:01:43.399>the <00:01:43.574>first <00:01:43.750>website <00:01:43.925>I <00:01:44.100>released <00:01:44.274>was <00:01:44.449>in <00:01:44.625>1996,

35
00:01:48.465 --> 00:01:52.075
<00:01:48.465>and <00:01:48.640>at <00:01:48.815>this <00:01:48.990>time <00:01:49.165>it <00:01:49.340>was <00:01:49.515>just <00:01:49.690>a <00:01:49.865>bunch

36
00:01:52.075 --> 00:01:57.005
<00:01:52.075>of <00:01:52.275>HTML <00:01:52.475>file <00:01:52.675>with <00:01:52.875>a <00:01:53.075>few, <00:01:53.275>few <00:01:53.475>styles

37
00:01:57.005 --> 00:01:58.525
<00:01:57.005>that <00:01:57.278>will <00:01:57.552>become <00:01:57.825>CSS <00:01:58.099>after <00:01:58.373>that

38
00:01:58.705 --> 00:02:00.885
<00:01:58.705>and <00:01:58.985>probably <00:01:59.265>a <00:01:59.545>bit <00:01:59.825>of <00:02:00.105>JavaScript

39
00:02:00.985 --> 00:02:04.485
<00:02:00.985>or <00:02:01.125>there <00:02:01.265>was <00:02:01.405>Flash <00:02:01.545>at <00:02:01.685>some <00:02:01.825>point <00:02:01.965>or <00:02:02.105>something <00:02:02.245>like <00:02:02.385>that.

40
00:02:04.705 --> 00:02:08.645
<00:02:04.705>But <00:02:04.832>yeah, <00:02:04.959>it <00:02:05.086>was, <00:02:05.214>it <00:02:05.341>was, <00:02:05.468>um, <00:02:05.595>it <00:02:05.723>was <00:02:05.850>pretty <00:02:05.977>bare <00:02:06.105>just

41
00:02:08.645 --> 00:02:09.645
<00:02:08.645>because, <00:02:09.545>um,

42
00:02:09.905 --> 00:02:13.485
<00:02:09.905>we <00:02:10.080>don't <00:02:10.255>had <00:02:10.430>any <00:02:10.604>fancy <00:02:10.780>frameworks <00:02:10.955>and <00:02:11.130>fancy <00:02:11.305>tools.

43
00:02:13.665 --> 00:02:16.205
<00:02:13.665>We <00:02:13.898>just <00:02:14.131>had, <00:02:14.364>um, <00:02:14.598>these <00:02:14.831>basic <00:02:15.065>foundations

44
00:02:16.305 --> 00:02:18.805
<00:02:16.305>and <00:02:16.480>it <00:02:16.655>was <00:02:16.830>enough <00:02:17.005>to, <00:02:17.180>to <00:02:17.355>publish <00:02:17.530>our <00:02:17.705>websites.

45
00:02:18.985 --> 00:02:22.605
<00:02:18.985>But <00:02:19.125>right <00:02:19.265>now, <00:02:19.405>when <00:02:19.545>we <00:02:19.685>are <00:02:19.825>talking <00:02:19.965>about <00:02:20.105>adding <00:02:20.245>a <00:02:20.385>web

46
00:02:22.605 --> 00:02:24.765
<00:02:22.605>application <00:02:22.804>and <00:02:23.005>building <00:02:23.204>a <00:02:23.405>big, <00:02:23.605>big <00:02:23.804>web <00:02:24.005>app,

47
00:02:24.955 --> 00:02:28.605
<00:02:24.954>this <00:02:25.130>is <00:02:25.304>something, <00:02:25.480>um, <00:02:25.654>um, <00:02:25.829>really <00:02:26.005>more <00:02:26.179>advanced <00:02:26.355>that

48
00:02:28.635 --> 00:02:31.525
<00:02:28.635>what <00:02:28.774>we <00:02:28.915>are, <00:02:29.054>we <00:02:29.195>were <00:02:29.334>doing, <00:02:29.475>uh, <00:02:29.614>30 <00:02:29.755>years, <00:02:29.894>uh, <00:02:30.035>ago.

49
00:02:31.665 --> 00:02:35.805
<00:02:31.665>So, <00:02:31.840>um, <00:02:32.015>the <00:02:32.190>modern <00:02:32.364>frontend <00:02:32.540>development <00:02:32.715>stack <00:02:32.890>is <00:02:33.065>probably

50
00:02:35.805 --> 00:02:36.965
<00:02:35.805>something <00:02:36.153>more <00:02:36.501>like <00:02:36.849>that.

51
00:02:37.055 --> 00:02:38.845
<00:02:37.055>We've <00:02:37.405>got <00:02:37.755>Template <00:02:38.105>and <00:02:38.455>Giants

52
00:02:38.845 --> 00:02:41.605
<00:02:38.845>because <00:02:39.078>we <00:02:39.311>are <00:02:39.545>not <00:02:39.778>writing <00:02:40.011>HTML <00:02:40.245>anymore.

53
00:02:42.105 --> 00:02:46.005
<00:02:42.105>We <00:02:42.304>are, <00:02:42.505>um, <00:02:42.704>we're <00:02:42.905>writing <00:02:43.105>advanced <00:02:43.304>templates <00:02:43.505>with,

54
00:02:46.855 --> 00:02:50.615
<00:02:46.855>I <00:02:47.030>know, <00:02:47.204>N <00:02:47.380>Jug <00:02:47.554>or <00:02:47.730>PEG <00:02:47.905>or, <00:02:48.079>or, <00:02:48.255>uh,

55
00:02:50.795 --> 00:02:53.215
<00:02:50.795>or <00:02:51.261>other <00:02:51.728>different <00:02:52.195>template

56
00:02:53.415 --> 00:02:54.575
<00:02:53.415>languages <00:02:53.676>and <00:02:53.936>templates <00:02:54.197>and <00:02:54.459>giants.

57
00:02:54.985 --> 00:02:57.455
<00:02:54.985>We've <00:02:55.335>got, <00:02:55.685>um, <00:02:56.035>CSS <00:02:56.385>pre-processor

58
00:02:57.455 --> 00:02:59.645
<00:02:57.454>because <00:02:57.688>we <00:02:57.921>are <00:02:58.154>not <00:02:58.388>writing <00:02:58.621>CSS <00:02:58.855>anymore,

59
00:02:59.745 --> 00:03:03.895
<00:02:59.745>but <00:02:59.945>we're <00:03:00.145>writing <00:03:00.345>Advanced <00:03:00.545>Syntax <00:03:00.745>that <00:03:00.945>take <00:03:01.145>care

60
00:03:04.035 --> 00:03:05.455
<00:03:04.035>of <00:03:04.354>our <00:03:04.674>CSS <00:03:04.993>for <00:03:05.313>us.

61
00:03:06.155 --> 00:03:10.495
<00:03:06.155>Um, <00:03:06.295>and <00:03:06.435>if <00:03:06.575>we <00:03:06.715>don't <00:03:06.855>use <00:03:06.995>SaaS <00:03:07.135>or <00:03:07.275>still <00:03:07.415>use, <00:03:07.555>or,

62
00:03:10.595 --> 00:03:15.575
<00:03:10.595>or <00:03:10.750>advanced <00:03:10.906>pre-process, <00:03:11.061>um, <00:03:11.217>for <00:03:11.372>CSS, <00:03:11.528>we <00:03:11.683>are <00:03:11.839>using <00:03:11.995>advanced

63
00:03:16.215 --> 00:03:19.655
<00:03:16.215>CSS <00:03:16.495>frameworks, <00:03:16.775>um, <00:03:17.055>with, <00:03:17.335>at <00:03:17.615>classes

64
00:03:20.215 --> 00:03:23.295
<00:03:20.215>approach <00:03:20.495>like <00:03:20.775>TCSS <00:03:21.055>or <00:03:21.335>something <00:03:21.615>else.

65
00:03:24.155 --> 00:03:27.055
<00:03:24.155>So, <00:03:24.355>um, <00:03:24.555>so <00:03:24.755>it's <00:03:24.955>not <00:03:25.155>just <00:03:25.355>writing <00:03:25.555>CSS.

66
00:03:27.055 --> 00:03:29.095
<00:03:27.055>And <00:03:27.255>then <00:03:27.455>after <00:03:27.655>that <00:03:27.855>we've <00:03:28.055>got <00:03:28.255>past <00:03:28.455>CSS,

67
00:03:29.095 --> 00:03:32.655
<00:03:29.095>which <00:03:29.270>perform <00:03:29.445>some <00:03:29.620>improvements, <00:03:29.795>our, <00:03:29.970>our, <00:03:30.145>uh, <00:03:30.320>final <00:03:30.495>styles

68
00:03:32.655 --> 00:03:35.965
<00:03:32.655>and <00:03:32.810>final <00:03:32.966>markups, <00:03:33.121>so <00:03:33.277>we <00:03:33.432>could, <00:03:33.588>um, <00:03:33.743>we <00:03:33.899>could <00:03:34.055>improve

69
00:03:35.995 --> 00:03:37.525
<00:03:35.995>what <00:03:36.224>we <00:03:36.454>ship <00:03:36.683>to <00:03:36.913>our <00:03:37.142>end <00:03:37.372>user.

70
00:03:37.705 --> 00:03:40.885
<00:03:37.704>So <00:03:37.821>we, <00:03:37.938>we <00:03:38.054>do <00:03:38.171>have <00:03:38.288>to <00:03:38.404>plug <00:03:38.521>this <00:03:38.638>tool <00:03:38.755>to <00:03:38.871>our <00:03:38.988>stack <00:03:39.105>too.

71
00:03:41.495 --> 00:03:45.845
<00:03:41.495>We're <00:03:41.670>using <00:03:41.845>reactive <00:03:42.020>frameworks <00:03:42.195>like <00:03:42.370>React <00:03:42.545>or <00:03:42.720>VGS <00:03:42.895>or,

72
00:03:45.945 --> 00:03:50.275
<00:03:45.945>or <00:03:46.084>VE <00:03:46.225>or <00:03:46.364>Solid <00:03:46.505>or, <00:03:46.644>or, <00:03:46.785>or <00:03:46.924>other <00:03:47.065>framework <00:03:47.204>like <00:03:47.345>that.

73
00:03:50.335 --> 00:03:54.875
<00:03:50.335>So, <00:03:50.490>um, <00:03:50.646>so <00:03:50.801>we <00:03:50.957>are <00:03:51.112>working <00:03:51.268>on, <00:03:51.423>on <00:03:51.579>components, <00:03:51.735>um,

74
00:03:55.685 --> 00:03:59.035
<00:03:55.685>components, <00:03:55.965>uh, <00:03:56.245>development <00:03:56.525>driven, <00:03:56.805>uh, <00:03:57.085>applications,

75
00:03:59.175 --> 00:04:03.355
<00:03:59.175>and <00:03:59.315>not <00:03:59.455>just <00:03:59.595>only <00:03:59.735>working <00:03:59.875>on <00:04:00.015>a <00:04:00.155>few <00:04:00.295>benches <00:04:00.435>of <00:04:00.575>HTML.

76
00:04:03.975 --> 00:04:05.675
<00:04:03.975>Um, <00:04:04.325>we <00:04:04.674>need <00:04:05.025>to <00:04:05.375>pack

77
00:04:05.735 --> 00:04:09.195
<00:04:05.735>and <00:04:05.910>to <00:04:06.085>bundle <00:04:06.260>everything <00:04:06.435>to <00:04:06.610>just <00:04:06.785>serve <00:04:06.960>final <00:04:07.135>assets

78
00:04:09.195 --> 00:04:11.275
<00:04:09.195>that <00:04:09.394>are, <00:04:09.595>uh, <00:04:09.795>optimized <00:04:09.995>to <00:04:10.195>our <00:04:10.394>end <00:04:10.595>user

79
00:04:11.705 --> 00:04:13.355
<00:04:11.705>because <00:04:12.405>performance <00:04:13.105>matters.

80
00:04:14.245 --> 00:04:16.985
<00:04:14.245>And, <00:04:14.420>um, <00:04:14.595>and <00:04:14.770>this <00:04:14.945>is <00:04:15.120>not <00:04:15.295>the <00:04:15.470>same <00:04:15.645>thing

81
00:04:16.985 --> 00:04:18.345
<00:04:16.985>that <00:04:17.393>just <00:04:17.801>performing <00:04:18.209>HTML.

82
00:04:18.345 --> 00:04:20.425
<00:04:18.345>And <00:04:18.545>because <00:04:18.745>we <00:04:18.945>are <00:04:19.145>in <00:04:19.345>a <00:04:19.545>development <00:04:19.745>environment,

83
00:04:20.925 --> 00:04:23.585
<00:04:20.925>we <00:04:21.125>are <00:04:21.325>using <00:04:21.525>some, <00:04:21.725>uh, <00:04:21.925>web <00:04:22.125>dev <00:04:22.325>servers

84
00:04:23.585 --> 00:04:26.505
<00:04:23.585>with <00:04:23.864>hot <00:04:24.145>module <00:04:24.424>reloading <00:04:24.705>that <00:04:24.984>ensure

85
00:04:26.505 --> 00:04:28.465
<00:04:26.505>that <00:04:26.738>we <00:04:26.971>could <00:04:27.205>modify <00:04:27.438>our <00:04:27.671>code <00:04:27.905>base

86
00:04:28.605 --> 00:04:30.425
<00:04:28.605>or <00:04:28.955>modify, <00:04:29.305>modify <00:04:29.655>our <00:04:30.005>data

87
00:04:31.245 --> 00:04:35.645
<00:04:31.245>and <00:04:31.445>the <00:04:31.645>content <00:04:31.845>is, <00:04:32.045>uh, <00:04:32.245>um, <00:04:32.445>is <00:04:32.645>refreshed,

88
00:04:36.025 --> 00:04:38.845
<00:04:36.025>uh, <00:04:36.258>accordingly <00:04:36.491>in <00:04:36.724>the <00:04:36.958>brother <00:04:37.191>without <00:04:37.424>having

89
00:04:38.905 --> 00:04:40.445
<00:04:38.905>to <00:04:39.251>refresh <00:04:39.597>the <00:04:39.944>whole <00:04:40.291>brother

90
00:04:40.505 --> 00:04:42.525
<00:04:40.505>and <00:04:40.680>the <00:04:40.855>whole <00:04:41.030>state <00:04:41.205>of <00:04:41.380>your <00:04:41.555>application <00:04:41.730>each <00:04:41.905>time.

91
00:04:43.245 --> 00:04:44.685
<00:04:43.245>I, <00:04:43.430>I, <00:04:43.615>I <00:04:43.800>don't <00:04:43.985>say <00:04:44.170>this <00:04:44.355>is <00:04:44.541>bad.

92
00:04:44.805 --> 00:04:46.845
<00:04:44.805>I, <00:04:45.005>I <00:04:45.205>guess <00:04:45.405>it's <00:04:45.605>pretty, <00:04:45.805>pretty <00:04:46.005>good <00:04:46.205>for

93
00:04:46.955 --> 00:04:50.045
<00:04:46.955>what <00:04:47.094>we <00:04:47.234>are <00:04:47.375>doing <00:04:47.515>right <00:04:47.655>now <00:04:47.794>with <00:04:47.935>the, <00:04:48.075>with <00:04:48.215>web <00:04:48.354>technologies,

94
00:04:50.925 --> 00:04:54.045
<00:04:50.925>but <00:04:51.065>I <00:04:51.205>mean <00:04:51.345>that <00:04:51.485>this <00:04:51.625>is <00:04:51.765>not <00:04:51.905>the <00:04:52.045>web <00:04:52.185>technologies <00:04:52.325>anymore,

95
00:04:54.415 --> 00:04:56.805
<00:04:54.415>where <00:04:54.648>we're <00:04:54.881>still <00:04:55.115>using <00:04:55.348>the <00:04:55.581>same <00:04:55.815>foundation

96
00:04:56.875 --> 00:04:59.045
<00:04:56.875>that <00:04:57.225>are <00:04:57.575>H-T-M-L-C-S-S <00:04:57.925>and <00:04:58.275>JavaScript,

97
00:04:59.185 --> 00:05:01.445
<00:04:59.185>but <00:04:59.465>we're <00:04:59.745>not <00:05:00.025>using <00:05:00.305>them <00:05:00.585>anymore.

98
00:05:01.505 --> 00:05:04.685
<00:05:01.505>We <00:05:01.705>are <00:05:01.905>using <00:05:02.105>Advanced <00:05:02.305>tool <00:05:02.505>and <00:05:02.705>Advanced <00:05:02.905>Languages

99
00:05:04.745 --> 00:05:08.845
<00:05:04.745>and <00:05:04.885>syntactic <00:05:05.025>sugar <00:05:05.165>over <00:05:05.305>everything <00:05:05.445>just <00:05:05.585>to <00:05:05.725>help <00:05:05.865>us <00:05:06.005>to <00:05:06.145>build

100
00:05:09.425 --> 00:05:11.925
<00:05:09.425>better <00:05:09.658>product <00:05:09.891>for <00:05:10.125>our <00:05:10.358>final, <00:05:10.591>final <00:05:10.825>users.

101
00:05:12.345 --> 00:05:16.445
<00:05:12.345>And <00:05:12.485>because <00:05:12.625>we <00:05:12.765>want <00:05:12.905>to <00:05:13.045>produce, <00:05:13.185>um, <00:05:13.325>a <00:05:13.465>better <00:05:13.605>final, <00:05:13.745>uh,

102
00:05:16.515 --> 00:05:19.565
<00:05:16.515>application <00:05:16.715>and <00:05:16.914>final <00:05:17.115>experience <00:05:17.315>for <00:05:17.515>our <00:05:17.715>end <00:05:17.914>users,

103
00:05:20.185 --> 00:05:23.125
<00:05:20.185>we <00:05:20.325>are <00:05:20.465>now, <00:05:20.605>uh, <00:05:20.745>bloated <00:05:20.885>in <00:05:21.025>our, <00:05:21.165>in <00:05:21.305>our <00:05:21.445>dev <00:05:21.585>stack

104
00:05:23.125 --> 00:05:26.045
<00:05:23.125>because <00:05:23.300>everything, <00:05:23.475>everything <00:05:23.650>is <00:05:23.825>a <00:05:24.000>mess <00:05:24.175>to <00:05:24.350>just <00:05:24.525>maintain

105
00:05:26.185 --> 00:05:29.205
<00:05:26.185>and <00:05:26.340>to <00:05:26.496>configure <00:05:26.651>and <00:05:26.807>into <00:05:26.962>have <00:05:27.118>everything <00:05:27.273>working <00:05:27.429>in <00:05:27.585>place.

106
00:05:30.485 --> 00:05:32.985
<00:05:30.485>So <00:05:30.660>right <00:05:30.835>now, <00:05:31.010>when <00:05:31.185>I <00:05:31.360>I <00:05:31.535>clone <00:05:31.710>new <00:05:31.885>project

107
00:05:33.165 --> 00:05:36.025
<00:05:33.165>or <00:05:33.320>create <00:05:33.476>a <00:05:33.631>new <00:05:33.787>application, <00:05:33.942>I, <00:05:34.098>I, <00:05:34.253>I <00:05:34.409>still <00:05:34.565>have

108
00:05:36.025 --> 00:05:38.225
<00:05:36.025>to <00:05:36.258>first <00:05:36.491>start <00:05:36.724>with <00:05:36.958>an <00:05:37.191>NPM <00:05:37.424>install

109
00:05:38.445 --> 00:05:40.025
<00:05:38.445>and <00:05:38.724>it <00:05:39.005>open <00:05:39.284>something <00:05:39.565>like <00:05:39.844>that,

110
00:05:41.195 --> 00:05:45.695
<00:05:41.195>and <00:05:41.322>we <00:05:41.449>just <00:05:41.576>have <00:05:41.704>to <00:05:41.831>wait <00:05:41.958>in <00:05:42.085>the <00:05:42.213>Finley <00:05:42.340>to <00:05:42.467>load, <00:05:42.594>um,

111
00:05:46.025 --> 00:05:49.495
<00:05:46.025>maybe <00:05:46.164>the <00:05:46.304>half <00:05:46.445>of <00:05:46.585>the <00:05:46.724>whole <00:05:46.864>internet <00:05:47.005>in <00:05:47.145>our <00:05:47.284>local <00:05:47.424>computer

112
00:05:49.925 --> 00:05:53.135
<00:05:49.925>just <00:05:50.080>to <00:05:50.236>have <00:05:50.391>the, <00:05:50.547>this <00:05:50.702>deep <00:05:50.858>dive <00:05:51.013>of <00:05:51.169>the <00:05:51.325>modules

113
00:05:53.135 --> 00:05:55.495
<00:05:53.135>that <00:05:53.310>we <00:05:53.485>will <00:05:53.659>be <00:05:53.835>using <00:05:54.010>for <00:05:54.185>our <00:05:54.360>final <00:05:54.534>application.

114
00:05:55.525 --> 00:05:56.815
<00:05:55.525>This <00:05:55.815>is, <00:05:56.105>this <00:05:56.395>is <00:05:56.686>insane.

115
00:05:57.485 --> 00:06:00.085
<00:05:57.485>I, <00:05:57.640>I <00:05:57.796>mean, <00:05:57.951>I, <00:05:58.107>I <00:05:58.262>don't <00:05:58.418>want <00:05:58.573>to <00:05:58.729>load <00:05:58.885>the,

116
00:06:00.105 --> 00:06:01.885
<00:06:00.105>the <00:06:00.385>overall <00:06:00.665>internet <00:06:00.945>in <00:06:01.225>my <00:06:01.505>computer.

117
00:06:02.125 --> 00:06:03.765
<00:06:02.125>I <00:06:02.405>don't <00:06:02.685>want <00:06:02.965>to <00:06:03.245>configure <00:06:03.525>stuff.

118
00:06:03.885 --> 00:06:08.025
<00:06:03.885>I <00:06:04.025>don't <00:06:04.164>want <00:06:04.305>to <00:06:04.445>to, <00:06:04.585>to <00:06:04.724>just <00:06:04.865>grab <00:06:05.005>my <00:06:05.145>hair <00:06:05.284>just

119
00:06:08.025 --> 00:06:10.465
<00:06:08.025>because <00:06:08.375>of <00:06:08.724>this <00:06:09.075>done <00:06:09.424>things.

120
00:06:10.665 --> 00:06:11.945
<00:06:10.665>I <00:06:10.953>just <00:06:11.241>want <00:06:11.529>to <00:06:11.817>code

121
00:06:12.405 --> 00:06:17.025
<00:06:12.405>and <00:06:12.532>I <00:06:12.659>want <00:06:12.786>to <00:06:12.914>produce <00:06:13.041>some <00:06:13.168>final, <00:06:13.295>um, <00:06:13.423>content <00:06:13.550>for <00:06:13.677>my, <00:06:13.804>uh,

122
00:06:17.085 --> 00:06:19.585
<00:06:17.085>end <00:06:17.284>users <00:06:17.484>by <00:06:17.685>producing <00:06:17.885>some <00:06:18.085>code <00:06:18.284>in <00:06:18.484>my

123
00:06:19.585 --> 00:06:20.705
<00:06:19.585>application, <00:06:19.921>and <00:06:20.257>that's <00:06:20.592>all.

124
00:06:21.315 --> 00:06:24.805
<00:06:21.315>So <00:06:21.490>we <00:06:21.665>do <00:06:21.840>have <00:06:22.015>to, <00:06:22.190>to <00:06:22.365>make <00:06:22.540>things <00:06:22.715>better.

125
00:06:25.065 --> 00:06:27.005
<00:06:25.065>And <00:06:25.344>everything <00:06:25.625>of <00:06:25.905>that <00:06:26.185>happens <00:06:26.465>just

126
00:06:27.005 --> 00:06:30.085
<00:06:27.005>because <00:06:27.238>we <00:06:27.471>do <00:06:27.705>compile <00:06:27.938>websites <00:06:28.171>right <00:06:28.405>now.

127
00:06:30.505 --> 00:06:34.725
<00:06:30.505>So <00:06:30.645>why <00:06:30.784>do <00:06:30.925>we <00:06:31.065>compile <00:06:31.205>websites <00:06:31.344>rather <00:06:31.485>than <00:06:31.625>just <00:06:31.765>having <00:06:31.905>a

128
00:06:34.845 --> 00:06:38.085
<00:06:34.845>bunch <00:06:35.045>of <00:06:35.245>HTML <00:06:35.445>and <00:06:35.645>TSS <00:06:35.845>and <00:06:36.045>JavaScript <00:06:36.245>tool?

129
00:06:38.835 --> 00:06:42.335
<00:06:38.835>Um, <00:06:38.974>the <00:06:39.114>fact <00:06:39.255>is, <00:06:39.395>our <00:06:39.534>dev <00:06:39.674>tools <00:06:39.815>are <00:06:39.955>responsible <00:06:40.094>of <00:06:40.234>this

130
00:06:42.355 --> 00:06:43.615
<00:06:42.355>as <00:06:42.733>this <00:06:43.111>compilation <00:06:43.489>process

131
00:06:43.615 --> 00:06:47.815
<00:06:43.615>because, <00:06:43.815>um, <00:06:44.015>in <00:06:44.215>the <00:06:44.415>past <00:06:44.615>when <00:06:44.815>I <00:06:45.015>wanted

132
00:06:47.875 --> 00:06:51.375
<00:06:47.875>to <00:06:48.108>just <00:06:48.341>produce, <00:06:48.575>um, <00:06:48.808>um, <00:06:49.041>new <00:06:49.275>content

133
00:06:52.195 --> 00:06:56.295
<00:06:52.195>and <00:06:52.335>save <00:06:52.474>it <00:06:52.615>in <00:06:52.755>my, <00:06:52.895>my <00:06:53.034>brother <00:06:53.175>directly, <00:06:53.315>I <00:06:53.455>just <00:06:53.594>had

134
00:06:56.295 --> 00:07:00.815
<00:06:56.295>to <00:06:56.470>write <00:06:56.645>a <00:06:56.820>few, <00:06:56.995>uh, <00:06:57.170>content <00:06:57.345>of, <00:06:57.520>uh, <00:06:57.695>HTML,

135
00:07:01.365 --> 00:07:03.975
<00:07:01.365>just, <00:07:01.598>which <00:07:01.831>was <00:07:02.065>a, <00:07:02.298>a <00:07:02.531>basic <00:07:02.765>markup.

136
00:07:04.535 --> 00:07:08.695
<00:07:04.535>I <00:07:04.651>just <00:07:04.768>had <00:07:04.885>to <00:07:05.001>include, <00:07:05.118>um, <00:07:05.235>uh, <00:07:05.351>just <00:07:05.468>a <00:07:05.585>simple <00:07:05.701>script <00:07:05.818>in <00:07:05.935>it.

137
00:07:09.075 --> 00:07:13.455
<00:07:09.075>And <00:07:09.215>with <00:07:09.354>the <00:07:09.495>script, <00:07:09.635>I <00:07:09.775>will <00:07:09.914>simply <00:07:10.055>had <00:07:10.195>an <00:07:10.335>event <00:07:10.474>listener,

138
00:07:13.835 --> 00:07:15.575
<00:07:13.835>uh, <00:07:14.114>probably <00:07:14.395>un <00:07:14.674>done, <00:07:14.955>content <00:07:15.234>loaded.

139
00:07:15.955 --> 00:07:19.215
<00:07:15.955>So, <00:07:16.094>so <00:07:16.234>I <00:07:16.375>will <00:07:16.515>ensure <00:07:16.655>that <00:07:16.794>my <00:07:16.935>script <00:07:17.075>will <00:07:17.215>be <00:07:17.354>executed,

140
00:07:19.585 --> 00:07:22.095
<00:07:19.585>where <00:07:19.818>my <00:07:20.051>DOMA <00:07:20.284>will <00:07:20.518>finally <00:07:20.751>be <00:07:20.984>loaded

141
00:07:22.755 --> 00:07:26.135
<00:07:22.755>and, <00:07:22.910>um, <00:07:23.066>I <00:07:23.221>will <00:07:23.377>perform <00:07:23.532>the <00:07:23.688>different <00:07:23.843>kind <00:07:23.999>of <00:07:24.155>things

142
00:07:26.135 --> 00:07:28.655
<00:07:26.135>that <00:07:26.290>I <00:07:26.446>want <00:07:26.601>to, <00:07:26.757>to <00:07:26.912>apply <00:07:27.068>to <00:07:27.223>my <00:07:27.379>final <00:07:27.534>do.

143
00:07:29.775 --> 00:07:34.035
<00:07:29.775>And <00:07:29.914>that's <00:07:30.054>all. <00:07:30.195>It <00:07:30.335>was <00:07:30.474>easy, <00:07:30.614>simple, <00:07:30.755>but <00:07:30.895>it <00:07:31.034>was <00:07:31.174>only

144
00:07:34.035 --> 00:07:38.415
<00:07:34.034>because <00:07:34.162>we, <00:07:34.289>we <00:07:34.416>just <00:07:34.544>had <00:07:34.671>a <00:07:34.798>few <00:07:34.925>amount <00:07:35.053>of <00:07:35.180>JavaScript <00:07:35.307>to <00:07:35.434>serve

145
00:07:38.515 --> 00:07:40.375
<00:07:38.515>and <00:07:38.748>to <00:07:38.981>execute <00:07:39.215>on, <00:07:39.448>on <00:07:39.681>our <00:07:39.914>webpage,

146
00:07:40.625 --> 00:07:42.415
<00:07:40.625>which <00:07:40.975>is <00:07:41.325>not <00:07:41.675>relevant <00:07:42.025>anymore

147
00:07:42.415 --> 00:07:45.335
<00:07:42.415>because <00:07:42.648>our <00:07:42.881>applications <00:07:43.115>right <00:07:43.348>now <00:07:43.581>are <00:07:43.815>just

148
00:07:45.445 --> 00:07:47.495
<00:07:45.445>extensively <00:07:46.145>using <00:07:46.844>JavaScript.

149
00:07:47.955 --> 00:07:52.935
<00:07:47.955>So <00:07:48.082>we <00:07:48.209>do <00:07:48.336>have <00:07:48.464>to, <00:07:48.591>to <00:07:48.718>make <00:07:48.845>things, <00:07:48.973>um, <00:07:49.100>easier <00:07:49.227>to <00:07:49.354>implement

150
00:07:52.995 --> 00:07:55.815
<00:07:52.995>and <00:07:53.195>to <00:07:53.395>go <00:07:53.595>for, <00:07:53.795>um, <00:07:53.995>the <00:07:54.195>final <00:07:54.395>developers.

151
00:07:55.875 --> 00:07:57.855
<00:07:55.875>So <00:07:56.155>we <00:07:56.435>started <00:07:56.715>the <00:07:56.995>first <00:07:57.275>concept,

152
00:07:57.995 --> 00:08:01.055
<00:07:57.995>the <00:07:58.228>first <00:07:58.461>pattern <00:07:58.695>were <00:07:58.928>the <00:07:59.161>modules, <00:07:59.395>um,

153
00:08:01.125 --> 00:08:04.235
<00:08:01.125>because <00:08:01.475>transcript <00:08:01.825>by <00:08:02.175>its <00:08:02.525>nature

154
00:08:04.865 --> 00:08:08.395
<00:08:04.865>just <00:08:05.020>polluting <00:08:05.176>everything <00:08:05.331>is <00:08:05.487>the <00:08:05.642>global <00:08:05.798>space <00:08:05.953>each <00:08:06.109>time <00:08:06.265>you

155
00:08:08.555 --> 00:08:09.715
<00:08:08.555>declare <00:08:08.903>a <00:08:09.251>new <00:08:09.599>variable.

156
00:08:09.855 --> 00:08:13.075
<00:08:09.855>So, <00:08:10.088>uh, <00:08:10.321>you <00:08:10.555>would <00:08:10.788>probably <00:08:11.021>want <00:08:11.255>to

157
00:08:14.235 --> 00:08:17.085
<00:08:14.235>isolate <00:08:14.435>properly <00:08:14.635>the <00:08:14.835>different <00:08:15.035>part <00:08:15.235>of <00:08:15.435>your <00:08:15.635>application,

158
00:08:17.405 --> 00:08:19.205
<00:08:17.405>starting <00:08:17.684>to <00:08:17.965>have, <00:08:18.244>uh, <00:08:18.525>some <00:08:18.804>kind

159
00:08:19.205 --> 00:08:21.485
<00:08:19.205>of <00:08:19.555>complementation <00:08:19.905>of <00:08:20.255>your <00:08:20.604>application.

160
00:08:21.705 --> 00:08:24.805
<00:08:21.705>So <00:08:21.905>we <00:08:22.104>started <00:08:22.305>with <00:08:22.505>this, <00:08:22.705>uh, <00:08:22.905>pattern <00:08:23.104>module,

161
00:08:24.805 --> 00:08:26.765
<00:08:24.805>which <00:08:25.038>is <00:08:25.271>based <00:08:25.505>on <00:08:25.738>the <00:08:25.971>EFI <00:08:26.205>pattern,

162
00:08:26.815 --> 00:08:30.365
<00:08:26.815>which <00:08:27.015>is <00:08:27.215>the <00:08:27.415>immediately <00:08:27.615>executed <00:08:27.815>function <00:08:28.015>in <00:08:28.215>JavaScript.

163
00:08:31.305 --> 00:08:34.525
<00:08:31.305>In <00:08:31.480>this <00:08:31.655>one, <00:08:31.830>I <00:08:32.005>simply <00:08:32.180>declare <00:08:32.355>a <00:08:32.530>function, <00:08:32.705>and

164
00:08:34.525 --> 00:08:39.445
<00:08:34.525>because <00:08:34.664>I <00:08:34.804>just <00:08:34.944>wrap <00:08:35.084>it <00:08:35.225>in, <00:08:35.365>in, <00:08:35.505>in <00:08:35.645>parenthesis, <00:08:35.784>I <00:08:35.924>could,

165
00:08:39.785 --> 00:08:43.195
<00:08:39.784>uh, <00:08:40.018>execute <00:08:40.251>it <00:08:40.485>at <00:08:40.718>the <00:08:40.951>declaration <00:08:41.184>time.

166
00:08:43.375 --> 00:08:46.055
<00:08:43.375>So <00:08:43.725>I <00:08:44.075>doing, <00:08:44.425>so <00:08:44.775>I

167
00:08:47.315 --> 00:08:49.965
<00:08:47.315>isolate <00:08:47.781>different, <00:08:48.248>uh, <00:08:48.715>Constance

168
00:08:50.025 --> 00:08:52.685
<00:08:50.025>and <00:08:50.225>the <00:08:50.425>different <00:08:50.625>element <00:08:50.824>declared <00:08:51.025>in <00:08:51.225>this <00:08:51.425>function,

169
00:08:52.865 --> 00:08:54.045
<00:08:52.865>in <00:08:53.219>the <00:08:53.573>function <00:08:53.926>itself.

170
00:08:54.585 --> 00:08:58.245
<00:08:54.585>And <00:08:54.725>it <00:08:54.865>could, <00:08:55.005>it <00:08:55.145>couldn't, <00:08:55.285>um, <00:08:55.425>go <00:08:55.565>outside <00:08:55.705>of <00:08:55.845>the <00:08:55.985>module.

171
00:08:58.865 --> 00:09:02.525
<00:08:58.865>It, <00:08:59.005>it <00:08:59.145>was <00:08:59.285>the <00:08:59.425>first <00:08:59.565>basic <00:08:59.705>modules <00:08:59.845>that, <00:08:59.985>that <00:09:00.125>we <00:09:00.265>made.

172
00:09:02.745 --> 00:09:04.125
<00:09:02.745>But <00:09:03.159>by <00:09:03.573>doing <00:09:03.987>so,

173
00:09:04.635 --> 00:09:09.215
<00:09:04.635>because <00:09:04.810>we, <00:09:04.985>we <00:09:05.160>had <00:09:05.335>the, <00:09:05.510>the <00:09:05.685>possibility <00:09:05.860>to <00:09:06.035>just,

174
00:09:09.755 --> 00:09:13.615
<00:09:09.755>uh, <00:09:09.988>distribute <00:09:10.221>the <00:09:10.455>modules <00:09:10.688>everywhere, <00:09:10.921>um, <00:09:11.155>we

175
00:09:14.275 --> 00:09:18.185
<00:09:14.275>needed <00:09:14.508>a <00:09:14.741>way <00:09:14.975>to <00:09:15.208>bundle <00:09:15.441>a <00:09:15.675>product

176
00:09:18.405 --> 00:09:21.025
<00:09:18.405>and <00:09:18.638>every <00:09:18.871>modules <00:09:19.105>in <00:09:19.338>our <00:09:19.571>final <00:09:19.805>application

177
00:09:21.085 --> 00:09:22.865
<00:09:21.085>to <00:09:21.318>save <00:09:21.551>it <00:09:21.785>to <00:09:22.018>our <00:09:22.251>final <00:09:22.485>user.

178
00:09:23.205 --> 00:09:25.545
<00:09:23.205>So <00:09:23.405>we <00:09:23.605>started <00:09:23.805>with <00:09:24.005>a <00:09:24.205>tool <00:09:24.405>named <00:09:24.605>browserify.

179
00:09:26.275 --> 00:09:30.095
<00:09:26.275>And <00:09:26.475>Browserify <00:09:26.675>was <00:09:26.875>responsible <00:09:27.074>to <00:09:27.275>grab <00:09:27.475>any <00:09:27.675>part

180
00:09:30.095 --> 00:09:34.215
<00:09:30.095>of <00:09:30.270>your <00:09:30.445>application, <00:09:30.620>any <00:09:30.795>module, <00:09:30.970>and <00:09:31.145>to <00:09:31.320>pack <00:09:31.495>them

181
00:09:34.435 --> 00:09:37.615
<00:09:34.435>and <00:09:34.590>distribute <00:09:34.746>them, <00:09:34.901>um, <00:09:35.057>in <00:09:35.212>a <00:09:35.368>format <00:09:35.523>that <00:09:35.679>was <00:09:35.834>able

182
00:09:37.675 --> 00:09:39.455
<00:09:37.675>for <00:09:37.875>your <00:09:38.074>brother <00:09:38.275>to <00:09:38.474>execute <00:09:38.675>and <00:09:38.875>to <00:09:39.074>you.

183
00:09:41.615 --> 00:09:45.435
<00:09:41.615>And <00:09:41.790>after <00:09:41.965>that, <00:09:42.140>um, <00:09:42.315>we <00:09:42.490>had <00:09:42.665>new <00:09:42.840>tools <00:09:43.015>that,

184
00:09:45.505 --> 00:09:46.595
<00:09:45.505>that <00:09:45.995>finally <00:09:46.486>appeared.

185
00:09:46.695 --> 00:09:50.715
<00:09:46.695>Uh, <00:09:46.895>like <00:09:47.095>the <00:09:47.295>transpires, <00:09:47.495>um, <00:09:47.695>there <00:09:47.895>Syntaxes, <00:09:48.095>um,

186
00:09:50.845 --> 00:09:54.075
<00:09:50.845>especially <00:09:51.078>the, <00:09:51.311>the <00:09:51.545>TypeScript <00:09:51.778>one <00:09:52.011>are, <00:09:52.245>um,

187
00:09:54.075 --> 00:09:57.075
<00:09:54.075>heavily <00:09:54.308>narrated <00:09:54.541>from, <00:09:54.775>uh, <00:09:55.008>active <00:09:55.241>script, <00:09:55.475>uh,

188
00:09:57.555 --> 00:10:00.555
<00:09:57.555>accidentally <00:09:57.755>from, <00:09:57.954>from <00:09:58.155>Flash <00:09:58.354>and <00:09:58.555>from <00:09:58.755>craft <00:09:58.954>script.

189
00:10:00.935 --> 00:10:05.265
<00:10:00.935>Um, <00:10:01.090>it's <00:10:01.246>better <00:10:01.401>because <00:10:01.557>it's, <00:10:01.712>um, <00:10:01.868>it's <00:10:02.023>an <00:10:02.179>improvement <00:10:02.334>on

190
00:10:05.845 --> 00:10:08.625
<00:10:05.845>the <00:10:06.045>way <00:10:06.245>we <00:10:06.445>are <00:10:06.645>writing <00:10:06.845>our <00:10:07.045>final <00:10:07.245>code.

191
00:10:08.965 --> 00:10:12.225
<00:10:08.965>Um, <00:10:09.140>TypeScript <00:10:09.315>is, <00:10:09.490>is <00:10:09.665>really <00:10:09.840>good, <00:10:10.015>especially <00:10:10.190>for <00:10:10.365>people

192
00:10:12.225 --> 00:10:14.345
<00:10:12.225>that <00:10:12.425>are <00:10:12.625>not <00:10:12.825>coming <00:10:13.025>from <00:10:13.225>the <00:10:13.425>web <00:10:13.625>ecosystem

193
00:10:14.805 --> 00:10:17.185
<00:10:14.805>and <00:10:15.038>not <00:10:15.271>coming <00:10:15.505>from, <00:10:15.738>uh, <00:10:15.971>JavaScript <00:10:16.204>itself,

194
00:10:17.205 --> 00:10:18.865
<00:10:17.205>but <00:10:17.555>coming <00:10:17.905>from <00:10:18.255>another <00:10:18.605>languages

195
00:10:19.405 --> 00:10:23.675
<00:10:19.405>and <00:10:19.532>that <00:10:19.659>they <00:10:19.786>want <00:10:19.914>to, <00:10:20.041>to <00:10:20.168>put <00:10:20.295>a <00:10:20.423>foot <00:10:20.550>in, <00:10:20.677>in <00:10:20.805>the,

196
00:10:24.015 --> 00:10:25.995
<00:10:24.015>in <00:10:24.365>the, <00:10:24.715>the <00:10:25.064>web <00:10:25.415>ecosystem.

197
00:10:26.335 --> 00:10:27.475
<00:10:26.335>So <00:10:26.540>Taps <00:10:26.745>script <00:10:26.950>is <00:10:27.155>really <00:10:27.361>good,

198
00:10:27.615 --> 00:10:30.835
<00:10:27.615>but, <00:10:27.790>uh, <00:10:27.965>having <00:10:28.140>Taps <00:10:28.315>script <00:10:28.490>means <00:10:28.665>that <00:10:28.840>we <00:10:29.015>need

199
00:10:30.835 --> 00:10:32.035
<00:10:30.835>to <00:10:31.195>transpire <00:10:31.555>the <00:10:31.915>content

200
00:10:32.035 --> 00:10:34.395
<00:10:32.035>because <00:10:32.235>the <00:10:32.435>final <00:10:32.635>cut <00:10:32.834>that <00:10:33.035>is <00:10:33.235>finally <00:10:33.435>executed

201
00:10:34.495 --> 00:10:38.035
<00:10:34.495>by <00:10:34.650>the <00:10:34.806>brother <00:10:34.961>and <00:10:35.117>by <00:10:35.272>the, <00:10:35.428>the <00:10:35.583>virtual <00:10:35.739>machine, <00:10:35.895>uh,

202
00:10:38.255 --> 00:10:40.355
<00:10:38.255>and <00:10:38.455>the <00:10:38.655>the <00:10:38.855>runtime <00:10:39.055>engine <00:10:39.255>in <00:10:39.455>the <00:10:39.655>brother

203
00:10:41.055 --> 00:10:42.275
<00:10:41.055>is <00:10:41.603>only <00:10:42.153>JavaScript.

204
00:10:42.275 --> 00:10:44.875
<00:10:42.275>This <00:10:42.430>is <00:10:42.586>the <00:10:42.741>only <00:10:42.897>language <00:10:43.052>that <00:10:43.208>the <00:10:43.363>brother <00:10:43.519>could <00:10:43.675>understand.

205
00:10:45.015 --> 00:10:48.835
<00:10:45.015>So <00:10:45.215>any <00:10:45.415>other <00:10:45.615>language <00:10:45.814>needs <00:10:46.015>to <00:10:46.215>be <00:10:46.415>transpired,

206
00:10:48.895 --> 00:10:50.595
<00:10:48.895>so <00:10:49.245>converted <00:10:49.595>to <00:10:49.944>the <00:10:50.295>JavaScript.

207
00:10:51.365 --> 00:10:53.825
<00:10:51.365>So <00:10:51.565>what <00:10:51.765>we <00:10:51.965>are <00:10:52.165>writing <00:10:52.365>is <00:10:52.565>not <00:10:52.765>what

208
00:10:54.515 --> 00:10:56.335
<00:10:54.515>is <00:10:54.795>now <00:10:55.074>executed <00:10:55.355>in <00:10:55.635>the <00:10:55.915>brother,

209
00:10:56.875 --> 00:11:00.775
<00:10:56.875>and <00:10:57.030>this <00:10:57.186>is <00:10:57.341>especially <00:10:57.497>true <00:10:57.652>when <00:10:57.808>you <00:10:57.963>consider <00:10:58.119>the <00:10:58.275>brother

210
00:11:00.915 --> 00:11:01.975
<00:11:00.915>as <00:11:01.233>a <00:11:01.551>virtual <00:11:01.869>machine.

211
00:11:02.275 --> 00:11:06.535
<00:11:02.275>So <00:11:02.382>because <00:11:02.490>we <00:11:02.598>are <00:11:02.705>now <00:11:02.813>in <00:11:02.921>a <00:11:03.028>broader, <00:11:03.136>as <00:11:03.244>a <00:11:03.351>VM <00:11:03.459>era, <00:11:03.567>which <00:11:03.675>mean

212
00:11:06.695 --> 00:11:09.535
<00:11:06.695>that <00:11:06.928>we, <00:11:07.161>we <00:11:07.395>do <00:11:07.628>not <00:11:07.861>develop <00:11:08.095>website

213
00:11:09.635 --> 00:11:13.855
<00:11:09.635>and <00:11:09.790>simple <00:11:09.946>content <00:11:10.101>anymore, <00:11:10.257>we <00:11:10.412>are <00:11:10.568>developing, <00:11:10.723>um, <00:11:10.879>some <00:11:11.035>kind

214
00:11:13.855 --> 00:11:18.575
<00:11:13.855>of <00:11:14.010>advanced <00:11:14.166>application <00:11:14.321>where <00:11:14.477>HTML <00:11:14.632>is <00:11:14.788>here <00:11:14.943>to, <00:11:15.099>to, <00:11:15.255>um,

215
00:11:19.355 --> 00:11:22.095
<00:11:19.355>define <00:11:19.555>your <00:11:19.755>interface <00:11:19.955>and <00:11:20.155>CSS <00:11:20.355>to <00:11:20.555>style <00:11:20.755>it

216
00:11:22.095 --> 00:11:25.135
<00:11:22.095>and <00:11:22.250>JavaScript <00:11:22.406>to <00:11:22.561>perform <00:11:22.717>the <00:11:22.872>logic <00:11:23.028>and <00:11:23.183>the, <00:11:23.339>and, <00:11:23.495>um,

217
00:11:25.635 --> 00:11:27.095
<00:11:25.635>and <00:11:25.963>the <00:11:26.292>application <00:11:26.620>by <00:11:26.949>itself.

218
00:11:27.675 --> 00:11:30.055
<00:11:27.675>So <00:11:27.875>your <00:11:28.074>brother <00:11:28.275>is <00:11:28.474>a <00:11:28.675>virtual <00:11:28.875>machine, <00:11:29.074>and

219
00:11:30.055 --> 00:11:31.415
<00:11:30.055>because <00:11:30.361>we <00:11:30.666>need <00:11:30.973>performances <00:11:31.279>and

220
00:11:31.415 --> 00:11:34.655
<00:11:31.415>because <00:11:31.555>we <00:11:31.694>need <00:11:31.834>to <00:11:31.974>have <00:11:32.115>a <00:11:32.255>better <00:11:32.395>model, <00:11:32.535>especially <00:11:32.675>in <00:11:32.814>term

221
00:11:34.655 --> 00:11:38.735
<00:11:34.655>of <00:11:34.888>security, <00:11:35.121>we <00:11:35.355>finally <00:11:35.588>know, <00:11:35.821>develop <00:11:36.055>part

222
00:11:38.735 --> 00:11:40.655
<00:11:38.735>of <00:11:39.015>your <00:11:39.295>application <00:11:39.575>using <00:11:39.855>web <00:11:40.135>assembly,

223
00:11:40.785 --> 00:11:44.575
<00:11:40.785>which <00:11:40.940>is <00:11:41.096>another <00:11:41.251>language <00:11:41.407>that <00:11:41.562>could <00:11:41.718>be <00:11:41.873>understood <00:11:42.029>by, <00:11:42.185>um,

224
00:11:44.795 --> 00:11:47.055
<00:11:44.795>the <00:11:44.950>border <00:11:45.106>by <00:11:45.261>itself <00:11:45.417>and <00:11:45.572>the <00:11:45.728>runtime <00:11:45.883>in <00:11:46.039>the <00:11:46.194>border.

225
00:11:48.135 --> 00:11:50.635
<00:11:48.135>And <00:11:48.485>web <00:11:48.835>assembly <00:11:49.185>is <00:11:49.535>nothing

226
00:11:51.765 --> 00:11:53.645
<00:11:51.765>more <00:11:52.115>than <00:11:52.465>just <00:11:52.814>binary <00:11:53.165>format.

227
00:11:53.865 --> 00:11:56.965
<00:11:53.865>So <00:11:54.020>this <00:11:54.176>time <00:11:54.331>we <00:11:54.487>really <00:11:54.642>do <00:11:54.798>need <00:11:54.953>to <00:11:55.109>compile <00:11:55.265>it.

228
00:11:57.425 --> 00:12:01.805
<00:11:57.425>We <00:11:57.541>need <00:11:57.658>to <00:11:57.775>come <00:11:57.891>from <00:11:58.008>other <00:11:58.125>languages <00:11:58.241>like <00:11:58.358>Rust <00:11:58.474>or <00:11:58.591>go, <00:11:58.708>or <00:11:58.824>C

229
00:12:01.825 --> 00:12:05.605
<00:12:01.825>or <00:12:01.952>c <00:12:02.079>plus <00:12:02.206>plus <00:12:02.334>and <00:12:02.461>really <00:12:02.588>compile <00:12:02.715>it <00:12:02.843>using <00:12:02.970>a <00:12:03.097>compiler <00:12:03.225>like

230
00:12:05.765 --> 00:12:08.725
<00:12:05.765>E-L-L-V-M <00:12:05.998>to <00:12:06.231>produce <00:12:06.465>a <00:12:06.698>final <00:12:06.931>binary <00:12:07.165>files

231
00:12:08.725 --> 00:12:10.285
<00:12:08.725>that <00:12:08.958>could <00:12:09.191>be <00:12:09.425>executed <00:12:09.658>in <00:12:09.891>the <00:12:10.125>product.

232
00:12:11.145 --> 00:12:13.805
<00:12:11.145>So <00:12:11.345>we <00:12:11.545>do <00:12:11.745>need <00:12:11.944>to <00:12:12.145>compile <00:12:12.345>the <00:12:12.545>content

233
00:12:13.985 --> 00:12:16.125
<00:12:13.985>and <00:12:14.218>we <00:12:14.451>need <00:12:14.685>to <00:12:14.918>compile <00:12:15.151>our <00:12:15.385>websites

234
00:12:16.395 --> 00:12:20.165
<00:12:16.395>because <00:12:16.550>we <00:12:16.706>do <00:12:16.861>have <00:12:17.017>the <00:12:17.172>modules <00:12:17.328>with <00:12:17.483>the <00:12:17.639>different <00:12:17.795>formats.

235
00:12:20.265 --> 00:12:23.885
<00:12:20.265>And <00:12:20.405>for <00:12:20.545>a <00:12:20.685>long <00:12:20.824>time, <00:12:20.965>we <00:12:21.105>didn't <00:12:21.245>have, <00:12:21.385>um, <00:12:21.525>the <00:12:21.665>support

236
00:12:23.905 --> 00:12:27.605
<00:12:23.905>for <00:12:24.045>modules <00:12:24.185>in <00:12:24.324>the <00:12:24.464>broader, <00:12:24.605>um, <00:12:24.745>we <00:12:24.885>do <00:12:25.025>need <00:12:25.165>to <00:12:25.305>have

237
00:12:28.125 --> 00:12:30.885
<00:12:28.125>advanced <00:12:28.358>syntax <00:12:28.591>results <00:12:28.825>and <00:12:29.058>just <00:12:29.291>bare <00:12:29.525>JavaScript.

238
00:12:31.185 --> 00:12:34.445
<00:12:31.185>So <00:12:31.340>we <00:12:31.496>need, <00:12:31.651>uh, <00:12:31.807>to <00:12:31.962>use <00:12:32.118>the <00:12:32.273>ERs <00:12:32.429>we <00:12:32.584>need

239
00:12:34.445 --> 00:12:37.245
<00:12:34.445>to <00:12:34.678>support <00:12:34.911>new <00:12:35.145>format <00:12:35.378>like <00:12:35.611>web <00:12:35.845>assembly,

240
00:12:37.545 --> 00:12:40.125
<00:12:37.545>and <00:12:37.778>we <00:12:38.011>still <00:12:38.245>have <00:12:38.478>this <00:12:38.711>performance <00:12:38.944>issue

241
00:12:40.125 --> 00:12:44.125
<00:12:40.125>because <00:12:40.325>we <00:12:40.525>still <00:12:40.725>need <00:12:40.925>to, <00:12:41.125>to, <00:12:41.325>uh, <00:12:41.525>produce

242
00:12:44.145 --> 00:12:48.085
<00:12:44.145>for <00:12:44.319>our <00:12:44.495>final <00:12:44.670>user, <00:12:44.845>um, <00:12:45.020>final <00:12:45.194>set <00:12:45.370>of <00:12:45.545>assets

243
00:12:48.085 --> 00:12:50.925
<00:12:48.085>that <00:12:48.318>could <00:12:48.551>be <00:12:48.785>easily <00:12:49.018>served, <00:12:49.251>easily <00:12:49.485>executed,

244
00:12:51.225 --> 00:12:56.085
<00:12:51.225>and, <00:12:51.400>um, <00:12:51.575>quickly, <00:12:51.750>uh, <00:12:51.925>rendered <00:12:52.100>in <00:12:52.275>our <00:12:52.450>final <00:12:52.625>browser.

245
00:12:56.265 --> 00:12:58.355
<00:12:56.265>So <00:12:56.731>Ecos <00:12:57.198>performance <00:12:57.665>matters.

246
00:12:58.935 --> 00:13:02.035
<00:12:58.935>We, <00:12:59.090>we, <00:12:59.246>we <00:12:59.401>can <00:12:59.557>trade <00:12:59.712>with, <00:12:59.868>with <00:13:00.023>this <00:13:00.179>one, <00:13:00.334>um,

247
00:13:02.655 --> 00:13:03.875
<00:13:02.655>and <00:13:02.929>with <00:13:03.204>our <00:13:03.478>end <00:13:03.753>user.

248
00:13:03.975 --> 00:13:07.965
<00:13:03.975>So <00:13:04.150>the <00:13:04.325>web <00:13:04.500>evolved, <00:13:04.675>we <00:13:04.850>still <00:13:05.025>use <00:13:05.200>basic <00:13:05.375>foundations

249
00:13:07.965 --> 00:13:10.285
<00:13:07.965>that <00:13:08.315>are <00:13:08.665>H-T-M-L-C-S-S <00:13:09.015>and <00:13:09.365>JavaScript

250
00:13:10.285 --> 00:13:13.925
<00:13:10.285>because <00:13:10.459>we <00:13:10.635>do <00:13:10.810>need <00:13:10.985>to <00:13:11.160>ensure <00:13:11.334>this <00:13:11.510>backward <00:13:11.685>compatibility.

251
00:13:14.265 --> 00:13:17.045
<00:13:14.265>So <00:13:14.405>this <00:13:14.545>is <00:13:14.685>your <00:13:14.824>new <00:13:14.965>languages <00:13:15.105>that <00:13:15.245>are <00:13:15.385>available <00:13:15.525>for <00:13:15.665>us,

252
00:13:17.385 --> 00:13:20.565
<00:13:17.385>but <00:13:17.665>we <00:13:17.944>needed <00:13:18.225>eye <00:13:18.505>level <00:13:18.785>tools

253
00:13:20.665 --> 00:13:23.245
<00:13:20.665>to <00:13:21.015>improve <00:13:21.365>our <00:13:21.714>whole <00:13:22.064>developer.

254
00:13:23.825 --> 00:13:25.845
<00:13:23.825>So <00:13:24.058>we <00:13:24.291>build <00:13:24.525>a <00:13:24.758>lot <00:13:24.991>of <00:13:25.225>tools.

255
00:13:26.565 --> 00:13:29.705
<00:13:26.565>So <00:13:26.798>it's, <00:13:27.031>uh, <00:13:27.265>2 <00:13:27.498>0 <00:13:27.731>21, <00:13:27.965>maybe,

256
00:13:29.835 --> 00:13:32.625
<00:13:29.835>maybe <00:13:30.185>20, <00:13:30.535>22, <00:13:30.885>uh, <00:13:31.235>soon.

257
00:13:32.885 --> 00:13:35.795
<00:13:32.885>And <00:13:33.118>this <00:13:33.351>is <00:13:33.585>a <00:13:33.818>web <00:13:34.051>building <00:13:34.285>pipeline.

258
00:13:35.885 --> 00:13:39.185
<00:13:35.885>Right <00:13:36.165>now <00:13:36.444>we <00:13:36.725>have <00:13:37.005>kind <00:13:37.285>of

259
00:13:39.955 --> 00:13:43.605
<00:13:39.955>usual <00:13:40.155>suspect, <00:13:40.355>we <00:13:40.555>still <00:13:40.755>have <00:13:40.955>web <00:13:41.155>pack <00:13:41.355>everywhere

260
00:13:43.605 --> 00:13:46.285
<00:13:43.605>because <00:13:43.760>we <00:13:43.916>need <00:13:44.071>to <00:13:44.227>pack <00:13:44.382>every <00:13:44.538>part <00:13:44.693>of <00:13:44.849>our <00:13:45.005>application.

261
00:13:46.825 --> 00:13:50.845
<00:13:46.825>Um, <00:13:47.000>web <00:13:47.175>package <00:13:47.350>is <00:13:47.525>responsible <00:13:47.700>to <00:13:47.875>grab <00:13:48.050>JavaScript <00:13:48.225>assets,

262
00:13:51.505 --> 00:13:55.125
<00:13:51.505>uh, <00:13:51.738>images, <00:13:51.971>ties, <00:13:52.205>everything <00:13:52.438>that <00:13:52.671>we <00:13:52.905>need

263
00:13:55.585 --> 00:13:58.165
<00:13:55.585>to <00:13:55.785>have <00:13:55.985>a <00:13:56.185>final <00:13:56.385>application, <00:13:56.585>pack <00:13:56.785>them <00:13:56.985>together

264
00:13:58.625 --> 00:14:02.285
<00:13:58.625>and <00:13:58.780>serve <00:13:58.936>this <00:13:59.091>pack, <00:13:59.247>uh, <00:13:59.402>content <00:13:59.558>to <00:13:59.713>our <00:13:59.869>final <00:14:00.025>users.

265
00:14:03.845 --> 00:14:05.065
<00:14:03.845>We <00:14:04.119>probably <00:14:04.394>have <00:14:04.668>roll <00:14:04.943>up

266
00:14:05.285 --> 00:14:08.745
<00:14:05.285>or <00:14:05.459>parcel, <00:14:05.635>uh, <00:14:05.810>behind <00:14:05.985>Webpack <00:14:06.160>to <00:14:06.334>bundle <00:14:06.510>the <00:14:06.685>logic.

267
00:14:08.925 --> 00:14:10.505
<00:14:08.925>So <00:14:09.204>to <00:14:09.484>bundle <00:14:09.765>the <00:14:10.045>JavaScript <00:14:10.324>file,

268
00:14:10.755 --> 00:14:13.745
<00:14:10.755>which <00:14:10.895>means <00:14:11.035>rather <00:14:11.175>than <00:14:11.314>just <00:14:11.455>having <00:14:11.595>a <00:14:11.735>bunch <00:14:11.875>of <00:14:12.015>modules <00:14:12.155>to,

269
00:14:13.805 --> 00:14:18.505
<00:14:13.805>to <00:14:13.960>our, <00:14:14.116>uh, <00:14:14.271>final <00:14:14.427>Brother, <00:14:14.582>um, <00:14:14.738>to <00:14:14.893>our <00:14:15.049>end <00:14:15.204>users,

270
00:14:19.125 --> 00:14:22.625
<00:14:19.125>we <00:14:19.280>are <00:14:19.436>bundling <00:14:19.591>every <00:14:19.747>part <00:14:19.902>of <00:14:20.058>the <00:14:20.213>application <00:14:20.369>by, <00:14:20.525>um,

271
00:14:23.325 --> 00:14:27.815
<00:14:23.325>pushing <00:14:23.500>them <00:14:23.675>together <00:14:23.850>and <00:14:24.025>producing <00:14:24.200>a <00:14:24.375>single <00:14:24.550>JavaScript <00:14:24.725>file

272
00:14:27.955 --> 00:14:31.515
<00:14:27.955>or <00:14:28.155>a <00:14:28.355>bunch <00:14:28.555>chunks <00:14:28.755>of, <00:14:28.955>of <00:14:29.155>JavaScript <00:14:29.355>files

273
00:14:31.515 --> 00:14:33.715
<00:14:31.515>that <00:14:31.715>will <00:14:31.915>be <00:14:32.115>executed <00:14:32.314>by, <00:14:32.515>by <00:14:32.715>the <00:14:32.915>brother.

274
00:14:33.855 --> 00:14:36.325
<00:14:33.855>Uh, <00:14:34.135>at <00:14:34.415>the <00:14:34.695>end <00:14:34.975>roll <00:14:35.255>up

275
00:14:36.325 --> 00:14:39.645
<00:14:36.325>and <00:14:36.480>parcel <00:14:36.636>will <00:14:36.791>probably <00:14:36.947>be <00:14:37.102>run <00:14:37.258>by <00:14:37.413>Webpack <00:14:37.569>by <00:14:37.725>itself

276
00:14:39.645 --> 00:14:42.325
<00:14:39.645>during <00:14:39.800>the <00:14:39.956>building <00:14:40.111>process, <00:14:40.267>but <00:14:40.422>we <00:14:40.578>still <00:14:40.733>need <00:14:40.889>roll <00:14:41.045>up

277
00:14:42.325 --> 00:14:45.805
<00:14:42.325>and <00:14:42.500>parcel <00:14:42.675>to <00:14:42.850>perform <00:14:43.025>the <00:14:43.200>transformation <00:14:43.375>upon <00:14:43.550>the <00:14:43.725>modules.

278
00:14:46.485 --> 00:14:49.945
<00:14:46.485>Um, <00:14:46.640>we <00:14:46.796>need <00:14:46.951>some <00:14:47.107>testing <00:14:47.262>shoots <00:14:47.418>that <00:14:47.573>like <00:14:47.729>probably <00:14:47.885>J

279
00:14:50.085 --> 00:14:52.565
<00:14:50.085>or <00:14:50.285>Mocha <00:14:50.485>or <00:14:50.685>whatever <00:14:50.885>you <00:14:51.085>want <00:14:51.285>to <00:14:51.485>use,

280
00:14:53.185 --> 00:14:56.045
<00:14:53.185>we <00:14:53.340>will <00:14:53.496>have <00:14:53.651>TypeScript <00:14:53.807>to <00:14:53.962>improve <00:14:54.118>the <00:14:54.273>language <00:14:54.429>by <00:14:54.584>itself,

281
00:14:56.295 --> 00:14:58.765
<00:14:56.295>where <00:14:56.495>we <00:14:56.694>will <00:14:56.895>have <00:14:57.094>to <00:14:57.295>reformat <00:14:57.495>the <00:14:57.694>content.

282
00:14:59.025 --> 00:15:02.125
<00:14:59.025>So <00:14:59.199>every <00:14:59.375>member <00:14:59.550>in <00:14:59.725>your <00:14:59.900>team <00:15:00.074>will <00:15:00.250>be <00:15:00.425>able

283
00:15:02.125 --> 00:15:06.125
<00:15:02.125>to <00:15:02.265>produce <00:15:02.405>the <00:15:02.545>same <00:15:02.685>cut <00:15:02.825>quality, <00:15:02.965>um, <00:15:03.105>in <00:15:03.245>term <00:15:03.385>of <00:15:03.525>formatting

284
00:15:06.225 --> 00:15:07.445
<00:15:06.225>and <00:15:06.774>cut <00:15:07.323>syntax.

285
00:15:08.225 --> 00:15:11.205
<00:15:08.225>So <00:15:08.352>we <00:15:08.479>need <00:15:08.606>to, <00:15:08.734>to <00:15:08.861>configure <00:15:08.988>it, <00:15:09.115>we <00:15:09.243>need <00:15:09.370>to <00:15:09.497>have, <00:15:09.625>uh,

286
00:15:11.455 --> 00:15:15.445
<00:15:11.455>links <00:15:11.655>like, <00:15:11.855>like <00:15:12.055>to <00:15:12.255>check <00:15:12.455>the <00:15:12.655>syntax, <00:15:12.855>ensure

287
00:15:15.475 --> 00:15:17.885
<00:15:15.475>that <00:15:15.675>every <00:15:15.875>member <00:15:16.075>of <00:15:16.275>the <00:15:16.475>team, <00:15:16.675>once <00:15:16.875>again,

288
00:15:17.955 --> 00:15:21.205
<00:15:17.955>will <00:15:18.095>produce <00:15:18.235>the <00:15:18.375>same <00:15:18.515>code <00:15:18.655>with <00:15:18.795>the <00:15:18.935>same <00:15:19.075>ation <00:15:19.215>in <00:15:19.355>term

289
00:15:21.205 --> 00:15:22.645
<00:15:21.205>of <00:15:21.637>level <00:15:22.069>of <00:15:22.501>quality.

290
00:15:23.465 --> 00:15:24.525
<00:15:23.465>We <00:15:23.703>need <00:15:23.942>those <00:15:24.180>tools <00:15:24.419>too.

291
00:15:24.625 --> 00:15:29.185
<00:15:24.625>We <00:15:24.858>will <00:15:25.091>use <00:15:25.325>some, <00:15:25.558>um, <00:15:25.791>dependencies, <00:15:26.025>uh,

292
00:15:29.335 --> 00:15:34.225
<00:15:29.335>manager <00:15:29.490>like <00:15:29.646>NPM <00:15:29.801>or <00:15:29.957>ER <00:15:30.112>or <00:15:30.268>or <00:15:30.423>YA, <00:15:30.579>or <00:15:30.735>N-P-M-P-M,

293
00:15:34.865 --> 00:15:38.045
<00:15:34.865>or <00:15:34.992>I <00:15:35.119>dunno, <00:15:35.246>which <00:15:35.374>is, <00:15:35.501>uh, <00:15:35.628>still <00:15:35.755>a <00:15:35.883>lot <00:15:36.010>of <00:15:36.137>tools <00:15:36.265>to,

294
00:15:38.045 --> 00:15:39.165
<00:15:38.045>to <00:15:38.549>manage <00:15:39.053>dependencies.

295
00:15:39.665 --> 00:15:42.125
<00:15:39.665>Any <00:15:39.805>kind <00:15:39.944>of <00:15:40.084>tools <00:15:40.224>that <00:15:40.365>is <00:15:40.505>specific <00:15:40.645>to <00:15:40.785>your <00:15:40.925>framework, <00:15:41.064>like,

296
00:15:42.205 --> 00:15:44.805
<00:15:42.205>I <00:15:42.438>dunno, <00:15:42.671>react <00:15:42.905>or, <00:15:43.138>or <00:15:43.371>as <00:15:43.605>well.

297
00:15:44.945 --> 00:15:48.325
<00:15:44.945>So <00:15:45.072>we, <00:15:45.199>we, <00:15:45.326>we <00:15:45.454>have, <00:15:45.581>um, <00:15:45.708>and <00:15:45.835>also <00:15:45.963>tool <00:15:46.090>to <00:15:46.217>do <00:15:46.345>that.

298
00:15:48.385 --> 00:15:53.155
<00:15:48.385>So <00:15:48.560>we <00:15:48.735>wanted <00:15:48.910>to <00:15:49.085>improve <00:15:49.260>our <00:15:49.435>developer, <00:15:49.610>uh, <00:15:49.785>experience

299
00:15:53.255 --> 00:15:54.435
<00:15:53.255>and <00:15:53.608>our <00:15:53.963>developer <00:15:54.317>life,

300
00:15:54.895 --> 00:15:58.195
<00:15:54.895>but <00:15:55.095>having <00:15:55.295>an <00:15:55.495>easier <00:15:55.694>developer <00:15:55.895>life, <00:15:56.095>like, <00:15:56.295>um,

301
00:15:58.285 --> 00:16:01.435
<00:15:58.285>using <00:15:58.518>TypeScript <00:15:58.751>or, <00:15:58.985>or <00:15:59.218>using <00:15:59.451>post <00:15:59.685>TSS

302
00:16:01.435 --> 00:16:05.035
<00:16:01.435>or <00:16:01.609>something <00:16:01.785>like <00:16:01.959>that <00:16:02.135>means <00:16:02.310>we, <00:16:02.484>we <00:16:02.660>do <00:16:02.834>need

303
00:16:05.055 --> 00:16:08.035
<00:16:05.055>to <00:16:05.255>have <00:16:05.454>a <00:16:05.655>novelly <00:16:05.854>complex <00:16:06.055>dev <00:16:06.255>tool <00:16:06.454>stack.

304
00:16:08.135 --> 00:16:10.995
<00:16:08.135>And <00:16:08.310>it's <00:16:08.485>time <00:16:08.660>to <00:16:08.835>simplify <00:16:09.010>this <00:16:09.185>dev <00:16:09.360>tool <00:16:09.535>stack,

305
00:16:10.995 --> 00:16:13.755
<00:16:10.995>because <00:16:11.150>right <00:16:11.306>now, <00:16:11.461>as <00:16:11.617>a <00:16:11.772>front-end <00:16:11.928>developer, <00:16:12.083>I <00:16:12.239>just <00:16:12.395>have

306
00:16:13.755 --> 00:16:18.595
<00:16:13.755>to <00:16:13.871>mimic <00:16:13.988>with <00:16:14.105>a <00:16:14.221>lot <00:16:14.338>of <00:16:14.455>tools, <00:16:14.571>uh, <00:16:14.688>uh, <00:16:14.805>the, <00:16:14.921>the <00:16:15.038>native, <00:16:15.155>uh,

307
00:16:19.075 --> 00:16:20.075
<00:16:19.075>browsers <00:16:19.975>features.

308
00:16:20.575 --> 00:16:22.675
<00:16:20.575>So <00:16:20.855>I <00:16:21.135>could <00:16:21.415>just <00:16:21.695>wait <00:16:21.975>eternally

309
00:16:22.675 --> 00:16:26.795
<00:16:22.675>because <00:16:22.830>what <00:16:22.986>I <00:16:23.141>probably <00:16:23.297>feel <00:16:23.452>with <00:16:23.608>my <00:16:23.763>dev <00:16:23.919>tools, <00:16:24.074>uh,

310
00:16:27.545 --> 00:16:30.755
<00:16:27.545>will <00:16:27.824>never <00:16:28.104>be, <00:16:28.385>um, <00:16:28.665>as <00:16:28.944>efficient

311
00:16:30.895 --> 00:16:32.595
<00:16:30.895>as <00:16:31.245>my <00:16:31.595>brother <00:16:31.944>by <00:16:32.295>itself.

312
00:16:32.855 --> 00:16:35.695
<00:16:32.855>So <00:16:33.055>I <00:16:33.255>prefer <00:16:33.455>to <00:16:33.655>focus <00:16:33.855>on <00:16:34.055>my <00:16:34.255>brother

313
00:16:36.275 --> 00:16:38.935
<00:16:36.275>and <00:16:36.449>the <00:16:36.625>capabilities <00:16:36.800>of <00:16:36.975>my <00:16:37.150>brother, <00:16:37.324>rather, <00:16:37.500>I <00:16:37.675>trying

314
00:16:38.935 --> 00:16:41.615
<00:16:38.935>to <00:16:39.168>mimic, <00:16:39.401>make <00:16:39.635>everything <00:16:39.868>with <00:16:40.101>a <00:16:40.334>nightmare

315
00:16:41.615 --> 00:16:42.855
<00:16:41.615>of <00:16:41.838>dev <00:16:42.061>of <00:16:42.284>dev <00:16:42.507>tools <00:16:42.731>stack.

316
00:16:44.165 --> 00:16:47.985
<00:16:44.165>And <00:16:44.339>the <00:16:44.515>first <00:16:44.689>problem <00:16:44.865>is <00:16:45.040>that <00:16:45.214>compiling <00:16:45.390>for <00:16:45.564>production,

317
00:16:47.985 --> 00:16:50.225
<00:16:47.985>because <00:16:48.265>it's <00:16:48.545>mandatory <00:16:48.825>compiled <00:16:49.105>for <00:16:49.385>production

318
00:16:50.225 --> 00:16:54.385
<00:16:50.225>to <00:16:50.380>produce <00:16:50.536>assets <00:16:50.691>that <00:16:50.847>are <00:16:51.002>optimized <00:16:51.158>for <00:16:51.313>the <00:16:51.469>production, <00:16:51.625>uh,

319
00:16:55.115 --> 00:16:57.965
<00:16:55.115>environment, <00:16:55.348>it <00:16:55.581>doesn't <00:16:55.815>mean <00:16:56.048>that <00:16:56.281>we <00:16:56.515>need

320
00:16:57.965 --> 00:17:00.405
<00:16:57.965>to <00:16:58.140>do <00:16:58.315>the <00:16:58.490>same <00:16:58.665>thing <00:16:58.840>during <00:16:59.015>the <00:16:59.190>development <00:16:59.365>phase.

321
00:17:01.425 --> 00:17:05.065
<00:17:01.425>I <00:17:01.552>don't <00:17:01.679>want <00:17:01.806>to <00:17:01.934>compile <00:17:02.061>react, <00:17:02.188>I <00:17:02.315>don't <00:17:02.443>want <00:17:02.570>to <00:17:02.697>compile <00:17:02.824>UGS,

322
00:17:05.225 --> 00:17:06.785
<00:17:05.224>I <00:17:05.504>don't <00:17:05.784>want <00:17:06.064>to <00:17:06.344>compile, <00:17:06.625>uh,

323
00:17:06.885 --> 00:17:08.865
<00:17:06.885>or <00:17:07.165>to <00:17:07.444>put, <00:17:07.724>uh, <00:17:08.004>everything, <00:17:08.285>uh,

324
00:17:09.095 --> 00:17:13.985
<00:17:09.095>through <00:17:09.222>post <00:17:09.349>CSS <00:17:09.476>each <00:17:09.604>time <00:17:09.731>I <00:17:09.858>save, <00:17:09.985>uh, <00:17:10.113>a <00:17:10.240>simple <00:17:10.367>style <00:17:10.495>sheet.

325
00:17:13.985 --> 00:17:16.225
<00:17:13.984>Because, <00:17:14.334>because <00:17:14.685>this <00:17:15.034>is <00:17:15.385>not,

326
00:17:16.405 --> 00:17:17.705
<00:17:16.405>we <00:17:16.599>are <00:17:16.795>not <00:17:16.990>in <00:17:17.185>the <00:17:17.379>final <00:17:17.574>context.

327
00:17:17.885 --> 00:17:19.105
<00:17:17.885>We <00:17:18.104>are <00:17:18.324>in <00:17:18.543>the <00:17:18.763>development <00:17:18.983>phase.

328
00:17:19.285 --> 00:17:22.505
<00:17:19.285>So <00:17:19.460>I <00:17:19.635>want <00:17:19.810>quick <00:17:19.985>development <00:17:20.160>process <00:17:20.335>and <00:17:20.510>that's <00:17:20.685>all.

329
00:17:22.725 --> 00:17:24.785
<00:17:22.724>And <00:17:22.925>after <00:17:23.125>that, <00:17:23.324>we <00:17:23.524>will <00:17:23.724>compile <00:17:23.925>for <00:17:24.125>production

330
00:17:24.785 --> 00:17:25.825
<00:17:24.785>and <00:17:25.019>we <00:17:25.253>will <00:17:25.487>build <00:17:25.721>everything.

331
00:17:26.655 --> 00:17:29.395
<00:17:26.655>And <00:17:26.888>as <00:17:27.121>web <00:17:27.355>developers, <00:17:27.588>we've <00:17:27.821>got <00:17:28.055>superpowers.

332
00:17:29.925 --> 00:17:33.955
<00:17:29.925>We've <00:17:30.080>got <00:17:30.236>ESM <00:17:30.391>modules, <00:17:30.547>come <00:17:30.702>on, <00:17:30.858>it's <00:17:31.013>five <00:17:31.169>years <00:17:31.325>ago.

333
00:17:34.225 --> 00:17:35.995
<00:17:34.225>It's, <00:17:34.504>it's <00:17:34.784>almost <00:17:35.064>everywhere <00:17:35.344>right <00:17:35.625>now.

334
00:17:36.175 --> 00:17:38.355
<00:17:36.175>All <00:17:36.455>modern <00:17:36.735>browsers, <00:17:37.014>super <00:17:37.294>ES <00:17:37.575>modules.

335
00:17:38.355 --> 00:17:41.675
<00:17:38.355>So <00:17:38.530>we <00:17:38.705>are, <00:17:38.880>we <00:17:39.055>are <00:17:39.230>probably <00:17:39.405>not <00:17:39.580>developing <00:17:39.755>with,

336
00:17:41.865 --> 00:17:43.715
<00:17:41.865>with <00:17:42.331>Internet <00:17:42.798>Express <00:17:43.265>six.

337
00:17:44.295 --> 00:17:47.395
<00:17:44.295>So <00:17:44.450>please, <00:17:44.606>we <00:17:44.761>use <00:17:44.917>Modern <00:17:45.072>Brother <00:17:45.228>for <00:17:45.383>the <00:17:45.539>development <00:17:45.695>phase.

338
00:17:47.415 --> 00:17:49.185
<00:17:47.415>So <00:17:47.695>use <00:17:47.975>the <00:17:48.254>A <00:17:48.534>SM <00:17:48.815>features

339
00:17:49.185 --> 00:17:52.885
<00:17:49.185>because <00:17:49.465>cript <00:17:49.745>modules <00:17:50.024>are <00:17:50.304>properly <00:17:50.585>supported

340
00:17:52.905 --> 00:17:53.925
<00:17:52.905>by <00:17:53.211>every <00:17:53.517>modern <00:17:53.822>browser.

341
00:17:54.025 --> 00:17:57.465
<00:17:54.025>So <00:17:54.258>use <00:17:54.491>them. <00:17:54.725>We <00:17:54.958>have <00:17:55.191>advanced <00:17:55.425>cash

342
00:17:57.615 --> 00:18:00.385
<00:17:57.615>with <00:17:57.848>advanced <00:17:58.081>cash <00:17:58.315>policies <00:17:58.548>using <00:17:58.781>serving <00:17:59.015>service

343
00:18:00.385 --> 00:18:01.625
<00:18:00.385>workers <00:18:00.664>or <00:18:00.943>something <00:18:01.222>like <00:18:01.501>that.

344
00:18:01.765 --> 00:18:04.785
<00:18:01.765>So <00:18:01.940>use <00:18:02.115>the <00:18:02.290>cache <00:18:02.465>of <00:18:02.640>your <00:18:02.815>browser <00:18:02.990>by <00:18:03.165>itself

345
00:18:04.885 --> 00:18:07.505
<00:18:04.885>and <00:18:05.165>cash <00:18:05.445>module <00:18:05.725>browsers <00:18:06.004>and <00:18:06.285>distributing

346
00:18:07.505 --> 00:18:11.385
<00:18:07.505>and <00:18:07.660>recompile <00:18:07.816>every <00:18:07.971>kind <00:18:08.127>of <00:18:08.282>new <00:18:08.438>module <00:18:08.593>each <00:18:08.749>time <00:18:08.905>you,

347
00:18:11.405 --> 00:18:12.905
<00:18:11.405>you <00:18:11.742>just <00:18:12.080>start <00:18:12.417>your <00:18:12.754>application.

348
00:18:12.905 --> 00:18:14.225
<00:18:12.905>This <00:18:13.142>is, <00:18:13.380>this <00:18:13.617>is <00:18:13.855>just <00:18:14.092>insane.

349
00:18:14.605 --> 00:18:18.585
<00:18:14.605>We <00:18:14.745>got <00:18:14.885>HTTP <00:18:15.025>two, <00:18:15.165>which <00:18:15.305>allow <00:18:15.445>us <00:18:15.585>to <00:18:15.725>push <00:18:15.865>the <00:18:16.005>content

350
00:18:19.135 --> 00:18:23.625
<00:18:19.135>through <00:18:19.310>the <00:18:19.485>protocol <00:18:19.660>rather <00:18:19.835>than <00:18:20.010>new <00:18:20.185>content <00:18:20.360>each <00:18:20.535>time.

351
00:18:23.685 --> 00:18:26.465
<00:18:23.685>For <00:18:23.885>the, <00:18:24.085>for <00:18:24.284>the, <00:18:24.485>from <00:18:24.685>the <00:18:24.885>final <00:18:25.085>page.

352
00:18:26.525 --> 00:18:30.885
<00:18:26.525>So <00:18:26.680>use <00:18:26.836>the <00:18:26.991>advanced <00:18:27.147>feature <00:18:27.302>of <00:18:27.458>HTT <00:18:27.613>p <00:18:27.769>uh, <00:18:27.925>also,

353
00:18:31.385 --> 00:18:35.565
<00:18:31.385>so <00:18:31.540>how <00:18:31.696>to <00:18:31.851>improve <00:18:32.007>the <00:18:32.162>developer <00:18:32.318>experience <00:18:32.473>rather <00:18:32.629>than <00:18:32.785>just

354
00:18:35.845 --> 00:18:38.245
<00:18:35.845>choosing <00:18:36.195>of <00:18:36.545>the <00:18:36.895>user <00:18:37.245>experience.

355
00:18:39.365 --> 00:18:42.395
<00:18:39.365>We've <00:18:39.598>got <00:18:39.831>standardized, <00:18:40.065>uh, <00:18:40.298>ecma <00:18:40.531>script <00:18:40.765>modules.

356
00:18:42.395 --> 00:18:47.075
<00:18:42.395>So <00:18:42.511>we <00:18:42.628>will <00:18:42.745>be <00:18:42.861>able <00:18:42.978>to <00:18:43.095>use <00:18:43.211>any <00:18:43.328>modules <00:18:43.445>in <00:18:43.561>the <00:18:43.678>ESM <00:18:43.795>format.

357
00:18:47.375 --> 00:18:50.855
<00:18:47.375>And <00:18:47.502>that's <00:18:47.629>all, <00:18:47.756>I <00:18:47.884>don't <00:18:48.011>want <00:18:48.138>to <00:18:48.265>use <00:18:48.393>any <00:18:48.520>common <00:18:48.647>GS <00:18:48.775>format,

358
00:18:51.175 --> 00:18:53.495
<00:18:51.175>I <00:18:51.315>don't <00:18:51.455>want <00:18:51.595>to <00:18:51.735>use <00:18:51.875>any <00:18:52.014>other <00:18:52.155>kind <00:18:52.294>of <00:18:52.435>modules <00:18:52.575>format.

359
00:18:53.735 --> 00:18:57.385
<00:18:53.735>I <00:18:53.842>just <00:18:53.950>want <00:18:54.058>to <00:18:54.165>use <00:18:54.273>E <00:18:54.381>sm <00:18:54.488>and <00:18:54.596>that's <00:18:54.704>all <00:18:54.811>I <00:18:54.919>want <00:18:55.027>to <00:18:55.135>use.

360
00:18:57.435 --> 00:18:59.665
<00:18:57.435>Still <00:18:57.715>use <00:18:57.995>a <00:18:58.274>superset <00:18:58.554>of <00:18:58.835>languages

361
00:18:59.665 --> 00:19:01.385
<00:18:59.665>that <00:18:59.945>we <00:19:00.225>have <00:19:00.504>TypeScript, <00:19:00.784>TS <00:19:01.065>six.

362
00:19:01.645 --> 00:19:06.055
<00:19:01.645>Ts <00:19:01.772>six. <00:19:01.899>And <00:19:02.026>so <00:19:02.154>I <00:19:02.281>want <00:19:02.408>to <00:19:02.535>be <00:19:02.663>free <00:19:02.790>from <00:19:02.917>loading <00:19:03.045>this

363
00:19:06.895 --> 00:19:08.615
<00:19:06.895>NPM <00:19:07.595>Nightmare <00:19:08.295>Registry.

364
00:19:08.615 --> 00:19:11.295
<00:19:08.615>Each <00:19:08.742>time <00:19:08.869>I <00:19:08.996>want <00:19:09.124>to <00:19:09.251>install <00:19:09.378>a <00:19:09.505>new <00:19:09.633>dependencies, <00:19:09.760>I <00:19:09.887>just <00:19:10.015>want

365
00:19:11.295 --> 00:19:14.085
<00:19:11.295>to <00:19:11.470>put <00:19:11.645>the <00:19:11.820>link <00:19:11.995>or <00:19:12.170>reference <00:19:12.345>to <00:19:12.520>a <00:19:12.695>module

366
00:19:14.305 --> 00:19:16.205
<00:19:14.305>and <00:19:14.505>have <00:19:14.705>it <00:19:14.905>directly <00:19:15.105>available <00:19:15.305>in <00:19:15.505>my <00:19:15.705>project.

367
00:19:16.265 --> 00:19:17.645
<00:19:16.265>And <00:19:16.575>that's <00:19:16.886>all <00:19:17.196>I <00:19:17.507>want.

368
00:19:17.645 --> 00:19:20.285
<00:19:17.645>An <00:19:17.820>instant <00:19:17.995>startup <00:19:18.170>and <00:19:18.345>not <00:19:18.520>waiting <00:19:18.695>for <00:19:18.870>five <00:19:19.045>minutes

369
00:19:20.285 --> 00:19:24.445
<00:19:20.285>to <00:19:20.485>recompile, <00:19:20.685>compile <00:19:20.885>all <00:19:21.085>my, <00:19:21.285>uh, <00:19:21.485>dependencies, <00:19:21.685>just

370
00:19:25.215 --> 00:19:27.565
<00:19:25.215>open <00:19:25.495>my <00:19:25.774>project <00:19:26.054>starting <00:19:26.334>to <00:19:26.615>code.

371
00:19:28.085 --> 00:19:30.565
<00:19:28.085>I <00:19:28.260>want <00:19:28.435>to <00:19:28.610>build <00:19:28.785>in <00:19:28.960>out <00:19:29.135>module <00:19:29.310>reloading <00:19:29.485>support

372
00:19:31.115 --> 00:19:33.885
<00:19:31.115>with <00:19:31.395>a <00:19:31.675>state <00:19:31.955>reservation, <00:19:32.235>which <00:19:32.515>mean

373
00:19:33.885 --> 00:19:37.205
<00:19:33.885>that <00:19:34.040>I <00:19:34.196>could <00:19:34.351>test <00:19:34.507>heavily <00:19:34.662>my <00:19:34.818>application <00:19:34.973>in <00:19:35.129>my <00:19:35.285>browser

374
00:19:37.265 --> 00:19:41.075
<00:19:37.265>having, <00:19:37.498>without <00:19:37.731>having <00:19:37.965>to <00:19:38.198>lost <00:19:38.431>my, <00:19:38.665>uh,

375
00:19:41.075 --> 00:19:42.715
<00:19:41.075>my <00:19:41.308>state <00:19:41.541>each <00:19:41.775>time <00:19:42.008>I <00:19:42.241>refresh <00:19:42.475>it.

376
00:19:43.235 --> 00:19:45.635
<00:19:43.235>I <00:19:43.390>want <00:19:43.546>the, <00:19:43.701>this <00:19:43.857>setup <00:19:44.012>to <00:19:44.168>be <00:19:44.323>extensible <00:19:44.479>by <00:19:44.635>plugin

377
00:19:45.635 --> 00:19:48.795
<00:19:45.635>because <00:19:45.868>each <00:19:46.101>project <00:19:46.335>has <00:19:46.568>its <00:19:46.801>own <00:19:47.035>ities

378
00:19:48.895 --> 00:19:51.515
<00:19:48.895>and <00:19:49.070>we <00:19:49.245>have <00:19:49.420>to <00:19:49.595>be <00:19:49.770>focused <00:19:49.945>on <00:19:50.120>them <00:19:50.295>too.

379
00:19:52.015 --> 00:19:55.515
<00:19:52.015>And <00:19:52.131>I <00:19:52.248>just <00:19:52.365>want <00:19:52.481>to <00:19:52.598>focus <00:19:52.715>on <00:19:52.831>my <00:19:52.948>code <00:19:53.065>base <00:19:53.181>and <00:19:53.298>that <00:19:53.415>sort,

380
00:19:55.655 --> 00:19:59.425
<00:19:55.655>and <00:19:55.771>not <00:19:55.888>cus <00:19:56.004>on <00:19:56.121>the <00:19:56.238>dev <00:19:56.355>tool <00:19:56.471>stack <00:19:56.588>by <00:19:56.705>itself, <00:19:56.821>I <00:19:56.938>just <00:19:57.055>want

381
00:19:59.425 --> 00:20:00.425
<00:19:59.425>to <00:19:59.725>produce <00:20:00.024>new <00:20:00.325>code.

382
00:20:01.265 --> 00:20:04.125
<00:20:01.265>So <00:20:01.465>how <00:20:01.665>to <00:20:01.865>solve <00:20:02.065>this <00:20:02.265>bottleneck <00:20:02.465>right <00:20:02.665>now.

383
00:20:04.225 --> 00:20:07.125
<00:20:04.225>And <00:20:04.425>which <00:20:04.625>tools <00:20:04.824>will <00:20:05.024>we <00:20:05.225>use <00:20:05.425>to <00:20:05.625>produce?

384
00:20:07.425 --> 00:20:11.605
<00:20:07.425>Um, <00:20:07.600>it <00:20:07.774>at <00:20:07.950>the <00:20:08.125>end, <00:20:08.300>how <00:20:08.475>does <00:20:08.649>it <00:20:08.825>work

385
00:20:11.705 --> 00:20:12.845
<00:20:11.705>or, <00:20:12.047>oh, <00:20:12.389>it'll <00:20:12.731>work.

386
00:20:12.975 --> 00:20:15.485
<00:20:12.975>We'll <00:20:13.254>use <00:20:13.534>a <00:20:13.814>native, <00:20:14.094>um, <00:20:14.375>steward

387
00:20:15.665 --> 00:20:17.165
<00:20:15.665>of <00:20:15.935>ECMAScript <00:20:16.205>modules <00:20:16.475>of <00:20:16.745>the <00:20:17.014>bottle.

388
00:20:17.835 --> 00:20:20.015
<00:20:17.835>So <00:20:18.115>my <00:20:18.395>brother <00:20:18.675>with <00:20:18.955>will, <00:20:19.235>uh,

389
00:20:20.035 --> 00:20:24.615
<00:20:20.035>simply <00:20:20.210>load <00:20:20.385>my <00:20:20.560>ECMAScript <00:20:20.735>modules <00:20:20.910>from <00:20:21.085>my <00:20:21.260>dependency <00:20:21.435>tree.

390
00:20:25.235 --> 00:20:28.865
<00:20:25.235>And <00:20:25.514>that's <00:20:25.794>all. <00:20:26.074>I <00:20:26.354>won't <00:20:26.635>compile

391
00:20:28.925 --> 00:20:31.825
<00:20:28.925>or <00:20:29.125>serve <00:20:29.325>any <00:20:29.524>kind <00:20:29.725>of <00:20:29.925>format <00:20:30.125>of <00:20:30.325>modules

392
00:20:31.825 --> 00:20:33.745
<00:20:31.825>that <00:20:32.025>my <00:20:32.225>brother <00:20:32.425>won't <00:20:32.625>be <00:20:32.825>able <00:20:33.025>to <00:20:33.225>understand.

393
00:20:34.365 --> 00:20:36.885
<00:20:34.365>I <00:20:34.645>will <00:20:34.925>transfer <00:20:35.205>non <00:20:35.485>JavaScript <00:20:35.765>modules

394
00:20:37.025 --> 00:20:40.925
<00:20:37.025>to <00:20:37.165>the <00:20:37.305>ECMAScript <00:20:37.445>format <00:20:37.585>if <00:20:37.725>it's <00:20:37.865>not <00:20:38.005>still <00:20:38.145>available <00:20:38.285>in <00:20:38.425>it.

395
00:20:41.025 --> 00:20:44.245
<00:20:41.025>But <00:20:41.225>certainly <00:20:41.425>a <00:20:41.625>lot <00:20:41.825>of <00:20:42.025>modules <00:20:42.225>are, <00:20:42.425>uh,

396
00:20:44.265 --> 00:20:47.485
<00:20:44.265>not <00:20:44.440>transitioning <00:20:44.615>from <00:20:44.790>common <00:20:44.965>GS <00:20:45.140>to, <00:20:45.315>uh, <00:20:45.490>ESM <00:20:45.665>format

397
00:20:47.745 --> 00:20:51.205
<00:20:47.745>or <00:20:47.900>at <00:20:48.056>least <00:20:48.211>are <00:20:48.367>serving <00:20:48.522>the <00:20:48.678>different <00:20:48.833>versions <00:20:48.989>of <00:20:49.145>it.

398
00:20:51.305 --> 00:20:56.005
<00:20:51.305>So <00:20:51.445>you <00:20:51.585>could <00:20:51.725>easily <00:20:51.865>just <00:20:52.005>pick <00:20:52.145>the <00:20:52.285>right <00:20:52.425>ESM <00:20:52.565>version <00:20:52.705>probe

399
00:20:56.065 --> 00:20:58.205
<00:20:56.065>for <00:20:56.265>your <00:20:56.465>library, <00:20:56.665>but <00:20:56.865>if <00:20:57.065>it's <00:20:57.265>not <00:20:57.465>available,

400
00:20:58.505 --> 00:21:00.765
<00:20:58.505>the <00:20:58.738>dev <00:20:58.971>tool <00:20:59.205>stack <00:20:59.438>should <00:20:59.671>be <00:20:59.905>able

401
00:21:00.765 --> 00:21:03.005
<00:21:00.765>to <00:21:00.998>transform <00:21:01.231>it <00:21:01.465>in <00:21:01.698>the <00:21:01.931>right <00:21:02.165>format.

402
00:21:03.225 --> 00:21:04.245
<00:21:03.225>In <00:21:03.531>the <00:21:03.837>ESM <00:21:04.142>format,

403
00:21:05.295 --> 00:21:07.765
<00:21:05.295>we'll <00:21:05.495>cache <00:21:05.695>all <00:21:05.895>the <00:21:06.095>modules <00:21:06.295>in <00:21:06.495>the <00:21:06.695>browser.

404
00:21:08.855 --> 00:21:10.635
<00:21:08.855>If <00:21:09.088>I'm <00:21:09.321>working <00:21:09.555>in <00:21:09.788>a <00:21:10.021>React <00:21:10.255>application

405
00:21:10.815 --> 00:21:14.915
<00:21:10.815>and <00:21:10.990>I <00:21:11.165>update <00:21:11.340>some <00:21:11.515>component <00:21:11.690>of <00:21:11.865>in <00:21:12.040>my <00:21:12.215>application,

406
00:21:14.915 --> 00:21:18.755
<00:21:14.915>in <00:21:15.070>my <00:21:15.226>design <00:21:15.381>system, <00:21:15.537>um, <00:21:15.692>I, <00:21:15.848>I <00:21:16.003>don't <00:21:16.159>want <00:21:16.315>my

407
00:21:19.975 --> 00:21:23.715
<00:21:19.975>my <00:21:20.149>dev <00:21:20.324>tool <00:21:20.500>stack <00:21:20.675>to <00:21:20.850>recompile <00:21:21.024>everything, <00:21:21.199>even <00:21:21.375>react

408
00:21:25.695 --> 00:21:28.265
<00:21:25.695>when <00:21:25.928>I'm <00:21:26.161>just <00:21:26.395>updating <00:21:26.628>a <00:21:26.861>small <00:21:27.095>part

409
00:21:28.265 --> 00:21:29.585
<00:21:28.265>of <00:21:28.661>small <00:21:29.057>components <00:21:29.453>somewhere.

410
00:21:30.265 --> 00:21:33.625
<00:21:30.265>I, <00:21:30.392>I <00:21:30.519>just <00:21:30.646>want <00:21:30.774>to <00:21:30.901>sell <00:21:31.028>this <00:21:31.155>part <00:21:31.283>and <00:21:31.410>update <00:21:31.537>this <00:21:31.665>part.

411
00:21:33.645 --> 00:21:37.545
<00:21:33.645>And <00:21:33.800>that's <00:21:33.956>all <00:21:34.111>because <00:21:34.267>I <00:21:34.422>will <00:21:34.578>probably <00:21:34.733>never <00:21:34.889>update, <00:21:35.045>um,

412
00:21:38.085 --> 00:21:40.745
<00:21:38.085>the <00:21:38.318>React <00:21:38.551>stuff <00:21:38.785>during <00:21:39.018>my <00:21:39.251>development <00:21:39.485>process.

413
00:21:40.925 --> 00:21:44.185
<00:21:40.925>And <00:21:41.158>if <00:21:41.391>I <00:21:41.625>do, <00:21:41.858>um, <00:21:42.091>it'll <00:21:42.325>be

414
00:21:44.865 --> 00:21:49.585
<00:21:44.865>a <00:21:45.005>de <00:21:45.145>dedicated <00:21:45.285>task <00:21:45.425>to <00:21:45.565>just <00:21:45.705>grading <00:21:45.845>React <00:21:45.985>in <00:21:46.125>the <00:21:46.265>project.

415
00:21:49.845 --> 00:21:51.185
<00:21:49.845>So <00:21:50.247>I <00:21:50.649>don't <00:21:51.051>want

416
00:21:51.185 --> 00:21:53.385
<00:21:51.185>to <00:21:51.360>recompile <00:21:51.534>it <00:21:51.710>each <00:21:51.885>time <00:21:52.060>I <00:21:52.235>start <00:21:52.409>the <00:21:52.585>project.

417
00:21:53.625 --> 00:21:56.465
<00:21:53.625>I <00:21:53.752>just <00:21:53.879>want <00:21:54.006>to <00:21:54.134>have <00:21:54.261>it <00:21:54.388>available, <00:21:54.515>load <00:21:54.643>it <00:21:54.770>in <00:21:54.897>the <00:21:55.025>cache

418
00:21:56.465 --> 00:21:57.905
<00:21:56.465>of <00:21:56.724>my <00:21:56.983>brother <00:21:57.242>and <00:21:57.501>that's <00:21:57.761>all,

419
00:21:57.925 --> 00:22:01.825
<00:21:57.925>and <00:21:58.065>it'll <00:21:58.205>be <00:21:58.345>easily <00:21:58.485>grabbed <00:21:58.625>in <00:21:58.764>it <00:21:58.905>and <00:21:59.044>executed <00:21:59.185>from <00:21:59.325>there.

420
00:22:02.245 --> 00:22:05.995
<00:22:02.245>But <00:22:02.372>I <00:22:02.499>don't <00:22:02.626>want <00:22:02.754>to, <00:22:02.881>to <00:22:03.008>include <00:22:03.135>it <00:22:03.263>in <00:22:03.390>my <00:22:03.517>final <00:22:03.645>build.

421
00:22:07.635 --> 00:22:10.355
<00:22:07.635>I <00:22:07.775>will <00:22:07.915>use <00:22:08.055>the <00:22:08.195>HMR <00:22:08.335>for, <00:22:08.475>uh, <00:22:08.615>on <00:22:08.754>the <00:22:08.895>fly <00:22:09.035>update.

422
00:22:10.455 --> 00:22:14.435
<00:22:10.455>So, <00:22:10.595>um, <00:22:10.735>I <00:22:10.875>modify <00:22:11.014>my <00:22:11.155>code, <00:22:11.294>the <00:22:11.435>content <00:22:11.574>is <00:22:11.715>updated <00:22:11.855>properly,

423
00:22:14.535 --> 00:22:16.915
<00:22:14.535>uh, <00:22:14.710>in <00:22:14.885>my <00:22:15.060>browser <00:22:15.235>and <00:22:15.410>I <00:22:15.585>don't <00:22:15.760>lost <00:22:15.935>everything.

424
00:22:17.455 --> 00:22:20.035
<00:22:17.455>And <00:22:17.582>I <00:22:17.709>will <00:22:17.836>use <00:22:17.964>the <00:22:18.091>HTTP <00:22:18.218>two <00:22:18.345>features <00:22:18.473>to <00:22:18.600>push <00:22:18.727>the <00:22:18.855>content,

425
00:22:20.185 --> 00:22:25.165
<00:22:20.185>like <00:22:20.301>as <00:22:20.418>the <00:22:20.534>CSS <00:22:20.651>updates <00:22:20.768>also, <00:22:20.885>which <00:22:21.001>mean <00:22:21.118>that <00:22:21.235>if <00:22:21.351>I <00:22:21.468>want <00:22:21.585>to,

426
00:22:25.545 --> 00:22:29.285
<00:22:25.545>uh, <00:22:25.720>develop <00:22:25.895>a <00:22:26.070>small <00:22:26.245>application, <00:22:26.420>I <00:22:26.595>will <00:22:26.770>write, <00:22:26.945>uh,

427
00:22:29.535 --> 00:22:34.445
<00:22:29.535>files <00:22:29.675>in <00:22:29.815>GS <00:22:29.955>six <00:22:30.095>format <00:22:30.235>where <00:22:30.375>I <00:22:30.515>first, <00:22:30.655>um, <00:22:30.795>import <00:22:30.935>react

428
00:22:34.465 --> 00:22:38.685
<00:22:34.465>and <00:22:34.592>the <00:22:34.719>reactor <00:22:34.846>import <00:22:34.974>my <00:22:35.101>Cs <00:22:35.228>s <00:22:35.355>file, <00:22:35.483>um, <00:22:35.610>like <00:22:35.737>any <00:22:35.865>kind

429
00:22:38.685 --> 00:22:39.765
<00:22:38.685>of <00:22:39.009>other <00:22:39.333>static <00:22:39.657>assets,

430
00:22:39.865 --> 00:22:42.925
<00:22:39.865>and <00:22:40.065>I <00:22:40.265>don't <00:22:40.465>want <00:22:40.665>to, <00:22:40.865>to, <00:22:41.065>to <00:22:41.265>transform

431
00:22:43.065 --> 00:22:45.605
<00:22:43.065>or <00:22:43.240>to <00:22:43.415>convert <00:22:43.590>the <00:22:43.765>CSS <00:22:43.940>I <00:22:44.115>to <00:22:44.290>something <00:22:44.465>else.

432
00:22:45.805 --> 00:22:49.605
<00:22:45.805>I <00:22:45.960>not <00:22:46.116>just <00:22:46.271>import <00:22:46.427>my <00:22:46.582>CSS <00:22:46.738>then <00:22:46.893>import <00:22:47.049>my, <00:22:47.205>uh,

433
00:22:49.665 --> 00:22:54.205
<00:22:49.665>my <00:22:49.805>app <00:22:49.945>component <00:22:50.085>and, <00:22:50.225>uh, <00:22:50.365>call <00:22:50.504>the <00:22:50.645>React, <00:22:50.784>uh, <00:22:50.925>dam <00:22:51.065>render,

434
00:22:54.705 --> 00:22:57.265
<00:22:54.705>uh, <00:22:54.985>function <00:22:55.264>by <00:22:55.544>just <00:22:55.824>executing <00:22:56.105>my,

435
00:22:57.405 --> 00:22:59.345
<00:22:57.405>my <00:22:57.685>app <00:22:57.965>module <00:22:58.245>in <00:22:58.524>my <00:22:58.805>application.

436
00:22:59.405 --> 00:23:03.025
<00:22:59.405>And <00:22:59.532>that's <00:22:59.659>all. <00:22:59.786>And <00:22:59.914>in <00:23:00.041>my <00:23:00.168>app <00:23:00.295>module, <00:23:00.423>I <00:23:00.550>will <00:23:00.677>just <00:23:00.805>simply

437
00:23:03.975 --> 00:23:06.505
<00:23:03.975>call <00:23:04.130>any <00:23:04.286>kind <00:23:04.441>of <00:23:04.597>helpers <00:23:04.752>that <00:23:04.908>I <00:23:05.063>need, <00:23:05.219>like <00:23:05.375>use

438
00:23:06.505 --> 00:23:08.105
<00:23:06.505>that <00:23:06.971>from <00:23:07.438>React, <00:23:07.905>um,

439
00:23:08.935 --> 00:23:11.945
<00:23:08.935>importing <00:23:09.215>other <00:23:09.495>static <00:23:09.774>assets <00:23:10.054>like <00:23:10.335>NSVG,

440
00:23:12.455 --> 00:23:14.465
<00:23:12.455>like <00:23:12.688>any <00:23:12.921>kind <00:23:13.155>of <00:23:13.388>other <00:23:13.621>static <00:23:13.855>assets.

441
00:23:14.645 --> 00:23:19.185
<00:23:14.645>And <00:23:14.800>I <00:23:14.956>will <00:23:15.111>probably <00:23:15.267>have <00:23:15.422>in <00:23:15.578>my <00:23:15.733>logo, <00:23:15.889>uh, <00:23:16.045>constant,

442
00:23:19.425 --> 00:23:23.545
<00:23:19.425>I <00:23:19.552>will <00:23:19.679>have <00:23:19.806>the <00:23:19.934>URL <00:23:20.061>to <00:23:20.188>grab <00:23:20.315>the <00:23:20.443>this, <00:23:20.570>uh, <00:23:20.697>static <00:23:20.825>asset

443
00:23:23.545 --> 00:23:25.545
<00:23:23.545>because <00:23:23.778>this, <00:23:24.011>this <00:23:24.245>is <00:23:24.478>a <00:23:24.711>binary <00:23:24.945>file

444
00:23:26.005 --> 00:23:29.895
<00:23:26.005>and <00:23:26.160>not <00:23:26.316>a, <00:23:26.471>a <00:23:26.627>JavaScript <00:23:26.782>file, <00:23:26.938>still <00:23:27.093>importing <00:23:27.249>my <00:23:27.405>CSS

445
00:23:30.115 --> 00:23:33.585
<00:23:30.115>and <00:23:30.290>in <00:23:30.465>my <00:23:30.640>application, <00:23:30.815>just <00:23:30.990>use <00:23:31.165>the <00:23:31.340>usual <00:23:31.515>content

446
00:23:33.885 --> 00:23:38.865
<00:23:33.885>and <00:23:34.060>defining <00:23:34.235>in <00:23:34.410>GSX, <00:23:34.585>um, <00:23:34.760>a <00:23:34.935>bunch <00:23:35.110>of <00:23:35.285>HTML

447
00:23:38.865 --> 00:23:42.345
<00:23:38.865>with <00:23:39.065>just <00:23:39.265>simple, <00:23:39.465>uh, <00:23:39.665>simple <00:23:39.865>d <00:23:40.065>an <00:23:40.265>image

448
00:23:42.735 --> 00:23:46.605
<00:23:42.735>that <00:23:42.909>is <00:23:43.084>using <00:23:43.260>my, <00:23:43.435>my, <00:23:43.610>uh, <00:23:43.784>logo <00:23:43.959>constant, <00:23:44.135>uh,

449
00:23:47.205 --> 00:23:49.365
<00:23:47.205>probably <00:23:47.360>a <00:23:47.516>button <00:23:47.671>with <00:23:47.827>an <00:23:47.982>unclick <00:23:48.138>call <00:23:48.293>back <00:23:48.449>on <00:23:48.605>it.

450
00:23:49.825 --> 00:23:51.765
<00:23:49.825>And <00:23:50.058>that's <00:23:50.291>all <00:23:50.525>I <00:23:50.758>will <00:23:50.991>serve <00:23:51.225>it.

451
00:23:51.825 --> 00:23:54.805
<00:23:51.825>And <00:23:51.980>I <00:23:52.136>just <00:23:52.291>want <00:23:52.447>to <00:23:52.602>write <00:23:52.758>those <00:23:52.913>GS <00:23:53.069>six <00:23:53.225>files

452
00:23:55.265 --> 00:23:57.205
<00:23:55.265>and <00:23:55.498>serve <00:23:55.731>them <00:23:55.965>directly <00:23:56.198>to <00:23:56.431>my <00:23:56.665>brother,

453
00:23:57.385 --> 00:23:59.885
<00:23:57.385>and <00:23:57.560>my <00:23:57.735>brother <00:23:57.910>should <00:23:58.085>be <00:23:58.260>able <00:23:58.435>to <00:23:58.610>execute <00:23:58.785>them.

454
00:24:00.345 --> 00:24:04.665
<00:24:00.345>And <00:24:00.520>that's <00:24:00.695>all <00:24:00.870>because <00:24:01.045>I'm <00:24:01.220>just <00:24:01.395>developing <00:24:01.570>the <00:24:01.745>application.

455
00:24:05.165 --> 00:24:08.905
<00:24:05.165>I'm <00:24:05.292>not, <00:24:05.419>I'm <00:24:05.546>not <00:24:05.674>serving <00:24:05.801>them <00:24:05.928>to, <00:24:06.055>to <00:24:06.183>a <00:24:06.310>shitload <00:24:06.437>of <00:24:06.565>users.

456
00:24:09.385 --> 00:24:11.825
<00:24:09.385>I <00:24:09.618>just, <00:24:09.851>just <00:24:10.085>coding <00:24:10.318>them <00:24:10.551>at <00:24:10.785>all.

457
00:24:12.205 --> 00:24:14.065
<00:24:12.205>So <00:24:12.438>if <00:24:12.671>I <00:24:12.905>said <00:24:13.138>that, <00:24:13.371>my <00:24:13.605>brother,

458
00:24:14.325 --> 00:24:15.825
<00:24:14.325>my <00:24:14.517>brother <00:24:14.710>should <00:24:14.903>be <00:24:15.096>able <00:24:15.289>to <00:24:15.482>understand <00:24:15.675>that.

459
00:24:16.005 --> 00:24:18.265
<00:24:16.005>And <00:24:16.132>this <00:24:16.259>is <00:24:16.386>exactly <00:24:16.514>what <00:24:16.641>we <00:24:16.768>are <00:24:16.895>trying <00:24:17.023>to <00:24:17.150>do <00:24:17.277>right <00:24:17.405>now.

460
00:24:18.445 --> 00:24:20.725
<00:24:18.445>So <00:24:18.911>about <00:24:19.378>the <00:24:19.845>dependency,

461
00:24:21.455 --> 00:24:24.465
<00:24:21.455>they <00:24:21.629>will <00:24:21.804>be <00:24:21.980>loaded <00:24:22.155>from <00:24:22.330>the <00:24:22.504>N <00:24:22.679>modules <00:24:22.855>directly,

462
00:24:24.525 --> 00:24:27.185
<00:24:24.525>so <00:24:24.725>it <00:24:24.925>won't <00:24:25.125>be <00:24:25.325>compiled <00:24:25.525>in <00:24:25.725>my <00:24:25.925>final

463
00:24:27.185 --> 00:24:28.585
<00:24:27.185>application <00:24:27.500>set <00:24:27.815>to <00:24:28.130>my <00:24:28.445>brother.

464
00:24:29.125 --> 00:24:31.145
<00:24:29.125>Uh, <00:24:29.405>they <00:24:29.685>will <00:24:29.965>be <00:24:30.245>served <00:24:30.525>independently

465
00:24:31.165 --> 00:24:32.825
<00:24:31.165>and <00:24:31.445>directly <00:24:31.725>from <00:24:32.004>the <00:24:32.284>N <00:24:32.565>modules.

466
00:24:33.685 --> 00:24:36.305
<00:24:33.685>And <00:24:33.965>eventually, <00:24:34.245>if <00:24:34.524>I <00:24:34.804>don't <00:24:35.085>want

467
00:24:36.305 --> 00:24:38.225
<00:24:36.305>to <00:24:36.538>install <00:24:36.771>them <00:24:37.005>in <00:24:37.238>my <00:24:37.471>non <00:24:37.705>modules,

468
00:24:38.305 --> 00:24:41.105
<00:24:38.305>I <00:24:38.480>could <00:24:38.655>also <00:24:38.830>serve <00:24:39.005>them <00:24:39.180>directly <00:24:39.355>from <00:24:39.530>A <00:24:39.705>CDN

469
00:24:41.685 --> 00:24:44.585
<00:24:41.685>by <00:24:41.885>just <00:24:42.085>pointing, <00:24:42.284>uh, <00:24:42.485>my <00:24:42.685>dev <00:24:42.885>tool <00:24:43.085>stack

470
00:24:44.605 --> 00:24:46.785
<00:24:44.605>and <00:24:44.805>saying, <00:24:45.005>okay, <00:24:45.205>I <00:24:45.405>want <00:24:45.605>to <00:24:45.805>load <00:24:46.005>React

471
00:24:46.805 --> 00:24:49.185
<00:24:46.805>and <00:24:46.945>I <00:24:47.085>don't <00:24:47.225>want <00:24:47.365>to <00:24:47.505>install <00:24:47.645>React <00:24:47.785>in <00:24:47.925>my <00:24:48.065>non <00:24:48.205>module,

472
00:24:49.365 --> 00:24:51.785
<00:24:49.365>but <00:24:49.598>you've <00:24:49.831>got <00:24:50.065>access <00:24:50.298>to <00:24:50.531>react, <00:24:50.765>uh,

473
00:24:51.785 --> 00:24:53.665
<00:24:51.785>JavaScript <00:24:52.135>file <00:24:52.485>in <00:24:52.835>this <00:24:53.185>cn.

474
00:24:53.665 --> 00:24:57.065
<00:24:53.665>So <00:24:53.781>go <00:24:53.898>grab <00:24:54.014>it <00:24:54.131>and <00:24:54.248>save <00:24:54.365>it <00:24:54.481>to <00:24:54.598>my <00:24:54.715>browser <00:24:54.831>and <00:24:54.948>that <00:24:55.065>sort,

475
00:24:57.065 --> 00:25:00.185
<00:24:57.065>because <00:24:57.240>once <00:24:57.415>again, <00:24:57.590>we <00:24:57.765>are <00:24:57.940>in <00:24:58.115>development <00:24:58.290>process, <00:24:58.465>so

476
00:25:01.125 --> 00:25:02.705
<00:25:01.125>we <00:25:01.358>don't <00:25:01.591>care <00:25:01.825>about <00:25:02.058>having <00:25:02.291>a <00:25:02.525>request.

477
00:25:02.965 --> 00:25:05.945
<00:25:02.965>Uh, <00:25:03.092>another <00:25:03.219>one, <00:25:03.346>uh, <00:25:03.474>this, <00:25:03.601>this <00:25:03.728>is <00:25:03.855>not <00:25:03.983>a <00:25:04.110>problem <00:25:04.237>for <00:25:04.365>us.

478
00:25:06.125 --> 00:25:09.665
<00:25:06.125>So, <00:25:06.252>uh, <00:25:06.379>we <00:25:06.506>will <00:25:06.634>use <00:25:06.761>the <00:25:06.888>SM <00:25:07.015>version <00:25:07.143>coming <00:25:07.270>from <00:25:07.397>the <00:25:07.525>cn,

479
00:25:09.665 --> 00:25:13.015
<00:25:09.665>and <00:25:09.792>that's <00:25:09.919>all <00:25:10.046>which <00:25:10.174>mean <00:25:10.301>that <00:25:10.428>I <00:25:10.555>should <00:25:10.683>be <00:25:10.810>able <00:25:10.937>to <00:25:11.065>write,

480
00:25:13.015 --> 00:25:15.655
<00:25:13.015>just <00:25:13.295>import <00:25:13.575>TY <00:25:13.855>from <00:25:14.135>Canvas <00:25:14.415>Canti

481
00:25:16.115 --> 00:25:18.695
<00:25:16.115>and <00:25:16.348>calling <00:25:16.581>it <00:25:16.815>in <00:25:17.048>my <00:25:17.281>JavaScript <00:25:17.515>file.

482
00:25:18.835 --> 00:25:20.775
<00:25:18.835>And <00:25:19.035>that's <00:25:19.235>all, <00:25:19.435>and <00:25:19.635>everything <00:25:19.835>should <00:25:20.035>be <00:25:20.235>working.

483
00:25:21.155 --> 00:25:22.575
<00:25:21.155>And <00:25:21.410>I <00:25:21.666>will <00:25:21.921>probably <00:25:22.177>don't <00:25:22.433>have

484
00:25:22.575 --> 00:25:25.615
<00:25:22.575>to <00:25:22.730>install <00:25:22.886>the <00:25:23.041>Canva <00:25:23.197>confetti <00:25:23.352>module <00:25:23.508>in <00:25:23.663>my <00:25:23.819>non <00:25:23.975>modules

485
00:25:25.615 --> 00:25:26.975
<00:25:25.615>because <00:25:25.921>everything <00:25:26.226>will <00:25:26.533>be <00:25:26.839>able

486
00:25:27.035 --> 00:25:29.415
<00:25:27.035>to <00:25:27.268>be <00:25:27.501>served <00:25:27.735>directly <00:25:27.968>from <00:25:28.201>the <00:25:28.435>CDM.

487
00:25:31.575 --> 00:25:34.395
<00:25:31.575>So <00:25:31.730>the <00:25:31.886>idea <00:25:32.041>beyond <00:25:32.197>behind, <00:25:32.352>uh, <00:25:32.508>all <00:25:32.663>of <00:25:32.819>that <00:25:32.975>is

488
00:25:34.395 --> 00:25:35.555
<00:25:34.395>that <00:25:34.656>we <00:25:34.917>are <00:25:35.178>using <00:25:35.439>an

489
00:25:36.435 --> 00:25:39.975
<00:25:36.435>and <00:25:36.668>request <00:25:36.901>build <00:25:37.135>process <00:25:37.368>rather <00:25:37.601>than, <00:25:37.835>uh,

490
00:25:40.455 --> 00:25:42.255
<00:25:40.455>a <00:25:40.735>complete <00:25:41.014>build <00:25:41.294>process, <00:25:41.574>which <00:25:41.855>mean

491
00:25:43.165 --> 00:25:44.365
<00:25:43.165>I <00:25:43.380>will <00:25:43.597>have <00:25:43.813>my <00:25:44.029>server <00:25:44.245>ready.

492
00:25:45.085 --> 00:25:48.885
<00:25:45.085>I <00:25:45.201>will <00:25:45.318>ask <00:25:45.435>with <00:25:45.551>an <00:25:45.668>HTTP <00:25:45.785>request <00:25:45.901>for <00:25:46.018>a <00:25:46.135>new, <00:25:46.251>a <00:25:46.368>new <00:25:46.485>content

493
00:25:49.115 --> 00:25:53.645
<00:25:49.115>that <00:25:49.242>is <00:25:49.369>my, <00:25:49.496>my, <00:25:49.624>uh, <00:25:49.751>n <00:25:49.878>JavaScript <00:25:50.005>file, <00:25:50.133>like <00:25:50.260>an <00:25:50.387>index <00:25:50.515>file

494
00:25:53.645 --> 00:25:56.805
<00:25:53.645>or <00:25:53.845>a <00:25:54.045>main <00:25:54.245>GS <00:25:54.445>file, <00:25:54.645>whatever <00:25:54.845>you <00:25:55.045>prefer.

495
00:25:57.995 --> 00:26:01.335
<00:25:57.995>And <00:25:58.169>this <00:25:58.344>entry <00:25:58.520>point <00:25:58.695>will <00:25:58.870>then <00:25:59.044>define <00:25:59.219>which <00:25:59.395>kind

496
00:26:01.335 --> 00:26:05.175
<00:26:01.335>of <00:26:01.451>route <00:26:01.568>i <00:26:01.685>i <00:26:01.801>will <00:26:01.918>be <00:26:02.035>used <00:26:02.151>in <00:26:02.268>my <00:26:02.385>application, <00:26:02.501>which <00:26:02.618>mean, <00:26:02.735>um,

497
00:26:05.795 --> 00:26:09.615
<00:26:05.795>am <00:26:05.970>I <00:26:06.145>in <00:26:06.320>my, <00:26:06.495>um, <00:26:06.670>in <00:26:06.845>my, <00:26:07.020>uh, <00:26:07.195>homepage

498
00:26:09.635 --> 00:26:13.655
<00:26:09.635>or <00:26:09.751>am <00:26:09.868>I <00:26:09.985>in <00:26:10.101>my, <00:26:10.218>uh, <00:26:10.335>user <00:26:10.451>view <00:26:10.568>or <00:26:10.685>my <00:26:10.801>user <00:26:10.918>profile <00:26:11.035>view

499
00:26:14.035 --> 00:26:15.095
<00:26:14.035>or <00:26:14.512>a <00:26:14.989>list

500
00:26:15.155 --> 00:26:19.135
<00:26:15.155>or <00:26:15.295>I <00:26:15.435>dunno <00:26:15.575>what, <00:26:15.715>uh, <00:26:15.855>this, <00:26:15.995>it <00:26:16.135>depends <00:26:16.274>on <00:26:16.415>your <00:26:16.555>application,

501
00:26:19.155 --> 00:26:23.055
<00:26:19.155>but <00:26:19.330>your <00:26:19.504>route <00:26:19.680>will <00:26:19.855>be, <00:26:20.030>um, <00:26:20.205>able <00:26:20.379>to <00:26:20.555>define

502
00:26:23.965 --> 00:26:25.875
<00:26:23.965>which <00:26:24.198>kind <00:26:24.431>of <00:26:24.665>modules <00:26:24.898>you <00:26:25.131>will <00:26:25.365>need

503
00:26:25.875 --> 00:26:28.955
<00:26:25.875>to <00:26:26.015>use <00:26:26.155>directly <00:26:26.295>in <00:26:26.435>your <00:26:26.575>final, <00:26:26.715>uh, <00:26:26.855>application <00:26:26.995>at <00:26:27.135>this <00:26:27.275>point

504
00:26:29.015 --> 00:26:32.395
<00:26:29.015>for <00:26:29.215>this <00:26:29.415>view <00:26:29.615>particularly, <00:26:29.815>which <00:26:30.015>means <00:26:30.215>your <00:26:30.415>own,

505
00:26:32.625 --> 00:26:35.755
<00:26:32.625>your <00:26:32.825>very <00:26:33.025>own <00:26:33.225>module <00:26:33.425>defining <00:26:33.625>your <00:26:33.825>final <00:26:34.025>view,

506
00:26:35.815 --> 00:26:39.555
<00:26:35.815>but <00:26:35.955>also <00:26:36.095>any <00:26:36.235>kind <00:26:36.375>of <00:26:36.515>external <00:26:36.655>modules <00:26:36.795>that <00:26:36.935>you <00:26:37.075>will <00:26:37.215>need

507
00:26:39.555 --> 00:26:43.565
<00:26:39.555>to <00:26:39.710>power <00:26:39.866>it <00:26:40.021>like <00:26:40.177>a <00:26:40.332>React <00:26:40.488>app, <00:26:40.643>like, <00:26:40.799>uh, <00:26:40.955>uh,

508
00:26:43.675 --> 00:26:46.005
<00:26:43.675>different <00:26:43.908>dependencies <00:26:44.141>like <00:26:44.375>that <00:26:44.608>you, <00:26:44.841>you <00:26:45.075>want

509
00:26:46.005 --> 00:26:47.045
<00:26:46.005>to <00:26:46.192>use <00:26:46.379>or <00:26:46.566>something <00:26:46.753>like <00:26:46.941>that.

510
00:26:47.505 --> 00:26:51.565
<00:26:47.505>The <00:26:47.705>fact <00:26:47.905>is <00:26:48.105>the <00:26:48.305>routing <00:26:48.505>process, <00:26:48.705>um, <00:26:48.905>uh,

511
00:26:52.105 --> 00:26:55.405
<00:26:52.105>is <00:26:52.338>finally <00:26:52.571>responsible <00:26:52.805>to <00:26:53.038>indicate <00:26:53.271>which <00:26:53.505>kind

512
00:26:55.405 --> 00:26:56.645
<00:26:55.405>of <00:26:55.628>module <00:26:55.851>we, <00:26:56.074>we <00:26:56.297>will <00:26:56.521>want.

513
00:26:56.715 --> 00:26:59.325
<00:26:56.715>This <00:26:56.915>is <00:26:57.115>where <00:26:57.314>the <00:26:57.514>dynamic <00:26:57.715>port <00:26:57.915>dynamic <00:26:58.115>import,

514
00:26:59.425 --> 00:27:03.325
<00:26:59.425>so <00:26:59.580>the <00:26:59.736>cuts <00:26:59.891>click <00:27:00.047>point, <00:27:00.202>uh, <00:27:00.358>is <00:27:00.513>applied, <00:27:00.669>which <00:27:00.825>mean

515
00:27:04.005 --> 00:27:07.805
<00:27:04.005>I <00:27:04.160>will <00:27:04.316>just <00:27:04.471>load <00:27:04.627>a <00:27:04.782>simple <00:27:04.938>subset <00:27:05.093>of <00:27:05.249>my <00:27:05.405>application

516
00:27:07.805 --> 00:27:09.765
<00:27:07.805>with <00:27:08.038>just <00:27:08.271>the <00:27:08.505>entry <00:27:08.738>point, <00:27:08.971>just <00:27:09.205>the,

517
00:27:10.225 --> 00:27:12.165
<00:27:10.225>the <00:27:10.504>overall <00:27:10.784>nutshell <00:27:11.064>of <00:27:11.344>my <00:27:11.625>application.

518
00:27:12.265 --> 00:27:14.205
<00:27:12.265>And <00:27:12.498>then <00:27:12.731>the <00:27:12.965>routine <00:27:13.198>will <00:27:13.431>be <00:27:13.665>responsible

519
00:27:14.205 --> 00:27:16.165
<00:27:14.205>to <00:27:14.379>just <00:27:14.554>load <00:27:14.730>the <00:27:14.905>different <00:27:15.080>part <00:27:15.254>of <00:27:15.429>my <00:27:15.605>application.

520
00:27:17.995 --> 00:27:20.135
<00:27:17.995>Um, <00:27:18.344>the <00:27:18.695>idea <00:27:19.044>is <00:27:19.395>that

521
00:27:20.715 --> 00:27:23.455
<00:27:20.715>we <00:27:21.064>will <00:27:21.415>define <00:27:21.764>each <00:27:22.115>component

522
00:27:23.455 --> 00:27:26.935
<00:27:23.455>of <00:27:23.655>our <00:27:23.855>application <00:27:24.054>in <00:27:24.254>a <00:27:24.455>component <00:27:24.655>development <00:27:24.855>oriented

523
00:27:27.085 --> 00:27:29.895
<00:27:27.085>process, <00:27:27.365>which <00:27:27.645>mean <00:27:27.925>single <00:27:28.205>file <00:27:28.485>approach.

524
00:27:30.355 --> 00:27:31.375
<00:27:30.355>Why <00:27:30.584>is <00:27:30.814>this <00:27:31.043>single <00:27:31.273>file?

525
00:27:31.375 --> 00:27:34.015
<00:27:31.375>Because <00:27:31.655>it'll <00:27:31.935>be <00:27:32.215>really <00:27:32.495>fast <00:27:32.775>built

526
00:27:34.015 --> 00:27:35.415
<00:27:34.015>because <00:27:34.267>we've <00:27:34.519>got <00:27:34.771>just <00:27:35.023>small <00:27:35.275>files.

527
00:27:35.635 --> 00:27:39.495
<00:27:35.635>So <00:27:35.775>a <00:27:35.915>small <00:27:36.055>file <00:27:36.195>will <00:27:36.335>be, <00:27:36.475>um, <00:27:36.615>quickly <00:27:36.754>bundle <00:27:36.895>and <00:27:37.035>packed

528
00:27:39.515 --> 00:27:41.375
<00:27:39.515>and <00:27:39.748>serve <00:27:39.981>directly, <00:27:40.215>uh, <00:27:40.448>in <00:27:40.681>the <00:27:40.915>browser.

529
00:27:42.045 --> 00:27:43.655
<00:27:42.045>This <00:27:42.395>approach <00:27:42.745>is <00:27:43.095>data <00:27:43.445>istic.

530
00:27:44.115 --> 00:27:45.255
<00:27:44.115>If <00:27:44.628>any <00:27:45.141>part

531
00:27:45.255 --> 00:27:48.375
<00:27:45.255>of <00:27:45.430>your <00:27:45.605>application <00:27:45.780>is <00:27:45.955>sandbox <00:27:46.130>in <00:27:46.305>a <00:27:46.480>small <00:27:46.655>component,

532
00:27:48.925 --> 00:27:50.535
<00:27:48.925>each <00:27:49.158>time <00:27:49.391>you <00:27:49.625>would <00:27:49.858>call <00:27:50.091>this <00:27:50.325>component,

533
00:27:50.535 --> 00:27:51.655
<00:27:50.535>you <00:27:50.736>would <00:27:50.938>get <00:27:51.139>the <00:27:51.341>same <00:27:51.543>result.

534
00:27:52.115 --> 00:27:55.415
<00:27:52.115>So <00:27:52.315>you <00:27:52.515>don't <00:27:52.715>have <00:27:52.915>a <00:27:53.115>context <00:27:53.315>dependent <00:27:53.515>environment,

535
00:27:55.415 --> 00:27:57.655
<00:27:55.415>which <00:27:55.695>means <00:27:55.975>every <00:27:56.254>time <00:27:56.534>your <00:27:56.815>content

536
00:27:57.915 --> 00:28:00.855
<00:27:57.915>or <00:27:58.115>your, <00:27:58.315>uh, <00:27:58.514>application <00:27:58.715>is <00:27:58.915>changing, <00:27:59.115>every <00:27:59.315>part

537
00:28:00.855 --> 00:28:02.775
<00:28:00.855>of <00:28:01.088>your <00:28:01.321>components <00:28:01.555>are <00:28:01.788>changing <00:28:02.021>or <00:28:02.255>not.

538
00:28:03.235 --> 00:28:05.095
<00:28:03.235>If <00:28:03.584>you <00:28:03.935>keep <00:28:04.284>everything <00:28:04.635>small

539
00:28:05.195 --> 00:28:08.215
<00:28:05.195>and <00:28:05.311>single, <00:28:05.428>you <00:28:05.544>will <00:28:05.661>be, <00:28:05.778>uh, <00:28:05.895>you <00:28:06.011>will <00:28:06.128>be <00:28:06.245>able <00:28:06.361>to <00:28:06.478>have <00:28:06.595>a,

540
00:28:08.255 --> 00:28:11.575
<00:28:08.255>a <00:28:08.430>real <00:28:08.605>deterministic <00:28:08.780>approach, <00:28:08.955>which, <00:28:09.130>which, <00:28:09.305>which <00:28:09.480>is <00:28:09.655>really

541
00:28:12.445 --> 00:28:15.305
<00:28:12.445>better <00:28:12.725>for, <00:28:13.004>um, <00:28:13.284>manageability <00:28:13.564>and <00:28:13.845>sustainability.

542
00:28:16.105 --> 00:28:17.485
<00:28:16.105>It <00:28:16.353>would <00:28:16.601>be <00:28:16.850>easy <00:28:17.098>to <00:28:17.347>debug

543
00:28:17.795 --> 00:28:21.695
<00:28:17.795>because <00:28:17.995>we, <00:28:18.195>we <00:28:18.395>will <00:28:18.595>not <00:28:18.795>deal <00:28:18.995>with <00:28:19.195>a

544
00:28:23.165 --> 00:28:24.815
<00:28:23.165>damn <00:28:23.631>source <00:28:24.098>maps <00:28:24.565>anymore

545
00:28:24.815 --> 00:28:28.415
<00:28:24.815>because <00:28:24.990>a <00:28:25.165>single <00:28:25.340>file <00:28:25.515>are <00:28:25.690>loaded <00:28:25.865>in <00:28:26.040>the <00:28:26.215>browser.

546
00:28:28.595 --> 00:28:33.175
<00:28:28.595>So <00:28:28.735>it <00:28:28.875>will <00:28:29.015>be <00:28:29.155>easy <00:28:29.295>to <00:28:29.435>understand <00:28:29.575>which <00:28:29.715>file <00:28:29.855>currently, <00:28:29.995>uh,

547
00:28:33.495 --> 00:28:36.615
<00:28:33.495>applying <00:28:33.669>some <00:28:33.844>changes <00:28:34.020>and <00:28:34.195>where, <00:28:34.370>where <00:28:34.544>is <00:28:34.719>the <00:28:34.895>bug

548
00:28:36.635 --> 00:28:38.535
<00:28:36.635>and <00:28:36.810>how <00:28:36.985>to <00:28:37.160>debug <00:28:37.335>it <00:28:37.510>and, <00:28:37.685>and <00:28:37.860>so <00:28:38.035>on.

549
00:28:39.435 --> 00:28:41.755
<00:28:39.435>F <00:28:39.635>speed <00:28:39.835>is <00:28:40.034>then <00:28:40.235>totally <00:28:40.435>unrelated <00:28:40.635>to <00:28:40.835>the,

550
00:28:41.775 --> 00:28:43.435
<00:28:41.775>to <00:28:42.125>the <00:28:42.475>final <00:28:42.825>campaigns <00:28:43.175>just

551
00:28:43.435 --> 00:28:48.375
<00:28:43.435>because <00:28:43.635>your <00:28:43.835>content, <00:28:44.034>uh, <00:28:44.235>in <00:28:44.435>your <00:28:44.635>application, <00:28:44.835>uh,

552
00:28:48.375 --> 00:28:52.055
<00:28:48.375>you, <00:28:48.491>you <00:28:48.608>could <00:28:48.725>be, <00:28:48.841>you <00:28:48.958>could <00:28:49.075>be, <00:28:49.191>um, <00:28:49.308>you <00:28:49.425>could <00:28:49.541>have <00:28:49.658>a <00:28:49.775>dozen

553
00:28:52.115 --> 00:28:55.535
<00:28:52.115>of <00:28:52.290>modules <00:28:52.465>or <00:28:52.640>just, <00:28:52.815>or <00:28:52.990>just <00:28:53.165>three <00:28:53.340>of <00:28:53.515>them.

554
00:28:55.995 --> 00:28:59.695
<00:28:55.995>Um, <00:28:56.169>you <00:28:56.344>could <00:28:56.520>use <00:28:56.695>any <00:28:56.870>kind <00:28:57.044>of <00:28:57.219>external <00:28:57.395>resources

555
00:28:59.695 --> 00:29:02.495
<00:28:59.695>that <00:28:59.850>you <00:29:00.006>want <00:29:00.161>or <00:29:00.317>just <00:29:00.472>a <00:29:00.628>few <00:29:00.783>bunches <00:29:00.939>of <00:29:01.095>them.

556
00:29:03.195 --> 00:29:07.615
<00:29:03.195>It <00:29:03.350>won't, <00:29:03.506>uh, <00:29:03.661>impact <00:29:03.817>the <00:29:03.972>final <00:29:04.128>time <00:29:04.283>of <00:29:04.439>processing <00:29:04.595>just

557
00:29:07.615 --> 00:29:10.335
<00:29:07.615>because <00:29:07.815>you <00:29:08.015>are <00:29:08.215>just <00:29:08.415>reloading <00:29:08.615>the <00:29:08.815>file, <00:29:09.015>you,

558
00:29:10.335 --> 00:29:11.455
<00:29:10.335>you've <00:29:10.839>just <00:29:11.342>modified.

559
00:29:11.955 --> 00:29:16.805
<00:29:11.955>So, <00:29:12.129>um, <00:29:12.304>you <00:29:12.480>won't, <00:29:12.655>uh, <00:29:12.830>bloat <00:29:13.004>your, <00:29:13.179>your, <00:29:13.355>uh,

560
00:29:16.835 --> 00:29:18.565
<00:29:16.835>your, <00:29:17.301>uh, <00:29:17.768>compiling <00:29:18.235>process

561
00:29:19.065 --> 00:29:20.085
<00:29:19.065>and <00:29:19.371>your <00:29:19.677>network <00:29:19.983>process

562
00:29:20.625 --> 00:29:22.485
<00:29:20.625>by <00:29:20.975>recompiling <00:29:21.325>the <00:29:21.675>overall <00:29:22.025>application.

563
00:29:22.545 --> 00:29:25.605
<00:29:22.545>So <00:29:22.745>it's <00:29:22.945>totally <00:29:23.145>independent <00:29:23.345>of <00:29:23.545>the, <00:29:23.745>the <00:29:23.945>size

564
00:29:25.605 --> 00:29:28.485
<00:29:25.605>of <00:29:25.745>your <00:29:25.885>cut <00:29:26.025>base, <00:29:26.165>which <00:29:26.305>means <00:29:26.445>it'll <00:29:26.585>be <00:29:26.725>really <00:29:26.865>fast, <00:29:27.005>even

565
00:29:29.065 --> 00:29:30.525
<00:29:29.065>not <00:29:29.393>very <00:29:29.722>large <00:29:30.050>cut <00:29:30.379>bases.

566
00:29:31.635 --> 00:29:33.015
<00:29:31.635>And <00:29:31.883>it'll <00:29:32.131>be <00:29:32.380>better <00:29:32.628>to <00:29:32.877>cache

567
00:29:33.015 --> 00:29:36.575
<00:29:33.015>because <00:29:33.215>if <00:29:33.415>we <00:29:33.615>use <00:29:33.815>single <00:29:34.015>file <00:29:34.215>approach, <00:29:34.415>um,

568
00:29:36.725 --> 00:29:40.495
<00:29:36.725>each <00:29:36.880>single <00:29:37.036>file <00:29:37.191>could <00:29:37.347>have <00:29:37.502>its <00:29:37.658>own <00:29:37.813>area <00:29:37.969>of <00:29:38.125>cache.

569
00:29:40.635 --> 00:29:43.605
<00:29:40.635>So <00:29:40.835>it'll <00:29:41.035>be <00:29:41.235>really, <00:29:41.435>really <00:29:41.635>easier <00:29:41.835>to, <00:29:42.035>um,

570
00:29:44.035 --> 00:29:45.285
<00:29:44.035>just <00:29:44.316>maintain <00:29:44.597>a <00:29:44.878>proper <00:29:45.160>cash

571
00:29:45.385 --> 00:29:46.725
<00:29:45.385>for <00:29:45.626>any <00:29:45.867>part <00:29:46.108>of <00:29:46.349>your <00:29:46.591>application.

572
00:29:47.615 --> 00:29:51.795
<00:29:47.615>The <00:29:47.755>idea <00:29:47.895>beyond <00:29:48.035>that <00:29:48.175>is, <00:29:48.315>um, <00:29:48.455>is <00:29:48.595>to <00:29:48.735>have <00:29:48.875>a, <00:29:49.015>uh,

573
00:29:51.935 --> 00:29:54.675
<00:29:51.935>an <00:29:52.284>unbundled <00:29:52.635>approach <00:29:52.985>with <00:29:53.335>webpac.

574
00:29:54.765 --> 00:29:59.555
<00:29:54.765>We've <00:29:54.905>got <00:29:55.045>a, <00:29:55.185>a <00:29:55.325>first <00:29:55.465>build <00:29:55.605>and <00:29:55.745>we <00:29:55.885>recompile <00:29:56.025>every <00:29:56.165>bundle.

575
00:30:00.455 --> 00:30:01.915
<00:30:00.455>So <00:30:00.717>it's <00:30:00.980>a <00:30:01.243>very <00:30:01.506>long <00:30:01.769>process.

576
00:30:02.375 --> 00:30:05.395
<00:30:02.375>And <00:30:02.530>when <00:30:02.686>we <00:30:02.841>change <00:30:02.997>a <00:30:03.152>file, <00:30:03.308>we <00:30:03.463>rebuild <00:30:03.619>the <00:30:03.775>file.

577
00:30:05.495 --> 00:30:06.915
<00:30:05.495>So <00:30:05.920>we <00:30:06.347>rebundle <00:30:06.773>everything

578
00:30:07.175 --> 00:30:09.515
<00:30:07.175>and <00:30:07.350>we <00:30:07.524>reset <00:30:07.700>the <00:30:07.875>whole <00:30:08.050>bundle <00:30:08.225>and <00:30:08.399>so <00:30:08.575>on.

579
00:30:10.055 --> 00:30:13.075
<00:30:10.055>So <00:30:10.210>every <00:30:10.366>part, <00:30:10.521>every <00:30:10.677>change <00:30:10.832>on <00:30:10.988>your <00:30:11.143>application <00:30:11.299>will <00:30:11.455>trigger

580
00:30:13.515 --> 00:30:16.195
<00:30:13.515>a <00:30:13.715>very <00:30:13.915>long <00:30:14.115>process <00:30:14.315>of <00:30:14.515>compiling <00:30:14.715>a <00:30:14.915>re

581
00:30:16.255 --> 00:30:20.355
<00:30:16.255>and <00:30:16.410>rebundling <00:30:16.566>of <00:30:16.721>any <00:30:16.877>part <00:30:17.032>of <00:30:17.188>your <00:30:17.343>application <00:30:17.499>with, <00:30:17.655>um,

582
00:30:20.455 --> 00:30:22.915
<00:30:20.455>an <00:30:20.655>unbundle <00:30:20.855>approach <00:30:21.054>with <00:30:21.254>a <00:30:21.455>single <00:30:21.655>file <00:30:21.855>approach.

583
00:30:23.145 --> 00:30:26.235
<00:30:23.145>Each <00:30:23.285>time <00:30:23.425>you <00:30:23.565>change <00:30:23.705>a <00:30:23.845>file, <00:30:23.985>you <00:30:24.125>rebuild <00:30:24.264>eventually <00:30:24.405>the <00:30:24.545>file

584
00:30:26.895 --> 00:30:29.355
<00:30:26.895>if, <00:30:27.095>if <00:30:27.295>it's <00:30:27.495>not <00:30:27.695>a <00:30:27.895>native <00:30:28.095>JavaScript, <00:30:28.295>but,

585
00:30:29.455 --> 00:30:31.915
<00:30:29.455>but <00:30:29.582>if <00:30:29.709>it's <00:30:29.836>types <00:30:29.964>scraped <00:30:30.091>or <00:30:30.218>JS <00:30:30.345>six <00:30:30.473>or <00:30:30.600>whatever <00:30:30.727>you <00:30:30.855>want,

586
00:30:32.455 --> 00:30:35.315
<00:30:32.455>and <00:30:32.629>you <00:30:32.804>will <00:30:32.980>serve <00:30:33.155>just <00:30:33.330>this <00:30:33.504>small <00:30:33.679>built <00:30:33.855>file.

587
00:30:35.455 --> 00:30:37.795
<00:30:35.455>So, <00:30:35.688>so <00:30:35.921>you, <00:30:36.155>you <00:30:36.388>have <00:30:36.621>just, <00:30:36.855>um,

588
00:30:38.235 --> 00:30:39.755
<00:30:38.235>a <00:30:38.577>really <00:30:38.919>small <00:30:39.261>computation <00:30:39.603>time.

589
00:30:40.025 --> 00:30:42.075
<00:30:40.025>Each <00:30:40.200>time <00:30:40.375>you <00:30:40.550>save <00:30:40.725>your <00:30:40.900>file, <00:30:41.075>you're <00:30:41.250>just <00:30:41.425>saving,

590
00:30:42.435 --> 00:30:43.955
<00:30:42.435>upgraded <00:30:42.777>content, <00:30:43.119>and <00:30:43.461>that's <00:30:43.803>all.

591
00:30:44.975 --> 00:30:49.075
<00:30:44.975>So <00:30:45.102>what <00:30:45.229>are <00:30:45.356>as <00:30:45.484>dev <00:30:45.611>tools <00:30:45.738>able <00:30:45.865>to <00:30:45.993>do <00:30:46.120>that <00:30:46.247>right <00:30:46.375>now?

592
00:30:49.775 --> 00:30:52.755
<00:30:49.775>Um, <00:30:49.975>we've <00:30:50.175>got, <00:30:50.375>uh, <00:30:50.575>probably <00:30:50.775>three <00:30:50.975>of <00:30:51.175>them.

593
00:30:53.435 --> 00:30:57.115
<00:30:53.435>Snopac <00:30:53.635>is <00:30:53.835>the <00:30:54.034>first <00:30:54.235>one. <00:30:54.435>Um, <00:30:54.635>the <00:30:54.835>way

594
00:30:57.345 --> 00:31:02.115
<00:30:57.345>with <00:30:57.520>this <00:30:57.695>very <00:30:57.870>new <00:30:58.045>approach <00:30:58.220>of <00:30:58.395>single <00:30:58.570>file, <00:30:58.745>um,

595
00:31:02.655 --> 00:31:06.355
<00:31:02.655>and, <00:31:02.830>and, <00:31:03.004>uh, <00:31:03.180>and <00:31:03.355>speed <00:31:03.530>cut, <00:31:03.705>um, <00:31:03.879>routing, <00:31:04.055>um,

596
00:31:06.585 --> 00:31:08.595
<00:31:06.585>it's <00:31:06.935>really <00:31:07.285>lightweight, <00:31:07.635>really <00:31:07.985>fast.

597
00:31:09.135 --> 00:31:10.635
<00:31:09.135>Um, <00:31:09.585>it's <00:31:10.035>totally <00:31:10.485>agnostic.

598
00:31:10.635 --> 00:31:13.835
<00:31:10.635>You <00:31:10.751>could <00:31:10.868>use <00:31:10.985>it <00:31:11.101>on <00:31:11.218>any <00:31:11.335>kind <00:31:11.451>of <00:31:11.568>project <00:31:11.685>that <00:31:11.801>you <00:31:11.918>want, <00:31:12.035>uh,

599
00:31:13.835 --> 00:31:17.035
<00:31:13.835>because <00:31:13.975>it's <00:31:14.115>not <00:31:14.255>dependent <00:31:14.395>of <00:31:14.535>the, <00:31:14.675>on <00:31:14.815>the, <00:31:14.955>of <00:31:15.095>the <00:31:15.235>framework.

600
00:31:17.135 --> 00:31:18.835
<00:31:17.135>So <00:31:17.415>we're <00:31:17.695>totally <00:31:17.975>free <00:31:18.254>with <00:31:18.535>that.

601
00:31:19.415 --> 00:31:22.435
<00:31:19.415>Um, <00:31:19.648>it's <00:31:19.881>still <00:31:20.115>use, <00:31:20.348>um, <00:31:20.581>web <00:31:20.815>pack

602
00:31:22.695 --> 00:31:25.475
<00:31:22.695>and <00:31:22.895>percell <00:31:23.095>for <00:31:23.294>the <00:31:23.495>build <00:31:23.695>process <00:31:23.895>for <00:31:24.095>production,

603
00:31:25.535 --> 00:31:28.715
<00:31:25.535>but <00:31:25.735>for <00:31:25.935>the <00:31:26.135>development <00:31:26.335>part, <00:31:26.535>um, <00:31:26.735>it <00:31:26.935>don't,

604
00:31:28.715 --> 00:31:30.155
<00:31:28.715>it <00:31:29.039>doesn't <00:31:29.362>use <00:31:29.687>them <00:31:30.011>anymore.

605
00:31:30.155 --> 00:31:33.155
<00:31:30.155>You've <00:31:30.295>gotta <00:31:30.435>plug <00:31:30.575>any <00:31:30.715>p <00:31:30.855>which <00:31:30.995>allow <00:31:31.135>you <00:31:31.274>to <00:31:31.415>extend <00:31:31.555>it.

606
00:31:33.815 --> 00:31:36.795
<00:31:33.815>Um, <00:31:34.165>and <00:31:34.515>it's <00:31:34.865>highly <00:31:35.215>configurable,

607
00:31:36.855 --> 00:31:40.915
<00:31:36.855>but <00:31:37.055>it's, <00:31:37.255>uh, <00:31:37.455>plugin <00:31:37.655>API <00:31:37.855>is, <00:31:38.055>um, <00:31:38.255>uh,

608
00:31:41.185 --> 00:31:42.275
<00:31:41.185>proprietary <00:31:42.166>one.

609
00:31:42.895 --> 00:31:46.235
<00:31:42.895>Uh, <00:31:43.022>so <00:31:43.149>you <00:31:43.276>probably <00:31:43.404>do <00:31:43.531>have <00:31:43.658>to <00:31:43.785>redevelop <00:31:43.913>any <00:31:44.040>kind <00:31:44.167>of <00:31:44.295>plugins

610
00:31:46.235 --> 00:31:48.355
<00:31:46.235>that <00:31:46.409>you <00:31:46.584>need <00:31:46.760>to <00:31:46.935>use <00:31:47.110>in <00:31:47.284>your <00:31:47.459>final <00:31:47.635>project.

611
00:31:48.455 --> 00:31:53.045
<00:31:48.455>So <00:31:48.629>if <00:31:48.804>your <00:31:48.980>current <00:31:49.155>project <00:31:49.330>is <00:31:49.504>depending <00:31:49.679>on <00:31:49.855>lot

612
00:31:53.305 --> 00:31:56.825
<00:31:53.305>of, <00:31:53.480>uh, <00:31:53.655>custom <00:31:53.830>plugins, <00:31:54.005>maybe <00:31:54.180>stop <00:31:54.355>is <00:31:54.530>not <00:31:54.705>the,

613
00:31:56.885 --> 00:31:58.505
<00:31:56.885>the <00:31:57.235>right <00:31:57.585>point <00:31:57.935>to <00:31:58.285>you.

614
00:31:59.275 --> 00:32:00.815
<00:31:59.275>Uh, <00:31:59.552>the <00:31:59.829>other <00:32:00.106>one <00:32:00.383>is <00:32:00.661>VI

615
00:32:01.035 --> 00:32:04.615
<00:32:01.035>and <00:32:01.175>VI <00:32:01.315>is <00:32:01.455>actually <00:32:01.595>the <00:32:01.735>leader <00:32:01.875>of <00:32:02.015>this, <00:32:02.155>uh, <00:32:02.295>new <00:32:02.435>approach.

616
00:32:04.805 --> 00:32:08.375
<00:32:04.805>It's <00:32:05.038>compatible <00:32:05.271>with, <00:32:05.505>um, <00:32:05.738>a <00:32:05.971>large <00:32:06.205>range

617
00:32:08.595 --> 00:32:09.815
<00:32:08.595>of, <00:32:09.144>uh, <00:32:09.693>framework.

618
00:32:09.995 --> 00:32:14.375
<00:32:09.995>And <00:32:10.135>the <00:32:10.274>team <00:32:10.415>behind <00:32:10.554>it <00:32:10.695>is <00:32:10.834>working <00:32:10.975>to <00:32:11.114>improve <00:32:11.254>the <00:32:11.395>support

619
00:32:14.475 --> 00:32:18.855
<00:32:14.475>of <00:32:14.675>other <00:32:14.875>frameworks <00:32:15.074>and, <00:32:15.274>um, <00:32:15.475>and, <00:32:15.675>and, <00:32:15.875>uh,

620
00:32:18.915 --> 00:32:21.855
<00:32:18.915>and <00:32:19.115>other <00:32:19.315>tools <00:32:19.514>as <00:32:19.715>we're, <00:32:19.915>uh, <00:32:20.115>currently <00:32:20.315>talking.

621
00:32:22.075 --> 00:32:25.455
<00:32:22.075>So <00:32:22.275>it's <00:32:22.475>compatible <00:32:22.675>with <00:32:22.875>View, <00:32:23.075>compatible <00:32:23.275>with <00:32:23.475>React

622
00:32:25.455 --> 00:32:28.655
<00:32:25.455>and <00:32:25.688>React <00:32:25.921>compatible <00:32:26.155>with <00:32:26.388>Belt, <00:32:26.621>with <00:32:26.855>Lead

623
00:32:28.655 --> 00:32:29.735
<00:32:28.655>and <00:32:29.140>web <00:32:29.627>components.

624
00:32:30.315 --> 00:32:34.215
<00:32:30.315>Um, <00:32:30.490>it <00:32:30.665>uses <00:32:30.840>ES <00:32:31.015>built <00:32:31.190>for <00:32:31.365>the <00:32:31.540>dev <00:32:31.715>process

625
00:32:34.995 --> 00:32:37.535
<00:32:34.995>and <00:32:35.228>still <00:32:35.461>use <00:32:35.695>Rollup <00:32:35.928>for <00:32:36.161>prediction <00:32:36.395>build,

626
00:32:37.715 --> 00:32:41.765
<00:32:37.715>but <00:32:37.855>they <00:32:37.995>will <00:32:38.135>probably <00:32:38.274>move, <00:32:38.415>uh, <00:32:38.554>very <00:32:38.695>soon <00:32:38.834>to <00:32:38.975>as <00:32:39.115>build

627
00:32:41.785 --> 00:32:44.525
<00:32:41.785>for <00:32:41.985>the <00:32:42.185>build, <00:32:42.385>uh, <00:32:42.585>production <00:32:42.785>build <00:32:42.985>process <00:32:43.185>too.

628
00:32:44.945 --> 00:32:47.245
<00:32:44.945>It <00:32:45.178>has <00:32:45.411>a <00:32:45.645>multi-page <00:32:45.878>support, <00:32:46.111>which <00:32:46.345>means

629
00:32:47.245 --> 00:32:50.445
<00:32:47.245>that <00:32:47.445>you <00:32:47.645>could <00:32:47.844>have <00:32:48.044>different <00:32:48.245>entry <00:32:48.445>points, <00:32:48.645>uh,

630
00:32:51.195 --> 00:32:53.765
<00:32:51.195>with <00:32:51.475>different <00:32:51.754>pages <00:32:52.034>in <00:32:52.314>single <00:32:52.595>application,

631
00:32:53.765 --> 00:32:57.205
<00:32:53.765>which <00:32:53.905>is <00:32:54.045>very <00:32:54.185>useful <00:32:54.325>if <00:32:54.465>you <00:32:54.605>are <00:32:54.745>not <00:32:54.885>developing <00:32:55.025>a <00:32:55.165>progressive

632
00:32:57.385 --> 00:32:59.885
<00:32:57.385>web <00:32:57.560>app, <00:32:57.735>but <00:32:57.910>a <00:32:58.085>website <00:32:58.260>or <00:32:58.435>something <00:32:58.610>like <00:32:58.785>that.

633
00:33:00.785 --> 00:33:04.845
<00:33:00.785>It <00:33:00.912>also <00:33:01.039>has <00:33:01.166>library <00:33:01.294>mode, <00:33:01.421>which <00:33:01.548>allow <00:33:01.675>you <00:33:01.803>to <00:33:01.930>use <00:33:02.057>it <00:33:02.185>even

634
00:33:04.985 --> 00:33:09.085
<00:33:04.985>to <00:33:05.140>build <00:33:05.296>and <00:33:05.451>develop <00:33:05.607>your <00:33:05.762>very <00:33:05.918>own <00:33:06.073>libraries <00:33:06.229>rather <00:33:06.385>than,

635
00:33:09.225 --> 00:33:12.285
<00:33:09.225>uh, <00:33:09.425>a <00:33:09.625>final <00:33:09.824>application <00:33:10.024>project <00:33:10.225>or <00:33:10.425>something <00:33:10.625>else.

636
00:33:12.385 --> 00:33:13.845
<00:33:12.385>So <00:33:12.713>it's <00:33:13.042>really, <00:33:13.370>really <00:33:13.699>nice.

637
00:33:14.035 --> 00:33:18.725
<00:33:14.035>It's <00:33:14.162>got, <00:33:14.289>um, <00:33:14.416>a <00:33:14.544>CSS <00:33:14.671>cut <00:33:14.798>splitting, <00:33:14.925>um, <00:33:15.053>tool, <00:33:15.180>which <00:33:15.307>mean <00:33:15.435>that

638
00:33:19.425 --> 00:33:23.725
<00:33:19.425>it <00:33:19.580>won't <00:33:19.736>pack <00:33:19.891>every <00:33:20.047>size <00:33:20.202>in <00:33:20.358>just <00:33:20.513>one <00:33:20.669>style <00:33:20.825>sheet,

639
00:33:23.825 --> 00:33:25.605
<00:33:23.825>but <00:33:24.175>you <00:33:24.525>could <00:33:24.875>sub <00:33:25.225>declare

640
00:33:25.825 --> 00:33:28.525
<00:33:25.825>and, <00:33:26.105>uh, <00:33:26.385>override, <00:33:26.665>uh, <00:33:26.945>some <00:33:27.225>part

641
00:33:28.525 --> 00:33:31.645
<00:33:28.525>of <00:33:28.725>your <00:33:28.925>global <00:33:29.125>size <00:33:29.325>in <00:33:29.525>different <00:33:29.725>components <00:33:29.925>style.

642
00:33:31.705 --> 00:33:35.245
<00:33:31.705>And <00:33:31.860>those <00:33:32.016>components <00:33:32.171>will <00:33:32.327>be <00:33:32.482>loaded <00:33:32.638>only <00:33:32.793>when <00:33:32.949>the <00:33:33.105>component

643
00:33:35.245 --> 00:33:40.005
<00:33:35.245>will <00:33:35.385>be, <00:33:35.524>uh, <00:33:35.665>gathered, <00:33:35.804>um, <00:33:35.945>by <00:33:36.084>the, <00:33:36.225>the, <00:33:36.364>the, <00:33:36.504>the <00:33:36.645>router

644
00:33:40.065 --> 00:33:41.525
<00:33:40.065>and <00:33:40.327>served <00:33:40.590>in <00:33:40.853>your <00:33:41.116>final <00:33:41.379>brother.

645
00:33:42.265 --> 00:33:45.245
<00:33:42.265>And, <00:33:42.405>um, <00:33:42.545>most <00:33:42.685>of <00:33:42.825>all, <00:33:42.965>it <00:33:43.105>has <00:33:43.245>a <00:33:43.385>standard <00:33:43.525>API <00:33:43.665>for,

646
00:33:45.305 --> 00:33:47.125
<00:33:45.305>for <00:33:45.538>its <00:33:45.771>plugins, <00:33:46.005>which <00:33:46.238>is <00:33:46.471>really <00:33:46.705>nice

647
00:33:47.195 --> 00:33:49.245
<00:33:47.195>because <00:33:47.428>it's <00:33:47.661>using <00:33:47.895>the, <00:33:48.128>the <00:33:48.361>same <00:33:48.595>kind

648
00:33:49.245 --> 00:33:50.725
<00:33:49.245>of <00:33:49.511>APIs <00:33:49.777>and <00:33:50.044>the <00:33:50.310>Rollup <00:33:50.577>API.

649
00:33:50.725 --> 00:33:55.285
<00:33:50.725>So <00:33:50.899>any <00:33:51.074>rollup <00:33:51.250>plugin <00:33:51.425>will <00:33:51.600>be <00:33:51.774>probably, <00:33:51.949>um, <00:33:52.125>compatible

650
00:33:55.315 --> 00:33:56.525
<00:33:55.315>with <00:33:55.678>the <00:33:56.041>big <00:33:56.404>ecosystem.

651
00:33:58.015 --> 00:34:01.955
<00:33:58.015>And, <00:33:58.142>uh, <00:33:58.269>on <00:33:58.396>the <00:33:58.524>other <00:33:58.651>side <00:33:58.778>we've <00:33:58.905>got <00:33:59.033>WMware, <00:33:59.160>which <00:33:59.287>is, <00:33:59.415>um,

652
00:34:02.815 --> 00:34:06.035
<00:34:02.815>really <00:34:02.990>a <00:34:03.165>tiny <00:34:03.340>project <00:34:03.515>coming <00:34:03.690>from <00:34:03.865>the <00:34:04.040>Preact <00:34:04.215>team.

653
00:34:06.615 --> 00:34:11.155
<00:34:06.615>Um, <00:34:06.755>it <00:34:06.895>support <00:34:07.035>native <00:34:07.175>import <00:34:07.315>from <00:34:07.455>NPM, <00:34:07.595>so <00:34:07.735>the <00:34:07.875>C <00:34:08.014>India,

654
00:34:11.215 --> 00:34:15.275
<00:34:11.215>the <00:34:11.415>CDN, <00:34:11.615>uh, <00:34:11.815>stuff <00:34:12.015>for <00:34:12.215>loading <00:34:12.415>modules <00:34:12.615>natively.

655
00:34:15.345 --> 00:34:17.515
<00:34:15.344>It's <00:34:15.578>also <00:34:15.811>available <00:34:16.044>in <00:34:16.278>VI <00:34:16.511>or <00:34:16.745>snowpack,

656
00:34:17.935 --> 00:34:20.715
<00:34:17.935>but <00:34:18.074>you <00:34:18.215>do <00:34:18.355>have <00:34:18.495>to, <00:34:18.634>to <00:34:18.775>configure <00:34:18.915>some <00:34:19.054>kind <00:34:19.195>of <00:34:19.335>plugins.

657
00:34:20.715 --> 00:34:22.875
<00:34:20.715>It's <00:34:20.948>totally <00:34:21.181>native <00:34:21.415>with, <00:34:21.648>uh, <00:34:21.881>WM <00:34:22.115>Air.

658
00:34:23.375 --> 00:34:25.715
<00:34:23.375>Um, <00:34:23.608>it <00:34:23.841>has <00:34:24.074>a <00:34:24.308>GS <00:34:24.541>six <00:34:24.775>debug

659
00:34:25.715 --> 00:34:27.595
<00:34:25.715>and <00:34:25.948>the <00:34:26.181>brother <00:34:26.415>with <00:34:26.648>native <00:34:26.881>CSS <00:34:27.115>modules.

660
00:34:27.905 --> 00:34:31.995
<00:34:27.905>It's <00:34:28.105>really <00:34:28.305>dedicated <00:34:28.505>to <00:34:28.705>react <00:34:28.905>and <00:34:29.105>react, <00:34:29.305>uh,

661
00:34:32.135 --> 00:34:34.115
<00:34:32.135>but <00:34:32.415>if <00:34:32.695>you <00:34:32.975>are <00:34:33.255>working <00:34:33.535>with,

662
00:34:34.305 --> 00:34:37.195
<00:34:34.304>with <00:34:34.538>those <00:34:34.771>technologies <00:34:35.004>right <00:34:35.238>now, <00:34:35.471>like <00:34:35.705>React

663
00:34:37.195 --> 00:34:40.995
<00:34:37.195>or <00:34:37.311>React, <00:34:37.428>um, <00:34:37.545>NGS <00:34:37.661>exists <00:34:37.778>is <00:34:37.895>probably <00:34:38.011>the <00:34:38.128>one <00:34:38.245>you <00:34:38.361>want <00:34:38.478>to <00:34:38.595>use

664
00:34:40.995 --> 00:34:44.155
<00:34:40.995>because <00:34:41.228>it's <00:34:41.461>clearly <00:34:41.694>dedicated <00:34:41.928>to <00:34:42.161>this <00:34:42.395>ecosystem.

665
00:34:44.415 --> 00:34:46.395
<00:34:44.415>If <00:34:44.614>you <00:34:44.815>are <00:34:45.014>looking <00:34:45.215>for <00:34:45.415>something <00:34:45.614>more <00:34:45.815>agnostic

666
00:34:47.015 --> 00:34:51.285
<00:34:47.014>and <00:34:47.170>more, <00:34:47.326>uh, <00:34:47.481>more <00:34:47.637>that <00:34:47.792>still <00:34:47.948>in <00:34:48.103>issues, <00:34:48.259>then <00:34:48.415>uh,

667
00:34:51.645 --> 00:34:54.805
<00:34:51.645>v <00:34:51.761>is <00:34:51.878>probably <00:34:51.995>the <00:34:52.111>one, <00:34:52.228>uh, <00:34:52.344>you <00:34:52.461>want <00:34:52.578>to <00:34:52.695>use <00:34:52.811>in <00:34:52.928>this <00:34:53.045>content.

668
00:34:55.825 --> 00:35:00.665
<00:34:55.824>Um, <00:34:55.980>one <00:34:56.136>thing <00:34:56.291>is <00:34:56.447>that <00:34:56.602>you <00:34:56.758>could <00:34:56.913>use <00:34:57.069>v <00:34:57.225>in

669
00:35:01.285 --> 00:35:02.465
<00:35:01.285>any <00:35:01.639>kind <00:35:01.993>of <00:35:02.347>content

670
00:35:02.685 --> 00:35:04.905
<00:35:02.685>and <00:35:02.840>any <00:35:02.996>kind <00:35:03.151>of <00:35:03.307>context, <00:35:03.462>even <00:35:03.618>as <00:35:03.773>a <00:35:03.929>backend <00:35:04.085>series.

671
00:35:05.485 --> 00:35:08.905
<00:35:05.485>Um, <00:35:05.685>what <00:35:05.885>we're <00:35:06.085>seeing <00:35:06.285>right <00:35:06.485>now <00:35:06.685>is <00:35:06.885>backlight.

672
00:35:08.905 --> 00:35:12.945
<00:35:08.905>Backlight <00:35:09.045>is, <00:35:09.185>um, <00:35:09.325>a <00:35:09.465>project, <00:35:09.605>uh, <00:35:09.745>my <00:35:09.885>company <00:35:10.025>is <00:35:10.165>working <00:35:10.305>for,

673
00:35:12.975 --> 00:35:14.265
<00:35:12.975>it's <00:35:13.265>a <00:35:13.555>design <00:35:13.845>system <00:35:14.136>editor.

674
00:35:15.045 --> 00:35:18.865
<00:35:15.045>So, <00:35:15.185>uh, <00:35:15.325>you've <00:35:15.465>got, <00:35:15.605>um, <00:35:15.745>an <00:35:15.885>online <00:35:16.025>editor, <00:35:16.165>uh, <00:35:16.305>divided <00:35:16.445>in,

675
00:35:18.885 --> 00:35:20.705
<00:35:18.885>in <00:35:19.118>three <00:35:19.351>parts, <00:35:19.585>and <00:35:19.818>you've <00:35:20.051>got <00:35:20.285>a,

676
00:35:21.185 --> 00:35:23.105
<00:35:21.185>a <00:35:21.465>tree <00:35:21.745>representation <00:35:22.025>of <00:35:22.305>your <00:35:22.585>components.

677
00:35:23.105 --> 00:35:25.065
<00:35:23.105>You've <00:35:23.305>got <00:35:23.505>a <00:35:23.705>code <00:35:23.905>auditor <00:35:24.105>into <00:35:24.305>middle <00:35:24.505>side,

678
00:35:25.085 --> 00:35:27.945
<00:35:25.085>and <00:35:25.240>you've <00:35:25.396>got <00:35:25.551>a <00:35:25.707>preview <00:35:25.862>part <00:35:26.018>on <00:35:26.173>the <00:35:26.329>right <00:35:26.485>side.

679
00:35:28.085 --> 00:35:31.945
<00:35:28.085>And <00:35:28.260>this <00:35:28.435>preview <00:35:28.610>part, <00:35:28.785>um, <00:35:28.960>allow <00:35:29.135>you <00:35:29.310>to <00:35:29.485>render

680
00:35:32.125 --> 00:35:34.985
<00:35:32.125>and <00:35:32.325>to <00:35:32.525>visualize <00:35:32.725>the <00:35:32.925>content <00:35:33.125>of <00:35:33.325>your, <00:35:33.525>uh,

681
00:35:34.985 --> 00:35:36.625
<00:35:34.985>different <00:35:35.265>components <00:35:35.545>and <00:35:35.825>the <00:35:36.105>different <00:35:36.385>part

682
00:35:36.625 --> 00:35:39.245
<00:35:36.625>of <00:35:36.858>your <00:35:37.091>components, <00:35:37.325>like <00:35:37.558>your <00:35:37.791>stories <00:35:38.025>in,

683
00:35:39.265 --> 00:35:42.245
<00:35:39.265>in <00:35:39.440>storybook <00:35:39.615>format, <00:35:39.790>your <00:35:39.964>documentation <00:35:40.140>in <00:35:40.315>an <00:35:40.490>everyday <00:35:40.665>X

684
00:35:42.245 --> 00:35:45.645
<00:35:42.245>format <00:35:42.400>or, <00:35:42.556>or <00:35:42.711>any <00:35:42.867>kind <00:35:43.022>of <00:35:43.178>format <00:35:43.333>that <00:35:43.489>you <00:35:43.645>want.

685
00:35:45.785 --> 00:35:48.845
<00:35:45.785>So <00:35:46.065>to <00:35:46.345>perform <00:35:46.625>this <00:35:46.904>rendering <00:35:47.185>content

686
00:35:48.985 --> 00:35:53.675
<00:35:48.985>and <00:35:49.140>this <00:35:49.296>rendering <00:35:49.451>panel, <00:35:49.607>we <00:35:49.762>do <00:35:49.918>need <00:35:50.073>something <00:35:50.229>to, <00:35:50.385>uh,

687
00:35:53.865 --> 00:35:57.115
<00:35:53.865>pack <00:35:54.020>your <00:35:54.176>design <00:35:54.331>system <00:35:54.487>vendor, <00:35:54.642>your <00:35:54.798>design <00:35:54.953>system <00:35:55.109>like <00:35:55.265>you,

688
00:35:57.215 --> 00:36:00.675
<00:35:57.215>you <00:35:57.448>do <00:35:57.681>in <00:35:57.915>your <00:35:58.148>very <00:35:58.381>own <00:35:58.615>application,

689
00:36:00.675 --> 00:36:01.875
<00:36:00.675>in <00:36:01.035>your <00:36:01.395>local <00:36:01.755>environment.

690
00:36:02.875 --> 00:36:06.175
<00:36:02.875>So, <00:36:03.075>um, <00:36:03.275>what <00:36:03.475>we're <00:36:03.675>doing <00:36:03.875>now <00:36:04.075>is <00:36:04.275>to

691
00:36:06.885 --> 00:36:09.695
<00:36:06.885>compile <00:36:07.085>every <00:36:07.285>part <00:36:07.485>of <00:36:07.685>the, <00:36:07.885>of <00:36:08.085>your <00:36:08.285>application,

692
00:36:09.695 --> 00:36:14.215
<00:36:09.695>of <00:36:09.850>your <00:36:10.006>design <00:36:10.161>system <00:36:10.317>in <00:36:10.472>the <00:36:10.628>city, <00:36:10.783>um, <00:36:10.939>directly <00:36:11.095>through

693
00:36:14.835 --> 00:36:18.215
<00:36:14.835>it <00:36:15.115>to <00:36:15.395>produce <00:36:15.675>the <00:36:15.955>final <00:36:16.235>application

694
00:36:18.355 --> 00:36:20.815
<00:36:18.355>and <00:36:18.588>serve <00:36:18.821>it <00:36:19.055>in <00:36:19.288>the <00:36:19.521>rendering <00:36:19.755>panel.

695
00:36:21.515 --> 00:36:25.675
<00:36:21.515>And <00:36:21.670>it's, <00:36:21.826>um, <00:36:21.981>it's, <00:36:22.137>uh, <00:36:22.292>really <00:36:22.448>an, <00:36:22.603>an <00:36:22.759>awesome <00:36:22.915>project

696
00:36:25.675 --> 00:36:30.435
<00:36:25.675>because, <00:36:25.830>um, <00:36:25.986>v <00:36:26.141>is <00:36:26.297>the <00:36:26.452>indicated <00:36:26.608>to <00:36:26.763>run, <00:36:26.919>uh, <00:36:27.075>headless,

697
00:36:30.575 --> 00:36:33.035
<00:36:30.575>so <00:36:30.714>on <00:36:30.855>the <00:36:30.995>server <00:36:31.134>side, <00:36:31.274>on <00:36:31.415>na <00:36:31.555>js <00:36:31.694>and <00:36:31.835>so <00:36:31.975>on,

698
00:36:33.335 --> 00:36:37.195
<00:36:33.335>but <00:36:33.462>we <00:36:33.589>don't <00:36:33.716>want <00:36:33.844>to <00:36:33.971>support, <00:36:34.098>uh, <00:36:34.225>any <00:36:34.353>kind <00:36:34.480>of <00:36:34.607>server, <00:36:34.735>uh,

699
00:36:37.225 --> 00:36:39.395
<00:36:37.225>processes, <00:36:37.691>uh, <00:36:38.158>with <00:36:38.625>backlight.

700
00:36:39.495 --> 00:36:41.395
<00:36:39.495>So <00:36:39.728>everything <00:36:39.961>is <00:36:40.194>run <00:36:40.428>in <00:36:40.661>the <00:36:40.895>browser.

701
00:36:41.535 --> 00:36:45.475
<00:36:41.535>So <00:36:41.674>we <00:36:41.815>product <00:36:41.955>the <00:36:42.095>it, <00:36:42.234>and <00:36:42.375>we <00:36:42.515>build <00:36:42.654>the <00:36:42.795>it, <00:36:42.935>um,

702
00:36:46.305 --> 00:36:48.275
<00:36:46.305>with <00:36:46.504>the <00:36:46.705>support <00:36:46.904>to <00:36:47.105>run <00:36:47.305>inner <00:36:47.504>service <00:36:47.705>worker.

703
00:36:48.495 --> 00:36:50.395
<00:36:48.495>So <00:36:48.728>in <00:36:48.961>the <00:36:49.194>browser <00:36:49.428>directly, <00:36:49.661>the <00:36:49.895>project,

704
00:36:50.735 --> 00:36:52.475
<00:36:50.735>the <00:36:51.085>project <00:36:51.435>is <00:36:51.785>named, <00:36:52.135>uh,

705
00:36:53.255 --> 00:36:57.515
<00:36:53.255>and, <00:36:53.455>um, <00:36:53.655>it'll <00:36:53.855>be <00:36:54.055>probably <00:36:54.255>used <00:36:54.455>soon, <00:36:54.655>um,

706
00:36:57.735 --> 00:37:01.635
<00:36:57.735>in <00:36:58.085>different <00:36:58.435>other, <00:36:58.785>uh, <00:36:59.135>builders,

707
00:37:01.635 --> 00:37:04.555
<00:37:01.635>static <00:37:01.790>builders <00:37:01.946>like, <00:37:02.101>uh, <00:37:02.257>like <00:37:02.412>Astro <00:37:02.568>or <00:37:02.723>something <00:37:02.879>like <00:37:03.035>that.

708
00:37:04.615 --> 00:37:07.315
<00:37:04.615>So <00:37:04.742>it's, <00:37:04.869>it's <00:37:04.996>a <00:37:05.124>really <00:37:05.251>hot <00:37:05.378>topic <00:37:05.505>and <00:37:05.633>a <00:37:05.760>really <00:37:05.887>hot <00:37:06.015>project,

709
00:37:07.375 --> 00:37:11.075
<00:37:07.375>but <00:37:07.550>you <00:37:07.725>could <00:37:07.900>use <00:37:08.075>V <00:37:08.250>to <00:37:08.425>power <00:37:08.600>any <00:37:08.775>kind

710
00:37:11.155 --> 00:37:12.555
<00:37:11.155>of <00:37:11.785>new <00:37:12.415>application

711
00:37:12.775 --> 00:37:14.835
<00:37:12.775>and <00:37:12.975>new, <00:37:13.175>uh, <00:37:13.375>dev <00:37:13.575>tools <00:37:13.775>that <00:37:13.975>you <00:37:14.175>want

712
00:37:15.225 --> 00:37:17.315
<00:37:15.225>that <00:37:15.575>need <00:37:15.924>fast <00:37:16.275>compilations <00:37:16.625>there.

713
00:37:18.935 --> 00:37:22.155
<00:37:18.935>So, <00:37:19.110>um, <00:37:19.285>is <00:37:19.460>it <00:37:19.634>odd? <00:37:19.810>Yes, <00:37:19.985>it <00:37:20.160>is <00:37:20.335>definitely.

714
00:37:22.535 --> 00:37:26.115
<00:37:22.535>Um, <00:37:22.710>we, <00:37:22.884>you <00:37:23.060>will <00:37:23.234>have <00:37:23.410>a <00:37:23.585>pleasantly <00:37:23.759>fast <00:37:23.935>experience

715
00:37:26.115 --> 00:37:30.425
<00:37:26.115>because <00:37:26.270>each <00:37:26.426>time <00:37:26.581>you <00:37:26.737>will <00:37:26.892>save <00:37:27.048>the <00:37:27.203>content, <00:37:27.359>your, <00:37:27.515>um,

716
00:37:30.675 --> 00:37:34.945
<00:37:30.675>final <00:37:30.815>rendering <00:37:30.955>will <00:37:31.095>be <00:37:31.235>updated <00:37:31.375>as <00:37:31.515>well, <00:37:31.655>just <00:37:31.795>in <00:37:31.935>a <00:37:32.075>snap.

717
00:37:35.045 --> 00:37:36.905
<00:37:35.045>So <00:37:35.395>it's <00:37:35.745>really, <00:37:36.095>really <00:37:36.445>impressive.

718
00:37:37.045 --> 00:37:40.185
<00:37:37.045>You've <00:37:37.220>got <00:37:37.395>a <00:37:37.570>native <00:37:37.745>HMR, <00:37:37.920>which <00:37:38.095>is <00:37:38.270>just <00:37:38.445>awesome.

719
00:37:40.765 --> 00:37:43.785
<00:37:40.765>Um, <00:37:40.920>and <00:37:41.076>a <00:37:41.231>quick <00:37:41.387>review, <00:37:41.542>even <00:37:41.698>a <00:37:41.853>large <00:37:42.009>code <00:37:42.165>basis,

720
00:37:44.205 --> 00:37:48.465
<00:37:44.205>you've <00:37:44.404>got <00:37:44.605>super <00:37:44.805>extended, <00:37:45.005>uh, <00:37:45.205>content <00:37:45.404>like <00:37:45.605>M-D-X-M-D-V,

721
00:37:49.045 --> 00:37:52.265
<00:37:49.045>uh, <00:37:49.325>MDGS, <00:37:49.605>whatever, <00:37:49.885>whatever <00:37:50.165>you <00:37:50.445>want.

722
00:37:52.925 --> 00:37:57.785
<00:37:52.925>Um, <00:37:53.065>and <00:37:53.205>the <00:37:53.345>cons <00:37:53.485>part, <00:37:53.625>it's <00:37:53.765>probably, <00:37:53.905>um, <00:37:54.045>more <00:37:54.185>error <00:37:54.325>prone

723
00:37:57.925 --> 00:38:00.345
<00:37:57.925>and, <00:37:58.205>uh, <00:37:58.485>con <00:37:58.765>analysis <00:37:59.045>for <00:37:59.325>dependencies.

724
00:38:01.335 --> 00:38:04.835
<00:38:01.335>Um, <00:38:01.510>uh, <00:38:01.685>in <00:38:01.860>our <00:38:02.035>implementation, <00:38:02.210>we, <00:38:02.385>we <00:38:02.560>had <00:38:02.735>to,

725
00:38:04.935 --> 00:38:06.835
<00:38:04.935>to <00:38:05.401>build <00:38:05.868>another <00:38:06.335>workers

726
00:38:07.095 --> 00:38:09.435
<00:38:07.095>to <00:38:07.328>implement <00:38:07.561>these <00:38:07.794>previews <00:38:08.028>and <00:38:08.261>so <00:38:08.495>on.

727
00:38:09.575 --> 00:38:13.435
<00:38:09.575>But, <00:38:09.730>um, <00:38:09.886>it's <00:38:10.041>definitely <00:38:10.197>a, <00:38:10.352>a <00:38:10.508>big <00:38:10.663>yes <00:38:10.819>in <00:38:10.975>the,

728
00:38:13.575 --> 00:38:16.875
<00:38:13.575>in <00:38:13.774>the <00:38:13.975>return <00:38:14.174>of <00:38:14.375>experience <00:38:14.575>with <00:38:14.774>Zeus <00:38:14.975>tools

729
00:38:16.935 --> 00:38:18.155
<00:38:16.935>and <00:38:17.484>especially <00:38:18.033>vet

730
00:38:18.155 --> 00:38:22.905
<00:38:18.155>because, <00:38:18.295>um, <00:38:18.435>you <00:38:18.575>will <00:38:18.715>never <00:38:18.855>want <00:38:18.995>to <00:38:19.135>go <00:38:19.275>back <00:38:19.415>to <00:38:19.555>another

731
00:38:23.445 --> 00:38:27.065
<00:38:23.445>dev <00:38:23.600>stack, <00:38:23.756>uh, <00:38:23.911>which <00:38:24.067>is <00:38:24.222>totally <00:38:24.378>bloated, <00:38:24.533>where <00:38:24.689>you <00:38:24.845>have

732
00:38:27.065 --> 00:38:30.105
<00:38:27.065>to <00:38:27.265>wait <00:38:27.465>indefinitely <00:38:27.665>for <00:38:27.865>just <00:38:28.065>having <00:38:28.265>something <00:38:28.465>updated

733
00:38:30.205 --> 00:38:33.625
<00:38:30.205>and <00:38:30.380>your <00:38:30.555>content <00:38:30.730>updated <00:38:30.904>in <00:38:31.080>your <00:38:31.255>final, <00:38:31.430>uh, <00:38:31.605>application.

734
00:38:33.955 --> 00:38:36.835
<00:38:33.955>Definitely <00:38:34.235>having <00:38:34.515>something <00:38:34.795>like <00:38:35.075>VI <00:38:35.355>is,

735
00:38:36.975 --> 00:38:39.985
<00:38:36.975>is <00:38:37.441>just <00:38:37.908>just <00:38:38.375>incredible.

736
00:38:40.125 --> 00:38:43.665
<00:38:40.125>In <00:38:40.280>terms <00:38:40.436>of <00:38:40.591>final <00:38:40.747>experience, <00:38:40.902>to <00:38:41.058>be <00:38:41.213>perfectly <00:38:41.369>honest, <00:38:41.525>the,

737
00:38:43.765 --> 00:38:47.585
<00:38:43.765>the <00:38:43.904>slides <00:38:44.045>for <00:38:44.185>this <00:38:44.325>talk <00:38:44.464>are <00:38:44.605>built <00:38:44.745>using <00:38:44.884>a <00:38:45.025>tool, <00:38:45.165>um,

738
00:38:47.675 --> 00:38:50.025
<00:38:47.675>slide <00:38:47.815>dev <00:38:47.955>and <00:38:48.095>slide <00:38:48.235>dev <00:38:48.375>is <00:38:48.515>a <00:38:48.655>tool <00:38:48.795>that <00:38:48.935>allow <00:38:49.075>you

739
00:38:50.025 --> 00:38:52.025
<00:38:50.025>to <00:38:50.225>define <00:38:50.425>your <00:38:50.625>slides <00:38:50.825>in <00:38:51.025>an <00:38:51.225>MDX <00:38:51.425>format,

740
00:38:52.565 --> 00:38:55.705
<00:38:52.565>and <00:38:52.740>it <00:38:52.915>is <00:38:53.090>using <00:38:53.265>vi <00:38:53.440>in <00:38:53.615>the <00:38:53.790>backend <00:38:53.965>produce.

741
00:38:56.045 --> 00:38:59.305
<00:38:56.045>Um, <00:38:56.200>and <00:38:56.356>to <00:38:56.511>power <00:38:56.667>the <00:38:56.822>whole, <00:38:56.978>uh, <00:38:57.133>dev <00:38:57.289>tool <00:38:57.445>stack

742
00:38:59.605 --> 00:39:01.265
<00:38:59.605>for <00:38:59.955>this <00:39:00.305>tool, <00:39:00.655>uh, <00:39:01.005>specifically

743
00:39:01.405 --> 00:39:04.825
<00:39:01.405>and <00:39:01.685>just, <00:39:01.965>uh, <00:39:02.245>an <00:39:02.525>incredible <00:39:02.805>experience.

744
00:39:04.925 --> 00:39:08.105
<00:39:04.925>You <00:39:05.080>just <00:39:05.236>have <00:39:05.391>to <00:39:05.547>update <00:39:05.702>your <00:39:05.858>content, <00:39:06.013>click <00:39:06.169>save, <00:39:06.325>boom,

745
00:39:08.175 --> 00:39:10.465
<00:39:08.175>your <00:39:08.375>content, <00:39:08.575>it's <00:39:08.775>instantly <00:39:08.975>updated <00:39:09.175>in <00:39:09.375>your <00:39:09.575>browser

746
00:39:11.165 --> 00:39:13.545
<00:39:11.165>and <00:39:11.445>you've <00:39:11.725>got <00:39:12.005>an <00:39:12.285>instant <00:39:12.565>startup.

747
00:39:13.815 --> 00:39:16.715
<00:39:13.815>It's, <00:39:14.095>it's <00:39:14.375>really, <00:39:14.655>really <00:39:14.935>almost <00:39:15.215>magical.

748
00:39:18.185 --> 00:39:21.985
<00:39:18.185>But <00:39:18.384>having <00:39:18.585>a, <00:39:18.785>um, <00:39:18.985>an <00:39:19.185>optimized <00:39:19.384>development <00:39:19.585>process

749
00:39:22.935 --> 00:39:25.745
<00:39:22.935>doesn't <00:39:23.168>mean <00:39:23.401>that, <00:39:23.634>um, <00:39:23.868>you <00:39:24.101>don't <00:39:24.335>have

750
00:39:25.745 --> 00:39:27.545
<00:39:25.745>to <00:39:26.025>care <00:39:26.305>about <00:39:26.585>your <00:39:26.865>final <00:39:27.145>process

751
00:39:27.645 --> 00:39:28.985
<00:39:27.645>and <00:39:27.886>your <00:39:28.127>final <00:39:28.368>production <00:39:28.609>as <00:39:28.851>well.

752
00:39:29.445 --> 00:39:33.825
<00:39:29.445>So <00:39:29.620>what <00:39:29.795>about <00:39:29.970>the <00:39:30.145>buildings <00:39:30.320>that <00:39:30.495>for <00:39:30.670>production, <00:39:30.845>um,

753
00:39:33.825 --> 00:39:36.225
<00:39:33.825>because <00:39:34.058>you're <00:39:34.291>probably <00:39:34.524>not <00:39:34.758>your <00:39:34.991>end <00:39:35.225>user

754
00:39:36.565 --> 00:39:40.585
<00:39:36.565>and <00:39:36.720>what <00:39:36.876>you <00:39:37.031>are <00:39:37.187>developing <00:39:37.342>your <00:39:37.498>progressive <00:39:37.653>web <00:39:37.809>app <00:39:37.965>or,

755
00:39:40.645 --> 00:39:41.785
<00:39:40.645>or <00:39:40.987>your <00:39:41.328>progressive <00:39:41.671>tool

756
00:39:41.785 --> 00:39:45.305
<00:39:41.785>or <00:39:41.984>whatever, <00:39:42.185>um, <00:39:42.384>will <00:39:42.585>probably <00:39:42.785>won't <00:39:42.984>be <00:39:43.185>used

757
00:39:45.365 --> 00:39:46.705
<00:39:45.365>by <00:39:45.968>developers <00:39:46.571>themselves,

758
00:39:46.805 --> 00:39:50.105
<00:39:46.805>but <00:39:47.004>are, <00:39:47.205>uh, <00:39:47.404>any <00:39:47.605>other <00:39:47.805>kind <00:39:48.004>of <00:39:48.205>people.

759
00:39:50.405 --> 00:39:53.945
<00:39:50.405>So <00:39:50.580>you <00:39:50.755>do <00:39:50.930>have <00:39:51.105>to <00:39:51.280>stay <00:39:51.455>focused <00:39:51.630>on <00:39:51.805>the

760
00:39:54.815 --> 00:39:57.185
<00:39:54.815>FMCs <00:39:55.015>stuff <00:39:55.215>and, <00:39:55.415>and, <00:39:55.615>and <00:39:55.815>the <00:39:56.015>final <00:39:56.215>build.

761
00:39:58.005 --> 00:40:01.945
<00:39:58.005>So <00:39:58.145>behind <00:39:58.285>the <00:39:58.425>hood, <00:39:58.565>all <00:39:58.705>the <00:39:58.845>tools <00:39:58.985>that <00:39:59.125>I <00:39:59.265>mentioned, <00:39:59.405>um,

762
00:40:02.585 --> 00:40:06.985
<00:40:02.585>snowpack, <00:40:02.760>wheat, <00:40:02.935>WMware, <00:40:03.110>they <00:40:03.285>are <00:40:03.460>all <00:40:03.635>using <00:40:03.810>roll <00:40:03.985>up

763
00:40:07.045 --> 00:40:11.945
<00:40:07.045>or <00:40:07.161>parcel <00:40:07.278>or <00:40:07.395>ES <00:40:07.511>build <00:40:07.628>in <00:40:07.745>the <00:40:07.861>back <00:40:07.978>to <00:40:08.095>produce <00:40:08.211>the <00:40:08.328>final <00:40:08.445>build

764
00:40:12.735 --> 00:40:13.905
<00:40:12.735>like <00:40:13.261>Webpack <00:40:13.788>does.

765
00:40:14.405 --> 00:40:17.985
<00:40:14.405>So, <00:40:14.580>um, <00:40:14.755>you <00:40:14.930>don't <00:40:15.105>have <00:40:15.280>to <00:40:15.455>be <00:40:15.630>worried <00:40:15.805>about

766
00:40:18.645 --> 00:40:22.825
<00:40:18.645>not <00:40:18.800>serving <00:40:18.956>an <00:40:19.111>optimized <00:40:19.267>bundle <00:40:19.422>to <00:40:19.578>your <00:40:19.733>final <00:40:19.889>users, <00:40:20.045>um,

767
00:40:23.495 --> 00:40:26.785
<00:40:23.495>that <00:40:23.670>this, <00:40:23.845>those <00:40:24.020>dev <00:40:24.194>tools <00:40:24.370>will <00:40:24.545>be <00:40:24.720>responsible <00:40:24.895>and,

768
00:40:26.885 --> 00:40:31.785
<00:40:26.885>and <00:40:27.012>they <00:40:27.139>do <00:40:27.266>it <00:40:27.394>well <00:40:27.521>to <00:40:27.648>produce <00:40:27.775>a, <00:40:27.903>a <00:40:28.030>really <00:40:28.157>optimized, <00:40:28.285>uh,

769
00:40:31.785 --> 00:40:33.065
<00:40:31.785>version <00:40:32.169>of <00:40:32.553>your <00:40:32.937>application.

770
00:40:33.605 --> 00:40:37.345
<00:40:33.605>You've <00:40:33.760>got <00:40:33.916>plugins, <00:40:34.071>uh, <00:40:34.227>super <00:40:34.382>for <00:40:34.538>any <00:40:34.693>of <00:40:34.849>those <00:40:35.005>tools.

771
00:40:37.365 --> 00:40:41.225
<00:40:37.365>So <00:40:37.504>you <00:40:37.645>could <00:40:37.785>plug <00:40:37.924>in <00:40:38.064>your, <00:40:38.205>uh, <00:40:38.345>in <00:40:38.484>your <00:40:38.625>final, <00:40:38.765>uh,

772
00:40:41.595 --> 00:40:44.025
<00:40:41.595>build <00:40:41.828>process, <00:40:42.061>any <00:40:42.294>kind <00:40:42.528>of <00:40:42.761>rollup <00:40:42.995>plugin

773
00:40:44.025 --> 00:40:47.835
<00:40:44.025>or <00:40:44.180>parcel <00:40:44.336>plug <00:40:44.491>into <00:40:44.647>will <00:40:44.802>need <00:40:44.958>to <00:40:45.113>use <00:40:45.269>some <00:40:45.425>changes.

774
00:40:49.235 --> 00:40:51.985
<00:40:49.235>It'll <00:40:49.435>optimize <00:40:49.635>for <00:40:49.835>production <00:40:50.035>with <00:40:50.235>a <00:40:50.435>brotherly <00:40:50.635>support.

775
00:40:52.555 --> 00:40:54.145
<00:40:52.555>It'll <00:40:52.835>do <00:40:53.115>all <00:40:53.395>the <00:40:53.674>cut <00:40:53.955>splitting

776
00:40:54.145 --> 00:40:55.625
<00:40:54.145>and <00:40:54.367>the <00:40:54.589>lazy <00:40:54.811>loading <00:40:55.033>stuff <00:40:55.255>for <00:40:55.477>you

777
00:40:55.645 --> 00:40:57.185
<00:40:55.645>so <00:40:55.843>you <00:40:56.041>don't <00:40:56.239>have <00:40:56.437>to <00:40:56.634>worry <00:40:56.833>about <00:40:57.031>it.

778
00:40:57.765 --> 00:41:00.585
<00:40:57.765>And <00:40:57.964>it'll <00:40:58.165>also <00:40:58.365>perform <00:40:58.565>sense <00:40:58.765>to <00:40:58.964>roll <00:40:59.165>up

779
00:41:00.585 --> 00:41:02.705
<00:41:00.585>and <00:41:00.818>para, <00:41:01.051>it'll <00:41:01.285>also <00:41:01.518>pair <00:41:01.751>some <00:41:01.985>perform

780
00:41:02.705 --> 00:41:03.745
<00:41:02.705>the <00:41:03.017>tree <00:41:03.328>shaking <00:41:03.641>stuff.

781
00:41:04.885 --> 00:41:07.385
<00:41:04.885>So <00:41:05.118>quick <00:41:05.351>reminder <00:41:05.585>about <00:41:05.818>the <00:41:06.051>tree <00:41:06.285>shaking.

782
00:41:07.565 --> 00:41:09.985
<00:41:07.565>The <00:41:07.765>idea <00:41:07.965>is <00:41:08.165>beyond <00:41:08.365>the <00:41:08.565>tree <00:41:08.765>shaking, <00:41:08.965>that

783
00:41:10.585 --> 00:41:11.765
<00:41:10.585>if <00:41:10.797>you <00:41:11.009>are <00:41:11.222>loading <00:41:11.434>a <00:41:11.647>lot

784
00:41:11.765 --> 00:41:13.925
<00:41:11.765>of <00:41:12.045>dependencies <00:41:12.325>in <00:41:12.605>your <00:41:12.884>final <00:41:13.165>application,

785
00:41:14.375 --> 00:41:16.205
<00:41:14.375>there <00:41:14.725>is <00:41:15.075>a <00:41:15.425>good <00:41:15.775>chance

786
00:41:16.315 --> 00:41:20.965
<00:41:16.315>that <00:41:16.548>you <00:41:16.781>won't <00:41:17.015>use <00:41:17.248>the <00:41:17.481>overall <00:41:17.715>features

787
00:41:20.985 --> 00:41:24.025
<00:41:20.985>of <00:41:21.218>your <00:41:21.451>final <00:41:21.685>modules <00:41:21.918>in <00:41:22.151>your <00:41:22.385>application.

788
00:41:24.365 --> 00:41:26.665
<00:41:24.365>You <00:41:24.564>will <00:41:24.765>probably <00:41:24.964>just <00:41:25.165>use <00:41:25.365>a <00:41:25.564>small <00:41:25.765>subset

789
00:41:26.965 --> 00:41:28.505
<00:41:26.965>of <00:41:27.242>it <00:41:27.519>in <00:41:27.796>your <00:41:28.073>final <00:41:28.351>app.

790
00:41:28.565 --> 00:41:32.425
<00:41:28.565>So <00:41:28.692>the <00:41:28.819>tree <00:41:28.946>shaking <00:41:29.074>is <00:41:29.201>just <00:41:29.328>a <00:41:29.455>process <00:41:29.583>in <00:41:29.710>the <00:41:29.837>build <00:41:29.965>process

791
00:41:32.615 --> 00:41:36.925
<00:41:32.615>that <00:41:32.790>is <00:41:32.964>identifying <00:41:33.140>the <00:41:33.314>part <00:41:33.490>of <00:41:33.665>your, <00:41:33.839>the <00:41:34.015>different

792
00:41:37.835 --> 00:41:40.475
<00:41:37.835>elements <00:41:38.010>of <00:41:38.185>your <00:41:38.360>code <00:41:38.535>base <00:41:38.710>in <00:41:38.885>your <00:41:39.060>own <00:41:39.235>module,

793
00:41:40.775 --> 00:41:44.555
<00:41:40.775>and <00:41:40.902>in <00:41:41.029>all <00:41:41.156>of <00:41:41.284>your <00:41:41.411>dependencies <00:41:41.538>that <00:41:41.665>you, <00:41:41.793>you <00:41:41.920>are <00:41:42.047>not <00:41:42.175>using,

794
00:41:45.095 --> 00:41:47.635
<00:41:45.095>um, <00:41:45.328>in <00:41:45.561>the <00:41:45.794>final, <00:41:46.028>uh, <00:41:46.261>production, <00:41:46.495>uh,

795
00:41:48.005 --> 00:41:50.195
<00:41:48.005>build <00:41:48.355>the <00:41:48.705>final <00:41:49.055>production <00:41:49.405>version,

796
00:41:50.775 --> 00:41:53.835
<00:41:50.775>and <00:41:50.950>there <00:41:51.125>are <00:41:51.300>avoiding <00:41:51.475>it <00:41:51.650>from <00:41:51.825>your <00:41:52.000>final, <00:41:52.175>um,

797
00:41:53.945 --> 00:41:55.195
<00:41:53.945>your <00:41:54.320>final <00:41:54.695>version <00:41:55.070>file.

798
00:41:56.485 --> 00:42:00.105
<00:41:56.485>So <00:41:56.640>by <00:41:56.796>eliminating <00:41:56.951>this <00:41:57.107>debt <00:41:57.262>card <00:41:57.418>from <00:41:57.573>your <00:41:57.729>code <00:41:57.885>base,

799
00:42:00.125 --> 00:42:02.585
<00:42:00.125>you <00:42:00.358>will <00:42:00.591>improve, <00:42:00.825>uh, <00:42:01.058>both <00:42:01.291>the <00:42:01.525>size

800
00:42:02.685 --> 00:42:04.585
<00:42:02.685>and <00:42:02.918>the <00:42:03.151>performance <00:42:03.384>of <00:42:03.618>your <00:42:03.851>final <00:42:04.085>application.

801
00:42:04.695 --> 00:42:06.345
<00:42:04.695>This <00:42:04.975>process <00:42:05.255>is <00:42:05.535>named <00:42:05.815>tree <00:42:06.095>shaking

802
00:42:06.655 --> 00:42:09.665
<00:42:06.655>because <00:42:06.855>it's <00:42:07.055>like <00:42:07.255>shaking <00:42:07.455>the <00:42:07.655>tree <00:42:07.855>to <00:42:08.055>just

803
00:42:09.925 --> 00:42:12.625
<00:42:09.925>for <00:42:10.158>all <00:42:10.391>day <00:42:10.625>the <00:42:10.858>data, <00:42:11.091>data <00:42:11.325>apples.

804
00:42:13.245 --> 00:42:16.785
<00:42:13.245>And, <00:42:13.400>um, <00:42:13.556>it'll <00:42:13.711>help <00:42:13.867>you <00:42:14.022>to <00:42:14.178>produce <00:42:14.333>a <00:42:14.489>better, <00:42:14.645>uh,

805
00:42:16.875 --> 00:42:20.345
<00:42:16.875>final <00:42:17.050>application, <00:42:17.225>uh, <00:42:17.400>for <00:42:17.575>your, <00:42:17.750>uh, <00:42:17.925>your <00:42:18.100>end <00:42:18.275>users.

806
00:42:20.565 --> 00:42:23.505
<00:42:20.565>So <00:42:20.720>those <00:42:20.876>dev <00:42:21.031>tools <00:42:21.187>will <00:42:21.342>perform <00:42:21.498>tree <00:42:21.653>shaking <00:42:21.809>on <00:42:21.965>it,

807
00:42:24.585 --> 00:42:27.565
<00:42:24.585>and <00:42:24.740>you, <00:42:24.896>you <00:42:25.051>are <00:42:25.207>allowed <00:42:25.362>to <00:42:25.518>extend <00:42:25.673>the <00:42:25.829>final <00:42:25.985>build.

808
00:42:27.905 --> 00:42:29.325
<00:42:27.905>You've <00:42:28.224>got <00:42:28.544>the <00:42:28.863>plugin <00:42:29.183>interface.

809
00:42:29.345 --> 00:42:31.405
<00:42:29.345>So <00:42:29.544>Snowpack <00:42:29.745>has <00:42:29.944>a <00:42:30.145>custom <00:42:30.345>API, <00:42:30.544>but <00:42:30.745>V

810
00:42:31.405 --> 00:42:34.405
<00:42:31.405>and <00:42:31.638>WMware <00:42:31.871>are <00:42:32.105>using, <00:42:32.338>uh, <00:42:32.571>rollup <00:42:32.805>plugins

811
00:42:34.405 --> 00:42:35.925
<00:42:34.405>or <00:42:34.861>rollup <00:42:35.317>compatibles <00:42:35.773>plugins.

812
00:42:35.925 --> 00:42:39.525
<00:42:35.925>So <00:42:36.158>if <00:42:36.391>you <00:42:36.625>used, <00:42:36.858>um, <00:42:37.091>custom <00:42:37.325>plugins

813
00:42:39.945 --> 00:42:43.805
<00:42:39.945>for <00:42:40.085>your <00:42:40.225>existing, <00:42:40.365>uh, <00:42:40.505>application, <00:42:40.645>you <00:42:40.785>want <00:42:40.925>to <00:42:41.065>migrate <00:42:41.205>to <00:42:41.345>V

814
00:42:43.945 --> 00:42:45.005
<00:42:43.945>or, <00:42:44.263>or, <00:42:44.581>or, <00:42:44.899>uh,

815
00:42:45.145 --> 00:42:48.445
<00:42:45.145>or, <00:42:45.272>uh, <00:42:45.399>any <00:42:45.526>other, <00:42:45.654>uh, <00:42:45.781>advanced <00:42:45.908>dev <00:42:46.035>to <00:42:46.163>the, <00:42:46.290>like <00:42:46.417>those <00:42:46.545>ones,

816
00:42:48.905 --> 00:42:52.195
<00:42:48.905>um, <00:42:49.185>it <00:42:49.465>won't <00:42:49.745>be <00:42:50.025>really <00:42:50.305>complex

817
00:42:52.255 --> 00:42:54.835
<00:42:52.255>to <00:42:52.488>port <00:42:52.721>your <00:42:52.955>existing <00:42:53.188>custom <00:42:53.421>plugin <00:42:53.655>to,

818
00:42:55.175 --> 00:42:56.275
<00:42:55.175>uh, <00:42:55.422>this <00:42:55.670>new <00:42:55.917>dev <00:42:56.165>stack.

819
00:42:56.275 --> 00:42:58.955
<00:42:56.275>Really <00:42:56.475>not. <00:42:56.675>Uh, <00:42:56.875>you've <00:42:57.075>got <00:42:57.275>an <00:42:57.475>asset, <00:42:57.675>uh,

820
00:42:58.955 --> 00:43:00.315
<00:42:58.955>support <00:42:59.261>from <00:42:59.567>an <00:42:59.873>external <00:43:00.179>assets.

821
00:43:00.935 --> 00:43:03.875
<00:43:00.935>So <00:43:01.090>it <00:43:01.246>would <00:43:01.401>be, <00:43:01.557>it <00:43:01.712>would <00:43:01.868>be <00:43:02.023>really, <00:43:02.179>really <00:43:02.335>easy

822
00:43:03.895 --> 00:43:05.115
<00:43:03.895>and <00:43:04.169>really <00:43:04.444>seamless <00:43:04.718>to <00:43:04.993>use,

823
00:43:05.695 --> 00:43:08.595
<00:43:05.695>and <00:43:05.895>you've <00:43:06.095>got <00:43:06.295>access <00:43:06.495>to <00:43:06.695>different <00:43:06.895>mixed <00:43:07.095>types.

824
00:43:08.735 --> 00:43:10.665
<00:43:08.735>So <00:43:09.435>feel <00:43:10.135>free

825
00:43:10.665 --> 00:43:14.305
<00:43:10.665>to <00:43:10.840>just <00:43:11.015>implement <00:43:11.190>whatever <00:43:11.365>is <00:43:11.540>really <00:43:11.715>useful <00:43:11.890>for <00:43:12.065>you,

826
00:43:14.525 --> 00:43:17.705
<00:43:14.525>and <00:43:14.665>the <00:43:14.805>tool <00:43:14.945>will <00:43:15.085>handle <00:43:15.225>everything <00:43:15.365>in <00:43:15.505>the <00:43:15.645>process <00:43:15.785>for <00:43:15.925>you.

827
00:43:17.725 --> 00:43:18.865
<00:43:17.725>You <00:43:17.895>don't <00:43:18.067>have <00:43:18.238>to <00:43:18.408>worry <00:43:18.580>about <00:43:18.750>it.

828
00:43:20.395 --> 00:43:23.655
<00:43:20.395>So <00:43:20.595>it's, <00:43:20.795>um, <00:43:20.995>a <00:43:21.195>really <00:43:21.395>great <00:43:21.595>new <00:43:21.795>generation

829
00:43:23.655 --> 00:43:26.735
<00:43:23.655>of <00:43:23.855>dev <00:43:24.055>tools <00:43:24.255>built <00:43:24.455>by <00:43:24.655>really <00:43:24.855>great <00:43:25.055>communities

830
00:43:26.735 --> 00:43:30.295
<00:43:26.735>because <00:43:26.935>it's <00:43:27.135>not <00:43:27.335>coming <00:43:27.535>from, <00:43:27.735>um, <00:43:27.935>high <00:43:28.135>vendors,

831
00:43:31.115 --> 00:43:33.815
<00:43:31.115>but <00:43:31.314>it's <00:43:31.515>coming <00:43:31.714>from <00:43:31.915>the <00:43:32.115>Sky <00:43:32.314>Pack <00:43:32.515>community

832
00:43:34.035 --> 00:43:36.655
<00:43:34.035>or <00:43:34.234>the <00:43:34.435>fuss <00:43:34.634>community <00:43:34.835>or <00:43:35.035>the <00:43:35.234>pre-ACT <00:43:35.435>communities.

833
00:43:37.285 --> 00:43:41.615
<00:43:37.285>So, <00:43:37.484>um, <00:43:37.685>this <00:43:37.884>is <00:43:38.085>really <00:43:38.285>dev <00:43:38.484>tools, <00:43:38.685>um,

834
00:43:42.045 --> 00:43:46.215
<00:43:42.045>that <00:43:42.278>were <00:43:42.511>taught <00:43:42.745>by <00:43:42.978>developers <00:43:43.211>for <00:43:43.445>developers,

835
00:43:46.545 --> 00:43:49.175
<00:43:46.545>which <00:43:46.895>definitely <00:43:47.245>improve <00:43:47.595>the <00:43:47.945>final

836
00:43:49.225 --> 00:43:50.975
<00:43:49.225>experience, <00:43:49.505>uh, <00:43:49.785>of <00:43:50.065>all <00:43:50.345>of <00:43:50.625>it.

837
00:43:51.595 --> 00:43:56.415
<00:43:51.595>Um, <00:43:51.734>it <00:43:51.875>allow <00:43:52.015>us <00:43:52.154>also <00:43:52.294>to <00:43:52.435>have, <00:43:52.575>um, <00:43:52.714>new <00:43:52.855>era <00:43:52.995>of,

838
00:43:56.595 --> 00:44:00.655
<00:43:56.595>uh, <00:43:56.794>ESM <00:43:56.995>oriented <00:43:57.194>registries <00:43:57.395>allowing <00:43:57.595>you <00:43:57.794>to, <00:43:57.995>um,

839
00:44:01.235 --> 00:44:03.495
<00:44:01.235>get <00:44:01.515>your <00:44:01.795>modules, <00:44:02.075>your <00:44:02.355>external <00:44:02.635>dependencies,

840
00:44:03.495 --> 00:44:06.215
<00:44:03.495>and <00:44:03.670>your <00:44:03.845>external <00:44:04.020>modules <00:44:04.194>directly <00:44:04.370>take <00:44:04.545>mass <00:44:04.720>script <00:44:04.895>format

841
00:44:06.675 --> 00:44:09.775
<00:44:06.675>rather <00:44:06.908>than <00:44:07.141>using, <00:44:07.375>um, <00:44:07.608>uh, <00:44:07.841>the, <00:44:08.075>uh,

842
00:44:10.615 --> 00:44:11.855
<00:44:10.615>previous <00:44:10.987>legacy <00:44:11.359>command <00:44:11.731>gs.

843
00:44:12.635 --> 00:44:14.615
<00:44:12.635>So <00:44:12.835>we've <00:44:13.035>got <00:44:13.235>more, <00:44:13.435>um, <00:44:13.635>we've <00:44:13.835>got, <00:44:14.035>um,

844
00:44:15.175 --> 00:44:18.695
<00:44:15.175>advanced <00:44:15.408>registries <00:44:15.641>like <00:44:15.875>Sky <00:44:16.108>Pack, <00:44:16.341>like <00:44:16.575>E-S-M-S-H,

845
00:44:18.695 --> 00:44:21.455
<00:44:18.695>which <00:44:18.895>is <00:44:19.095>maintained <00:44:19.295>by <00:44:19.495>the, <00:44:19.695>the <00:44:19.895>LF <00:44:20.095>team,

846
00:44:21.465 --> 00:44:25.135
<00:44:21.465>which <00:44:21.605>is <00:44:21.745>responsible <00:44:21.885>for <00:44:22.025>a, <00:44:22.165>a <00:44:22.305>very <00:44:22.445>good <00:44:22.585>framework <00:44:22.725>for <00:44:22.865>Dino,

847
00:44:25.225 --> 00:44:27.335
<00:44:25.225>which <00:44:25.458>is <00:44:25.691>doing <00:44:25.924>exactly <00:44:26.158>the <00:44:26.391>same <00:44:26.625>thing

848
00:44:27.515 --> 00:44:29.895
<00:44:27.515>by <00:44:27.714>not <00:44:27.915>loading <00:44:28.115>the <00:44:28.315>content <00:44:28.515>from <00:44:28.714>no <00:44:28.915>modules,

849
00:44:29.895 --> 00:44:31.565
<00:44:29.895>but <00:44:30.245>loading <00:44:30.595>from <00:44:30.945>CDNs <00:44:31.295>directly.

850
00:44:31.745 --> 00:44:35.285
<00:44:31.745>You've <00:44:31.872>got <00:44:31.999>GSPM, <00:44:32.126>you've <00:44:32.254>got <00:44:32.381>NPKG, <00:44:32.508>we've <00:44:32.635>got <00:44:32.763>a <00:44:32.890>lot <00:44:33.017>of <00:44:33.145>them,

851
00:44:35.665 --> 00:44:39.645
<00:44:35.665>and <00:44:35.840>we've <00:44:36.015>got <00:44:36.190>really <00:44:36.365>nice <00:44:36.540>new <00:44:36.715>advanced, <00:44:36.890>uh, <00:44:37.065>tools

852
00:44:39.665 --> 00:44:44.125
<00:44:39.665>and <00:44:39.805>dev <00:44:39.945>tools <00:44:40.085>like <00:44:40.225>big <00:44:40.365>press <00:44:40.505>for <00:44:40.645>generating <00:44:40.785>some <00:44:40.925>kind <00:44:41.065>of

853
00:44:44.785 --> 00:44:48.205
<00:44:44.785>log <00:44:44.924>content <00:44:45.065>slide <00:44:45.205>dev <00:44:45.345>that <00:44:45.484>I <00:44:45.625>mentioned <00:44:45.765>to, <00:44:45.904>to <00:44:46.045>perform, <00:44:46.185>uh,

854
00:44:48.225 --> 00:44:51.605
<00:44:48.225>new <00:44:48.424>slide <00:44:48.625>v <00:44:48.825>shoot <00:44:49.025>that <00:44:49.225>is <00:44:49.424>generated <00:44:49.625>screenshot

855
00:44:51.605 --> 00:44:53.445
<00:44:51.605>of <00:44:51.955>your <00:44:52.305>different <00:44:52.655>application <00:44:53.005>Astro

856
00:44:53.585 --> 00:44:57.445
<00:44:53.585>or <00:44:53.785>e <00:44:53.985>of <00:44:54.185>are <00:44:54.385>static <00:44:54.585>generators <00:44:54.785>builders, <00:44:54.985>um,

857
00:44:58.285 --> 00:45:00.925
<00:44:58.285>focusing <00:44:58.634>on, <00:44:58.984>um, <00:44:59.335>partial <00:44:59.685>duration

858
00:45:01.625 --> 00:45:03.685
<00:45:01.625>if <00:45:01.858>you <00:45:02.091>never <00:45:02.325>learn <00:45:02.558>about <00:45:02.791>partial <00:45:03.025>iteration

859
00:45:03.785 --> 00:45:07.085
<00:45:03.785>or <00:45:04.018>never <00:45:04.251>heard <00:45:04.484>about <00:45:04.718>it, <00:45:04.951>um, <00:45:05.185>UNE

860
00:45:07.085 --> 00:45:09.765
<00:45:07.085>because <00:45:07.260>this <00:45:07.435>is <00:45:07.610>definitely <00:45:07.785>the <00:45:07.960>future <00:45:08.135>of <00:45:08.310>generating <00:45:08.485>cotton

861
00:45:09.865 --> 00:45:12.925
<00:45:09.865>for <00:45:10.020>the <00:45:10.176>web <00:45:10.331>and <00:45:10.487>Zeus <00:45:10.642>tools <00:45:10.798>are <00:45:10.953>all <00:45:11.109>powered <00:45:11.265>by.

862
00:45:13.585 --> 00:45:18.005
<00:45:13.585>So <00:45:13.712>this <00:45:13.839>is <00:45:13.966>a, <00:45:14.094>a <00:45:14.221>really <00:45:14.348>new <00:45:14.475>area <00:45:14.603>of <00:45:14.730>new <00:45:14.857>advanced <00:45:14.985>tools

863
00:45:18.025 --> 00:45:19.165
<00:45:18.025>and <00:45:18.281>this <00:45:18.538>is <00:45:18.794>really <00:45:19.051>exciting.

864
00:45:20.135 --> 00:45:24.775
<00:45:20.135>Uh, <00:45:20.275>so <00:45:20.415>what <00:45:20.555>about <00:45:20.695>migrating <00:45:20.835>your <00:45:20.975>existing <00:45:21.115>cut <00:45:21.255>base <00:45:21.395>to, <00:45:21.535>um,

865
00:45:25.315 --> 00:45:27.495
<00:45:25.315>to, <00:45:25.595>uh, <00:45:25.875>Zeus <00:45:26.155>new <00:45:26.435>dev <00:45:26.715>tools?

866
00:45:28.075 --> 00:45:31.535
<00:45:28.075>Um, <00:45:28.355>your <00:45:28.634>imports <00:45:28.915>will <00:45:29.194>still <00:45:29.475>work

867
00:45:31.535 --> 00:45:33.295
<00:45:31.535>because <00:45:31.884>if <00:45:32.234>you <00:45:32.585>are, <00:45:32.935>uh,

868
00:45:33.295 --> 00:45:35.975
<00:45:33.295>already <00:45:33.470>importing <00:45:33.645>in <00:45:33.820>the <00:45:33.995>MA <00:45:34.170>script <00:45:34.345>format, <00:45:34.520>it <00:45:34.695>will,

869
00:45:36.145 --> 00:45:39.175
<00:45:36.145>it'll <00:45:36.320>still <00:45:36.495>working <00:45:36.670>if <00:45:36.845>you <00:45:37.020>are <00:45:37.195>doing <00:45:37.370>some <00:45:37.545>requires,

870
00:45:39.195 --> 00:45:42.415
<00:45:39.195>so <00:45:39.335>come <00:45:39.475>GS <00:45:39.615>format, <00:45:39.755>you <00:45:39.895>just <00:45:40.035>have <00:45:40.175>to <00:45:40.315>convert <00:45:40.455>to <00:45:40.595>imports.

871
00:45:42.415 --> 00:45:44.975
<00:45:42.415>So <00:45:42.590>it <00:45:42.765>won't <00:45:42.940>be, <00:45:43.115>uh, <00:45:43.290>really <00:45:43.465>complex <00:45:43.640>at <00:45:43.815>all.

872
00:45:45.935 --> 00:45:48.415
<00:45:45.935>Probably <00:45:46.090>have <00:45:46.246>some <00:45:46.401>few <00:45:46.557>adjustments <00:45:46.712>of <00:45:46.868>the <00:45:47.023>edges <00:45:47.179>too, <00:45:47.335>make,

873
00:45:48.635 --> 00:45:52.855
<00:45:48.635>so <00:45:48.810>probably <00:45:48.985>some <00:45:49.160>Alia <00:45:49.335>is, <00:45:49.510>uh, <00:45:49.685>new <00:45:49.860>ES <00:45:50.035>definitions

874
00:45:52.855 --> 00:45:55.055
<00:45:52.855>or <00:45:53.055>something <00:45:53.255>like <00:45:53.455>that, <00:45:53.655>but <00:45:53.855>it <00:45:54.055>won't <00:45:54.255>be

875
00:45:55.055 --> 00:45:56.175
<00:45:55.055>a <00:45:55.307>big <00:45:55.559>deal, <00:45:55.811>trust <00:45:56.063>me.

876
00:45:56.675 --> 00:45:59.375
<00:45:56.675>And <00:45:56.830>you <00:45:56.986>will <00:45:57.141>have <00:45:57.297>to <00:45:57.452>update <00:45:57.608>the <00:45:57.763>mgen <00:45:57.919>script <00:45:58.075>just

877
00:45:59.395 --> 00:46:02.495
<00:45:59.395>to <00:45:59.595>remove <00:45:59.795>your <00:45:59.995>existing <00:46:00.195>web <00:46:00.395>bag <00:46:00.595>dev <00:46:00.795>stuff

878
00:46:02.595 --> 00:46:06.015
<00:46:02.595>and <00:46:02.828>replace <00:46:03.061>it <00:46:03.294>with <00:46:03.528>V <00:46:03.761>command <00:46:03.995>line.

879
00:46:06.015 --> 00:46:09.015
<00:46:06.015>And <00:46:06.190>that's <00:46:06.365>all. <00:46:06.540>Just <00:46:06.714>drop <00:46:06.890>the <00:46:07.065>web <00:46:07.240>pack <00:46:07.415>file

880
00:46:09.155 --> 00:46:11.175
<00:46:09.155>and <00:46:09.435>drop <00:46:09.715>web <00:46:09.995>pack, <00:46:10.275>trash <00:46:10.555>it,

881
00:46:11.635 --> 00:46:15.535
<00:46:11.635>and <00:46:11.790>add <00:46:11.946>new <00:46:12.101>V <00:46:12.257>dot <00:46:12.412>config <00:46:12.568>Gs <00:46:12.723>or <00:46:12.879>ts <00:46:13.035>file.

882
00:46:16.245 --> 00:46:19.505
<00:46:16.245>And <00:46:16.384>in <00:46:16.525>this <00:46:16.665>v <00:46:16.805>config, <00:46:16.944>you <00:46:17.085>just <00:46:17.225>have <00:46:17.365>to <00:46:17.505>import <00:46:17.645>it.

883
00:46:19.505 --> 00:46:23.865
<00:46:19.505>Default <00:46:19.680>define <00:46:19.855>config <00:46:20.030>tool, <00:46:20.205>um, <00:46:20.380>import <00:46:20.555>the <00:46:20.730>different <00:46:20.905>plugins

884
00:46:23.865 --> 00:46:25.905
<00:46:23.865>that <00:46:24.040>you <00:46:24.214>want <00:46:24.390>to <00:46:24.564>use <00:46:24.740>in <00:46:24.915>your <00:46:25.089>final <00:46:25.265>application.

885
00:46:26.295 --> 00:46:28.905
<00:46:26.295>Declare <00:46:26.450>them <00:46:26.606>in <00:46:26.761>in <00:46:26.917>the <00:46:27.072>final <00:46:27.228>file. <00:46:27.383>And <00:46:27.539>that's <00:46:27.695>all.

886
00:46:28.955 --> 00:46:32.985
<00:46:28.955>Everything <00:46:29.110>in <00:46:29.266>VI <00:46:29.421>is <00:46:29.577>working <00:46:29.732>by <00:46:29.888>default <00:46:30.043>and <00:46:30.199>by <00:46:30.355>design.

887
00:46:33.445 --> 00:46:37.445
<00:46:33.445>Um, <00:46:33.585>there <00:46:33.725>is <00:46:33.865>a <00:46:34.005>lot <00:46:34.145>of, <00:46:34.285>um, <00:46:34.425>uh, <00:46:34.565>default <00:46:34.705>opinionated <00:46:34.845>choices

888
00:46:38.145 --> 00:46:42.365
<00:46:38.145>up, <00:46:38.320>um, <00:46:38.495>that <00:46:38.670>will <00:46:38.845>be, <00:46:39.020>um, <00:46:39.195>best <00:46:39.370>ones <00:46:39.545>for

889
00:46:43.385 --> 00:46:47.515
<00:46:43.385>90% <00:46:43.618>of <00:46:43.851>your, <00:46:44.085>uh, <00:46:44.318>your <00:46:44.551>development <00:46:44.785>context.

890
00:46:48.215 --> 00:46:53.195
<00:46:48.215>So <00:46:48.342>don't <00:46:48.469>be <00:46:48.596>aware <00:46:48.724>about <00:46:48.851>that. <00:46:48.978>Just <00:46:49.105>use <00:46:49.233>a <00:46:49.360>day <00:46:49.487>config <00:46:49.615>quick.

891
00:46:53.215 --> 00:46:56.235
<00:46:53.215>It <00:46:53.342>just <00:46:53.469>on <00:46:53.596>few <00:46:53.724>parts. <00:46:53.851>And <00:46:53.978>that's <00:46:54.105>all <00:46:54.233>we <00:46:54.360>did <00:46:54.487>it <00:46:54.615>for.

892
00:46:56.295 --> 00:47:00.675
<00:46:56.295>Um, <00:46:56.450>an <00:46:56.606>open <00:46:56.761>source <00:46:56.917>application <00:46:57.072>named <00:46:57.228>Crisis, <00:46:57.383>uh, <00:46:57.539>crisis <00:46:57.695>is,

893
00:47:00.795 --> 00:47:03.835
<00:47:00.795>is <00:47:00.950>a, <00:47:01.106>a <00:47:01.261>financial <00:47:01.417>app, <00:47:01.572>an <00:47:01.728>open <00:47:01.883>source <00:47:02.039>financial <00:47:02.195>app.

894
00:47:04.135 --> 00:47:07.035
<00:47:04.135>And <00:47:04.335>the <00:47:04.535>team <00:47:04.735>behind <00:47:04.935>Crisis <00:47:05.135>was <00:47:05.335>were, <00:47:05.535>uh,

895
00:47:07.555 --> 00:47:10.875
<00:47:07.555>a <00:47:07.694>bit <00:47:07.835>worried <00:47:07.975>each <00:47:08.115>time <00:47:08.254>they <00:47:08.395>had <00:47:08.535>to <00:47:08.674>upgrade <00:47:08.815>webpac, <00:47:08.955>uh,

896
00:47:10.895 --> 00:47:13.155
<00:47:10.895>to <00:47:11.035>have <00:47:11.175>to <00:47:11.315>deal <00:47:11.455>with <00:47:11.595>the <00:47:11.735>webpac <00:47:11.875>config <00:47:12.015>and <00:47:12.155>so <00:47:12.295>on.

897
00:47:13.535 --> 00:47:16.515
<00:47:13.535>So, <00:47:13.768>um, <00:47:14.001>so <00:47:14.234>we <00:47:14.468>wanted <00:47:14.701>to <00:47:14.935>try,

898
00:47:16.855 --> 00:47:19.835
<00:47:16.855>if <00:47:16.995>we <00:47:17.135>could <00:47:17.275>migrate <00:47:17.415>the <00:47:17.555>whole <00:47:17.695>code <00:47:17.835>base, <00:47:17.975>which <00:47:18.115>is <00:47:18.255>a,

899
00:47:19.915 --> 00:47:21.715
<00:47:19.915>a <00:47:20.195>very <00:47:20.475>large <00:47:20.755>code <00:47:21.035>base, <00:47:21.315>um,

900
00:47:21.715 --> 00:47:24.595
<00:47:21.715>because <00:47:21.870>it, <00:47:22.026>it's <00:47:22.181>a, <00:47:22.337>it's <00:47:22.492>a, <00:47:22.648>uh, <00:47:22.803>an <00:47:22.959>old <00:47:23.115>one,

901
00:47:25.115 --> 00:47:27.595
<00:47:25.115>probably <00:47:25.348>six <00:47:25.581>years <00:47:25.814>old, <00:47:26.048>uh, <00:47:26.281>cut <00:47:26.515>base

902
00:47:27.595 --> 00:47:28.635
<00:47:27.595>or <00:47:27.782>something <00:47:27.969>like <00:47:28.156>that, <00:47:28.343>like <00:47:28.531>that.

903
00:47:28.735 --> 00:47:30.485
<00:47:28.735>So, <00:47:29.015>so <00:47:29.295>really <00:47:29.575>a <00:47:29.855>legacy <00:47:30.135>one,

904
00:47:30.985 --> 00:47:34.205
<00:47:30.985>and <00:47:31.112>we <00:47:31.239>wanted <00:47:31.366>to <00:47:31.494>see <00:47:31.621>if <00:47:31.748>we <00:47:31.875>could <00:47:32.003>rate <00:47:32.130>it <00:47:32.257>to <00:47:32.385>vi.

905
00:47:35.145 --> 00:47:39.835
<00:47:35.145>Um, <00:47:35.300>it <00:47:35.456>took <00:47:35.611>us <00:47:35.767>something <00:47:35.922>like <00:47:36.078>two <00:47:36.233>hours <00:47:36.389>and <00:47:36.545>mainly

906
00:47:39.835 --> 00:47:42.635
<00:47:39.835>because <00:47:39.990>we <00:47:40.146>had <00:47:40.301>to <00:47:40.457>move <00:47:40.612>some <00:47:40.768>assets <00:47:40.923>at <00:47:41.079>some <00:47:41.235>point,

907
00:47:43.055 --> 00:47:46.395
<00:47:43.055>but <00:47:43.254>just <00:47:43.455>dealing <00:47:43.654>with <00:47:43.855>the, <00:47:44.055>the <00:47:44.254>alias <00:47:44.455>resolving

908
00:47:46.535 --> 00:47:48.765
<00:47:46.535>or <00:47:46.884>imports, <00:47:47.234>we're <00:47:47.585>still <00:47:47.935>working.

909
00:47:48.905 --> 00:47:51.365
<00:47:48.905>And <00:47:49.032>if <00:47:49.159>you <00:47:49.286>have <00:47:49.414>a <00:47:49.541>look <00:47:49.668>at <00:47:49.795>the, <00:47:49.923>the <00:47:50.050>merge <00:47:50.177>request, <00:47:50.305>uh,

910
00:47:51.365 --> 00:47:55.585
<00:47:51.365>that <00:47:51.504>is <00:47:51.645>linked <00:47:51.785>just <00:47:51.924>here, <00:47:52.064>you <00:47:52.205>will <00:47:52.345>see <00:47:52.484>that <00:47:52.625>the, <00:47:52.765>the,

911
00:47:55.765 --> 00:47:59.345
<00:47:55.765>the <00:47:55.904>most <00:47:56.045>important <00:47:56.185>change <00:47:56.325>in <00:47:56.464>just <00:47:56.605>dropping <00:47:56.745>the <00:47:56.884>web <00:47:57.025>pack <00:47:57.165>file

912
00:47:59.445 --> 00:48:01.505
<00:47:59.445>and <00:47:59.678>adding <00:47:59.911>the <00:48:00.145>default <00:48:00.378>v <00:48:00.611>config <00:48:00.845>file

913
00:48:01.695 --> 00:48:04.705
<00:48:01.695>with <00:48:01.850>just <00:48:02.006>two <00:48:02.161>plugins <00:48:02.317>in <00:48:02.472>it <00:48:02.628>just <00:48:02.783>to <00:48:02.939>support, <00:48:03.095>um,

914
00:48:05.105 --> 00:48:07.065
<00:48:05.105>SVG <00:48:05.455>Sprites <00:48:05.805>and <00:48:06.155>that's <00:48:06.505>all.

915
00:48:07.325 --> 00:48:11.715
<00:48:07.325>And <00:48:07.480>everything <00:48:07.636>worked <00:48:07.791>out <00:48:07.947>of <00:48:08.102>the <00:48:08.258>box <00:48:08.413>was <00:48:08.569>just <00:48:08.725>really,

916
00:48:12.465 --> 00:48:13.525
<00:48:12.465>really <00:48:13.419>impressive.

917
00:48:13.985 --> 00:48:17.485
<00:48:13.985>And, <00:48:14.140>and <00:48:14.296>probably <00:48:14.451>migrating <00:48:14.607>your <00:48:14.762>own <00:48:14.918>code <00:48:15.073>that <00:48:15.229>won't <00:48:15.385>be

918
00:48:18.145 --> 00:48:21.285
<00:48:18.145>as <00:48:18.320>complex <00:48:18.495>as <00:48:18.670>just <00:48:18.845>we <00:48:19.020>did <00:48:19.195>on <00:48:19.370>this <00:48:19.545>app.

919
00:48:21.505 --> 00:48:25.415
<00:48:21.505>Uh, <00:48:21.705>specifically, <00:48:21.905>um, <00:48:22.105>thank <00:48:22.305>you <00:48:22.505>for, <00:48:22.705>uh, <00:48:22.905>everything.

920
00:48:25.465 --> 00:48:28.695
<00:48:25.465>Thank <00:48:25.620>you <00:48:25.776>for <00:48:25.931>being <00:48:26.087>here <00:48:26.242>with <00:48:26.398>me. <00:48:26.553>Um, <00:48:26.709>I'm <00:48:26.865>mad.

921
00:48:28.915 --> 00:48:31.535
<00:48:28.915>I'm <00:48:29.195>principal <00:48:29.475>developer <00:48:29.755>advocate <00:48:30.035>at <00:48:30.315>Rios.

922
00:48:31.955 --> 00:48:34.255
<00:48:31.955>We <00:48:32.188>have <00:48:32.421>the, <00:48:32.654>the <00:48:32.888>makers <00:48:33.121>of <00:48:33.355>Backlight,

923
00:48:34.255 --> 00:48:36.975
<00:48:34.255>which <00:48:34.395>is <00:48:34.535>a <00:48:34.675>design <00:48:34.815>system <00:48:34.955>tools <00:48:35.095>that <00:48:35.235>I <00:48:35.375>showed <00:48:35.515>you <00:48:35.655>in,

924
00:48:36.995 --> 00:48:38.375
<00:48:36.995>in <00:48:37.305>the, <00:48:37.616>in <00:48:37.926>the <00:48:38.237>to.

925
00:48:38.555 --> 00:48:43.135
<00:48:38.555>And, <00:48:38.694>um, <00:48:38.835>we <00:48:38.975>are <00:48:39.115>using <00:48:39.254>Zeus <00:48:39.395>advanced <00:48:39.535>tools <00:48:39.674>like <00:48:39.815>this, <00:48:39.955>even

926
00:48:43.275 --> 00:48:46.485
<00:48:43.275>for <00:48:43.508>our <00:48:43.741>own <00:48:43.975>code <00:48:44.208>base <00:48:44.441>and, <00:48:44.675>uh,

927
00:48:47.185 --> 00:48:49.205
<00:48:47.185>and <00:48:47.360>the <00:48:47.535>tools <00:48:47.710>that <00:48:47.884>we <00:48:48.060>are, <00:48:48.235>we <00:48:48.410>are <00:48:48.585>producing.

928
00:48:49.225 --> 00:48:52.925
<00:48:49.225>So, <00:48:49.380>so <00:48:49.536>even <00:48:49.691>for <00:48:49.847>our <00:48:50.002>websites, <00:48:50.158>even <00:48:50.313>for <00:48:50.469>our <00:48:50.625>documentation,

929
00:48:53.035 --> 00:48:55.525
<00:48:53.035>even <00:48:53.315>for, <00:48:53.595>um, <00:48:53.875>the <00:48:54.154>product <00:48:54.435>itself

930
00:48:55.665 --> 00:48:57.685
<00:48:55.665>and <00:48:55.898>the <00:48:56.131>rendering <00:48:56.365>context <00:48:56.598>of <00:48:56.831>the <00:48:57.065>product,

931
00:48:57.705 --> 00:48:59.285
<00:48:57.705>of <00:48:58.055>your <00:48:58.404>design <00:48:58.755>system, <00:48:59.105>um,

932
00:48:59.465 --> 00:49:02.325
<00:48:59.465>we <00:48:59.665>use <00:48:59.865>it <00:49:00.065>almost <00:49:00.265>everywhere <00:49:00.465>in <00:49:00.665>our <00:49:00.865>application

933
00:49:02.465 --> 00:49:06.445
<00:49:02.465>and <00:49:02.620>was <00:49:02.776>definitely <00:49:02.931>a <00:49:03.087>game <00:49:03.242>changer <00:49:03.398>in <00:49:03.553>our <00:49:03.709>overall <00:49:03.865>developer

934
00:49:06.445 --> 00:49:09.605
<00:49:06.445>experience <00:49:06.725>without <00:49:07.005>sacrificing <00:49:07.285>the <00:49:07.565>final, <00:49:07.845>uh,

935
00:49:09.755 --> 00:49:11.325
<00:49:09.755>user <00:49:10.455>experience <00:49:11.155>persons.

936
00:49:12.025 --> 00:49:16.405
<00:49:12.025>So, <00:49:12.141>um, <00:49:12.258>yes, <00:49:12.375>uh, <00:49:12.491>let's <00:49:12.608>have <00:49:12.725>a <00:49:12.841>look <00:49:12.958>at <00:49:13.075>it. <00:49:13.191>Uh, <00:49:13.308>try <00:49:13.425>it.

937
00:49:16.435 --> 00:49:18.965
<00:49:16.435>It's, <00:49:16.590>uh, <00:49:16.746>definitely <00:49:16.901>the <00:49:17.057>future <00:49:17.212>of <00:49:17.368>building <00:49:17.523>for <00:49:17.679>the <00:49:17.835>web.

938
00:49:19.585 --> 00:49:24.165
<00:49:19.585>So, <00:49:19.712>um, <00:49:19.839>just <00:49:19.966>keep <00:49:20.094>in <00:49:20.221>mind <00:49:20.348>that <00:49:20.475>what, <00:49:20.603>uh, <00:49:20.730>judge <00:49:20.857>Orwell <00:49:20.985>said

939
00:49:24.265 --> 00:49:25.925
<00:49:24.265>who <00:49:24.498>control <00:49:24.731>the <00:49:24.964>past <00:49:25.198>controls <00:49:25.431>the <00:49:25.665>future.

940
00:49:26.345 --> 00:49:29.285
<00:49:26.345>It <00:49:26.544>was <00:49:26.745>because <00:49:26.944>we <00:49:27.145>had <00:49:27.345>support <00:49:27.544>these, <00:49:27.745>uh,

941
00:49:29.285 --> 00:49:32.965
<00:49:29.285>backward <00:49:29.484>compatibility <00:49:29.685>that <00:49:29.884>we <00:49:30.085>made, <00:49:30.285>those <00:49:30.484>big <00:49:30.685>amount

942
00:49:33.025 --> 00:49:37.645
<00:49:33.025>of <00:49:33.165>dev <00:49:33.305>tools, <00:49:33.445>but <00:49:33.585>those <00:49:33.725>bloated <00:49:33.865>dev <00:49:34.005>tools <00:49:34.145>like <00:49:34.285>Webpac <00:49:34.425>arent,

943
00:49:37.945 --> 00:49:42.685
<00:49:37.945>um, <00:49:38.145>aren't <00:49:38.345>mandatory <00:49:38.545>anymore, <00:49:38.745>develop <00:49:38.945>new <00:49:39.145>web <00:49:39.345>application,

944
00:49:42.785 --> 00:49:44.325
<00:49:42.785>and <00:49:43.131>we <00:49:43.478>are <00:49:43.824>not <00:49:44.171>able,

945
00:49:44.325 --> 00:49:47.325
<00:49:44.325>because <00:49:44.524>the <00:49:44.725>browsers <00:49:44.924>evolved, <00:49:45.125>we <00:49:45.325>are <00:49:45.524>not <00:49:45.725>able

946
00:49:47.385 --> 00:49:51.365
<00:49:47.385>to <00:49:47.560>move <00:49:47.735>our <00:49:47.910>dev <00:49:48.085>stack <00:49:48.260>to <00:49:48.435>something <00:49:48.610>more <00:49:48.785>easier

947
00:49:51.585 --> 00:49:52.965
<00:49:51.585>for <00:49:51.999>us <00:49:52.413>as <00:49:52.827>developers.

948
00:49:52.985 --> 00:49:54.805
<00:49:52.985>So <00:49:53.265>let's <00:49:53.545>focus <00:49:53.825>on <00:49:54.105>the, <00:49:54.385>the,

949
00:49:55.465 --> 00:49:56.885
<00:49:55.465>the <00:49:55.784>developer <00:49:56.104>experience <00:49:56.423>by <00:49:56.743>itself.

950
00:49:58.295 --> 00:50:01.665
<00:49:58.295>Feel <00:49:58.435>free <00:49:58.575>with <00:49:58.715>it. <00:49:58.855>Uh, <00:49:58.995>enjoy <00:49:59.135>it. <00:49:59.275>And <00:49:59.415>thanks <00:49:59.555>for <00:49:59.695>everything.

951
00:50:01.955 --> 00:50:04.065
<00:50:01.955>Enjoy <00:50:02.130>the <00:50:02.305>rest <00:50:02.480>of <00:50:02.654>the <00:50:02.830>conference. <00:50:03.005>Thank <00:50:03.180>you. <00:50:03.355>Bye.