WEBVTT

1
00:00:05.325 --> 00:00:07.815
<00:00:05.325>Yeah, <00:00:05.558>I'm <00:00:05.791>here <00:00:06.025>speaking <00:00:06.258>about <00:00:06.491>multi-threading <00:00:06.725>in

2
00:00:07.815 --> 00:00:11.775
<00:00:07.815>JavaScript, <00:00:07.970>but <00:00:08.126>I <00:00:08.281>actually <00:00:08.437>started <00:00:08.592>my <00:00:08.748>developer <00:00:08.903>journey <00:00:09.059>as <00:00:09.215>a

3
00:00:12.395 --> 00:00:16.535
<00:00:12.395>mobile <00:00:12.570>developer <00:00:12.745>for <00:00:12.920>native <00:00:13.094>A <00:00:13.270>OS <00:00:13.445>and <00:00:13.620>Android <00:00:13.795>apps.

4
00:00:17.155 --> 00:00:20.535
<00:00:17.155>And <00:00:17.330>soon <00:00:17.505>when <00:00:17.680>I <00:00:17.855>switch <00:00:18.030>into <00:00:18.205>a <00:00:18.380>consultant <00:00:18.555>company,

5
00:00:21.695 --> 00:00:25.335
<00:00:21.695>I <00:00:21.850>started <00:00:22.006>this <00:00:22.161>project <00:00:22.317>with <00:00:22.472>no <00:00:22.628>JS <00:00:22.783>and <00:00:22.939>Angular <00:00:23.095>one

6
00:00:25.435 --> 00:00:28.135
<00:00:25.435>and <00:00:25.634>I <00:00:25.834>felt <00:00:26.035>in <00:00:26.235>love <00:00:26.435>in <00:00:26.634>with <00:00:26.834>JavaScript.

7
00:00:28.915 --> 00:00:32.085
<00:00:28.915>So <00:00:29.615>lately <00:00:30.314>I,

8
00:00:32.755 --> 00:00:34.125
<00:00:32.755>I've <00:00:33.063>been <00:00:33.371>working <00:00:33.679>in <00:00:33.988>Dynatrace

9
00:00:34.185 --> 00:00:36.325
<00:00:34.185>and <00:00:34.418>in <00:00:34.651>Dynatrace <00:00:34.885>we <00:00:35.118>strive <00:00:35.351>for <00:00:35.585>performance.

10
00:00:36.745 --> 00:00:38.645
<00:00:36.745>So <00:00:37.445>I <00:00:38.144>wondered

11
00:00:39.425 --> 00:00:43.405
<00:00:39.425>how <00:00:39.580>can <00:00:39.736>we <00:00:39.891>make <00:00:40.047>our <00:00:40.202>front <00:00:40.358>ends <00:00:40.513>app <00:00:40.669>even <00:00:40.824>faster?

12
00:00:44.855 --> 00:00:48.625
<00:00:44.855>Because <00:00:45.321>if <00:00:45.788>the <00:00:46.254>performance

13
00:00:48.625 --> 00:00:51.945
<00:00:48.625>of <00:00:48.765>our <00:00:48.905>application <00:00:49.045>is <00:00:49.185>not <00:00:49.325>good, <00:00:49.465>we <00:00:49.605>have <00:00:49.745>a <00:00:49.885>low <00:00:50.025>rating,

14
00:00:52.685 --> 00:00:55.145
<00:00:52.685>our <00:00:52.918>users <00:00:53.151>are <00:00:53.385>quitting <00:00:53.618>our <00:00:53.851>page <00:00:54.085>soon.

15
00:00:55.845 --> 00:00:58.905
<00:00:55.845>And <00:00:56.045>if <00:00:56.245>the <00:00:56.445>users <00:00:56.644>are <00:00:56.845>quitting <00:00:57.045>your <00:00:57.245>page,

16
00:00:59.045 --> 00:01:01.065
<00:00:59.045>it <00:00:59.278>means <00:00:59.511>less <00:00:59.745>revenue <00:00:59.978>in <00:01:00.211>the <00:01:00.445>end.

17
00:01:01.565 --> 00:01:05.755
<00:01:01.565>So <00:01:01.739>JavaScript <00:01:01.915>by <00:01:02.089>default <00:01:02.265>has <00:01:02.440>a <00:01:02.614>single <00:01:02.790>threaded <00:01:02.964>nature,

18
00:01:05.845 --> 00:01:08.755
<00:01:05.845>which <00:01:06.020>is <00:01:06.195>a <00:01:06.370>good <00:01:06.545>thing <00:01:06.720>because <00:01:06.895>you <00:01:07.070>don't <00:01:07.245>need

19
00:01:08.975 --> 00:01:11.795
<00:01:08.975>to <00:01:09.255>go <00:01:09.535>into <00:01:09.815>the <00:01:10.095>multi-threading <00:01:10.375>complexity

20
00:01:11.795 --> 00:01:12.835
<00:01:11.795>if <00:01:12.029>you <00:01:12.263>don't <00:01:12.497>need <00:01:12.731>to.

21
00:01:13.695 --> 00:01:16.995
<00:01:13.695>And <00:01:13.869>what <00:01:14.044>I <00:01:14.220>want <00:01:14.395>to <00:01:14.570>show <00:01:14.744>you <00:01:14.919>is <00:01:15.095>what

22
00:01:17.535 --> 00:01:19.435
<00:01:17.535>you <00:01:17.768>can <00:01:18.001>have <00:01:18.235>in <00:01:18.468>the <00:01:18.701>multi-threaded <00:01:18.935>world.

23
00:01:21.265 --> 00:01:25.405
<00:01:21.265>But <00:01:21.405>first <00:01:21.545>I <00:01:21.685>want <00:01:21.825>you <00:01:21.965>to <00:01:22.105>understand <00:01:22.245>the <00:01:22.385>single <00:01:22.525>threaded <00:01:22.665>wall.

24
00:01:25.805 --> 00:01:27.485
<00:01:25.805>I <00:01:26.085>want <00:01:26.365>you <00:01:26.645>to <00:01:26.925>understand <00:01:27.205>JavaScript.

25
00:01:28.545 --> 00:01:32.405
<00:01:28.545>And <00:01:28.720>by <00:01:28.895>understanding <00:01:29.070>JavaScript, <00:01:29.245>I <00:01:29.420>don't <00:01:29.595>mean <00:01:29.770>you <00:01:29.945>need

26
00:01:32.405 --> 00:01:33.885
<00:01:32.405>to <00:01:32.738>understand <00:01:33.071>all <00:01:33.404>this <00:01:33.737>nonsense.

27
00:01:34.065 --> 00:01:35.565
<00:01:34.065>Why <00:01:34.515>not <00:01:34.965>the <00:01:35.414>number?

28
00:01:35.985 --> 00:01:39.365
<00:01:35.985>Triple <00:01:36.160>equals <00:01:36.335>not <00:01:36.510>a <00:01:36.685>number <00:01:36.860>equals <00:01:37.035>false <00:01:37.210>y <00:01:37.385>type

29
00:01:39.365 --> 00:01:41.205
<00:01:39.365>of <00:01:39.598>not <00:01:39.831>a <00:01:40.065>number <00:01:40.298>is <00:01:40.531>actually <00:01:40.765>number.

30
00:01:42.335 --> 00:01:46.405
<00:01:42.335>There <00:01:42.685>are <00:01:43.035>many <00:01:43.385>operations <00:01:43.735>here

31
00:01:46.835 --> 00:01:49.165
<00:01:46.835>that <00:01:46.990>you <00:01:47.146>might <00:01:47.301>think <00:01:47.457>they <00:01:47.612>not <00:01:47.768>make <00:01:47.923>sense <00:01:48.079>at <00:01:48.235>all,

32
00:01:49.785 --> 00:01:52.565
<00:01:49.785>but <00:01:49.985>actually <00:01:50.185>all <00:01:50.384>of <00:01:50.585>them <00:01:50.785>have <00:01:50.985>an <00:01:51.185>explanation.

33
00:01:52.565 --> 00:01:55.885
<00:01:52.565>You <00:01:52.720>can <00:01:52.876>check <00:01:53.031>out <00:01:53.187>this <00:01:53.342>repository <00:01:53.498>if <00:01:53.653>you <00:01:53.809>are <00:01:53.965>interested.

34
00:01:55.885 --> 00:01:59.085
<00:01:55.884>There <00:01:56.040>are <00:01:56.196>the <00:01:56.351>explanation <00:01:56.507>of <00:01:56.662>these <00:01:56.818>things <00:01:56.973>and <00:01:57.129>many <00:01:57.285>more.

35
00:02:01.075 --> 00:02:04.645
<00:02:01.075>What <00:02:01.202>I <00:02:01.329>want <00:02:01.456>you <00:02:01.584>to <00:02:01.711>understand <00:02:01.838>first <00:02:01.965>is <00:02:02.093>how <00:02:02.220>the <00:02:02.347>engine <00:02:02.475>works.

36
00:02:05.345 --> 00:02:09.005
<00:02:05.345>And <00:02:05.500>for <00:02:05.656>that <00:02:05.811>I'm <00:02:05.967>gonna <00:02:06.122>go <00:02:06.278>first <00:02:06.433>with <00:02:06.589>the <00:02:06.745>basics.

37
00:02:11.405 --> 00:02:13.125
<00:02:11.405>I <00:02:11.605>want <00:02:11.805>you <00:02:12.005>to <00:02:12.205>understand <00:02:12.405>the <00:02:12.605>call <00:02:12.805>stack.

38
00:02:13.265 --> 00:02:17.045
<00:02:13.265>The <00:02:13.420>gold <00:02:13.576>stack <00:02:13.731>is <00:02:13.887>a <00:02:14.042>data <00:02:14.198>structure <00:02:14.353>that <00:02:14.509>is <00:02:14.665>used

39
00:02:17.045 --> 00:02:20.805
<00:02:17.045>by <00:02:17.200>the <00:02:17.356>engine <00:02:17.511>to <00:02:17.667>determine <00:02:17.822>which <00:02:17.978>is <00:02:18.133>the <00:02:18.289>next <00:02:18.445>function

40
00:02:20.805 --> 00:02:22.205
<00:02:20.805>that <00:02:21.057>is <00:02:21.309>going <00:02:21.561>to <00:02:21.813>be <00:02:22.065>executed.

41
00:02:24.525 --> 00:02:26.425
<00:02:24.525>So <00:02:24.875>let's <00:02:25.225>see <00:02:25.575>this <00:02:25.925>example.

42
00:02:27.325 --> 00:02:31.185
<00:02:27.325>We <00:02:27.480>have <00:02:27.636>function <00:02:27.791>one <00:02:27.947>that <00:02:28.102>calls <00:02:28.258>function <00:02:28.413>two, <00:02:28.569>function <00:02:28.725>two

43
00:02:31.185 --> 00:02:33.345
<00:02:31.185>that <00:02:31.465>calls <00:02:31.745>function <00:02:32.025>three, <00:02:32.305>function <00:02:32.585>three.

44
00:02:33.345 --> 00:02:35.665
<00:02:33.345>That <00:02:33.545>calls <00:02:33.745>calls <00:02:33.945>a <00:02:34.145>console <00:02:34.345>lock. <00:02:34.545>Hello <00:02:34.745>Berlin.

45
00:02:37.025 --> 00:02:39.925
<00:02:37.025>So <00:02:37.225>let's <00:02:37.425>see <00:02:37.625>how <00:02:37.825>the <00:02:38.025>call <00:02:38.225>stack <00:02:38.425>evolves

46
00:02:40.135 --> 00:02:41.445
<00:02:40.135>after <00:02:40.528>executing <00:02:40.921>this <00:02:41.314>code.

47
00:02:41.465 --> 00:02:43.005
<00:02:41.465>So <00:02:41.811>we <00:02:42.158>execute <00:02:42.504>function <00:02:42.851>one.

48
00:02:44.765 --> 00:02:46.165
<00:02:44.765>Function <00:02:44.975>one <00:02:45.185>goes <00:02:45.394>into <00:02:45.605>the <00:02:45.815>call <00:02:46.024>stack,

49
00:02:46.265 --> 00:02:47.605
<00:02:46.265>we <00:02:46.666>execute <00:02:47.069>function <00:02:47.471>two.

50
00:02:48.915 --> 00:02:50.435
<00:02:48.915>Function <00:02:49.143>two <00:02:49.370>goes <00:02:49.599>into <00:02:49.827>the <00:02:50.055>call <00:02:50.283>stack,

51
00:02:50.435 --> 00:02:51.955
<00:02:50.435>but <00:02:50.777>without <00:02:51.119>removing <00:02:51.460>function <00:02:51.803>one

52
00:02:51.955 --> 00:02:56.675
<00:02:51.954>because <00:02:52.094>it <00:02:52.234>operates <00:02:52.374>on <00:02:52.515>last <00:02:52.654>in <00:02:52.795>first <00:02:52.934>out, <00:02:53.075>out, <00:02:53.214>uh, <00:02:53.355>method.

53
00:02:57.575 --> 00:03:00.845
<00:02:57.575>So <00:02:57.750>now <00:02:57.924>we <00:02:58.100>call <00:02:58.274>function <00:02:58.450>three, <00:02:58.625>site <00:02:58.799>function <00:02:58.975>two.

54
00:03:00.985 --> 00:03:02.405
<00:03:00.985>It <00:03:01.167>got, <00:03:01.350>it <00:03:01.532>gets <00:03:01.715>added <00:03:01.897>to <00:03:02.080>the <00:03:02.263>stack,

55
00:03:02.665 --> 00:03:04.285
<00:03:02.665>the <00:03:02.864>console <00:03:03.065>log <00:03:03.265>gets <00:03:03.465>added <00:03:03.665>to <00:03:03.864>the <00:03:04.065>stack,

56
00:03:04.425 --> 00:03:06.445
<00:03:04.425>and <00:03:04.775>as <00:03:05.125>soon <00:03:05.475>those <00:03:05.825>functions

57
00:03:06.625 --> 00:03:08.725
<00:03:06.625>and <00:03:06.905>the <00:03:07.185>execution, <00:03:07.465>they <00:03:07.745>get <00:03:08.025>removed

58
00:03:09.755 --> 00:03:11.805
<00:03:09.755>from <00:03:10.035>the <00:03:10.315>call <00:03:10.595>stack <00:03:10.875>on <00:03:11.155>Al.

59
00:03:13.025 --> 00:03:17.375
<00:03:13.025>So <00:03:13.200>now <00:03:13.375>that <00:03:13.550>we <00:03:13.725>understand <00:03:13.900>this, <00:03:14.075>I <00:03:14.250>want <00:03:14.425>you

60
00:03:17.375 --> 00:03:19.215
<00:03:17.375>to <00:03:17.655>first <00:03:17.935>understand <00:03:18.215>also <00:03:18.495>the <00:03:18.775>difference

61
00:03:19.365 --> 00:03:22.175
<00:03:19.365>between <00:03:19.831>synchronous <00:03:20.298>asynchronous <00:03:20.765>functions.

62
00:03:23.035 --> 00:03:25.615
<00:03:23.035>And <00:03:23.234>for <00:03:23.435>that <00:03:23.635>I <00:03:23.835>have <00:03:24.035>prepared <00:03:24.234>this <00:03:24.435>code.

63
00:03:27.485 --> 00:03:28.815
<00:03:27.485>Have <00:03:27.684>some <00:03:27.884>time <00:03:28.083>to <00:03:28.283>look <00:03:28.482>at <00:03:28.682>it.

64
00:03:30.835 --> 00:03:33.255
<00:03:30.835>As <00:03:31.068>you <00:03:31.301>can <00:03:31.535>see, <00:03:31.768>we <00:03:32.001>have <00:03:32.235>first

65
00:03:34.775 --> 00:03:36.255
<00:03:34.775>a <00:03:35.041>set <00:03:35.307>time <00:03:35.574>out <00:03:35.840>of <00:03:36.107>zero.

66
00:03:36.955 --> 00:03:40.415
<00:03:36.954>So <00:03:37.130>apparently <00:03:37.304>the <00:03:37.480>cons <00:03:37.654>log <00:03:37.829>one <00:03:38.005>should <00:03:38.179>execute <00:03:38.355>in

67
00:03:40.415 --> 00:03:41.495
<00:03:40.415>zero <00:03:40.901>milliseconds, <00:03:41.387>right?

68
00:03:43.135 --> 00:03:45.395
<00:03:43.135>We <00:03:43.310>have <00:03:43.484>a <00:03:43.660>promise <00:03:43.834>that <00:03:44.010>we <00:03:44.185>are <00:03:44.359>resolving <00:03:44.535>instantly.

69
00:03:46.255 --> 00:03:50.715
<00:03:46.255>So <00:03:46.410>also <00:03:46.566>in <00:03:46.721>zero <00:03:46.877>time <00:03:47.032>looks <00:03:47.188>like <00:03:47.343>the <00:03:47.499>cons <00:03:47.655>log

70
00:03:50.715 --> 00:03:51.755
<00:03:50.715>two <00:03:51.027>should <00:03:51.339>be <00:03:51.651>executed.

71
00:03:53.055 --> 00:03:55.515
<00:03:53.055>We <00:03:53.230>have <00:03:53.405>a <00:03:53.580>button <00:03:53.755>that <00:03:53.930>we <00:03:54.105>are <00:03:54.280>the <00:03:54.455>listener

72
00:03:55.855 --> 00:03:56.875
<00:03:55.855>and <00:03:56.084>then <00:03:56.314>we <00:03:56.543>click <00:03:56.773>it.

73
00:03:57.215 --> 00:03:59.555
<00:03:57.215>So <00:03:57.415>it <00:03:57.615>looks <00:03:57.815>as <00:03:58.015>well <00:03:58.215>that <00:03:58.415>it <00:03:58.615>should,

74
00:03:59.555 --> 00:04:01.035
<00:03:59.555>so <00:03:59.821>it <00:04:00.087>should <00:04:00.354>be <00:04:00.620>something <00:04:00.887>instant.

75
00:04:01.615 --> 00:04:04.075
<00:04:01.615>And <00:04:01.815>finally <00:04:02.015>we <00:04:02.215>have <00:04:02.415>just <00:04:02.615>a <00:04:02.815>plain <00:04:03.015>console

76
00:04:04.145 --> 00:04:05.315
<00:04:04.145>lock <00:04:04.408>on <00:04:04.671>our <00:04:04.934>main <00:04:05.198>script.

77
00:04:06.815 --> 00:04:10.515
<00:04:06.815>So <00:04:07.165>wild <00:04:07.515>guess <00:04:07.865>which <00:04:08.215>one

78
00:04:10.895 --> 00:04:13.075
<00:04:10.895>of <00:04:11.070>these <00:04:11.245>four <00:04:11.420>functions <00:04:11.595>do <00:04:11.770>you <00:04:11.945>think <00:04:12.120>is <00:04:12.295>going

79
00:04:13.075 --> 00:04:14.275
<00:04:13.075>to <00:04:13.435>be <00:04:13.795>executed <00:04:14.155>first?

80
00:04:17.335 --> 00:04:18.855
<00:04:17.334>I <00:04:17.608>see <00:04:17.882>some <00:04:18.155>fourths. <00:04:18.429>Some <00:04:18.703>fourths.

81
00:04:20.765 --> 00:04:24.665
<00:04:20.765>No <00:04:20.920>one <00:04:21.076>rooting <00:04:21.231>for <00:04:21.387>the <00:04:21.542>first <00:04:21.698>one. <00:04:21.853>Someone, <00:04:22.009>no <00:04:22.164>one.

82
00:04:25.175 --> 00:04:27.105
<00:04:25.175>Someone <00:04:25.455>rooting <00:04:25.735>for <00:04:26.015>the <00:04:26.295>second <00:04:26.575>one.

83
00:04:30.035 --> 00:04:33.325
<00:04:30.035>Okay, <00:04:30.315>someone <00:04:30.595>rooting <00:04:30.875>for <00:04:31.155>the <00:04:31.435>click.

84
00:04:36.065 --> 00:04:40.685
<00:04:36.065>Oh, <00:04:36.220>couple <00:04:36.376>of <00:04:36.531>people <00:04:36.687>and <00:04:36.842>someone <00:04:36.998>rooting <00:04:37.153>for <00:04:37.309>the <00:04:37.465>cons.

85
00:04:40.685 --> 00:04:43.365
<00:04:40.685>Lock <00:04:40.885>four. <00:04:41.085>Okay. <00:04:41.285>Many <00:04:41.485>people. <00:04:41.685>Many <00:04:41.885>people. <00:04:42.085>Okay.

86
00:04:44.255 --> 00:04:46.365
<00:04:44.255>Which <00:04:44.382>one <00:04:44.509>do <00:04:44.636>you <00:04:44.764>think <00:04:44.891>is <00:04:45.018>going <00:04:45.145>to <00:04:45.273>be <00:04:45.400>executed? <00:04:45.527>The <00:04:45.655>last?

87
00:04:47.225 --> 00:04:51.275
<00:04:47.225>Anyone <00:04:47.425>rooting <00:04:47.625>for <00:04:47.825>the <00:04:48.025>set? <00:04:48.225>Timeout? <00:04:48.425>Some <00:04:48.625>people.

88
00:04:52.095 --> 00:04:56.345
<00:04:52.095>Anyone <00:04:52.375>rooting <00:04:52.655>for <00:04:52.935>the <00:04:53.215>promise? <00:04:53.495>Okay.

89
00:04:56.645 --> 00:05:00.295
<00:04:56.645>And <00:04:56.878>for <00:04:57.111>the <00:04:57.344>click. <00:04:57.578>Okay, <00:04:57.811>any <00:04:58.044>people?

90
00:05:01.045 --> 00:05:05.465
<00:05:01.045>Well, <00:05:01.278>let's <00:05:01.511>debug <00:05:01.745>it. <00:05:01.978>No, <00:05:02.211>let's <00:05:02.445>see.

91
00:05:06.625 --> 00:05:11.245
<00:05:06.625>So <00:05:06.752>here <00:05:06.879>I <00:05:07.006>have <00:05:07.134>uh, <00:05:07.261>uh, <00:05:07.388>my <00:05:07.515>code, <00:05:07.643>which <00:05:07.770>I <00:05:07.897>need <00:05:08.025>to,

92
00:05:12.035 --> 00:05:17.015
<00:05:12.035>oops, <00:05:12.268>looks <00:05:12.501>like <00:05:12.735>I'm <00:05:12.968>not <00:05:13.201>sharing <00:05:13.435>my,

93
00:05:17.715 --> 00:05:18.735
<00:05:17.715>my <00:05:18.020>the <00:05:18.327>proper <00:05:18.633>screen.

94
00:05:18.755 --> 00:05:23.655
<00:05:18.755>One <00:05:18.910>second. <00:05:19.066>I <00:05:19.221>will <00:05:19.377>start <00:05:19.532>the <00:05:19.688>mirroring. <00:05:19.843>There <00:05:19.999>it <00:05:20.155>is.

95
00:05:24.115 --> 00:05:28.325
<00:05:24.115>So <00:05:24.395>Here <00:05:24.675>I <00:05:24.955>have <00:05:25.235>the <00:05:25.515>code

96
00:05:29.105 --> 00:05:33.205
<00:05:29.105>for <00:05:29.232>the <00:05:29.359>ones <00:05:29.486>on <00:05:29.614>the <00:05:29.741>back <00:05:29.868>to <00:05:29.995>seat <00:05:30.123>and <00:05:30.250>let's <00:05:30.377>run <00:05:30.505>it.

97
00:05:40.435 --> 00:05:42.425
<00:05:40.435>3, <00:05:40.901>4, <00:05:41.368>2, <00:05:41.835>1.

98
00:05:42.595 --> 00:05:44.145
<00:05:42.595>Let's <00:05:42.827>run <00:05:43.060>it <00:05:43.292>again <00:05:43.525>just <00:05:43.757>in <00:05:43.990>case

99
00:05:45.325 --> 00:05:47.065
<00:05:45.325>you <00:05:45.525>can <00:05:45.724>see <00:05:45.925>it's <00:05:46.125>not <00:05:46.325>just <00:05:46.525>a <00:05:46.724>coincidence.

100
00:05:49.175 --> 00:05:52.565
<00:05:49.175>3, <00:05:49.375>4, <00:05:49.575>2, <00:05:49.775>1. <00:05:49.975>So <00:05:50.175>what's <00:05:50.375>happening <00:05:50.575>here?

101
00:05:52.865 --> 00:05:57.485
<00:05:52.865>So <00:05:53.040>what <00:05:53.215>is <00:05:53.390>happening <00:05:53.565>is, <00:05:53.740>uh, <00:05:53.915>you <00:05:54.090>were <00:05:54.265>not,

102
00:05:58.425 --> 00:06:00.005
<00:05:58.425>uh, <00:05:59.125>exactly <00:05:59.825>wrong,

103
00:06:00.305 --> 00:06:02.805
<00:06:00.305>but <00:06:00.445>in <00:06:00.585>this <00:06:00.725>case <00:06:00.865>we <00:06:01.005>have <00:06:01.145>kind <00:06:01.285>of <00:06:01.425>an <00:06:01.565>edge <00:06:01.705>case

104
00:06:02.805 --> 00:06:05.885
<00:06:02.805>because <00:06:03.085>the <00:06:03.365>click <00:06:03.645>is <00:06:03.925>executed <00:06:04.205>programmatically.

105
00:06:05.985 --> 00:06:09.005
<00:06:05.985>So <00:06:06.185>it's <00:06:06.385>called <00:06:06.585>synchronous <00:06:06.785>instead <00:06:06.985>of <00:06:07.185>asynchronous <00:06:07.385>loop.

106
00:06:09.385 --> 00:06:12.445
<00:06:09.385>So <00:06:09.585>the <00:06:09.784>console <00:06:09.985>lock <00:06:10.185>four <00:06:10.385>gets <00:06:10.585>it <00:06:10.784>executed

107
00:06:12.535 --> 00:06:14.045
<00:06:12.535>after <00:06:12.988>console <00:06:13.441>lock <00:06:13.894>three

108
00:06:14.115 --> 00:06:17.045
<00:06:14.115>because <00:06:14.395>both <00:06:14.675>are <00:06:14.955>synchronous <00:06:15.235>and <00:06:15.515>cons.

109
00:06:17.045 --> 00:06:18.685
<00:06:17.045>Lock <00:06:17.278>four <00:06:17.511>goes <00:06:17.745>after <00:06:17.978>cons <00:06:18.211>lock <00:06:18.445>three.

110
00:06:19.555 --> 00:06:22.125
<00:06:19.555>Then <00:06:19.788>we <00:06:20.021>have <00:06:20.255>the <00:06:20.488>two <00:06:20.721>synchronous <00:06:20.955>functions,

111
00:06:22.125 --> 00:06:24.925
<00:06:22.125>which <00:06:22.358>are <00:06:22.591>the <00:06:22.825>promise <00:06:23.058>and <00:06:23.291>the <00:06:23.525>timeout.

112
00:06:25.705 --> 00:06:28.805
<00:06:25.705>And <00:06:25.938>actually <00:06:26.171>the <00:06:26.405>promise <00:06:26.638>gets <00:06:26.871>executed <00:06:27.104>first

113
00:06:28.805 --> 00:06:33.205
<00:06:28.805>because <00:06:28.980>it <00:06:29.155>has <00:06:29.330>more, <00:06:29.505>more <00:06:29.680>priority <00:06:29.855>over <00:06:30.030>the <00:06:30.205>timeout.

114
00:06:34.465 --> 00:06:37.245
<00:06:34.465>The <00:06:34.698>promise <00:06:34.931>goes <00:06:35.165>into <00:06:35.398>the <00:06:35.631>microtask <00:06:35.865>queue

115
00:06:37.545 --> 00:06:39.925
<00:06:37.545>and <00:06:37.720>the <00:06:37.895>timeout <00:06:38.070>goes <00:06:38.245>into <00:06:38.420>a <00:06:38.595>macro <00:06:38.770>task <00:06:38.945>queue

116
00:06:40.825 --> 00:06:43.565
<00:06:40.825>and <00:06:40.980>the <00:06:41.136>microtask <00:06:41.291>queue <00:06:41.447>has <00:06:41.602>more <00:06:41.758>priority <00:06:41.913>over <00:06:42.069>that <00:06:42.224>one.

117
00:06:43.855 --> 00:06:45.405
<00:06:43.855>Let's <00:06:44.054>see <00:06:44.253>all <00:06:44.452>of <00:06:44.652>this <00:06:44.851>in <00:06:45.050>a <00:06:45.250>diagram.

118
00:06:49.265 --> 00:06:51.925
<00:06:49.265>So <00:06:49.440>here <00:06:49.615>we <00:06:49.789>have <00:06:49.965>our <00:06:50.140>function <00:06:50.315>or <00:06:50.490>co <00:06:50.664>stack

119
00:06:52.425 --> 00:06:54.325
<00:06:52.425>or <00:06:52.705>micro <00:06:52.985>and <00:06:53.265>macro <00:06:53.545>task <00:06:53.825>queue.

120
00:06:54.445 --> 00:06:58.925
<00:06:54.445>I <00:06:54.561>talk <00:06:54.678>about <00:06:54.795>we <00:06:54.911>have <00:06:55.028>our <00:06:55.145>web <00:06:55.261>APIs, <00:06:55.378>we <00:06:55.495>have <00:06:55.611>our <00:06:55.728>event <00:06:55.844>loop,

121
00:06:58.925 --> 00:07:02.565
<00:06:58.925>which <00:06:59.080>is <00:06:59.236>the <00:06:59.391>one <00:06:59.547>in <00:06:59.702>charge <00:06:59.858>of <00:07:00.013>moving <00:07:00.169>the <00:07:00.325>callbacks

122
00:07:02.565 --> 00:07:03.805
<00:07:02.565>that <00:07:02.788>are <00:07:03.011>on <00:07:03.234>the <00:07:03.457>task <00:07:03.681>queue

123
00:07:04.305 --> 00:07:06.165
<00:07:04.305>to <00:07:04.505>the <00:07:04.705>call <00:07:04.905>stack <00:07:05.105>whenever <00:07:05.305>this <00:07:05.505>is <00:07:05.705>empty.

124
00:07:07.425 --> 00:07:09.885
<00:07:07.425>So <00:07:07.891>let's <00:07:08.358>start <00:07:08.825>execution.

125
00:07:10.665 --> 00:07:15.045
<00:07:10.665>We <00:07:10.792>call <00:07:10.919>the <00:07:11.046>set <00:07:11.174>time <00:07:11.301>out <00:07:11.428>a <00:07:11.555>timer <00:07:11.683>web <00:07:11.810>API <00:07:11.937>is <00:07:12.065>called.

126
00:07:15.065 --> 00:07:18.325
<00:07:15.065>And <00:07:15.265>in <00:07:15.465>zero <00:07:15.665>milliseconds <00:07:15.865>the <00:07:16.065>callback <00:07:16.265>gets <00:07:16.465>added

127
00:07:18.515 --> 00:07:19.725
<00:07:18.515>into <00:07:18.878>the <00:07:19.241>task <00:07:19.604>queue.

128
00:07:19.735 --> 00:07:24.375
<00:07:19.735>Macro <00:07:19.935>task <00:07:20.135>queue, <00:07:20.335>we <00:07:20.535>call <00:07:20.735>the <00:07:20.935>promise <00:07:21.135>then,

129
00:07:24.915 --> 00:07:27.775
<00:07:24.915>and <00:07:25.070>the <00:07:25.226>promise <00:07:25.381>callback <00:07:25.537>goes <00:07:25.692>into <00:07:25.848>the <00:07:26.003>micro <00:07:26.159>task <00:07:26.315>queue.

130
00:07:28.845 --> 00:07:32.695
<00:07:28.845>Then <00:07:28.985>we <00:07:29.125>play <00:07:29.265>around <00:07:29.405>with <00:07:29.545>the <00:07:29.685>button, <00:07:29.825>we <00:07:29.965>add <00:07:30.105>the <00:07:30.245>listener,

131
00:07:32.835 --> 00:07:37.285
<00:07:32.835>we <00:07:33.010>click <00:07:33.185>and <00:07:33.359>the <00:07:33.534>click <00:07:33.710>callback <00:07:33.885>is <00:07:34.060>executed <00:07:34.234>instantly

132
00:07:37.285 --> 00:07:39.285
<00:07:37.284>without <00:07:37.484>going <00:07:37.684>to <00:07:37.885>them <00:07:38.085>into <00:07:38.284>the <00:07:38.484>microtask <00:07:38.684>queue.

133
00:07:40.185 --> 00:07:41.845
<00:07:40.185>That's <00:07:40.465>why <00:07:40.745>it <00:07:41.025>gets <00:07:41.305>executed <00:07:41.585>first.

134
00:07:42.505 --> 00:07:45.325
<00:07:42.505>And <00:07:42.705>also <00:07:42.905>synchronously, <00:07:43.105>we <00:07:43.305>have, <00:07:43.505>as <00:07:43.705>you <00:07:43.905>guessed,

135
00:07:45.465 --> 00:07:50.205
<00:07:45.465>the <00:07:45.640>console <00:07:45.815>lock <00:07:45.990>four <00:07:46.165>executed, <00:07:46.340>then <00:07:46.515>the <00:07:46.690>develop <00:07:46.865>loop.

136
00:07:50.305 --> 00:07:52.365
<00:07:50.305>Now <00:07:50.460>that <00:07:50.616>the <00:07:50.771>call <00:07:50.927>stack <00:07:51.082>is <00:07:51.238>empty, <00:07:51.393>there's <00:07:51.549>nothing <00:07:51.705>else

137
00:07:52.365 --> 00:07:56.405
<00:07:52.365>to <00:07:52.520>execute, <00:07:52.676>moves <00:07:52.831>the <00:07:52.987>promised <00:07:53.142>callback <00:07:53.298>into <00:07:53.453>the <00:07:53.609>call <00:07:53.765>stack.

138
00:07:57.385 --> 00:08:01.045
<00:07:57.385>And <00:07:57.560>finally <00:07:57.735>the <00:07:57.909>timeout <00:07:58.085>callback <00:07:58.260>into <00:07:58.435>the <00:07:58.610>call <00:07:58.784>stack.

139
00:08:02.845 --> 00:08:04.945
<00:08:02.845>So <00:08:03.195>what <00:08:03.545>have <00:08:03.895>we <00:08:04.245>learned?

140
00:08:05.725 --> 00:08:09.065
<00:08:05.725>We <00:08:05.925>have <00:08:06.125>microtask <00:08:06.325>queue, <00:08:06.525>a <00:08:06.725>micro <00:08:06.925>microtask <00:08:07.125>queue.

141
00:08:10.095 --> 00:08:14.585
<00:08:10.095>Microtask <00:08:10.270>are <00:08:10.445>for <00:08:10.620>timers <00:08:10.795>in <00:08:10.970>S <00:08:11.145>or <00:08:11.320>input <00:08:11.495>operations.

142
00:08:15.725 --> 00:08:17.785
<00:08:15.725>And <00:08:16.075>microtask <00:08:16.425>is <00:08:16.775>where <00:08:17.125>promises

143
00:08:18.415 --> 00:08:20.505
<00:08:18.415>some <00:08:18.615>web <00:08:18.815>API <00:08:19.015>is <00:08:19.215>like <00:08:19.415>the <00:08:19.615>mutation <00:08:19.815>observer

144
00:08:21.485 --> 00:08:25.465
<00:08:21.485>and <00:08:21.640>uh, <00:08:21.796>you <00:08:21.951>can <00:08:22.107>call <00:08:22.262>them <00:08:22.418>explicitly <00:08:22.573>as <00:08:22.729>well <00:08:22.885>with

145
00:08:26.005 --> 00:08:27.785
<00:08:26.005>window <00:08:26.355>dot <00:08:26.705>q <00:08:27.055>microtask <00:08:27.405>task.

146
00:08:29.875 --> 00:08:31.615
<00:08:29.875>So <00:08:30.225>now <00:08:30.575>that <00:08:30.925>we've <00:08:31.275>seen

147
00:08:32.955 --> 00:08:35.735
<00:08:32.955>the <00:08:33.188>ING <00:08:33.421>functions, <00:08:33.655>I <00:08:33.888>have <00:08:34.121>a <00:08:34.355>question.

148
00:08:37.425 --> 00:08:42.025
<00:08:37.424>Is <00:08:37.891>this <00:08:38.358>Multithreading? <00:08:38.824>No.

149
00:08:42.735 --> 00:08:46.105
<00:08:42.735>Okay, <00:08:42.968>so <00:08:43.201>what <00:08:43.435>we <00:08:43.668>have <00:08:43.901>here <00:08:44.135>is

150
00:08:46.855 --> 00:08:48.345
<00:08:46.855>what <00:08:47.302>I <00:08:47.749>call <00:08:48.196>concurrency.

151
00:08:49.565 --> 00:08:54.305
<00:08:49.565>We <00:08:49.705>are <00:08:49.845>doing <00:08:49.985>two <00:08:50.125>things <00:08:50.265>in <00:08:50.405>two <00:08:50.545>contexts <00:08:50.685>that <00:08:50.825>are <00:08:50.965>different,

152
00:08:54.365 --> 00:08:56.045
<00:08:54.365>but <00:08:54.565>we <00:08:54.765>are <00:08:54.965>still <00:08:55.165>on <00:08:55.365>the <00:08:55.565>main <00:08:55.765>thread.

153
00:08:57.435 --> 00:09:01.745
<00:08:57.435>What <00:08:57.635>we <00:08:57.834>want <00:08:58.035>to <00:08:58.234>achieve <00:08:58.435>is <00:08:58.635>actually <00:08:58.834>parallelism.

154
00:09:02.125 --> 00:09:05.305
<00:09:02.125>So <00:09:02.252>we <00:09:02.379>want <00:09:02.506>to <00:09:02.634>have <00:09:02.761>two <00:09:02.888>threads <00:09:03.015>working <00:09:03.143>at <00:09:03.270>the <00:09:03.397>same <00:09:03.525>time

155
00:09:05.415 --> 00:09:07.465
<00:09:05.415>without <00:09:05.694>taking <00:09:05.974>resources <00:09:06.255>from <00:09:06.535>each <00:09:06.814>other.

156
00:09:09.515 --> 00:09:13.055
<00:09:09.515>So <00:09:09.670>what <00:09:09.826>about <00:09:09.981>multithreading <00:09:10.137>then? <00:09:10.292>How <00:09:10.448>can <00:09:10.603>we <00:09:10.759>achieve <00:09:10.915>it?

157
00:09:15.915 --> 00:09:19.415
<00:09:15.915>Web <00:09:16.194>workers, <00:09:16.474>web <00:09:16.755>workers <00:09:17.035>is <00:09:17.314>the

158
00:09:20.045 --> 00:09:25.015
<00:09:20.045>browser <00:09:20.245>BI <00:09:20.444>we <00:09:20.645>can <00:09:20.844>use <00:09:21.045>to <00:09:21.245>do <00:09:21.444>multithreading

159
00:09:25.835 --> 00:09:27.615
<00:09:25.835>and <00:09:26.115>this <00:09:26.395>is <00:09:26.675>how <00:09:26.955>they <00:09:27.235>work.

160
00:09:27.615 --> 00:09:30.415
<00:09:27.615>Imagine <00:09:28.315>our <00:09:29.015>JavaScript

161
00:09:31.365 --> 00:09:34.295
<00:09:31.365>main <00:09:31.565>thread <00:09:31.765>is <00:09:31.965>this <00:09:32.165>chicken, <00:09:32.365>this <00:09:32.565>beautiful <00:09:32.765>chicken.

162
00:09:35.395 --> 00:09:38.295
<00:09:35.395>And <00:09:35.675>we <00:09:35.954>can <00:09:36.235>call <00:09:36.515>a <00:09:36.795>worker

163
00:09:39.525 --> 00:09:42.895
<00:09:39.525>just <00:09:39.725>instantiating <00:09:39.925>it <00:09:40.125>just <00:09:40.324>by <00:09:40.525>using <00:09:40.725>new <00:09:40.925>worker.

164
00:09:43.925 --> 00:09:47.895
<00:09:43.925>This <00:09:44.064>will <00:09:44.204>span <00:09:44.344>the <00:09:44.484>worker, <00:09:44.625>but <00:09:44.765>it <00:09:44.905>will <00:09:45.045>still <00:09:45.185>do <00:09:45.324>anything.

165
00:09:49.035 --> 00:09:50.745
<00:09:49.035>First <00:09:49.235>we <00:09:49.435>need <00:09:49.635>to <00:09:49.834>set <00:09:50.035>up <00:09:50.235>some <00:09:50.435>things.

166
00:09:50.885 --> 00:09:52.265
<00:09:50.885>So <00:09:51.299>we <00:09:51.713>first <00:09:52.127>set

167
00:09:52.885 --> 00:09:55.905
<00:09:52.885>up <00:09:53.165>a <00:09:53.444>listener <00:09:53.725>for <00:09:54.005>the <00:09:54.285>worker.

168
00:09:56.045 --> 00:09:58.105
<00:09:56.045>So <00:09:56.200>whenever <00:09:56.356>the <00:09:56.511>main <00:09:56.667>threat <00:09:56.822>receives <00:09:56.978>a <00:09:57.133>message <00:09:57.289>from <00:09:57.444>the

169
00:09:58.105 --> 00:10:01.505
<00:09:58.105>worker, <00:09:58.260>we <00:09:58.416>do <00:09:58.571>something <00:09:58.727>we <00:09:58.882>call <00:09:59.038>the <00:09:59.193>message, <00:09:59.349>call <00:09:59.505>back.

170
00:10:02.565 --> 00:10:04.425
<00:10:02.565>We <00:10:02.765>also <00:10:02.965>do <00:10:03.165>the <00:10:03.365>same <00:10:03.565>on <00:10:03.765>the <00:10:03.965>worker.

171
00:10:05.025 --> 00:10:07.945
<00:10:05.025>Whenever <00:10:05.180>it <00:10:05.336>receives <00:10:05.491>a <00:10:05.647>message <00:10:05.802>from <00:10:05.958>the <00:10:06.113>main <00:10:06.269>threat, <00:10:06.425>we

172
00:10:08.925 --> 00:10:13.345
<00:10:08.925>add <00:10:09.064>the <00:10:09.204>function, <00:10:09.344>we <00:10:09.484>want <00:10:09.625>him <00:10:09.765>to <00:10:09.905>apply <00:10:10.045>on <00:10:10.185>another <00:10:10.324>threat.

173
00:10:14.725 --> 00:10:16.265
<00:10:14.725>And <00:10:14.956>now <00:10:15.187>is <00:10:15.418>when <00:10:15.649>the <00:10:15.880>time <00:10:16.111>begins.

174
00:10:17.645 --> 00:10:22.065
<00:10:17.645>We <00:10:17.785>use <00:10:17.925>the <00:10:18.064>postes <00:10:18.204>function <00:10:18.345>to <00:10:18.485>say <00:10:18.625>the <00:10:18.765>worker <00:10:18.905>we <00:10:19.045>want

175
00:10:22.065 --> 00:10:25.985
<00:10:22.065>to <00:10:22.265>start <00:10:22.465>and <00:10:22.665>we <00:10:22.865>send <00:10:23.065>them <00:10:23.265>the <00:10:23.465>data

176
00:10:26.255 --> 00:10:27.545
<00:10:26.255>that <00:10:26.487>we <00:10:26.719>want <00:10:26.951>him <00:10:27.183>to <00:10:27.415>process.

177
00:10:29.005 --> 00:10:33.625
<00:10:29.005>So <00:10:29.160>the <00:10:29.316>ec <00:10:29.471>hatches, <00:10:29.627>it <00:10:29.782>starts <00:10:29.938>to <00:10:30.093>do <00:10:30.249>the <00:10:30.405>work,

178
00:10:35.565 --> 00:10:37.265
<00:10:35.565>and <00:10:36.031>once <00:10:36.498>it's <00:10:36.965>done,

179
00:10:37.925 --> 00:10:40.385
<00:10:37.925>he <00:10:38.125>can <00:10:38.324>use <00:10:38.525>the <00:10:38.724>same <00:10:38.925>post <00:10:39.125>message <00:10:39.324>functions

180
00:10:40.385 --> 00:10:43.625
<00:10:40.385>to <00:10:40.560>send <00:10:40.735>back <00:10:40.910>the <00:10:41.085>data <00:10:41.260>to <00:10:41.435>the <00:10:41.610>main <00:10:41.785>thread.

181
00:10:44.645 --> 00:10:46.705
<00:10:44.645>And <00:10:44.845>then <00:10:45.045>as <00:10:45.245>we <00:10:45.444>set <00:10:45.645>up <00:10:45.845>the <00:10:46.045>listener,

182
00:10:46.725 --> 00:10:49.745
<00:10:46.725>the <00:10:46.880>message <00:10:47.036>function <00:10:47.191>will <00:10:47.347>be <00:10:47.502>executed <00:10:47.658>with <00:10:47.813>the <00:10:47.969>process <00:10:48.125>data

183
00:10:49.965 --> 00:10:52.945
<00:10:49.965>and <00:10:50.092>then <00:10:50.219>we <00:10:50.346>can <00:10:50.474>do <00:10:50.601>whatever <00:10:50.728>we <00:10:50.855>need <00:10:50.983>in <00:10:51.110>the <00:10:51.237>main <00:10:51.365>thread.

184
00:10:55.645 --> 00:11:00.055
<00:10:55.645>Okay, <00:10:55.925>so <00:10:56.204>now <00:10:56.485>that <00:10:56.765>we've <00:10:57.045>seen

185
00:11:00.235 --> 00:11:04.055
<00:11:00.235>how <00:11:00.515>web <00:11:00.795>workers <00:11:01.075>actually <00:11:01.355>work, <00:11:01.635>um,

186
00:11:04.465 --> 00:11:07.495
<00:11:04.465>let's <00:11:04.620>find <00:11:04.776>a <00:11:04.931>project <00:11:05.087>where <00:11:05.242>this <00:11:05.398>could <00:11:05.553>actually <00:11:05.709>make <00:11:05.865>sense.

187
00:11:08.595 --> 00:11:12.695
<00:11:08.595>And <00:11:08.750>for <00:11:08.906>that, <00:11:09.061>uh, <00:11:09.217>I'm <00:11:09.372>a <00:11:09.528>big <00:11:09.683>fan <00:11:09.839>of <00:11:09.995>chess,

188
00:11:15.355 --> 00:11:19.055
<00:11:15.355>so <00:11:15.555>I <00:11:15.755>thought <00:11:15.955>about <00:11:16.155>doing <00:11:16.355>a <00:11:16.555>chess <00:11:16.755>game.

189
00:11:20.875 --> 00:11:22.695
<00:11:20.875>Anyone <00:11:21.108>who <00:11:21.341>plays <00:11:21.575>chess <00:11:21.808>in <00:11:22.041>the <00:11:22.275>room,

190
00:11:24.015 --> 00:11:25.825
<00:11:24.015>okay, <00:11:24.365>yeah, <00:11:24.715>lots <00:11:25.064>of <00:11:25.415>people.

191
00:11:26.495 --> 00:11:31.105
<00:11:26.495>Good, <00:11:26.635>good, <00:11:26.775>good. <00:11:26.915>So <00:11:27.055>do <00:11:27.195>you, <00:11:27.335>where <00:11:27.475>do <00:11:27.615>you <00:11:27.755>play? <00:11:27.895>Chess?

192
00:11:31.325 --> 00:11:33.145
<00:11:31.325>Le <00:11:32.025>chess <00:11:32.725>chess.com.

193
00:11:34.805 --> 00:11:36.865
<00:11:34.805>If <00:11:35.038>you <00:11:35.271>play <00:11:35.505>chess.com, <00:11:35.738>maybe <00:11:35.971>you're <00:11:36.204>familiar

194
00:11:36.895 --> 00:11:37.945
<00:11:36.895>with <00:11:37.210>this <00:11:37.525>UI <00:11:37.840>already.

195
00:11:39.165 --> 00:11:44.145
<00:11:39.165>Um, <00:11:39.444>so <00:11:39.724>chess <00:11:40.005>has <00:11:40.285>a <00:11:40.564>particularity

196
00:11:44.695 --> 00:11:47.145
<00:11:44.695>that, <00:11:45.395>um, <00:11:46.095>um,

197
00:11:47.695 --> 00:11:50.705
<00:11:47.695>knowing <00:11:47.822>which <00:11:47.949>is <00:11:48.076>the <00:11:48.204>best <00:11:48.331>move <00:11:48.458>you <00:11:48.585>can <00:11:48.713>play <00:11:48.840>in <00:11:48.967>each <00:11:49.095>position

198
00:11:51.165 --> 00:11:54.245
<00:11:51.165>is <00:11:51.365>very <00:11:51.564>expensive <00:11:51.765>because <00:11:51.964>the <00:11:52.165>three <00:11:52.365>of <00:11:52.564>possibilities

199
00:11:54.935 --> 00:11:57.965
<00:11:54.935>after <00:11:55.074>each <00:11:55.214>move <00:11:55.354>goes <00:11:55.494>deep <00:11:55.635>and <00:11:55.775>deep <00:11:55.915>and <00:11:56.055>deep <00:11:56.194>and <00:11:56.334>deep.

200
00:11:57.965 --> 00:11:59.805
<00:11:57.965>And <00:11:58.120>you <00:11:58.276>need <00:11:58.431>to <00:11:58.587>cut <00:11:58.742>the <00:11:58.898>algorithm <00:11:59.053>at <00:11:59.209>some <00:11:59.365>point

201
00:12:00.355 --> 00:12:03.445
<00:12:00.355>because <00:12:00.588>your <00:12:00.821>machine <00:12:01.055>doesn't <00:12:01.288>have <00:12:01.521>enough <00:12:01.755>resources

202
00:12:03.445 --> 00:12:04.485
<00:12:03.445>to <00:12:03.913>calculate <00:12:04.381>it.

203
00:12:04.545 --> 00:12:08.205
<00:12:04.545>So <00:12:04.719>I <00:12:04.895>thought <00:12:05.069>if <00:12:05.245>I'm <00:12:05.420>building <00:12:05.594>a <00:12:05.770>chess <00:12:05.944>game,

204
00:12:08.955 --> 00:12:11.885
<00:12:08.955>there's <00:12:09.095>no <00:12:09.235>need <00:12:09.375>to <00:12:09.515>have <00:12:09.655>this <00:12:09.795>algorithm <00:12:09.935>in <00:12:10.075>the <00:12:10.215>main <00:12:10.355>thread.

205
00:12:11.885 --> 00:12:13.165
<00:12:11.885>We <00:12:12.049>can <00:12:12.214>have <00:12:12.378>that <00:12:12.543>in <00:12:12.707>the <00:12:12.872>web <00:12:13.036>worker.

206
00:12:15.015 --> 00:12:19.315
<00:12:15.015>And, <00:12:15.142>and <00:12:15.269>yeah, <00:12:15.396>this <00:12:15.524>is <00:12:15.651>like <00:12:15.778>an <00:12:15.905>example <00:12:16.033>of <00:12:16.160>a <00:12:16.287>chess <00:12:16.415>game.

207
00:12:19.465 --> 00:12:22.235
<00:12:19.465>Just <00:12:19.620>in <00:12:19.776>the <00:12:19.931>beginning <00:12:20.087>you <00:12:20.242>have <00:12:20.398>like <00:12:20.553>20 <00:12:20.709>moves <00:12:20.865>possible.

208
00:12:23.025 --> 00:12:25.915
<00:12:23.025>Then <00:12:23.199>in <00:12:23.375>the <00:12:23.550>middle <00:12:23.725>position <00:12:23.900>you <00:12:24.074>have <00:12:24.250>even <00:12:24.425>more

209
00:12:25.915 --> 00:12:27.075
<00:12:25.915>moves <00:12:26.263>that <00:12:26.611>are <00:12:26.959>possible.

210
00:12:27.575 --> 00:12:29.235
<00:12:27.575>You <00:12:27.808>also <00:12:28.041>need <00:12:28.275>to <00:12:28.508>take <00:12:28.741>into <00:12:28.975>account

211
00:12:29.235 --> 00:12:30.475
<00:12:29.235>the <00:12:29.514>response <00:12:29.793>of <00:12:30.072>your <00:12:30.351>opponent.

212
00:12:31.215 --> 00:12:35.755
<00:12:31.215>So <00:12:31.415>it's <00:12:31.615>not <00:12:31.815>that <00:12:32.015>easy <00:12:32.215>to <00:12:32.415>calculate <00:12:32.615>it.

213
00:12:36.935 --> 00:12:40.355
<00:12:36.935>So <00:12:37.214>what <00:12:37.494>I've <00:12:37.775>done <00:12:38.055>is <00:12:38.334>that

214
00:12:41.715 --> 00:12:43.635
<00:12:41.715>I <00:12:42.415>first <00:12:43.115>calculated,

215
00:12:43.635 --> 00:12:45.155
<00:12:43.635>which <00:12:43.806>was <00:12:43.977>the <00:12:44.148>best <00:12:44.319>move <00:12:44.490>in <00:12:44.661>the <00:12:44.832>main <00:12:45.002>thread,

216
00:12:46.705 --> 00:12:50.955
<00:12:46.705>and <00:12:47.171>then <00:12:47.638>I <00:12:48.105>moved

217
00:12:50.985 --> 00:12:52.355
<00:12:50.985>this <00:12:51.293>into <00:12:51.601>a <00:12:51.909>web <00:12:52.218>worker.

218
00:12:52.515 --> 00:12:53.835
<00:12:52.515>I <00:12:52.713>found <00:12:52.911>a <00:12:53.109>web <00:12:53.307>worker <00:12:53.505>and <00:12:53.703>moved

219
00:12:53.835 --> 00:12:55.035
<00:12:53.835>this <00:12:54.051>function <00:12:54.267>into <00:12:54.483>the <00:12:54.699>web <00:12:54.915>worker.

220
00:12:55.575 --> 00:12:59.235
<00:12:55.575>So <00:12:55.808>this <00:12:56.041>was <00:12:56.275>executed <00:12:56.508>in <00:12:56.741>another <00:12:56.975>threat,

221
00:12:59.815 --> 00:13:02.595
<00:12:59.815>and <00:13:00.095>our <00:13:00.375>main <00:13:00.655>threat <00:13:00.935>was <00:13:01.215>free

222
00:13:03.175 --> 00:13:05.035
<00:13:03.175>for <00:13:03.641>handling <00:13:04.108>user <00:13:04.574>events.

223
00:13:05.615 --> 00:13:08.195
<00:13:05.615>You <00:13:05.848>are <00:13:06.081>rendering <00:13:06.315>and <00:13:06.548>executing <00:13:06.781>any <00:13:07.015>kind

224
00:13:08.195 --> 00:13:09.235
<00:13:08.195>of <00:13:08.663>other <00:13:09.131>JavaScript.

225
00:13:10.415 --> 00:13:14.115
<00:13:10.415>So <00:13:10.555>now <00:13:10.694>that <00:13:10.834>we've <00:13:10.974>seen <00:13:11.115>this, <00:13:11.255>let's <00:13:11.395>see <00:13:11.535>a <00:13:11.675>live <00:13:11.814>demo.

226
00:13:15.855 --> 00:13:19.995
<00:13:15.855>So <00:13:16.055>we <00:13:16.255>have <00:13:16.455>here, <00:13:16.655>this <00:13:16.855>is <00:13:17.055>the <00:13:17.255>repository,

227
00:13:20.265 --> 00:13:22.955
<00:13:20.265>this <00:13:20.465>is <00:13:20.665>the <00:13:20.865>JavaScript <00:13:21.064>chess <00:13:21.265>engine <00:13:21.465>I'm <00:13:21.665>using

228
00:13:23.015 --> 00:13:24.715
<00:13:23.015>to <00:13:23.248>calculate <00:13:23.481>which <00:13:23.715>is <00:13:23.948>the <00:13:24.181>best <00:13:24.415>move.

229
00:13:25.255 --> 00:13:28.275
<00:13:25.255>And <00:13:25.488>here <00:13:25.721>it <00:13:25.955>is <00:13:26.188>our, <00:13:26.421>our <00:13:26.655>code

230
00:13:28.575 --> 00:13:31.195
<00:13:28.575>or <00:13:29.041>our <00:13:29.508>our <00:13:29.975>application.

231
00:13:31.215 --> 00:13:32.435
<00:13:31.215>So <00:13:31.434>we <00:13:31.654>have <00:13:31.873>our <00:13:32.093>chess <00:13:32.313>board.

232
00:13:33.015 --> 00:13:37.395
<00:13:33.015>We <00:13:33.170>can <00:13:33.326>do <00:13:33.481>for <00:13:33.637>example, <00:13:33.792>boom, <00:13:33.948>we <00:13:34.103>don't <00:13:34.259>see <00:13:34.415>anything.

233
00:13:37.425 --> 00:13:40.635
<00:13:37.425>Okay, <00:13:37.704>sorry, <00:13:37.984>sorry <00:13:38.265>again, <00:13:38.545>I <00:13:38.824>need

234
00:13:40.635 --> 00:13:42.515
<00:13:40.635>to <00:13:41.101>switch <00:13:41.568>this <00:13:42.035>screen.

235
00:13:42.775 --> 00:13:45.595
<00:13:42.775>One <00:13:43.125>second. <00:13:43.475>Thank <00:13:43.824>you. <00:13:44.175>Now.

236
00:13:49.035 --> 00:13:50.855
<00:13:49.035>So <00:13:50.435>good.

237
00:13:51.515 --> 00:13:54.335
<00:13:51.515>So <00:13:51.715>let's <00:13:51.915>have, <00:13:52.115>here's <00:13:52.314>the <00:13:52.515>shares <00:13:52.715>board <00:13:52.915>here.

238
00:13:54.365 --> 00:13:55.535
<00:13:54.365>Here <00:13:54.716>are <00:13:55.067>the <00:13:55.418>FPS.

239
00:13:55.755 --> 00:14:00.095
<00:13:55.755>On <00:13:55.895>the <00:13:56.035>top <00:13:56.175>right <00:13:56.314>left, <00:13:56.455>you <00:13:56.595>can <00:13:56.735>see <00:13:56.875>the <00:13:57.015>maximum <00:13:57.155>60.

240
00:14:00.275 --> 00:14:01.975
<00:14:00.275>So <00:14:00.741>it's <00:14:01.208>pretty <00:14:01.675>smooth.

241
00:14:02.835 --> 00:14:04.375
<00:14:02.835>So <00:14:03.297>now <00:14:03.759>let's <00:14:04.221>try

242
00:14:04.375 --> 00:14:06.895
<00:14:04.375>to <00:14:04.515>calculate <00:14:04.655>which <00:14:04.795>is <00:14:04.935>the <00:14:05.075>best <00:14:05.215>move <00:14:05.355>on <00:14:05.495>the <00:14:05.635>main <00:14:05.775>thread.

243
00:14:08.375 --> 00:14:11.395
<00:14:08.375>As <00:14:08.575>you <00:14:08.775>can <00:14:08.975>see, <00:14:09.175>the <00:14:09.375>button <00:14:09.575>remains <00:14:09.775>pushed.

244
00:14:11.985 --> 00:14:14.515
<00:14:11.985>This <00:14:12.265>Dynatrace <00:14:12.545>logo <00:14:12.825>that <00:14:13.105>was <00:14:13.385>supposed

245
00:14:14.515 --> 00:14:15.675
<00:14:14.515>to <00:14:14.776>spin <00:14:15.036>is <00:14:15.298>not <00:14:15.559>spinning.

246
00:14:16.015 --> 00:14:19.355
<00:14:16.015>I'm, <00:14:16.215>I'm, <00:14:16.415>I <00:14:16.615>want <00:14:16.814>to <00:14:17.015>drag <00:14:17.215>the <00:14:17.415>pieces.

247
00:14:20.115 --> 00:14:23.195
<00:14:20.115>I <00:14:20.270>cannot <00:14:20.426>do <00:14:20.581>anymore <00:14:20.737>because <00:14:20.892>my <00:14:21.048>screen <00:14:21.203>is <00:14:21.359>completely <00:14:21.515>frozen.

248
00:14:23.385 --> 00:14:25.115
<00:14:23.385>It's <00:14:23.665>all <00:14:23.944>the <00:14:24.225>resources <00:14:24.505>are <00:14:24.785>spent

249
00:14:25.375 --> 00:14:27.315
<00:14:25.375>by <00:14:25.608>calculating <00:14:25.841>which <00:14:26.075>is <00:14:26.308>the <00:14:26.541>best <00:14:26.775>move.

250
00:14:27.895 --> 00:14:32.875
<00:14:27.895>So <00:14:28.022>it <00:14:28.149>got <00:14:28.276>it <00:14:28.404>right, <00:14:28.531>but <00:14:28.658>at <00:14:28.785>what <00:14:28.913>price? <00:14:29.040>The <00:14:29.167>6 <00:14:29.295>25.

251
00:14:32.975 --> 00:14:36.595
<00:14:32.975>So <00:14:33.115>it <00:14:33.255>says <00:14:33.395>that <00:14:33.535>we <00:14:33.675>need <00:14:33.815>to <00:14:33.955>capture <00:14:34.095>this <00:14:34.235>night. <00:14:34.375>Cool.

252
00:14:37.575 --> 00:14:42.495
<00:14:37.575>But <00:14:37.808>yeah, <00:14:38.041>we <00:14:38.275>lost <00:14:38.508>a <00:14:38.741>lot <00:14:38.975>of

253
00:14:43.335 --> 00:14:44.615
<00:14:43.335>valuable <00:14:43.565>time <00:14:43.795>for <00:14:44.026>the <00:14:44.256>user <00:14:44.487>here

254
00:14:44.615 --> 00:14:46.255
<00:14:44.615>because <00:14:44.965>he <00:14:45.315>couldn't <00:14:45.665>do <00:14:46.015>anything

255
00:14:46.255 --> 00:14:47.535
<00:14:46.255>else <00:14:46.485>at <00:14:46.715>the, <00:14:46.946>at <00:14:47.176>the <00:14:47.406>meantime.

256
00:14:48.395 --> 00:14:51.765
<00:14:48.395>So <00:14:48.569>what <00:14:48.745>I <00:14:48.920>want <00:14:49.095>to <00:14:49.270>show <00:14:49.444>you <00:14:49.620>instead <00:14:49.795>is

257
00:14:52.145 --> 00:14:54.085
<00:14:52.145>how <00:14:52.378>this <00:14:52.611>behaves <00:14:52.845>in <00:14:53.078>a <00:14:53.311>web <00:14:53.545>worker.

258
00:14:55.025 --> 00:14:57.805
<00:14:55.025>So <00:14:55.225>we <00:14:55.425>can <00:14:55.625>do <00:14:55.824>the <00:14:56.025>same <00:14:56.225>sequence <00:14:56.425>here.

259
00:14:59.715 --> 00:15:00.775
<00:14:59.715>So <00:14:59.953>everything <00:15:00.192>is <00:15:00.430>the <00:15:00.669>same

260
00:15:00.995 --> 00:15:04.855
<00:15:00.995>and <00:15:01.150>we <00:15:01.306>click <00:15:01.461>the <00:15:01.617>button <00:15:01.772>to <00:15:01.928>calculate <00:15:02.083>the <00:15:02.239>best <00:15:02.395>move

261
00:15:04.855 --> 00:15:06.735
<00:15:04.855>for <00:15:05.135>the <00:15:05.415>web <00:15:05.695>worker <00:15:05.975>button <00:15:06.255>standard.

262
00:15:06.735 --> 00:15:08.255
<00:15:06.735>The <00:15:07.191>spinning <00:15:07.647>our <00:15:08.103>button

263
00:15:08.955 --> 00:15:10.455
<00:15:08.955>of <00:15:09.180>calculate <00:15:09.405>web <00:15:09.630>worker <00:15:09.855>is <00:15:10.080>not <00:15:10.305>pushed.

264
00:15:10.695 --> 00:15:11.935
<00:15:10.695>I <00:15:10.918>can <00:15:11.141>drag <00:15:11.364>the <00:15:11.587>pieces <00:15:11.810>still.

265
00:15:12.035 --> 00:15:15.695
<00:15:12.035>So <00:15:12.190>as <00:15:12.346>you <00:15:12.501>can <00:15:12.657>see, <00:15:12.812>60 <00:15:12.968>FPS <00:15:13.123>our <00:15:13.279>AI <00:15:13.435>is

266
00:15:16.595 --> 00:15:19.505
<00:15:16.595>super <00:15:17.061>us <00:15:17.528>usable <00:15:17.995>and

267
00:15:20.555 --> 00:15:23.465
<00:15:20.555>after <00:15:20.710>some <00:15:20.866>time, <00:15:21.021>the <00:15:21.177>same <00:15:21.332>time <00:15:21.488>actually <00:15:21.643>more <00:15:21.799>or <00:15:21.954>less

268
00:15:23.535 --> 00:15:28.065
<00:15:23.535>because <00:15:23.690>we <00:15:23.846>are <00:15:24.001>not <00:15:24.157>dividing <00:15:24.312>the, <00:15:24.468>uh, <00:15:24.623>algorithm <00:15:24.779>into <00:15:24.935>pieces

269
00:15:28.485 --> 00:15:30.905
<00:15:28.485>to <00:15:28.660>spread <00:15:28.835>into <00:15:29.010>multiple <00:15:29.185>thread, <00:15:29.360>we <00:15:29.535>could <00:15:29.710>do <00:15:29.885>that.

270
00:15:31.325 --> 00:15:35.745
<00:15:31.325>But <00:15:31.480>um, <00:15:31.636>in <00:15:31.791>another <00:15:31.947>demo <00:15:32.102>where <00:15:32.258>I <00:15:32.413>have <00:15:32.569>more <00:15:32.725>time

271
00:15:36.605 --> 00:15:39.725
<00:15:36.605>and, <00:15:36.805>and <00:15:37.005>yeah, <00:15:37.205>we <00:15:37.405>have <00:15:37.605>the <00:15:37.805>same <00:15:38.005>move.

272
00:15:40.225 --> 00:15:43.965
<00:15:40.225>We <00:15:40.380>got <00:15:40.536>it <00:15:40.691>and <00:15:40.847>we <00:15:41.002>did <00:15:41.158>not <00:15:41.313>freeze <00:15:41.469>the <00:15:41.625>user.

273
00:15:44.465 --> 00:15:48.925
<00:15:44.465>So <00:15:44.572>as <00:15:44.680>you <00:15:44.788>can <00:15:44.895>see, <00:15:45.003>what <00:15:45.111>we <00:15:45.218>can <00:15:45.326>do <00:15:45.434>as <00:15:45.541>well <00:15:45.649>is <00:15:45.757>you <00:15:45.865>can

274
00:15:53.385 --> 00:15:54.815
<00:15:53.385>debug <00:15:53.706>the <00:15:54.028>performance <00:15:54.350>as <00:15:54.672>well.

275
00:15:56.695 --> 00:16:01.075
<00:15:56.695>And <00:15:56.928>once <00:15:57.161>it <00:15:57.395>finishes, <00:15:57.628>you <00:15:57.861>will <00:15:58.095>see

276
00:16:06.165 --> 00:16:09.695
<00:16:06.165>that <00:16:06.305>our <00:16:06.444>code <00:16:06.584>is <00:16:06.724>being <00:16:06.865>executed <00:16:07.005>in <00:16:07.145>a <00:16:07.285>web <00:16:07.425>worker <00:16:07.564>instead

277
00:16:10.115 --> 00:16:13.175
<00:16:10.115>of <00:16:10.348>the <00:16:10.581>main <00:16:10.815>thread <00:16:11.048>as <00:16:11.281>loading <00:16:11.515>profile

278
00:16:14.835 --> 00:16:16.535
<00:16:14.835>as <00:16:15.115>you <00:16:15.395>can <00:16:15.675>see <00:16:15.955>here, <00:16:16.235>oops.

279
00:16:19.735 --> 00:16:23.915
<00:16:19.735>As <00:16:19.862>you <00:16:19.989>can <00:16:20.116>see <00:16:20.244>here, <00:16:20.371>we <00:16:20.498>have <00:16:20.625>worker <00:16:20.753>chase, <00:16:20.880>engine <00:16:21.007>worker <00:16:21.135>ts.

280
00:16:24.455 --> 00:16:27.435
<00:16:24.455>So <00:16:24.805>our <00:16:25.155>code, <00:16:25.505>it's <00:16:25.855>executed

281
00:16:28.135 --> 00:16:29.595
<00:16:28.135>as <00:16:28.397>I <00:16:28.660>said <00:16:28.923>in <00:16:29.186>our <00:16:29.449>worker.

282
00:16:30.255 --> 00:16:30.475
So

283
00:16:34.865 --> 00:16:38.795
<00:16:34.865>knowing <00:16:35.040>this, <00:16:35.215>you <00:16:35.390>might <00:16:35.565>think <00:16:35.740>let's <00:16:35.915>use <00:16:36.090>web <00:16:36.265>workers

284
00:16:38.895 --> 00:16:41.195
<00:16:38.895>for <00:16:39.128>everything, <00:16:39.361>then <00:16:39.595>they <00:16:39.828>are <00:16:40.061>awesome, <00:16:40.295>right?

285
00:16:44.305 --> 00:16:48.285
<00:16:44.305>Uh, <00:16:44.538>nope, <00:16:44.771>they <00:16:45.005>have <00:16:45.238>many <00:16:45.471>limitations <00:16:45.704>actually.

286
00:16:48.305 --> 00:16:52.005
<00:16:48.305>For <00:16:48.538>example, <00:16:48.771>you <00:16:49.005>cannot <00:16:49.238>access <00:16:49.471>the <00:16:49.704>do.

287
00:16:52.985 --> 00:16:55.525
<00:16:52.985>So <00:16:53.218>if <00:16:53.451>I <00:16:53.685>do <00:16:53.918>document <00:16:54.151>dot <00:16:54.385>get

288
00:16:56.625 --> 00:16:58.085
<00:16:56.625>id, <00:16:56.887>I <00:16:57.150>will <00:16:57.413>get <00:16:57.676>an <00:16:57.939>error.

289
00:16:59.145 --> 00:17:03.405
<00:16:59.145>And <00:16:59.272>also <00:16:59.399>when <00:16:59.526>you <00:16:59.654>are <00:16:59.781>sending <00:16:59.908>data <00:17:00.035>to <00:17:00.163>the <00:17:00.290>web <00:17:00.417>worker, <00:17:00.545>uh,

290
00:17:03.435 --> 00:17:07.555
<00:17:03.435>this <00:17:03.668>data <00:17:03.901>is, <00:17:04.135>uh, <00:17:04.368>serialized <00:17:04.601>and <00:17:04.835>copied.

291
00:17:08.335 --> 00:17:11.515
<00:17:08.335>So <00:17:08.510>if <00:17:08.685>you <00:17:08.860>are <00:17:09.035>sending <00:17:09.210>big <00:17:09.385>chunks <00:17:09.560>of <00:17:09.735>data

292
00:17:11.625 --> 00:17:12.795
<00:17:11.625>between <00:17:11.976>the <00:17:12.327>web <00:17:12.678>worker

293
00:17:13.295 --> 00:17:14.315
<00:17:13.295>and <00:17:13.601>the <00:17:13.907>main <00:17:14.213>threat,

294
00:17:14.965 --> 00:17:18.075
<00:17:14.964>maybe <00:17:15.198>it's <00:17:15.431>not <00:17:15.665>the <00:17:15.898>most <00:17:16.131>suitable <00:17:16.365>scenario.

295
00:17:20.875 --> 00:17:21.915
<00:17:20.875>I <00:17:21.108>can <00:17:21.343>show <00:17:21.577>you <00:17:21.810>again

296
00:17:27.415 --> 00:17:27.875
<00:17:27.415>if <00:17:27.829>I,

297
00:17:38.095 --> 00:17:42.165
<00:17:38.095>so <00:17:38.202>as <00:17:38.310>you <00:17:38.418>can <00:17:38.525>see, <00:17:38.633>this <00:17:38.741>is <00:17:38.848>my <00:17:38.956>code <00:17:39.064>here <00:17:39.171>I <00:17:39.279>have <00:17:39.387>the <00:17:39.495>code

298
00:17:42.165 --> 00:17:44.565
<00:17:42.165>of <00:17:42.305>the <00:17:42.445>web <00:17:42.585>worker, <00:17:42.725>which <00:17:42.865>I'm <00:17:43.004>using <00:17:43.145>a <00:17:43.284>function <00:17:43.425>that <00:17:43.565>is

299
00:17:44.565 --> 00:17:45.685
<00:17:44.565>outside <00:17:44.817>of <00:17:45.069>the <00:17:45.321>web <00:17:45.572>worker,

300
00:17:45.705 --> 00:17:48.125
<00:17:45.705>but <00:17:45.860>I <00:17:46.016>can <00:17:46.171>use <00:17:46.327>it <00:17:46.482>inside <00:17:46.638>the <00:17:46.793>web <00:17:46.949>worker <00:17:47.105>without

301
00:17:48.125 --> 00:17:49.205
<00:17:48.125>having <00:17:48.368>to <00:17:48.610>move <00:17:48.854>the <00:17:49.097>function.

302
00:17:49.755 --> 00:17:52.405
<00:17:49.755>It's, <00:17:49.895>it's <00:17:50.035>going <00:17:50.175>to <00:17:50.315>be <00:17:50.455>executed <00:17:50.595>in <00:17:50.735>the <00:17:50.875>main <00:17:51.015>threat <00:17:51.155>anyway.

303
00:17:52.625 --> 00:17:55.725
<00:17:52.625>So <00:17:52.825>I <00:17:53.025>could <00:17:53.225>do <00:17:53.425>here, <00:17:53.625>document <00:17:53.825>get <00:17:54.025>element

304
00:17:56.705 --> 00:17:58.965
<00:17:56.705>by <00:17:57.405>id, <00:17:58.105>hello.

305
00:18:00.965 --> 00:18:01.965
<00:18:00.965>And <00:18:01.264>if <00:18:01.564>I <00:18:01.865>move

306
00:18:03.315 --> 00:18:07.365
<00:18:03.315>Here, <00:18:03.781>I <00:18:04.248>get <00:18:04.715>an

307
00:18:07.365 --> 00:18:08.645
<00:18:07.365>error <00:18:07.653>document <00:18:07.941>is <00:18:08.229>not <00:18:08.517>defined.

308
00:18:09.625 --> 00:18:13.965
<00:18:09.625>As <00:18:09.800>I <00:18:09.975>said, <00:18:10.150>also, <00:18:10.325>the <00:18:10.500>data <00:18:10.675>that <00:18:10.850>you're <00:18:11.025>passing

309
00:18:14.025 --> 00:18:15.685
<00:18:14.025>to <00:18:14.305>the <00:18:14.585>web <00:18:14.865>worker <00:18:15.145>is <00:18:15.425>copied.

310
00:18:16.905 --> 00:18:18.845
<00:18:16.905>So <00:18:17.254>bear <00:18:17.605>that <00:18:17.955>in <00:18:18.305>mind.

311
00:18:22.345 --> 00:18:24.835
<00:18:22.345>However, <00:18:22.545>There <00:18:22.745>are <00:18:22.945>opportunities <00:18:23.145>to <00:18:23.345>use <00:18:23.545>web <00:18:23.745>workers,

312
00:18:26.415 --> 00:18:31.135
<00:18:26.415>For <00:18:26.881>Example, <00:18:27.348>apart <00:18:27.815>from

313
00:18:31.195 --> 00:18:35.415
<00:18:31.195>having <00:18:31.395>something <00:18:31.595>that <00:18:31.794>is <00:18:31.995>really <00:18:32.195>complex <00:18:32.395>to <00:18:32.595>execute.

314
00:18:36.075 --> 00:18:39.095
<00:18:36.075>But <00:18:36.202>it <00:18:36.329>takes <00:18:36.456>very <00:18:36.584>few <00:18:36.711>data <00:18:36.838>to <00:18:36.965>send <00:18:37.093>to <00:18:37.220>the <00:18:37.347>main <00:18:37.475>thread.

315
00:18:40.555 --> 00:18:42.735
<00:18:40.555>How, <00:18:40.755>like <00:18:40.955>I <00:18:41.155>showed <00:18:41.355>with <00:18:41.555>the <00:18:41.755>chess <00:18:41.955>engine,

316
00:18:43.395 --> 00:18:45.615
<00:18:43.395>you <00:18:43.628>could <00:18:43.861>have <00:18:44.095>like <00:18:44.328>for <00:18:44.561>example <00:18:44.795>Canvas.

317
00:18:46.275 --> 00:18:51.135
<00:18:46.275>In <00:18:46.430>Canvas, <00:18:46.586>you <00:18:46.741>could <00:18:46.897>paint <00:18:47.052>charge, <00:18:47.208>uh, <00:18:47.363>with <00:18:47.519>a <00:18:47.675>canvas.

318
00:18:51.795 --> 00:18:55.855
<00:18:51.795>And <00:18:51.935>a <00:18:52.075>good <00:18:52.215>thing <00:18:52.355>of <00:18:52.495>the <00:18:52.635>canvas <00:18:52.775>is <00:18:52.915>that <00:18:53.055>you <00:18:53.195>can

319
00:18:56.915 --> 00:18:59.295
<00:18:56.915>modify <00:18:57.195>it <00:18:57.475>within <00:18:57.754>the <00:18:58.034>web <00:18:58.315>worker

320
00:18:59.295 --> 00:19:04.255
<00:18:59.295>because <00:18:59.528>there <00:18:59.761>is <00:18:59.995>actually, <00:19:00.228>uh, <00:19:00.461>a <00:19:00.695>thing

321
00:19:04.255 --> 00:19:05.655
<00:19:04.255>that <00:19:04.570>is <00:19:04.885>called <00:19:05.200>offscreen <00:19:05.514>canvas.

322
00:19:06.315 --> 00:19:07.535
<00:19:06.315>And <00:19:06.534>you <00:19:06.754>can, <00:19:06.973>and <00:19:07.193>the <00:19:07.413>same

323
00:19:07.555 --> 00:19:09.335
<00:19:07.555>as <00:19:07.788>you <00:19:08.021>were <00:19:08.255>working <00:19:08.488>the <00:19:08.721>your <00:19:08.955>canvas

324
00:19:09.355 --> 00:19:11.575
<00:19:09.355>before, <00:19:09.588>you <00:19:09.821>can <00:19:10.055>call <00:19:10.288>the <00:19:10.521>function <00:19:10.755>transfer

325
00:19:11.575 --> 00:19:12.815
<00:19:11.575>control <00:19:12.133>to <00:19:12.691>offscreen.

326
00:19:13.475 --> 00:19:16.655
<00:19:13.475>You <00:19:13.675>send <00:19:13.875>the <00:19:14.074>canvas <00:19:14.274>to <00:19:14.475>the <00:19:14.675>web <00:19:14.875>worker

327
00:19:17.395 --> 00:19:21.295
<00:19:17.395>and <00:19:17.628>what <00:19:17.861>you <00:19:18.095>can <00:19:18.328>do <00:19:18.561>is <00:19:18.795>play

328
00:19:21.295 --> 00:19:23.215
<00:19:21.295>with <00:19:21.470>the <00:19:21.645>canvas <00:19:21.820>in <00:19:21.995>the <00:19:22.170>web <00:19:22.345>worker, <00:19:22.520>the <00:19:22.695>same

329
00:19:23.395 --> 00:19:25.055
<00:19:23.395>as <00:19:23.745>you <00:19:24.095>are <00:19:24.445>playing, <00:19:24.795>eh,

330
00:19:25.325 --> 00:19:26.695
<00:19:25.325>what <00:19:25.501>you <00:19:25.677>are <00:19:25.853>playing <00:19:26.029>in <00:19:26.205>the <00:19:26.381>main <00:19:26.558>thread.

331
00:19:29.095 --> 00:19:30.675
<00:19:29.095>So <00:19:29.328>in <00:19:29.561>this <00:19:29.795>case, <00:19:30.028>there's <00:19:30.261>no <00:19:30.495>copy

332
00:19:31.615 --> 00:19:32.995
<00:19:31.615>and <00:19:32.029>there's <00:19:32.443>no <00:19:32.857>serialization.

333
00:19:36.115 --> 00:19:38.665
<00:19:36.115>Let's <00:19:36.290>take <00:19:36.465>a <00:19:36.640>look <00:19:36.815>as <00:19:36.990>well <00:19:37.165>at <00:19:37.340>the <00:19:37.515>ecosystem

334
00:19:40.775 --> 00:19:45.155
<00:19:40.775>we <00:19:40.930>have <00:19:41.086>also <00:19:41.241>libraries <00:19:41.397>that <00:19:41.552>go <00:19:41.708>on <00:19:41.863>WebWork <00:19:42.019>like <00:19:42.175>paradigm.

335
00:19:46.135 --> 00:19:48.075
<00:19:46.135>Anyone <00:19:46.601>have <00:19:47.068>heard <00:19:47.535>Paradigm?

336
00:19:49.485 --> 00:19:51.935
<00:19:49.485>Some <00:19:49.764>people, <00:19:50.044>uh, <00:19:50.324>for <00:19:50.604>the <00:19:50.885>people

337
00:19:51.965 --> 00:19:54.135
<00:19:51.965>that <00:19:52.139>don't <00:19:52.314>know <00:19:52.490>Bar <00:19:52.665>Down, <00:19:52.840>do <00:19:53.014>you <00:19:53.189>know <00:19:53.365>Quick?

338
00:19:56.795 --> 00:19:58.895
<00:19:56.795>So <00:19:56.995>some <00:19:57.195>for <00:19:57.395>the <00:19:57.595>same <00:19:57.795>creators <00:19:57.995>of <00:19:58.195>Quick,

339
00:19:59.045 --> 00:20:02.135
<00:19:59.045>they <00:19:59.220>build <00:19:59.395>party <00:19:59.570>down <00:19:59.745>to <00:19:59.920>run <00:20:00.095>third <00:20:00.270>party <00:20:00.445>scripts

340
00:20:02.685 --> 00:20:03.935
<00:20:02.685>outside <00:20:02.966>of <00:20:03.247>the <00:20:03.528>main <00:20:03.810>thread.

341
00:20:06.245 --> 00:20:09.545
<00:20:06.245>So <00:20:06.594>They <00:20:06.945>do <00:20:07.294>some <00:20:07.645>kind

342
00:20:09.665 --> 00:20:11.345
<00:20:09.665>of <00:20:09.898>a <00:20:10.131>proxy <00:20:10.365>on <00:20:10.598>the <00:20:10.831>web <00:20:11.065>workers.

343
00:20:11.525 --> 00:20:15.345
<00:20:11.525>So <00:20:11.700>your <00:20:11.875>web <00:20:12.050>APIs <00:20:12.225>are <00:20:12.400>available <00:20:12.575>on, <00:20:12.750>on <00:20:12.925>the,

344
00:20:15.685 --> 00:20:18.225
<00:20:15.685>on <00:20:15.885>another <00:20:16.085>threat <00:20:16.284>apart <00:20:16.485>from <00:20:16.685>the <00:20:16.885>main <00:20:17.085>threat.

345
00:20:19.005 --> 00:20:21.665
<00:20:19.005>So <00:20:19.471>an <00:20:19.938>external <00:20:20.405>library

346
00:20:21.775 --> 00:20:24.505
<00:20:21.775>that <00:20:21.950>doesn't <00:20:22.125>know <00:20:22.300>anything <00:20:22.475>about <00:20:22.650>Party <00:20:22.825>Down <00:20:23.000>should <00:20:23.175>be

347
00:20:24.575 --> 00:20:25.585
<00:20:24.575>able <00:20:24.878>to <00:20:25.181>work <00:20:25.484>anyway.

348
00:20:26.215 --> 00:20:29.105
<00:20:26.215>This <00:20:26.448>can <00:20:26.681>only <00:20:26.915>be <00:20:27.148>useful <00:20:27.381>when <00:20:27.615>you,

349
00:20:29.475 --> 00:20:32.385
<00:20:29.475>those <00:20:29.649>scripts <00:20:29.824>are <00:20:30.000>not <00:20:30.175>critical <00:20:30.350>for <00:20:30.524>the <00:20:30.699>user <00:20:30.875>flow

350
00:20:32.385 --> 00:20:35.105
<00:20:32.385>because <00:20:32.525>also <00:20:32.665>they, <00:20:32.805>if <00:20:32.945>they <00:20:33.085>are, <00:20:33.225>they <00:20:33.365>have <00:20:33.504>a <00:20:33.645>lot <00:20:33.785>of

351
00:20:35.855 --> 00:20:40.425
<00:20:35.855>dumb <00:20:36.088>operations, <00:20:36.321>Using <00:20:36.555>par <00:20:36.788>down <00:20:37.021>could <00:20:37.255>actually

352
00:20:41.265 --> 00:20:42.785
<00:20:41.265>decrease <00:20:41.538>your <00:20:41.812>performance <00:20:42.085>instead <00:20:42.359>of <00:20:42.633>increasing

353
00:20:42.785 --> 00:20:45.345
<00:20:42.785>because <00:20:42.925>you <00:20:43.065>are <00:20:43.205>sending <00:20:43.345>lots <00:20:43.485>of <00:20:43.625>data <00:20:43.765>to <00:20:43.905>the <00:20:44.045>main <00:20:44.185>thread.

354
00:20:46.165 --> 00:20:50.525
<00:20:46.165>So <00:20:46.320>par <00:20:46.476>down <00:20:46.631>actually <00:20:46.787>works <00:20:46.942>in <00:20:47.098>a <00:20:47.253>very <00:20:47.409>simple <00:20:47.565>way.

355
00:20:50.525 --> 00:20:53.005
<00:20:50.525>If <00:20:50.700>you <00:20:50.875>have <00:20:51.050>like <00:20:51.225>a <00:20:51.400>script <00:20:51.575>in <00:20:51.750>your <00:20:51.925>HTML

356
00:20:53.005 --> 00:20:54.525
<00:20:53.005>that <00:20:53.233>you <00:20:53.461>are <00:20:53.689>importing <00:20:53.917>it <00:20:54.145>like <00:20:54.373>this,

357
00:20:55.305 --> 00:20:58.365
<00:20:55.305>an <00:20:55.460>external <00:20:55.616>library <00:20:55.771>you <00:20:55.927>just <00:20:56.082>use <00:20:56.238>type <00:20:56.393>text <00:20:56.549>par <00:20:56.705>down.

358
00:20:58.825 --> 00:21:02.205
<00:20:58.825>And <00:20:59.025>this <00:20:59.225>will <00:20:59.425>be <00:20:59.625>loaded <00:20:59.825>on <00:21:00.025>another <00:21:00.225>threat.

359
00:21:03.225 --> 00:21:07.205
<00:21:03.225>So <00:21:03.399>this <00:21:03.574>is <00:21:03.750>mainly <00:21:03.925>useful <00:21:04.100>as <00:21:04.274>they <00:21:04.449>claim <00:21:04.625>for

360
00:21:07.845 --> 00:21:10.605
<00:21:07.845>chatbots <00:21:08.125>like <00:21:08.405>Intercom <00:21:08.685>and <00:21:08.965>so <00:21:09.245>on.

361
00:21:11.035 --> 00:21:14.685
<00:21:11.035>Analytics <00:21:11.315>and <00:21:11.595>advertising, <00:21:11.875>which <00:21:12.155>are <00:21:12.435>not

362
00:21:15.245 --> 00:21:16.405
<00:21:15.245>critical <00:21:15.766>user <00:21:16.289>flows.

363
00:21:19.875 --> 00:21:22.555
<00:21:19.875>I <00:21:20.030>want <00:21:20.186>to <00:21:20.341>do <00:21:20.497>also <00:21:20.652>a <00:21:20.808>special <00:21:20.963>mention <00:21:21.119>for <00:21:21.275>frameworks

364
00:21:22.555 --> 00:21:25.635
<00:21:22.555>that <00:21:22.788>have <00:21:23.021>been <00:21:23.255>developed, <00:21:23.488>especially <00:21:23.721>thought <00:21:23.955>for

365
00:21:26.375 --> 00:21:28.675
<00:21:26.375>web <00:21:26.725>workers <00:21:27.075>like <00:21:27.425>Neo <00:21:27.775>MGS.

366
00:21:29.175 --> 00:21:31.555
<00:21:29.175>So <00:21:29.315>the, <00:21:29.455>the <00:21:29.595>idea <00:21:29.735>is <00:21:29.875>that <00:21:30.014>just <00:21:30.155>found <00:21:30.294>a <00:21:30.435>web <00:21:30.575>worker

367
00:21:31.575 --> 00:21:34.635
<00:21:31.575>and <00:21:31.730>this <00:21:31.886>web <00:21:32.041>worker <00:21:32.197>is <00:21:32.352>able, <00:21:32.508>is <00:21:32.663>able <00:21:32.819>to, <00:21:32.975>uh,

368
00:21:34.785 --> 00:21:36.235
<00:21:34.785>calculate <00:21:35.220>everything <00:21:35.655>for <00:21:36.090>you.

369
00:21:36.535 --> 00:21:40.155
<00:21:36.535>So <00:21:36.675>the <00:21:36.815>virtual <00:21:36.955>dom <00:21:37.095>is <00:21:37.235>calculated <00:21:37.375>on <00:21:37.515>the <00:21:37.655>web <00:21:37.795>worker <00:21:37.935>instead

370
00:21:40.155 --> 00:21:42.395
<00:21:40.155>of <00:21:40.310>the <00:21:40.466>main <00:21:40.621>thread, <00:21:40.777>also <00:21:40.932>the <00:21:41.088>connection <00:21:41.243>to <00:21:41.399>the <00:21:41.555>backend.

371
00:21:42.445 --> 00:21:45.915
<00:21:42.445>Everything <00:21:42.645>is <00:21:42.845>there. <00:21:43.044>It's <00:21:43.245>like <00:21:43.445>an <00:21:43.645>interesting <00:21:43.845>paradigm.

372
00:21:46.355 --> 00:21:49.315
<00:21:46.355>I <00:21:46.495>haven't <00:21:46.635>used <00:21:46.775>it <00:21:46.915>though <00:21:47.055>because <00:21:47.195>it's <00:21:47.335>like <00:21:47.475>a <00:21:47.615>completely <00:21:47.755>new

373
00:21:49.635 --> 00:21:51.155
<00:21:49.635>language <00:21:49.908>and <00:21:50.182>getting <00:21:50.455>used <00:21:50.729>to <00:21:51.003>it.

374
00:21:51.535 --> 00:21:52.755
<00:21:51.535>Uh, <00:21:52.084>it's <00:21:52.633>hard.

375
00:21:53.615 --> 00:21:57.235
<00:21:53.615>But <00:21:53.790>I <00:21:53.965>wanted <00:21:54.140>you <00:21:54.315>to <00:21:54.490>know <00:21:54.665>that <00:21:54.840>it <00:21:55.015>exists.

376
00:21:58.495 --> 00:21:59.995
<00:21:58.495>So <00:21:59.169>as <00:21:59.844>a

377
00:21:59.995 --> 00:22:03.565
<00:21:59.995>conclusion, <00:22:00.344>what <00:22:00.695>do <00:22:01.044>we <00:22:01.395>have?

378
00:22:03.585 --> 00:22:05.685
<00:22:03.585>Web <00:22:03.818>workers <00:22:04.051>don't <00:22:04.285>have <00:22:04.518>direct <00:22:04.751>home <00:22:04.985>access.

379
00:22:06.555 --> 00:22:08.045
<00:22:06.555>They <00:22:06.890>have <00:22:07.225>some <00:22:07.560>increased <00:22:07.896>cons.

380
00:22:08.615 --> 00:22:13.165
<00:22:08.615>Complexity, <00:22:08.815>not <00:22:09.015>as <00:22:09.215>bad <00:22:09.415>as <00:22:09.615>you <00:22:09.815>might <00:22:10.015>thought.

381
00:22:13.325 --> 00:22:14.925
<00:22:13.325>I <00:22:13.480>did <00:22:13.636>not <00:22:13.791>have <00:22:13.947>time <00:22:14.102>to <00:22:14.258>show <00:22:14.413>you <00:22:14.569>the <00:22:14.725>code,

382
00:22:14.985 --> 00:22:19.005
<00:22:14.985>but <00:22:15.125>um, <00:22:15.264>for <00:22:15.405>having <00:22:15.544>one <00:22:15.685>web <00:22:15.824>worker, <00:22:15.965>the <00:22:16.104>complexity <00:22:16.245>is <00:22:16.385>not

383
00:22:19.005 --> 00:22:23.605
<00:22:19.005>that <00:22:19.180>hard, <00:22:19.355>but <00:22:19.530>you <00:22:19.705>still <00:22:19.880>have <00:22:20.055>a <00:22:20.230>communication <00:22:20.405>overhead.

384
00:22:23.705 --> 00:22:27.125
<00:22:23.705>So <00:22:23.845>there <00:22:23.985>might <00:22:24.125>be <00:22:24.264>some <00:22:24.405>cases <00:22:24.544>that <00:22:24.685>even <00:22:24.824>using <00:22:24.965>our <00:22:25.105>worker,

385
00:22:27.835 --> 00:22:31.885
<00:22:27.835>your <00:22:27.975>performance <00:22:28.115>will <00:22:28.255>stay <00:22:28.395>more <00:22:28.535>or <00:22:28.675>less <00:22:28.815>the <00:22:28.955>same <00:22:29.095>or <00:22:29.235>worse.

386
00:22:31.985 --> 00:22:35.325
<00:22:31.985>So <00:22:32.112>in <00:22:32.239>those <00:22:32.366>cases, <00:22:32.494>it's <00:22:32.621>not <00:22:32.748>worth <00:22:32.875>to <00:22:33.003>use <00:22:33.130>a <00:22:33.257>web <00:22:33.385>worker,

387
00:22:36.865 --> 00:22:38.565
<00:22:36.865>but <00:22:37.145>in <00:22:37.425>some <00:22:37.705>scenarios <00:22:37.985>they <00:22:38.265>can

388
00:22:38.635 --> 00:22:40.365
<00:22:38.635>improve <00:22:38.915>a <00:22:39.195>lot <00:22:39.475>of <00:22:39.754>the <00:22:40.035>performance.

389
00:22:40.825 --> 00:22:43.485
<00:22:40.825>And <00:22:41.058>improving <00:22:41.291>the <00:22:41.525>performance <00:22:41.758>means <00:22:41.991>improving <00:22:42.225>also

390
00:22:43.505 --> 00:22:44.565
<00:22:43.505>the <00:22:43.982>user <00:22:44.459>experience.

391
00:22:45.385 --> 00:22:48.685
<00:22:45.385>So <00:22:45.618>overall, <00:22:45.851>my <00:22:46.085>takeaway <00:22:46.318>for <00:22:46.551>you <00:22:46.785>is

392
00:22:49.695 --> 00:22:52.765
<00:22:49.695>don't <00:22:49.895>get <00:22:50.095>lost <00:22:50.294>in <00:22:50.495>web <00:22:50.695>workers <00:22:50.895>thinking <00:22:51.095>they

393
00:22:52.765 --> 00:22:53.845
<00:22:52.765>will <00:22:53.008>solve <00:22:53.251>all <00:22:53.494>your <00:22:53.737>problems.

394
00:22:54.015 --> 00:22:58.125
<00:22:54.015>First, <00:22:54.170>focus <00:22:54.326>on <00:22:54.481>making <00:22:54.637>the <00:22:54.792>main <00:22:54.948>threat <00:22:55.103>code <00:22:55.259>as <00:22:55.415>performance

395
00:22:58.125 --> 00:23:01.045
<00:22:58.125>as <00:22:58.300>possible <00:22:58.475>and <00:22:58.650>then <00:22:58.825>you <00:22:59.000>can <00:22:59.175>think <00:22:59.350>about <00:22:59.525>moving

396
00:23:01.495 --> 00:23:03.285
<00:23:01.495>those <00:23:01.844>into <00:23:02.195>a <00:23:02.544>web <00:23:02.895>worker.

397
00:23:05.595 --> 00:23:08.105
<00:23:05.595>Thank <00:23:05.750>you <00:23:05.906>so <00:23:06.061>much <00:23:06.217>for <00:23:06.372>having <00:23:06.528>me. <00:23:06.683>Thank <00:23:06.839>you, <00:23:06.995>Berlin.

398
00:23:08.765 --> 00:23:09.345
<00:23:08.765>That's <00:23:09.287>it.