WEBVTT

1
00:00:17.865 --> 00:00:21.325
<00:00:17.865>So <00:00:18.098>nothing <00:00:18.331>is <00:00:18.564>as <00:00:18.798>constant <00:00:19.031>as <00:00:19.264>change.

2
00:00:21.985 --> 00:00:24.165
<00:00:21.985>Who <00:00:22.218>would <00:00:22.451>better <00:00:22.685>understand <00:00:22.918>that <00:00:23.151>than <00:00:23.384>us?

3
00:00:24.515 --> 00:00:28.205
<00:00:24.515>Because <00:00:24.865>we <00:00:25.215>are <00:00:25.565>developers, <00:00:25.915>friend

4
00:00:28.205 --> 00:00:30.285
<00:00:28.205>of <00:00:28.485>development <00:00:28.764>is <00:00:29.044>changing <00:00:29.325>especially <00:00:29.604>fast

5
00:00:30.395 --> 00:00:32.165
<00:00:30.395>with <00:00:30.745>new <00:00:31.095>frameworks <00:00:31.445>and <00:00:31.794>paradigms.

6
00:00:32.165 --> 00:00:35.365
<00:00:32.165>Every <00:00:32.305>new <00:00:32.445>moon. <00:00:32.585>We <00:00:32.725>took <00:00:32.865>a <00:00:33.004>deep <00:00:33.144>dive <00:00:33.285>into <00:00:33.425>frameworks <00:00:33.565>like

7
00:00:35.725 --> 00:00:37.245
<00:00:35.725>Angular <00:00:35.998>during <00:00:36.272>the <00:00:36.545>last <00:00:36.819>few <00:00:37.093>years.

8
00:00:38.305 --> 00:00:42.605
<00:00:38.305>We <00:00:38.445>know <00:00:38.585>every <00:00:38.725>bit <00:00:38.865>of <00:00:39.005>it <00:00:39.144>by <00:00:39.285>heart, <00:00:39.425>but <00:00:39.565>technologies <00:00:39.705>change.

9
00:00:43.615 --> 00:00:45.285
<00:00:43.615>Hello, <00:00:43.965>my <00:00:44.315>name <00:00:44.665>is <00:00:45.015>Ben.

10
00:00:45.665 --> 00:00:47.445
<00:00:45.665>I'm <00:00:45.945>a <00:00:46.225>software <00:00:46.504>developer <00:00:46.785>at <00:00:47.065>Volkswagen,

11
00:00:47.825 --> 00:00:50.365
<00:00:47.825>and <00:00:48.058>this <00:00:48.291>is <00:00:48.525>on <00:00:48.758>tour <00:00:48.991>with <00:00:49.225>Heroes.

12
00:00:52.155 --> 00:00:56.685
<00:00:52.155>Okay, <00:00:52.330>great. <00:00:52.505>So, <00:00:52.680>uh, <00:00:52.855>let <00:00:53.030>me <00:00:53.205>quickly <00:00:53.380>talk, <00:00:53.555>uh,

13
00:00:56.905 --> 00:00:57.965
<00:00:56.905>to <00:00:57.143>you <00:00:57.382>about <00:00:57.620>the <00:00:57.859>agenda.

14
00:00:58.635 --> 00:00:59.845
<00:00:58.635>What <00:00:58.907>we're <00:00:59.179>gonna <00:00:59.451>do <00:00:59.724>first,

15
00:01:00.245 --> 00:01:03.605
<00:01:00.245>I <00:01:00.385>will <00:01:00.525>quickly <00:01:00.665>talk <00:01:00.805>about <00:01:00.945>the <00:01:01.084>topic <00:01:01.224>at <00:01:01.364>heart, <00:01:01.504>um, <00:01:01.644>just

16
00:01:04.105 --> 00:01:06.805
<00:01:04.105>to <00:01:04.260>get <00:01:04.416>you <00:01:04.571>into <00:01:04.727>what <00:01:04.882>I'm <00:01:05.038>actually <00:01:05.193>wanna <00:01:05.349>talk <00:01:05.505>about.

17
00:01:07.755 --> 00:01:09.645
<00:01:07.755>Then <00:01:07.988>we <00:01:08.221>will <00:01:08.455>discuss <00:01:08.688>a <00:01:08.921>little <00:01:09.155>bit,

18
00:01:09.925 --> 00:01:12.605
<00:01:09.925>a <00:01:10.080>very <00:01:10.236>little <00:01:10.391>bit <00:01:10.547>about <00:01:10.702>web <00:01:10.858>components, <00:01:11.013>why <00:01:11.169>they <00:01:11.325>matter,

19
00:01:12.905 --> 00:01:14.285
<00:01:12.905>why <00:01:13.153>we <00:01:13.401>should <00:01:13.650>look <00:01:13.898>into <00:01:14.146>them.

20
00:01:15.425 --> 00:01:18.445
<00:01:15.425>And <00:01:15.552>after <00:01:15.679>that, <00:01:15.806>we <00:01:15.934>will <00:01:16.061>spend <00:01:16.188>most <00:01:16.315>of <00:01:16.443>our <00:01:16.570>time <00:01:16.697>live <00:01:16.825>coding.

21
00:01:18.865 --> 00:01:23.725
<00:01:18.865>So <00:01:19.020>we <00:01:19.176>actually, <00:01:19.331>um, <00:01:19.487>write <00:01:19.642>code <00:01:19.798>in <00:01:19.953>this <00:01:20.109>talk <00:01:20.265>and

22
00:01:23.725 --> 00:01:26.085
<00:01:23.725>after <00:01:23.880>that <00:01:24.036>we <00:01:24.191>will <00:01:24.347>go <00:01:24.502>over <00:01:24.658>what <00:01:24.813>we <00:01:24.969>have <00:01:25.125>learned,

23
00:01:26.465 --> 00:01:29.485
<00:01:26.465>see <00:01:26.605>if <00:01:26.745>we <00:01:26.885>liked <00:01:27.025>it, <00:01:27.165>uh, <00:01:27.305>what's <00:01:27.445>good, <00:01:27.585>what <00:01:27.725>was <00:01:27.865>bad.

24
00:01:29.955 --> 00:01:34.765
<00:01:29.955>Yeah. <00:01:30.082>And <00:01:30.209>lastly, <00:01:30.336>we'll <00:01:30.464>have <00:01:30.591>a <00:01:30.718>q <00:01:30.845>uh, <00:01:30.973>q <00:01:31.100>and <00:01:31.227>a <00:01:31.355>session.

25
00:01:36.195 --> 00:01:39.085
<00:01:36.195>Okay, <00:01:37.595>introduction.

26
00:01:40.865 --> 00:01:44.325
<00:01:40.865>So, <00:01:41.040>um, <00:01:41.215>we <00:01:41.390>at <00:01:41.565>Volkswagen <00:01:41.740>used <00:01:41.915>Angular <00:01:42.090>in <00:01:42.265>many

27
00:01:44.325 --> 00:01:46.485
<00:01:44.325>of <00:01:44.605>our <00:01:44.885>projects, <00:01:45.165>and <00:01:45.445>I <00:01:45.725>personally

28
00:01:46.485 --> 00:01:47.725
<00:01:46.485>really <00:01:46.764>like <00:01:47.042>developing <00:01:47.322>in <00:01:47.601>it.

29
00:01:47.875 --> 00:01:51.645
<00:01:47.875>It's <00:01:48.030>awesome, <00:01:48.186>but, <00:01:48.341>uh, <00:01:48.497>we <00:01:48.652>never <00:01:48.808>must <00:01:48.963>stop <00:01:49.119>learning, <00:01:49.275>right?

30
00:01:52.545 --> 00:01:54.965
<00:01:52.545>So <00:01:52.825>in <00:01:53.105>our <00:01:53.385>department, <00:01:53.665>the <00:01:53.945>STC,

31
00:01:54.985 --> 00:01:56.205
<00:01:54.985>the <00:01:55.351>software <00:01:55.717>development <00:01:56.083>Center,

32
00:01:56.825 --> 00:02:00.685
<00:01:56.825>we <00:01:56.965>actually <00:01:57.105>take <00:01:57.245>every <00:01:57.385>second <00:01:57.525>Friday <00:01:57.665>off <00:01:57.805>where <00:01:57.945>we <00:01:58.085>try, <00:01:58.225>um,

33
00:02:00.865 --> 00:02:04.365
<00:02:00.865>to <00:02:01.039>improve <00:02:01.214>ourself <00:02:01.390>and, <00:02:01.565>um, <00:02:01.740>try <00:02:01.914>out <00:02:02.089>new <00:02:02.265>stuff.

34
00:02:05.105 --> 00:02:07.285
<00:02:05.105>And <00:02:05.280>that's <00:02:05.455>why <00:02:05.630>we <00:02:05.805>call <00:02:05.980>it <00:02:06.155>actually <00:02:06.330>our <00:02:06.505>innovation

35
00:02:07.345 --> 00:02:08.525
<00:02:07.345>and <00:02:07.876>improvement <00:02:08.407>Friday.

36
00:02:09.315 --> 00:02:10.365
<00:02:09.315>It's <00:02:09.630>a <00:02:09.945>great <00:02:10.260>opportunity

37
00:02:11.025 --> 00:02:14.805
<00:02:11.025>and <00:02:11.141>this <00:02:11.258>is <00:02:11.375>actually <00:02:11.491>what <00:02:11.608>lead <00:02:11.725>me <00:02:11.841>to <00:02:11.958>try <00:02:12.075>out <00:02:12.191>this, <00:02:12.308>uh, <00:02:12.425>yeah,

38
00:02:15.615 --> 00:02:17.725
<00:02:15.615>these, <00:02:15.965>uh, <00:02:16.315>web <00:02:16.665>components <00:02:17.015>transformation.

39
00:02:20.235 --> 00:02:25.205
<00:02:20.235>Okay? <00:02:20.435>And <00:02:20.635>as <00:02:20.835>I've <00:02:21.035>already <00:02:21.235>said, <00:02:21.435>um, <00:02:21.635>the

40
00:02:26.105 --> 00:02:27.285
<00:02:26.105>market <00:02:26.636>of <00:02:27.167>front

41
00:02:27.285 --> 00:02:30.245
<00:02:27.285>and <00:02:27.565>development <00:02:27.845>was <00:02:28.125>actually, <00:02:28.405>um, <00:02:28.685>dominated

42
00:02:30.425 --> 00:02:32.005
<00:02:30.425>by <00:02:30.658>these <00:02:30.891>three <00:02:31.125>for <00:02:31.358>a <00:02:31.591>long <00:02:31.825>time.

43
00:02:32.465 --> 00:02:36.005
<00:02:32.465>We <00:02:32.605>have <00:02:32.745>Angular, <00:02:32.885>we <00:02:33.025>have <00:02:33.165>React, <00:02:33.305>and <00:02:33.445>we <00:02:33.585>have <00:02:33.725>view <00:02:33.865>js.

44
00:02:36.705 --> 00:02:39.885
<00:02:36.704>And, <00:02:36.904>um, <00:02:37.105>they <00:02:37.304>basically <00:02:37.505>dominated <00:02:37.704>the <00:02:37.904>whole <00:02:38.105>market.

45
00:02:39.885 --> 00:02:43.525
<00:02:39.885>There <00:02:40.060>were <00:02:40.234>actually <00:02:40.410>quite <00:02:40.584>very <00:02:40.760>few <00:02:40.935>alternatives <00:02:41.109>in <00:02:41.285>the

46
00:02:43.525 --> 00:02:44.525
<00:02:43.525>production <00:02:44.425>environments.

47
00:02:44.945 --> 00:02:49.565
<00:02:44.945>If <00:02:45.072>you <00:02:45.199>take <00:02:45.326>a <00:02:45.454>look <00:02:45.581>at <00:02:45.708>the <00:02:45.835>download, <00:02:45.963>um, <00:02:46.090>accounts <00:02:46.217>for <00:02:46.345>each

48
00:02:49.565 --> 00:02:54.205
<00:02:49.565>of <00:02:49.720>these, <00:02:49.876>they <00:02:50.031>are <00:02:50.187>huge <00:02:50.342>in <00:02:50.498>comparison <00:02:50.653>to <00:02:50.809>other <00:02:50.965>frameworks.

49
00:02:55.265 --> 00:02:58.085
<00:02:55.265>The <00:02:55.440>question <00:02:55.614>now <00:02:55.790>is <00:02:55.964>if <00:02:56.140>this <00:02:56.315>will <00:02:56.489>keep <00:02:56.665>forever,

50
00:02:58.915 --> 00:03:02.485
<00:02:58.915>because <00:02:59.195>as <00:02:59.475>already <00:02:59.755>mentioned, <00:03:00.035>nothing <00:03:00.315>is

51
00:03:02.545 --> 00:03:03.845
<00:03:02.545>as <00:03:02.935>constant <00:03:03.325>as <00:03:03.715>change.

52
00:03:06.145 --> 00:03:09.725
<00:03:06.145>So <00:03:06.378>what <00:03:06.611>is <00:03:06.845>the <00:03:07.078>problem <00:03:07.311>with <00:03:07.545>Angular?

53
00:03:09.925 --> 00:03:11.685
<00:03:09.925>I <00:03:10.275>say <00:03:10.625>problem <00:03:10.975>in <00:03:11.325>quotes

54
00:03:11.795 --> 00:03:13.805
<00:03:11.795>because <00:03:11.994>as <00:03:12.195>I <00:03:12.394>said, <00:03:12.595>I <00:03:12.795>like <00:03:12.994>problem <00:03:13.195>there.

55
00:03:14.085 --> 00:03:16.605
<00:03:14.085>I, <00:03:14.240>I <00:03:14.396>like <00:03:14.551>angular. <00:03:14.707>There <00:03:14.862>is <00:03:15.018>no <00:03:15.173>problem <00:03:15.329>with <00:03:15.485>angular.

56
00:03:17.055 --> 00:03:20.885
<00:03:17.055>There <00:03:17.335>are <00:03:17.615>just, <00:03:17.895>just, <00:03:18.175>um, <00:03:18.455>um,

57
00:03:21.035 --> 00:03:22.285
<00:03:21.035>differences <00:03:21.410>on <00:03:21.785>the <00:03:22.160>scale.

58
00:03:22.385 --> 00:03:24.885
<00:03:22.385>And, <00:03:22.560>um, <00:03:22.734>you <00:03:22.910>have <00:03:23.084>to <00:03:23.260>decide <00:03:23.435>on <00:03:23.609>trades <00:03:23.785>offs.

59
00:03:25.585 --> 00:03:28.925
<00:03:25.585>So <00:03:25.701>if <00:03:25.818>we <00:03:25.935>take <00:03:26.051>a <00:03:26.168>look <00:03:26.285>at <00:03:26.401>detail, <00:03:26.518>uh, <00:03:26.635>we <00:03:26.751>will <00:03:26.868>see <00:03:26.985>that

60
00:03:28.925 --> 00:03:33.245
<00:03:28.925>with <00:03:29.100>angular, <00:03:29.275>we <00:03:29.450>usually <00:03:29.625>usually <00:03:29.800>have <00:03:29.975>a <00:03:30.150>huge <00:03:30.325>size,

61
00:03:33.945 --> 00:03:36.645
<00:03:33.945>big <00:03:34.411>complexity <00:03:34.878>and <00:03:35.345>independency.

62
00:03:37.115 --> 00:03:39.285
<00:03:37.115>When <00:03:37.348>we <00:03:37.581>develop <00:03:37.815>our <00:03:38.048>apps <00:03:38.281>in <00:03:38.515>Angular,

63
00:03:39.465 --> 00:03:40.965
<00:03:39.465>we <00:03:39.802>are <00:03:40.140>dependent <00:03:40.477>on <00:03:40.815>angular.

64
00:03:41.305 --> 00:03:44.125
<00:03:41.305>We <00:03:41.480>cannot <00:03:41.655>move <00:03:41.830>to <00:03:42.005>react, <00:03:42.180>for <00:03:42.355>example, <00:03:42.530>without <00:03:42.705>huge,

65
00:03:44.305 --> 00:03:46.005
<00:03:44.305>um, <00:03:45.005>uh, <00:03:45.705>migrations.

66
00:03:47.165 --> 00:03:50.725
<00:03:47.165>I <00:03:47.304>actually <00:03:47.445>know <00:03:47.584>of <00:03:47.725>a <00:03:47.864>product <00:03:48.005>in <00:03:48.144>Volkswagen <00:03:48.285>that <00:03:48.424>is <00:03:48.565>stuck

67
00:03:50.725 --> 00:03:55.085
<00:03:50.725>with <00:03:50.900>angular <00:03:51.075>JS <00:03:51.250>1.6 <00:03:51.424>for <00:03:51.600>over <00:03:51.775>four <00:03:51.950>years <00:03:52.125>now,

68
00:03:55.425 --> 00:03:56.925
<00:03:55.425>and <00:03:55.875>they <00:03:56.325>can't <00:03:56.775>migrate

69
00:03:56.925 --> 00:03:58.725
<00:03:56.925>because <00:03:57.100>they <00:03:57.275>don't <00:03:57.450>have <00:03:57.625>the <00:03:57.800>budget <00:03:57.975>to <00:03:58.150>do <00:03:58.325>so.

70
00:04:00.585 --> 00:04:02.485
<00:04:00.585>So <00:04:00.865>is <00:04:01.145>there <00:04:01.425>a <00:04:01.705>better <00:04:01.985>alternative?

71
00:04:03.825 --> 00:04:05.925
<00:04:03.825>The <00:04:04.024>question <00:04:04.225>of <00:04:04.424>course <00:04:04.625>can <00:04:04.825>be <00:04:05.024>answered <00:04:05.225>with

72
00:04:06.535 --> 00:04:07.765
<00:04:06.535>there <00:04:07.088>are <00:04:07.642>alternatives.

73
00:04:08.105 --> 00:04:10.845
<00:04:08.105>One <00:04:08.280>of <00:04:08.454>these <00:04:08.630>are <00:04:08.804>web <00:04:08.980>components, <00:04:09.155>which <00:04:09.329>for <00:04:09.505>example,

74
00:04:11.105 --> 00:04:15.725
<00:04:11.105>to <00:04:11.260>strive <00:04:11.416>to <00:04:11.571>be <00:04:11.727>not <00:04:11.882>to <00:04:12.038>be <00:04:12.193>framework, <00:04:12.349>um, <00:04:12.505>dependent.

75
00:04:15.725 --> 00:04:18.525
<00:04:15.725>They <00:04:15.900>are <00:04:16.075>framework <00:04:16.250>agnostic, <00:04:16.425>meaning <00:04:16.600>you <00:04:16.774>write <00:04:16.950>your <00:04:17.125>code,

76
00:04:18.795 --> 00:04:20.445
<00:04:18.795>your, <00:04:19.261>uh, <00:04:19.728>web <00:04:20.195>component,

77
00:04:20.945 --> 00:04:23.525
<00:04:20.945>and <00:04:21.120>you <00:04:21.295>can <00:04:21.469>include <00:04:21.644>it <00:04:21.820>in <00:04:21.995>any <00:04:22.170>other <00:04:22.344>app.

78
00:04:24.145 --> 00:04:26.725
<00:04:24.145>So <00:04:24.300>you <00:04:24.456>can, <00:04:24.611>um, <00:04:24.767>include <00:04:24.922>it <00:04:25.078>in <00:04:25.233>your <00:04:25.389>Angular <00:04:25.544>app

79
00:04:27.105 --> 00:04:28.765
<00:04:27.105>or <00:04:27.338>of <00:04:27.571>course <00:04:27.805>in <00:04:28.038>your <00:04:28.271>React <00:04:28.505>app.

80
00:04:28.915 --> 00:04:32.245
<00:04:28.915>Doesn't <00:04:29.148>matter, <00:04:29.381>it's <00:04:29.615>separate. <00:04:29.848>It's <00:04:30.081>framework <00:04:30.315>agnostic.

81
00:04:34.545 --> 00:04:36.165
<00:04:34.545>And <00:04:35.011>this <00:04:35.478>especially <00:04:35.945>means

82
00:04:36.785 --> 00:04:39.165
<00:04:36.784>or <00:04:36.984>hugely <00:04:37.184>means <00:04:37.385>that <00:04:37.585>our <00:04:37.784>web <00:04:37.984>components <00:04:38.184>are

83
00:04:39.295 --> 00:04:40.805
<00:04:39.295>small, <00:04:39.748>they <00:04:40.201>are <00:04:40.654>simple.

84
00:04:41.385 --> 00:04:42.925
<00:04:41.385>And <00:04:41.731>a <00:04:42.078>set <00:04:42.424>framework <00:04:42.771>agnostic.

85
00:04:43.425 --> 00:04:46.045
<00:04:43.425>The <00:04:43.658>simple <00:04:43.891>part, <00:04:44.125>uh, <00:04:44.358>means <00:04:44.591>that, <00:04:44.825>um,

86
00:04:46.835 --> 00:04:50.445
<00:04:46.835>that <00:04:47.034>don't <00:04:47.234>solve <00:04:47.435>these <00:04:47.635>huge <00:04:47.835>complex <00:04:48.034>business <00:04:48.234>logics

87
00:04:50.955 --> 00:04:52.645
<00:04:50.955>that <00:04:51.234>we <00:04:51.515>usually <00:04:51.794>do <00:04:52.075>in <00:04:52.354>Angular.

88
00:04:53.075 --> 00:04:54.365
<00:04:53.075>They <00:04:53.462>are <00:04:53.849>more <00:04:54.236>concise

89
00:04:54.865 --> 00:04:56.925
<00:04:54.865>and, <00:04:55.145>um, <00:04:55.425>focused <00:04:55.705>on <00:04:55.985>one <00:04:56.265>singular

90
00:04:56.925 --> 00:04:58.245
<00:04:56.925>problem <00:04:57.162>that <00:04:57.400>they <00:04:57.637>try <00:04:57.875>to <00:04:58.113>solve.

91
00:04:59.745 --> 00:05:02.485
<00:04:59.745>And <00:04:59.920>for <00:05:00.095>the <00:05:00.270>developer <00:05:00.445>who <00:05:00.620>wants <00:05:00.795>to <00:05:00.970>develop <00:05:01.145>them,

92
00:05:03.105 --> 00:05:05.285
<00:05:03.105>it <00:05:03.280>is <00:05:03.455>simpler <00:05:03.630>because <00:05:03.805>they <00:05:03.980>don't <00:05:04.155>have <00:05:04.330>to, <00:05:04.505>uh,

93
00:05:05.415 --> 00:05:09.005
<00:05:05.415>spend <00:05:05.648>weeks <00:05:05.881>learning <00:05:06.115>the <00:05:06.348>framework <00:05:06.581>like <00:05:06.815>angular.

94
00:05:12.225 --> 00:05:14.965
<00:05:12.225>The <00:05:12.380>downside, <00:05:12.536>of <00:05:12.691>course, <00:05:12.847>is <00:05:13.002>that <00:05:13.158>they <00:05:13.313>are <00:05:13.469>simpler, <00:05:13.625>um,

95
00:05:15.345 --> 00:05:19.565
<00:05:15.345>and <00:05:15.500>they're <00:05:15.656>simpler <00:05:15.811>means <00:05:15.967>also <00:05:16.122>that <00:05:16.278>they <00:05:16.433>don't <00:05:16.589>have, <00:05:16.745>uh,

96
00:05:19.565 --> 00:05:21.165
<00:05:19.565>same <00:05:19.844>features <00:05:20.125>as <00:05:20.405>a <00:05:20.685>framework <00:05:20.965>would.

97
00:05:23.025 --> 00:05:24.885
<00:05:23.025>And <00:05:23.304>also <00:05:23.585>they're <00:05:23.864>kind <00:05:24.145>of <00:05:24.424>hard

98
00:05:24.885 --> 00:05:26.565
<00:05:24.885>to <00:05:25.235>develop <00:05:25.585>in <00:05:25.935>vanilla <00:05:26.284>JavaScript.

99
00:05:26.905 --> 00:05:29.845
<00:05:26.905>If <00:05:27.044>you <00:05:27.184>ever <00:05:27.325>try <00:05:27.465>to <00:05:27.604>do <00:05:27.744>so, <00:05:27.885>you <00:05:28.025>are <00:05:28.164>the <00:05:28.304>man.

100
00:05:30.585 --> 00:05:32.365
<00:05:30.585>Uh, <00:05:30.818>but <00:05:31.051>you <00:05:31.284>can <00:05:31.518>definitely <00:05:31.751>do <00:05:31.984>so.

101
00:05:32.365 --> 00:05:35.725
<00:05:32.365>And <00:05:32.540>there's <00:05:32.715>actually <00:05:32.890>a <00:05:33.065>quite <00:05:33.240>interesting <00:05:33.415>movement <00:05:33.590>under <00:05:33.765>the

102
00:05:35.725 --> 00:05:36.885
<00:05:35.725>hashtag <00:05:36.247>user <00:05:36.769>platform.

103
00:05:37.565 --> 00:05:38.885
<00:05:37.565>I <00:05:37.862>personally <00:05:38.159>just <00:05:38.456>find <00:05:38.753>it

104
00:05:38.885 --> 00:05:40.885
<00:05:38.885>to <00:05:39.040>do <00:05:39.196>very <00:05:39.351>hard, <00:05:39.507>to <00:05:39.662>be <00:05:39.818>very <00:05:39.973>hard <00:05:40.129>to <00:05:40.284>do.

105
00:05:40.885 --> 00:05:45.565
<00:05:40.885>So <00:05:41.164>here's <00:05:41.445>where, <00:05:41.724>uh, <00:05:42.005>frameworks <00:05:42.284>like

106
00:05:46.085 --> 00:05:48.445
<00:05:46.085>swell <00:05:46.284>js <00:05:46.484>and <00:05:46.685>stencil <00:05:46.885>js <00:05:47.085>come <00:05:47.284>into <00:05:47.484>place.

107
00:05:49.055 --> 00:05:53.445
<00:05:49.055>These <00:05:49.255>guys <00:05:49.455>make <00:05:49.655>developing <00:05:49.855>web <00:05:50.055>components <00:05:50.255>really <00:05:50.455>straight

108
00:05:53.545 --> 00:05:57.845
<00:05:53.545>or <00:05:53.672>forward <00:05:53.799>really <00:05:53.926>easy, <00:05:54.054>and <00:05:54.181>actually <00:05:54.308>just <00:05:54.435>a <00:05:54.563>joy <00:05:54.690>to <00:05:54.817>do <00:05:54.945>so.

109
00:05:58.985 --> 00:06:01.845
<00:05:58.985>So <00:05:59.185>I <00:05:59.385>spent, <00:05:59.585>uh, <00:05:59.785>the <00:05:59.985>last <00:06:00.185>few, <00:06:00.385>uh,

110
00:06:01.845 --> 00:06:04.725
<00:06:01.845>innovation <00:06:02.125>improvement <00:06:02.405>Fridays <00:06:02.685>working <00:06:02.965>with <00:06:03.245>spellcheck,

111
00:06:05.425 --> 00:06:07.285
<00:06:05.425>and <00:06:05.580>I <00:06:05.736>kind <00:06:05.891>of <00:06:06.047>fell <00:06:06.202>in <00:06:06.358>love <00:06:06.513>with <00:06:06.669>it <00:06:06.825>again.

112
00:06:07.945 --> 00:06:12.885
<00:06:07.945>So <00:06:08.072>today <00:06:08.199>we <00:06:08.326>will, <00:06:08.454>uh, <00:06:08.581>try <00:06:08.708>to <00:06:08.835>do <00:06:08.963>something <00:06:09.090>and <00:06:09.217>swell <00:06:09.344>and

113
00:06:19.705 --> 00:06:22.235
<00:06:19.705>Morning <00:06:20.055>crazy <00:06:20.405>life <00:06:20.755>coding <00:06:21.104>ahead.

114
00:06:22.615 --> 00:06:26.035
<00:06:22.615>And <00:06:22.742>as <00:06:22.869>stated <00:06:22.996>here, <00:06:23.124>this <00:06:23.251>is <00:06:23.378>the <00:06:23.505>part <00:06:23.633>that <00:06:23.760>never <00:06:23.887>goes <00:06:24.015>wrong.

115
00:06:26.735 --> 00:06:29.275
<00:06:26.735>So <00:06:26.890>please <00:06:27.046>bear <00:06:27.201>with <00:06:27.357>me <00:06:27.512>if <00:06:27.668>I <00:06:27.823>do <00:06:27.979>something <00:06:28.135>stupid,

116
00:06:29.375 --> 00:06:31.915
<00:06:29.375>if <00:06:29.550>I <00:06:29.725>type <00:06:29.900>wrong, <00:06:30.075>uh, <00:06:30.250>it's <00:06:30.425>a <00:06:30.600>live <00:06:30.775>demonstration

117
00:06:31.915 --> 00:06:35.075
<00:06:31.915>and <00:06:32.115>things <00:06:32.315>will <00:06:32.515>go <00:06:32.715>wrong, <00:06:32.915>things <00:06:33.115>will <00:06:33.315>break.

118
00:06:36.295 --> 00:06:39.075
<00:06:36.295>And <00:06:36.528>also <00:06:36.761>I'm <00:06:36.995>still <00:06:37.228>new <00:06:37.461>to <00:06:37.695>this.

119
00:06:39.335 --> 00:06:41.915
<00:06:39.335>Uh, <00:06:39.534>please <00:06:39.734>don't <00:06:39.935>take <00:06:40.135>this <00:06:40.335>as <00:06:40.534>best <00:06:40.734>practices

120
00:06:42.175 --> 00:06:43.875
<00:06:42.175>or <00:06:42.350>think <00:06:42.525>that <00:06:42.700>this <00:06:42.875>is <00:06:43.050>the <00:06:43.225>way <00:06:43.400>to <00:06:43.575>go.

121
00:06:44.265 --> 00:06:46.755
<00:06:44.265>This <00:06:44.465>is <00:06:44.664>just <00:06:44.865>my <00:06:45.065>first <00:06:45.265>introduction <00:06:45.465>to <00:06:45.664>sweat

122
00:06:46.815 --> 00:06:48.515
<00:06:46.815>and <00:06:46.990>my <00:06:47.165>first <00:06:47.340>ideas <00:06:47.515>on <00:06:47.690>how <00:06:47.865>to <00:06:48.040>do <00:06:48.215>this.

123
00:06:49.135 --> 00:06:51.395
<00:06:49.135>So <00:06:49.368>maybe <00:06:49.601>I'm <00:06:49.835>doing <00:06:50.068>some <00:06:50.301>stupid <00:06:50.534>mistakes.

124
00:06:51.765 --> 00:06:54.955
<00:06:51.765>Maybe, <00:06:51.920>uh, <00:06:52.076>some <00:06:52.231>sweat <00:06:52.387>gurus <00:06:52.542>would <00:06:52.698>pull <00:06:52.853>their <00:06:53.009>hairs <00:06:53.164>out

125
00:06:54.955 --> 00:06:56.075
<00:06:54.955>of <00:06:55.123>their <00:06:55.291>head <00:06:55.459>if <00:06:55.627>they <00:06:55.795>see <00:06:55.962>me.

126
00:06:56.655 --> 00:06:59.235
<00:06:56.655>But <00:06:56.854>anyway, <00:06:57.054>this <00:06:57.255>is <00:06:57.455>just <00:06:57.655>to <00:06:57.854>have <00:06:58.054>fun

127
00:06:59.335 --> 00:07:00.555
<00:06:59.335>and <00:06:59.554>see <00:06:59.774>what <00:06:59.993>it's <00:07:00.213>all <00:07:00.433>about.

128
00:07:01.575 --> 00:07:05.875
<00:07:01.575>So <00:07:01.775>are <00:07:01.974>you <00:07:02.175>ready? <00:07:02.375>It's <00:07:02.575>time <00:07:02.775>to <00:07:02.974>code.

129
00:07:08.855 --> 00:07:13.075
<00:07:08.855>Um, <00:07:09.135>we <00:07:09.415>see <00:07:09.695>now, <00:07:09.975>uh, <00:07:10.255>the,

130
00:07:13.775 --> 00:07:18.075
<00:07:13.775>uh, <00:07:13.914>sorry, <00:07:14.054>the <00:07:14.195>Angular <00:07:14.335>app, <00:07:14.474>which <00:07:14.614>is <00:07:14.755>called <00:07:14.895>Tour <00:07:15.034>of <00:07:15.174>Heroes.

131
00:07:18.785 --> 00:07:20.035
<00:07:18.785>It's <00:07:19.066>a <00:07:19.347>very <00:07:19.628>simple <00:07:19.910>app.

132
00:07:20.215 --> 00:07:24.475
<00:07:20.215>And <00:07:20.390>when <00:07:20.565>you <00:07:20.739>follow <00:07:20.914>the, <00:07:21.090>um, <00:07:21.265>tutorial <00:07:21.440>for <00:07:21.614>Angular

133
00:07:24.475 --> 00:07:26.875
<00:07:24.475>and <00:07:24.650>the <00:07:24.825>learning <00:07:25.000>path, <00:07:25.175>you <00:07:25.350>will <00:07:25.525>actually <00:07:25.700>develop <00:07:25.875>this.

134
00:07:27.945 --> 00:07:31.395
<00:07:27.945>It's <00:07:28.085>very <00:07:28.224>simple. <00:07:28.365>You <00:07:28.505>have <00:07:28.645>a <00:07:28.784>dashboard, <00:07:28.925>you <00:07:29.065>see <00:07:29.205>a <00:07:29.344>list

135
00:07:31.395 --> 00:07:32.395
<00:07:31.395>of <00:07:31.844>heroes <00:07:32.294>here.

136
00:07:33.455 --> 00:07:34.915
<00:07:33.455>You <00:07:33.717>can <00:07:33.980>add <00:07:34.243>a <00:07:34.506>hero <00:07:34.769>here.

137
00:07:36.095 --> 00:07:40.955
<00:07:36.095>You <00:07:36.235>can, <00:07:36.375>um, <00:07:36.515>also <00:07:36.655>see, <00:07:36.795>um, <00:07:36.935>sorry, <00:07:37.075>this <00:07:37.215>is <00:07:37.355>the, <00:07:37.495>um,

138
00:07:40.955 --> 00:07:43.635
<00:07:40.955>this <00:07:41.094>is <00:07:41.234>the <00:07:41.375>dashboard <00:07:41.515>where <00:07:41.655>you <00:07:41.794>see <00:07:41.935>the <00:07:42.075>top <00:07:42.215>five <00:07:42.354>heroes

139
00:07:44.135 --> 00:07:46.755
<00:07:44.135>and <00:07:44.335>you <00:07:44.534>can <00:07:44.735>search <00:07:44.935>for <00:07:45.135>heroes <00:07:45.335>like <00:07:45.534>Marco.

140
00:07:47.975 --> 00:07:50.555
<00:07:47.975>And <00:07:48.115>you <00:07:48.255>get <00:07:48.395>a <00:07:48.535>list <00:07:48.675>of, <00:07:48.815>uh, <00:07:48.955>items <00:07:49.095>that <00:07:49.235>were <00:07:49.375>matched.

141
00:07:50.555 --> 00:07:54.555
<00:07:50.555>And <00:07:50.682>if <00:07:50.809>you <00:07:50.936>get <00:07:51.064>on <00:07:51.191>here, <00:07:51.318>you <00:07:51.445>get <00:07:51.573>to <00:07:51.700>the <00:07:51.827>details <00:07:51.955>page,

142
00:07:55.255 --> 00:07:59.635
<00:07:55.255>you <00:07:55.395>can <00:07:55.534>edit <00:07:55.675>it, <00:07:55.815>save <00:07:55.955>it, <00:07:56.094>and <00:07:56.235>it <00:07:56.375>has <00:07:56.515>been <00:07:56.655>updated.

143
00:08:00.615 --> 00:08:03.475
<00:08:00.615>So <00:08:00.770>this <00:08:00.926>is <00:08:01.081>what <00:08:01.237>I <00:08:01.392>want <00:08:01.548>to <00:08:01.703>reinvent <00:08:01.859>and <00:08:02.015>swell.

144
00:08:04.735 --> 00:08:08.395
<00:08:04.735>So <00:08:04.935>let's <00:08:05.135>do <00:08:05.335>it. <00:08:05.535>I <00:08:05.735>will <00:08:05.935>open <00:08:06.135>up,

145
00:08:08.655 --> 00:08:09.915
<00:08:08.655>uh, <00:08:09.222>my <00:08:09.789>inte.

146
00:08:11.075 --> 00:08:14.155
<00:08:11.075>I <00:08:11.250>hope <00:08:11.425>you <00:08:11.599>can <00:08:11.775>see <00:08:11.950>it. <00:08:12.125>If <00:08:12.300>you <00:08:12.474>want

147
00:08:14.155 --> 00:08:15.595
<00:08:14.155>to <00:08:14.479>follow <00:08:14.803>along, <00:08:15.127>please <00:08:15.451>do.

148
00:08:15.595 --> 00:08:19.195
<00:08:15.595>So. <00:08:15.722>The <00:08:15.849>first <00:08:15.976>thing <00:08:16.104>you <00:08:16.231>would <00:08:16.358>do <00:08:16.485>is <00:08:16.613>to <00:08:16.740>scaffold <00:08:16.867>the <00:08:16.995>app

149
00:08:19.455 --> 00:08:20.555
<00:08:19.455>and <00:08:19.702>to <00:08:19.950>scaffold <00:08:20.197>the <00:08:20.445>app.

150
00:08:20.555 --> 00:08:22.835
<00:08:20.555>This <00:08:20.730>is <00:08:20.905>very <00:08:21.080>easy. <00:08:21.255>You <00:08:21.430>just <00:08:21.605>open <00:08:21.780>the <00:08:21.955>terminal

151
00:08:23.375 --> 00:08:27.155
<00:08:23.375>and <00:08:23.550>just <00:08:23.725>say, <00:08:23.900>MPX <00:08:24.075>digit <00:08:24.250>12 <00:08:24.425>js <00:08:24.600>template <00:08:24.775>swell.

152
00:08:27.775 --> 00:08:29.235
<00:08:27.775>And <00:08:28.037>this <00:08:28.300>will <00:08:28.563>scaffold <00:08:28.826>the <00:08:29.089>whole,

153
00:08:29.415 --> 00:08:30.755
<00:08:29.415>um, <00:08:29.716>scaffold <00:08:30.018>the <00:08:30.319>whole <00:08:30.621>project.

154
00:08:31.135 --> 00:08:32.955
<00:08:31.135>So <00:08:31.414>you <00:08:31.695>can <00:08:31.974>just <00:08:32.255>follow <00:08:32.534>along.

155
00:08:34.175 --> 00:08:39.075
<00:08:34.174>Uh, <00:08:34.454>also <00:08:34.734>the <00:08:35.015>standards, <00:08:35.294>uh, <00:08:35.574>scaffold

156
00:08:39.585 --> 00:08:40.875
<00:08:39.585>will <00:08:39.972>be <00:08:40.359>in <00:08:40.746>JavaScript.

157
00:08:41.535 --> 00:08:43.075
<00:08:41.534>I'm <00:08:41.881>a <00:08:42.227>big <00:08:42.574>TypeScript <00:08:42.921>fan,

158
00:08:43.495 --> 00:08:45.275
<00:08:43.495>but <00:08:43.728>you <00:08:43.961>can <00:08:44.195>transform <00:08:44.428>it <00:08:44.661>very <00:08:44.895>easily.

159
00:08:45.385 --> 00:08:46.595
<00:08:45.385>They <00:08:45.748>provided <00:08:46.111>a <00:08:46.474>script.

160
00:08:46.895 --> 00:08:50.795
<00:08:46.895>All <00:08:47.002>you <00:08:47.110>have <00:08:47.218>to <00:08:47.325>do <00:08:47.433>is <00:08:47.541>run <00:08:47.648>node <00:08:47.756>script <00:08:47.864>set <00:08:47.971>up, <00:08:48.079>uh, <00:08:48.187>script <00:08:48.295>J

161
00:08:51.335 --> 00:08:52.995
<00:08:51.335>and <00:08:51.568>it'll <00:08:51.801>transform <00:08:52.035>it <00:08:52.268>with <00:08:52.501>no <00:08:52.735>problem.

162
00:08:55.545 --> 00:08:58.685
<00:08:55.545>Uh, <00:08:55.700>what, <00:08:55.856>um, <00:08:56.011>you <00:08:56.167>get <00:08:56.322>when <00:08:56.478>you <00:08:56.633>scaffold <00:08:56.789>the <00:08:56.944>app

163
00:08:58.685 --> 00:09:00.805
<00:08:58.685>and <00:08:58.885>do <00:08:59.084>all <00:08:59.285>this <00:08:59.484>is <00:08:59.685>a <00:08:59.885>package <00:09:00.084>Cham.

164
00:09:01.785 --> 00:09:03.445
<00:09:01.785>And <00:09:01.985>if <00:09:02.185>we <00:09:02.385>take <00:09:02.584>a <00:09:02.785>look <00:09:02.985>at <00:09:03.185>here,

165
00:09:03.905 --> 00:09:06.045
<00:09:03.905>you <00:09:04.185>will <00:09:04.464>notice <00:09:04.745>something <00:09:05.025>very <00:09:05.305>different

166
00:09:06.075 --> 00:09:07.285
<00:09:06.075>from <00:09:06.438>a <00:09:06.801>Angular <00:09:07.164>project.

167
00:09:08.805 --> 00:09:11.005
<00:09:08.805>Actually, <00:09:09.084>we <00:09:09.364>only <00:09:09.645>have <00:09:09.925>deaf <00:09:10.204>dependencies.

168
00:09:11.135 --> 00:09:12.805
<00:09:11.135>There <00:09:11.601>are <00:09:12.068>no <00:09:12.535>dependencies.

169
00:09:13.745 --> 00:09:15.005
<00:09:13.745>And <00:09:13.971>the <00:09:14.198>reason <00:09:14.425>for <00:09:14.652>that <00:09:14.879>is

170
00:09:15.395 --> 00:09:18.965
<00:09:15.395>because, <00:09:15.675>uh, <00:09:15.954>SWT <00:09:16.235>compiles <00:09:16.515>it <00:09:16.795>beforehand.

171
00:09:19.425 --> 00:09:21.805
<00:09:19.425>So <00:09:19.599>it's <00:09:19.775>not <00:09:19.949>like <00:09:20.125>there's <00:09:20.300>a <00:09:20.474>request <00:09:20.650>coming <00:09:20.824>in

172
00:09:22.105 --> 00:09:26.205
<00:09:22.105>and <00:09:22.260>he's, <00:09:22.416>uh, <00:09:22.571>transferring <00:09:22.727>it <00:09:22.882>on <00:09:23.038>the <00:09:23.193>fly, <00:09:23.349>integrating <00:09:23.505>it.

173
00:09:26.785 --> 00:09:30.765
<00:09:26.785>Uh, <00:09:26.925>it'll <00:09:27.064>be <00:09:27.204>compiled <00:09:27.344>beforehand <00:09:27.485>so <00:09:27.625>you <00:09:27.765>can <00:09:27.905>just <00:09:28.045>bundle <00:09:28.185>it,

174
00:09:31.515 --> 00:09:35.445
<00:09:31.515>copy <00:09:31.631>it <00:09:31.748>to <00:09:31.865>your <00:09:31.981>web <00:09:32.098>server <00:09:32.215>and <00:09:32.331>add <00:09:32.448>it <00:09:32.564>in <00:09:32.681>any <00:09:32.798>other <00:09:32.915>project.

175
00:09:38.075 --> 00:09:42.765
<00:09:38.075>Then <00:09:38.215>we <00:09:38.355>have <00:09:38.495>an <00:09:38.635>app <00:09:38.775>swell, <00:09:38.915>which, <00:09:39.055>uh, <00:09:39.195>looks <00:09:39.335>like <00:09:39.475>this.

176
00:09:43.265 --> 00:09:45.245
<00:09:43.265>So <00:09:43.439>as <00:09:43.615>I <00:09:43.790>said, <00:09:43.965>this <00:09:44.140>is <00:09:44.314>the <00:09:44.490>standard, <00:09:44.665>but,

177
00:09:45.245 --> 00:09:47.485
<00:09:45.245>but <00:09:45.400>that <00:09:45.556>you <00:09:45.711>get <00:09:45.867>once <00:09:46.022>you, <00:09:46.178>um, <00:09:46.333>skateboard <00:09:46.489>the <00:09:46.645>project.

178
00:09:47.525 --> 00:09:49.045
<00:09:47.525>I <00:09:47.798>did <00:09:48.072>not <00:09:48.345>change <00:09:48.619>anything <00:09:48.892>here.

179
00:09:49.545 --> 00:09:53.285
<00:09:49.545>That's <00:09:49.719>just <00:09:49.895>the <00:09:50.069>hello <00:09:50.245>name <00:09:50.420>and, <00:09:50.594>uh, <00:09:50.770>sweat <00:09:50.944>tutorial.

180
00:09:54.275 --> 00:09:55.485
<00:09:54.275>I've <00:09:54.547>actually <00:09:54.819>have <00:09:55.091>it <00:09:55.364>running.

181
00:09:55.545 --> 00:09:57.045
<00:09:55.545>So <00:09:55.713>if <00:09:55.882>we <00:09:56.051>look <00:09:56.219>at <00:09:56.388>it <00:09:56.557>in <00:09:56.726>the <00:09:56.895>browser,

182
00:09:59.345 --> 00:10:00.685
<00:09:59.345>we <00:09:59.517>can <00:09:59.689>see <00:09:59.861>that <00:10:00.034>it <00:10:00.206>looks <00:10:00.378>like <00:10:00.550>this.

183
00:10:00.685 --> 00:10:03.805
<00:10:00.685>There's <00:10:00.918>a <00:10:01.151>title <00:10:01.385>and <00:10:01.618>that's <00:10:01.851>basically <00:10:02.084>it.

184
00:10:04.025 --> 00:10:05.605
<00:10:04.025>And <00:10:04.225>this <00:10:04.425>is <00:10:04.625>this <00:10:04.824>platform <00:10:05.025>that <00:10:05.225>we <00:10:05.425>use

185
00:10:05.705 --> 00:10:06.885
<00:10:05.705>to <00:10:05.917>do <00:10:06.129>what <00:10:06.342>we <00:10:06.554>wanna <00:10:06.767>do.

186
00:10:08.595 --> 00:10:11.565
<00:10:08.595>Okay, <00:10:09.995>so

187
00:10:12.295 --> 00:10:15.245
<00:10:12.295>sorry, <00:10:12.995>go <00:10:13.694>back.

188
00:10:17.465 --> 00:10:21.565
<00:10:17.465>We <00:10:17.698>start <00:10:17.931>by <00:10:18.165>actually <00:10:18.398>creating <00:10:18.631>a <00:10:18.865>store.

189
00:10:22.225 --> 00:10:24.605
<00:10:22.225>And <00:10:22.400>if <00:10:22.575>you <00:10:22.750>think <00:10:22.925>about <00:10:23.100>Angular, <00:10:23.275>this <00:10:23.450>would <00:10:23.625>be

190
00:10:24.875 --> 00:10:26.605
<00:10:24.875>what <00:10:25.225>a <00:10:25.575>service <00:10:25.925>looks <00:10:26.275>like.

191
00:10:27.505 --> 00:10:30.405
<00:10:27.505>Our <00:10:27.738>store, <00:10:27.971>which <00:10:28.205>I <00:10:28.438>will <00:10:28.671>create <00:10:28.905>now,

192
00:10:34.155 --> 00:10:35.205
<00:10:34.155>Hero <00:10:35.100>store,

193
00:10:41.185 --> 00:10:44.285
<00:10:41.185>uh, <00:10:41.535>will <00:10:41.885>provide <00:10:42.234>a <00:10:42.584>class

194
00:10:44.385 --> 00:10:46.325
<00:10:44.385>for <00:10:44.585>our <00:10:44.785>heroes <00:10:44.985>that <00:10:45.185>we <00:10:45.385>want <00:10:45.585>to <00:10:45.785>display.

195
00:10:49.185 --> 00:10:52.085
<00:10:49.185>And <00:10:49.418>our <00:10:49.651>heroes <00:10:49.885>actually <00:10:50.118>have <00:10:50.351>an <00:10:50.584>id,

196
00:10:54.165 --> 00:10:55.775
<00:10:54.165>it's <00:10:54.631>a <00:10:55.098>string <00:10:55.564>fine,

197
00:10:57.035 --> 00:11:01.255
<00:10:57.035>and <00:10:57.235>they <00:10:57.435>have <00:10:57.635>nine <00:10:57.834>areas, <00:10:58.035>also <00:10:58.235>a <00:10:58.435>string.

198
00:11:04.475 --> 00:11:08.015
<00:11:04.475>And <00:11:04.602>I <00:11:04.729>also <00:11:04.856>want <00:11:04.984>the <00:11:05.111>power <00:11:05.238>level <00:11:05.365>so <00:11:05.493>we <00:11:05.620>can <00:11:05.747>sort <00:11:05.875>them

199
00:11:08.435 --> 00:11:09.855
<00:11:08.435>and <00:11:08.647>see <00:11:08.861>who's <00:11:09.074>the <00:11:09.287>best <00:11:09.500>of <00:11:09.713>them.

200
00:11:09.875 --> 00:11:13.455
<00:11:09.875>All <00:11:11.275>good.

201
00:11:13.635 --> 00:11:17.615
<00:11:13.635>Now <00:11:13.790>that <00:11:13.946>we've <00:11:14.101>got <00:11:14.257>that, <00:11:14.412>we <00:11:14.568>can <00:11:14.723>actually <00:11:14.879>export <00:11:15.035>something

202
00:11:17.615 --> 00:11:19.295
<00:11:17.615>that <00:11:17.965>is <00:11:18.315>called <00:11:18.665>a <00:11:19.015>store.

203
00:11:19.635 --> 00:11:21.295
<00:11:19.635>And <00:11:19.868>I <00:11:20.101>will <00:11:20.335>call <00:11:20.568>this <00:11:20.801>hero <00:11:21.035>store.

204
00:11:25.595 --> 00:11:28.495
<00:11:25.595>And, <00:11:25.795>and <00:11:25.995>in <00:11:26.195>sweat <00:11:26.395>it's <00:11:26.595>called <00:11:26.795>a <00:11:26.995>writeable,

205
00:11:32.635 --> 00:11:34.455
<00:11:32.635>uh, <00:11:33.101>of <00:11:33.568>type <00:11:34.035>Hero.

206
00:11:36.235 --> 00:11:40.055
<00:11:36.235>And <00:11:36.410>a <00:11:36.585>writeable <00:11:36.760>basically <00:11:36.935>is <00:11:37.110>something, <00:11:37.285>um, <00:11:37.460>that <00:11:37.635>looks

207
00:11:40.155 --> 00:11:43.815
<00:11:40.155>and <00:11:40.329>feels <00:11:40.505>similar <00:11:40.680>to <00:11:40.855>an <00:11:41.030>observable <00:11:41.204>or <00:11:41.380>in <00:11:41.555>RXJS.

208
00:11:44.195 --> 00:11:45.615
<00:11:44.195>So <00:11:44.450>you <00:11:44.706>can <00:11:44.961>subscribe <00:11:45.217>to <00:11:45.473>it

209
00:11:45.835 --> 00:11:48.375
<00:11:45.835>and <00:11:45.990>you <00:11:46.146>will <00:11:46.301>get <00:11:46.457>notified <00:11:46.612>when <00:11:46.768>things <00:11:46.923>change <00:11:47.079>in <00:11:47.235>it.

210
00:11:48.955 --> 00:11:52.575
<00:11:48.955>But <00:11:49.130>please <00:11:49.305>don't <00:11:49.480>think <00:11:49.655>of <00:11:49.830>it <00:11:50.005>as <00:11:50.180>um, <00:11:50.355>um,

211
00:11:52.795 --> 00:11:54.045
<00:11:52.795>um, <00:11:53.920>RXJS.

212
00:11:54.395 --> 00:11:56.125
<00:11:54.395>It's <00:11:54.595>quite <00:11:54.795>different <00:11:54.995>from <00:11:55.194>ns <00:11:55.395>we <00:11:55.595>will <00:11:55.795>see.

213
00:11:56.505 --> 00:12:00.565
<00:11:56.505>But <00:11:56.621>for <00:11:56.738>now <00:11:56.855>we <00:11:56.971>have <00:11:57.088>this, <00:11:57.205>I <00:11:57.321>start, <00:11:57.438>this <00:11:57.555>is <00:11:57.671>the <00:11:57.788>initial <00:11:57.905>value

214
00:12:00.565 --> 00:12:02.925
<00:12:00.565>with <00:12:00.740>an <00:12:00.915>empty <00:12:01.090>list <00:12:01.265>because <00:12:01.440>we <00:12:01.615>don't <00:12:01.790>have <00:12:01.965>any,

215
00:12:03.185 --> 00:12:04.405
<00:12:03.185>uh, <00:12:03.733>heroes <00:12:04.283>yet.

216
00:12:04.985 --> 00:12:06.165
<00:12:04.985>The <00:12:05.339>heroes <00:12:05.693>I <00:12:06.047>want

217
00:12:06.165 --> 00:12:08.725
<00:12:06.165>to <00:12:06.320>show <00:12:06.476>I <00:12:06.631>will <00:12:06.787>actually <00:12:06.942>fetch <00:12:07.098>from <00:12:07.253>a <00:12:07.409>different <00:12:07.564>server.

218
00:12:09.505 --> 00:12:13.765
<00:12:09.505>So <00:12:09.705>let's <00:12:09.905>fetch <00:12:10.105>them. <00:12:10.305>And <00:12:10.505>I <00:12:10.705>have <00:12:10.905>a

219
00:12:14.185 --> 00:12:17.565
<00:12:14.185>simple, <00:12:14.359>very <00:12:14.535>simple <00:12:14.709>note <00:12:14.885>express <00:12:15.060>application <00:12:15.234>running <00:12:15.410>in <00:12:15.584>the

220
00:12:17.675 --> 00:12:21.325
<00:12:17.675>portend, <00:12:17.830>which <00:12:17.986>will <00:12:18.141>provide <00:12:18.297>me <00:12:18.452>with <00:12:18.608>a <00:12:18.763>list <00:12:18.919>of <00:12:19.074>heroes.

221
00:12:26.335 --> 00:12:27.555
<00:12:26.335>Uh, <00:12:26.609>so <00:12:26.884>we <00:12:27.158>fetch <00:12:27.433>this

222
00:12:27.975 --> 00:12:30.955
<00:12:27.975>and <00:12:28.208>then <00:12:28.441>when <00:12:28.675>we <00:12:28.908>get <00:12:29.141>the <00:12:29.375>response,

223
00:12:34.895 --> 00:12:37.435
<00:12:34.895>we <00:12:35.069>actually <00:12:35.245>want <00:12:35.420>to <00:12:35.595>have <00:12:35.770>the <00:12:35.944>Jason <00:12:36.120>from <00:12:36.295>this.

224
00:12:42.195 --> 00:12:43.255
<00:12:42.195>And <00:12:42.433>once <00:12:42.672>we <00:12:42.910>have <00:12:43.149>this,

225
00:12:46.845 --> 00:12:50.825
<00:12:46.845>we <00:12:47.000>can <00:12:47.156>actually <00:12:47.311>set <00:12:47.467>our <00:12:47.622>hero <00:12:47.778>store <00:12:47.933>to <00:12:48.089>the <00:12:48.245>value

226
00:12:50.845 --> 00:12:53.705
<00:12:50.845>of <00:12:51.545>Jason <00:12:52.245>Heroes.

227
00:13:00.155 --> 00:13:04.855
<00:13:00.155>The <00:13:00.295>next <00:13:00.435>thing, <00:13:00.574>um, <00:13:00.714>I <00:13:00.855>want <00:13:00.995>to <00:13:01.135>show <00:13:01.275>the <00:13:01.415>top <00:13:01.555>five,

228
00:13:05.075 --> 00:13:07.055
<00:13:05.075>the <00:13:05.308>five <00:13:05.541>for <00:13:05.775>the <00:13:06.008>highest <00:13:06.241>power <00:13:06.475>level.

229
00:13:08.355 --> 00:13:11.695
<00:13:08.355>So <00:13:08.510>in <00:13:08.666>r <00:13:08.821>js <00:13:08.977>we <00:13:09.132>would <00:13:09.288>subscribe <00:13:09.443>to <00:13:09.599>this <00:13:09.755>observable,

230
00:13:11.695 --> 00:13:13.655
<00:13:11.695>we <00:13:11.975>put <00:13:12.255>pipe, <00:13:12.535>um, <00:13:12.815>to <00:13:13.095>it

231
00:13:13.675 --> 00:13:16.055
<00:13:13.675>and <00:13:13.908>make <00:13:14.141>mapping <00:13:14.375>operations <00:13:14.608>or <00:13:14.841>filter <00:13:15.074>operations.

232
00:13:16.605 --> 00:13:19.375
<00:13:16.605>Here <00:13:16.760>we <00:13:16.916>can <00:13:17.071>do <00:13:17.227>something <00:13:17.382>very <00:13:17.538>different <00:13:17.693>and <00:13:17.849>very <00:13:18.005>cool.

233
00:13:20.195 --> 00:13:23.055
<00:13:20.195>We <00:13:20.428>can <00:13:20.661>actually <00:13:20.895>export <00:13:21.128>a <00:13:21.361>second <00:13:21.595>store,

234
00:13:23.055 --> 00:13:26.135
<00:13:23.055>which <00:13:23.334>is <00:13:23.614>called <00:13:23.895>the <00:13:24.175>Top <00:13:24.454>Heroes.

235
00:13:29.995 --> 00:13:34.815
<00:13:29.995>And <00:13:30.135>we <00:13:30.275>can, <00:13:30.415>um, <00:13:30.555>the <00:13:30.695>arrive <00:13:30.835>this <00:13:30.975>from <00:13:31.115>our <00:13:31.255>previous <00:13:31.395>store.

236
00:13:36.555 --> 00:13:39.415
<00:13:36.555>So <00:13:36.710>we <00:13:36.866>can <00:13:37.021>say, <00:13:37.177>uh, <00:13:37.332>please <00:13:37.488>take <00:13:37.643>all <00:13:37.799>the <00:13:37.954>values

237
00:13:39.525 --> 00:13:40.775
<00:13:39.525>that <00:13:39.806>are <00:13:40.087>in <00:13:40.368>hero <00:13:40.650>store.

238
00:13:46.395 --> 00:13:48.055
<00:13:46.395>And <00:13:46.675>when <00:13:46.954>you <00:13:47.235>get <00:13:47.515>a <00:13:47.795>hero,

239
00:13:50.315 --> 00:13:54.295
<00:13:50.315>we <00:13:50.548>make <00:13:50.781>a <00:13:51.015>little <00:13:51.248>transformation, <00:13:51.481>uh, <00:13:51.715>sorry.

240
00:13:55.075 --> 00:13:59.575
<00:13:55.075>We <00:13:55.250>take <00:13:55.425>the <00:13:55.600>heroes <00:13:55.775>and <00:13:55.950>we <00:13:56.125>will <00:13:56.300>actually, <00:13:56.475>uh,

241
00:14:00.325 --> 00:14:02.015
<00:14:00.325>sort <00:14:00.675>them <00:14:01.025>by <00:14:01.375>power <00:14:01.725>level

242
00:14:33.585 --> 00:14:36.365
<00:14:33.585>and <00:14:33.740>after <00:14:33.896>we <00:14:34.051>have <00:14:34.207>sorted <00:14:34.362>them, <00:14:34.518>we <00:14:34.673>will <00:14:34.829>slice <00:14:34.985>them

243
00:14:44.805 --> 00:14:48.665
<00:14:44.805>to <00:14:44.979>only <00:14:45.155>get, <00:14:45.329>uh, <00:14:45.505>the <00:14:45.680>five <00:14:45.854>of <00:14:46.030>the <00:14:46.204>highest.

244
00:14:49.765 --> 00:14:54.275
<00:14:49.765>Uh, <00:14:49.905>let's <00:14:50.045>see <00:14:50.185>if <00:14:50.324>I <00:14:50.465>can <00:14:50.605>this <00:14:50.745>a <00:14:50.885>little <00:14:51.025>more. <00:14:51.165>Yeah.

245
00:14:59.255 --> 00:15:03.035
<00:14:59.255>Yes. <00:15:00.655>Perfect.

246
00:15:04.375 --> 00:15:06.955
<00:15:04.375>So <00:15:04.530>now <00:15:04.686>I <00:15:04.841>have <00:15:04.997>a <00:15:05.152>star <00:15:05.308>which <00:15:05.463>can <00:15:05.619>provide <00:15:05.775>me

247
00:15:06.955 --> 00:15:09.035
<00:15:06.955>with <00:15:07.110>the <00:15:07.266>top <00:15:07.421>heroes <00:15:07.577>and <00:15:07.732>I <00:15:07.888>want <00:15:08.043>to <00:15:08.199>display <00:15:08.355>them.

248
00:15:09.415 --> 00:15:12.195
<00:15:09.415>So <00:15:09.542>we <00:15:09.669>can <00:15:09.796>do <00:15:09.924>this <00:15:10.051>by <00:15:10.178>just <00:15:10.305>simply <00:15:10.433>add <00:15:10.560>a <00:15:10.687>new <00:15:10.814>component

249
00:15:20.775 --> 00:15:24.155
<00:15:20.775>And <00:15:20.949>we <00:15:21.125>create <00:15:21.300>a <00:15:21.475>fire <00:15:21.650>called <00:15:21.824>Top <00:15:22.000>five <00:15:22.175>Heroes.

250
00:15:24.935 --> 00:15:25.155
And,

251
00:15:34.295 --> 00:15:37.875
<00:15:34.295>And <00:15:34.645>here <00:15:34.995>language <00:15:35.344>is <00:15:35.694>transcript.

252
00:15:38.895 --> 00:15:39.995
<00:15:38.895>We <00:15:39.225>actually <00:15:39.555>import <00:15:39.885>this,

253
00:15:47.815 --> 00:15:50.955
<00:15:47.815>and <00:15:47.970>once <00:15:48.126>we <00:15:48.281>have <00:15:48.437>imported <00:15:48.592>them, <00:15:48.748>we <00:15:48.903>can <00:15:49.059>show <00:15:49.215>them.

254
00:15:51.295 --> 00:15:52.795
<00:15:51.295>So <00:15:51.520>we <00:15:51.745>start <00:15:51.969>with <00:15:52.194>an <00:15:52.420>H <00:15:52.645>one

255
00:15:55.455 --> 00:15:56.635
<00:15:55.455>Top <00:15:55.986>five <00:15:56.517>Heroes.

256
00:16:01.215 --> 00:16:02.715
<00:16:01.215>We <00:16:01.440>go <00:16:01.665>through <00:16:01.890>each <00:16:02.115>of <00:16:02.340>these <00:16:02.565>heroes

257
00:16:03.415 --> 00:16:07.675
<00:16:03.415>And <00:16:04.814>Oh,

258
00:16:07.675 --> 00:16:08.835
<00:16:07.675>sorry, <00:16:07.883>I <00:16:08.092>imported <00:16:08.301>the <00:16:08.510>wrong <00:16:08.719>one.

259
00:16:08.875 --> 00:16:10.115
<00:16:08.875>I <00:16:09.061>wanted <00:16:09.247>the <00:16:09.433>copy <00:16:09.619>list, <00:16:09.805>of <00:16:09.991>course.

260
00:16:20.615 --> 00:16:24.235
<00:16:20.615>And <00:16:20.755>for <00:16:20.895>each, <00:16:21.035>I <00:16:21.175>will <00:16:21.315>print <00:16:21.455>out <00:16:21.595>a <00:16:21.735>paragraph <00:16:21.875>with <00:16:22.015>the

261
00:16:25.065 --> 00:16:26.355
<00:16:25.065>hero <00:16:26.226>Elias.

262
00:16:31.785 --> 00:16:35.235
<00:16:31.785>Okay. <00:16:31.959>And <00:16:32.135>if <00:16:32.310>the <00:16:32.485>Democrats <00:16:32.660>are <00:16:32.834>happy <00:16:33.010>with <00:16:33.185>me,

263
00:16:35.255 --> 00:16:37.355
<00:16:35.255>we <00:16:35.455>should <00:16:35.655>actually <00:16:35.855>see <00:16:36.055>this <00:16:36.255>on <00:16:36.455>our <00:16:36.655>webpage.

264
00:16:42.255 --> 00:16:46.755
<00:16:42.255>Uh <00:16:42.955>oh. <00:16:43.655>Okay.

265
00:16:46.755 --> 00:16:47.995
<00:16:46.755>What <00:16:47.034>was, <00:16:47.313>now, <00:16:47.592>let's <00:16:47.871>see.

266
00:16:51.845 --> 00:16:53.945
<00:16:51.845>Oh <00:16:52.045>yes, <00:16:52.245>I <00:16:52.445>know <00:16:52.645>I <00:16:52.845>created <00:16:53.045>the <00:16:53.245>component,

267
00:16:53.945 --> 00:16:55.465
<00:16:53.945>but <00:16:54.173>I'm <00:16:54.401>actually <00:16:54.629>not <00:16:54.857>using <00:16:55.085>it <00:16:55.313>yet.

268
00:16:55.765 --> 00:17:00.625
<00:16:55.765>So <00:16:55.892>we <00:16:56.019>have <00:16:56.146>to <00:16:56.274>go <00:16:56.401>into <00:16:56.528>our, <00:16:56.655>uh, <00:16:56.783>app <00:16:56.910>and <00:16:57.037>import <00:16:57.165>it.

269
00:17:06.725 --> 00:17:09.745
<00:17:06.724>So <00:17:06.899>we <00:17:07.074>want <00:17:07.250>to <00:17:07.425>import <00:17:07.599>the <00:17:07.774>top <00:17:07.949>five <00:17:08.125>heroes

270
00:17:13.335 --> 00:17:14.785
<00:17:13.335>from <00:17:14.640>components.

271
00:17:16.785 --> 00:17:20.305
<00:17:16.785>I <00:17:17.065>quote <00:17:17.345>the <00:17:17.625>top <00:17:17.905>five <00:17:18.185>heroes.

272
00:17:22.685 --> 00:17:24.705
<00:17:22.685>And <00:17:22.885>with <00:17:23.085>that, <00:17:23.284>we <00:17:23.484>can <00:17:23.685>actually <00:17:23.885>use <00:17:24.085>them.

273
00:17:37.685 --> 00:17:40.345
<00:17:37.685>So <00:17:37.825>let's <00:17:37.965>see <00:17:38.105>if <00:17:38.245>we <00:17:38.385>are <00:17:38.524>now <00:17:38.665>a <00:17:38.804>little <00:17:38.945>more <00:17:39.085>successful.

274
00:17:41.205 --> 00:17:44.025
<00:17:41.205>Yes, <00:17:41.438>also <00:17:41.671>remove <00:17:41.905>all <00:17:42.138>the <00:17:42.371>rest, <00:17:42.605>sorry.

275
00:17:51.245 --> 00:17:55.505
<00:17:51.245>And <00:17:51.372>we <00:17:51.499>see <00:17:51.626>that <00:17:51.754>the <00:17:51.881>five, <00:17:52.008>uh, <00:17:52.135>best <00:17:52.263>heroes <00:17:52.390>have <00:17:52.517>been <00:17:52.645>loaded,

276
00:17:56.405 --> 00:17:58.345
<00:17:56.405>but <00:17:56.580>this <00:17:56.754>looks <00:17:56.930>a <00:17:57.105>little <00:17:57.280>bit <00:17:57.455>funny <00:17:57.629>and <00:17:57.805>ugly.

277
00:17:59.005 --> 00:18:01.905
<00:17:59.005>So <00:17:59.205>I've <00:17:59.405>prepared <00:17:59.605>some <00:17:59.805>little <00:18:00.005>bit <00:18:00.205>of <00:18:00.405>styling.

278
00:18:02.325 --> 00:18:06.225
<00:18:02.325>If <00:18:02.500>we <00:18:02.675>just <00:18:02.850>take <00:18:03.025>on <00:18:03.200>our <00:18:03.375>script <00:18:03.550>from <00:18:03.725>here

279
00:18:08.405 --> 00:18:10.665
<00:18:08.405>and <00:18:08.871>actually <00:18:09.338>edit <00:18:09.805>here,

280
00:18:15.115 --> 00:18:18.455
<00:18:15.115>we <00:18:15.290>just <00:18:15.465>have <00:18:15.640>to <00:18:15.815>change <00:18:15.990>our <00:18:16.165>H-T-M-L-A <00:18:16.340>little <00:18:16.515>bit.

281
00:18:23.735 --> 00:18:24.555
<00:18:23.735>We <00:18:23.981>want <00:18:24.227>a <00:18:24.473>this

282
00:18:29.765 --> 00:18:30.745
<00:18:29.765>of <00:18:30.206>class <00:18:30.647>container.

283
00:18:36.645 --> 00:18:41.425
<00:18:36.645>And <00:18:36.995>here <00:18:37.345>we <00:18:37.695>want <00:18:38.045>a

284
00:18:41.455 --> 00:18:44.785
<00:18:41.455>diff <00:18:41.921>of <00:18:42.388>class <00:18:42.855>box.

285
00:18:55.205 --> 00:18:58.705
<00:18:55.205>And <00:18:55.405>here <00:18:55.605>we <00:18:55.804>want <00:18:56.004>to <00:18:56.205>spend <00:18:56.405>class <00:18:56.605>hero

286
00:19:01.765 --> 00:19:04.425
<00:19:01.765>inside <00:19:01.965>there <00:19:02.165>we <00:19:02.365>would <00:19:02.565>display <00:19:02.765>our <00:19:02.965>hero <00:19:03.165>alliance.

287
00:19:12.205 --> 00:19:13.625
<00:19:12.205>And <00:19:12.387>if <00:19:12.570>we <00:19:12.752>go <00:19:12.935>back <00:19:13.117>to <00:19:13.300>the <00:19:13.483>page,

288
00:19:14.125 --> 00:19:16.145
<00:19:14.125>it <00:19:14.358>looks <00:19:14.591>a <00:19:14.825>little <00:19:15.058>bit <00:19:15.291>better, <00:19:15.525>nicer.

289
00:19:17.165 --> 00:19:19.065
<00:19:17.165>So <00:19:17.398>this <00:19:17.631>is <00:19:17.865>how <00:19:18.098>we <00:19:18.331>actually <00:19:18.565>connect

290
00:19:19.065 --> 00:19:22.345
<00:19:19.065>to <00:19:19.205>a <00:19:19.345>store <00:19:19.485>Fetched <00:19:19.625>data <00:19:19.765>from <00:19:19.905>a <00:19:20.045>backend <00:19:20.185>service <00:19:20.325>display <00:19:20.465>it.

291
00:19:22.735 --> 00:19:25.905
<00:19:22.735>Yeah, <00:19:22.909>and <00:19:23.084>as <00:19:23.260>you <00:19:23.435>saw, <00:19:23.610>it's <00:19:23.784>very <00:19:23.959>little <00:19:24.135>code

292
00:19:26.365 --> 00:19:30.025
<00:19:26.365>and <00:19:26.598>uh, <00:19:26.831>we <00:19:27.065>actually <00:19:27.298>wrote <00:19:27.531>the, <00:19:27.765>uh,

293
00:19:30.915 --> 00:19:32.345
<00:19:30.915>style <00:19:31.344>just <00:19:31.773>in <00:19:32.202>place.

294
00:19:32.835 --> 00:19:35.105
<00:19:32.835>Everything <00:19:33.115>is <00:19:33.395>concise, <00:19:33.675>everything <00:19:33.955>looks <00:19:34.235>nice.

295
00:19:36.655 --> 00:19:39.425
<00:19:36.655>Okay, <00:19:38.055>sorry.

296
00:19:47.205 --> 00:19:49.785
<00:19:47.205>Uh, <00:19:47.405>I <00:19:47.605>see <00:19:47.804>that <00:19:48.004>time <00:19:48.205>is <00:19:48.405>moving <00:19:48.605>fast.

297
00:19:50.045 --> 00:19:52.545
<00:19:50.045>So <00:19:50.200>I <00:19:50.356>think <00:19:50.511>I <00:19:50.667>will <00:19:50.822>skip <00:19:50.978>a <00:19:51.133>little <00:19:51.289>bit <00:19:51.445>ahead

298
00:19:52.605 --> 00:19:55.865
<00:19:52.605>and <00:19:52.805>show <00:19:53.005>you <00:19:53.205>what <00:19:53.405>it <00:19:53.605>would <00:19:53.805>look <00:19:54.005>like

299
00:19:57.205 --> 00:20:00.665
<00:19:57.205>if <00:19:57.379>we <00:19:57.554>create <00:19:57.730>another <00:19:57.905>component <00:19:58.080>which <00:19:58.254>actually <00:19:58.429>displays, <00:19:58.605>uh,

300
00:20:00.885 --> 00:20:03.025
<00:20:00.885>not <00:20:01.085>the <00:20:01.285>top <00:20:01.485>five, <00:20:01.685>but <00:20:01.885>all <00:20:02.085>the <00:20:02.285>heroes.

301
00:20:03.765 --> 00:20:05.065
<00:20:03.765>So <00:20:04.057>I <00:20:04.350>will <00:20:04.642>skip <00:20:04.935>forward.

302
00:20:08.535 --> 00:20:10.325
<00:20:08.535>Sorry, <00:20:08.815>I've <00:20:09.095>prepared <00:20:09.375>it. <00:20:09.655>Of <00:20:09.935>course.

303
00:20:19.235 --> 00:20:20.425
<00:20:19.235>Let's <00:20:19.502>go <00:20:19.770>to <00:20:20.038>step <00:20:20.306>two.

304
00:20:31.065 --> 00:20:32.965
<00:20:31.065>Uh, <00:20:31.298>not, <00:20:31.531>not <00:20:31.765>so <00:20:31.998>much <00:20:32.231>as <00:20:32.465>that.

305
00:20:33.055 --> 00:20:35.485
<00:20:33.055>There, <00:20:33.255>there's <00:20:33.455>a <00:20:33.655>new <00:20:33.855>component <00:20:34.055>called <00:20:34.255>List <00:20:34.455>Heroes.

306
00:20:36.785 --> 00:20:41.405
<00:20:36.785>And <00:20:36.940>the <00:20:37.096>List <00:20:37.251>Heroes <00:20:37.407>also <00:20:37.562>imports <00:20:37.718>the <00:20:37.873>store <00:20:38.029>from <00:20:38.185>here.

307
00:20:42.545 --> 00:20:46.565
<00:20:42.545>And <00:20:42.720>it <00:20:42.895>also <00:20:43.070>has <00:20:43.245>a <00:20:43.420>local <00:20:43.595>field, <00:20:43.770>um, <00:20:43.945>heroes,

308
00:20:47.865 --> 00:20:49.645
<00:20:47.865>um, <00:20:48.331>which <00:20:48.798>is <00:20:49.265>exported.

309
00:20:49.785 --> 00:20:50.925
<00:20:49.785>And <00:20:50.298>export <00:20:50.811>means

310
00:20:51.355 --> 00:20:53.965
<00:20:51.355>that <00:20:51.530>a <00:20:51.705>parent <00:20:51.880>component <00:20:52.055>can <00:20:52.230>actually <00:20:52.405>set <00:20:52.580>the <00:20:52.755>value

311
00:20:54.065 --> 00:20:55.125
<00:20:54.065>of <00:20:54.383>this <00:20:54.701>heroes <00:20:55.019>list.

312
00:20:55.985 --> 00:20:58.845
<00:20:55.985>So <00:20:56.159>the <00:20:56.334>idea <00:20:56.510>is <00:20:56.685>that <00:20:56.860>a <00:20:57.034>top <00:20:57.209>level, <00:20:57.385>um,

313
00:20:59.635 --> 00:21:02.485
<00:20:59.635>component <00:20:59.790>will <00:20:59.946>tell <00:21:00.101>the <00:21:00.257>hero <00:21:00.412>list <00:21:00.568>what <00:21:00.723>heroes <00:21:00.879>to <00:21:01.035>display,

314
00:21:03.945 --> 00:21:05.845
<00:21:03.945>and <00:21:04.225>it <00:21:04.504>will <00:21:04.784>actually <00:21:05.064>do <00:21:05.345>so.

315
00:21:06.745 --> 00:21:08.365
<00:21:06.745>So <00:21:06.945>we <00:21:07.145>have <00:21:07.344>a <00:21:07.544>little <00:21:07.745>bit <00:21:07.945>of <00:21:08.145>styling.

316
00:21:08.505 --> 00:21:13.485
<00:21:08.505>And <00:21:08.645>then <00:21:08.785>again, <00:21:08.925>uh, <00:21:09.065>we <00:21:09.205>will <00:21:09.345>have <00:21:09.485>an <00:21:09.625>anor <00:21:09.765>list <00:21:09.905>where

317
00:21:16.895 --> 00:21:18.825
<00:21:16.895>show <00:21:17.128>the <00:21:17.361>power <00:21:17.595>level, <00:21:17.828>show <00:21:18.061>the <00:21:18.295>name,

318
00:21:20.085 --> 00:21:23.745
<00:21:20.085>and <00:21:20.212>this <00:21:20.339>is <00:21:20.466>what's <00:21:20.594>added <00:21:20.721>into <00:21:20.848>the <00:21:20.975>app, <00:21:21.103>well, <00:21:21.230>where <00:21:21.357>we <00:21:21.485>just,

319
00:21:24.125 --> 00:21:27.825
<00:21:24.125>uh, <00:21:24.280>change <00:21:24.436>it <00:21:24.591>to <00:21:24.747>import <00:21:24.902>the <00:21:25.058>hero <00:21:25.213>list <00:21:25.369>from <00:21:25.525>here,

320
00:21:29.365 --> 00:21:30.465
<00:21:29.365>import <00:21:29.695>the <00:21:30.024>hero <00:21:30.355>store.

321
00:21:31.495 --> 00:21:35.545
<00:21:31.495>Then, <00:21:31.650>um, <00:21:31.806>display <00:21:31.961>the <00:21:32.117>hero <00:21:32.272>component <00:21:32.428>under <00:21:32.583>the <00:21:32.739>top <00:21:32.895>five

322
00:21:35.645 --> 00:21:39.065
<00:21:35.645>heroes <00:21:35.785>and <00:21:35.925>give <00:21:36.065>the <00:21:36.205>value <00:21:36.345>of <00:21:36.485>the <00:21:36.625>hero <00:21:36.764>store <00:21:36.905>into <00:21:37.045>it.

323
00:21:40.175 --> 00:21:42.585
<00:21:40.175>Also, <00:21:40.302>please <00:21:40.429>notice, <00:21:40.556>uh, <00:21:40.684>notice, <00:21:40.811>I <00:21:40.938>think <00:21:41.065>I <00:21:41.193>did <00:21:41.320>not <00:21:41.447>say <00:21:41.575>this,

324
00:21:43.495 --> 00:21:45.225
<00:21:43.495>there's <00:21:43.728>a <00:21:43.961>dollar <00:21:44.195>here <00:21:44.428>at <00:21:44.661>the <00:21:44.895>beginning,

325
00:21:45.725 --> 00:21:48.065
<00:21:45.725>and <00:21:45.899>this <00:21:46.074>is <00:21:46.250>actually <00:21:46.425>where <00:21:46.600>the <00:21:46.774>magic <00:21:46.949>happens <00:21:47.125>so

326
00:21:48.065 --> 00:21:50.265
<00:21:48.065>that <00:21:48.240>we <00:21:48.415>don't <00:21:48.590>have <00:21:48.765>to <00:21:48.940>subscribe <00:21:49.115>to <00:21:49.290>our <00:21:49.465>store.

327
00:21:50.835 --> 00:21:54.065
<00:21:50.835>Sweat <00:21:51.010>will <00:21:51.185>take <00:21:51.360>all <00:21:51.535>care <00:21:51.710>of <00:21:51.885>everything <00:21:52.060>without <00:21:52.235>subscribing

328
00:21:54.065 --> 00:21:55.265
<00:21:54.065>and <00:21:54.425>unsubscribing <00:21:54.785>from <00:21:55.145>it.

329
00:21:55.485 --> 00:21:57.585
<00:21:55.485>So <00:21:55.659>that's <00:21:55.834>awesome. <00:21:56.010>I <00:21:56.185>don't <00:21:56.360>have <00:21:56.534>to <00:21:56.709>do <00:21:56.885>anything.

330
00:21:59.405 --> 00:22:00.505
<00:21:59.405>And <00:21:59.570>if <00:21:59.735>you <00:21:59.900>take <00:22:00.065>a <00:22:00.230>look <00:22:00.395>here,

331
00:22:02.805 --> 00:22:05.665
<00:22:02.805>you <00:22:02.945>actually <00:22:03.085>see <00:22:03.225>this <00:22:03.365>is <00:22:03.505>our <00:22:03.645>top <00:22:03.785>five <00:22:03.925>heroes <00:22:04.065>from <00:22:04.205>before.

332
00:22:05.965 --> 00:22:08.905
<00:22:05.965>And <00:22:06.081>now <00:22:06.198>we <00:22:06.314>also <00:22:06.431>have <00:22:06.548>the <00:22:06.665>list <00:22:06.781>of <00:22:06.898>all <00:22:07.014>the <00:22:07.131>heroes, <00:22:07.248>which <00:22:07.365>were,

333
00:22:09.085 --> 00:22:12.745
<00:22:09.085>um, <00:22:09.240>loaded <00:22:09.396>from <00:22:09.551>the <00:22:09.707>backend <00:22:09.862>and <00:22:10.018>a <00:22:10.173>little <00:22:10.329>power <00:22:10.485>indicator.

334
00:22:13.215 --> 00:22:16.225
<00:22:13.215>Yeah. <00:22:13.415>And <00:22:13.615>also <00:22:13.814>notice <00:22:14.014>they <00:22:14.215>are <00:22:14.415>not <00:22:14.615>sorted.

335
00:22:16.415 --> 00:22:17.425
<00:22:16.415>They <00:22:16.717>are, <00:22:17.021>uh, <00:22:17.324>coming

336
00:22:17.525 --> 00:22:20.345
<00:22:17.525>or <00:22:17.665>sorted <00:22:17.805>in <00:22:17.945>the <00:22:18.085>order <00:22:18.225>that <00:22:18.365>the <00:22:18.505>backend <00:22:18.645>has <00:22:18.785>provided <00:22:18.925>them.

337
00:22:22.045 --> 00:22:25.585
<00:22:22.045>So, <00:22:22.161>but <00:22:22.278>also <00:22:22.395>we <00:22:22.511>can <00:22:22.628>see <00:22:22.745>Jerry <00:22:22.861>here <00:22:22.978>is <00:22:23.095>displayed <00:22:23.211>as <00:22:23.328>a <00:22:23.445>first.

338
00:22:26.165 --> 00:22:30.265
<00:22:26.165>And <00:22:26.320>if <00:22:26.476>you <00:22:26.631>take <00:22:26.787>a <00:22:26.942>look, <00:22:27.098>uh, <00:22:27.253>oh, <00:22:27.409>that's <00:22:27.565>strange.

339
00:22:32.225 --> 00:22:36.025
<00:22:32.225>I <00:22:32.365>think <00:22:32.504>my <00:22:32.645>sorting <00:22:32.784>is <00:22:32.925>broken <00:22:33.064>or, <00:22:33.205>uh, <00:22:33.344>doesn't <00:22:33.485>really <00:22:33.625>matter.

340
00:22:36.085 --> 00:22:37.305
<00:22:36.085>We <00:22:36.268>get <00:22:36.451>to <00:22:36.634>a, <00:22:36.817>a <00:22:37.000>little <00:22:37.183>bit.

341
00:22:38.685 --> 00:22:39.905
<00:22:38.685>It <00:22:38.959>should <00:22:39.234>be <00:22:39.508>actually <00:22:39.783>the,

342
00:22:39.925 --> 00:22:41.985
<00:22:39.925>the <00:22:40.205>under <00:22:40.485>the <00:22:40.764>highest <00:22:41.044>power <00:22:41.325>level.

343
00:22:44.335 --> 00:22:44.625
Okay?

344
00:22:49.885 --> 00:22:53.185
<00:22:49.885>Now <00:22:50.060>that <00:22:50.235>the <00:22:50.410>have, <00:22:50.585>um, <00:22:50.760>the <00:22:50.935>list <00:22:51.110>of <00:22:51.285>molecules,

345
00:22:53.355 --> 00:22:55.945
<00:22:53.355>let's <00:22:53.495>create <00:22:53.635>a <00:22:53.775>component <00:22:53.915>where <00:22:54.055>we <00:22:54.195>can <00:22:54.335>actually <00:22:54.475>edit <00:22:54.615>a <00:22:54.755>hero.

346
00:22:56.645 --> 00:22:59.265
<00:22:56.645>So <00:22:56.820>he <00:22:56.995>would <00:22:57.170>details <00:22:57.345>component <00:22:57.520>if <00:22:57.695>you <00:22:57.870>want <00:22:58.045>to.

347
00:23:00.845 --> 00:23:02.465
<00:23:00.845>So, <00:23:01.311>um, <00:23:01.778>for <00:23:02.245>that,

348
00:23:02.805 --> 00:23:05.145
<00:23:02.805>we <00:23:02.980>will <00:23:03.155>actually <00:23:03.330>go <00:23:03.505>back <00:23:03.680>into <00:23:03.855>our <00:23:04.030>store <00:23:04.205>implementation

349
00:23:05.645 --> 00:23:09.785
<00:23:05.645>and <00:23:05.878>create <00:23:06.111>just <00:23:06.345>yet <00:23:06.578>another <00:23:06.811>writeable, <00:23:07.045>namely

350
00:23:09.785 --> 00:23:11.825
<00:23:09.785>for <00:23:10.135>the <00:23:10.485>currently <00:23:10.835>selected <00:23:11.185>hero.

351
00:23:12.885 --> 00:23:15.825
<00:23:12.885>So <00:23:13.165>we'll <00:23:13.445>export <00:23:13.725>cons <00:23:14.004>selected <00:23:14.285>hero.

352
00:23:19.745 --> 00:23:21.755
<00:23:19.745>This <00:23:19.978>is <00:23:20.211>a <00:23:20.445>writeable <00:23:20.678>of <00:23:20.911>type <00:23:21.145>hero.

353
00:23:26.215 --> 00:23:30.915
<00:23:26.215>And <00:23:26.342>the <00:23:26.469>initial <00:23:26.596>value <00:23:26.724>is <00:23:26.851>now <00:23:26.978>we <00:23:27.105>haven't <00:23:27.233>selected <00:23:27.360>a <00:23:27.487>hero <00:23:27.615>yet.

354
00:23:35.335 --> 00:23:39.995
<00:23:35.335>Now, <00:23:35.490>in <00:23:35.646>our <00:23:35.801>heroes <00:23:35.957>list, <00:23:36.112>I <00:23:36.268>want <00:23:36.423>to <00:23:36.579>actually, <00:23:36.735>uh,

355
00:23:40.265 --> 00:23:42.435
<00:23:40.265>have <00:23:40.465>a <00:23:40.665>click, <00:23:40.865>uh, <00:23:41.065>um, <00:23:41.265>a <00:23:41.465>click <00:23:41.665>list.

356
00:23:42.455 --> 00:23:44.635
<00:23:42.455>Now <00:23:42.655>that <00:23:42.855>I, <00:23:43.054>when <00:23:43.254>I <00:23:43.455>click <00:23:43.655>on <00:23:43.855>one

357
00:23:44.635 --> 00:23:46.605
<00:23:44.635>of <00:23:44.915>these <00:23:45.195>heroes, <00:23:45.475>it <00:23:45.754>gets <00:23:46.035>selected.

358
00:23:47.825 --> 00:23:51.885
<00:23:47.825>So <00:23:47.980>we <00:23:48.136>can <00:23:48.291>actually <00:23:48.447>then <00:23:48.602>navigate <00:23:48.758>to <00:23:48.913>the <00:23:49.069>details <00:23:49.225>page

359
00:23:51.885 --> 00:23:54.445
<00:23:51.885>and <00:23:52.085>show <00:23:52.285>the <00:23:52.485>details <00:23:52.685>of <00:23:52.885>this, <00:23:53.085>um, <00:23:53.285>hero.

360
00:23:56.435 --> 00:23:58.925
<00:23:56.435>Very <00:23:56.610>simple. <00:23:56.784>All <00:23:56.960>we <00:23:57.135>have <00:23:57.310>to <00:23:57.485>do <00:23:57.659>is, <00:23:57.835>um,

361
00:23:59.825 --> 00:24:02.525
<00:23:59.825>to <00:24:00.105>import <00:24:00.385>the <00:24:00.665>selected, <00:24:00.945>um, <00:24:01.225>hero

362
00:24:02.705 --> 00:24:04.405
<00:24:02.705>and <00:24:03.054>also <00:24:03.405>write <00:24:03.754>a <00:24:04.105>little

363
00:24:05.165 --> 00:24:07.245
<00:24:05.165>function <00:24:05.445>which <00:24:05.725>can <00:24:06.004>handle <00:24:06.284>the <00:24:06.565>selection.

364
00:24:09.225 --> 00:24:11.245
<00:24:09.225>It <00:24:09.458>gets <00:24:09.691>a <00:24:09.925>hero <00:24:10.158>of <00:24:10.391>type <00:24:10.625>hero.

365
00:24:17.355 --> 00:24:20.975
<00:24:17.355>And <00:24:17.495>if <00:24:17.635>we <00:24:17.775>have <00:24:17.915>this, <00:24:18.055>we <00:24:18.195>can <00:24:18.335>actually <00:24:18.475>say <00:24:18.615>select <00:24:18.755>hero

366
00:24:22.195 --> 00:24:24.135
<00:24:22.195>Set, <00:24:22.475>set <00:24:22.754>the <00:24:23.034>value <00:24:23.314>to <00:24:23.595>here.

367
00:24:25.115 --> 00:24:29.695
<00:24:25.115>So <00:24:25.270>this <00:24:25.426>email <00:24:25.581>let <00:24:25.737>was <00:24:25.892>just <00:24:26.048>click <00:24:26.203>also <00:24:26.359>quick <00:24:26.515>note.

368
00:24:29.875 --> 00:24:34.775
<00:24:29.875>Um, <00:24:30.075>the <00:24:30.275>writeable <00:24:30.475>give <00:24:30.675>you <00:24:30.875>two, <00:24:31.075>um, <00:24:31.275>methods.

369
00:24:34.955 --> 00:24:36.295
<00:24:34.955>One <00:24:35.196>is <00:24:35.437>set, <00:24:35.678>one <00:24:35.919>is <00:24:36.161>update.

370
00:24:36.595 --> 00:24:38.975
<00:24:36.595>The <00:24:36.795>update <00:24:36.995>method <00:24:37.195>actually <00:24:37.395>calls <00:24:37.595>the <00:24:37.795>set <00:24:37.995>method.

371
00:24:39.035 --> 00:24:40.495
<00:24:39.035>So <00:24:39.363>it's <00:24:39.692>just <00:24:40.020>synthetic <00:24:40.349>sugar,

372
00:24:40.595 --> 00:24:41.975
<00:24:40.595>and <00:24:40.843>I <00:24:41.091>electrical <00:24:41.340>the <00:24:41.588>set <00:24:41.837>method.

373
00:24:45.235 --> 00:24:48.735
<00:24:45.235>Now <00:24:45.375>if <00:24:45.514>you <00:24:45.655>go <00:24:45.794>to <00:24:45.935>our <00:24:46.074>list <00:24:46.215>element, <00:24:46.354>we <00:24:46.495>can <00:24:46.635>actually

374
00:24:49.845 --> 00:24:51.175
<00:24:49.845>have <00:24:50.144>a <00:24:50.443>listener <00:24:50.742>on <00:24:51.042>click

375
00:24:53.075 --> 00:24:57.095
<00:24:53.075>and <00:24:53.275>we <00:24:53.475>just <00:24:53.675>say, <00:24:53.875>okay, <00:24:54.075>select <00:24:54.275>the <00:24:54.475>hero.

376
00:24:59.885 --> 00:25:03.455
<00:24:59.885>Yeah, <00:25:00.235>Select, <00:25:00.585>sorry, <00:25:00.935>handle, <00:25:01.285>select

377
00:25:04.885 --> 00:25:06.975
<00:25:04.885>With <00:25:05.585>a <00:25:06.285>hero.

378
00:25:07.525 --> 00:25:08.655
<00:25:07.525>With <00:25:07.864>this <00:25:08.203>very <00:25:08.542>hero.

379
00:25:12.525 --> 00:25:16.015
<00:25:12.525>Okay. <00:25:12.700>And <00:25:12.875>since <00:25:13.050>we <00:25:13.225>also <00:25:13.400>have <00:25:13.575>the <00:25:13.750>top <00:25:13.925>five

380
00:25:16.555 --> 00:25:17.775
<00:25:16.555>and <00:25:17.104>heroes <00:25:17.653>component,

381
00:25:18.595 --> 00:25:20.975
<00:25:18.595>we <00:25:18.795>should <00:25:18.995>actually <00:25:19.195>recreate <00:25:19.395>this <00:25:19.595>on <00:25:19.795>this <00:25:19.995>page

382
00:25:20.975 --> 00:25:22.535
<00:25:20.975>as <00:25:21.208>well <00:25:21.441>on <00:25:21.675>this <00:25:21.908>component <00:25:22.141>as <00:25:22.375>well.

383
00:25:22.555 --> 00:25:26.695
<00:25:22.555>So <00:25:22.671>we <00:25:22.788>can <00:25:22.905>also <00:25:23.021>select <00:25:23.138>the <00:25:23.255>heroes <00:25:23.371>in <00:25:23.488>there. <00:25:23.605>So <00:25:23.721>let's <00:25:23.838>do <00:25:23.955>this.

384
00:25:27.165 --> 00:25:29.455
<00:25:27.165>It's <00:25:27.365>a <00:25:27.565>little <00:25:27.764>bit <00:25:27.965>repetitive <00:25:28.165>and <00:25:28.365>copy <00:25:28.565>it.

385
00:25:53.725 --> 00:25:56.505
<00:25:53.725>So <00:25:53.899>this <00:25:54.074>will <00:25:54.250>select <00:25:54.425>here. <00:25:54.600>Here, <00:25:54.774>okay, <00:25:54.949>every <00:25:55.125>fine.

386
00:25:59.085 --> 00:26:01.385
<00:25:59.085>So <00:25:59.285>with <00:25:59.485>that, <00:25:59.685>we <00:25:59.885>can <00:26:00.085>actually <00:26:00.285>select <00:26:00.485>here.

387
00:26:02.165 --> 00:26:04.865
<00:26:02.165>Now <00:26:02.320>we <00:26:02.476>need <00:26:02.631>a <00:26:02.787>new <00:26:02.942>component <00:26:03.098>to <00:26:03.253>edit <00:26:03.409>the <00:26:03.565>hero.

388
00:26:05.765 --> 00:26:10.025
<00:26:05.765>So <00:26:05.940>let's <00:26:06.115>do <00:26:06.290>this. <00:26:06.465>I <00:26:06.640>call <00:26:06.815>this <00:26:06.990>hero <00:26:07.165>details.

389
00:26:18.605 --> 00:26:22.385
<00:26:18.605>And <00:26:18.838>we <00:26:19.071>have <00:26:19.305>a <00:26:19.538>script, <00:26:19.771>text <00:26:20.005>script.

390
00:26:26.465 --> 00:26:27.705
<00:26:26.465>I <00:26:27.581>need

391
00:26:27.845 --> 00:26:32.845
<00:26:27.845>to <00:26:28.311>import <00:26:28.778>the <00:26:29.245>type

392
00:26:37.115 --> 00:26:40.245
<00:26:37.115>Perfect. <00:26:37.581>And <00:26:38.048>I <00:26:38.515>also,

393
00:26:41.765 --> 00:26:44.455
<00:26:41.765>I <00:26:41.965>Need <00:26:42.165>to <00:26:42.365>know <00:26:42.565>which <00:26:42.765>hero <00:26:42.965>was <00:26:43.165>selected.

394
00:26:52.145 --> 00:26:54.295
<00:26:52.145>Great. <00:26:52.425>And <00:26:52.705>once <00:26:52.985>I <00:26:53.264>have <00:26:53.545>these,

395
00:26:54.575 --> 00:26:56.055
<00:26:54.575>I <00:26:54.797>can <00:26:55.019>just <00:26:55.241>have <00:26:55.463>two <00:26:55.685>input <00:26:55.907>fields

396
00:26:58.695 --> 00:27:00.635
<00:26:58.695>and <00:26:58.975>we <00:26:59.254>can <00:26:59.534>bind <00:26:59.814>the <00:27:00.095>value

397
00:27:05.725 --> 00:27:06.785
<00:27:05.725>to <00:27:06.202>our <00:27:06.679>hero.

398
00:27:07.115 --> 00:27:07.465
Elias,

399
00:27:14.135 --> 00:27:16.765
<00:27:14.135>let's <00:27:14.310>have <00:27:14.485>a <00:27:14.660>little <00:27:14.835>placeholder <00:27:15.010>like <00:27:15.185>name <00:27:15.360>your <00:27:15.535>hero.

400
00:27:22.915 --> 00:27:27.215
<00:27:22.915>And <00:27:23.055>I <00:27:23.195>also <00:27:23.335>want <00:27:23.475>a <00:27:23.615>second <00:27:23.754>input <00:27:23.895>for <00:27:24.034>the <00:27:24.175>power <00:27:24.315>level.

401
00:27:38.425 --> 00:27:40.205
<00:27:38.425>And <00:27:38.658>now <00:27:38.891>that <00:27:39.125>we <00:27:39.358>have <00:27:39.591>got <00:27:39.825>this,

402
00:27:40.625 --> 00:27:43.165
<00:27:40.625>we <00:27:40.780>can <00:27:40.936>actually <00:27:41.091>use <00:27:41.247>it <00:27:41.402>in <00:27:41.558>our <00:27:41.713>app <00:27:41.869>as <00:27:42.025>well

403
00:27:45.095 --> 00:27:49.205
<00:27:45.095>where <00:27:45.328>we <00:27:45.561>import, <00:27:45.795>um, <00:27:46.028>the <00:27:46.261>selected <00:27:46.495>hero.

404
00:27:55.025 --> 00:27:59.045
<00:27:55.025>And <00:27:55.141>now <00:27:55.258>we <00:27:55.375>can <00:27:55.491>check <00:27:55.608>actually <00:27:55.725>in <00:27:55.841>our <00:27:55.958>view <00:27:56.075>if <00:27:56.191>the <00:27:56.308>hero <00:27:56.425>was

405
00:27:59.285 --> 00:27:59.405
selected

406
00:28:15.875 --> 00:28:17.895
<00:28:15.875>and <00:28:16.108>if <00:28:16.341>the <00:28:16.575>hero <00:28:16.808>actually <00:28:17.041>was <00:28:17.275>selected.

407
00:28:19.335 --> 00:28:23.175
<00:28:19.335>I <00:28:19.490>want <00:28:19.646>to <00:28:19.801>show <00:28:19.957>the <00:28:20.112>hero <00:28:20.268>detail, <00:28:20.423>which <00:28:20.579>I <00:28:20.735>forgot

408
00:28:23.175 --> 00:28:24.855
<00:28:23.175>to <00:28:23.455>import <00:28:23.735>tell <00:28:24.014>you <00:28:24.294>about <00:28:24.575>this.

409
00:28:38.545 --> 00:28:40.395
<00:28:38.545>It's <00:28:39.245>Imported <00:28:39.945>from.

410
00:28:55.405 --> 00:28:57.465
<00:28:55.405>So <00:28:55.605>we <00:28:55.805>want <00:28:56.004>to <00:28:56.205>show <00:28:56.405>our <00:28:56.605>hero <00:28:56.805>details

411
00:28:57.975 --> 00:29:01.185
<00:28:57.975>with <00:28:58.208>the <00:28:58.441>hero <00:28:58.675>is <00:28:58.908>our <00:28:59.141>selected <00:28:59.375>hero.

412
00:29:09.275 --> 00:29:12.705
<00:29:09.275>Great. <00:29:09.555>Let's <00:29:09.835>see <00:29:10.115>if <00:29:10.395>it <00:29:10.675>works.

413
00:29:14.765 --> 00:29:17.025
<00:29:14.765>Oh, <00:29:16.165>okay.

414
00:29:17.525 --> 00:29:21.585
<00:29:17.525>Uh, <00:29:18.925>this

415
00:29:22.355 --> 00:29:23.425
<00:29:22.355>might <00:29:22.676>be <00:29:22.997>a <00:29:23.318>problem.

416
00:29:24.495 --> 00:29:28.945
<00:29:24.495>Caching, <00:29:25.895>no.

417
00:29:32.855 --> 00:29:36.065
<00:29:32.855>Okay, <00:29:32.982>I <00:29:33.109>had <00:29:33.236>this <00:29:33.364>once <00:29:33.491>and <00:29:33.618>I <00:29:33.745>don't <00:29:33.873>know <00:29:34.000>what <00:29:34.127>it <00:29:34.255>means,

418
00:29:36.285 --> 00:29:39.065
<00:29:36.285>but <00:29:36.565>sometimes <00:29:36.845>he <00:29:37.125>does <00:29:37.405>not, <00:29:37.685>uh,

419
00:29:39.335 --> 00:29:42.325
<00:29:39.335>refresh <00:29:39.801>these <00:29:40.268>store <00:29:40.735>ones.

420
00:29:42.325 --> 00:29:43.325
<00:29:42.325>I've <00:29:42.775>changed <00:29:43.225>it.

421
00:29:45.275 --> 00:29:50.045
<00:29:45.275>Okay, <00:29:45.625>We <00:29:45.975>have <00:29:46.325>our <00:29:46.675>components

422
00:29:50.055 --> 00:29:51.845
<00:29:50.055>again, <00:29:50.255>and <00:29:50.455>if <00:29:50.655>I <00:29:50.855>select <00:29:51.055>one <00:29:51.255>of <00:29:51.455>them,

423
00:29:52.265 --> 00:29:53.765
<00:29:52.265>our <00:29:52.715>details <00:29:53.165>are <00:29:53.615>displayed.

424
00:29:53.955 --> 00:29:56.765
<00:29:53.955>Perfect. <00:29:54.155>Also, <00:29:54.355>if <00:29:54.554>I <00:29:54.754>select <00:29:54.955>something <00:29:55.155>from <00:29:55.355>here,

425
00:29:57.545 --> 00:29:58.565
<00:29:57.545>it <00:29:57.851>changes <00:29:58.157>to <00:29:58.463>here.

426
00:29:59.635 --> 00:30:01.485
<00:29:59.635>It's, <00:29:59.915>uh, <00:30:00.195>all <00:30:00.475>fine <00:30:00.754>and <00:30:01.035>Penny,

427
00:30:02.145 --> 00:30:03.725
<00:30:02.145>but <00:30:02.345>we <00:30:02.545>are <00:30:02.745>going <00:30:02.945>actually <00:30:03.145>to <00:30:03.345>be <00:30:03.545>able

428
00:30:03.725 --> 00:30:05.125
<00:30:03.725>to <00:30:03.976>change <00:30:04.229>this <00:30:04.481>and <00:30:04.733>save <00:30:04.985>this.

429
00:30:05.465 --> 00:30:09.285
<00:30:05.465>So <00:30:05.698>let's <00:30:05.931>do <00:30:06.165>this. <00:30:06.398>Go <00:30:06.631>back <00:30:06.865>here.

430
00:30:10.185 --> 00:30:14.085
<00:30:10.185>And <00:30:10.312>we <00:30:10.439>provide <00:30:10.566>this <00:30:10.694>in <00:30:10.821>our <00:30:10.948>heroes <00:30:11.075>to <00:30:11.203>us, <00:30:11.330>heroes <00:30:11.457>to <00:30:11.585>us.

431
00:30:14.085 --> 00:30:15.765
<00:30:14.085>So <00:30:14.365>let's <00:30:14.645>write <00:30:14.925>an <00:30:15.205>update <00:30:15.485>function,

432
00:30:21.935 --> 00:30:22.595
<00:30:21.935>update <00:30:22.529>hero,

433
00:30:26.835 --> 00:30:27.485
<00:30:26.835>take <00:30:27.127>a <00:30:27.419>hero,

434
00:30:35.845 --> 00:30:38.185
<00:30:35.845>and <00:30:36.125>we <00:30:36.405>call <00:30:36.685>hero <00:30:36.965>store <00:30:37.245>Update.

435
00:30:41.935 --> 00:30:43.195
<00:30:41.935>In <00:30:42.312>this <00:30:42.691>update <00:30:43.069>method,

436
00:30:43.255 --> 00:30:45.555
<00:30:43.255>we <00:30:43.488>can <00:30:43.721>actually <00:30:43.955>get <00:30:44.188>the <00:30:44.421>current <00:30:44.655>heroes.

437
00:30:45.555 --> 00:30:46.355
<00:30:45.555>So <00:30:45.795>the <00:30:46.035>current <00:30:46.275>value,

438
00:30:54.365 --> 00:30:58.315
<00:30:54.365>which <00:30:54.540>is <00:30:54.715>great <00:30:54.890>because <00:30:55.065>now <00:30:55.240>we <00:30:55.415>can <00:30:55.590>have <00:30:55.765>a,

439
00:30:58.345 --> 00:31:01.315
<00:30:58.345>have <00:30:58.545>our <00:30:58.745>function <00:30:58.945>quite, <00:30:59.145>we <00:30:59.345>move <00:30:59.545>by <00:30:59.745>ID

440
00:31:04.005 --> 00:31:04.995
<00:31:04.005>where <00:31:04.227>we <00:31:04.450>take <00:31:04.673>a <00:31:04.896>hero

441
00:31:09.935 --> 00:31:13.475
<00:31:09.935>and <00:31:10.168>we <00:31:10.401>actually <00:31:10.635>want <00:31:10.868>to <00:31:11.101>have <00:31:11.335>the

442
00:31:14.385 --> 00:31:17.835
<00:31:14.385>current <00:31:14.665>hero <00:31:14.945>and <00:31:15.225>we <00:31:15.504>filter <00:31:15.785>them.

443
00:31:18.975 --> 00:31:22.755
<00:31:18.975>And <00:31:19.115>then <00:31:19.254>the <00:31:19.395>third <00:31:19.534>one, <00:31:19.675>we <00:31:19.814>just <00:31:19.955>look <00:31:20.094>if <00:31:20.235>the <00:31:20.375>HID

444
00:31:24.535 --> 00:31:27.515
<00:31:24.535>is <00:31:24.768>not <00:31:25.001>equal <00:31:25.235>to <00:31:25.468>our <00:31:25.701>hero <00:31:25.935>id.

445
00:31:29.175 --> 00:31:32.715
<00:31:29.175>So <00:31:29.524>we <00:31:29.875>get <00:31:30.225>each, <00:31:30.575>uh,

446
00:31:33.695 --> 00:31:36.235
<00:31:33.695>one <00:31:33.975>which <00:31:34.254>was <00:31:34.534>not <00:31:34.814>deselected, <00:31:35.095>um,

447
00:31:36.255 --> 00:31:37.715
<00:31:36.255>the <00:31:36.517>the <00:31:36.780>hero <00:31:37.043>to <00:31:37.306>be <00:31:37.569>updated.

448
00:31:39.335 --> 00:31:43.035
<00:31:39.335>And <00:31:39.490>now <00:31:39.646>with <00:31:39.801>that, <00:31:39.957>we <00:31:40.112>can <00:31:40.268>return <00:31:40.423>the <00:31:40.579>new <00:31:40.735>value.

449
00:31:43.655 --> 00:31:45.795
<00:31:43.655>And <00:31:43.935>for <00:31:44.215>that <00:31:44.495>we <00:31:44.774>just <00:31:45.055>say,

450
00:31:46.025 --> 00:31:49.715
<00:31:46.025>take <00:31:46.200>everything <00:31:46.375>which <00:31:46.550>would <00:31:46.725>be <00:31:46.900>removed <00:31:47.075>by <00:31:47.250>the <00:31:47.425>hero

451
00:31:50.495 --> 00:31:53.515
<00:31:50.495>and <00:31:50.669>place <00:31:50.844>the <00:31:51.020>new <00:31:51.195>value <00:31:51.370>from <00:31:51.544>Hero <00:31:51.719>into <00:31:51.895>this.

452
00:31:54.925 --> 00:31:55.955
<00:31:54.925>Right? <00:31:55.388>Looks <00:31:55.851>good.

453
00:31:58.215 --> 00:32:01.195
<00:31:58.215>And <00:31:58.389>uh, <00:31:58.564>also <00:31:58.740>please <00:31:58.915>note, <00:31:59.090>uh, <00:31:59.264>this <00:31:59.439>is <00:31:59.615>just

454
00:32:01.455 --> 00:32:02.835
<00:32:01.455>for <00:32:02.076>demonstration <00:32:02.697>purposes.

455
00:32:02.855 --> 00:32:05.915
<00:32:02.855>In <00:32:02.982>the <00:32:03.109>real <00:32:03.236>world, <00:32:03.364>you <00:32:03.491>of <00:32:03.618>course <00:32:03.745>would, <00:32:03.873>um, <00:32:04.000>make <00:32:04.127>a <00:32:04.255>post

456
00:32:05.975 --> 00:32:08.795
<00:32:05.975>to <00:32:06.130>the <00:32:06.286>backend <00:32:06.441>service <00:32:06.597>so <00:32:06.752>that <00:32:06.908>the <00:32:07.063>backend <00:32:07.219>service, <00:32:07.375>uh,

457
00:32:08.795 --> 00:32:11.235
<00:32:08.795>server <00:32:08.970>would <00:32:09.145>actually, <00:32:09.320>uh, <00:32:09.495>write <00:32:09.670>it <00:32:09.845>to <00:32:10.020>the <00:32:10.195>database.

458
00:32:11.975 --> 00:32:13.795
<00:32:11.975>But, <00:32:12.175>uh, <00:32:12.375>I <00:32:12.574>should <00:32:12.774>do <00:32:12.975>this <00:32:13.175>for <00:32:13.375>speed

459
00:32:13.795 --> 00:32:15.435
<00:32:13.795>and <00:32:14.145>also <00:32:14.495>to <00:32:14.845>show <00:32:15.195>you

460
00:32:15.435 --> 00:32:17.755
<00:32:15.435>how <00:32:15.590>you <00:32:15.746>can <00:32:15.901>use <00:32:16.057>the <00:32:16.212>current <00:32:16.368>values <00:32:16.523>in <00:32:16.679>the <00:32:16.835>store.

461
00:32:20.425 --> 00:32:23.515
<00:32:20.425>Okay, <00:32:20.600>so <00:32:20.774>we'll <00:32:20.950>go <00:32:21.125>back <00:32:21.300>into <00:32:21.475>our <00:32:21.649>hero <00:32:21.825>details,

462
00:32:28.575 --> 00:32:30.555
<00:32:28.575>and <00:32:28.855>I <00:32:29.135>want <00:32:29.415>this <00:32:29.695>update <00:32:29.975>function.

463
00:32:31.735 --> 00:32:35.555
<00:32:31.735>Uh, <00:32:31.851>I <00:32:31.968>think <00:32:32.084>I <00:32:32.201>can <00:32:32.318>have <00:32:32.435>film <00:32:32.551>import <00:32:32.668>for <00:32:32.784>me. <00:32:32.901>Let's <00:32:33.018>try <00:32:33.135>it.

464
00:32:35.575 --> 00:32:37.315
<00:32:35.575>So <00:32:35.855>if <00:32:36.135>I <00:32:36.415>say <00:32:36.695>handled <00:32:36.975>safe,

465
00:32:42.925 --> 00:32:47.285
<00:32:42.925>I <00:32:43.158>want <00:32:43.391>to <00:32:43.625>update <00:32:43.858>you <00:32:44.091>of <00:32:44.325>Hero.

466
00:32:50.465 --> 00:32:52.005
<00:32:50.465>And <00:32:50.663>for <00:32:50.860>that <00:32:51.059>I <00:32:51.257>will <00:32:51.455>mute <00:32:51.653>the <00:32:51.851>button

467
00:33:01.655 --> 00:33:06.515
<00:33:01.655>where <00:33:02.004>the <00:33:02.355>unclick <00:33:02.705>is <00:33:03.055>actually

468
00:33:06.735 --> 00:33:08.195
<00:33:06.735>the <00:33:07.391>handle <00:33:08.049>safe.

469
00:33:12.505 --> 00:33:13.765
<00:33:12.505>So <00:33:12.883>Call <00:33:13.261>it <00:33:13.639>safe,

470
00:33:16.785 --> 00:33:17.805
<00:33:16.785>and <00:33:16.968>let's <00:33:17.152>see <00:33:17.335>if <00:33:17.519>this <00:33:17.703>works.

471
00:33:25.385 --> 00:33:26.765
<00:33:25.385>If <00:33:25.695>I <00:33:26.006>select <00:33:26.316>the <00:33:26.627>meta

472
00:33:27.465 --> 00:33:31.765
<00:33:27.465>and <00:33:27.592>I <00:33:27.719>change <00:33:27.846>the <00:33:27.974>power <00:33:28.101>level <00:33:28.228>to <00:33:28.355>120, <00:33:28.483>it <00:33:28.610>gets <00:33:28.737>updated <00:33:28.865>here.

473
00:33:32.075 --> 00:33:35.325
<00:33:32.075>Also, <00:33:32.230>it <00:33:32.386>was <00:33:32.541>repositioned <00:33:32.697>Here. <00:33:32.852>I <00:33:33.008>can <00:33:33.163>change <00:33:33.319>the <00:33:33.475>name.

474
00:33:37.225 --> 00:33:38.805
<00:33:37.225>It <00:33:37.458>is <00:33:37.691>reflected <00:33:37.925>in <00:33:38.158>those <00:33:38.391>of <00:33:38.625>these.

475
00:33:39.295 --> 00:33:43.845
<00:33:39.295>Let's <00:33:39.495>give, <00:33:39.695>this <00:33:39.895>was <00:33:40.095>7,000. <00:33:40.295>Oh, <00:33:40.495>it <00:33:40.695>works.

476
00:33:44.075 --> 00:33:47.925
<00:33:44.075>Perfect. <00:33:44.308>Okay, <00:33:44.541>now <00:33:44.775>looking <00:33:45.008>at <00:33:45.241>the <00:33:45.475>time,

477
00:33:48.085 --> 00:33:49.685
<00:33:48.085>I <00:33:48.285>will <00:33:48.485>skip <00:33:48.685>ahead <00:33:48.885>a <00:33:49.085>little <00:33:49.285>bit <00:33:49.485>more.

478
00:33:51.385 --> 00:33:55.165
<00:33:51.385>So <00:33:51.665>In <00:33:51.945>the <00:33:52.225>next <00:33:52.504>part, <00:33:52.785>uh,

479
00:33:55.245 --> 00:33:57.805
<00:33:55.245>I <00:33:55.478>edit <00:33:55.711>a <00:33:55.945>little <00:33:56.178>bit <00:33:56.411>of <00:33:56.645>navigation.

480
00:33:58.025 --> 00:33:59.925
<00:33:58.025>So <00:33:58.305>I <00:33:58.585>say <00:33:58.865>navigation <00:33:59.145>in <00:33:59.425>quotes

481
00:34:00.035 --> 00:34:04.045
<00:34:00.035>because <00:34:00.162>swell <00:34:00.289>on <00:34:00.416>its <00:34:00.544>own <00:34:00.671>does <00:34:00.798>not <00:34:00.925>bring <00:34:01.053>you <00:34:01.180>an, <00:34:01.307>uh, <00:34:01.435>routing

482
00:34:04.265 --> 00:34:05.725
<00:34:04.265>or <00:34:04.593>something <00:34:04.922>that <00:34:05.250>Angular <00:34:05.579>would.

483
00:34:06.155 --> 00:34:08.845
<00:34:06.155>There's <00:34:06.355>a <00:34:06.555>project, <00:34:06.754>a <00:34:06.955>cool <00:34:07.155>project <00:34:07.355>called, <00:34:07.555>uh,

484
00:34:08.845 --> 00:34:10.605
<00:34:08.844>which <00:34:09.125>is <00:34:09.404>a <00:34:09.685>little <00:34:09.964>bit, <00:34:10.245>um,

485
00:34:10.945 --> 00:34:12.285
<00:34:10.945>as <00:34:11.117>the <00:34:11.289>setup <00:34:11.461>is <00:34:11.634>a <00:34:11.806>little <00:34:11.978>bit <00:34:12.150>different,

486
00:34:12.505 --> 00:34:14.925
<00:34:12.505>but <00:34:12.705>there <00:34:12.905>you <00:34:13.105>can, <00:34:13.305>uh, <00:34:13.505>have <00:34:13.705>templated <00:34:13.905>routes.

487
00:34:15.065 --> 00:34:17.925
<00:34:15.065>That's <00:34:15.220>just <00:34:15.376>like <00:34:15.531>an <00:34:15.687>angular <00:34:15.842>and <00:34:15.998>everything <00:34:16.153>would <00:34:16.309>work <00:34:16.465>fine.

488
00:34:18.725 --> 00:34:20.965
<00:34:18.725>I <00:34:18.924>just <00:34:19.125>decided <00:34:19.324>to <00:34:19.525>not <00:34:19.725>go <00:34:19.924>this <00:34:20.125>route

489
00:34:21.025 --> 00:34:25.725
<00:34:21.025>and <00:34:21.165>stay <00:34:21.305>as <00:34:21.445>close <00:34:21.585>to <00:34:21.725>the, <00:34:21.865>um, <00:34:22.005>basic <00:34:22.145>sweat <00:34:22.285>as <00:34:22.425>possible.

490
00:34:26.225 --> 00:34:29.965
<00:34:26.225>But <00:34:26.364>also <00:34:26.505>note <00:34:26.645>that <00:34:26.784>recently <00:34:26.924>Rich <00:34:27.065>ever <00:34:27.205>the <00:34:27.344>founder <00:34:27.485>of, <00:34:27.625>um,

491
00:34:30.295 --> 00:34:33.365
<00:34:30.295>sweat <00:34:30.495>has <00:34:30.695>announced <00:34:30.895>that <00:34:31.095>Seppa <00:34:31.295>will <00:34:31.495>be <00:34:31.695>discontinued

492
00:34:33.365 --> 00:34:36.045
<00:34:33.364>and <00:34:33.504>that <00:34:33.645>it <00:34:33.784>will <00:34:33.924>be <00:34:34.064>an <00:34:34.205>integral <00:34:34.344>part <00:34:34.484>of <00:34:34.625>sweat <00:34:34.764>itself.

493
00:34:36.345 --> 00:34:38.165
<00:34:36.344>So <00:34:36.694>this <00:34:37.044>feature <00:34:37.395>is <00:34:37.745>coming,

494
00:34:39.185 --> 00:34:41.325
<00:34:39.185>but <00:34:39.418>for <00:34:39.651>now, <00:34:39.884>let's <00:34:40.118>do <00:34:40.351>a <00:34:40.585>dummy

495
00:34:41.325 --> 00:34:43.565
<00:34:41.324>implementation <00:34:41.674>and <00:34:42.024>work <00:34:42.375>around <00:34:42.725>this.

496
00:34:45.265 --> 00:34:47.325
<00:34:45.264>So <00:34:45.614>again, <00:34:45.964>I'll <00:34:46.315>reset <00:34:46.665>this

497
00:34:54.615 --> 00:34:57.235
<00:34:54.614>and <00:34:54.848>I <00:34:55.081>will <00:34:55.314>go <00:34:55.548>to <00:34:55.781>step <00:34:56.014>five.

498
00:35:11.335 --> 00:35:15.385
<00:35:11.335>What <00:35:11.490>happened <00:35:11.646>here <00:35:11.801>is <00:35:11.957>actually <00:35:12.112>the <00:35:12.268>hero <00:35:12.423>details <00:35:12.579>got <00:35:12.735>a

499
00:35:15.385 --> 00:35:18.985
<00:35:15.385>little, <00:35:15.665>um, <00:35:15.945>function <00:35:16.225>called <00:35:16.505>handle <00:35:16.785>back,

500
00:35:19.155 --> 00:35:20.705
<00:35:19.155>which <00:35:19.387>is <00:35:19.620>called <00:35:19.852>in <00:35:20.085>the <00:35:20.317>back <00:35:20.550>button.

501
00:35:21.965 --> 00:35:24.905
<00:35:21.965>And <00:35:22.140>what's <00:35:22.315>happening <00:35:22.490>here, <00:35:22.665>I <00:35:22.840>have <00:35:23.015>a <00:35:23.190>event <00:35:23.365>dispatcher.

502
00:35:25.455 --> 00:35:29.465
<00:35:25.455>With <00:35:25.630>this <00:35:25.805>event <00:35:25.980>dispatcher, <00:35:26.154>you <00:35:26.330>can <00:35:26.505>fire <00:35:26.680>custom <00:35:26.855>events,

503
00:35:29.845 --> 00:35:32.385
<00:35:29.845>so <00:35:30.020>custom <00:35:30.194>tailored <00:35:30.370>events <00:35:30.544>so <00:35:30.720>you <00:35:30.895>don't, <00:35:31.069>uh, <00:35:31.245>have

504
00:35:32.405 --> 00:35:35.385
<00:35:32.405>to <00:35:32.545>rely <00:35:32.685>on <00:35:32.825>the <00:35:32.965>events <00:35:33.105>that <00:35:33.245>the <00:35:33.385>dorm <00:35:33.525>is <00:35:33.665>providing <00:35:33.805>you.

505
00:35:35.525 --> 00:35:40.085
<00:35:35.525>You <00:35:35.680>can <00:35:35.836>create <00:35:35.991>your <00:35:36.147>own, <00:35:36.302>which <00:35:36.458>is <00:35:36.613>perfect <00:35:36.769>because <00:35:36.925>now

506
00:35:40.445 --> 00:35:42.165
<00:35:40.445>whenever <00:35:40.725>the <00:35:41.005>back <00:35:41.285>button <00:35:41.565>is <00:35:41.845>clicked,

507
00:35:42.325 --> 00:35:45.245
<00:35:42.325>I <00:35:42.464>would <00:35:42.605>dispatch <00:35:42.745>the <00:35:42.884>back <00:35:43.024>event <00:35:43.165>with <00:35:43.305>a <00:35:43.444>payload <00:35:43.585>of <00:35:43.725>null

508
00:35:45.245 --> 00:35:46.285
<00:35:45.245>because <00:35:45.557>I <00:35:45.868>don't <00:35:46.181>care.

509
00:35:47.825 --> 00:35:50.885
<00:35:47.825>And <00:35:47.964>if <00:35:48.105>we <00:35:48.245>take <00:35:48.384>a <00:35:48.524>look <00:35:48.665>at <00:35:48.805>our <00:35:48.944>app, <00:35:49.085>uh, <00:35:49.225>well,

510
00:35:52.425 --> 00:35:56.645
<00:35:52.425>we <00:35:52.705>actually <00:35:52.985>see, <00:35:53.265>uh, <00:35:53.545>sorry, <00:35:53.825>it's,

511
00:35:58.075 --> 00:36:00.205
<00:35:58.075>yeah, <00:35:58.424>we <00:35:58.774>actually <00:35:59.125>see <00:35:59.475>that,

512
00:36:02.185 --> 00:36:03.325
<00:36:02.185>oh, <00:36:02.441>I'm <00:36:02.698>losing <00:36:02.954>my <00:36:03.211>input.

513
00:36:03.325 --> 00:36:07.445
<00:36:03.325>Sorry. <00:36:03.605>Where <00:36:03.884>was <00:36:04.165>the <00:36:04.444>code? <00:36:04.725>Sorry.

514
00:36:18.785 --> 00:36:20.685
<00:36:18.785>Ah, <00:36:19.018>yes, <00:36:19.251>sorry, <00:36:19.484>I, <00:36:19.718>I <00:36:19.951>just <00:36:20.185>forgot.

515
00:36:21.145 --> 00:36:23.085
<00:36:21.145>Um, <00:36:21.425>here <00:36:21.705>in <00:36:21.985>the <00:36:22.265>hero <00:36:22.545>details,

516
00:36:23.145 --> 00:36:26.405
<00:36:23.145>we <00:36:23.345>are <00:36:23.545>binding <00:36:23.745>this <00:36:23.945>custom <00:36:24.145>event <00:36:24.345>called <00:36:24.545>back.

517
00:36:26.825 --> 00:36:28.965
<00:36:26.825>And <00:36:27.058>whenever <00:36:27.291>the <00:36:27.524>back <00:36:27.758>function <00:36:27.991>is <00:36:28.225>fired,

518
00:36:28.985 --> 00:36:30.285
<00:36:28.985>we <00:36:29.277>will <00:36:29.570>unselect <00:36:29.862>the <00:36:30.154>hero.

519
00:36:30.905 --> 00:36:33.485
<00:36:30.905>So <00:36:31.105>we <00:36:31.305>say <00:36:31.505>the <00:36:31.705>selected <00:36:31.905>heroes, <00:36:32.105>uh, <00:36:32.305>start

520
00:36:33.505 --> 00:36:36.205
<00:36:33.505>to <00:36:33.660>just <00:36:33.816>set <00:36:33.971>the <00:36:34.127>value <00:36:34.282>to <00:36:34.438>zero, <00:36:34.593>which <00:36:34.749>is <00:36:34.905>perfect

521
00:36:36.475 --> 00:36:40.045
<00:36:36.475>because <00:36:36.674>then <00:36:36.875>the <00:36:37.075>selected <00:36:37.275>hero <00:36:37.475>will <00:36:37.674>be <00:36:37.875>false

522
00:36:40.625 --> 00:36:42.405
<00:36:40.625>and <00:36:40.825>we <00:36:41.025>will <00:36:41.225>not <00:36:41.425>show <00:36:41.625>the <00:36:41.825>hero <00:36:42.025>details.

523
00:36:42.465 --> 00:36:44.885
<00:36:42.465>We, <00:36:42.665>we <00:36:42.865>go <00:36:43.065>back <00:36:43.265>to <00:36:43.465>our <00:36:43.665>previous <00:36:43.865>view

524
00:36:44.885 --> 00:36:47.125
<00:36:44.885>where <00:36:45.025>we <00:36:45.165>have <00:36:45.305>the <00:36:45.445>top <00:36:45.585>five <00:36:45.725>heroes <00:36:45.865>and <00:36:46.005>the <00:36:46.145>heroes <00:36:46.285>list.

525
00:36:47.705 --> 00:36:52.205
<00:36:47.705>So <00:36:47.812>let's <00:36:47.920>see <00:36:48.028>it, <00:36:48.135>if <00:36:48.243>we <00:36:48.351>go <00:36:48.458>back, <00:36:48.566>if <00:36:48.674>you <00:36:48.781>select <00:36:48.889>one <00:36:48.997>off <00:36:49.105>here,

526
00:36:53.585 --> 00:36:56.125
<00:36:53.585>uh, <00:36:53.935>again, <00:36:54.285>I'm <00:36:54.635>not <00:36:54.985>sorry,

527
00:36:57.625 --> 00:36:58.805
<00:36:57.625>did <00:36:57.890>I <00:36:58.156>reload <00:36:58.421>the <00:36:58.687>page?

528
00:36:58.955 --> 00:37:02.645
<00:36:58.955>Perfect. <00:36:59.130>If <00:36:59.305>I <00:36:59.480>click <00:36:59.654>here, <00:36:59.830>uh, <00:37:00.005>here <00:37:00.180>was <00:37:00.355>selected

529
00:37:02.745 --> 00:37:04.765
<00:37:02.745>and <00:37:02.944>the <00:37:03.145>other <00:37:03.345>page <00:37:03.545>is <00:37:03.745>no <00:37:03.944>longer <00:37:04.145>displayed,

530
00:37:04.765 --> 00:37:08.525
<00:37:04.765>or <00:37:04.892>the <00:37:05.019>other <00:37:05.146>components, <00:37:05.274>I <00:37:05.401>can <00:37:05.528>make <00:37:05.655>my <00:37:05.783>edits, <00:37:05.910>I <00:37:06.037>can <00:37:06.165>save,

531
00:37:09.465 --> 00:37:11.605
<00:37:09.465>go <00:37:09.698>back <00:37:09.931>and <00:37:10.165>I'm <00:37:10.398>back <00:37:10.631>here <00:37:10.865>again.

532
00:37:11.785 --> 00:37:13.685
<00:37:11.785>It <00:37:12.251>was <00:37:12.718>added. <00:37:13.185>Uh,

533
00:37:14.225 --> 00:37:18.205
<00:37:14.225>and <00:37:14.380>this <00:37:14.536>way <00:37:14.691>I <00:37:14.847>can <00:37:15.002>switch <00:37:15.158>easily <00:37:15.313>between <00:37:15.469>the <00:37:15.625>views

534
00:37:18.785 --> 00:37:22.205
<00:37:18.785>or <00:37:18.984>the, <00:37:19.185>uh, <00:37:19.384>different <00:37:19.585>approaches <00:37:19.785>to <00:37:19.984>the <00:37:20.185>components.

535
00:37:24.035 --> 00:37:27.685
<00:37:24.035>Okay, <00:37:24.234>and <00:37:24.435>one <00:37:24.634>last <00:37:24.835>thing <00:37:25.035>as <00:37:25.234>if <00:37:25.435>you

536
00:37:28.205 --> 00:37:31.365
<00:37:28.205>remember <00:37:28.380>on <00:37:28.555>our <00:37:28.730>tour <00:37:28.904>of <00:37:29.080>hero <00:37:29.255>application <00:37:29.430>from <00:37:29.605>Angola,

537
00:37:31.365 --> 00:37:32.605
<00:37:31.365>we <00:37:31.588>had <00:37:31.811>a <00:37:32.034>little <00:37:32.257>search <00:37:32.481>field.

538
00:37:33.945 --> 00:37:35.125
<00:37:33.945>So <00:37:34.157>let's <00:37:34.369>go <00:37:34.582>to <00:37:34.794>this <00:37:35.007>guy.

539
00:37:43.945 --> 00:37:47.555
<00:37:43.945>What <00:37:44.178>happened <00:37:44.411>here <00:37:44.645>is, <00:37:44.878>um, <00:37:45.111>our <00:37:45.345>store

540
00:37:48.735 --> 00:37:50.835
<00:37:48.735>got <00:37:48.968>a <00:37:49.201>little <00:37:49.435>function <00:37:49.668>called <00:37:49.901>Search <00:37:50.135>Hero,

541
00:37:52.095 --> 00:37:56.195
<00:37:52.095>and <00:37:52.250>this <00:37:52.406>is <00:37:52.561>where <00:37:52.717>the <00:37:52.872>derived, <00:37:53.028>um, <00:37:53.183>stores <00:37:53.339>are <00:37:53.495>really,

542
00:37:56.195 --> 00:37:57.835
<00:37:56.195>really <00:37:56.661>coming, <00:37:57.128>uh, <00:37:57.595>shining

543
00:37:58.305 --> 00:38:02.355
<00:37:58.305>because <00:37:58.460>not <00:37:58.616>only <00:37:58.771>can <00:37:58.927>I <00:37:59.082>derive <00:37:59.238>an <00:37:59.393>observable <00:37:59.549>from, <00:37:59.705>uh,

544
00:38:02.775 --> 00:38:04.515
<00:38:02.775>one <00:38:03.125>store, <00:38:03.475>but <00:38:03.825>from <00:38:04.175>multiple.

545
00:38:05.695 --> 00:38:08.955
<00:38:05.695>So <00:38:05.835>here <00:38:05.975>I <00:38:06.115>have <00:38:06.255>a <00:38:06.395>new <00:38:06.535>writeable <00:38:06.675>called <00:38:06.815>the <00:38:06.955>search <00:38:07.095>term.

546
00:38:09.535 --> 00:38:12.915
<00:38:09.535>So <00:38:09.690>whenever <00:38:09.846>I, <00:38:10.001>uh, <00:38:10.157>input <00:38:10.312>something <00:38:10.468>in <00:38:10.623>my <00:38:10.779>input <00:38:10.935>field,

547
00:38:13.375 --> 00:38:16.075
<00:38:13.375>my <00:38:13.515>component <00:38:13.655>can <00:38:13.795>then <00:38:13.935>cause <00:38:14.075>the <00:38:14.215>set <00:38:14.355>method <00:38:14.495>on <00:38:14.635>the <00:38:14.775>search

548
00:38:16.105 --> 00:38:18.075
<00:38:16.105>term <00:38:16.305>and <00:38:16.505>search <00:38:16.705>and <00:38:16.905>set <00:38:17.105>the <00:38:17.305>search <00:38:17.505>term.

549
00:38:20.415 --> 00:38:24.075
<00:38:20.415>And <00:38:20.648>each, <00:38:20.881>um, <00:38:21.115>other <00:38:21.348>component <00:38:21.581>which <00:38:21.815>listened

550
00:38:24.095 --> 00:38:25.355
<00:38:24.095>to <00:38:24.378>the <00:38:24.662>search <00:38:24.945>result <00:38:25.229>or,

551
00:38:25.355 --> 00:38:29.915
<00:38:25.355>or <00:38:25.510>is <00:38:25.666>subscribed <00:38:25.821>to <00:38:25.977>the <00:38:26.132>search <00:38:26.288>may <00:38:26.443>be <00:38:26.599>automatically, <00:38:26.755>um,

552
00:38:29.915 --> 00:38:33.035
<00:38:29.915>triggered <00:38:30.265>about <00:38:30.615>the <00:38:30.965>new <00:38:31.315>fund

553
00:38:33.625 --> 00:38:35.725
<00:38:33.625>because <00:38:33.905>it's <00:38:34.185>derived <00:38:34.465>from <00:38:34.745>these <00:38:35.025>stores,

554
00:38:35.855 --> 00:38:37.965
<00:38:35.855>which <00:38:36.135>will <00:38:36.415>trigger <00:38:36.695>on <00:38:36.975>change <00:38:37.255>automatically.

555
00:38:38.865 --> 00:38:41.365
<00:38:38.865>And <00:38:39.004>what <00:38:39.145>we <00:38:39.285>do <00:38:39.424>here <00:38:39.564>is <00:38:39.705>we <00:38:39.845>take <00:38:39.984>our <00:38:40.125>hero <00:38:40.265>store,

556
00:38:41.705 --> 00:38:46.085
<00:38:41.705>we <00:38:41.832>take <00:38:41.959>our <00:38:42.086>search <00:38:42.214>term <00:38:42.341>and <00:38:42.468>put <00:38:42.595>it <00:38:42.723>in <00:38:42.850>a <00:38:42.977>little <00:38:43.105>function.

557
00:38:47.345 --> 00:38:48.365
<00:38:47.345>We <00:38:47.574>have <00:38:47.803>a <00:38:48.033>HEPA <00:38:48.263>function,

558
00:38:48.365 --> 00:38:50.405
<00:38:48.365>which <00:38:48.564>checks <00:38:48.765>if <00:38:48.964>the <00:38:49.165>term <00:38:49.365>is <00:38:49.564>actually <00:38:49.765>empty.

559
00:38:50.405 --> 00:38:54.725
<00:38:50.405>Because <00:38:50.545>if <00:38:50.685>it's <00:38:50.825>empty, <00:38:50.965>we <00:38:51.105>don't <00:38:51.245>have <00:38:51.385>to, <00:38:51.525>um, <00:38:51.665>um, <00:38:51.805>return

560
00:38:55.345 --> 00:38:57.565
<00:38:55.345>any <00:38:55.578>reserve <00:38:55.811>because <00:38:56.044>there's <00:38:56.278>guaranteed <00:38:56.511>no <00:38:56.745>match.

561
00:38:58.425 --> 00:39:00.445
<00:38:58.425>And <00:38:58.565>if <00:38:58.705>you <00:38:58.845>want <00:38:58.985>to <00:38:59.125>know <00:38:59.265>if <00:38:59.405>a <00:38:59.545>match <00:38:59.685>was <00:38:59.825>found,

562
00:39:00.705 --> 00:39:02.605
<00:39:00.705>we <00:39:00.938>just <00:39:01.171>check, <00:39:01.404>hey, <00:39:01.638>what's <00:39:01.871>the <00:39:02.105>term?

563
00:39:02.775 --> 00:39:04.965
<00:39:02.775>Empty <00:39:03.241>and <00:39:03.708>not <00:39:04.175>empty.

564
00:39:05.265 --> 00:39:08.645
<00:39:05.265>And <00:39:05.392>also <00:39:05.519>we <00:39:05.646>take <00:39:05.774>the, <00:39:05.901>he <00:39:06.028>will <00:39:06.155>allow <00:39:06.283>us <00:39:06.410>to <00:39:06.537>lower <00:39:06.665>case

565
00:39:08.945 --> 00:39:11.485
<00:39:08.945>and <00:39:09.085>look <00:39:09.225>for <00:39:09.365>index <00:39:09.505>of, <00:39:09.645>of <00:39:09.785>the <00:39:09.925>term <00:39:10.065>to <00:39:10.205>lower <00:39:10.345>case.

566
00:39:11.665 --> 00:39:13.845
<00:39:11.665>So <00:39:11.865>it <00:39:12.065>doesn't <00:39:12.265>matter <00:39:12.465>if <00:39:12.665>either <00:39:12.865>user <00:39:13.065>searched,

567
00:39:14.225 --> 00:39:15.565
<00:39:14.225>if <00:39:14.526>a <00:39:14.828>lower <00:39:15.129>upper <00:39:15.431>case,

568
00:39:16.665 --> 00:39:19.805
<00:39:16.665>and <00:39:16.865>then <00:39:17.065>we <00:39:17.265>just <00:39:17.465>filter <00:39:17.665>our <00:39:17.865>heroes, <00:39:18.065>uh,

569
00:39:20.345 --> 00:39:21.525
<00:39:20.345>for <00:39:20.610>each <00:39:20.875>one <00:39:21.141>that <00:39:21.407>matched.

570
00:39:23.555 --> 00:39:27.165
<00:39:23.555>Okay, <00:39:23.730>this <00:39:23.904>is <00:39:24.080>then <00:39:24.254>added <00:39:24.430>in <00:39:24.605>a <00:39:24.779>new <00:39:24.955>component

571
00:39:27.165 --> 00:39:28.525
<00:39:27.165>called <00:39:27.777>Heroes <00:39:28.389>Search.

572
00:39:30.825 --> 00:39:34.005
<00:39:30.825>And <00:39:30.932>this <00:39:31.040>is <00:39:31.148>a <00:39:31.255>fun <00:39:31.363>one <00:39:31.471>because <00:39:31.578>as <00:39:31.686>you <00:39:31.794>see, <00:39:31.901>it <00:39:32.009>is <00:39:32.117>quite <00:39:32.225>small

573
00:39:34.145 --> 00:39:37.125
<00:39:34.145>and <00:39:34.378>it <00:39:34.611>has <00:39:34.845>no <00:39:35.078>real <00:39:35.311>logic <00:39:35.545>insight

574
00:39:37.275 --> 00:39:41.245
<00:39:37.275>because <00:39:37.415>it <00:39:37.555>uses, <00:39:37.695>uh, <00:39:37.835>all <00:39:37.975>that <00:39:38.115>was <00:39:38.255>provided <00:39:38.395>by <00:39:38.535>SW <00:39:38.675>itself.

575
00:39:41.825 --> 00:39:44.765
<00:39:41.825>Namely, <00:39:41.952>we <00:39:42.079>bind <00:39:42.206>the <00:39:42.334>value <00:39:42.461>of <00:39:42.588>an <00:39:42.715>input <00:39:42.843>to <00:39:42.970>the <00:39:43.097>search <00:39:43.225>term.

576
00:39:45.705 --> 00:39:48.725
<00:39:45.705>So <00:39:45.880>when <00:39:46.055>we <00:39:46.230>type <00:39:46.404>it, <00:39:46.580>it <00:39:46.755>automatically <00:39:46.930>gets <00:39:47.105>updated

577
00:39:49.865 --> 00:39:53.085
<00:39:49.865>and <00:39:50.004>then <00:39:50.145>we <00:39:50.285>actually <00:39:50.424>check <00:39:50.564>if <00:39:50.705>there <00:39:50.845>were <00:39:50.984>any <00:39:51.125>search <00:39:51.265>results.

578
00:39:53.425 --> 00:39:56.205
<00:39:53.425>So <00:39:53.565>if <00:39:53.705>the <00:39:53.845>length <00:39:53.985>of <00:39:54.125>the <00:39:54.265>funds <00:39:54.405>is <00:39:54.545>more <00:39:54.685>than <00:39:54.825>zero,

579
00:39:56.825 --> 00:40:01.045
<00:39:56.825>and <00:39:56.941>if <00:39:57.058>it <00:39:57.174>is, <00:39:57.291>we <00:39:57.408>will <00:39:57.524>reuse <00:39:57.641>our <00:39:57.758>heroes <00:39:57.875>list <00:39:57.991>to <00:39:58.108>display <00:39:58.225>this

580
00:40:02.275 --> 00:40:05.605
<00:40:02.275>also, <00:40:02.430>um, <00:40:02.586>I <00:40:02.741>took <00:40:02.897>the <00:40:03.052>approach <00:40:03.208>a <00:40:03.363>little <00:40:03.519>bit <00:40:03.675>further

581
00:40:05.755 --> 00:40:07.045
<00:40:05.755>with <00:40:06.335>the <00:40:06.916>navigation

582
00:40:07.305 --> 00:40:12.125
<00:40:07.305>and <00:40:07.480>recreated <00:40:07.654>this, <00:40:07.830>um, <00:40:08.004>behavior <00:40:08.180>in <00:40:08.355>the <00:40:08.529>app <00:40:08.705>of,

583
00:40:12.185 --> 00:40:16.565
<00:40:12.185>of <00:40:12.312>the <00:40:12.439>Angular <00:40:12.566>app, <00:40:12.694>um, <00:40:12.821>where <00:40:12.948>you <00:40:13.075>can, <00:40:13.203>uh, <00:40:13.330>yeah, <00:40:13.457>have <00:40:13.585>a,

584
00:40:16.725 --> 00:40:17.765
<00:40:16.725>a <00:40:17.192>search <00:40:17.661>only

585
00:40:18.065 --> 00:40:21.685
<00:40:18.065>and <00:40:18.205>the <00:40:18.345>the <00:40:18.485>top <00:40:18.625>ones <00:40:18.765>then <00:40:18.905>search <00:40:19.045>for <00:40:19.185>something, <00:40:19.325>find <00:40:19.465>a,

586
00:40:21.765 --> 00:40:22.845
<00:40:21.765>a <00:40:22.008>hit, <00:40:22.250>go <00:40:22.493>to <00:40:22.736>it.

587
00:40:23.265 --> 00:40:28.205
<00:40:23.265>Or <00:40:23.545>also <00:40:23.825>in <00:40:24.105>the <00:40:24.384>very <00:40:24.665>top

588
00:40:28.225 --> 00:40:31.205
<00:40:28.225>of <00:40:28.365>the <00:40:28.505>application <00:40:28.645>you <00:40:28.785>have <00:40:28.924>two <00:40:29.065>buttons <00:40:29.205>where <00:40:29.345>you <00:40:29.485>can <00:40:29.625>switch

589
00:40:31.435 --> 00:40:33.605
<00:40:31.435>between <00:40:31.668>a <00:40:31.901>dashboard <00:40:32.134>and <00:40:32.368>the <00:40:32.601>hero's <00:40:32.835>view.

590
00:40:34.505 --> 00:40:38.845
<00:40:34.505>And <00:40:34.632>this <00:40:34.759>is, <00:40:34.886>um, <00:40:35.014>where <00:40:35.141>I <00:40:35.268>just <00:40:35.395>created <00:40:35.523>an <00:40:35.650>for <00:40:35.777>the <00:40:35.905>heroes

591
00:40:38.985 --> 00:40:40.125
<00:40:38.985>and <00:40:39.327>the <00:40:39.669>dashboard <00:40:40.011>view,

592
00:40:41.145 --> 00:40:43.285
<00:40:41.145>and <00:40:41.320>I <00:40:41.495>keep <00:40:41.670>track <00:40:41.845>of <00:40:42.020>the <00:40:42.195>current <00:40:42.370>view <00:40:42.545>here.

593
00:40:44.105 --> 00:40:46.605
<00:40:44.105>So <00:40:44.260>I <00:40:44.416>click <00:40:44.571>on <00:40:44.727>the <00:40:44.882>button, <00:40:45.038>dashboard <00:40:45.193>changes <00:40:45.349>the <00:40:45.505>view

594
00:40:46.605 --> 00:40:48.445
<00:40:46.605>to <00:40:46.885>dashboard, <00:40:47.165>click <00:40:47.445>on <00:40:47.725>our <00:40:48.005>heroes

595
00:40:48.445 --> 00:40:49.485
<00:40:48.445>changes <00:40:48.679>the <00:40:48.913>view <00:40:49.147>to <00:40:49.381>heroes.

596
00:40:49.485 --> 00:40:53.005
<00:40:49.485>Of <00:40:49.660>course. <00:40:49.835>Now <00:40:50.010>if <00:40:50.185>a <00:40:50.360>hero <00:40:50.535>was <00:40:50.710>selected <00:40:50.885>in,

597
00:40:53.105 --> 00:40:54.605
<00:40:53.105>it <00:40:53.330>doesn't <00:40:53.555>matter <00:40:53.780>which <00:40:54.005>view <00:40:54.230>was <00:40:54.455>selected

598
00:40:54.605 --> 00:40:57.245
<00:40:54.605>because <00:40:54.760>we <00:40:54.916>always <00:40:55.071>want <00:40:55.227>to, <00:40:55.382>um, <00:40:55.538>show <00:40:55.693>the <00:40:55.849>details <00:40:56.005>page

599
00:40:57.245 --> 00:41:00.605
<00:40:57.245>where <00:40:57.384>you <00:40:57.525>can <00:40:57.665>edit <00:40:57.805>the <00:40:57.944>hero <00:40:58.085>if <00:40:58.225>no <00:40:58.365>hero <00:40:58.505>was <00:40:58.645>selected.

600
00:41:01.425 --> 00:41:04.045
<00:41:01.425>Uh, <00:41:01.565>we <00:41:01.705>look, <00:41:01.845>if <00:41:01.985>it's <00:41:02.125>a <00:41:02.265>dashboard, <00:41:02.405>if <00:41:02.545>it's <00:41:02.685>a <00:41:02.825>dashboard,

601
00:41:04.045 --> 00:41:06.845
<00:41:04.045>we <00:41:04.172>show <00:41:04.299>to <00:41:04.426>the <00:41:04.554>dash, <00:41:04.681>um, <00:41:04.808>top <00:41:04.935>five <00:41:05.063>heroes <00:41:05.190>and <00:41:05.317>the <00:41:05.445>search,

602
00:41:07.395 --> 00:41:10.285
<00:41:07.395>otherwise <00:41:07.595>we <00:41:07.795>show <00:41:07.995>the <00:41:08.195>list <00:41:08.395>of <00:41:08.595>all <00:41:08.795>heroes.

603
00:41:11.195 --> 00:41:14.005
<00:41:11.195>Yeah, <00:41:11.545>and <00:41:11.895>that's <00:41:12.245>basically <00:41:12.595>it.

604
00:41:14.465 --> 00:41:16.525
<00:41:14.465>If <00:41:14.640>we <00:41:14.815>have <00:41:14.990>a <00:41:15.165>look, <00:41:15.340>see <00:41:15.515>it <00:41:15.690>in <00:41:15.865>action,

605
00:41:18.045 --> 00:41:18.165
I,

606
00:41:24.265 --> 00:41:28.045
<00:41:24.265>So <00:41:24.392>this <00:41:24.519>is <00:41:24.646>our <00:41:24.774>dashboard, <00:41:24.901>we <00:41:25.028>can <00:41:25.155>change <00:41:25.283>to <00:41:25.410>the <00:41:25.537>hero's <00:41:25.665>view

607
00:41:28.045 --> 00:41:30.365
<00:41:28.045>where <00:41:28.245>we <00:41:28.445>see <00:41:28.645>all <00:41:28.845>heroes <00:41:29.045>can <00:41:29.245>go <00:41:29.445>back,

608
00:41:31.305 --> 00:41:35.325
<00:41:31.305>we <00:41:31.432>can <00:41:31.559>select <00:41:31.686>the <00:41:31.814>hero <00:41:31.941>from <00:41:32.068>the <00:41:32.195>top <00:41:32.323>five <00:41:32.450>can <00:41:32.577>go <00:41:32.705>back.

609
00:41:35.785 --> 00:41:37.845
<00:41:35.785>And <00:41:35.940>of <00:41:36.096>course <00:41:36.251>we <00:41:36.407>can <00:41:36.562>also <00:41:36.718>search <00:41:36.873>for <00:41:37.029>a <00:41:37.185>hero.

610
00:41:37.905 --> 00:41:39.405
<00:41:37.905>So <00:41:38.175>let's <00:41:38.445>search <00:41:38.715>for <00:41:38.985>mad <00:41:39.255>dummy

611
00:41:39.785 --> 00:41:44.645
<00:41:39.785>or <00:41:39.924>just <00:41:40.065>search <00:41:40.205>for <00:41:40.345>something <00:41:40.484>with <00:41:40.625>a, <00:41:40.765>uh, <00:41:40.904>spaces <00:41:41.045>are <00:41:41.185>ignored

612
00:41:44.645 --> 00:41:45.885
<00:41:44.645>because <00:41:44.924>we, <00:41:45.203>they <00:41:45.482>trimmed <00:41:45.761>away

613
00:41:47.665 --> 00:41:51.645
<00:41:47.665>and <00:41:47.792>if <00:41:47.919>I <00:41:48.046>click <00:41:48.174>on <00:41:48.301>a <00:41:48.428>search <00:41:48.555>result, <00:41:48.683>I <00:41:48.810>also <00:41:48.937>get <00:41:49.065>here

614
00:41:52.305 --> 00:41:57.205
<00:41:52.305>can <00:41:52.480>change <00:41:52.654>the, <00:41:52.830>the <00:41:53.004>power <00:41:53.180>level <00:41:53.355>to <00:41:53.529>over <00:41:53.705>9,000

615
00:42:01.305 --> 00:42:02.365
<00:42:01.305>and <00:42:01.622>it <00:42:01.941>was <00:42:02.259>saved.

616
00:42:02.915 --> 00:42:07.685
<00:42:02.915>Yeah. <00:42:03.115>And <00:42:03.315>that's <00:42:03.515>basically <00:42:03.715>the <00:42:03.915>whole <00:42:04.115>demonstration. <00:42:04.315>Okay.

617
00:42:09.125 --> 00:42:10.725
<00:42:09.125>I <00:42:09.358>will <00:42:09.591>go <00:42:09.825>back <00:42:10.058>to <00:42:10.291>the <00:42:10.525>PowerPoint.

618
00:42:13.495 --> 00:42:16.445
<00:42:13.495>Let's <00:42:13.728>talk <00:42:13.961>about <00:42:14.194>a <00:42:14.428>little <00:42:14.661>bit, <00:42:14.895>uh,

619
00:42:18.395 --> 00:42:20.725
<00:42:18.395>what <00:42:18.628>we <00:42:18.861>liked, <00:42:19.095>what <00:42:19.328>we <00:42:19.561>didn't <00:42:19.795>like.

620
00:42:21.665 --> 00:42:24.405
<00:42:21.665>So <00:42:21.792>the <00:42:21.919>first <00:42:22.046>thing <00:42:22.174>that <00:42:22.301>comes <00:42:22.428>to <00:42:22.555>mind <00:42:22.683>is <00:42:22.810>I <00:42:22.937>really <00:42:23.065>like

621
00:42:24.515 --> 00:42:27.125
<00:42:24.515>that <00:42:24.690>the <00:42:24.865>framework <00:42:25.040>is, <00:42:25.214>uh, <00:42:25.390>it's <00:42:25.565>actually <00:42:25.740>no <00:42:25.915>framework.

622
00:42:27.125 --> 00:42:28.965
<00:42:27.125>It's <00:42:27.405>a <00:42:27.685>library. <00:42:27.965>It's <00:42:28.245>very <00:42:28.525>clean

623
00:42:29.105 --> 00:42:33.125
<00:42:29.105>and <00:42:29.245>small, <00:42:29.385>so <00:42:29.525>it <00:42:29.665>does <00:42:29.805>not <00:42:29.945>provide <00:42:30.085>you <00:42:30.225>with <00:42:30.365>any <00:42:30.505>load.

624
00:42:33.865 --> 00:42:38.325
<00:42:33.865>You <00:42:34.004>will <00:42:34.145>get <00:42:34.285>a, <00:42:34.424>a <00:42:34.564>lot <00:42:34.705>of, <00:42:34.845>um, <00:42:34.984>very <00:42:35.125>powerful <00:42:35.265>tools,

625
00:42:38.665 --> 00:42:40.645
<00:42:38.665>but <00:42:38.898>it's <00:42:39.131>not <00:42:39.365>like <00:42:39.598>the <00:42:39.831>whole <00:42:40.065>framework

626
00:42:40.645 --> 00:42:41.725
<00:42:40.645>that <00:42:40.969>Angular <00:42:41.293>provides <00:42:41.616>you.

627
00:42:41.725 --> 00:42:43.085
<00:42:41.725>With <00:42:41.969>routing <00:42:42.214>and <00:42:42.459>stuff <00:42:42.704>like <00:42:42.949>this.

628
00:42:44.115 --> 00:42:47.485
<00:42:44.115>It's <00:42:44.254>a <00:42:44.395>little <00:42:44.535>bit, <00:42:44.674>uh, <00:42:44.814>smaller. <00:42:44.955>It's <00:42:45.095>very <00:42:45.234>easy <00:42:45.375>to <00:42:45.515>learn.

629
00:42:47.545 --> 00:42:48.925
<00:42:47.545>The <00:42:47.855>syntax <00:42:48.166>is <00:42:48.476>very <00:42:48.787>clean

630
00:42:49.225 --> 00:42:51.605
<00:42:49.225>and <00:42:49.365>uh, <00:42:49.505>you <00:42:49.645>get <00:42:49.785>it <00:42:49.924>in <00:42:50.065>your <00:42:50.205>heart <00:42:50.345>head <00:42:50.485>really <00:42:50.625>fast.

631
00:42:52.505 --> 00:42:56.125
<00:42:52.505>So <00:42:52.785>yeah, <00:42:53.065>I <00:42:53.345>really <00:42:53.625>liked <00:42:53.905>it.

632
00:42:57.625 --> 00:43:02.085
<00:42:57.625>And <00:42:57.732>this <00:42:57.840>is <00:42:57.948>where <00:42:58.055>I <00:42:58.163>take <00:42:58.271>over <00:42:58.378>to <00:42:58.486>the <00:42:58.594>q <00:42:58.701>and <00:42:58.809>a. <00:42:58.917>Your <00:42:59.025>thoughts?

633
00:43:02.465 --> 00:43:03.885
<00:43:02.465>Or <00:43:02.678>do <00:43:02.891>you <00:43:03.104>just <00:43:03.317>wanna <00:43:03.530>say <00:43:03.743>hello?