WEBVTT

1
00:00:17.785 --> 00:00:18.925
<00:00:17.785>Um, <00:00:18.298>welcome <00:00:18.811>everyone

2
00:00:18.925 --> 00:00:21.485
<00:00:18.925>to <00:00:19.125>my <00:00:19.325>talk <00:00:19.525>about <00:00:19.725>why <00:00:19.925>I <00:00:20.125>recommend <00:00:20.325>Swell

3
00:00:21.625 --> 00:00:23.125
<00:00:21.625>to <00:00:21.962>every <00:00:22.300>new <00:00:22.637>web <00:00:22.975>developer.

4
00:00:24.385 --> 00:00:26.915
<00:00:24.385>This <00:00:24.560>is <00:00:24.735>the <00:00:24.910>agenda <00:00:25.085>that <00:00:25.260>I <00:00:25.435>prepared <00:00:25.610>for <00:00:25.785>today.

5
00:00:27.215 --> 00:00:29.835
<00:00:27.215>At <00:00:27.370>first, <00:00:27.526>I <00:00:27.681>will <00:00:27.837>give <00:00:27.992>a <00:00:28.148>small <00:00:28.303>personal <00:00:28.459>introduction <00:00:28.615>so

6
00:00:29.835 --> 00:00:31.595
<00:00:29.835>that <00:00:30.010>you <00:00:30.185>know <00:00:30.360>the <00:00:30.535>background <00:00:30.710>that <00:00:30.885>I'm <00:00:31.060>coming <00:00:31.235>from.

7
00:00:32.275 --> 00:00:35.075
<00:00:32.275>I <00:00:32.449>will <00:00:32.625>continue <00:00:32.800>with <00:00:32.975>explaining <00:00:33.150>basically <00:00:33.324>what <00:00:33.500>is <00:00:33.675>sel,

8
00:00:35.135 --> 00:00:37.795
<00:00:35.135>so <00:00:35.275>also <00:00:35.415>for <00:00:35.555>our <00:00:35.695>new <00:00:35.835>base <00:00:35.974>that <00:00:36.114>they <00:00:36.254>know <00:00:36.394>what's <00:00:36.535>up.

9
00:00:38.715 --> 00:00:40.715
<00:00:38.715>I <00:00:38.915>will <00:00:39.115>continue <00:00:39.315>with <00:00:39.515>the <00:00:39.715>timeline <00:00:39.915>of <00:00:40.115>selt

10
00:00:40.715 --> 00:00:43.075
<00:00:40.715>and <00:00:40.855>like <00:00:40.995>a <00:00:41.135>little <00:00:41.275>bit <00:00:41.415>of <00:00:41.555>a <00:00:41.695>history <00:00:41.835>about <00:00:41.975>why <00:00:42.115>the

11
00:00:43.075 --> 00:00:44.155
<00:00:43.075>framework <00:00:43.561>was <00:00:44.047>created.

12
00:00:45.155 --> 00:00:48.155
<00:00:45.155>I <00:00:45.310>will <00:00:45.466>also <00:00:45.621>explain <00:00:45.777>to <00:00:45.932>you <00:00:46.088>how <00:00:46.243>I <00:00:46.399>discovered <00:00:46.555>SELT

13
00:00:48.155 --> 00:00:49.155
<00:00:48.155>and <00:00:48.380>why <00:00:48.605>I'm <00:00:48.830>using <00:00:49.055>it.

14
00:00:49.925 --> 00:00:52.095
<00:00:49.925>Then <00:00:50.158>there <00:00:50.391>will <00:00:50.625>be <00:00:50.858>the <00:00:51.091>coding <00:00:51.324>part,

15
00:00:52.115 --> 00:00:54.455
<00:00:52.115>and <00:00:52.270>I <00:00:52.426>will, <00:00:52.581>I <00:00:52.737>will <00:00:52.892>showcase <00:00:53.048>some <00:00:53.203>examples <00:00:53.359>to <00:00:53.515>you.

16
00:00:55.715 --> 00:00:58.815
<00:00:55.715>Um, <00:00:55.842>then <00:00:55.969>I <00:00:56.096>will <00:00:56.224>not <00:00:56.351>only <00:00:56.478>want <00:00:56.605>to <00:00:56.733>show <00:00:56.860>you <00:00:56.987>the <00:00:57.115>pros,

17
00:00:58.815 --> 00:01:00.095
<00:00:58.815>but <00:00:59.199>also <00:00:59.583>the <00:00:59.967>considerations

18
00:01:00.115 --> 00:01:02.695
<00:01:00.115>and <00:01:00.255>the <00:01:00.395>cons <00:01:00.535>that <00:01:00.675>you <00:01:00.815>have <00:01:00.955>to <00:01:01.095>know <00:01:01.235>if <00:01:01.375>you <00:01:01.515>decide,

19
00:01:02.875 --> 00:01:04.015
<00:01:02.875>uh, <00:01:03.388>using <00:01:03.901>selt.

20
00:01:04.965 --> 00:01:07.105
<00:01:04.965>Um, <00:01:05.315>afterwards <00:01:05.665>I <00:01:06.015>will <00:01:06.365>explain

21
00:01:07.455 --> 00:01:09.985
<00:01:07.455>what <00:01:07.688>my <00:01:07.921>recommended <00:01:08.155>tech <00:01:08.388>stack <00:01:08.621>currently <00:01:08.855>is

22
00:01:10.085 --> 00:01:11.825
<00:01:10.085>for <00:01:10.318>when <00:01:10.551>you <00:01:10.785>decide <00:01:11.018>to <00:01:11.251>use <00:01:11.485>sel.

23
00:01:12.895 --> 00:01:15.735
<00:01:12.895>I <00:01:13.128>will <00:01:13.361>list <00:01:13.595>some <00:01:13.828>big <00:01:14.061>name <00:01:14.295>companies

24
00:01:15.735 --> 00:01:17.895
<00:01:15.735>that <00:01:15.935>are <00:01:16.135>currently <00:01:16.335>using <00:01:16.535>s <00:01:16.735>SW <00:01:16.935>in <00:01:17.135>production.

25
00:01:18.635 --> 00:01:21.215
<00:01:18.635>And <00:01:18.775>last <00:01:18.915>but <00:01:19.055>not <00:01:19.195>least, <00:01:19.335>I <00:01:19.475>will <00:01:19.615>talk <00:01:19.755>about <00:01:19.895>the <00:01:20.035>future

26
00:01:21.275 --> 00:01:24.815
<00:01:21.275>of <00:01:21.391>swell <00:01:21.508>that <00:01:21.625>I, <00:01:21.741>that <00:01:21.858>I <00:01:21.975>see <00:01:22.091>and <00:01:22.208>also <00:01:22.325>give <00:01:22.441>you <00:01:22.558>a <00:01:22.675>conclusion.

27
00:01:26.715 --> 00:01:27.855
<00:01:26.715>So <00:01:27.057>I'm <00:01:27.399>currently <00:01:27.741>working

28
00:01:27.955 --> 00:01:29.895
<00:01:27.955>as <00:01:28.188>a <00:01:28.421>freelance <00:01:28.655>full <00:01:28.888>stack <00:01:29.121>web <00:01:29.355>developer.

29
00:01:30.095 --> 00:01:32.255
<00:01:30.095>I <00:01:30.295>have <00:01:30.495>about <00:01:30.695>five <00:01:30.895>years <00:01:31.095>of <00:01:31.295>coding <00:01:31.495>experience.

30
00:01:32.955 --> 00:01:35.895
<00:01:32.955>Um, <00:01:33.188>I'm <00:01:33.421>interested <00:01:33.655>in <00:01:33.888>topics <00:01:34.121>like <00:01:34.355>performance,

31
00:01:35.895 --> 00:01:38.535
<00:01:35.895>modern <00:01:36.175>tooling, <00:01:36.455>code <00:01:36.735>quality <00:01:37.015>and <00:01:37.295>accessibility.

32
00:01:39.735 --> 00:01:42.535
<00:01:39.735>Whenever <00:01:39.875>I <00:01:40.015>find <00:01:40.155>time, <00:01:40.295>I <00:01:40.435>will <00:01:40.575>also <00:01:40.715>do <00:01:40.855>some <00:01:40.995>open <00:01:41.135>source

33
00:01:42.895 --> 00:01:44.175
<00:01:42.895>contribution <00:01:44.047>contributions.

34
00:01:44.275 --> 00:01:45.895
<00:01:44.275>And <00:01:44.508>in <00:01:44.741>the <00:01:44.975>past <00:01:45.208>I <00:01:45.441>wrote <00:01:45.675>code

35
00:01:45.955 --> 00:01:49.135
<00:01:45.955>for <00:01:46.235>libraries <00:01:46.515>from <00:01:46.795>Microsoft <00:01:47.075>React <00:01:47.355>boilerplate,

36
00:01:49.255 --> 00:01:50.375
<00:01:49.255>Ethereum, <00:01:49.759>or <00:01:50.263>Sweat.

37
00:01:51.385 --> 00:01:54.285
<00:01:51.384>Um, <00:01:51.585>technically <00:01:51.785>writing <00:01:51.984>is <00:01:52.184>another <00:01:52.384>passion <00:01:52.585>of <00:01:52.785>mine,

38
00:01:54.345 --> 00:01:56.765
<00:01:54.345>and <00:01:54.545>I <00:01:54.745>published <00:01:54.945>some <00:01:55.145>articles <00:01:55.345>that <00:01:55.545>were, <00:01:55.745>um,

39
00:01:57.345 --> 00:02:00.685
<00:01:57.345>pub <00:01:57.545>also <00:01:57.745>released <00:01:57.945>in <00:01:58.145>publications <00:01:58.345>like <00:01:58.545>Free <00:01:58.745>CODEcamp,

40
00:02:00.755 --> 00:02:01.845
<00:02:00.755>HackerOne <00:02:01.245>or <00:02:01.736>Medium.

41
00:02:02.785 --> 00:02:05.125
<00:02:02.785>And <00:02:02.985>so <00:02:03.185>that, <00:02:03.384>you <00:02:03.585>know, <00:02:03.785>the <00:02:03.985>frontend <00:02:04.185>technologies

42
00:02:05.125 --> 00:02:06.165
<00:02:05.125>that <00:02:05.437>I <00:02:05.749>tried <00:02:06.061>before.

43
00:02:06.305 --> 00:02:10.125
<00:02:06.305>So, <00:02:06.505>um, <00:02:06.705>I <00:02:06.905>worked <00:02:07.105>with <00:02:07.305>RY <00:02:07.505>before <00:02:07.705>then.

44
00:02:10.245 --> 00:02:13.845
<00:02:10.245>I, <00:02:10.445>uh, <00:02:10.645>then <00:02:10.845>I <00:02:11.045>continued <00:02:11.245>with <00:02:11.445>Mi <00:02:11.645>MiFis.

45
00:02:14.525 --> 00:02:17.245
<00:02:14.525>I <00:02:14.725>worked <00:02:14.925>with <00:02:15.125>React <00:02:15.325>already <00:02:15.525>back <00:02:15.725>in <00:02:15.925>2016.

46
00:02:17.395 --> 00:02:19.285
<00:02:17.395>Then <00:02:17.745>I <00:02:18.095>transitioned <00:02:18.445>to <00:02:18.795>Angular.

47
00:02:19.885 --> 00:02:22.285
<00:02:19.885>I <00:02:20.060>had <00:02:20.234>some <00:02:20.410>short <00:02:20.584>projects <00:02:20.760>that <00:02:20.935>I <00:02:21.109>did <00:02:21.285>for

48
00:02:22.755 --> 00:02:24.365
<00:02:22.755>with <00:02:23.105>React <00:02:23.454>Native <00:02:23.805>and <00:02:24.155>View.

49
00:02:24.825 --> 00:02:27.685
<00:02:24.825>And <00:02:24.980>now <00:02:25.136>finally <00:02:25.291>I'm <00:02:25.447>working <00:02:25.602>mainly <00:02:25.758>with <00:02:25.913>Gatsby <00:02:26.069>and <00:02:26.225>sw.

50
00:02:30.075 --> 00:02:31.735
<00:02:30.075>So <00:02:30.424>what <00:02:30.774>even <00:02:31.125>is <00:02:31.475>swell?

51
00:02:32.075 --> 00:02:34.255
<00:02:32.075>Um, <00:02:32.355>it's <00:02:32.635>actually <00:02:32.915>a <00:02:33.195>frontend <00:02:33.475>framework.

52
00:02:34.255 --> 00:02:37.095
<00:02:34.255>So <00:02:34.410>it's <00:02:34.566>really <00:02:34.721>just <00:02:34.877>a <00:02:35.032>frontend <00:02:35.188>layer, <00:02:35.343>same <00:02:35.499>like <00:02:35.655>react,

53
00:02:37.095 --> 00:02:38.535
<00:02:37.095>only <00:02:37.354>a <00:02:37.613>frontend <00:02:37.872>layer <00:02:38.131>of <00:02:38.391>view.

54
00:02:39.195 --> 00:02:42.295
<00:02:39.195>And <00:02:39.428>it's <00:02:39.661>spec <00:02:39.894>specifically <00:02:40.128>easy <00:02:40.361>to <00:02:40.595>learn

55
00:02:42.295 --> 00:02:44.295
<00:02:42.295>because <00:02:42.575>you <00:02:42.855>have <00:02:43.135>H, <00:02:43.415>tm, <00:02:43.695>LCSS

56
00:02:44.295 --> 00:02:46.375
<00:02:44.295>and <00:02:44.575>JavaScript <00:02:44.855>in <00:02:45.135>a <00:02:45.415>single <00:02:45.695>file.

57
00:02:46.955 --> 00:02:49.095
<00:02:46.954>And <00:02:47.154>there's <00:02:47.355>not <00:02:47.554>many <00:02:47.755>new <00:02:47.954>concepts <00:02:48.154>to <00:02:48.355>learn.

58
00:02:49.275 --> 00:02:51.215
<00:02:49.275>The <00:02:49.475>only <00:02:49.675>real <00:02:49.875>concept <00:02:50.075>that <00:02:50.275>I <00:02:50.475>could <00:02:50.675>think

59
00:02:51.215 --> 00:02:54.455
<00:02:51.215>of <00:02:51.415>is <00:02:51.615>reactive <00:02:51.815>declarations <00:02:52.015>with <00:02:52.215>the <00:02:52.415>dollar <00:02:52.615>tag.

60
00:02:54.995 --> 00:02:57.615
<00:02:54.995>Um, <00:02:55.122>later <00:02:55.249>on <00:02:55.376>I <00:02:55.504>will <00:02:55.631>show <00:02:55.758>some <00:02:55.885>code <00:02:56.013>examples <00:02:56.140>that <00:02:56.267>you <00:02:56.395>know

61
00:02:57.615 --> 00:03:01.585
<00:02:57.615>what <00:02:57.815>I'm <00:02:58.015>talking <00:02:58.215>about, <00:02:58.415>about, <00:02:58.615>um, <00:02:58.815>uh, <00:02:59.015>compared

62
00:03:01.605 --> 00:03:04.545
<00:03:01.605>to <00:03:01.838>other <00:03:02.071>frameworks <00:03:02.304>like <00:03:02.538>Angular, <00:03:02.771>um, <00:03:03.005>view

63
00:03:04.565 --> 00:03:07.265
<00:03:04.565>and <00:03:04.765>React, <00:03:04.965>we <00:03:05.165>don't <00:03:05.365>have <00:03:05.565>any <00:03:05.765>virtual <00:03:05.965>dorm.

64
00:03:07.325 --> 00:03:11.505
<00:03:07.325>And <00:03:07.452>the, <00:03:07.579>the <00:03:07.706>main <00:03:07.834>selling <00:03:07.961>point <00:03:08.088>of <00:03:08.215>is <00:03:08.343>that <00:03:08.470>it <00:03:08.597>gets <00:03:08.725>compiled

65
00:03:11.505 --> 00:03:13.505
<00:03:11.505>to <00:03:11.855>framework <00:03:12.204>less <00:03:12.555>vanilla, <00:03:12.905>JavaScript.

66
00:03:14.245 --> 00:03:15.855
<00:03:14.245>This <00:03:14.711>is <00:03:15.178>really <00:03:15.645>practical

67
00:03:15.855 --> 00:03:19.255
<00:03:15.855>and, <00:03:16.054>um, <00:03:16.255>a <00:03:16.454>great, <00:03:16.655>um, <00:03:16.855>a <00:03:17.054>great <00:03:17.255>thing

68
00:03:19.255 --> 00:03:22.375
<00:03:19.255>because <00:03:19.605>it's, <00:03:19.954>uh, <00:03:20.305>absolutely <00:03:20.655>necessary

69
00:03:22.475 --> 00:03:23.855
<00:03:22.475>for <00:03:22.888>a <00:03:23.303>great <00:03:23.716>performance.

70
00:03:23.875 --> 00:03:27.215
<00:03:23.875>And <00:03:24.015>since <00:03:24.155>it's <00:03:24.295>using <00:03:24.435>a <00:03:24.575>compiler, <00:03:24.715>we <00:03:24.855>can <00:03:24.995>always <00:03:25.135>be <00:03:25.275>sure

71
00:03:27.215 --> 00:03:30.175
<00:03:27.215>that <00:03:27.415>it's <00:03:27.615>also, <00:03:27.815>um, <00:03:28.015>an <00:03:28.215>optimized <00:03:28.415>bundle <00:03:28.615>size.

72
00:03:31.515 --> 00:03:34.295
<00:03:31.515>And <00:03:31.714>swell <00:03:31.915>is <00:03:32.114>all <00:03:32.315>about <00:03:32.515>riding <00:03:32.714>less <00:03:32.915>code

73
00:03:34.295 --> 00:03:36.695
<00:03:34.295>and <00:03:34.495>removing <00:03:34.695>the <00:03:34.895>boiler <00:03:35.095>platy <00:03:35.295>parts <00:03:35.495>of <00:03:35.695>it.

74
00:03:37.475 --> 00:03:41.415
<00:03:37.475>And <00:03:37.614>so <00:03:37.755>I <00:03:37.894>will <00:03:38.035>show <00:03:38.174>you <00:03:38.315>an <00:03:38.454>articulate <00:03:38.595>by <00:03:38.734>Rich <00:03:38.875>Harris

75
00:03:41.555 --> 00:03:42.855
<00:03:41.555>who <00:03:41.789>is <00:03:42.023>the <00:03:42.257>creator <00:03:42.491>of <00:03:42.725>sel,

76
00:03:43.515 --> 00:03:46.335
<00:03:43.515>and <00:03:43.690>he's <00:03:43.864>talking <00:03:44.040>about <00:03:44.214>reducing <00:03:44.390>the <00:03:44.565>amount <00:03:44.739>of <00:03:44.915>code

77
00:03:46.335 --> 00:03:49.455
<00:03:46.335>that <00:03:46.462>you <00:03:46.589>have <00:03:46.716>to <00:03:46.844>write <00:03:46.971>is <00:03:47.098>an <00:03:47.225>explicit <00:03:47.353>goal <00:03:47.480>of <00:03:47.607>S <00:03:47.735>sw.

78
00:03:49.915 --> 00:03:53.535
<00:03:49.915>And <00:03:50.042>here <00:03:50.169>you <00:03:50.296>can <00:03:50.424>already <00:03:50.551>see <00:03:50.678>this <00:03:50.805>is <00:03:50.933>a <00:03:51.060>small <00:03:51.187>SEL <00:03:51.315>file

79
00:03:54.355 --> 00:03:55.935
<00:03:54.355>and <00:03:54.821>a <00:03:55.288>small <00:03:55.755>component.

80
00:03:56.875 --> 00:03:59.335
<00:03:56.875>So <00:03:57.030>here, <00:03:57.186>up <00:03:57.341>there <00:03:57.497>we <00:03:57.652>would <00:03:57.808>have <00:03:57.963>the <00:03:58.119>script <00:03:58.275>part

81
00:03:59.335 --> 00:04:00.815
<00:03:59.335>where <00:03:59.601>you <00:03:59.867>could <00:04:00.134>write <00:04:00.400>your <00:04:00.667>variables

82
00:04:00.815 --> 00:04:02.335
<00:04:00.815>and <00:04:01.157>your <00:04:01.499>custom <00:04:01.841>business <00:04:02.183>logic

83
00:04:02.915 --> 00:04:05.935
<00:04:02.915>and <00:04:03.070>below <00:04:03.226>it, <00:04:03.381>in <00:04:03.537>this <00:04:03.692>case <00:04:03.848>we <00:04:04.003>have <00:04:04.159>our <00:04:04.315>templating

84
00:04:05.935 --> 00:04:07.175
<00:04:05.935>or <00:04:06.493>our <00:04:07.051>HTML.

85
00:04:07.835 --> 00:04:10.255
<00:04:07.835>And <00:04:08.035>you <00:04:08.235>can <00:04:08.435>see <00:04:08.635>that <00:04:08.835>we <00:04:09.035>have, <00:04:09.235>um,

86
00:04:10.675 --> 00:04:12.935
<00:04:10.675>we <00:04:11.025>have <00:04:11.375>a <00:04:11.725>calculator <00:04:12.075>example

87
00:04:13.485 --> 00:04:15.815
<00:04:13.485>written <00:04:13.718>in <00:04:13.951>only <00:04:14.185>nine <00:04:14.418>lines <00:04:14.651>of <00:04:14.885>code.

88
00:04:16.755 --> 00:04:19.895
<00:04:16.755>Um, <00:04:16.910>one <00:04:17.066>thing <00:04:17.221>that <00:04:17.377>is <00:04:17.532>special <00:04:17.688>about, <00:04:17.843>about <00:04:17.999>here <00:04:18.154>is

89
00:04:19.895 --> 00:04:22.495
<00:04:19.894>that <00:04:20.050>in <00:04:20.206>our <00:04:20.361>input <00:04:20.517>type <00:04:20.672>number, <00:04:20.828>we <00:04:20.983>bind <00:04:21.139>the <00:04:21.294>value

90
00:04:23.035 --> 00:04:26.095
<00:04:23.035>and <00:04:23.210>it's <00:04:23.385>implicitly, <00:04:23.560>uh, <00:04:23.735>coercing <00:04:23.910>it <00:04:24.085>to <00:04:24.260>a <00:04:24.435>number.

91
00:04:26.235 --> 00:04:28.415
<00:04:26.235>So <00:04:26.390>usually <00:04:26.546>we <00:04:26.701>would <00:04:26.857>get <00:04:27.012>a <00:04:27.168>string <00:04:27.323>that <00:04:27.479>we <00:04:27.635>have

92
00:04:28.415 --> 00:04:30.575
<00:04:28.415>to <00:04:28.615>convert <00:04:28.815>ourselves, <00:04:29.015>but <00:04:29.215>sweat <00:04:29.415>in <00:04:29.615>this <00:04:29.815>case

93
00:04:30.575 --> 00:04:31.735
<00:04:30.575>is <00:04:30.836>handing <00:04:31.097>this <00:04:31.358>for <00:04:31.619>us.

94
00:04:33.565 --> 00:04:37.015
<00:04:33.565>Then <00:04:33.720>which <00:04:33.876>areas <00:04:34.031>goes <00:04:34.187>on <00:04:34.342>to <00:04:34.498>compare <00:04:34.653>his <00:04:34.809>swell <00:04:34.965>example

95
00:04:37.155 --> 00:04:40.055
<00:04:37.155>to <00:04:37.310>a <00:04:37.466>React <00:04:37.621>component <00:04:37.777>that <00:04:37.932>does <00:04:38.088>the <00:04:38.243>exact <00:04:38.399>same <00:04:38.554>thing.

96
00:04:40.475 --> 00:04:42.215
<00:04:40.475>And <00:04:40.708>we <00:04:40.941>can <00:04:41.175>already <00:04:41.408>see <00:04:41.641>up <00:04:41.875>here

97
00:04:42.285 --> 00:04:44.735
<00:04:42.284>that <00:04:42.518>there <00:04:42.751>is <00:04:42.984>an <00:04:43.218>import <00:04:43.451>react <00:04:43.684>necessary,

98
00:04:44.835 --> 00:04:48.335
<00:04:44.835>and <00:04:44.951>also <00:04:45.068>we <00:04:45.185>need <00:04:45.301>to <00:04:45.418>import <00:04:45.534>the <00:04:45.651>use <00:04:45.768>state <00:04:45.885>hook <00:04:46.001>to <00:04:46.118>be <00:04:46.234>able

99
00:04:48.335 --> 00:04:49.775
<00:04:48.335>to <00:04:48.767>even <00:04:49.198>set <00:04:49.631>state.

100
00:04:50.475 --> 00:04:53.335
<00:04:50.475>So <00:04:50.650>this <00:04:50.825>is <00:04:51.000>not <00:04:51.175>necessary <00:04:51.350>for <00:04:51.525>swell <00:04:51.700>at <00:04:51.875>all.

101
00:04:54.275 --> 00:04:57.615
<00:04:54.275>Yes, <00:04:54.414>I <00:04:54.554>know <00:04:54.695>with <00:04:54.835>React <00:04:54.974>17, <00:04:55.114>this <00:04:55.255>is <00:04:55.395>actually <00:04:55.534>now <00:04:55.674>optional,

102
00:04:57.675 --> 00:04:59.415
<00:04:57.675>so <00:04:57.850>you <00:04:58.025>don't <00:04:58.200>have <00:04:58.375>to <00:04:58.550>declare <00:04:58.725>this, <00:04:58.900>which <00:04:59.075>is,

103
00:04:59.415 --> 00:05:00.695
<00:04:59.415>which <00:04:59.645>is <00:04:59.875>a <00:05:00.106>big <00:05:00.336>step <00:05:00.567>forward.

104
00:05:01.775 --> 00:05:03.555
<00:05:01.775>The <00:05:01.930>next <00:05:02.086>part <00:05:02.241>that <00:05:02.397>we <00:05:02.552>see <00:05:02.708>is <00:05:02.863>that <00:05:03.019>we <00:05:03.174>need

105
00:05:03.555 --> 00:05:06.275
<00:05:03.555>to <00:05:03.755>export <00:05:03.955>default <00:05:04.155>the <00:05:04.355>component <00:05:04.555>to <00:05:04.755>be <00:05:04.955>able

106
00:05:06.275 --> 00:05:08.075
<00:05:06.275>to <00:05:06.554>import <00:05:06.835>it <00:05:07.114>in <00:05:07.395>other <00:05:07.674>components.

107
00:05:08.745 --> 00:05:10.955
<00:05:08.745>This <00:05:08.978>is <00:05:09.211>also <00:05:09.445>not <00:05:09.678>necessary <00:05:09.911>with <00:05:10.145>swell

108
00:05:10.955 --> 00:05:14.155
<00:05:10.955>because <00:05:11.155>it <00:05:11.354>automatically <00:05:11.555>gets <00:05:11.755>exported <00:05:11.955>as <00:05:12.155>a <00:05:12.354>default

109
00:05:14.415 --> 00:05:16.275
<00:05:14.415>and <00:05:14.590>you <00:05:14.765>can <00:05:14.940>import <00:05:15.115>it <00:05:15.290>wherever <00:05:15.465>you <00:05:15.640>need <00:05:15.815>it.

110
00:05:17.305 --> 00:05:20.075
<00:05:17.305>Then <00:05:17.445>we <00:05:17.585>see <00:05:17.725>we <00:05:17.865>have <00:05:18.005>to <00:05:18.145>use <00:05:18.285>the <00:05:18.425>use <00:05:18.565>state <00:05:18.705>hook,

111
00:05:20.135 --> 00:05:22.635
<00:05:20.135>and <00:05:20.335>it's <00:05:20.534>not <00:05:20.735>a <00:05:20.935>nice <00:05:21.135>syntax <00:05:21.335>to <00:05:21.534>write,

112
00:05:23.795 --> 00:05:26.175
<00:05:23.795>and <00:05:23.995>we <00:05:24.195>need <00:05:24.395>some <00:05:24.595>functions <00:05:24.795>on <00:05:24.995>some <00:05:25.195>methods

113
00:05:26.525 --> 00:05:29.095
<00:05:26.525>that <00:05:26.700>we <00:05:26.875>can <00:05:27.049>use <00:05:27.224>in <00:05:27.400>our <00:05:27.575>own <00:05:27.750>change <00:05:27.924>handler

114
00:05:29.595 --> 00:05:32.175
<00:05:29.595>to <00:05:29.828>even <00:05:30.061>update <00:05:30.295>the, <00:05:30.528>the <00:05:30.761>number <00:05:30.995>values.

115
00:05:32.875 --> 00:05:35.695
<00:05:32.875>And <00:05:33.002>on <00:05:33.129>top <00:05:33.256>of <00:05:33.384>that, <00:05:33.511>we <00:05:33.638>also <00:05:33.765>need <00:05:33.893>to <00:05:34.020>co <00:05:34.147>it <00:05:34.275>here

116
00:05:35.755 --> 00:05:37.535
<00:05:35.755>to <00:05:35.955>be <00:05:36.155>a <00:05:36.355>number <00:05:36.555>instead <00:05:36.755>of <00:05:36.955>a <00:05:37.155>string.

117
00:05:38.825 --> 00:05:40.485
<00:05:38.825>And <00:05:39.058>last <00:05:39.291>but <00:05:39.525>not <00:05:39.758>least, <00:05:39.991>we <00:05:40.224>need

118
00:05:40.485 --> 00:05:44.845
<00:05:40.485>to <00:05:40.625>also <00:05:40.765>return <00:05:40.905>the <00:05:41.045>actual <00:05:41.185>HTML <00:05:41.325>template <00:05:41.465>part <00:05:41.605>to <00:05:41.745>be <00:05:41.885>usable.

119
00:05:46.265 --> 00:05:49.485
<00:05:46.265>Um, <00:05:46.440>then <00:05:46.615>which <00:05:46.789>Harris <00:05:46.965>also <00:05:47.140>explains <00:05:47.315>the <00:05:47.490>view <00:05:47.664>equivalent.

120
00:05:49.585 --> 00:05:50.725
<00:05:49.585>So <00:05:49.927>in <00:05:50.269>this <00:05:50.611>case,

121
00:05:50.945 --> 00:05:53.405
<00:05:50.945>we <00:05:51.100>see <00:05:51.256>it's <00:05:51.411>a <00:05:51.567>bit <00:05:51.722>shorter <00:05:51.878>than <00:05:52.033>the <00:05:52.189>react <00:05:52.344>part.

122
00:05:53.745 --> 00:05:55.085
<00:05:53.745>We <00:05:53.986>don't <00:05:54.227>need <00:05:54.468>to <00:05:54.709>import <00:05:54.950>anything,

123
00:05:55.545 --> 00:05:58.365
<00:05:55.545>but <00:05:55.720>here <00:05:55.895>we <00:05:56.070>need <00:05:56.245>to <00:05:56.420>declare <00:05:56.595>a <00:05:56.770>template <00:05:56.945>tag

124
00:05:58.425 --> 00:06:00.845
<00:05:58.425>around <00:05:58.658>the <00:05:58.891>actual <00:05:59.125>template <00:05:59.358>that <00:05:59.591>we're <00:05:59.825>writing.

125
00:06:01.465 --> 00:06:04.685
<00:06:01.465>So <00:06:01.592>this <00:06:01.719>is, <00:06:01.846>could <00:06:01.974>be, <00:06:02.101>could <00:06:02.228>be <00:06:02.355>a <00:06:02.483>sign <00:06:02.610>of <00:06:02.737>boiler <00:06:02.864>plate,

126
00:06:04.945 --> 00:06:07.405
<00:06:04.945>and <00:06:05.085>we <00:06:05.224>also <00:06:05.365>have <00:06:05.505>to <00:06:05.645>have <00:06:05.784>a <00:06:05.925>root <00:06:06.065>node <00:06:06.205>where <00:06:06.344>all

127
00:06:07.405 --> 00:06:09.045
<00:06:07.405>of <00:06:07.755>our <00:06:08.104>content <00:06:08.455>is <00:06:08.804>inside.

128
00:06:09.745 --> 00:06:11.765
<00:06:09.745>One. <00:06:09.978>One <00:06:10.211>great <00:06:10.445>advantage <00:06:10.678>of <00:06:10.911>view <00:06:11.145>is

129
00:06:11.765 --> 00:06:14.685
<00:06:11.765>that <00:06:11.965>we <00:06:12.164>have <00:06:12.365>the <00:06:12.565>DOT <00:06:12.765>number, <00:06:12.965>uh, <00:06:13.164>which

130
00:06:15.195 --> 00:06:17.725
<00:06:15.195>also <00:06:15.395>automatically <00:06:15.594>corrects <00:06:15.795>it <00:06:15.995>our <00:06:16.195>to <00:06:16.395>our <00:06:16.594>number.

131
00:06:18.425 --> 00:06:20.725
<00:06:18.425>But <00:06:18.580>in <00:06:18.736>this <00:06:18.891>case <00:06:19.047>we <00:06:19.202>have <00:06:19.358>the <00:06:19.513>double <00:06:19.669>curls <00:06:19.825>instead

132
00:06:20.725 --> 00:06:22.325
<00:06:20.725>of <00:06:20.958>single <00:06:21.191>curls, <00:06:21.425>which <00:06:21.658>makes <00:06:21.891>it <00:06:22.125>again,

133
00:06:22.405 --> 00:06:23.645
<00:06:22.405>a <00:06:22.683>bit <00:06:22.962>more <00:06:23.241>boiler <00:06:23.520>Platy.

134
00:06:24.865 --> 00:06:26.685
<00:06:24.865>And <00:06:25.098>below <00:06:25.331>here <00:06:25.565>we <00:06:25.798>have <00:06:26.031>our <00:06:26.265>script

135
00:06:26.865 --> 00:06:30.125
<00:06:26.865>and <00:06:27.020>we <00:06:27.176>have <00:06:27.331>our <00:06:27.487>declaration <00:06:27.642>of <00:06:27.798>our <00:06:27.953>availables, <00:06:28.109>which <00:06:28.265>is

136
00:06:30.715 --> 00:06:32.445
<00:06:30.715>also <00:06:31.065>not <00:06:31.414>the <00:06:31.765>nicest <00:06:32.114>syntax.

137
00:06:32.445 --> 00:06:35.405
<00:06:32.445>Like <00:06:32.572>if <00:06:32.699>you <00:06:32.826>have <00:06:32.954>to <00:06:33.081>write <00:06:33.208>this, <00:06:33.335>um, <00:06:33.463>out <00:06:33.590>of <00:06:33.717>your <00:06:33.844>head,

138
00:06:35.825 --> 00:06:37.805
<00:06:35.825>you <00:06:36.000>might <00:06:36.175>make <00:06:36.349>a <00:06:36.525>syntax <00:06:36.700>error <00:06:36.875>here <00:06:37.050>or <00:06:37.224>there.

139
00:06:38.755 --> 00:06:41.485
<00:06:38.755>Yeah, <00:06:38.930>so, <00:06:39.105>uh, <00:06:39.280>rich <00:06:39.455>Harris <00:06:39.630>goes <00:06:39.805>on <00:06:39.980>to <00:06:40.155>explain

140
00:06:41.665 --> 00:06:44.565
<00:06:41.665>how <00:06:41.865>many <00:06:42.065>characters <00:06:42.265>each <00:06:42.465>of <00:06:42.665>the <00:06:42.865>frameworks <00:06:43.065>need,

141
00:06:44.585 --> 00:06:46.325
<00:06:44.585>and <00:06:44.864>he's <00:06:45.145>explaining <00:06:45.424>that <00:06:45.705>React <00:06:45.984>is

142
00:06:46.355 --> 00:06:47.765
<00:06:46.355>literally <00:06:46.778>three <00:06:47.201>times <00:06:47.623>larger.

143
00:06:47.825 --> 00:06:49.485
<00:06:47.825>So <00:06:48.025>it's <00:06:48.224>always, <00:06:48.425>it's <00:06:48.625>always <00:06:48.825>kind <00:06:49.025>of <00:06:49.224>a,

144
00:06:49.725 --> 00:06:52.485
<00:06:49.725>a <00:06:50.005>framework <00:06:50.285>fight <00:06:50.565>for <00:06:50.845>the <00:06:51.125>creator.

145
00:06:53.265 --> 00:06:54.685
<00:06:53.265>Um, <00:06:53.478>and <00:06:53.691>it's <00:06:53.904>a <00:06:54.117>really <00:06:54.330>good <00:06:54.543>article,

146
00:06:54.825 --> 00:06:56.405
<00:06:54.825>so <00:06:55.058>I <00:06:55.291>linked <00:06:55.525>it <00:06:55.758>in <00:06:55.991>the <00:06:56.224>presentation

147
00:06:56.405 --> 00:06:58.725
<00:06:56.405>and <00:06:56.560>you <00:06:56.716>can <00:06:56.871>also <00:06:57.027>check <00:06:57.182>it <00:06:57.338>out <00:06:57.493>yourself <00:06:57.649>later <00:06:57.804>on.

148
00:07:00.705 --> 00:07:03.765
<00:07:00.705>So <00:07:00.984>for <00:07:01.265>me, <00:07:01.544>it's <00:07:01.825>really <00:07:02.104>simple.

149
00:07:04.065 --> 00:07:06.845
<00:07:04.065>For <00:07:04.220>me, <00:07:04.376>swell <00:07:04.531>is <00:07:04.687>the <00:07:04.842>next <00:07:04.998>evolutionary <00:07:05.153>step <00:07:05.309>in <00:07:05.465>front.

150
00:07:06.845 --> 00:07:09.525
<00:07:06.845>And <00:07:07.045>JavaScript <00:07:07.245>frameworks, <00:07:07.445>like <00:07:07.645>I <00:07:07.845>explained <00:07:08.045>to <00:07:08.245>you

151
00:07:09.525 --> 00:07:11.525
<00:07:09.525>before, <00:07:09.700>I <00:07:09.875>kind <00:07:10.049>of <00:07:10.224>worked <00:07:10.400>with <00:07:10.575>all <00:07:10.750>of <00:07:10.924>them

152
00:07:11.665 --> 00:07:13.645
<00:07:11.665>and <00:07:11.898>went <00:07:12.131>from <00:07:12.365>one <00:07:12.598>to <00:07:12.831>the <00:07:13.065>next.

153
00:07:13.745 --> 00:07:18.005
<00:07:13.745>And <00:07:13.900>this <00:07:14.056>is <00:07:14.211>now <00:07:14.367>I <00:07:14.522>think <00:07:14.678>the <00:07:14.833>most <00:07:14.989>optimized <00:07:15.145>framework

154
00:07:18.005 --> 00:07:20.165
<00:07:18.005>that <00:07:18.284>has <00:07:18.565>a <00:07:18.844>great <00:07:19.125>developer <00:07:19.405>experience.

155
00:07:22.585 --> 00:07:24.005
<00:07:22.585>So <00:07:22.904>this <00:07:23.224>is <00:07:23.543>the <00:07:23.863>timeline.

156
00:07:24.385 --> 00:07:26.685
<00:07:24.385>So <00:07:24.540>I <00:07:24.696>already <00:07:24.851>said <00:07:25.007>which <00:07:25.162>Harris <00:07:25.318>was <00:07:25.473>the <00:07:25.629>creator <00:07:25.784>of

157
00:07:27.425 --> 00:07:29.245
<00:07:27.425>is <00:07:27.705>also <00:07:27.985>the <00:07:28.265>creative <00:07:28.545>of <00:07:28.825>Rollup,

158
00:07:29.245 --> 00:07:30.965
<00:07:29.245>which <00:07:29.478>is <00:07:29.711>like <00:07:29.945>an <00:07:30.178>alternative <00:07:30.411>to <00:07:30.645>backpack.

159
00:07:31.585 --> 00:07:36.485
<00:07:31.585>And <00:07:31.712>his <00:07:31.839>initial <00:07:31.966>use <00:07:32.094>case <00:07:32.221>for <00:07:32.348>Swell <00:07:32.475>was <00:07:32.603>that <00:07:32.730>he's, <00:07:32.857>he <00:07:32.984>is,

160
00:07:36.485 --> 00:07:37.725
<00:07:36.485>uh, <00:07:36.708>working <00:07:36.931>at <00:07:37.154>New <00:07:37.377>York <00:07:37.601>Times

161
00:07:37.785 --> 00:07:39.805
<00:07:37.784>and <00:07:38.018>he's <00:07:38.251>doing <00:07:38.484>the <00:07:38.718>data <00:07:38.951>visualizations <00:07:39.184>there,

162
00:07:39.905 --> 00:07:41.605
<00:07:39.905>and <00:07:40.138>he <00:07:40.371>just <00:07:40.604>couldn't <00:07:40.838>find <00:07:41.071>a <00:07:41.304>way

163
00:07:42.025 --> 00:07:46.045
<00:07:42.025>to <00:07:42.224>have <00:07:42.424>the <00:07:42.625>existing <00:07:42.825>major <00:07:43.025>frontend <00:07:43.224>frameworks <00:07:43.424>perform

164
00:07:47.405 --> 00:07:49.565
<00:07:47.405>efficient <00:07:47.684>enough <00:07:47.965>for <00:07:48.244>his <00:07:48.525>use <00:07:48.804>cases

165
00:07:49.565 --> 00:07:52.805
<00:07:49.565>because <00:07:49.740>he's <00:07:49.915>handling <00:07:50.090>a <00:07:50.265>lot <00:07:50.440>of, <00:07:50.615>um, <00:07:50.790>data <00:07:50.965>points.

166
00:07:53.665 --> 00:07:56.285
<00:07:53.665>So <00:07:53.865>that <00:07:54.065>was <00:07:54.265>his <00:07:54.465>initial, <00:07:54.665>um, <00:07:54.865>use <00:07:55.065>case

167
00:07:56.345 --> 00:08:00.085
<00:07:56.345>for <00:07:56.500>actually <00:07:56.656>creating <00:07:56.811>selt, <00:07:56.967>which <00:07:57.122>he <00:07:57.278>did <00:07:57.433>in <00:07:57.589>November, <00:07:57.745>2016.

168
00:08:00.835 --> 00:08:04.165
<00:08:00.835>Then <00:08:00.974>about <00:08:01.114>a <00:08:01.255>year <00:08:01.395>later, <00:08:01.534>he <00:08:01.674>released <00:08:01.815>sper, <00:08:01.955>which <00:08:02.094>is <00:08:02.234>a,

169
00:08:04.465 --> 00:08:08.045
<00:08:04.465>you <00:08:04.604>could <00:08:04.744>see <00:08:04.885>this, <00:08:05.025>uh, <00:08:05.164>a <00:08:05.304>framework <00:08:05.445>on <00:08:05.585>top <00:08:05.724>of <00:08:05.864>sel,

170
00:08:08.095 --> 00:08:11.485
<00:08:08.095>which <00:08:08.295>is <00:08:08.495>similar <00:08:08.695>to <00:08:08.895>next <00:08:09.095>NOS <00:08:09.295>or <00:08:09.495>Gatsby.

171
00:08:11.505 --> 00:08:16.085
<00:08:11.505>For <00:08:11.660>example, <00:08:11.816>in <00:08:11.971>2018, <00:08:12.127>version <00:08:12.282>two <00:08:12.438>was <00:08:12.593>released <00:08:12.749>of <00:08:12.905>sel,

172
00:08:16.185 --> 00:08:19.885
<00:08:16.185>and <00:08:16.340>then <00:08:16.496>in <00:08:16.651>2019, <00:08:16.807>version <00:08:16.962>three <00:08:17.118>was <00:08:17.273>released, <00:08:17.429>which <00:08:17.585>is,

173
00:08:19.895 --> 00:08:21.925
<00:08:19.895>which <00:08:20.128>was <00:08:20.361>quite <00:08:20.594>hyped, <00:08:20.828>uh, <00:08:21.061>back <00:08:21.294>then

174
00:08:21.925 --> 00:08:25.605
<00:08:21.925>because <00:08:22.158>the <00:08:22.391>syntax <00:08:22.625>started <00:08:22.858>to <00:08:23.091>look <00:08:23.325>significantly,

175
00:08:25.875 --> 00:08:28.645
<00:08:25.875>significantly <00:08:26.341>different <00:08:26.808>from <00:08:27.275>you

176
00:08:28.645 --> 00:08:30.285
<00:08:28.645>and <00:08:28.995>the <00:08:29.344>other <00:08:29.695>front-end <00:08:30.044>frameworks.

177
00:08:30.865 --> 00:08:34.845
<00:08:30.865>And <00:08:31.020>now <00:08:31.176>in <00:08:31.331>March <00:08:31.487>2nd, <00:08:31.642>2021, <00:08:31.798>which <00:08:31.953>is <00:08:32.109>actually <00:08:32.265>now

178
00:08:35.405 --> 00:08:38.485
<00:08:35.405>a <00:08:35.560>couple <00:08:35.716>days <00:08:35.871>ago, <00:08:36.027>the <00:08:36.182>kit <00:08:36.338>public <00:08:36.493>beta <00:08:36.649>was <00:08:36.804>announced,

179
00:08:38.945 --> 00:08:41.245
<00:08:38.945>and <00:08:39.085>I <00:08:39.225>will <00:08:39.365>talk <00:08:39.505>about <00:08:39.645>it <00:08:39.785>later <00:08:39.925>on <00:08:40.065>in <00:08:40.205>the <00:08:40.345>code

180
00:08:41.245 --> 00:08:42.685
<00:08:41.245>examples <00:08:41.568>of <00:08:41.893>what <00:08:42.217>that <00:08:42.540>means.

181
00:08:44.525 --> 00:08:46.305
<00:08:44.525>So <00:08:44.758>how <00:08:44.991>did <00:08:45.225>I <00:08:45.458>even <00:08:45.691>discover <00:08:45.925>sve?

182
00:08:47.155 --> 00:08:49.615
<00:08:47.155>Um, <00:08:47.295>I <00:08:47.435>used <00:08:47.574>to <00:08:47.714>read <00:08:47.855>a <00:08:47.995>lot, <00:08:48.135>a <00:08:48.275>lot <00:08:48.415>of <00:08:48.555>articles,

183
00:08:49.675 --> 00:08:52.695
<00:08:49.675>and <00:08:49.830>also <00:08:49.986>on <00:08:50.141>Medium <00:08:50.297>there <00:08:50.452>is <00:08:50.608>the <00:08:50.763>real <00:08:50.919>world <00:08:51.074>comparison.

184
00:08:53.475 --> 00:08:55.285
<00:08:53.475>The, <00:08:53.675>it <00:08:53.875>is <00:08:54.075>like <00:08:54.275>kind <00:08:54.475>of <00:08:54.675>a <00:08:54.875>survey

185
00:08:55.385 --> 00:08:58.205
<00:08:55.385>and <00:08:55.560>a <00:08:55.735>test <00:08:55.910>that <00:08:56.085>is, <00:08:56.260>um, <00:08:56.435>done <00:08:56.610>every <00:08:56.785>year.

186
00:08:58.905 --> 00:09:02.825
<00:08:58.905>And <00:08:59.021>if <00:08:59.138>we <00:08:59.255>take <00:08:59.371>a <00:08:59.488>look <00:08:59.605>at <00:08:59.721>that, <00:08:59.838>um, <00:08:59.954>it <00:09:00.071>looks <00:09:00.188>like <00:09:00.305>that.

187
00:09:02.965 --> 00:09:04.625
<00:09:02.965>So <00:09:03.431>every <00:09:03.898>front <00:09:04.365>and

188
00:09:04.765 --> 00:09:08.265
<00:09:04.765>or <00:09:04.920>every <00:09:05.076>framework <00:09:05.231>that <00:09:05.387>is <00:09:05.542>out <00:09:05.698>there <00:09:05.853>has <00:09:06.009>its <00:09:06.165>kind

189
00:09:08.265 --> 00:09:09.825
<00:09:08.265>of <00:09:08.615>real <00:09:08.965>world <00:09:09.314>example <00:09:09.665>app.

190
00:09:10.715 --> 00:09:13.015
<00:09:10.715>And <00:09:10.855>this <00:09:10.995>was <00:09:11.135>kind <00:09:11.275>of <00:09:11.415>the <00:09:11.555>first <00:09:11.695>time <00:09:11.835>that <00:09:11.975>I <00:09:12.115>saw

191
00:09:13.575 --> 00:09:16.415
<00:09:13.575>selt <00:09:13.775>appearing <00:09:13.975>pretty <00:09:14.175>much <00:09:14.375>in <00:09:14.575>the <00:09:14.775>top <00:09:14.975>rating.

192
00:09:16.515 --> 00:09:19.575
<00:09:16.515>So <00:09:16.715>here <00:09:16.915>it's <00:09:17.115>third <00:09:17.314>place <00:09:17.515>next <00:09:17.715>to <00:09:17.915>Apron

193
00:09:19.575 --> 00:09:21.855
<00:09:19.575>and <00:09:19.855>Elm <00:09:20.135>based <00:09:20.415>on <00:09:20.695>the <00:09:20.975>performance.

194
00:09:21.855 --> 00:09:23.735
<00:09:21.855>So <00:09:22.135>this <00:09:22.415>is <00:09:22.695>about <00:09:22.975>Lighthouse <00:09:23.255>performance

195
00:09:24.795 --> 00:09:27.825
<00:09:24.795>based <00:09:24.935>on <00:09:25.074>the <00:09:25.214>bundle <00:09:25.354>size <00:09:25.495>and <00:09:25.635>also <00:09:25.775>on <00:09:25.915>the <00:09:26.055>library <00:09:26.194>size.

196
00:09:27.925 --> 00:09:30.505
<00:09:27.925>We <00:09:28.080>see <00:09:28.236>here <00:09:28.391>selt <00:09:28.547>is <00:09:28.702>even <00:09:28.858>ranked <00:09:29.013>as <00:09:29.169>first <00:09:29.324>place

197
00:09:31.095 --> 00:09:32.945
<00:09:31.095>with <00:09:31.561>only <00:09:32.028>15 <00:09:32.495>kb,

198
00:09:34.325 --> 00:09:37.025
<00:09:34.325>and <00:09:34.525>the <00:09:34.725>first <00:09:34.925>metric <00:09:35.125>was <00:09:35.325>lines <00:09:35.525>of <00:09:35.725>code.

199
00:09:37.085 --> 00:09:40.025
<00:09:37.085>So <00:09:37.225>also <00:09:37.365>here <00:09:37.505>we <00:09:37.645>see <00:09:37.785>that <00:09:37.925>swell <00:09:38.065>is <00:09:38.205>ranked <00:09:38.345>third <00:09:38.485>place.

200
00:09:41.235 --> 00:09:43.495
<00:09:41.235>And <00:09:41.390>that <00:09:41.546>was <00:09:41.701>the <00:09:41.857>first <00:09:42.012>time <00:09:42.168>where <00:09:42.323>I <00:09:42.479>realized, <00:09:42.635>okay,

201
00:09:44.045 --> 00:09:46.015
<00:09:44.045>this <00:09:44.324>sounds <00:09:44.604>like <00:09:44.885>an <00:09:45.165>interesting <00:09:45.444>framework.

202
00:09:46.085 --> 00:09:48.415
<00:09:46.085>It's, <00:09:46.240>it's <00:09:46.396>doing <00:09:46.551>a <00:09:46.707>lot <00:09:46.862>of <00:09:47.018>great <00:09:47.173>stuff <00:09:47.329>for <00:09:47.485>performance,

203
00:09:49.035 --> 00:09:52.815
<00:09:49.035>but <00:09:49.190>back <00:09:49.346>then <00:09:49.501>I <00:09:49.657>was <00:09:49.812>really <00:09:49.968>involved <00:09:50.123>in <00:09:50.279>React, <00:09:50.435>learning,

204
00:09:52.945 --> 00:09:56.175
<00:09:52.945>react <00:09:53.085>and <00:09:53.225>View, <00:09:53.365>and <00:09:53.505>just <00:09:53.645>already <00:09:53.785>had <00:09:53.925>enough <00:09:54.065>on <00:09:54.205>my <00:09:54.345>plate

205
00:09:56.195 --> 00:09:57.375
<00:09:56.195>to <00:09:56.549>handle <00:09:56.903>these <00:09:57.257>frameworks.

206
00:09:57.755 --> 00:10:00.695
<00:09:57.755>So <00:09:57.910>I <00:09:58.066>was <00:09:58.221>just <00:09:58.377>dismissing <00:09:58.532>it <00:09:58.688>as <00:09:58.843>just <00:09:58.999>another <00:09:59.155>framework

207
00:10:00.925 --> 00:10:02.655
<00:10:00.925>that <00:10:01.204>will <00:10:01.484>tie <00:10:01.765>a <00:10:02.045>horrible <00:10:02.324>death.

208
00:10:03.565 --> 00:10:06.385
<00:10:03.565>But <00:10:03.740>then, <00:10:03.915>um, <00:10:04.090>a <00:10:04.265>work <00:10:04.440>colleague <00:10:04.615>mentioned <00:10:04.790>it <00:10:04.965>again,

209
00:10:06.565 --> 00:10:08.185
<00:10:06.565>and <00:10:06.798>so <00:10:07.031>the <00:10:07.265>topic <00:10:07.498>came <00:10:07.731>up <00:10:07.965>again

210
00:10:08.185 --> 00:10:10.665
<00:10:08.185>and <00:10:08.340>I <00:10:08.496>was <00:10:08.651>having <00:10:08.807>a <00:10:08.962>free <00:10:09.118>weekend, <00:10:09.273>so <00:10:09.429>I <00:10:09.584>thought,

211
00:10:10.725 --> 00:10:13.505
<00:10:10.725>why <00:10:10.865>not <00:10:11.005>just <00:10:11.145>take <00:10:11.285>a <00:10:11.425>look <00:10:11.565>at <00:10:11.705>the <00:10:11.845>official <00:10:11.985>sweat <00:10:12.125>tutorial?

212
00:10:14.245 --> 00:10:16.465
<00:10:14.245>And <00:10:14.445>really <00:10:14.645>from <00:10:14.845>the <00:10:15.045>start, <00:10:15.245>you <00:10:15.445>can <00:10:15.645>work

213
00:10:16.465 --> 00:10:19.425
<00:10:16.465>through <00:10:16.592>this <00:10:16.719>tutorial <00:10:16.846>in <00:10:16.974>one <00:10:17.101>to <00:10:17.228>two <00:10:17.355>hours <00:10:17.483>and <00:10:17.610>I <00:10:17.737>was <00:10:17.865>hooked.

214
00:10:19.525 --> 00:10:22.265
<00:10:19.525>And <00:10:19.699>you <00:10:19.875>really <00:10:20.050>can <00:10:20.225>learn <00:10:20.400>all <00:10:20.574>of <00:10:20.750>the <00:10:20.925>concepts

215
00:10:22.265 --> 00:10:24.145
<00:10:22.265>that <00:10:22.439>are <00:10:22.615>necessary <00:10:22.790>in <00:10:22.965>this <00:10:23.140>one <00:10:23.314>or <00:10:23.490>two <00:10:23.665>hours,

216
00:10:24.525 --> 00:10:27.065
<00:10:24.525>and <00:10:24.680>you <00:10:24.836>will <00:10:24.991>see <00:10:25.147>how <00:10:25.302>many <00:10:25.458>things <00:10:25.613>you <00:10:25.769>always <00:10:25.925>have

217
00:10:27.065 --> 00:10:30.225
<00:10:27.065>to <00:10:27.240>write <00:10:27.415>in <00:10:27.590>a <00:10:27.765>more <00:10:27.940>complex <00:10:28.115>way <00:10:28.290>than <00:10:28.465>necessary.

218
00:10:31.685 --> 00:10:34.745
<00:10:31.685>And <00:10:31.859>about <00:10:32.035>the <00:10:32.209>same <00:10:32.385>time, <00:10:32.560>I <00:10:32.734>also, <00:10:32.910>um, <00:10:33.084>decided

219
00:10:34.765 --> 00:10:36.145
<00:10:34.765>to <00:10:35.013>set <00:10:35.261>up <00:10:35.510>my <00:10:35.758>own <00:10:36.007>website

220
00:10:36.765 --> 00:10:40.665
<00:10:36.765>and <00:10:36.920>I <00:10:37.076>was <00:10:37.231>evaluating <00:10:37.387>also <00:10:37.542>with <00:10:37.698>g <00:10:37.853>uh, <00:10:38.009>for <00:10:38.165>Gatsby,

221
00:10:40.725 --> 00:10:44.065
<00:10:40.725>no <00:10:40.832>the <00:10:40.940>next, <00:10:41.048>but <00:10:41.155>in, <00:10:41.263>uh, <00:10:41.371>in <00:10:41.478>the <00:10:41.586>end <00:10:41.694>I <00:10:41.801>decided <00:10:41.909>to <00:10:42.017>use <00:10:42.125>sper.

222
00:10:44.995 --> 00:10:47.255
<00:10:44.995>And <00:10:45.228>in <00:10:45.461>the <00:10:45.695>meantime <00:10:45.928>I <00:10:46.161>also <00:10:46.395>worked

223
00:10:47.315 --> 00:10:50.375
<00:10:47.315>for <00:10:47.470>free <00:10:47.626>international <00:10:47.781>clients <00:10:47.937>with <00:10:48.092>a <00:10:48.248>tech <00:10:48.403>stack <00:10:48.559>of <00:10:48.715>Swell.

224
00:10:51.325 --> 00:10:52.345
<00:10:51.325>And <00:10:51.784>after <00:10:52.243>all,

225
00:10:52.485 --> 00:10:55.625
<00:10:52.485>my <00:10:52.660>bottom <00:10:52.835>line <00:10:53.010>is <00:10:53.185>it's <00:10:53.360>an <00:10:53.535>incredible <00:10:53.710>developer <00:10:53.885>experience

226
00:10:55.625 --> 00:10:58.705
<00:10:55.625>and <00:10:55.752>I <00:10:55.879>don't <00:10:56.006>regret <00:10:56.134>it <00:10:56.261>at <00:10:56.388>all, <00:10:56.515>that <00:10:56.643>I <00:10:56.770>didn't <00:10:56.897>pick <00:10:57.025>one

227
00:10:58.705 --> 00:11:00.585
<00:10:58.705>of <00:10:59.055>the <00:10:59.405>more <00:10:59.755>popular <00:11:00.105>solutions.

228
00:11:02.465 --> 00:11:03.925
<00:11:02.465>And <00:11:02.652>I'm <00:11:02.840>not <00:11:03.028>the <00:11:03.215>only <00:11:03.403>one <00:11:03.591>with <00:11:03.779>this.

229
00:11:04.025 --> 00:11:06.525
<00:11:04.025>So <00:11:04.225>this <00:11:04.425>is <00:11:04.625>actually <00:11:04.824>taken <00:11:05.025>from <00:11:05.225>the <00:11:05.425>state

230
00:11:06.685 --> 00:11:10.285
<00:11:06.685>of <00:11:06.885>JavaScript <00:11:07.084>survey, <00:11:07.285>which <00:11:07.484>is <00:11:07.685>appearing <00:11:07.885>every <00:11:08.084>year.

231
00:11:11.315 --> 00:11:14.215
<00:11:11.315>So <00:11:11.490>in <00:11:11.665>this <00:11:11.840>case, <00:11:12.015>it's <00:11:12.190>um, <00:11:12.365>swell <00:11:12.540>was <00:11:12.715>able

232
00:11:14.235 --> 00:11:16.175
<00:11:14.235>to <00:11:14.515>receive <00:11:14.795>the <00:11:15.075>highest <00:11:15.355>satisfaction <00:11:15.635>rating

233
00:11:16.205 --> 00:11:20.175
<00:11:16.205>amongst <00:11:16.360>all <00:11:16.516>people <00:11:16.671>who <00:11:16.827>voted <00:11:16.982>even <00:11:17.138>my <00:11:17.293>head <00:11:17.449>of <00:11:17.605>React.

234
00:11:20.955 --> 00:11:22.375
<00:11:20.955>Um, <00:11:21.594>with <00:11:22.233>66%,

235
00:11:22.375 --> 00:11:25.975
<00:11:22.375>it <00:11:22.530>also <00:11:22.686>received <00:11:22.841>the <00:11:22.997>highest <00:11:23.152>interest <00:11:23.308>rating <00:11:23.463>ahead <00:11:23.619>of <00:11:23.775>GS.

236
00:11:27.675 --> 00:11:31.455
<00:11:27.675>We <00:11:27.830>have <00:11:27.986>a <00:11:28.141>15% <00:11:28.297>fifth, <00:11:28.452>uh, <00:11:28.608>fourth <00:11:28.763>place <00:11:28.919>for <00:11:29.074>usage

237
00:11:31.455 --> 00:11:33.335
<00:11:31.455>behind <00:11:31.805>the <00:11:32.155>major <00:11:32.505>frontend <00:11:32.855>frameworks.

238
00:11:34.005 --> 00:11:38.425
<00:11:34.005>And <00:11:34.145>we <00:11:34.285>have <00:11:34.425>an <00:11:34.564>86%, <00:11:34.705>uh, <00:11:34.845>awareness <00:11:34.985>that's <00:11:35.125>well <00:11:35.265>even <00:11:35.405>exists

239
00:11:38.565 --> 00:11:40.865
<00:11:38.565>behind <00:11:38.845>React, <00:11:39.125>angular <00:11:39.405>View <00:11:39.685>and <00:11:39.965>Ember.

240
00:11:43.235 --> 00:11:44.805
<00:11:43.235>Yeah, <00:11:43.468>but <00:11:43.701>now <00:11:43.935>enough <00:11:44.168>of <00:11:44.401>the <00:11:44.635>theory,

241
00:11:44.935 --> 00:11:46.645
<00:11:44.935>let's <00:11:45.285>see <00:11:45.635>some <00:11:45.984>actual <00:11:46.334>code.

242
00:11:49.015 --> 00:11:51.955
<00:11:49.015>So <00:11:49.248>this <00:11:49.481>is, <00:11:49.715>um, <00:11:49.948>an <00:11:50.181>actual <00:11:50.415>project.

243
00:11:52.065 --> 00:11:53.805
<00:11:52.065>This <00:11:52.298>is <00:11:52.531>the <00:11:52.765>package <00:11:52.998>chasing <00:11:53.231>of <00:11:53.465>the,

244
00:11:54.025 --> 00:11:56.365
<00:11:54.025>of <00:11:54.225>a <00:11:54.425>swell <00:11:54.625>kit <00:11:54.824>project <00:11:55.025>that <00:11:55.225>I <00:11:55.425>started.

245
00:11:56.465 --> 00:12:00.525
<00:11:56.465>So <00:11:56.581>Swell <00:11:56.698>Kit <00:11:56.815>is <00:11:56.931>kind <00:11:57.048>of <00:11:57.165>like <00:11:57.281>you <00:11:57.398>could <00:11:57.515>say <00:11:57.631>create <00:11:57.748>React <00:11:57.865>app.

246
00:12:01.185 --> 00:12:03.885
<00:12:01.185>And <00:12:01.385>here <00:12:01.584>you <00:12:01.785>see <00:12:01.984>we <00:12:02.185>only <00:12:02.385>have <00:12:02.584>three

247
00:12:03.915 --> 00:12:05.165
<00:12:03.915>scripts <00:12:04.290>that <00:12:04.665>are <00:12:05.040>necessary.

248
00:12:05.625 --> 00:12:07.845
<00:12:05.625>So <00:12:05.825>this <00:12:06.025>is <00:12:06.225>for <00:12:06.425>running <00:12:06.625>the <00:12:06.825>development <00:12:07.025>server

249
00:12:07.865 --> 00:12:09.325
<00:12:07.865>and <00:12:08.193>running <00:12:08.522>the <00:12:08.850>development <00:12:09.179>bundle.

250
00:12:10.305 --> 00:12:13.325
<00:12:10.305>For <00:12:10.460>with <00:12:10.616>Build, <00:12:10.771>we <00:12:10.927>can, <00:12:11.082>uh, <00:12:11.238>create <00:12:11.393>an <00:12:11.549>optimized <00:12:11.704>bundle

251
00:12:13.385 --> 00:12:15.845
<00:12:13.385>and <00:12:13.560>with <00:12:13.735>start <00:12:13.910>we <00:12:14.085>can <00:12:14.260>launch <00:12:14.435>that <00:12:14.610>production <00:12:14.785>bundle.

252
00:12:17.335 --> 00:12:19.955
<00:12:17.335>Um, <00:12:17.510>these <00:12:17.685>are <00:12:17.860>all <00:12:18.035>the <00:12:18.210>dependencies <00:12:18.385>that <00:12:18.560>are <00:12:18.735>necessary.

253
00:12:20.385 --> 00:12:22.955
<00:12:20.385>It's <00:12:20.665>actually <00:12:20.944>more <00:12:21.225>than <00:12:21.505>are <00:12:21.785>necessary.

254
00:12:23.135 --> 00:12:25.795
<00:12:23.135>So <00:12:23.335>I <00:12:23.535>installed <00:12:23.735>pretty <00:12:23.935>on <00:12:24.135>top <00:12:24.335>of <00:12:24.535>it

255
00:12:25.795 --> 00:12:27.955
<00:12:25.795>and <00:12:25.935>e <00:12:26.074>lin, <00:12:26.214>so <00:12:26.354>this <00:12:26.495>doesn't <00:12:26.635>come <00:12:26.775>out <00:12:26.915>of <00:12:27.055>the <00:12:27.194>box.

256
00:12:27.955 --> 00:12:31.345
<00:12:27.955>And <00:12:28.095>this, <00:12:28.235>um, <00:12:28.375>that's <00:12:28.515>kind <00:12:28.655>of <00:12:28.795>how <00:12:28.935>I <00:12:29.075>opted <00:12:29.215>into <00:12:29.355>it.

257
00:12:32.625 --> 00:12:34.555
<00:12:32.625>Yeah, <00:12:32.800>and <00:12:32.975>I'm <00:12:33.150>going <00:12:33.325>to <00:12:33.500>show <00:12:33.675>you <00:12:33.850>the <00:12:34.025>first

258
00:12:34.785 --> 00:12:35.955
<00:12:34.785>component <00:12:35.136>that <00:12:35.487>I <00:12:35.838>wrote.

259
00:12:36.025 --> 00:12:38.395
<00:12:36.025>It's <00:12:36.225>called <00:12:36.425>Swell <00:12:36.625>Components <00:12:36.824>are <00:12:37.025>easy <00:12:37.225>to <00:12:37.425>understand.

260
00:12:39.095 --> 00:12:41.515
<00:12:39.095>And <00:12:39.250>you <00:12:39.406>can <00:12:39.561>see <00:12:39.717>here <00:12:39.872>again, <00:12:40.028>the <00:12:40.183>the <00:12:40.339>script <00:12:40.495>block

261
00:12:41.515 --> 00:12:42.795
<00:12:41.515>that <00:12:41.803>we <00:12:42.091>already <00:12:42.379>saw <00:12:42.666>before.

262
00:12:43.085 --> 00:12:45.595
<00:12:43.085>We're <00:12:43.285>declaring <00:12:43.485>here <00:12:43.685>a <00:12:43.885>row <00:12:44.085>that <00:12:44.285>is <00:12:44.485>developer,

263
00:12:46.015 --> 00:12:48.755
<00:12:46.015>and <00:12:46.248>here <00:12:46.481>we're <00:12:46.715>rendering <00:12:46.948>the <00:12:47.181>row <00:12:47.415>developer

264
00:12:48.865 --> 00:12:50.475
<00:12:48.865>into <00:12:49.215>the <00:12:49.565>H <00:12:49.915>two <00:12:50.265>tag.

265
00:12:50.855 --> 00:12:52.755
<00:12:50.855>And <00:12:51.088>we <00:12:51.321>have <00:12:51.555>two <00:12:51.788>p <00:12:52.021>uh, <00:12:52.255>paragraphs.

266
00:12:53.615 --> 00:12:57.715
<00:12:53.615>And <00:12:53.722>the <00:12:53.830>style <00:12:53.938>block <00:12:54.045>is, <00:12:54.153>um, <00:12:54.261>styling <00:12:54.368>the <00:12:54.476>H <00:12:54.584>two <00:12:54.691>and <00:12:54.799>the <00:12:54.907>P <00:12:55.015>tag.

267
00:12:58.255 --> 00:13:01.155
<00:12:58.255>And <00:12:58.455>what's <00:12:58.655>important <00:12:58.855>to <00:12:59.055>know <00:12:59.255>is <00:12:59.455>that, <00:12:59.655>uh,

268
00:13:01.155 --> 00:13:03.595
<00:13:01.155>style <00:13:01.355>tags <00:13:01.555>in <00:13:01.755>swayed <00:13:01.954>are <00:13:02.155>scoped <00:13:02.355>by <00:13:02.555>default.

269
00:13:03.655 --> 00:13:08.395
<00:13:03.655>So <00:13:03.795>this, <00:13:03.935>this, <00:13:04.074>um, <00:13:04.214>style <00:13:04.355>will <00:13:04.495>never <00:13:04.635>leak <00:13:04.775>to <00:13:04.915>the <00:13:05.055>outside.

270
00:13:09.925 --> 00:13:13.785
<00:13:09.925>And <00:13:10.052>if <00:13:10.179>we <00:13:10.306>take <00:13:10.434>a <00:13:10.561>look <00:13:10.688>at <00:13:10.815>this <00:13:10.943>in <00:13:11.070>our <00:13:11.197>actual <00:13:11.324>running

271
00:13:13.895 --> 00:13:17.285
<00:13:13.895>application, <00:13:14.069>we <00:13:14.245>have <00:13:14.420>here <00:13:14.595>the <00:13:14.770>swell <00:13:14.944>components <00:13:15.120>are <00:13:15.295>easy

272
00:13:17.285 --> 00:13:18.885
<00:13:17.285>to <00:13:17.985>understand <00:13:18.685>route,

273
00:13:19.185 --> 00:13:22.005
<00:13:19.185>and <00:13:19.385>yeah, <00:13:19.584>indeed <00:13:19.785>it's <00:13:19.984>a <00:13:20.185>green <00:13:20.385>a, <00:13:20.584>um,

274
00:13:22.005 --> 00:13:23.685
<00:13:22.005>it's <00:13:22.285>a <00:13:22.564>green <00:13:22.845>a, <00:13:23.125>um, <00:13:23.405>heading.

275
00:13:24.105 --> 00:13:27.005
<00:13:24.105>And <00:13:24.280>we <00:13:24.455>have <00:13:24.630>two <00:13:24.805>paragraphs <00:13:24.980>that, <00:13:25.155>that <00:13:25.330>are <00:13:25.505>italic.

276
00:13:29.445 --> 00:13:31.025
<00:13:29.445>The <00:13:29.725>next <00:13:30.005>example <00:13:30.285>that <00:13:30.565>I <00:13:30.845>prepared

277
00:13:31.025 --> 00:13:33.665
<00:13:31.025>for <00:13:31.258>you <00:13:31.491>is <00:13:31.725>about <00:13:31.958>the <00:13:32.191>built-in <00:13:32.425>accessibility

278
00:13:33.845 --> 00:13:37.265
<00:13:33.845>and <00:13:34.000>unused <00:13:34.156>CSS <00:13:34.311>checks <00:13:34.467>that <00:13:34.622>swell, <00:13:34.778>uh, <00:13:34.933>has <00:13:35.089>for <00:13:35.245>you.

279
00:13:38.345 --> 00:13:41.725
<00:13:38.345>So <00:13:38.485>we <00:13:38.625>don't <00:13:38.765>need <00:13:38.905>to <00:13:39.045>install <00:13:39.185>any <00:13:39.325>third <00:13:39.465>party, <00:13:39.605>uh, <00:13:39.745>libraries,

280
00:13:41.725 --> 00:13:45.485
<00:13:41.725>but <00:13:41.852>here <00:13:41.979>if <00:13:42.106>I <00:13:42.234>hover <00:13:42.361>over <00:13:42.488>the <00:13:42.615>image <00:13:42.743>source, <00:13:42.870>we <00:13:42.997>can <00:13:43.125>see

281
00:13:45.525 --> 00:13:47.725
<00:13:45.525>that <00:13:45.699>the <00:13:45.875>image <00:13:46.050>element <00:13:46.225>should <00:13:46.400>have <00:13:46.574>an <00:13:46.750>alt <00:13:46.925>attribute.

282
00:13:47.795 --> 00:13:50.125
<00:13:47.795>Like <00:13:47.995>this <00:13:48.194>is <00:13:48.395>a <00:13:48.594>very <00:13:48.795>common <00:13:48.995>accessibility <00:13:49.194>issue,

283
00:13:50.625 --> 00:13:52.125
<00:13:50.625>and <00:13:50.895>we <00:13:51.165>can <00:13:51.435>fix <00:13:51.705>it <00:13:51.975>just

284
00:13:52.225 --> 00:13:55.325
<00:13:52.225>by <00:13:52.400>saying <00:13:52.575>we <00:13:52.750>are <00:13:52.925>developers <00:13:53.100>in <00:13:53.275>the <00:13:53.450>alt <00:13:53.625>tag.

285
00:13:56.735 --> 00:13:59.625
<00:13:56.735>Another <00:13:56.910>issue <00:13:57.085>that <00:13:57.260>is <00:13:57.435>another <00:13:57.610>warning <00:13:57.785>that <00:13:57.960>is <00:13:58.135>flown

286
00:13:59.625 --> 00:14:02.385
<00:13:59.625>for <00:13:59.780>us <00:13:59.936>is <00:14:00.091>that <00:14:00.247>screen <00:14:00.402>readers <00:14:00.558>already <00:14:00.713>announced <00:14:00.869>the <00:14:01.025>image

287
00:14:02.385 --> 00:14:03.825
<00:14:02.385>element <00:14:02.817>as <00:14:03.249>an <00:14:03.681>image.

288
00:14:04.405 --> 00:14:06.785
<00:14:04.405>So <00:14:04.638>this <00:14:04.871>image <00:14:05.105>in <00:14:05.338>here <00:14:05.571>is <00:14:05.805>redundant.

289
00:14:07.205 --> 00:14:10.185
<00:14:07.205>We <00:14:07.380>can <00:14:07.555>also <00:14:07.730>write, <00:14:07.905>we <00:14:08.080>are <00:14:08.255>deaf <00:14:08.430>here <00:14:08.605>just

290
00:14:10.205 --> 00:14:11.425
<00:14:10.205>for <00:14:10.754>showcase <00:14:11.303>purposes.

291
00:14:12.125 --> 00:14:13.985
<00:14:12.125>The <00:14:12.358>next <00:14:12.591>warning <00:14:12.825>that <00:14:13.058>we <00:14:13.291>receive <00:14:13.525>is

292
00:14:13.985 --> 00:14:16.825
<00:14:13.985>that <00:14:14.140>a <00:14:14.296>form <00:14:14.451>labor <00:14:14.607>must <00:14:14.762>be <00:14:14.918>associated <00:14:15.073>with <00:14:15.229>the <00:14:15.385>control.

293
00:14:16.845 --> 00:14:18.145
<00:14:16.845>So <00:14:17.235>here <00:14:17.625>the <00:14:18.015>input

294
00:14:18.145 --> 00:14:20.265
<00:14:18.145>and <00:14:18.319>the <00:14:18.495>labor <00:14:18.670>tag <00:14:18.845>are <00:14:19.020>next <00:14:19.194>to <00:14:19.370>each <00:14:19.545>other,

295
00:14:20.265 --> 00:14:22.585
<00:14:20.265>which <00:14:20.465>doesn't <00:14:20.665>do <00:14:20.865>any, <00:14:21.064>do <00:14:21.265>us <00:14:21.465>any <00:14:21.665>good.

296
00:14:23.205 --> 00:14:27.425
<00:14:23.205>Oh, <00:14:23.332>so <00:14:23.459>in <00:14:23.586>this <00:14:23.714>case, <00:14:23.841>we <00:14:23.968>would <00:14:24.095>want <00:14:24.223>to <00:14:24.350>put <00:14:24.477>the <00:14:24.605>input

297
00:14:27.605 --> 00:14:30.785
<00:14:27.605>inside <00:14:27.760>the <00:14:27.916>label <00:14:28.071>so <00:14:28.227>that <00:14:28.382>they're <00:14:28.538>associated <00:14:28.693>to <00:14:28.849>each <00:14:29.005>other.

298
00:14:32.225 --> 00:14:36.355
<00:14:32.225>Yeah, <00:14:32.400>and <00:14:32.575>also <00:14:32.750>other <00:14:32.925>focus <00:14:33.100>is <00:14:33.275>discouraged <00:14:33.450>from <00:14:33.625>you.

299
00:14:36.415 --> 00:14:38.795
<00:14:36.415>Uh, <00:14:36.589>you're <00:14:36.765>not, <00:14:36.939>you're <00:14:37.115>discouraged <00:14:37.290>from <00:14:37.464>using <00:14:37.640>focus <00:14:37.814>on,

300
00:14:38.895 --> 00:14:40.115
<00:14:38.895>on <00:14:39.444>input <00:14:39.993>elements.

301
00:14:40.535 --> 00:14:43.755
<00:14:40.535>So <00:14:40.709>would <00:14:40.885>also <00:14:41.060>prefer <00:14:41.235>us <00:14:41.410>to <00:14:41.584>clean <00:14:41.760>this <00:14:41.935>up.

302
00:14:44.875 --> 00:14:46.895
<00:14:44.875>And <00:14:45.075>you <00:14:45.275>can <00:14:45.475>see <00:14:45.675>here <00:14:45.875>it's <00:14:46.075>telling <00:14:46.275>us

303
00:14:46.925 --> 00:14:49.695
<00:14:46.925>that <00:14:47.099>we <00:14:47.275>have <00:14:47.449>an <00:14:47.625>unused <00:14:47.800>CSS <00:14:47.974>selector <00:14:48.150>H <00:14:48.324>one,

304
00:14:50.035 --> 00:14:51.865
<00:14:50.035>and <00:14:50.209>if <00:14:50.385>we <00:14:50.560>look <00:14:50.735>up <00:14:50.910>here, <00:14:51.084>that's <00:14:51.260>actually <00:14:51.435>true.

305
00:14:51.925 --> 00:14:55.705
<00:14:51.925>We <00:14:52.052>don't <00:14:52.179>use <00:14:52.306>any <00:14:52.434>H <00:14:52.561>one <00:14:52.688>in <00:14:52.815>this <00:14:52.943>file, <00:14:53.070>so <00:14:53.197>we <00:14:53.324>can

306
00:14:56.325 --> 00:14:57.705
<00:14:56.325>safely <00:14:56.635>get <00:14:56.946>rid <00:14:57.256>of <00:14:57.567>it

307
00:14:57.965 --> 00:15:01.545
<00:14:57.965>and <00:14:58.140>don't <00:14:58.315>risk, <00:14:58.490>um, <00:14:58.665>ruining <00:14:58.840>any <00:14:59.015>of <00:14:59.190>the <00:14:59.365>styles.

308
00:15:01.925 --> 00:15:05.225
<00:15:01.925>And <00:15:02.080>also <00:15:02.236>we <00:15:02.391>don't <00:15:02.547>have <00:15:02.702>any <00:15:02.858>CSS <00:15:03.013>selector <00:15:03.169>for <00:15:03.324>main,

309
00:15:05.885 --> 00:15:07.025
<00:15:05.885>so <00:15:06.056>we <00:15:06.227>can <00:15:06.398>get <00:15:06.569>rid <00:15:06.740>of <00:15:06.911>that,

310
00:15:07.925 --> 00:15:10.185
<00:15:07.925>but <00:15:08.099>an <00:15:08.275>image <00:15:08.449>tag <00:15:08.625>is <00:15:08.800>actually <00:15:08.974>used <00:15:09.150>in <00:15:09.324>here,

311
00:15:10.205 --> 00:15:12.025
<00:15:10.205>so <00:15:10.380>it's <00:15:10.555>not <00:15:10.730>throwing <00:15:10.905>us <00:15:11.080>a <00:15:11.255>warning <00:15:11.430>for <00:15:11.605>that.

312
00:15:14.125 --> 00:15:15.505
<00:15:14.125>The <00:15:14.373>next <00:15:14.621>concept <00:15:14.870>that <00:15:15.118>I <00:15:15.367>want

313
00:15:15.505 --> 00:15:18.185
<00:15:15.505>to <00:15:15.705>show <00:15:15.905>you <00:15:16.105>is <00:15:16.305>about <00:15:16.505>the <00:15:16.705>dollar <00:15:16.905>operator.

314
00:15:18.325 --> 00:15:21.105
<00:15:18.325>So <00:15:18.525>it's <00:15:18.725>about <00:15:18.925>the <00:15:19.125>reactivity <00:15:19.325>with <00:15:19.525>labor <00:15:19.725>statements.

315
00:15:21.925 --> 00:15:24.105
<00:15:21.925>Um, <00:15:22.099>so <00:15:22.275>this <00:15:22.449>is <00:15:22.625>a <00:15:22.800>really <00:15:22.974>simple <00:15:23.150>component <00:15:23.324>here.

316
00:15:24.125 --> 00:15:27.425
<00:15:24.125>I'm <00:15:24.265>showing <00:15:24.405>you <00:15:24.545>that <00:15:24.685>I <00:15:24.825>can <00:15:24.965>import <00:15:25.105>a <00:15:25.245>component <00:15:25.385>from <00:15:25.525>another

317
00:15:27.495 --> 00:15:28.825
<00:15:27.495>file <00:15:28.093>like <00:15:28.692>that

318
00:15:29.785 --> 00:15:32.205
<00:15:29.785>and <00:15:29.940>we <00:15:30.096>can <00:15:30.251>jump <00:15:30.407>into <00:15:30.562>the <00:15:30.718>counter <00:15:30.873>that <00:15:31.029>I <00:15:31.185>created.

319
00:15:32.825 --> 00:15:35.045
<00:15:32.825>So <00:15:33.025>the <00:15:33.225>first <00:15:33.425>thing <00:15:33.625>you <00:15:33.825>can <00:15:34.025>see <00:15:34.225>is

320
00:15:35.045 --> 00:15:36.805
<00:15:35.045>that <00:15:35.395>we're <00:15:35.745>using <00:15:36.094>TypeScript <00:15:36.444>here.

321
00:15:36.825 --> 00:15:38.445
<00:15:36.825>So <00:15:37.058>this <00:15:37.291>is <00:15:37.525>annotated <00:15:37.758>as <00:15:37.991>a <00:15:38.225>number.

322
00:15:39.065 --> 00:15:42.245
<00:15:39.065>And <00:15:39.205>swell <00:15:39.345>kit <00:15:39.485>has, <00:15:39.625>um, <00:15:39.765>TypeScript <00:15:39.905>support <00:15:40.045>out <00:15:40.185>of <00:15:40.325>the <00:15:40.465>box.

323
00:15:43.205 --> 00:15:44.225
<00:15:43.205>So <00:15:43.388>we <00:15:43.572>are <00:15:43.755>having <00:15:43.939>a <00:15:44.123>count

324
00:15:44.225 --> 00:15:46.945
<00:15:44.225>of <00:15:44.400>zero <00:15:44.575>initially <00:15:44.750>we <00:15:44.925>are <00:15:45.100>having <00:15:45.275>an <00:15:45.450>increment <00:15:45.625>method

325
00:15:46.945 --> 00:15:48.465
<00:15:46.945>that <00:15:47.287>would <00:15:47.629>increment <00:15:47.971>this <00:15:48.313>account.

326
00:15:49.045 --> 00:15:51.425
<00:15:49.045>And <00:15:49.278>here <00:15:49.511>we're <00:15:49.745>seeing <00:15:49.978>the <00:15:50.211>reactive <00:15:50.444>statement

327
00:15:51.425 --> 00:15:53.505
<00:15:51.425>that <00:15:51.599>I <00:15:51.775>was <00:15:51.949>talking <00:15:52.125>about <00:15:52.300>with <00:15:52.474>the <00:15:52.650>dollar <00:15:52.824>sign.

328
00:15:54.205 --> 00:15:58.425
<00:15:54.205>So <00:15:54.360>what <00:15:54.516>this <00:15:54.671>means <00:15:54.827>is <00:15:54.982>that <00:15:55.138>we're, <00:15:55.293>um, <00:15:55.449>initializing <00:15:55.605>doubled

329
00:15:58.485 --> 00:16:02.625
<00:15:58.485>as <00:15:58.625>a <00:15:58.765>variable <00:15:58.905>here, <00:15:59.045>and <00:15:59.185>doubled <00:15:59.325>is <00:15:59.465>reactive <00:15:59.605>based <00:15:59.745>on <00:15:59.885>the

330
00:16:02.625 --> 00:16:04.745
<00:16:02.625>value <00:16:02.905>that <00:16:03.185>is <00:16:03.465>saved <00:16:03.745>into <00:16:04.025>count.

331
00:16:04.805 --> 00:16:06.425
<00:16:04.805>So <00:16:05.271>whenever <00:16:05.738>count <00:16:06.204>updates,

332
00:16:06.845 --> 00:16:08.705
<00:16:06.845>our <00:16:07.125>doubled <00:16:07.405>value <00:16:07.685>will <00:16:07.965>also <00:16:08.245>update.

333
00:16:09.045 --> 00:16:11.745
<00:16:09.045>And <00:16:09.200>to <00:16:09.356>make <00:16:09.511>it <00:16:09.667>even <00:16:09.822>more <00:16:09.978>complicated, <00:16:10.133>I <00:16:10.289>up <00:16:10.444>uh,

334
00:16:12.205 --> 00:16:15.145
<00:16:12.205>set <00:16:12.438>another <00:16:12.671>quadruplet, <00:16:12.905>um, <00:16:13.138>reactive <00:16:13.371>variable <00:16:13.605>here

335
00:16:15.535 --> 00:16:17.385
<00:16:15.535>that <00:16:15.814>is <00:16:16.094>reacting <00:16:16.375>based <00:16:16.655>on <00:16:16.935>doubled,

336
00:16:17.385 --> 00:16:19.025
<00:16:17.385>which <00:16:17.665>is <00:16:17.944>reacting <00:16:18.225>based <00:16:18.505>on <00:16:18.785>count.

337
00:16:19.645 --> 00:16:21.305
<00:16:19.645>And <00:16:19.878>this <00:16:20.111>might <00:16:20.345>sound <00:16:20.578>complicated <00:16:20.811>at <00:16:21.045>first,

338
00:16:21.305 --> 00:16:22.585
<00:16:21.305>but <00:16:21.535>it's <00:16:21.765>a <00:16:21.996>really <00:16:22.226>great <00:16:22.457>concept

339
00:16:22.605 --> 00:16:24.505
<00:16:22.605>and <00:16:22.955>it <00:16:23.305>works <00:16:23.655>exceptionally <00:16:24.005>well.

340
00:16:25.205 --> 00:16:27.185
<00:16:25.205>So <00:16:25.345>here <00:16:25.485>we <00:16:25.625>have <00:16:25.765>a <00:16:25.905>button <00:16:26.045>with <00:16:26.185>an <00:16:26.325>on <00:16:26.465>click <00:16:26.605>candle

341
00:16:27.215 --> 00:16:29.425
<00:16:27.215>that <00:16:27.495>would <00:16:27.775>trigger <00:16:28.055>our <00:16:28.335>method <00:16:28.615>increment.

342
00:16:29.885 --> 00:16:32.385
<00:16:29.885>And <00:16:30.040>below <00:16:30.196>we <00:16:30.351>have <00:16:30.507>a, <00:16:30.662>we <00:16:30.818>have <00:16:30.973>two <00:16:31.129>PT <00:16:31.285>tags

343
00:16:32.385 --> 00:16:33.905
<00:16:32.385>that <00:16:32.727>would <00:16:33.069>display <00:16:33.411>our <00:16:33.752>values

344
00:16:33.935 --> 00:16:36.825
<00:16:33.935>that <00:16:34.214>we <00:16:34.494>initialized <00:16:34.775>up <00:16:35.055>there <00:16:35.334>on.

345
00:16:36.845 --> 00:16:40.305
<00:16:36.845>And <00:16:36.985>on <00:16:37.125>the <00:16:37.265>bottom <00:16:37.405>we <00:16:37.545>have <00:16:37.685>just <00:16:37.825>a <00:16:37.965>scope <00:16:38.105>button <00:16:38.245>styling

346
00:16:40.415 --> 00:16:43.385
<00:16:40.415>that <00:16:40.589>will <00:16:40.765>not <00:16:40.939>bleed <00:16:41.115>into <00:16:41.290>any <00:16:41.464>other <00:16:41.640>components <00:16:41.814>luckily.

347
00:16:44.205 --> 00:16:48.625
<00:16:44.205>And <00:16:44.345>to <00:16:44.485>showcase <00:16:44.625>you <00:16:44.765>how <00:16:44.905>this <00:16:45.045>would <00:16:45.185>look <00:16:45.325>in <00:16:45.465>action <00:16:45.605>is

348
00:16:50.515 --> 00:16:51.815
<00:16:50.515>we <00:16:50.807>have <00:16:51.100>our <00:16:51.392>button <00:16:51.685>here

349
00:16:51.835 --> 00:16:54.335
<00:16:51.835>and <00:16:51.975>we <00:16:52.115>have <00:16:52.255>the, <00:16:52.395>the <00:16:52.535>double <00:16:52.675>count <00:16:52.815>and <00:16:52.955>the <00:16:53.095>quadruplet <00:16:53.235>count.

350
00:16:54.355 --> 00:16:56.215
<00:16:54.355>So <00:16:54.555>whenever <00:16:54.755>I <00:16:54.955>click, <00:16:55.155>we <00:16:55.355>see <00:16:55.555>that <00:16:55.755>it's

351
00:16:57.145 --> 00:16:58.995
<00:16:57.145>increment <00:16:57.425>incorrectly <00:16:57.704>based <00:16:57.985>on <00:16:58.265>the <00:16:58.545>value.

352
00:17:02.765 --> 00:17:04.585
<00:17:02.765>The <00:17:03.045>next <00:17:03.324>example <00:17:03.605>that <00:17:03.885>I <00:17:04.165>prepared

353
00:17:04.605 --> 00:17:08.145
<00:17:04.605>for <00:17:04.780>you <00:17:04.954>is <00:17:05.130>about <00:17:05.305>shorthand <00:17:05.480>attributes <00:17:05.655>for <00:17:05.829>passing <00:17:06.005>props.

354
00:17:08.405 --> 00:17:12.145
<00:17:08.405>So <00:17:08.545>again, <00:17:08.685>you <00:17:08.825>can <00:17:08.964>see <00:17:09.105>here <00:17:09.244>you <00:17:09.385>can <00:17:09.524>also <00:17:09.665>import, <00:17:09.805>um,

355
00:17:12.315 --> 00:17:14.705
<00:17:12.315>components <00:17:12.595>from <00:17:12.875>nested <00:17:13.155>for <00:17:13.435>the <00:17:13.715>structures.

356
00:17:14.705 --> 00:17:17.865
<00:17:14.704>That <00:17:14.845>is <00:17:14.984>no <00:17:15.125>problem. <00:17:15.264>If <00:17:15.405>I <00:17:15.544>go <00:17:15.685>into <00:17:15.824>the <00:17:15.964>parent <00:17:16.105>component

357
00:17:17.865 --> 00:17:19.695
<00:17:17.865>that <00:17:18.214>is <00:17:18.565>here, <00:17:18.915>you <00:17:19.265>see

358
00:17:19.695 --> 00:17:22.135
<00:17:19.694>that <00:17:19.895>the <00:17:20.095>parent <00:17:20.294>itself <00:17:20.494>is <00:17:20.694>importing <00:17:20.895>the <00:17:21.095>child

359
00:17:22.795 --> 00:17:24.695
<00:17:22.795>and <00:17:23.075>we're <00:17:23.355>declaring <00:17:23.635>a <00:17:23.915>message <00:17:24.195>hello

360
00:17:24.695 --> 00:17:25.815
<00:17:24.694>from <00:17:25.031>the <00:17:25.367>parent <00:17:25.703>components.

361
00:17:27.345 --> 00:17:29.925
<00:17:27.345>And <00:17:27.520>this <00:17:27.694>is <00:17:27.870>now <00:17:28.045>what's <00:17:28.220>called <00:17:28.395>a <00:17:28.569>shortened <00:17:28.745>attribute.

362
00:17:29.985 --> 00:17:32.965
<00:17:29.985>So <00:17:30.159>instead <00:17:30.334>of <00:17:30.510>needing <00:17:30.685>to <00:17:30.860>write <00:17:31.034>message <00:17:31.209>equals <00:17:31.385>message,

363
00:17:33.055 --> 00:17:34.525
<00:17:33.055>which <00:17:33.716>is <00:17:34.378>repetitive

364
00:17:34.785 --> 00:17:37.285
<00:17:34.785>and <00:17:34.960>is <00:17:35.135>against <00:17:35.310>the <00:17:35.485>concept <00:17:35.660>of <00:17:35.835>swell <00:17:36.010>having <00:17:36.185>tars

365
00:17:37.285 --> 00:17:41.285
<00:17:37.285>and <00:17:37.440>concise <00:17:37.596>code, <00:17:37.751>we <00:17:37.907>can <00:17:38.062>just <00:17:38.218>shorten <00:17:38.373>this <00:17:38.529>two <00:17:38.685>message.

366
00:17:41.585 --> 00:17:44.845
<00:17:41.585>And <00:17:41.785>this, <00:17:41.985>this <00:17:42.185>doesn't <00:17:42.385>look <00:17:42.585>very <00:17:42.785>powerful <00:17:42.985>yet,

367
00:17:44.905 --> 00:17:48.165
<00:17:44.905>but <00:17:45.138>think <00:17:45.371>about <00:17:45.605>having <00:17:45.838>multiple <00:17:46.071>properties <00:17:46.305>on

368
00:17:48.595 --> 00:17:50.445
<00:17:48.595>that <00:17:48.875>are <00:17:49.155>passed <00:17:49.435>into <00:17:49.715>a <00:17:49.995>component.

369
00:17:50.545 --> 00:17:52.925
<00:17:50.545>So <00:17:50.685>then <00:17:50.825>you're <00:17:50.965>saving <00:17:51.105>a <00:17:51.245>lot <00:17:51.385>of <00:17:51.525>lines <00:17:51.665>of <00:17:51.805>code <00:17:51.945>actually.

370
00:17:53.905 --> 00:17:56.325
<00:17:53.905>So <00:17:54.138>when <00:17:54.371>I <00:17:54.605>go <00:17:54.838>into <00:17:55.071>the <00:17:55.305>child,

371
00:17:56.385 --> 00:17:58.765
<00:17:56.385>we <00:17:56.585>see <00:17:56.785>it's <00:17:56.985>again <00:17:57.185>a <00:17:57.385>ts <00:17:57.585>script <00:17:57.785>block

372
00:17:58.865 --> 00:18:01.925
<00:17:58.865>and <00:17:59.040>we <00:17:59.215>are <00:17:59.390>receiving <00:17:59.565>the <00:17:59.740>message <00:17:59.915>from <00:18:00.090>the <00:18:00.265>parent

373
00:18:02.345 --> 00:18:04.405
<00:18:02.345>by <00:18:02.811>saying <00:18:03.278>export <00:18:03.745>lead.

374
00:18:04.945 --> 00:18:09.525
<00:18:04.945>So <00:18:05.085>in <00:18:05.225>this <00:18:05.365>case, <00:18:05.504>the <00:18:05.645>export, <00:18:05.784>um, <00:18:05.925>syntax <00:18:06.064>is <00:18:06.205>actually <00:18:06.345>kind

375
00:18:09.525 --> 00:18:12.645
<00:18:09.525>of <00:18:09.700>misused, <00:18:09.875>but <00:18:10.050>it <00:18:10.225>works <00:18:10.400>very <00:18:10.575>well <00:18:10.750>in <00:18:10.925>in,

376
00:18:13.025 --> 00:18:14.165
<00:18:13.025>in <00:18:13.367>actually <00:18:13.709>writing <00:18:14.051>code.

377
00:18:14.265 --> 00:18:17.285
<00:18:14.265>So <00:18:14.440>whenever <00:18:14.615>we <00:18:14.790>say <00:18:14.965>export <00:18:15.140>lead, <00:18:15.315>we <00:18:15.490>can <00:18:15.665>receive

378
00:18:17.805 --> 00:18:19.525
<00:18:17.805>a <00:18:18.155>prop <00:18:18.505>from <00:18:18.855>the <00:18:19.205>parent

379
00:18:20.305 --> 00:18:22.365
<00:18:20.305>and <00:18:20.585>this <00:18:20.865>blue <00:18:21.145>is <00:18:21.425>equals <00:18:21.705>true,

380
00:18:22.365 --> 00:18:24.005
<00:18:22.365>on <00:18:22.565>the <00:18:22.765>other <00:18:22.965>hand <00:18:23.165>is <00:18:23.365>a <00:18:23.565>low <00:18:23.765>state.

381
00:18:24.345 --> 00:18:28.765
<00:18:24.345>So <00:18:24.485>we <00:18:24.625>can <00:18:24.765>see <00:18:24.905>this <00:18:25.045>is <00:18:25.185>another <00:18:25.325>shorthand <00:18:25.465>attribute <00:18:25.605>in <00:18:25.745>this

382
00:18:28.765 --> 00:18:30.765
<00:18:28.765>case <00:18:28.998>for <00:18:29.231>cla, <00:18:29.465>for <00:18:29.698>setting <00:18:29.931>the <00:18:30.165>class.

383
00:18:31.545 --> 00:18:33.925
<00:18:31.545>So <00:18:31.700>when <00:18:31.856>the, <00:18:32.011>when <00:18:32.167>the <00:18:32.322>value <00:18:32.478>of <00:18:32.633>blue <00:18:32.789>is <00:18:32.945>true,

384
00:18:34.185 --> 00:18:37.525
<00:18:34.185>we <00:18:34.385>can <00:18:34.585>also <00:18:34.784>set <00:18:34.985>this <00:18:35.185>blue <00:18:35.385>to, <00:18:35.585>um,

385
00:18:37.785 --> 00:18:39.565
<00:18:37.785>to <00:18:38.065>be <00:18:38.345>applied <00:18:38.625>to <00:18:38.905>the <00:18:39.185>button.

386
00:18:43.265 --> 00:18:44.565
<00:18:43.265>The <00:18:43.499>next <00:18:43.733>example <00:18:43.967>that <00:18:44.201>I <00:18:44.435>have

387
00:18:44.565 --> 00:18:47.085
<00:18:44.565>for <00:18:44.798>you <00:18:45.031>is <00:18:45.265>about <00:18:45.498>global <00:18:45.731>state <00:18:45.965>management.

388
00:18:47.505 --> 00:18:51.005
<00:18:47.505>So <00:18:47.660>if <00:18:47.816>you <00:18:47.971>think <00:18:48.127>about <00:18:48.282>other <00:18:48.438>libraries <00:18:48.593>like <00:18:48.749>Angular <00:18:48.905>React

389
00:18:51.025 --> 00:18:54.845
<00:18:51.025>and <00:18:51.180>View, <00:18:51.336>you <00:18:51.491>always <00:18:51.647>certainly <00:18:51.802>need <00:18:51.958>a <00:18:52.113>third <00:18:52.269>party <00:18:52.425>library

390
00:18:55.035 --> 00:18:59.805
<00:18:55.035>like <00:18:55.175>let's <00:18:55.315>say, <00:18:55.455>um, <00:18:55.595>UX <00:18:55.735>or <00:18:55.875>also <00:18:56.015>Redux, <00:18:56.155>which <00:18:56.295>is <00:18:56.435>complicated

391
00:18:59.865 --> 00:19:02.445
<00:18:59.865>and <00:19:00.005>probably <00:19:00.145>takes <00:19:00.285>you <00:19:00.425>like <00:19:00.565>one <00:19:00.705>or <00:19:00.845>two <00:19:00.985>months <00:19:01.125>to <00:19:01.265>learn.

392
00:19:03.465 --> 00:19:07.845
<00:19:03.465>But <00:19:03.620>um, <00:19:03.776>swell <00:19:03.931>has, <00:19:04.087>um, <00:19:04.242>the <00:19:04.398>concept <00:19:04.553>of <00:19:04.709>stores <00:19:04.865>already

393
00:19:08.505 --> 00:19:09.565
<00:19:08.505>out <00:19:08.695>of <00:19:08.886>the <00:19:09.077>box <00:19:09.268>for <00:19:09.459>you.

394
00:19:10.145 --> 00:19:13.645
<00:19:10.145>So <00:19:10.272>here <00:19:10.399>we <00:19:10.526>can <00:19:10.654>see <00:19:10.781>that <00:19:10.908>I <00:19:11.035>have <00:19:11.163>defined <00:19:11.290>a <00:19:11.417>stores <00:19:11.545>chairs,

395
00:19:15.035 --> 00:19:19.625
<00:19:15.035>which <00:19:15.151>has <00:19:15.268>an <00:19:15.385>is <00:19:15.501>dev, <00:19:15.618>um, <00:19:15.735>state <00:19:15.851>for <00:19:15.968>us <00:19:16.085>that <00:19:16.201>to <00:19:16.318>be <00:19:16.435>used.

396
00:19:20.125 --> 00:19:21.465
<00:19:20.125>And <00:19:20.297>the <00:19:20.469>way <00:19:20.641>we <00:19:20.814>do <00:19:20.986>this <00:19:21.158>is <00:19:21.331>we,

397
00:19:21.485 --> 00:19:24.465
<00:19:21.485>we <00:19:21.685>have <00:19:21.885>this <00:19:22.084>rideable <00:19:22.284>from <00:19:22.485>swell <00:19:22.685>store <00:19:22.885>module.

398
00:19:25.245 --> 00:19:28.345
<00:19:25.245>And <00:19:25.372>here <00:19:25.499>I <00:19:25.626>really <00:19:25.754>only <00:19:25.881>have <00:19:26.008>this, <00:19:26.135>this <00:19:26.263>staff <00:19:26.390>state <00:19:26.517>that <00:19:26.645>um,

399
00:19:28.565 --> 00:19:31.225
<00:19:28.565>is <00:19:28.765>checking <00:19:28.965>if <00:19:29.165>the <00:19:29.365>node <00:19:29.565>environment <00:19:29.765>is <00:19:29.965>development

400
00:19:31.285 --> 00:19:32.305
<00:19:31.285>or <00:19:31.514>if <00:19:31.744>it's <00:19:31.973>something <00:19:32.203>else.

401
00:19:33.975 --> 00:19:35.435
<00:19:33.975>And <00:19:34.303>so <00:19:34.631>we're <00:19:34.960>importing <00:19:35.289>this

402
00:19:35.975 --> 00:19:38.235
<00:19:35.975>and <00:19:36.175>here <00:19:36.375>we <00:19:36.574>have <00:19:36.774>to <00:19:36.975>use <00:19:37.175>the <00:19:37.375>store

403
00:19:38.305 --> 00:19:41.955
<00:19:38.305>with <00:19:38.445>a <00:19:38.585>dollar <00:19:38.725>sign <00:19:38.865>in <00:19:39.005>front <00:19:39.145>of <00:19:39.285>it <00:19:39.425>to <00:19:39.565>actually <00:19:39.705>subscribe

404
00:19:42.015 --> 00:19:45.035
<00:19:42.015>to <00:19:42.190>the <00:19:42.365>store, <00:19:42.540>which <00:19:42.715>could <00:19:42.890>change <00:19:43.065>values <00:19:43.240>in <00:19:43.415>between.

405
00:19:46.015 --> 00:19:49.075
<00:19:46.015>And <00:19:46.295>Swell <00:19:46.575>also <00:19:46.855>handles <00:19:47.135>the <00:19:47.415>unsubscribing

406
00:19:49.075 --> 00:19:50.435
<00:19:49.075>automatically <00:19:49.687>for <00:19:50.299>you.

407
00:19:50.855 --> 00:19:53.355
<00:19:50.855>So <00:19:51.030>there <00:19:51.205>won't <00:19:51.380>be <00:19:51.555>ever <00:19:51.730>be <00:19:51.905>any <00:19:52.080>memory <00:19:52.255>leaks.

408
00:19:54.635 --> 00:19:57.895
<00:19:54.635>And <00:19:54.835>we <00:19:55.035>can <00:19:55.235>see <00:19:55.435>on <00:19:55.635>the <00:19:55.835>page <00:19:56.035>that

409
00:19:58.755 --> 00:20:02.095
<00:19:58.755>we <00:19:58.930>are <00:19:59.105>now <00:19:59.280>showing <00:19:59.455>this <00:19:59.630>paragraph <00:19:59.805>in <00:19:59.980>development <00:20:00.155>mode.

410
00:20:03.105 --> 00:20:04.965
<00:20:03.105>And <00:20:03.305>if <00:20:03.505>I <00:20:03.705>come <00:20:03.905>to <00:20:04.105>the <00:20:04.305>terminal <00:20:04.505>here,

411
00:20:04.965 --> 00:20:09.765
<00:20:04.965>which <00:20:05.105>is <00:20:05.245>running <00:20:05.385>Swell <00:20:05.524>kit, <00:20:05.665>I <00:20:05.804>will <00:20:05.945>run <00:20:06.084>the <00:20:06.225>production <00:20:06.365>build

412
00:20:09.785 --> 00:20:13.485
<00:20:09.785>for <00:20:09.912>a <00:20:10.039>moment <00:20:10.166>and <00:20:10.294>you <00:20:10.421>will <00:20:10.548>see <00:20:10.675>this <00:20:10.803>is <00:20:10.930>super, <00:20:11.057>super <00:20:11.185>fast.

413
00:20:14.185 --> 00:20:17.085
<00:20:14.185>So <00:20:14.418>it's <00:20:14.651>running <00:20:14.885>our <00:20:15.118>production <00:20:15.351>bundle <00:20:15.585>in,

414
00:20:17.475 --> 00:20:18.685
<00:20:17.475>it's <00:20:17.747>not <00:20:18.019>even <00:20:18.291>six <00:20:18.563>seconds.

415
00:20:20.305 --> 00:20:24.405
<00:20:20.305>And <00:20:20.445>with <00:20:20.585>yarn <00:20:20.725>start <00:20:20.865>I <00:20:21.005>can <00:20:21.145>actually, <00:20:21.285>um, <00:20:21.425>run <00:20:21.565>it, <00:20:21.705>oh,

416
00:20:24.575 --> 00:20:25.845
<00:20:24.575>wrong <00:20:25.718>screen.

417
00:20:26.545 --> 00:20:28.405
<00:20:26.545>And <00:20:26.778>now <00:20:27.011>you <00:20:27.245>see <00:20:27.478>it <00:20:27.711>already <00:20:27.945>refreshed

418
00:20:28.405 --> 00:20:31.605
<00:20:28.405>for <00:20:28.532>us <00:20:28.659>in <00:20:28.786>the <00:20:28.914>background <00:20:29.041>and <00:20:29.168>it's <00:20:29.295>the <00:20:29.423>paragraph <00:20:29.550>is <00:20:29.677>now <00:20:29.805>shown

419
00:20:31.705 --> 00:20:35.235
<00:20:31.705>for <00:20:31.938>production <00:20:32.171>mode, <00:20:32.405>which <00:20:32.638>is <00:20:32.871>this <00:20:33.105>part.

420
00:20:37.655 --> 00:20:39.235
<00:20:37.655>The <00:20:37.935>next <00:20:38.215>example <00:20:38.495>that <00:20:38.774>I <00:20:39.055>prepared

421
00:20:39.235 --> 00:20:43.035
<00:20:39.235>for <00:20:39.390>you <00:20:39.546>is <00:20:39.701>about <00:20:39.857>Asing <00:20:40.012>Await <00:20:40.168>or <00:20:40.323>promises <00:20:40.479>in <00:20:40.635>general.

422
00:20:43.335 --> 00:20:46.635
<00:20:43.335>So <00:20:43.442>we <00:20:43.550>can <00:20:43.658>see <00:20:43.765>here <00:20:43.873>that <00:20:43.981>I <00:20:44.088>have <00:20:44.196>a <00:20:44.304>click <00:20:44.411>count <00:20:44.519>that <00:20:44.627>is <00:20:44.735>zero.

423
00:20:46.635 --> 00:20:49.605
<00:20:46.635>Initially <00:20:46.915>we <00:20:47.195>have <00:20:47.475>a <00:20:47.754>async <00:20:48.035>function

424
00:20:49.705 --> 00:20:52.285
<00:20:49.705>of <00:20:49.879>just <00:20:50.054>getting <00:20:50.230>a <00:20:50.405>random <00:20:50.580>number <00:20:50.754>with <00:20:50.929>math <00:20:51.105>random,

425
00:20:53.265 --> 00:20:55.925
<00:20:53.265>and <00:20:53.420>if <00:20:53.576>our <00:20:53.731>click <00:20:53.887>count <00:20:54.042>would <00:20:54.198>be <00:20:54.353>more <00:20:54.509>than <00:20:54.665>one,

426
00:20:55.985 --> 00:20:58.725
<00:20:55.985>we <00:20:56.218>would <00:20:56.451>reject <00:20:56.685>the <00:20:56.918>Promise <00:20:57.151>and <00:20:57.385>other.

427
00:20:58.835 --> 00:21:01.605
<00:20:58.835>Otherwise <00:20:59.035>we <00:20:59.235>would <00:20:59.435>just <00:20:59.635>fake <00:20:59.835>a <00:21:00.035>promise <00:21:00.235>here

428
00:21:01.605 --> 00:21:04.645
<00:21:01.605>and <00:21:01.760>resolve <00:21:01.916>the <00:21:02.071>value <00:21:02.227>of <00:21:02.382>math <00:21:02.538>random <00:21:02.693>after <00:21:02.849>one <00:21:03.005>second.

429
00:21:06.225 --> 00:21:08.265
<00:21:06.225>And <00:21:06.365>on <00:21:06.504>hand <00:21:06.645>the <00:21:06.784>click, <00:21:06.925>we <00:21:07.064>would <00:21:07.205>increment <00:21:07.344>the <00:21:07.485>click <00:21:07.625>counter

430
00:21:08.885 --> 00:21:10.265
<00:21:08.885>and <00:21:09.299>refresh <00:21:09.713>the <00:21:10.127>promise.

431
00:21:11.865 --> 00:21:15.085
<00:21:11.865>Um, <00:21:11.981>and <00:21:12.098>this <00:21:12.215>is <00:21:12.331>actually <00:21:12.448>the <00:21:12.565>syntax <00:21:12.681>that <00:21:12.798>I <00:21:12.915>want <00:21:13.031>to <00:21:13.148>show <00:21:13.265>you.

432
00:21:15.225 --> 00:21:19.125
<00:21:15.225>So <00:21:15.380>instead <00:21:15.536>of <00:21:15.691>having <00:21:15.847>to <00:21:16.002>set <00:21:16.158>separate <00:21:16.313>states <00:21:16.469>for, <00:21:16.625>um,

433
00:21:19.555 --> 00:21:23.005
<00:21:19.555>loading <00:21:19.755>error <00:21:19.955>and <00:21:20.155>also <00:21:20.355>re <00:21:20.555>the <00:21:20.755>Resolved <00:21:20.955>state,

434
00:21:23.545 --> 00:21:25.445
<00:21:23.545>we <00:21:23.745>can <00:21:23.945>just <00:21:24.145>have <00:21:24.345>an <00:21:24.545>wait <00:21:24.745>at <00:21:24.945>then

435
00:21:25.445 --> 00:21:27.825
<00:21:25.445>and <00:21:25.678>the <00:21:25.911>catch <00:21:26.145>block <00:21:26.378>in <00:21:26.611>Swell, <00:21:26.845>um,

436
00:21:27.825 --> 00:21:29.425
<00:21:27.825>which <00:21:28.058>would <00:21:28.291>be <00:21:28.525>the <00:21:28.758>equivalent <00:21:28.991>of <00:21:29.225>that.

437
00:21:29.645 --> 00:21:33.625
<00:21:29.645>And <00:21:29.845>to <00:21:30.045>show <00:21:30.245>you <00:21:30.445>this <00:21:30.645>how <00:21:30.845>it <00:21:31.045>looks,

438
00:21:34.085 --> 00:21:36.905
<00:21:34.085>it <00:21:34.260>would <00:21:34.435>look <00:21:34.610>like <00:21:34.785>that <00:21:34.960>on <00:21:35.135>the <00:21:35.310>initial <00:21:35.485>mounting

439
00:21:36.905 --> 00:21:39.545
<00:21:36.905>of <00:21:37.080>the <00:21:37.254>component <00:21:37.430>where <00:21:37.605>we <00:21:37.780>already <00:21:37.955>saw <00:21:38.129>the <00:21:38.305>weighting

440
00:21:39.545 --> 00:21:40.905
<00:21:39.545>and <00:21:39.789>now <00:21:40.034>the <00:21:40.279>promise <00:21:40.524>was <00:21:40.769>resolved.

441
00:21:41.725 --> 00:21:44.305
<00:21:41.725>If <00:21:41.958>a <00:21:42.191>click <00:21:42.425>once <00:21:42.658>generate <00:21:42.891>random <00:21:43.125>number,

442
00:21:44.395 --> 00:21:46.585
<00:21:44.395>we're <00:21:44.628>again <00:21:44.861>landing <00:21:45.095>in <00:21:45.328>the <00:21:45.561>loading <00:21:45.795>state

443
00:21:46.645 --> 00:21:48.465
<00:21:46.645>and <00:21:46.995>then <00:21:47.345>resolving <00:21:47.695>it <00:21:48.045>successfully.

444
00:21:49.245 --> 00:21:51.385
<00:21:49.245>And <00:21:49.445>if <00:21:49.645>I <00:21:49.844>click <00:21:50.044>once <00:21:50.245>more, <00:21:50.445>we <00:21:50.645>see

445
00:21:51.385 --> 00:21:55.555
<00:21:51.385>that <00:21:51.525>we're <00:21:51.665>landing <00:21:51.805>in <00:21:51.945>the <00:21:52.085>too <00:21:52.225>many <00:21:52.365>clicks, <00:21:52.504>um, <00:21:52.645>catch <00:21:52.785>block

446
00:21:55.585 --> 00:21:57.635
<00:21:55.585>because <00:21:55.818>we <00:21:56.051>clicked <00:21:56.285>more <00:21:56.518>than <00:21:56.751>one <00:21:56.985>time.

447
00:22:01.505 --> 00:22:06.275
<00:22:01.505>Yeah, <00:22:01.680>since, <00:22:01.855>um, <00:22:02.030>SW <00:22:02.205>is <00:22:02.380>actually <00:22:02.555>used <00:22:02.730>for <00:22:02.905>animations

448
00:22:06.455 --> 00:22:10.115
<00:22:06.455>and <00:22:06.629>complex <00:22:06.804>data <00:22:06.980>visualizations, <00:22:07.155>this <00:22:07.330>is <00:22:07.504>one <00:22:07.679>definitely <00:22:07.855>one

449
00:22:10.115 --> 00:22:12.835
<00:22:10.115>of <00:22:10.348>the <00:22:10.581>strongest <00:22:10.815>points <00:22:11.048>of, <00:22:11.281>uh, <00:22:11.515>swell.

450
00:22:12.975 --> 00:22:16.195
<00:22:12.975>So <00:22:13.208>here <00:22:13.441>we're <00:22:13.675>importing <00:22:13.908>the <00:22:14.141>spring, <00:22:14.375>um,

451
00:22:16.195 --> 00:22:18.715
<00:22:16.195>animation <00:22:16.475>from <00:22:16.754>the <00:22:17.034>swell <00:22:17.314>motion <00:22:17.595>module,

452
00:22:19.695 --> 00:22:24.035
<00:22:19.695>and <00:22:19.850>we're <00:22:20.006>setting <00:22:20.161>coordinates <00:22:20.317>to <00:22:20.472>50 <00:22:20.628>x <00:22:20.783>and <00:22:20.939>50 <00:22:21.095>Y

453
00:22:24.295 --> 00:22:27.555
<00:22:24.295>and <00:22:24.528>we're, <00:22:24.761>um, <00:22:24.995>using <00:22:25.228>the <00:22:25.461>configuration <00:22:25.695>options

454
00:22:27.575 --> 00:22:29.875
<00:22:27.575>for <00:22:27.775>the <00:22:27.975>spring <00:22:28.175>store <00:22:28.375>with <00:22:28.575>stiffness <00:22:28.775>and <00:22:28.975>damping

455
00:22:30.415 --> 00:22:34.835
<00:22:30.415>and <00:22:30.542>also <00:22:30.669>setting <00:22:30.796>an <00:22:30.924>initial <00:22:31.051>size <00:22:31.178>of <00:22:31.305>10 <00:22:31.433>for, <00:22:31.560>for <00:22:31.687>the <00:22:31.815>size

456
00:22:35.855 --> 00:22:37.075
<00:22:35.855>and <00:22:36.129>then <00:22:36.404>having <00:22:36.678>an <00:22:36.953>SVG

457
00:22:37.075 --> 00:22:38.475
<00:22:37.075>where <00:22:37.255>we <00:22:37.435>have <00:22:37.615>some <00:22:37.795>event <00:22:37.975>handles <00:22:38.155>on <00:22:38.335>it.

458
00:22:39.255 --> 00:22:44.155
<00:22:39.255>And <00:22:39.410>yeah, <00:22:39.566>to <00:22:39.721>actually <00:22:39.877>showcase <00:22:40.032>you <00:22:40.188>what <00:22:40.343>this <00:22:40.499>is <00:22:40.655>doing,

459
00:22:45.285 --> 00:22:50.255
<00:22:45.285>I <00:22:45.460>created <00:22:45.635>this <00:22:45.810>example <00:22:45.985>which <00:22:46.160>is <00:22:46.335>behaving <00:22:46.510>like, <00:22:46.685>uh,

460
00:22:51.185 --> 00:22:52.755
<00:22:51.185>like <00:22:51.534>a <00:22:51.885>basketball <00:22:52.235>for <00:22:52.585>example.

461
00:22:53.495 --> 00:22:56.435
<00:22:53.495>And <00:22:53.669>you <00:22:53.844>see <00:22:54.020>there's <00:22:54.195>no <00:22:54.370>performance <00:22:54.544>issues <00:22:54.719>at <00:22:54.895>all.

462
00:22:56.465 --> 00:22:58.035
<00:22:56.465>It's <00:22:56.814>re <00:22:57.165>rendering <00:22:57.514>super <00:22:57.865>smooth.

463
00:22:58.775 --> 00:23:01.005
<00:22:58.775>And <00:22:59.055>if <00:22:59.335>you <00:22:59.615>were <00:22:59.895>wondering <00:23:00.175>like

464
00:23:01.465 --> 00:23:04.205
<00:23:01.465>who <00:23:01.639>would <00:23:01.814>ever <00:23:01.990>use <00:23:02.165>this <00:23:02.340>in <00:23:02.514>a <00:23:02.689>production <00:23:02.865>application,

465
00:23:04.885 --> 00:23:06.685
<00:23:04.885>I <00:23:05.085>actually <00:23:05.285>have <00:23:05.485>the <00:23:05.685>perfect <00:23:05.885>example <00:23:06.085>for <00:23:06.285>you.

466
00:23:06.865 --> 00:23:10.805
<00:23:06.865>So <00:23:06.981>this <00:23:07.098>is <00:23:07.215>one <00:23:07.331>of <00:23:07.448>the <00:23:07.565>client <00:23:07.681>websites <00:23:07.798>that <00:23:07.915>I <00:23:08.031>was <00:23:08.148>working <00:23:08.265>on,

467
00:23:10.865 --> 00:23:14.005
<00:23:10.865>and <00:23:11.065>you <00:23:11.265>can <00:23:11.465>see <00:23:11.665>he <00:23:11.865>was <00:23:12.065>demanding <00:23:12.265>that

468
00:23:14.885 --> 00:23:16.805
<00:23:14.885>I <00:23:15.085>implement <00:23:15.285>the <00:23:15.485>cursor <00:23:15.685>to <00:23:15.885>be <00:23:16.085>a <00:23:16.285>dot.

469
00:23:16.805 --> 00:23:18.725
<00:23:16.805>And <00:23:17.085>when <00:23:17.365>you're <00:23:17.645>hovering <00:23:17.925>over <00:23:18.205>links

470
00:23:18.745 --> 00:23:20.445
<00:23:18.745>or <00:23:19.024>when <00:23:19.304>you're <00:23:19.584>hovering <00:23:19.864>over <00:23:20.145>buttons

471
00:23:20.445 --> 00:23:22.085
<00:23:20.445>that <00:23:20.645>you <00:23:20.845>would <00:23:21.044>have <00:23:21.245>this <00:23:21.445>kind <00:23:21.645>of <00:23:21.845>animation.

472
00:23:25.575 --> 00:23:28.035
<00:23:25.575>The <00:23:25.750>last <00:23:25.925>example <00:23:26.100>that <00:23:26.275>prepared <00:23:26.450>for <00:23:26.625>you <00:23:26.800>is <00:23:26.975>about,

473
00:23:28.215 --> 00:23:29.275
<00:23:28.215>um, <00:23:29.169>transitions.

474
00:23:29.535 --> 00:23:33.995
<00:23:29.535>And <00:23:29.675>this <00:23:29.815>is <00:23:29.955>not <00:23:30.095>as <00:23:30.235>flashy <00:23:30.375>as <00:23:30.515>the <00:23:30.655>the <00:23:30.795>Jumping <00:23:30.935>Ball,

475
00:23:34.535 --> 00:23:37.915
<00:23:34.535>but <00:23:34.690>transitions <00:23:34.846>is <00:23:35.001>something <00:23:35.157>that <00:23:35.312>is <00:23:35.468>often <00:23:35.623>a <00:23:35.779>requirement <00:23:35.935>in

476
00:23:38.555 --> 00:23:40.595
<00:23:38.555>a <00:23:38.788>a <00:23:39.021>day <00:23:39.255>to <00:23:39.488>day-to-day, <00:23:39.721>um, <00:23:39.955>development.

477
00:23:41.695 --> 00:23:43.715
<00:23:41.695>So <00:23:41.895>here <00:23:42.095>we <00:23:42.294>are <00:23:42.495>having <00:23:42.695>a <00:23:42.895>fade <00:23:43.095>animation

478
00:23:43.825 --> 00:23:46.125
<00:23:43.825>that <00:23:44.025>is <00:23:44.225>from <00:23:44.425>the <00:23:44.625>swell <00:23:44.825>transitions, <00:23:45.025>uh, <00:23:45.225>module,

479
00:23:46.825 --> 00:23:48.365
<00:23:46.825>and <00:23:47.056>we <00:23:47.287>have <00:23:47.518>the <00:23:47.749>should <00:23:47.980>fade <00:23:48.211>in,

480
00:23:48.365 --> 00:23:49.925
<00:23:48.365>which <00:23:48.715>is <00:23:49.065>initialized <00:23:49.415>with <00:23:49.765>false.

481
00:23:50.705 --> 00:23:52.765
<00:23:50.705>We <00:23:50.938>have <00:23:51.171>a <00:23:51.405>button <00:23:51.638>that <00:23:51.871>is <00:23:52.105>toggling,

482
00:23:52.835 --> 00:23:54.205
<00:23:52.835>this <00:23:53.143>should <00:23:53.451>fade <00:23:53.759>in <00:23:54.068>value.

483
00:23:55.105 --> 00:23:57.205
<00:23:55.105>And <00:23:55.305>if <00:23:55.505>we <00:23:55.705>actually <00:23:55.905>want <00:23:56.105>to <00:23:56.305>fade <00:23:56.505>in,

484
00:23:57.505 --> 00:24:00.205
<00:23:57.505>we <00:23:57.705>are <00:23:57.905>looping <00:23:58.105>here <00:23:58.305>just <00:23:58.505>over <00:23:58.705>five <00:23:58.905>numbers.

485
00:24:00.825 --> 00:24:04.645
<00:24:00.825>And <00:24:01.000>this <00:24:01.175>will <00:24:01.350>generate <00:24:01.525>us <00:24:01.700>five <00:24:01.875>different <00:24:02.050>P <00:24:02.225>tags

486
00:24:04.995 --> 00:24:06.725
<00:24:04.995>with <00:24:05.461>an <00:24:05.928>incrementing <00:24:06.395>duration.

487
00:24:07.425 --> 00:24:09.485
<00:24:07.425>And <00:24:07.580>again, <00:24:07.736>I <00:24:07.891>want <00:24:08.047>to <00:24:08.202>show <00:24:08.358>you <00:24:08.513>how <00:24:08.669>this <00:24:08.825>looks.

488
00:24:10.845 --> 00:24:12.545
<00:24:10.845>So <00:24:11.125>here <00:24:11.405>we <00:24:11.685>have <00:24:11.965>this <00:24:12.245>button

489
00:24:12.725 --> 00:24:15.785
<00:24:12.725>and <00:24:12.880>when <00:24:13.036>I <00:24:13.191>click <00:24:13.347>it, <00:24:13.502>we <00:24:13.658>will <00:24:13.813>have <00:24:13.969>a <00:24:14.125>kind

490
00:24:15.785 --> 00:24:19.745
<00:24:15.785>of <00:24:16.018>staggering <00:24:16.251>fade <00:24:16.485>in <00:24:16.718>of <00:24:16.951>five <00:24:17.185>paragraphs

491
00:24:19.775 --> 00:24:20.865
<00:24:19.775>with <00:24:20.020>now <00:24:20.265>you <00:24:20.510>see <00:24:20.756>me

492
00:24:21.565 --> 00:24:23.865
<00:24:21.565>and <00:24:21.740>the <00:24:21.915>same <00:24:22.090>also <00:24:22.265>goes <00:24:22.440>in <00:24:22.615>the <00:24:22.790>other <00:24:22.965>direction.

493
00:24:23.885 --> 00:24:26.785
<00:24:23.885>So <00:24:24.001>you <00:24:24.118>see <00:24:24.235>here <00:24:24.351>the <00:24:24.468>first <00:24:24.585>one <00:24:24.701>will <00:24:24.818>fade <00:24:24.935>out <00:24:25.051>the <00:24:25.168>the <00:24:25.285>first

494
00:24:26.885 --> 00:24:29.125
<00:24:26.885>and <00:24:27.351>then <00:24:27.818>like <00:24:28.285>that.

495
00:24:31.235 --> 00:24:34.565
<00:24:31.235>Yeah. <00:24:31.390>And <00:24:31.546>another <00:24:31.701>thing <00:24:31.857>that <00:24:32.012>is <00:24:32.168>really <00:24:32.323>cool <00:24:32.479>about <00:24:32.635>um,

496
00:24:35.175 --> 00:24:38.125
<00:24:35.175>sweat <00:24:35.350>kit <00:24:35.524>here <00:24:35.700>is <00:24:35.875>if <00:24:36.050>I <00:24:36.225>empty <00:24:36.399>the <00:24:36.575>cache

497
00:24:38.125 --> 00:24:40.085
<00:24:38.125>and <00:24:38.405>hardware <00:24:38.685>load, <00:24:38.965>you <00:24:39.245>will <00:24:39.525>see

498
00:24:40.425 --> 00:24:43.085
<00:24:40.425>how <00:24:40.658>small <00:24:40.891>the <00:24:41.125>bundle <00:24:41.358>size <00:24:41.591>is <00:24:41.825>here

499
00:24:43.145 --> 00:24:44.925
<00:24:43.145>for <00:24:43.611>the <00:24:44.078>production <00:24:44.545>application.

500
00:24:45.825 --> 00:24:50.765
<00:24:45.825>So <00:24:45.980>we <00:24:46.136>are <00:24:46.291>really <00:24:46.447>running <00:24:46.602>here <00:24:46.758>only <00:24:46.913>on <00:24:47.069>30 <00:24:47.225>KB

501
00:24:50.765 --> 00:24:53.645
<00:24:50.765>that <00:24:50.905>are <00:24:51.045>transferred <00:24:51.185>over <00:24:51.325>the <00:24:51.465>network <00:24:51.605>with <00:24:51.745>a, <00:24:51.885>with <00:24:52.025>a <00:24:52.165>total

502
00:24:53.645 --> 00:24:54.685
<00:24:53.645>of <00:24:54.113>nine <00:24:54.581>requests.

503
00:24:55.145 --> 00:24:56.605
<00:24:55.145>Yes, <00:24:55.407>this <00:24:55.670>is <00:24:55.933>a <00:24:56.196>small <00:24:56.459>application,

504
00:24:57.345 --> 00:25:00.725
<00:24:57.345>but <00:24:57.500>in <00:24:57.656>the <00:24:57.811>end, <00:24:57.967>uh, <00:24:58.122>there's <00:24:58.278>not <00:24:58.433>not <00:24:58.589>many <00:24:58.745>frameworks

505
00:25:00.725 --> 00:25:03.205
<00:25:00.725>who <00:25:00.865>can <00:25:01.004>go <00:25:01.145>down <00:25:01.284>to <00:25:01.425>a <00:25:01.564>total <00:25:01.705>size <00:25:01.844>of <00:25:01.985>30 <00:25:02.125>kb.

506
00:25:03.205 --> 00:25:05.045
<00:25:03.205>And <00:25:03.485>this <00:25:03.764>is <00:25:04.044>great <00:25:04.324>for <00:25:04.605>users

507
00:25:05.185 --> 00:25:07.045
<00:25:05.185>who <00:25:05.385>don't <00:25:05.585>have <00:25:05.784>such <00:25:05.985>a <00:25:06.185>great <00:25:06.385>internet <00:25:06.585>connection

508
00:25:07.045 --> 00:25:09.685
<00:25:07.045>or <00:25:07.245>who <00:25:07.445>maybe <00:25:07.645>um, <00:25:07.845>have <00:25:08.045>a <00:25:08.245>metered <00:25:08.445>connection.

509
00:25:10.465 --> 00:25:12.685
<00:25:10.465>So <00:25:10.620>that's <00:25:10.776>also <00:25:10.931>one <00:25:11.087>of <00:25:11.242>the <00:25:11.398>strong <00:25:11.553>points <00:25:11.709>of <00:25:11.865>sweat.

510
00:25:15.635 --> 00:25:20.415
<00:25:15.635>And <00:25:15.735>um, <00:25:15.835>if <00:25:15.935>I <00:25:16.035>go <00:25:16.135>back <00:25:16.235>to <00:25:16.335>my <00:25:16.435>slides <00:25:16.535>now, <00:25:16.635>you <00:25:16.735>saw <00:25:16.835>a <00:25:16.935>lot <00:25:17.035>of,

511
00:25:20.715 --> 00:25:22.535
<00:25:20.715>uh, <00:25:20.995>positive <00:25:21.274>examples <00:25:21.554>of <00:25:21.834>what <00:25:22.115>Sweat,

512
00:25:22.595 --> 00:25:24.255
<00:25:22.595>but <00:25:22.828>I <00:25:23.061>always <00:25:23.295>want <00:25:23.528>to <00:25:23.761>be <00:25:23.995>fair

513
00:25:24.275 --> 00:25:26.815
<00:25:24.275>and <00:25:24.508>also <00:25:24.741>consider <00:25:24.975>what's <00:25:25.208>not <00:25:25.441>so <00:25:25.675>great.

514
00:25:26.995 --> 00:25:30.935
<00:25:26.995>So <00:25:27.111>one <00:25:27.228>thing <00:25:27.344>that <00:25:27.461>is, <00:25:27.578>um, <00:25:27.695>holding <00:25:27.811>back, <00:25:27.928>I <00:25:28.044>guess <00:25:28.161>also <00:25:28.278>a <00:25:28.395>lot

515
00:25:30.935 --> 00:25:33.615
<00:25:30.935>of <00:25:31.135>other, <00:25:31.335>uh, <00:25:31.534>developers <00:25:31.735>from <00:25:31.935>using <00:25:32.135>Sweat <00:25:32.335>is

516
00:25:33.615 --> 00:25:34.935
<00:25:33.615>that <00:25:34.011>the <00:25:34.407>development <00:25:34.803>speed

517
00:25:34.935 --> 00:25:38.855
<00:25:34.935>and <00:25:35.075>decision <00:25:35.215>making <00:25:35.355>is <00:25:35.495>just <00:25:35.635>not <00:25:35.774>up <00:25:35.915>up <00:25:36.054>par <00:25:36.195>with, <00:25:36.335>um,

518
00:25:39.275 --> 00:25:40.735
<00:25:39.275>the <00:25:39.494>bigger <00:25:39.713>libraries <00:25:39.932>that <00:25:40.151>are <00:25:40.370>out <00:25:40.589>there.

519
00:25:40.965 --> 00:25:42.535
<00:25:40.965>There's <00:25:41.431>no <00:25:41.898>corporate <00:25:42.365>backing

520
00:25:42.955 --> 00:25:46.575
<00:25:42.955>and <00:25:43.082>it <00:25:43.209>can <00:25:43.336>sometimes <00:25:43.464>take <00:25:43.591>a <00:25:43.718>while <00:25:43.845>for <00:25:43.973>PRS <00:25:44.100>to <00:25:44.227>be <00:25:44.355>merged.

521
00:25:47.315 --> 00:25:51.455
<00:25:47.315>Um, <00:25:47.490>but <00:25:47.665>this <00:25:47.840>will <00:25:48.015>hopefully <00:25:48.190>also, <00:25:48.365>uh, <00:25:48.540>change <00:25:48.715>with

522
00:25:52.235 --> 00:25:54.775
<00:25:52.235>an <00:25:52.468>increased, <00:25:52.701>um, <00:25:52.935>adaption <00:25:53.168>of <00:25:53.401>the <00:25:53.635>framework.

523
00:25:55.715 --> 00:25:58.495
<00:25:55.715>And <00:25:55.814>one <00:25:55.915>downside <00:25:56.014>that <00:25:56.115>I <00:25:56.215>see <00:25:56.314>with <00:25:56.415>is <00:25:56.514>just <00:25:56.615>that <00:25:56.715>a <00:25:56.814>C <00:25:56.915>SW <00:25:57.014>is <00:25:57.115>just

524
00:25:58.495 --> 00:26:01.695
<00:25:58.495>that <00:25:58.669>it <00:25:58.844>was <00:25:59.020>simply <00:25:59.195>created <00:25:59.370>later <00:25:59.544>than <00:25:59.719>React <00:25:59.895>ang

525
00:26:01.715 --> 00:26:06.015
<00:26:01.715>and <00:26:01.915>View, <00:26:02.115>which, <00:26:02.314>which, <00:26:02.514>um, <00:26:02.715>is <00:26:02.915>a <00:26:03.115>disadvantage

526
00:26:06.015 --> 00:26:10.095
<00:26:06.015>because <00:26:06.190>these <00:26:06.365>libraries <00:26:06.540>were <00:26:06.715>already <00:26:06.890>created <00:26:07.065>at <00:26:07.240>a <00:26:07.415>time

527
00:26:10.105 --> 00:26:12.495
<00:26:10.105>where <00:26:10.338>there <00:26:10.571>was <00:26:10.805>a <00:26:11.038>need <00:26:11.271>for, <00:26:11.505>um,

528
00:26:13.055 --> 00:26:15.055
<00:26:13.055>a <00:26:13.405>good <00:26:13.755>web <00:26:14.105>application <00:26:14.455>framework.

529
00:26:15.115 --> 00:26:17.535
<00:26:15.115>And <00:26:15.315>SW <00:26:15.515>is <00:26:15.715>now <00:26:15.915>coming <00:26:16.115>at <00:26:16.315>a <00:26:16.515>time

530
00:26:17.535 --> 00:26:21.095
<00:26:17.535>where <00:26:17.690>they <00:26:17.846>already <00:26:18.001>took <00:26:18.157>the <00:26:18.312>major <00:26:18.468>share <00:26:18.623>of <00:26:18.779>the <00:26:18.935>market.

531
00:26:22.755 --> 00:26:24.615
<00:26:22.755>Um, <00:26:23.221>another <00:26:23.688>disadvantage <00:26:24.155>is

532
00:26:24.615 --> 00:26:26.215
<00:26:24.615>that <00:26:24.815>there <00:26:25.015>is <00:26:25.215>a <00:26:25.415>lack <00:26:25.615>of <00:26:25.815>available <00:26:26.015>jobs.

533
00:26:26.875 --> 00:26:28.415
<00:26:26.875>Um, <00:26:27.106>this <00:26:27.337>would <00:26:27.568>also <00:26:27.799>change <00:26:28.030>of <00:26:28.261>course

534
00:26:28.445 --> 00:26:30.015
<00:26:28.445>with <00:26:28.725>more <00:26:29.004>adoption <00:26:29.284>of <00:26:29.564>the <00:26:29.845>framework.

535
00:26:30.695 --> 00:26:33.575
<00:26:30.695>I <00:26:30.870>was <00:26:31.044>lucky <00:26:31.220>to <00:26:31.395>find, <00:26:31.570>uh, <00:26:31.745>free <00:26:31.919>client <00:26:32.095>jobs

536
00:26:33.645 --> 00:26:35.615
<00:26:33.645>through <00:26:33.925>the <00:26:34.205>swell <00:26:34.485>Discord <00:26:34.764>jobs <00:26:35.045>channel.

537
00:26:36.115 --> 00:26:38.775
<00:26:36.115>And <00:26:36.270>there's <00:26:36.426>also <00:26:36.581>Swell <00:26:36.737>Jobs <00:26:36.892>Dev <00:26:37.048>in <00:26:37.203>case <00:26:37.359>you're <00:26:37.515>looking.

538
00:26:39.795 --> 00:26:44.245
<00:26:39.795>Um, <00:26:39.950>if <00:26:40.106>you <00:26:40.261>plan <00:26:40.417>on <00:26:40.572>building <00:26:40.728>a <00:26:40.883>big <00:26:41.039>enterprise <00:26:41.195>application

539
00:26:44.355 --> 00:26:48.405
<00:26:44.355>with <00:26:44.495>sales, <00:26:44.635>you <00:26:44.775>might <00:26:44.915>be <00:26:45.055>LA <00:26:45.195>uh, <00:26:45.335>it <00:26:45.475>might <00:26:45.615>be <00:26:45.755>lacking,

540
00:26:48.665 --> 00:26:50.525
<00:26:48.665>you <00:26:48.898>might <00:26:49.131>be <00:26:49.365>lacking <00:26:49.598>the <00:26:49.831>necessary <00:26:50.065>tooling

541
00:26:50.525 --> 00:26:52.805
<00:26:50.525>for <00:26:50.700>it <00:26:50.875>depending <00:26:51.050>on <00:26:51.225>the <00:26:51.400>scale <00:26:51.575>of <00:26:51.750>the <00:26:51.925>project.

542
00:26:53.225 --> 00:26:57.645
<00:26:53.225>Um, <00:26:53.380>in <00:26:53.536>my <00:26:53.691>case, <00:26:53.847>I <00:26:54.002>built <00:26:54.158>a <00:26:54.313>30 <00:26:54.469>pages, <00:26:54.625>uh,

543
00:26:57.645 --> 00:26:59.245
<00:26:57.645>plagiarism <00:26:58.345>checker <00:26:59.045>application

544
00:26:59.785 --> 00:27:02.165
<00:26:59.785>and <00:27:00.065>I <00:27:00.345>always <00:27:00.625>found <00:27:00.905>enough, <00:27:01.185>uh,

545
00:27:02.165 --> 00:27:04.045
<00:27:02.165>third <00:27:02.398>party <00:27:02.631>libraries <00:27:02.865>that <00:27:03.098>worked <00:27:03.331>really <00:27:03.565>great.

546
00:27:04.905 --> 00:27:07.525
<00:27:04.905>You <00:27:05.080>can <00:27:05.254>find <00:27:05.430>everything <00:27:05.605>that <00:27:05.780>is <00:27:05.955>released <00:27:06.129>on <00:27:06.305>made

547
00:27:07.525 --> 00:27:08.685
<00:27:07.525>with <00:27:08.569>swell.com.

548
00:27:10.385 --> 00:27:14.085
<00:27:10.385>Um, <00:27:10.512>if <00:27:10.639>you <00:27:10.766>decide <00:27:10.894>to <00:27:11.021>start <00:27:11.148>a <00:27:11.275>project <00:27:11.403>with, <00:27:11.530>um, <00:27:11.657>swell <00:27:11.785>Kit,

549
00:27:14.085 --> 00:27:16.805
<00:27:14.085>in <00:27:14.240>this <00:27:14.396>case, <00:27:14.551>this <00:27:14.707>would <00:27:14.862>be <00:27:15.018>my <00:27:15.173>recommended <00:27:15.329>tech <00:27:15.485>stack.

550
00:27:16.865 --> 00:27:20.485
<00:27:16.865>So <00:27:16.992>as <00:27:17.119>soon <00:27:17.246>as <00:27:17.374>Swell <00:27:17.501>kit <00:27:17.628>would <00:27:17.755>release, <00:27:17.883>uh, <00:27:18.010>would <00:27:18.137>be <00:27:18.265>stable,

551
00:27:21.265 --> 00:27:22.965
<00:27:21.265>um, <00:27:21.545>you <00:27:21.825>could <00:27:22.105>definitely <00:27:22.385>use <00:27:22.665>this.

552
00:27:23.065 --> 00:27:25.405
<00:27:23.065>So <00:27:23.265>you <00:27:23.465>are <00:27:23.665>already <00:27:23.865>set <00:27:24.065>up <00:27:24.265>with <00:27:24.465>routing

553
00:27:25.405 --> 00:27:27.765
<00:27:25.405>and <00:27:25.605>state <00:27:25.805>management <00:27:26.004>out <00:27:26.205>of <00:27:26.405>the <00:27:26.605>box, <00:27:26.805>nothing,

554
00:27:28.305 --> 00:27:29.645
<00:27:28.305>no <00:27:28.606>third <00:27:28.908>party <00:27:29.209>is <00:27:29.511>necessary.

555
00:27:30.585 --> 00:27:33.725
<00:27:30.585>And <00:27:30.712>what <00:27:30.839>works <00:27:30.966>really <00:27:31.094>well <00:27:31.221>for <00:27:31.348>me <00:27:31.475>is <00:27:31.603>the <00:27:31.730>swell <00:27:31.857>forms <00:27:31.985>slip.

556
00:27:34.435 --> 00:27:37.765
<00:27:34.435>This <00:27:34.610>is <00:27:34.784>also, <00:27:34.960>um, <00:27:35.135>actually <00:27:35.310>a <00:27:35.485>wrap <00:27:35.659>around <00:27:35.835>formic.

557
00:27:38.785 --> 00:27:41.675
<00:27:38.785>There's <00:27:38.985>also <00:27:39.185>solutions <00:27:39.385>for <00:27:39.585>date <00:27:39.785>pickers <00:27:39.985>drop <00:27:40.185>zones,

558
00:27:42.295 --> 00:27:44.755
<00:27:42.295>and <00:27:42.528>I <00:27:42.761>can <00:27:42.995>really <00:27:43.228>recommend <00:27:43.461>using <00:27:43.695>selt

559
00:27:44.755 --> 00:27:48.355
<00:27:44.755>and <00:27:44.930>Swell <00:27:45.105>Kit <00:27:45.280>with <00:27:45.455>the <00:27:45.630>UI <00:27:45.805>library <00:27:45.980>Tailwind <00:27:46.155>CSS.

560
00:27:48.815 --> 00:27:52.675
<00:27:48.815>Um, <00:27:48.955>I <00:27:49.095>am <00:27:49.235>nowadays <00:27:49.375>writing <00:27:49.515>all <00:27:49.655>of <00:27:49.795>my <00:27:49.935>CSS <00:27:50.075>with <00:27:50.215>Tailwind

561
00:27:52.675 --> 00:27:54.315
<00:27:52.675>and <00:27:52.955>you <00:27:53.235>kind <00:27:53.514>of <00:27:53.794>have <00:27:54.075>selt,

562
00:27:54.315 --> 00:27:55.835
<00:27:54.315>which <00:27:54.657>is <00:27:54.999>optimizing <00:27:55.341>your <00:27:55.683>JavaScript,

563
00:27:56.175 --> 00:27:58.635
<00:27:56.175>and <00:27:56.315>on <00:27:56.455>the <00:27:56.595>other <00:27:56.735>hand <00:27:56.875>you <00:27:57.014>have <00:27:57.155>Tailwind, <00:27:57.294>which <00:27:57.435>takes <00:27:57.575>care

564
00:27:58.635 --> 00:28:00.315
<00:27:58.635>of <00:27:58.985>purchasing <00:27:59.335>your <00:27:59.685>unused <00:28:00.035>CSS.

565
00:28:00.495 --> 00:28:02.515
<00:28:00.495>So <00:28:00.728>this <00:28:00.961>is <00:28:01.195>a <00:28:01.428>really <00:28:01.661>powerful <00:28:01.895>combination.

566
00:28:03.425 --> 00:28:06.435
<00:28:03.425>Yeah, <00:28:03.600>and <00:28:03.774>there's <00:28:03.950>also <00:28:04.125>solutions <00:28:04.300>for <00:28:04.475>Toast <00:28:04.649>Unit <00:28:04.825>testing

567
00:28:06.495 --> 00:28:07.515
<00:28:06.495>and <00:28:07.413>internationalization.

568
00:28:10.685 --> 00:28:13.015
<00:28:10.685>Yeah, <00:28:10.885>this <00:28:11.085>is <00:28:11.284>a <00:28:11.485>word <00:28:11.685>cloud <00:28:11.885>about <00:28:12.085>companies

569
00:28:13.015 --> 00:28:15.255
<00:28:13.015>that <00:28:13.248>are <00:28:13.481>using <00:28:13.715>Sweat <00:28:13.948>in <00:28:14.181>production <00:28:14.415>currently.

570
00:28:15.635 --> 00:28:17.895
<00:28:15.635>So <00:28:15.810>of <00:28:15.985>course <00:28:16.160>we <00:28:16.335>have <00:28:16.510>New <00:28:16.685>York <00:28:16.860>Times <00:28:17.035>here

571
00:28:17.895 --> 00:28:19.335
<00:28:17.895>because <00:28:18.219>which <00:28:18.543>Harris <00:28:18.867>works <00:28:19.191>there,

572
00:28:19.795 --> 00:28:22.455
<00:28:19.795>but <00:28:19.995>there's <00:28:20.195>also <00:28:20.395>other <00:28:20.595>big <00:28:20.795>names <00:28:20.995>like <00:28:21.195>IBM

573
00:28:22.995 --> 00:28:26.095
<00:28:22.995>and <00:28:23.195>they <00:28:23.395>even <00:28:23.594>wrote <00:28:23.794>a <00:28:23.995>UI <00:28:24.195>component <00:28:24.395>library

574
00:28:26.555 --> 00:28:27.935
<00:28:26.555>called <00:28:27.176>Carbon <00:28:27.797>Components.

575
00:28:28.935 --> 00:28:33.875
<00:28:28.935>And <00:28:29.075>there's <00:28:29.215>also <00:28:29.355>names <00:28:29.495>like <00:28:29.635>Apple <00:28:29.774>here, <00:28:29.915>um, <00:28:30.054>that <00:28:30.195>is <00:28:30.335>actually

576
00:28:34.555 --> 00:28:36.435
<00:28:34.555>actively <00:28:35.021>looking <00:28:35.488>for <00:28:35.955>contractors

577
00:28:36.695 --> 00:28:38.395
<00:28:36.695>and <00:28:37.161>also <00:28:37.628>full-time <00:28:38.095>positions

578
00:28:41.105 --> 00:28:42.245
<00:28:41.105>for <00:28:41.361>the <00:28:41.618>future <00:28:41.874>of <00:28:42.130>Swell.

579
00:28:42.365 --> 00:28:43.605
<00:28:42.365>I <00:28:42.644>see <00:28:42.923>a <00:28:43.202>great <00:28:43.481>potential.

580
00:28:44.225 --> 00:28:46.165
<00:28:44.225>So <00:28:44.504>Swell <00:28:44.784>Kit <00:28:45.064>will <00:28:45.344>be <00:28:45.625>released

581
00:28:46.585 --> 00:28:48.445
<00:28:46.585>as <00:28:46.865>a <00:28:47.145>stable <00:28:47.425>version <00:28:47.705>quite <00:28:47.985>soon,

582
00:28:49.265 --> 00:28:51.165
<00:28:49.265>and <00:28:49.615>it's, <00:28:49.965>it <00:28:50.315>contains <00:28:50.665>all

583
00:28:51.165 --> 00:28:53.765
<00:28:51.165>of <00:28:51.365>the <00:28:51.565>latest <00:28:51.764>development <00:28:51.965>tools <00:28:52.165>like <00:28:52.365>WI <00:28:52.565>from

584
00:28:54.045 --> 00:28:55.525
<00:28:54.045>US <00:28:54.489>founder <00:28:54.933>Evan <00:28:55.377>U.

585
00:28:56.385 --> 00:28:59.805
<00:28:56.385>It <00:28:56.540>has, <00:28:56.696>it's <00:28:56.851>using <00:28:57.007>native <00:28:57.162>ES <00:28:57.318>modules <00:28:57.473>under <00:28:57.629>the <00:28:57.785>hood.

586
00:28:59.985 --> 00:29:02.325
<00:28:59.985>It <00:29:00.264>has <00:29:00.544>instant <00:29:00.824>hot <00:29:01.104>module <00:29:01.385>reloading

587
00:29:02.545 --> 00:29:04.485
<00:29:02.545>and <00:29:02.895>is <00:29:03.245>doing <00:29:03.595>dependency <00:29:03.945>bounding.

588
00:29:04.585 --> 00:29:07.165
<00:29:04.585>So <00:29:04.785>this <00:29:04.985>is <00:29:05.185>really <00:29:05.385>bleeding <00:29:05.585>edge <00:29:05.785>great, <00:29:05.985>um,

589
00:29:07.685 --> 00:29:08.885
<00:29:07.685>a <00:29:07.955>great <00:29:08.225>workflow, <00:29:08.495>great <00:29:08.764>tooling.

590
00:29:10.105 --> 00:29:13.885
<00:29:10.105>And <00:29:10.232>I <00:29:10.359>also <00:29:10.486>see <00:29:10.614>that, <00:29:10.741>um, <00:29:10.868>s <00:29:10.995>SW <00:29:11.123>will <00:29:11.250>have <00:29:11.377>increased <00:29:11.505>backing

591
00:29:13.885 --> 00:29:15.765
<00:29:13.885>and <00:29:14.165>support <00:29:14.445>by <00:29:14.725>companies <00:29:15.004>and <00:29:15.285>communities.

592
00:29:16.135 --> 00:29:19.485
<00:29:16.135>There <00:29:16.275>is <00:29:16.415>also <00:29:16.555>an <00:29:16.695>open <00:29:16.835>collective <00:29:16.975>where <00:29:17.115>you <00:29:17.254>can, <00:29:17.395>um, <00:29:17.535>donate

593
00:29:19.505 --> 00:29:20.645
<00:29:19.505>and <00:29:19.847>sponsor <00:29:20.189>the <00:29:20.531>project.

594
00:29:21.985 --> 00:29:23.965
<00:29:21.985>Uh, <00:29:22.185>and <00:29:22.385>I <00:29:22.584>see <00:29:22.784>a <00:29:22.985>great <00:29:23.185>potential <00:29:23.385>also

595
00:29:23.965 --> 00:29:26.805
<00:29:23.965>that <00:29:24.120>swell <00:29:24.276>can <00:29:24.431>win <00:29:24.587>over <00:29:24.742>developers <00:29:24.898>one <00:29:25.053>at <00:29:25.209>a <00:29:25.365>time

596
00:29:27.235 --> 00:29:31.725
<00:29:27.235>because <00:29:27.390>in <00:29:27.546>general <00:29:27.701>I <00:29:27.857>feel <00:29:28.012>like, <00:29:28.168>um, <00:29:28.323>developers <00:29:28.479>are <00:29:28.635>fatigued

597
00:29:31.865 --> 00:29:35.325
<00:29:31.865>by <00:29:32.040>the <00:29:32.215>frontend <00:29:32.390>complexity <00:29:32.565>and <00:29:32.740>boiler <00:29:32.915>plats <00:29:33.090>of <00:29:33.265>it.

598
00:29:36.265 --> 00:29:38.085
<00:29:36.265>So <00:29:36.545>that's <00:29:36.825>definitely <00:29:37.105>a <00:29:37.385>strong <00:29:37.665>point

599
00:29:39.345 --> 00:29:41.965
<00:29:39.345>and <00:29:39.578>I <00:29:39.811>think <00:29:40.045>well <00:29:40.278>could <00:29:40.511>take <00:29:40.745>over

600
00:29:42.845 --> 00:29:45.205
<00:29:42.845>angular <00:29:43.195>in <00:29:43.545>popularity <00:29:43.895>quite <00:29:44.245>soon.

601
00:29:45.465 --> 00:29:47.485
<00:29:45.465>So <00:29:45.745>currently <00:29:46.024>swell <00:29:46.304>is <00:29:46.584>ranked, <00:29:46.865>uh,

602
00:29:47.625 --> 00:29:49.965
<00:29:47.625>as <00:29:47.905>the <00:29:48.185>fourth <00:29:48.465>most <00:29:48.745>popular <00:29:49.025>frontend

603
00:29:49.965 --> 00:29:51.365
<00:29:49.965>framework <00:29:50.280>based <00:29:50.595>on <00:29:50.910>GitHub <00:29:51.225>stars.

604
00:29:51.865 --> 00:29:52.965
<00:29:51.865>So <00:29:52.063>we <00:29:52.261>will <00:29:52.459>see <00:29:52.657>about <00:29:52.855>that.

605
00:29:55.245 --> 00:29:56.645
<00:29:55.245>I <00:29:55.496>also <00:29:55.749>linked <00:29:56.001>you <00:29:56.253>some <00:29:56.504>help

606
00:29:56.645 --> 00:29:58.925
<00:29:56.645>for <00:29:56.925>resources <00:29:57.205>in <00:29:57.485>my <00:29:57.764>presentation <00:29:58.045>here.

607
00:29:59.025 --> 00:30:02.005
<00:29:59.025>So, <00:29:59.200>um, <00:29:59.375>this <00:29:59.550>is <00:29:59.725>the <00:29:59.900>source, <00:30:00.075>the <00:30:00.250>source <00:30:00.425>code

608
00:30:02.065 --> 00:30:05.405
<00:30:02.065>for <00:30:02.220>my <00:30:02.376>talk <00:30:02.531>can <00:30:02.687>be <00:30:02.842>found <00:30:02.998>on <00:30:03.153>my <00:30:03.309>Gub <00:30:03.465>repository.

609
00:30:06.265 --> 00:30:10.725
<00:30:06.265>Um, <00:30:06.392>I <00:30:06.519>actually <00:30:06.646>wrote <00:30:06.774>a <00:30:06.901>blog <00:30:07.028>post <00:30:07.155>on <00:30:07.283>Medium <00:30:07.410>about <00:30:07.537>the <00:30:07.665>exact

610
00:30:10.725 --> 00:30:12.165
<00:30:10.725>same <00:30:10.940>topic <00:30:11.157>and <00:30:11.373>this <00:30:11.589>was <00:30:11.804>the <00:30:12.021>idea

611
00:30:12.185 --> 00:30:13.445
<00:30:12.185>for <00:30:12.562>holding <00:30:12.941>this <00:30:13.319>presentation.

612
00:30:15.125 --> 00:30:17.015
<00:30:15.125>Yeah, <00:30:15.358>and <00:30:15.591>then <00:30:15.825>there's <00:30:16.058>some <00:30:16.291>other <00:30:16.525>resources

613
00:30:17.015 --> 00:30:19.455
<00:30:17.015>that <00:30:17.170>I <00:30:17.326>can <00:30:17.481>recommend <00:30:17.637>you <00:30:17.792>to <00:30:17.948>take <00:30:18.103>a <00:30:18.259>look <00:30:18.415>at

614
00:30:21.285 --> 00:30:22.345
<00:30:21.285>if <00:30:21.523>you <00:30:21.762>liked <00:30:22.000>my <00:30:22.239>talk.

615
00:30:22.765 --> 00:30:23.785
<00:30:22.765>Um, <00:30:23.224>let's <00:30:23.683>connect.

616
00:30:24.105 --> 00:30:27.905
<00:30:24.105>I <00:30:24.260>linked <00:30:24.416>you <00:30:24.571>my, <00:30:24.727>um, <00:30:24.882>website, <00:30:25.038>LinkedIn <00:30:25.193>and <00:30:25.349>Twitter <00:30:25.505>profiles.

617
00:30:30.075 --> 00:30:32.455
<00:30:30.075>And <00:30:30.275>as <00:30:30.475>a <00:30:30.675>conclusion, <00:30:30.875>I <00:30:31.075>would <00:30:31.275>say, <00:30:31.475>um,

618
00:30:32.645 --> 00:30:34.695
<00:30:32.645>reflect <00:30:32.925>on <00:30:33.205>your <00:30:33.485>current <00:30:33.764>developer <00:30:34.045>experience.

619
00:30:34.755 --> 00:30:36.655
<00:30:34.755>Are <00:30:34.955>you <00:30:35.155>happy <00:30:35.355>with <00:30:35.555>how <00:30:35.755>you're <00:30:35.955>coding <00:30:36.155>currently?

620
00:30:37.075 --> 00:30:38.895
<00:30:37.075>Is <00:30:37.308>there <00:30:37.541>anything <00:30:37.775>that <00:30:38.008>is <00:30:38.241>bugging <00:30:38.475>you?

621
00:30:39.155 --> 00:30:41.695
<00:30:39.155>Um, <00:30:39.295>do <00:30:39.435>you <00:30:39.575>think <00:30:39.715>that <00:30:39.855>there <00:30:39.995>could <00:30:40.135>be <00:30:40.274>a <00:30:40.415>better <00:30:40.555>way

622
00:30:41.695 --> 00:30:42.735
<00:30:41.695>of <00:30:42.006>writing <00:30:42.319>certain <00:30:42.630>things?

623
00:30:43.435 --> 00:30:46.455
<00:30:43.435>If <00:30:43.610>you <00:30:43.784>say <00:30:43.960>yes <00:30:44.135>to <00:30:44.310>that, <00:30:44.485>then <00:30:44.659>definitely <00:30:44.835>go

624
00:30:46.455 --> 00:30:48.135
<00:30:46.455>and <00:30:46.735>work <00:30:47.014>through <00:30:47.294>the <00:30:47.574>swell <00:30:47.855>tutorial.

625
00:30:48.995 --> 00:30:51.455
<00:30:48.995>Um, <00:30:49.195>the <00:30:49.395>link <00:30:49.594>is <00:30:49.794>here <00:30:49.995>for <00:30:50.195>the <00:30:50.395>tutorial.

626
00:30:52.515 --> 00:30:57.175
<00:30:52.515>Um, <00:30:52.631>if <00:30:52.748>you <00:30:52.865>become <00:30:52.981>a <00:30:53.098>fan <00:30:53.215>like <00:30:53.331>I <00:30:53.448>am, <00:30:53.565>then <00:30:53.681>I <00:30:53.798>would <00:30:53.915>definitely

627
00:30:57.695 --> 00:30:59.135
<00:30:57.695>recommend <00:30:57.954>you <00:30:58.213>to <00:30:58.472>join <00:30:58.731>the <00:30:58.991>Discord.

628
00:30:59.235 --> 00:31:02.575
<00:30:59.235>The <00:30:59.375>invite <00:30:59.514>link <00:30:59.655>is <00:30:59.794>there. <00:30:59.935>It's <00:31:00.074>a <00:31:00.215>small <00:31:00.354>but <00:31:00.495>great <00:31:00.635>community.

629
00:31:03.475 --> 00:31:08.415
<00:31:03.475>And <00:31:03.602>yeah, <00:31:03.729>I <00:31:03.856>would <00:31:03.984>also <00:31:04.111>recommend <00:31:04.238>you <00:31:04.365>to, <00:31:04.493>to, <00:31:04.620>if <00:31:04.747>you <00:31:04.875>decide

630
00:31:08.415 --> 00:31:11.775
<00:31:08.415>to <00:31:08.531>adopt <00:31:08.648>the, <00:31:08.764>the, <00:31:08.881>uh, <00:31:08.998>the <00:31:09.115>well <00:31:09.231>that <00:31:09.348>you, <00:31:09.465>you <00:31:09.581>sweat <00:31:09.698>at <00:31:09.815>work

631
00:31:11.955 --> 00:31:13.575
<00:31:11.955>and <00:31:12.304>also <00:31:12.655>in <00:31:13.004>personal <00:31:13.355>projects.

632
00:31:15.265 --> 00:31:16.415
<00:31:15.265>Thank <00:31:15.523>you <00:31:15.782>for <00:31:16.041>your <00:31:16.300>attention.