WEBVTT

1
00:00:03.215 --> 00:00:03.685
<00:00:03.215>Thank <00:00:03.638>you.

2
00:00:03.855 --> 00:00:07.485
<00:00:03.855>Thank <00:00:04.030>you <00:00:04.205>for <00:00:04.380>having <00:00:04.555>me. <00:00:04.730>Well, <00:00:04.904>come <00:00:05.080>on, <00:00:05.255>JavaScript.

3
00:00:08.065 --> 00:00:09.365
<00:00:08.064>Why <00:00:08.299>are <00:00:08.533>you <00:00:08.767>messing <00:00:09.001>with <00:00:09.235>me?

4
00:00:10.445 --> 00:00:13.645
<00:00:10.445>I <00:00:10.645>believe <00:00:10.845>as <00:00:11.045>a <00:00:11.245>JavaScript <00:00:11.445>developer, <00:00:11.645>you've <00:00:11.845>been,

5
00:00:13.945 --> 00:00:16.885
<00:00:13.945>or <00:00:14.120>you <00:00:14.295>went <00:00:14.470>in <00:00:14.645>the, <00:00:14.820>the <00:00:14.995>same <00:00:15.170>situation <00:00:15.345>maybe

6
00:00:16.885 --> 00:00:21.045
<00:00:16.885>for <00:00:17.060>different <00:00:17.235>reason, <00:00:17.410>but <00:00:17.585>who <00:00:17.760>have <00:00:17.935>you <00:00:18.110>has <00:00:18.285>dealt

7
00:00:21.045 --> 00:00:24.845
<00:00:21.045>with <00:00:21.185>some <00:00:21.325>issues <00:00:21.465>with <00:00:21.605>common <00:00:21.745>jazz <00:00:21.885>and <00:00:22.025>ESM <00:00:22.165>or <00:00:22.305>Ecma <00:00:22.445>script?

8
00:00:25.255 --> 00:00:28.205
<00:00:25.255>Hands <00:00:25.605>up. <00:00:25.955>Oh, <00:00:26.305>okay. <00:00:26.654>Okay.

9
00:00:29.265 --> 00:00:32.565
<00:00:29.265>Who <00:00:29.440>of <00:00:29.615>you <00:00:29.790>still <00:00:29.965>writes <00:00:30.140>everything <00:00:30.315>in <00:00:30.490>common <00:00:30.665>Jazz.

10
00:00:34.505 --> 00:00:37.765
<00:00:34.505>Oh, <00:00:34.855>okay. <00:00:35.205>One <00:00:35.555>hand. <00:00:35.905>Okay.

11
00:00:38.465 --> 00:00:42.845
<00:00:38.465>Um, <00:00:38.640>and <00:00:38.815>who <00:00:38.990>of <00:00:39.165>you <00:00:39.340>think <00:00:39.515>you <00:00:39.690>shouldn't <00:00:39.865>care

12
00:00:42.985 --> 00:00:44.045
<00:00:42.985>as <00:00:43.462>a <00:00:43.939>developer?

13
00:00:44.915 --> 00:00:48.565
<00:00:44.915>Like <00:00:45.148>dealing <00:00:45.381>with <00:00:45.615>JavaScript <00:00:45.848>modules? <00:00:46.081>Yeah. <00:00:46.315>Okay.

14
00:00:48.565 --> 00:00:52.005
<00:00:48.565>Some, <00:00:48.739>okay. <00:00:48.915>The <00:00:49.089>rest <00:00:49.265>they <00:00:49.440>want <00:00:49.614>to <00:00:49.790>care. <00:00:49.964>Okay.

15
00:00:52.195 --> 00:00:56.165
<00:00:52.195>This <00:00:52.395>talk <00:00:52.595>is <00:00:52.795>about, <00:00:52.995>um, <00:00:53.195>demystifying <00:00:53.395>each, <00:00:53.595>uh,

16
00:00:56.295 --> 00:00:59.845
<00:00:56.295>especially <00:00:56.495>common <00:00:56.695>JS <00:00:56.895>and <00:00:57.095>ESM <00:00:57.295>JavaScript <00:00:57.495>module <00:00:57.695>system.

17
00:01:00.425 --> 00:01:03.245
<00:01:00.425>Um, <00:01:00.705>I <00:01:00.985>went <00:01:01.265>in <00:01:01.544>a, <00:01:01.824>yeah,

18
00:01:03.615 --> 00:01:07.445
<00:01:03.615>daily <00:01:03.848>basis <00:01:04.081>into <00:01:04.315>an <00:01:04.548>issue, <00:01:04.781>which <00:01:05.015>yeah,

19
00:01:08.065 --> 00:01:09.485
<00:01:08.065>is <00:01:08.320>the <00:01:08.576>reason <00:01:08.831>why <00:01:09.087>I'm <00:01:09.343>here.

20
00:01:10.105 --> 00:01:13.045
<00:01:10.105>Um, <00:01:10.260>and <00:01:10.416>the <00:01:10.571>reason <00:01:10.727>why <00:01:10.882>I'm <00:01:11.038>talking <00:01:11.193>about <00:01:11.349>this, <00:01:11.505>uh,

21
00:01:13.045 --> 00:01:14.045
<00:01:13.045>issue <00:01:13.495>in <00:01:13.945>particular.

22
00:01:14.825 --> 00:01:16.845
<00:01:14.825>And <00:01:15.175>so <00:01:15.525>who <00:01:15.875>am <00:01:16.225>I?

23
00:01:17.545 --> 00:01:22.405
<00:01:17.545>My <00:01:17.652>name <00:01:17.760>is <00:01:17.868>John <00:01:17.975>and <00:01:18.083>I <00:01:18.191>am, <00:01:18.298>I <00:01:18.406>was <00:01:18.514>born <00:01:18.621>and <00:01:18.729>raised <00:01:18.837>in <00:01:18.945>Berlin.

24
00:01:23.465 --> 00:01:26.165
<00:01:23.465>I'm <00:01:23.665>a <00:01:23.865>full <00:01:24.065>stack <00:01:24.265>engineer <00:01:24.465>focusing <00:01:24.665>on <00:01:24.865>web

25
00:01:26.165 --> 00:01:28.085
<00:01:26.164>technologies <00:01:26.865>and <00:01:27.565>cloud.

26
00:01:28.585 --> 00:01:30.485
<00:01:28.585>And <00:01:28.865>I <00:01:29.145>do <00:01:29.425>like <00:01:29.705>any <00:01:29.985>kind

27
00:01:30.485 --> 00:01:34.165
<00:01:30.485>of <00:01:30.718>development <00:01:30.951>from <00:01:31.185>setting <00:01:31.418>up <00:01:31.651>cloud <00:01:31.885>infrastructure,

28
00:01:34.765 --> 00:01:37.085
<00:01:34.765>CICD <00:01:35.045>pipeline <00:01:35.325>to <00:01:35.605>the <00:01:35.885>front <00:01:36.165>end.

29
00:01:38.105 --> 00:01:41.365
<00:01:38.104>Um, <00:01:38.244>I'm <00:01:38.384>a <00:01:38.524>football <00:01:38.664>romantic, <00:01:38.804>so <00:01:38.945>I'm <00:01:39.085>one <00:01:39.225>of <00:01:39.365>the <00:01:39.505>guys

30
00:01:41.425 --> 00:01:43.405
<00:01:41.425>who <00:01:41.705>said <00:01:41.985>this <00:01:42.265>was <00:01:42.545>clearly <00:01:42.825>handball

31
00:01:43.905 --> 00:01:46.365
<00:01:43.905>and <00:01:44.105>the <00:01:44.305>game <00:01:44.505>should <00:01:44.705>have <00:01:44.905>been <00:01:45.105>ended <00:01:45.305>differently.

32
00:01:47.465 --> 00:01:49.285
<00:01:47.465>And <00:01:47.931>I'm <00:01:48.398>a <00:01:48.865>traveler.

33
00:01:51.425 --> 00:01:53.565
<00:01:51.425>So <00:01:51.891>here's <00:01:52.358>the <00:01:52.825>thing.

34
00:01:53.825 --> 00:01:57.765
<00:01:53.825>Um, <00:01:53.952>so <00:01:54.079>I'm <00:01:54.206>working <00:01:54.334>as <00:01:54.461>a <00:01:54.588>freelancer <00:01:54.715>and <00:01:54.843>one <00:01:54.970>of <00:01:55.097>my <00:01:55.225>clients.

35
00:01:58.185 --> 00:02:02.405
<00:01:58.185>We, <00:01:58.325>we <00:01:58.465>do <00:01:58.605>like <00:01:58.745>our <00:01:58.885>chore <00:01:59.025>like <00:01:59.165>every <00:01:59.305>two <00:01:59.445>months <00:01:59.585>we

36
00:02:03.265 --> 00:02:04.325
<00:02:03.265>do <00:02:03.583>our <00:02:03.901>patch <00:02:04.219>day.

37
00:02:04.555 --> 00:02:07.645
<00:02:04.555>Basically <00:02:04.835>we <00:02:05.115>are <00:02:05.395>upgrading <00:02:05.675>NPM <00:02:05.955>packages

38
00:02:08.025 --> 00:02:09.325
<00:02:08.025>to <00:02:08.317>the <00:02:08.609>latest <00:02:08.902>and <00:02:09.195>greatest.

39
00:02:10.545 --> 00:02:12.925
<00:02:10.544>So <00:02:10.744>we <00:02:10.945>also <00:02:11.144>have <00:02:11.345>like <00:02:11.545>testing <00:02:11.744>in <00:02:11.945>place.

40
00:02:13.385 --> 00:02:16.565
<00:02:13.385>So <00:02:13.618>after <00:02:13.851>upgrading <00:02:14.084>our <00:02:14.318>packages, <00:02:14.551>I <00:02:14.785>ran

41
00:02:17.125 --> 00:02:18.805
<00:02:17.125>NPM <00:02:17.591>Ins, <00:02:18.058>uh, <00:02:18.525>test.

42
00:02:19.985 --> 00:02:23.325
<00:02:19.985>So, <00:02:20.140>uh, <00:02:20.296>as <00:02:20.451>a <00:02:20.607>background, <00:02:20.762>we <00:02:20.918>do <00:02:21.073>everything <00:02:21.229>in <00:02:21.385>TypeScript.

43
00:02:23.585 --> 00:02:25.685
<00:02:23.585>So <00:02:23.818>we <00:02:24.051>use <00:02:24.285>Jes <00:02:24.518>for <00:02:24.751>our <00:02:24.985>testing

44
00:02:26.265 --> 00:02:29.285
<00:02:26.265>and <00:02:26.464>ts <00:02:26.665>jest <00:02:26.864>for <00:02:27.065>using <00:02:27.265>TypeScript <00:02:27.464>with <00:02:27.665>Jes.

45
00:02:29.625 --> 00:02:32.805
<00:02:29.625>And <00:02:29.825>as <00:02:30.025>you <00:02:30.225>can <00:02:30.425>see, <00:02:30.625>everything <00:02:30.825>went <00:02:31.025>green

46
00:02:34.095 --> 00:02:35.805
<00:02:34.095>until <00:02:34.561>that <00:02:35.028>one <00:02:35.495>day.

47
00:02:37.465 --> 00:02:39.805
<00:02:37.465>And <00:02:37.592>I <00:02:37.719>don't <00:02:37.846>know <00:02:37.974>if <00:02:38.101>you <00:02:38.228>can <00:02:38.355>see <00:02:38.483>it <00:02:38.610>from <00:02:38.737>far <00:02:38.865>behind,

48
00:02:39.905 --> 00:02:43.965
<00:02:39.905>but <00:02:40.105>there <00:02:40.305>were <00:02:40.505>like <00:02:40.705>seven <00:02:40.905>tests <00:02:41.105>which <00:02:41.305>failed.

49
00:02:44.985 --> 00:02:47.405
<00:02:44.985>And <00:02:45.451>we <00:02:45.918>were <00:02:46.385>like,

50
00:02:47.945 --> 00:02:50.805
<00:02:47.945>or <00:02:48.178>I <00:02:48.411>was <00:02:48.644>like, <00:02:48.878>what <00:02:49.111>the <00:02:49.345>heck?

51
00:02:51.835 --> 00:02:52.845
<00:02:51.835>What <00:02:52.138>the <00:02:52.441>heck <00:02:52.744>happened?

52
00:02:55.785 --> 00:02:58.605
<00:02:55.785>So <00:02:56.135>looking <00:02:56.484>at <00:02:56.835>the, <00:02:57.185>um,

53
00:03:00.385 --> 00:03:04.245
<00:03:00.385>at <00:03:00.560>the, <00:03:00.734>at <00:03:00.910>the <00:03:01.084>console <00:03:01.260>it <00:03:01.435>says <00:03:01.609>syntax <00:03:01.785>error,

54
00:03:04.575 --> 00:03:06.445
<00:03:04.575>unexpected <00:03:05.274>token <00:03:05.975>export,

55
00:03:06.945 --> 00:03:08.885
<00:03:06.945>but <00:03:07.178>it <00:03:07.411>was <00:03:07.644>pointing <00:03:07.878>into <00:03:08.111>the <00:03:08.345>import.

56
00:03:09.745 --> 00:03:12.045
<00:03:09.745>So <00:03:09.945>we <00:03:10.145>used <00:03:10.345>a <00:03:10.545>package <00:03:10.745>called <00:03:10.945>date <00:03:11.145>format,

57
00:03:12.945 --> 00:03:16.765
<00:03:12.945>and <00:03:13.100>with <00:03:13.256>that <00:03:13.411>we <00:03:13.567>converted <00:03:13.722>over, <00:03:13.878>we <00:03:14.033>formatted <00:03:14.189>our <00:03:14.345>date

58
00:03:17.315 --> 00:03:19.205
<00:03:17.315>into <00:03:17.781>German <00:03:18.248>date <00:03:18.715>format.

59
00:03:20.265 --> 00:03:22.445
<00:03:20.265>That's <00:03:20.498>basically <00:03:20.731>what <00:03:20.964>this <00:03:21.198>package <00:03:21.431>is <00:03:21.665>doing.

60
00:03:23.225 --> 00:03:26.625
<00:03:23.225>Um, <00:03:23.691>when <00:03:24.158>after <00:03:24.625>we,

61
00:03:26.765 --> 00:03:29.145
<00:03:26.765>before <00:03:26.964>it <00:03:27.165>was <00:03:27.364>everything <00:03:27.565>green, <00:03:27.765>like <00:03:27.964>I <00:03:28.165>said.

62
00:03:29.245 --> 00:03:32.985
<00:03:29.245>Um, <00:03:29.385>we <00:03:29.525>didn't <00:03:29.665>touch <00:03:29.805>the <00:03:29.945>code, <00:03:30.085>we <00:03:30.225>just <00:03:30.365>upgraded <00:03:30.505>the <00:03:30.645>packages.

63
00:03:33.285 --> 00:03:35.145
<00:03:33.285>We <00:03:33.751>ran <00:03:34.218>NPM <00:03:34.685>test

64
00:03:35.685 --> 00:03:38.785
<00:03:35.685>and <00:03:36.035>then <00:03:36.385>boom, <00:03:36.735>test <00:03:37.085>failed.

65
00:03:41.605 --> 00:03:45.465
<00:03:41.605>So <00:03:41.732>if <00:03:41.859>we <00:03:41.986>scroll <00:03:42.114>up <00:03:42.241>a <00:03:42.368>bit, <00:03:42.495>um, <00:03:42.623>in <00:03:42.750>the <00:03:42.877>console <00:03:43.005>log,

66
00:03:45.805 --> 00:03:49.665
<00:03:45.805>we <00:03:45.960>get <00:03:46.116>some, <00:03:46.271>uh, <00:03:46.427>that's <00:03:46.582>the, <00:03:46.738>the <00:03:46.893>error <00:03:47.049>of <00:03:47.205>just

67
00:03:50.165 --> 00:03:53.345
<00:03:50.165>so <00:03:50.364>it <00:03:50.565>says <00:03:50.765>the <00:03:50.965>test <00:03:51.165>through <00:03:51.364>it <00:03:51.565>failed

68
00:03:53.735 --> 00:03:57.185
<00:03:53.735>because <00:03:54.015>just <00:03:54.295>encountered <00:03:54.575>an <00:03:54.855>unexpected <00:03:55.135>token,

69
00:03:58.685 --> 00:04:02.865
<00:03:58.685>it <00:03:58.860>failed <00:03:59.035>because <00:03:59.210>it <00:03:59.385>could <00:03:59.560>not <00:03:59.735>pass <00:03:59.910>the <00:04:00.085>file

70
00:04:03.685 --> 00:04:05.505
<00:04:03.685>in <00:04:04.151>or <00:04:04.618>it's <00:04:05.085>happened

71
00:04:05.505 --> 00:04:09.105
<00:04:05.505>because <00:04:05.785>it <00:04:06.065>uses <00:04:06.345>non-standard <00:04:06.625>JavaScript <00:04:06.905>syntax,

72
00:04:09.885 --> 00:04:14.025
<00:04:09.885>or <00:04:10.040>one <00:04:10.196>of <00:04:10.351>the <00:04:10.507>dependencies <00:04:10.662>uses <00:04:10.818>non <00:04:10.973>JavaScript, <00:04:11.129>uh, <00:04:11.285>syntax.

73
00:04:14.845 --> 00:04:16.745
<00:04:14.845>It <00:04:15.078>supports <00:04:15.311>Babel <00:04:15.545>out <00:04:15.778>of <00:04:16.011>the <00:04:16.245>box

74
00:04:16.925 --> 00:04:18.585
<00:04:16.925>and <00:04:17.204>ignores <00:04:17.485>the <00:04:17.765>node <00:04:18.045>module <00:04:18.325>folder.

75
00:04:18.975 --> 00:04:20.105
<00:04:18.975>Okay, <00:04:19.483>that's <00:04:19.992>good.

76
00:04:20.805 --> 00:04:23.905
<00:04:20.805>Um, <00:04:21.005>but <00:04:21.204>there <00:04:21.405>are <00:04:21.605>some <00:04:21.805>points <00:04:22.005>here <00:04:22.205>listed.

77
00:04:24.565 --> 00:04:27.305
<00:04:24.565>Um, <00:04:24.720>one <00:04:24.876>of <00:04:25.031>the <00:04:25.187>points <00:04:25.342>is <00:04:25.498>if <00:04:25.653>you <00:04:25.809>are <00:04:25.965>trying

78
00:04:27.845 --> 00:04:32.585
<00:04:27.845>to <00:04:28.020>use <00:04:28.195>ECMAScript <00:04:28.370>module <00:04:28.545>short, <00:04:28.720>ESM, <00:04:28.895>you <00:04:29.070>should <00:04:29.245>open

79
00:04:33.255 --> 00:04:34.305
<00:04:33.255>this <00:04:34.200>webpage.

80
00:04:35.085 --> 00:04:37.145
<00:04:35.085>So <00:04:35.318>let <00:04:35.551>me <00:04:35.784>do <00:04:36.018>that <00:04:36.251>for <00:04:36.484>you.

81
00:04:38.785 --> 00:04:42.845
<00:04:38.784>And <00:04:38.984>if <00:04:39.184>we <00:04:39.385>open <00:04:39.585>that <00:04:39.784>webpage, <00:04:39.984>we <00:04:40.184>come

82
00:04:42.845 --> 00:04:44.125
<00:04:42.845>to <00:04:43.421>just <00:04:43.997>documentation

83
00:04:44.465 --> 00:04:47.805
<00:04:44.465>and <00:04:44.665>there's <00:04:44.865>a <00:04:45.065>yellow <00:04:45.265>box <00:04:45.465>saying <00:04:45.665>just <00:04:45.865>ships

84
00:04:48.075 --> 00:04:51.445
<00:04:48.075>with <00:04:48.308>experimental <00:04:48.541>support <00:04:48.775>for <00:04:49.008>ecma <00:04:49.241>script <00:04:49.474>modules.

85
00:04:52.105 --> 00:04:55.045
<00:04:52.105>Yes. <00:04:52.385>M <00:04:52.665>so <00:04:52.945>I <00:04:53.225>was <00:04:53.505>like,

86
00:04:56.195 --> 00:04:57.605
<00:04:56.195>what <00:04:56.512>the <00:04:56.829>heck <00:04:57.146>is <00:04:57.464>happening?

87
00:04:58.345 --> 00:05:02.605
<00:04:58.345>Um, <00:04:58.500>of <00:04:58.656>course <00:04:58.811>you <00:04:58.967>can, <00:04:59.122>you <00:04:59.278>can, <00:04:59.433>um, <00:04:59.589>solve <00:04:59.745>that

88
00:05:02.905 --> 00:05:06.965
<00:05:02.905>by <00:05:03.184>using <00:05:03.465>an <00:05:03.744>experimental <00:05:04.025>flag, <00:05:04.304>um,

89
00:05:06.985 --> 00:05:09.925
<00:05:06.985>the <00:05:07.185>flag <00:05:07.385>called <00:05:07.585>ex <00:05:07.785>experimental <00:05:07.985>V <00:05:08.185>modules <00:05:08.385>flag.

90
00:05:10.585 --> 00:05:13.725
<00:05:10.585>Um, <00:05:10.724>but <00:05:10.864>you <00:05:11.005>need <00:05:11.145>to <00:05:11.284>change <00:05:11.424>the <00:05:11.565>script, <00:05:11.705>you <00:05:11.844>need <00:05:11.984>to

91
00:05:14.465 --> 00:05:16.205
<00:05:14.465>put <00:05:14.744>it <00:05:15.025>in <00:05:15.304>the <00:05:15.585>environment <00:05:15.864>variable.

92
00:05:16.505 --> 00:05:20.325
<00:05:16.505>That's <00:05:16.680>actually <00:05:16.855>a <00:05:17.030>lot <00:05:17.205>of <00:05:17.380>hassle <00:05:17.555>just <00:05:17.730>for <00:05:17.905>using

93
00:05:21.735 --> 00:05:23.015
<00:05:21.735>ecma <00:05:22.119>script <00:05:22.503>with <00:05:22.887>J.

94
00:05:23.675 --> 00:05:25.895
<00:05:23.675>So <00:05:23.850>the <00:05:24.025>background <00:05:24.200>here <00:05:24.375>is <00:05:24.550>the <00:05:24.725>date <00:05:24.900>format <00:05:25.075>package,

95
00:05:25.895 --> 00:05:29.455
<00:05:25.895>which <00:05:26.094>I <00:05:26.294>mentioned <00:05:26.495>before, <00:05:26.695>is <00:05:26.895>using <00:05:27.094>ESM <00:05:27.294>only.

96
00:05:30.275 --> 00:05:33.735
<00:05:30.275>So <00:05:30.430>it <00:05:30.586>does <00:05:30.741>not <00:05:30.897>have <00:05:31.052>a <00:05:31.208>support <00:05:31.363>for <00:05:31.519>common <00:05:31.674>js,

97
00:05:34.195 --> 00:05:38.575
<00:05:34.195>but <00:05:34.335>just <00:05:34.474>on <00:05:34.615>the <00:05:34.755>other <00:05:34.895>hand <00:05:35.034>is <00:05:35.175>a <00:05:35.315>common <00:05:35.455>JS <00:05:35.594>package.

98
00:05:40.035 --> 00:05:44.605
<00:05:40.034>So <00:05:40.268>that's, <00:05:40.501>uh, <00:05:40.734>yeah, <00:05:40.968>in <00:05:41.201>my <00:05:41.434>opinion,

99
00:05:45.545 --> 00:05:47.395
<00:05:45.545>an <00:05:46.245>interesting <00:05:46.945>fact.

100
00:05:49.215 --> 00:05:52.675
<00:05:49.215>So <00:05:49.565>I <00:05:49.915>was <00:05:50.265>wondering <00:05:50.615>what's,

101
00:05:52.675 --> 00:05:54.435
<00:05:52.675>what's <00:05:53.025>happening, <00:05:53.375>what's <00:05:53.725>happened <00:05:54.075>here?

102
00:05:55.685 --> 00:05:58.685
<00:05:55.685>So <00:05:55.918>before <00:05:56.151>like <00:05:56.385>talking <00:05:56.618>about <00:05:56.851>common <00:05:57.085>JS

103
00:05:58.685 --> 00:06:01.765
<00:05:58.685>and <00:05:58.918>ECMAScript, <00:05:59.151>I <00:05:59.385>want <00:05:59.618>to, <00:05:59.851>I <00:06:00.085>wanted

104
00:06:01.765 --> 00:06:05.165
<00:06:01.765>to <00:06:01.940>understand <00:06:02.115>why <00:06:02.289>do <00:06:02.465>we <00:06:02.640>need <00:06:02.815>JavaScript <00:06:02.990>module <00:06:03.164>system?

105
00:06:05.825 --> 00:06:09.485
<00:06:05.825>So, <00:06:05.965>uh, <00:06:06.104>as <00:06:06.245>in <00:06:06.385>my <00:06:06.525>introduction, <00:06:06.664>I <00:06:06.805>was <00:06:06.945>a <00:06:07.085>PHP <00:06:07.224>developer.

106
00:06:09.885 --> 00:06:11.205
<00:06:09.885>I <00:06:10.182>used <00:06:10.479>JavaScript <00:06:10.776>of <00:06:11.073>course,

107
00:06:11.275 --> 00:06:14.485
<00:06:11.275>because, <00:06:11.474>uh, <00:06:11.674>uh, <00:06:11.875>we <00:06:12.075>did <00:06:12.275>some <00:06:12.474>dominant <00:06:12.674>manipulation.

108
00:06:14.505 --> 00:06:16.445
<00:06:14.505>So <00:06:14.705>I <00:06:14.905>used <00:06:15.105>jQuery <00:06:15.305>and <00:06:15.505>all <00:06:15.705>the <00:06:15.905>stuff.

109
00:06:16.825 --> 00:06:20.725
<00:06:16.825>Um, <00:06:17.058>but <00:06:17.291>now <00:06:17.525>that <00:06:17.758>you <00:06:17.991>can <00:06:18.224>also

110
00:06:21.345 --> 00:06:24.845
<00:06:21.345>one <00:06:21.578>JavaScript <00:06:21.811>on <00:06:22.045>a <00:06:22.278>server <00:06:22.511>using <00:06:22.745>Node

111
00:06:25.105 --> 00:06:26.885
<00:06:25.105>or <00:06:25.338>Dino <00:06:25.571>Orban <00:06:25.805>as <00:06:26.038>a <00:06:26.271>one <00:06:26.505>time,

112
00:06:27.425 --> 00:06:29.565
<00:06:27.425>you <00:06:27.705>can <00:06:27.985>do <00:06:28.265>anything <00:06:28.545>with <00:06:28.825>JavaScript.

113
00:06:30.025 --> 00:06:33.565
<00:06:30.025>So <00:06:30.224>that <00:06:30.424>means <00:06:30.625>your <00:06:30.825>code <00:06:31.025>base <00:06:31.224>actually <00:06:31.424>grows.

114
00:06:34.345 --> 00:06:38.045
<00:06:34.345>So <00:06:34.472>that's <00:06:34.599>why <00:06:34.726>you <00:06:34.854>need <00:06:34.981>some <00:06:35.108>sort <00:06:35.235>of <00:06:35.363>like <00:06:35.490>a <00:06:35.617>module <00:06:35.745>system

115
00:06:38.045 --> 00:06:39.925
<00:06:38.045>because <00:06:38.395>PHP <00:06:38.745>has <00:06:39.095>it, <00:06:39.445>right?

116
00:06:40.065 --> 00:06:44.905
<00:06:40.065>So <00:06:40.205>you <00:06:40.344>can, <00:06:40.485>uh, <00:06:40.625>split <00:06:40.765>your <00:06:40.905>code <00:06:41.045>and <00:06:41.185>then <00:06:41.325>import <00:06:41.465>it.

117
00:06:45.495 --> 00:06:48.545
<00:06:45.495>Same <00:06:45.635>for <00:06:45.775>JavaScript, <00:06:45.915>uh, <00:06:46.055>on <00:06:46.195>the <00:06:46.335>one <00:06:46.475>time <00:06:46.615>on <00:06:46.755>the <00:06:46.895>server.

118
00:06:49.005 --> 00:06:50.625
<00:06:49.005>So <00:06:49.238>you <00:06:49.471>need <00:06:49.705>to <00:06:49.938>split <00:06:50.171>the <00:06:50.405>code

119
00:06:50.765 --> 00:06:53.225
<00:06:50.765>and <00:06:50.998>then <00:06:51.231>also <00:06:51.465>want <00:06:51.698>to <00:06:51.931>import <00:06:52.164>it.

120
00:06:53.405 --> 00:06:56.625
<00:06:53.405>So <00:06:53.560>that <00:06:53.716>means <00:06:53.871>you <00:06:54.027>can <00:06:54.182>share <00:06:54.338>and <00:06:54.493>reuse <00:06:54.649>the <00:06:54.804>code.

121
00:06:56.815 --> 00:06:59.945
<00:06:56.815>Otherwise <00:06:56.990>you <00:06:57.165>would <00:06:57.340>have <00:06:57.515>dumped <00:06:57.690>everything <00:06:57.865>into <00:06:58.040>one <00:06:58.215>thing,

122
00:06:59.985 --> 00:07:02.385
<00:06:59.985>a <00:07:00.265>file, <00:07:00.545>which <00:07:00.825>is <00:07:01.105>obviously <00:07:01.385>not

123
00:07:02.985 --> 00:07:04.345
<00:07:02.985>software <00:07:03.597>engineering <00:07:04.209>practices.

124
00:07:05.095 --> 00:07:06.955
<00:07:05.095>So <00:07:05.270>that's <00:07:05.445>why <00:07:05.620>you <00:07:05.795>need <00:07:05.970>some <00:07:06.145>sort <00:07:06.320>of, <00:07:06.495>uh,

125
00:07:06.955 --> 00:07:08.115
<00:07:06.955>JavaScript <00:07:07.477>module <00:07:07.999>system.

126
00:07:09.315 --> 00:07:13.295
<00:07:09.315>And <00:07:09.490>the, <00:07:09.665>the <00:07:09.840>first <00:07:10.015>one <00:07:10.190>I <00:07:10.365>would <00:07:10.540>say, <00:07:10.715>uh,

127
00:07:13.355 --> 00:07:14.735
<00:07:13.355>is <00:07:13.769>called <00:07:14.183>Common <00:07:14.597>Jazz.

128
00:07:15.285 --> 00:07:19.215
<00:07:15.285>That <00:07:15.440>was <00:07:15.596>established <00:07:15.751>in <00:07:15.907>2009 <00:07:16.062>under <00:07:16.218>the <00:07:16.373>name <00:07:16.529>Server <00:07:16.685>Jazz

129
00:07:19.965 --> 00:07:23.595
<00:07:19.965>alongside <00:07:20.198>when, <00:07:20.431>uh, <00:07:20.664>no <00:07:20.898>jazz <00:07:21.131>came <00:07:21.364>out.

130
00:07:23.815 --> 00:07:27.595
<00:07:23.815>So <00:07:23.970>no <00:07:24.126>jazz, <00:07:24.281>uh, <00:07:24.437>wanting <00:07:24.592>JavaScript <00:07:24.748>on <00:07:24.903>a <00:07:25.059>server <00:07:25.215>needed

131
00:07:27.595 --> 00:07:30.735
<00:07:27.595>to <00:07:27.770>have <00:07:27.945>like <00:07:28.120>this <00:07:28.295>kind <00:07:28.470>of, <00:07:28.645>um, <00:07:28.820>module <00:07:28.995>system.

132
00:07:31.075 --> 00:07:33.455
<00:07:31.075>So <00:07:31.354>that's <00:07:31.635>why <00:07:31.914>common <00:07:32.195>JS <00:07:32.474>exists.

133
00:07:33.995 --> 00:07:38.975
<00:07:33.995>So <00:07:34.150>it <00:07:34.306>was <00:07:34.461>a <00:07:34.617>standard <00:07:34.772>to, <00:07:34.928>um, <00:07:35.083>import <00:07:35.239>JavaScript <00:07:35.395>modules

134
00:07:40.835 --> 00:07:44.895
<00:07:40.835>and <00:07:40.962>it's <00:07:41.089>supposed <00:07:41.216>to <00:07:41.344>work <00:07:41.471>on <00:07:41.598>the <00:07:41.725>server <00:07:41.853>so <00:07:41.980>you <00:07:42.107>can, <00:07:42.234>uh,

135
00:07:45.035 --> 00:07:49.215
<00:07:45.034>you <00:07:45.190>find <00:07:45.346>common <00:07:45.501>JS <00:07:45.657>on <00:07:45.812>no <00:07:45.968>js, <00:07:46.123>Dino <00:07:46.279>or <00:07:46.434>Orban

136
00:07:49.715 --> 00:07:52.735
<00:07:49.715>or <00:07:49.948>any <00:07:50.181>kind <00:07:50.415>of <00:07:50.648>JavaScript <00:07:50.881>one <00:07:51.115>times.

137
00:07:53.945 --> 00:07:58.245
<00:07:53.945>And <00:07:54.100>the <00:07:54.256>syntax <00:07:54.411>probably, <00:07:54.567>you <00:07:54.722>know, <00:07:54.878>um, <00:07:55.033>it's <00:07:55.189>using <00:07:55.344>require

138
00:07:58.265 --> 00:08:01.325
<00:07:58.265>for <00:07:58.440>importing <00:07:58.615>the <00:07:58.789>module <00:07:58.965>and <00:07:59.140>export <00:07:59.315>for <00:07:59.490>exporting <00:07:59.664>them.

139
00:08:01.745 --> 00:08:03.805
<00:08:01.745>And <00:08:02.095>this <00:08:02.445>all <00:08:02.795>happens <00:08:03.145>synchronously.

140
00:08:03.985 --> 00:08:07.125
<00:08:03.985>So <00:08:04.185>it, <00:08:04.385>every <00:08:04.585>module <00:08:04.785>waits <00:08:04.985>for <00:08:05.185>each <00:08:05.385>other.

141
00:08:07.465 --> 00:08:10.325
<00:08:07.465>So <00:08:07.744>that's <00:08:08.025>meant <00:08:08.304>with, <00:08:08.585>uh, <00:08:08.864>synchronous.

142
00:08:11.345 --> 00:08:12.765
<00:08:11.345>And <00:08:11.664>then <00:08:11.984>we <00:08:12.303>have <00:08:12.623>ESM.

143
00:08:13.885 --> 00:08:17.465
<00:08:13.885>So <00:08:14.164>ESM <00:08:14.445>was <00:08:14.724>established <00:08:15.005>in <00:08:15.284>2015

144
00:08:19.475 --> 00:08:23.615
<00:08:19.475>and <00:08:19.675>it <00:08:19.875>was <00:08:20.075>a <00:08:20.275>standard <00:08:20.475>for <00:08:20.675>loading <00:08:20.875>modules

145
00:08:24.355 --> 00:08:25.535
<00:08:24.355>inside <00:08:24.886>the <00:08:25.417>browser,

146
00:08:27.915 --> 00:08:32.255
<00:08:27.915>and <00:08:28.148>now <00:08:28.381>it <00:08:28.615>works <00:08:28.848>on <00:08:29.081>the <00:08:29.315>client.

147
00:08:32.355 --> 00:08:34.615
<00:08:32.355>So <00:08:32.555>on <00:08:32.755>the <00:08:32.955>browser <00:08:33.155>and <00:08:33.355>on <00:08:33.555>the <00:08:33.755>server,

148
00:08:34.845 --> 00:08:36.855
<00:08:34.845>because <00:08:35.195>ESM <00:08:35.545>is <00:08:35.895>a <00:08:36.245>standard,

149
00:08:36.995 --> 00:08:39.775
<00:08:36.995>it <00:08:37.228>comes <00:08:37.461>from <00:08:37.695>the <00:08:37.928>Ecma <00:08:38.161>script <00:08:38.395>community.

150
00:08:40.715 --> 00:08:45.095
<00:08:40.715>And <00:08:40.995>so <00:08:41.275>no <00:08:41.555>js <00:08:41.835>bun <00:08:42.115>Dino,

151
00:08:45.095 --> 00:08:49.295
<00:08:45.095>they <00:08:45.295>all <00:08:45.495>adopted <00:08:45.695>ESM, <00:08:45.895>um, <00:08:46.095>as <00:08:46.295>a <00:08:46.495>standard.

152
00:08:49.555 --> 00:08:52.975
<00:08:49.555>So <00:08:49.694>now <00:08:49.834>you <00:08:49.974>can <00:08:50.114>run, <00:08:50.255>uh, <00:08:50.395>them <00:08:50.535>also <00:08:50.675>in <00:08:50.814>this <00:08:50.954>kind,

153
00:08:53.075 --> 00:08:54.495
<00:08:53.075>in <00:08:53.394>this, <00:08:53.714>uh, <00:08:54.033>one <00:08:54.353>time.

154
00:08:55.855 --> 00:08:58.915
<00:08:55.855>And <00:08:56.030>the <00:08:56.205>syntax <00:08:56.380>is <00:08:56.555>import <00:08:56.730>for <00:08:56.905>importing <00:08:57.080>the <00:08:57.255>modules

155
00:08:59.295 --> 00:09:01.675
<00:08:59.295>and <00:08:59.645>export <00:08:59.995>for <00:09:00.344>exporting <00:09:00.694>them.

156
00:09:02.215 --> 00:09:04.595
<00:09:02.215>And <00:09:02.565>the <00:09:02.915>loading <00:09:03.265>is <00:09:03.615>asynchronously.

157
00:09:04.655 --> 00:09:06.835
<00:09:04.655>So <00:09:04.829>you're, <00:09:05.005>they're <00:09:05.180>not, <00:09:05.355>uh, <00:09:05.530>touching <00:09:05.704>the <00:09:05.880>main <00:09:06.055>thread.

158
00:09:06.935 --> 00:09:09.035
<00:09:06.935>So, <00:09:07.135>uh, <00:09:07.334>it's <00:09:07.535>not <00:09:07.734>waiting <00:09:07.935>for <00:09:08.135>each <00:09:08.334>other,

159
00:09:09.615 --> 00:09:11.795
<00:09:09.615>but <00:09:10.081>loaded, <00:09:10.548>uh, <00:09:11.015>asynchronously.

160
00:09:12.745 --> 00:09:16.755
<00:09:12.745>Okay, <00:09:12.900>so <00:09:13.056>there's <00:09:13.211>a <00:09:13.367>tweet, <00:09:13.522>let <00:09:13.678>me <00:09:13.833>open <00:09:13.989>the <00:09:14.145>tweet.

161
00:09:17.875 --> 00:09:22.255
<00:09:17.875>And <00:09:18.225>this <00:09:18.575>tweet <00:09:18.925>says <00:09:19.275>in

162
00:09:23.175 --> 00:09:26.335
<00:09:23.175>February <00:09:23.408>this <00:09:23.641>year, <00:09:23.875>there <00:09:24.108>were <00:09:24.341>like <00:09:24.574>67.

163
00:09:26.765 --> 00:09:28.575
<00:09:26.765>This <00:09:26.939>is <00:09:27.115>the, <00:09:27.290>the <00:09:27.465>one <00:09:27.640>on <00:09:27.814>the <00:09:27.990>right <00:09:28.165>side.

164
00:09:29.275 --> 00:09:33.775
<00:09:29.275>Um, <00:09:29.508>67% <00:09:29.741>were <00:09:29.975>common <00:09:30.208>jazz <00:09:30.441>only <00:09:30.675>packages.

165
00:09:34.395 --> 00:09:37.615
<00:09:34.395>And <00:09:34.745>11.7 <00:09:35.095>wear <00:09:35.444>ESM, <00:09:35.795>only

166
00:09:38.425 --> 00:09:41.695
<00:09:38.425>8.4 <00:09:38.775>are <00:09:39.125>dual <00:09:39.474>package <00:09:39.824>supporters.

167
00:09:41.955 --> 00:09:44.135
<00:09:41.955>So <00:09:42.188>they <00:09:42.421>support <00:09:42.655>common <00:09:42.888>jazz <00:09:43.121>and <00:09:43.355>ESM

168
00:09:44.395 --> 00:09:47.415
<00:09:44.395>and <00:09:44.595>they're <00:09:44.795>like <00:09:44.995>12%, <00:09:45.194>which <00:09:45.395>are <00:09:45.595>like <00:09:45.795>garbage.

169
00:09:47.885 --> 00:09:48.895
<00:09:47.885>They <00:09:48.188>don't <00:09:48.491>use <00:09:48.794>anything.

170
00:09:48.925 --> 00:09:51.855
<00:09:48.925>It's <00:09:49.158>just <00:09:49.391>maybe <00:09:49.625>bots <00:09:49.858>or, <00:09:50.091>I <00:09:50.324>dunno,

171
00:09:52.435 --> 00:09:57.215
<00:09:52.435>but, <00:09:52.562>so <00:09:52.689>there <00:09:52.816>are <00:09:52.944>actually <00:09:53.071>a <00:09:53.198>lot <00:09:53.325>of <00:09:53.453>common <00:09:53.580>JS <00:09:53.707>only <00:09:53.834>packages.

172
00:09:57.795 --> 00:09:59.935
<00:09:57.795>So <00:09:58.145>like <00:09:58.495>about <00:09:58.844>almost <00:09:59.194>70%.

173
00:10:00.355 --> 00:10:02.335
<00:10:00.355>But <00:10:00.588>as <00:10:00.821>you <00:10:01.055>can <00:10:01.288>see, <00:10:01.521>the <00:10:01.755>trend

174
00:10:03.155 --> 00:10:06.255
<00:10:03.155>is <00:10:03.505>going <00:10:03.855>towards <00:10:04.204>ESM <00:10:04.555>support.

175
00:10:06.835 --> 00:10:11.215
<00:10:06.835>So <00:10:06.975>even <00:10:07.115>though <00:10:07.255>it's <00:10:07.395>uh, <00:10:07.535>from, <00:10:07.675>uh, <00:10:07.815>from <00:10:07.955>the <00:10:08.095>year <00:10:08.235>2021

176
00:10:11.705 --> 00:10:16.375
<00:10:11.705>until <00:10:11.832>now, <00:10:11.959>it's <00:10:12.086>not <00:10:12.214>as <00:10:12.341>high, <00:10:12.468>but <00:10:12.595>there's <00:10:12.723>a <00:10:12.850>trend <00:10:12.977>to <00:10:13.105>see.

177
00:10:23.575 --> 00:10:26.675
<00:10:23.575>So <00:10:23.808>let's, <00:10:24.041>let's <00:10:24.275>talk <00:10:24.508>about <00:10:24.741>the <00:10:24.975>differences.

178
00:10:29.175 --> 00:10:31.915
<00:10:29.175>So <00:10:29.525>let's <00:10:29.875>compare <00:10:30.224>the <00:10:30.574>performance.

179
00:10:32.535 --> 00:10:35.195
<00:10:32.535>So <00:10:32.768>I <00:10:33.001>used <00:10:33.235>the <00:10:33.468>dual <00:10:33.701>package <00:10:33.935>here.

180
00:10:35.255 --> 00:10:40.075
<00:10:35.255>In <00:10:35.395>this <00:10:35.535>case <00:10:35.675>I <00:10:35.814>used <00:10:35.955>the <00:10:36.095>A-W-S-S-D-K, <00:10:36.235>um, <00:10:36.375>the <00:10:36.515>S3 <00:10:36.655>client

181
00:10:40.215 --> 00:10:42.755
<00:10:40.215>for <00:10:40.415>like <00:10:40.615>getting <00:10:40.815>information <00:10:41.015>from <00:10:41.215>the <00:10:41.415>S3 <00:10:41.615>bucket

182
00:10:43.055 --> 00:10:44.355
<00:10:43.055>and <00:10:43.444>list <00:10:43.835>them, <00:10:44.225>uh,

183
00:10:44.355 --> 00:10:47.635
<00:10:44.355>because <00:10:44.555>they <00:10:44.755>support <00:10:44.955>like <00:10:45.155>common <00:10:45.355>JS <00:10:45.555>and <00:10:45.755>ESM.

184
00:10:48.255 --> 00:10:52.755
<00:10:48.255>So <00:10:48.371>on <00:10:48.488>the <00:10:48.605>left <00:10:48.721>side <00:10:48.838>you <00:10:48.955>see <00:10:49.071>the <00:10:49.188>syntax <00:10:49.305>for, <00:10:49.421>uh, <00:10:49.538>common <00:10:49.655>js.

185
00:10:52.975 --> 00:10:56.115
<00:10:52.975>So <00:10:53.150>I, <00:10:53.325>uh, <00:10:53.500>it, <00:10:53.675>so <00:10:53.850>I'm <00:10:54.025>loading <00:10:54.200>the <00:10:54.375>module

186
00:10:56.455 --> 00:10:58.035
<00:10:56.455>and <00:10:56.735>put <00:10:57.015>it <00:10:57.295>into <00:10:57.575>a <00:10:57.855>variable

187
00:10:58.415 --> 00:11:01.035
<00:10:58.415>and <00:10:58.615>then <00:10:58.814>I'm <00:10:59.015>initializing <00:10:59.214>the <00:10:59.415>F <00:10:59.615>three <00:10:59.814>client.

188
00:11:02.485 --> 00:11:06.985
<00:11:02.485>On <00:11:02.640>the <00:11:02.796>right <00:11:02.951>side <00:11:03.107>I <00:11:03.262>structure <00:11:03.418>the <00:11:03.573>F <00:11:03.729>three <00:11:03.885>client.

189
00:11:07.005 --> 00:11:11.065
<00:11:07.005>So <00:11:07.145>I'm <00:11:07.285>just <00:11:07.425>taking <00:11:07.564>part <00:11:07.705>of <00:11:07.845>the <00:11:07.985>module, <00:11:08.125>taking <00:11:08.265>it <00:11:08.405>out.

190
00:11:11.485 --> 00:11:14.105
<00:11:11.485>And <00:11:11.718>then, <00:11:11.951>um, <00:11:12.185>yeah, <00:11:12.418>initializing <00:11:12.651>the <00:11:12.885>client.

191
00:11:14.485 --> 00:11:17.225
<00:11:14.485>So <00:11:14.718>the <00:11:14.951>syntax <00:11:15.185>is <00:11:15.418>fairly <00:11:15.651>similar <00:11:15.885>except

192
00:11:17.225 --> 00:11:18.345
<00:11:17.225>for <00:11:17.561>the <00:11:17.897>import <00:11:18.233>statement.

193
00:11:19.615 --> 00:11:21.995
<00:11:19.615>And <00:11:19.895>then <00:11:20.175>I <00:11:20.455>did <00:11:20.735>a <00:11:21.015>benchmark.

194
00:11:22.415 --> 00:11:27.395
<00:11:22.415>So <00:11:22.648>I, <00:11:22.881>so <00:11:23.115>for <00:11:23.348>common <00:11:23.581>js, <00:11:23.814>um,

195
00:11:27.935 --> 00:11:32.275
<00:11:27.935>if <00:11:28.135>you <00:11:28.334>are <00:11:28.535>supporting <00:11:28.734>dual <00:11:28.935>um, <00:11:29.135>module <00:11:29.334>systems,

196
00:11:33.015 --> 00:11:36.675
<00:11:33.015>um, <00:11:33.155>you <00:11:33.295>have <00:11:33.435>the <00:11:33.574>fire <00:11:33.715>extension <00:11:33.855>CJS, <00:11:33.995>which <00:11:34.135>then, <00:11:34.275>which <00:11:34.415>is

197
00:11:36.675 --> 00:11:40.755
<00:11:36.675>for <00:11:36.830>common <00:11:36.986>JS <00:11:37.141>and <00:11:37.297>MJS <00:11:37.452>for <00:11:37.608>uh, <00:11:37.763>ecma <00:11:37.919>script <00:11:38.074>module.

198
00:11:41.595 --> 00:11:44.495
<00:11:41.595>So <00:11:41.795>what <00:11:41.995>I <00:11:42.195>simply <00:11:42.395>did <00:11:42.595>is <00:11:42.795>running <00:11:42.995>node

199
00:11:45.195 --> 00:11:47.095
<00:11:45.195>on <00:11:45.545>the <00:11:45.895>common <00:11:46.245>JS <00:11:46.595>file

200
00:11:47.595 --> 00:11:52.135
<00:11:47.595>and <00:11:47.735>on <00:11:47.875>the <00:11:48.015>ESM <00:11:48.155>file, <00:11:48.295>I <00:11:48.435>got <00:11:48.575>inspired <00:11:48.715>by <00:11:48.855>Jared <00:11:48.995>Sonna,

201
00:11:52.135 --> 00:11:53.525
<00:11:52.135>which <00:11:52.385>is <00:11:52.635>the <00:11:52.885>founder <00:11:53.135>of <00:11:53.386>bun.

202
00:11:54.025 --> 00:11:57.205
<00:11:54.025>Um, <00:11:54.225>so <00:11:54.425>I <00:11:54.625>run <00:11:54.824>exactly <00:11:55.025>the <00:11:55.225>same <00:11:55.425>test.

203
00:11:57.235 --> 00:12:00.365
<00:11:57.235>What <00:11:57.390>he <00:11:57.546>also <00:11:57.701>did <00:11:57.857>when <00:11:58.012>he <00:11:58.168>was <00:11:58.323>comparing <00:11:58.479>common <00:11:58.635>JS

204
00:12:00.385 --> 00:12:02.005
<00:12:00.385>and <00:12:01.085>ESM, <00:12:01.785>so,

205
00:12:02.625 --> 00:12:06.205
<00:12:02.625>and <00:12:02.752>what <00:12:02.879>you <00:12:03.006>can <00:12:03.134>see <00:12:03.261>is <00:12:03.388>as <00:12:03.515>a <00:12:03.643>summary <00:12:03.770>here <00:12:03.897>below <00:12:04.025>here,

206
00:12:07.185 --> 00:12:08.245
<00:12:07.185>the <00:12:07.661>common <00:12:08.139>js,

207
00:12:08.585 --> 00:12:12.645
<00:12:08.585>so <00:12:08.760>the <00:12:08.935>CJS <00:12:09.110>went <00:12:09.285>faster <00:12:09.460>than <00:12:09.635>the <00:12:09.810>ecma <00:12:09.985>script.

208
00:12:14.465 --> 00:12:17.725
<00:12:14.465>That's, <00:12:15.865>Sorry,

209
00:12:21.485 --> 00:12:22.765
<00:12:21.485>I <00:12:21.773>was <00:12:22.061>like, <00:12:22.349>wait, <00:12:22.637>what?

210
00:12:24.145 --> 00:12:27.205
<00:12:24.145>Why? <00:12:24.319>Why <00:12:24.495>should <00:12:24.670>we <00:12:24.845>not <00:12:25.020>then <00:12:25.194>use <00:12:25.370>common <00:12:25.545>js?

211
00:12:27.205 --> 00:12:31.845
<00:12:27.205>If <00:12:27.360>it's <00:12:27.516>faster, <00:12:27.671>why <00:12:27.827>should <00:12:27.982>we <00:12:28.138>deal <00:12:28.293>with <00:12:28.449>ecma <00:12:28.605>script

212
00:12:31.845 --> 00:12:33.445
<00:12:31.845>and <00:12:32.311>all <00:12:32.778>this <00:12:33.245>crap?

213
00:12:34.955 --> 00:12:39.125
<00:12:34.955>So <00:12:35.155>I <00:12:35.355>was <00:12:35.555>not <00:12:35.755>thinking <00:12:35.955>one <00:12:36.155>step <00:12:36.355>further,

214
00:12:39.155 --> 00:12:41.965
<00:12:39.155>because <00:12:39.435>usually <00:12:39.714>when <00:12:39.995>you <00:12:40.275>develop <00:12:40.555>something

215
00:12:42.825 --> 00:12:45.285
<00:12:42.825>you <00:12:43.025>are <00:12:43.225>not <00:12:43.425>shipping <00:12:43.625>the <00:12:43.825>node <00:12:44.025>modules <00:12:44.225>folder

216
00:12:45.835 --> 00:12:47.445
<00:12:45.835>alongside <00:12:46.301>your <00:12:46.768>application, <00:12:47.235>right?

217
00:12:48.225 --> 00:12:52.165
<00:12:48.225>So <00:12:48.380>what <00:12:48.536>you <00:12:48.691>usually <00:12:48.847>do <00:12:49.002>is <00:12:49.158>when <00:12:49.313>you <00:12:49.469>productionize <00:12:49.625>something,

218
00:12:52.705 --> 00:12:56.125
<00:12:52.705>you <00:12:52.905>bundle <00:12:53.105>it <00:12:53.305>into <00:12:53.505>one <00:12:53.705>single <00:12:53.905>file, <00:12:54.105>correct.

219
00:12:57.485 --> 00:13:00.225
<00:12:57.485>So <00:12:57.640>this <00:12:57.796>is <00:12:57.951>what <00:12:58.107>I <00:12:58.262>did <00:12:58.418>as <00:12:58.573>the <00:12:58.729>next <00:12:58.885>step.

220
00:13:00.525 --> 00:13:04.745
<00:13:00.525>So <00:13:00.652>I <00:13:00.779>took <00:13:00.906>the <00:13:01.034>common <00:13:01.161>JS <00:13:01.288>and <00:13:01.415>the <00:13:01.543>ecma <00:13:01.670>script, <00:13:01.797>uh, <00:13:01.925>file,

221
00:13:05.285 --> 00:13:07.425
<00:13:05.285>and <00:13:05.518>then <00:13:05.751>I <00:13:05.985>bonded <00:13:06.218>using <00:13:06.451>use <00:13:06.685>build.

222
00:13:08.575 --> 00:13:11.995
<00:13:08.575>So <00:13:08.691>this <00:13:08.808>on <00:13:08.925>the <00:13:09.041>left <00:13:09.158>side <00:13:09.275>is <00:13:09.391>the <00:13:09.508>command <00:13:09.625>for <00:13:09.741>the, <00:13:09.858>um, <00:13:09.975>yes,

223
00:13:12.295 --> 00:13:14.275
<00:13:12.295>uh, <00:13:12.574>for <00:13:12.854>the <00:13:13.135>common <00:13:13.415>JS <00:13:13.694>bundle.

224
00:13:14.895 --> 00:13:18.795
<00:13:14.895>So <00:13:15.035>the <00:13:15.175>output <00:13:15.314>will <00:13:15.454>be <00:13:15.595>then <00:13:15.735>at <00:13:15.875>three <00:13:16.015>bundles <00:13:16.155>do <00:13:16.295>CJs,

225
00:13:19.895 --> 00:13:23.195
<00:13:19.895>and <00:13:20.022>on <00:13:20.149>the <00:13:20.276>right <00:13:20.404>side <00:13:20.531>the <00:13:20.658>one <00:13:20.785>for <00:13:20.913>the <00:13:21.040>ecma <00:13:21.167>script, <00:13:21.295>um,

226
00:13:23.695 --> 00:13:26.515
<00:13:23.695>so <00:13:23.850>there's <00:13:24.006>a <00:13:24.161>flag <00:13:24.317>where <00:13:24.472>you <00:13:24.628>can <00:13:24.783>define <00:13:24.939>the <00:13:25.095>format.

227
00:13:26.935 --> 00:13:30.555
<00:13:26.935>So <00:13:27.109>CJS <00:13:27.285>for <00:13:27.459>common <00:13:27.635>JS <00:13:27.810>and <00:13:27.984>ESM <00:13:28.160>for <00:13:28.334>ESM.

228
00:13:31.455 --> 00:13:36.395
<00:13:31.455>And <00:13:31.610>as <00:13:31.766>you <00:13:31.921>can <00:13:32.077>see, <00:13:32.232>the <00:13:32.388>common <00:13:32.543>JS <00:13:32.699>is <00:13:32.855>almost

229
00:13:37.375 --> 00:13:41.115
<00:13:37.375>double <00:13:37.550>the <00:13:37.725>size <00:13:37.900>of <00:13:38.075>the <00:13:38.250>ESM <00:13:38.425>module <00:13:38.600>after <00:13:38.775>bundling.

230
00:13:42.745 --> 00:13:47.285
<00:13:42.745>So <00:13:42.872>it, <00:13:42.999>it <00:13:43.126>means <00:13:43.254>like, <00:13:43.381>um, <00:13:43.508>ESM <00:13:43.635>is <00:13:43.763>better <00:13:43.890>in <00:13:44.017>tree <00:13:44.145>shaking,

231
00:13:47.385 --> 00:13:51.405
<00:13:47.385>so <00:13:47.585>it <00:13:47.785>stripes <00:13:47.985>out <00:13:48.185>the <00:13:48.385>correct <00:13:48.585>code <00:13:48.785>information

232
00:13:51.425 --> 00:13:53.765
<00:13:51.425>or <00:13:51.625>the, <00:13:51.824>the <00:13:52.025>necessary <00:13:52.224>code <00:13:52.425>which <00:13:52.625>you <00:13:52.824>need

233
00:13:53.765 --> 00:13:55.405
<00:13:53.765>for <00:13:54.115>your <00:13:54.465>application, <00:13:54.814>whereas <00:13:55.165>common

234
00:13:55.545 --> 00:13:56.565
<00:13:55.545>JS <00:13:55.851>is <00:13:56.157>stumping <00:13:56.463>everything.

235
00:13:58.155 --> 00:14:00.055
<00:13:58.155>So <00:13:58.388>that's <00:13:58.621>why <00:13:58.855>you <00:13:59.088>have <00:13:59.321>like, <00:13:59.555>yeah,

236
00:14:00.675 --> 00:14:03.095
<00:14:00.675>almost <00:14:00.849>double <00:14:01.025>the <00:14:01.199>size <00:14:01.375>in <00:14:01.550>com <00:14:01.724>as <00:14:01.900>common <00:14:02.074>JS

237
00:14:03.395 --> 00:14:04.935
<00:14:03.395>and <00:14:03.672>half <00:14:03.949>the <00:14:04.226>size <00:14:04.503>in <00:14:04.781>SM.

238
00:14:05.435 --> 00:14:08.395
<00:14:05.435>And <00:14:05.635>then <00:14:05.834>I <00:14:06.035>went <00:14:06.234>when <00:14:06.435>this <00:14:06.635>test <00:14:06.834>again.

239
00:14:09.095 --> 00:14:12.715
<00:14:09.095>So <00:14:09.202>uh, <00:14:09.310>I <00:14:09.418>just, <00:14:09.525>I <00:14:09.633>took <00:14:09.741>the <00:14:09.848>bundle <00:14:09.956>and <00:14:10.064>then <00:14:10.171>I <00:14:10.279>won <00:14:10.387>again <00:14:10.495>note.

240
00:14:13.385 --> 00:14:18.365
<00:14:13.385>And <00:14:13.501>then <00:14:13.618>now <00:14:13.735>what <00:14:13.851>you <00:14:13.968>can <00:14:14.085>see <00:14:14.201>is <00:14:14.318>the <00:14:14.435>ecma <00:14:14.551>grip <00:14:14.668>is <00:14:14.785>faster,

241
00:14:18.825 --> 00:14:20.885
<00:14:18.825>of <00:14:19.000>course <00:14:19.175>it <00:14:19.350>makes <00:14:19.525>sense <00:14:19.700>because <00:14:19.875>it's <00:14:20.050>now <00:14:20.225>smaller,

242
00:14:21.435 --> 00:14:23.085
<00:14:21.435>it's <00:14:22.135>faster, <00:14:22.834>um,

243
00:14:23.115 --> 00:14:25.885
<00:14:23.115>because <00:14:23.315>it <00:14:23.515>was <00:14:23.715>bundled <00:14:23.915>into <00:14:24.115>a <00:14:24.315>smaller <00:14:24.515>bundle

244
00:14:26.345 --> 00:14:30.605
<00:14:26.345>and <00:14:26.520>it's <00:14:26.695>also <00:14:26.870>faster <00:14:27.045>than <00:14:27.220>the <00:14:27.395>unbundled <00:14:27.570>common <00:14:27.745>js.

245
00:14:32.345 --> 00:14:36.105
<00:14:32.345>So <00:14:32.625>that's <00:14:32.905>actually <00:14:33.185>a <00:14:33.465>nice <00:14:33.745>finding.

246
00:14:36.525 --> 00:14:39.305
<00:14:36.525>So <00:14:36.680>that, <00:14:36.836>that's <00:14:36.991>why <00:14:37.147>I <00:14:37.302>would <00:14:37.458>like <00:14:37.613>to <00:14:37.769>tell <00:14:37.925>you

247
00:14:39.405 --> 00:14:43.105
<00:14:39.405>or <00:14:39.505>I <00:14:39.605>would <00:14:39.704>like <00:14:39.805>to <00:14:39.905>give <00:14:40.005>you <00:14:40.105>on <00:14:40.204>the <00:14:40.305>way <00:14:40.405>yes, <00:14:40.505>M <00:14:40.605>is <00:14:40.704>the <00:14:40.805>future

248
00:14:44.435 --> 00:14:48.805
<00:14:44.435>because <00:14:44.590>what <00:14:44.746>you <00:14:44.901>saw <00:14:45.057>is <00:14:45.212>you <00:14:45.368>get <00:14:45.523>a <00:14:45.679>smaller <00:14:45.834>bundle

249
00:14:49.745 --> 00:14:54.065
<00:14:49.745>that's <00:14:49.920>also <00:14:50.095>necessary <00:14:50.270>if <00:14:50.445>you <00:14:50.620>work <00:14:50.795>with <00:14:50.970>AWS <00:14:51.145>Lambda,

250
00:14:54.095 --> 00:14:57.905
<00:14:54.095>like <00:14:54.270>cloud <00:14:54.445>functions <00:14:54.620>or <00:14:54.795>any <00:14:54.970>kind <00:14:55.145>of <00:14:55.320>edge <00:14:55.495>functions.

251
00:14:58.885 --> 00:15:00.225
<00:14:58.885>So <00:14:59.126>you <00:14:59.367>get <00:14:59.608>a <00:14:59.849>smaller <00:15:00.091>bundle

252
00:15:01.285 --> 00:15:04.575
<00:15:01.285>and <00:15:01.564>that <00:15:01.844>makes <00:15:02.125>it <00:15:02.405>also <00:15:02.685>faster.

253
00:15:05.915 --> 00:15:09.175
<00:15:05.915>And <00:15:06.265>you <00:15:06.615>can <00:15:06.964>use <00:15:07.314>ESM

254
00:15:09.955 --> 00:15:12.215
<00:15:09.955>on <00:15:10.188>the <00:15:10.421>client <00:15:10.655>and <00:15:10.888>on <00:15:11.121>the <00:15:11.355>server.

255
00:15:12.315 --> 00:15:14.015
<00:15:12.315>So <00:15:12.515>like <00:15:12.715>I <00:15:12.915>said, <00:15:13.115>node <00:15:13.315>js <00:15:13.515>and <00:15:13.715>BUN

256
00:15:14.015 --> 00:15:17.295
<00:15:14.015>and <00:15:14.189>Dino, <00:15:14.365>they <00:15:14.540>support <00:15:14.715>ESM <00:15:14.890>because <00:15:15.064>it's <00:15:15.240>a <00:15:15.415>standard.

257
00:15:17.755 --> 00:15:21.055
<00:15:17.755>So <00:15:17.955>you <00:15:18.155>can <00:15:18.355>use <00:15:18.555>in <00:15:18.755>your <00:15:18.955>node <00:15:19.155>environment

258
00:15:22.055 --> 00:15:24.255
<00:15:22.055>ESM <00:15:22.405>syntax <00:15:22.755>without <00:15:23.104>using <00:15:23.454>Babel

259
00:15:24.255 --> 00:15:26.455
<00:15:24.255>and <00:15:24.488>converting <00:15:24.721>it <00:15:24.955>all <00:15:25.188>to <00:15:25.421>common <00:15:25.655>JS

260
00:15:26.455 --> 00:15:29.335
<00:15:26.455>and <00:15:26.735>all <00:15:27.015>the <00:15:27.295>crap <00:15:27.575>let's <00:15:27.855>say.

261
00:15:29.675 --> 00:15:32.345
<00:15:29.675>Um, <00:15:29.908>what <00:15:30.141>I <00:15:30.375>meant <00:15:30.608>with, <00:15:30.841>with <00:15:31.074>um,

262
00:15:34.595 --> 00:15:37.685
<00:15:34.595>What <00:15:34.795>I <00:15:34.995>meant <00:15:35.195>with <00:15:35.395>on <00:15:35.595>the <00:15:35.795>client <00:15:35.995>is

263
00:15:37.955 --> 00:15:39.925
<00:15:37.955>because <00:15:38.188>on <00:15:38.421>the <00:15:38.655>browser, <00:15:38.888>so <00:15:39.121>for <00:15:39.355>example,

264
00:15:39.985 --> 00:15:41.125
<00:15:39.985>if <00:15:40.327>you're <00:15:40.669>using <00:15:41.011>React

265
00:15:41.865 --> 00:15:44.925
<00:15:41.865>and <00:15:42.020>um, <00:15:42.176>yeah, <00:15:42.331>you, <00:15:42.487>you <00:15:42.642>use <00:15:42.798>something <00:15:42.953>like <00:15:43.109>react <00:15:43.265>dev,

266
00:15:46.225 --> 00:15:47.765
<00:15:46.225>the <00:15:46.571>V <00:15:46.918>server <00:15:47.264>behind <00:15:47.611>that

267
00:15:47.785 --> 00:15:49.645
<00:15:47.785>or <00:15:48.064>any <00:15:48.344>kind <00:15:48.625>of <00:15:48.905>bundler <00:15:49.185>behind

268
00:15:49.645 --> 00:15:52.205
<00:15:49.645>that <00:15:49.845>is <00:15:50.045>like <00:15:50.245>splitting <00:15:50.444>the <00:15:50.645>code <00:15:50.845>for <00:15:51.045>you.

269
00:15:52.225 --> 00:15:56.165
<00:15:52.225>So <00:15:52.365>you <00:15:52.505>have <00:15:52.645>multiple <00:15:52.785>JavaScript <00:15:52.925>file <00:15:53.065>which <00:15:53.205>is <00:15:53.345>then <00:15:53.485>load <00:15:53.625>into

270
00:15:56.165 --> 00:15:57.205
<00:15:56.165>your <00:15:57.101>client.

271
00:15:57.785 --> 00:16:00.565
<00:15:57.785>So <00:15:57.985>it's <00:15:58.185>not <00:15:58.385>necess, <00:15:58.584>you <00:15:58.785>don't <00:15:58.985>necessarily <00:15:59.185>need

272
00:16:00.665 --> 00:16:02.925
<00:16:00.665>to <00:16:00.839>run <00:16:01.015>a <00:16:01.189>no <00:16:01.365>JS <00:16:01.540>server <00:16:01.714>in <00:16:01.890>the <00:16:02.064>background

273
00:16:03.105 --> 00:16:05.525
<00:16:03.105>to <00:16:03.305>know <00:16:03.505>load <00:16:03.705>all <00:16:03.905>the, <00:16:04.105>not <00:16:04.305>module <00:16:04.505>folder.

274
00:16:05.905 --> 00:16:09.885
<00:16:05.905>So <00:16:06.021>I <00:16:06.138>don't <00:16:06.255>know <00:16:06.371>if <00:16:06.488>you <00:16:06.605>can <00:16:06.721>see <00:16:06.838>it <00:16:06.954>here, <00:16:07.071>let <00:16:07.188>me <00:16:07.305>uh,

275
00:16:10.075 --> 00:16:11.165
<00:16:10.075>okay, <00:16:10.320>you <00:16:10.565>cannot <00:16:10.810>see <00:16:11.055>it.

276
00:16:11.545 --> 00:16:16.505
<00:16:11.545>Um, <00:16:12.011>so <00:16:12.478>okay, <00:16:12.944>um,

277
00:16:18.995 --> 00:16:21.855
<00:16:18.995>let <00:16:19.461>me <00:16:19.928>do <00:16:20.395>something.

278
00:16:26.925 --> 00:16:29.385
<00:16:26.925>So <00:16:27.275>let's, <00:16:27.625>let's <00:16:27.974>take <00:16:28.324>the,

279
00:16:34.165 --> 00:16:35.935
<00:16:34.165>this <00:16:34.515>is <00:16:34.865>like <00:16:35.214>the <00:16:35.564>HTML.

280
00:16:36.155 --> 00:16:37.695
<00:16:36.155>So <00:16:36.848>what <00:16:37.541>wheat

281
00:16:37.715 --> 00:16:41.655
<00:16:37.715>and <00:16:37.855>all <00:16:37.995>the <00:16:38.135>other <00:16:38.275>bundlers <00:16:38.415>are <00:16:38.555>doing, <00:16:38.695>they <00:16:38.835>are <00:16:38.975>like <00:16:39.115>bundling

282
00:16:42.195 --> 00:16:44.415
<00:16:42.195>the <00:16:42.428>JavaScript <00:16:42.661>and <00:16:42.895>then <00:16:43.128>just <00:16:43.361>importing <00:16:43.595>them

283
00:16:44.875 --> 00:16:48.455
<00:16:44.875>and <00:16:45.030>by <00:16:45.186>importing <00:16:45.341>them <00:16:45.497>you <00:16:45.652>would <00:16:45.808>use <00:16:45.963>something <00:16:46.119>like, <00:16:46.275>uh,

284
00:16:48.455 --> 00:16:49.975
<00:16:48.455>they <00:16:48.728>will <00:16:49.002>use <00:16:49.275>something <00:16:49.549>like <00:16:49.823>type

285
00:16:50.035 --> 00:16:53.175
<00:16:50.035>and <00:16:50.268>then <00:16:50.501>module, <00:16:50.735>uh, <00:16:50.968>which <00:16:51.201>says <00:16:51.435>okay,

286
00:16:53.285 --> 00:16:55.095
<00:16:53.285>it's <00:16:53.751>an <00:16:54.218>SM <00:16:54.685>file.

287
00:16:55.595 --> 00:16:58.575
<00:16:55.595>So <00:16:55.770>because <00:16:55.945>then <00:16:56.120>you <00:16:56.295>can <00:16:56.470>use <00:16:56.645>something <00:16:56.820>like, <00:16:56.995>uh,

288
00:17:01.495 --> 00:17:03.715
<00:17:01.495>You <00:17:01.650>can <00:17:01.806>use <00:17:01.961>something <00:17:02.117>like <00:17:02.272>import <00:17:02.428>and <00:17:02.583>then <00:17:02.739>date <00:17:02.895>format

289
00:17:05.015 --> 00:17:09.325
<00:17:05.015>and <00:17:05.248>then <00:17:05.481>defined <00:17:05.715>uh, <00:17:05.948>the <00:17:06.181>file, <00:17:06.415>um,

290
00:17:09.395 --> 00:17:12.605
<00:17:09.395>because <00:17:09.628>there's <00:17:09.861>no <00:17:10.095>um, <00:17:10.328>no <00:17:10.561>just <00:17:10.795>running.

291
00:17:13.065 --> 00:17:16.005
<00:17:13.065>So <00:17:13.240>you <00:17:13.415>have <00:17:13.590>to <00:17:13.765>explicitly <00:17:13.940>point <00:17:14.115>to <00:17:14.290>a <00:17:14.465>file

292
00:17:16.665 --> 00:17:17.805
<00:17:16.665>and <00:17:16.921>then <00:17:17.178>you <00:17:17.434>can <00:17:17.691>uh,

293
00:17:18.105 --> 00:17:22.005
<00:17:18.105>and <00:17:18.280>then <00:17:18.454>it's <00:17:18.630>loading <00:17:18.805>that <00:17:18.980>file <00:17:19.155>into <00:17:19.329>your <00:17:19.505>browser.

294
00:17:22.545 --> 00:17:24.965
<00:17:22.545>So <00:17:22.700>this <00:17:22.856>is <00:17:23.011>what <00:17:23.167>I <00:17:23.322>meant <00:17:23.478>with <00:17:23.633>client <00:17:23.789>and <00:17:23.945>browser.

295
00:17:25.665 --> 00:17:28.945
<00:17:25.665>So <00:17:25.898>this <00:17:26.131>is <00:17:26.365>inbuilt <00:17:26.598>in <00:17:26.831>your <00:17:27.065>browser

296
00:17:29.475 --> 00:17:30.945
<00:17:29.475>since <00:17:30.798>2017.

297
00:17:31.845 --> 00:17:35.505
<00:17:31.845>So <00:17:31.985>if <00:17:32.125>you <00:17:32.265>have <00:17:32.405>an <00:17:32.545>older <00:17:32.685>browser, <00:17:32.825>which <00:17:32.965>I <00:17:33.105>don't <00:17:33.245>recommend,

298
00:17:36.255 --> 00:17:38.865
<00:17:36.255>then <00:17:36.535>probably <00:17:36.815>it <00:17:37.095>will <00:17:37.375>not <00:17:37.655>work.

299
00:17:39.285 --> 00:17:42.915
<00:17:39.285>But <00:17:39.518>2017, <00:17:39.751>that's <00:17:39.985>now <00:17:40.218>seven <00:17:40.451>years, <00:17:40.685>right?

300
00:17:43.015 --> 00:17:48.005
<00:17:43.015>So <00:17:43.190>I <00:17:43.365>assume <00:17:43.540>all <00:17:43.715>of <00:17:43.890>you <00:17:44.065>have <00:17:44.240>a <00:17:44.415>Yeah,

301
00:17:48.515 --> 00:17:50.285
<00:17:48.515>good <00:17:48.865>browser, <00:17:49.215>an <00:17:49.565>UpToDate <00:17:49.915>browser.

302
00:17:54.475 --> 00:17:58.415
<00:17:54.475>So <00:17:54.591>yeah, <00:17:54.708>um, <00:17:54.824>it <00:17:54.941>works <00:17:55.058>on <00:17:55.175>the <00:17:55.291>server. <00:17:55.408>It <00:17:55.524>works <00:17:55.641>on <00:17:55.758>the <00:17:55.875>client.

303
00:18:00.535 --> 00:18:02.255
<00:18:00.535>Whenever <00:18:00.885>you <00:18:01.235>start <00:18:01.585>learning <00:18:01.935>TypeScript,

304
00:18:02.515 --> 00:18:05.655
<00:18:02.515>you <00:18:02.748>subconsciously <00:18:02.981>also <00:18:03.215>learning <00:18:03.448>ESM <00:18:03.681>syntax, <00:18:03.915>right?

305
00:18:06.375 --> 00:18:08.635
<00:18:06.375>Or <00:18:06.608>has <00:18:06.841>any <00:18:07.075>one <00:18:07.308>of <00:18:07.541>you <00:18:07.775>use

306
00:18:09.625 --> 00:18:12.515
<00:18:09.625>require <00:18:09.905>import <00:18:10.185>in <00:18:10.465>your <00:18:10.745>TypeScript <00:18:11.025>file?

307
00:18:13.475 --> 00:18:16.675
<00:18:13.475>I <00:18:13.649>don't <00:18:13.824>think <00:18:14.000>so. <00:18:14.175>So <00:18:14.350>all <00:18:14.524>the <00:18:14.699>blog <00:18:14.875>posts,

308
00:18:16.675 --> 00:18:20.545
<00:18:16.675>all <00:18:16.908>the <00:18:17.141>documentation <00:18:17.375>they <00:18:17.608>use <00:18:17.841>ESM <00:18:18.075>syntax.

309
00:18:22.025 --> 00:18:25.565
<00:18:22.025>And <00:18:22.200>here's <00:18:22.375>also <00:18:22.550>one <00:18:22.725>point <00:18:22.900>if <00:18:23.075>your <00:18:23.250>code <00:18:23.425>break,

310
00:18:25.905 --> 00:18:27.045
<00:18:25.905>uh, <00:18:26.161>if <00:18:26.418>your <00:18:26.674>code <00:18:26.931>breaks.

311
00:18:27.785 --> 00:18:30.445
<00:18:27.785>So <00:18:27.985>same <00:18:28.185>what's <00:18:28.385>happened <00:18:28.585>to <00:18:28.785>me <00:18:28.985>using <00:18:29.185>jest.

312
00:18:30.855 --> 00:18:33.125
<00:18:30.855>Maybe <00:18:31.088>you <00:18:31.321>are <00:18:31.555>using <00:18:31.788>a <00:18:32.021>legacy <00:18:32.255>module,

313
00:18:33.975 --> 00:18:36.365
<00:18:33.975>maybe <00:18:34.324>you <00:18:34.675>should <00:18:35.024>start <00:18:35.375>rethinking

314
00:18:36.465 --> 00:18:38.845
<00:18:36.465>and <00:18:36.814>refactoring <00:18:37.165>your <00:18:37.514>code <00:18:37.865>base

315
00:18:39.545 --> 00:18:42.405
<00:18:39.545>and <00:18:39.895>exchanging <00:18:40.245>the <00:18:40.595>NPM <00:18:40.945>package.

316
00:18:42.745 --> 00:18:45.205
<00:18:42.745>So <00:18:42.945>instead <00:18:43.145>of <00:18:43.344>using <00:18:43.544>jest, <00:18:43.745>using <00:18:43.945>V <00:18:44.145>test,

317
00:18:45.665 --> 00:18:47.005
<00:18:45.665>the <00:18:45.966>syntax <00:18:46.268>is <00:18:46.569>the <00:18:46.871>same,

318
00:18:47.265 --> 00:18:49.125
<00:18:47.265>of <00:18:47.498>course <00:18:47.731>the <00:18:47.965>module <00:18:48.198>name <00:18:48.431>is <00:18:48.665>different,

319
00:18:49.665 --> 00:18:52.765
<00:18:49.665>but <00:18:49.945>yeah, <00:18:50.225>you <00:18:50.504>should <00:18:50.784>start <00:18:51.065>rethinking

320
00:18:52.985 --> 00:18:56.205
<00:18:52.985>or <00:18:53.140>if <00:18:53.296>you <00:18:53.451>use <00:18:53.607>express, <00:18:53.762>maybe <00:18:53.918>it's <00:18:54.073>time <00:18:54.229>for <00:18:54.385>you

321
00:18:56.305 --> 00:18:59.845
<00:18:56.305>for <00:18:56.480>using <00:18:56.655>something <00:18:56.830>much <00:18:57.005>more <00:18:57.180>faster <00:18:57.355>than <00:18:57.530>express <00:18:57.705>js.

322
00:19:00.265 --> 00:19:02.325
<00:19:00.265>I'm <00:19:00.498>thinking <00:19:00.731>of <00:19:00.965>H <00:19:01.198>three <00:19:01.431>of <00:19:01.665>NJS.

323
00:19:03.145 --> 00:19:07.245
<00:19:03.145>So <00:19:03.285>yeah, <00:19:03.425>I <00:19:03.565>think <00:19:03.705>this <00:19:03.845>is <00:19:03.985>a <00:19:04.125>good <00:19:04.264>point <00:19:04.405>to <00:19:04.545>start

324
00:19:07.785 --> 00:19:09.725
<00:19:07.785>to <00:19:08.018>start <00:19:08.251>with <00:19:08.485>rethinking <00:19:08.718>your <00:19:08.951>code <00:19:09.185>base.

325
00:19:10.375 --> 00:19:15.275
<00:19:10.375>And <00:19:10.530>yes, <00:19:10.686>they <00:19:10.841>are <00:19:10.997>like <00:19:11.152>almost <00:19:11.308>70% <00:19:11.463>using <00:19:11.619>common <00:19:11.775>JS

326
00:19:15.465 --> 00:19:17.755
<00:19:15.465>only, <00:19:15.931>but <00:19:16.398>how <00:19:16.865>many

327
00:19:17.775 --> 00:19:20.755
<00:19:17.775>of <00:19:18.008>these <00:19:18.241>packages <00:19:18.475>are <00:19:18.708>still <00:19:18.941>actively <00:19:19.175>maintained?

328
00:19:21.335 --> 00:19:23.985
<00:19:21.335>How <00:19:22.035>many <00:19:22.735>packages

329
00:19:24.285 --> 00:19:27.435
<00:19:24.285>or <00:19:24.460>there <00:19:24.635>are <00:19:24.810>a <00:19:24.985>lot <00:19:25.160>of <00:19:25.335>alternatives <00:19:25.510>out <00:19:25.685>there.

330
00:19:27.975 --> 00:19:31.435
<00:19:27.975>So <00:19:28.091>like <00:19:28.208>I <00:19:28.324>said, <00:19:28.441>instead <00:19:28.558>of <00:19:28.675>uh, <00:19:28.791>just <00:19:28.908>you <00:19:29.024>could <00:19:29.141>use <00:19:29.258>V <00:19:29.375>test

331
00:19:31.975 --> 00:19:35.555
<00:19:31.975>or <00:19:32.102>express, <00:19:32.229>there <00:19:32.356>are <00:19:32.484>a <00:19:32.611>lot <00:19:32.738>of <00:19:32.865>like <00:19:32.993>fast <00:19:33.120>API <00:19:33.247>or <00:19:33.375>something

332
00:19:36.055 --> 00:19:38.155
<00:19:36.055>or <00:19:36.755>so, <00:19:37.455>um,

333
00:19:41.015 --> 00:19:42.185
<00:19:41.015>this <00:19:41.278>is <00:19:41.541>a <00:19:41.804>board <00:19:42.068>statement.

334
00:19:43.365 --> 00:19:46.425
<00:19:43.365>You <00:19:43.565>should, <00:19:43.765>or <00:19:43.965>you <00:19:44.165>can <00:19:44.365>avoid <00:19:44.565>the <00:19:44.765>mess

335
00:19:46.725 --> 00:19:51.025
<00:19:46.725>and <00:19:46.899>embrace <00:19:47.074>ESM <00:19:47.250>by <00:19:47.425>just <00:19:47.600>starting <00:19:47.774>with <00:19:47.949>ESM <00:19:48.125>only.

336
00:19:52.485 --> 00:19:55.785
<00:19:52.485>You <00:19:52.659>should <00:19:52.834>not <00:19:53.010>care <00:19:53.185>about <00:19:53.360>like <00:19:53.534>common <00:19:53.709>JS <00:19:53.885>users

337
00:19:56.135 --> 00:19:59.965
<00:19:56.135>because <00:19:56.415>they <00:19:56.695>should <00:19:56.975>rethink <00:19:57.254>the <00:19:57.535>architecture.

338
00:19:59.965 --> 00:20:03.685
<00:19:59.965>They <00:20:00.198>should <00:20:00.431>rethink <00:20:00.665>how <00:20:00.898>the <00:20:01.131>application's <00:20:01.365>implemented

339
00:20:03.745 --> 00:20:05.805
<00:20:03.745>and <00:20:04.024>start <00:20:04.304>using <00:20:04.584>something <00:20:04.864>more <00:20:05.145>modern.

340
00:20:06.465 --> 00:20:11.085
<00:20:06.465>So <00:20:06.572>this <00:20:06.680>is <00:20:06.788>my <00:20:06.895>take, <00:20:07.003>uh, <00:20:07.111>for <00:20:07.218>you <00:20:07.326>and <00:20:07.434>this <00:20:07.541>is <00:20:07.649>all <00:20:07.757>I <00:20:07.865>have.

341
00:20:11.705 --> 00:20:14.285
<00:20:11.705>So <00:20:11.938>you <00:20:12.171>can <00:20:12.405>yeah, <00:20:12.638>scan <00:20:12.871>my <00:20:13.105>website

342
00:20:15.025 --> 00:20:16.885
<00:20:15.025>and <00:20:15.375>find <00:20:15.725>all <00:20:16.075>the <00:20:16.425>socials.

343
00:20:17.625 --> 00:20:20.125
<00:20:17.625>And <00:20:17.825>thank <00:20:18.025>you <00:20:18.225>for <00:20:18.425>your <00:20:18.625>time. <00:20:18.825>Thank <00:20:19.025>you.