WEBVTT

1
00:00:02.915 --> 00:00:03.205
Cool.

2
00:00:03.335 --> 00:00:05.805
<00:00:03.335>Hello <00:00:03.475>everyone. <00:00:03.614>Thank <00:00:03.755>you <00:00:03.895>so <00:00:04.035>much <00:00:04.175>to <00:00:04.314>you <00:00:04.455>all <00:00:04.595>for <00:00:04.734>joining

3
00:00:06.065 --> 00:00:08.885
<00:00:06.065>and <00:00:06.265>welcome <00:00:06.465>to <00:00:06.665>my <00:00:06.865>talk <00:00:07.065>about <00:00:07.265>leveraging <00:00:07.465>storybook

4
00:00:08.945 --> 00:00:11.445
<00:00:08.945>for <00:00:09.295>component <00:00:09.645>driven <00:00:09.995>development <00:00:10.345>outside

5
00:00:11.545 --> 00:00:13.605
<00:00:11.545>of <00:00:11.825>the <00:00:12.105>classic <00:00:12.385>component <00:00:12.665>library <00:00:12.945>use.

6
00:00:13.605 --> 00:00:15.645
<00:00:13.605>Case <00:00:15.005>disclaimer

7
00:00:15.785 --> 00:00:19.245
<00:00:15.785>before <00:00:15.960>I <00:00:16.135>go <00:00:16.309>ahead <00:00:16.485>is <00:00:16.660>that <00:00:16.835>I <00:00:17.010>love <00:00:17.185>storybook,

8
00:00:19.785 --> 00:00:22.565
<00:00:19.785>so <00:00:19.985>this <00:00:20.185>is <00:00:20.385>a <00:00:20.585>very <00:00:20.785>one-sided <00:00:20.985>uh, <00:00:21.185>view.

9
00:00:23.675 --> 00:00:24.845
<00:00:23.675>This <00:00:24.201>is <00:00:24.727>me.

10
00:00:25.545 --> 00:00:27.725
<00:00:25.545>The <00:00:25.745>whole <00:00:25.945>talk <00:00:26.145>is <00:00:26.345>centered <00:00:26.545>around <00:00:26.745>its <00:00:26.945>greatness

11
00:00:27.745 --> 00:00:29.685
<00:00:27.745>and <00:00:27.920>how <00:00:28.095>you <00:00:28.270>can <00:00:28.445>leverage <00:00:28.620>its <00:00:28.795>greatness <00:00:28.970>as <00:00:29.145>well.

12
00:00:30.145 --> 00:00:31.885
<00:00:30.145>Um, <00:00:30.378>and <00:00:30.611>I'm <00:00:30.845>hoping <00:00:31.078>that <00:00:31.311>you'll <00:00:31.544>come

13
00:00:31.885 --> 00:00:35.565
<00:00:31.885>and <00:00:32.001>join <00:00:32.118>me <00:00:32.235>sitting <00:00:32.351>on <00:00:32.468>the <00:00:32.585>empty <00:00:32.701>chair <00:00:32.818>next <00:00:32.935>to <00:00:33.051>me, <00:00:33.168>um, <00:00:33.285>soon.

14
00:00:35.785 --> 00:00:37.805
<00:00:35.785>I'm <00:00:35.985>just <00:00:36.184>joking <00:00:36.385>but <00:00:36.584>I'm <00:00:36.785>also <00:00:36.985>not <00:00:37.184>na.

15
00:00:38.905 --> 00:00:40.525
<00:00:38.905>So <00:00:39.185>to <00:00:39.465>introduce <00:00:39.745>myself, <00:00:40.025>I'm <00:00:40.305>Emma.

16
00:00:40.985 --> 00:00:42.525
<00:00:40.985>Um, <00:00:41.262>I've <00:00:41.539>been <00:00:41.816>a <00:00:42.093>software <00:00:42.370>engineer

17
00:00:42.525 --> 00:00:46.885
<00:00:42.525>for <00:00:42.652>just <00:00:42.779>over <00:00:42.906>six <00:00:43.034>years <00:00:43.161>now, <00:00:43.288>mostly <00:00:43.415>in <00:00:43.543>the <00:00:43.670>front <00:00:43.797>end <00:00:43.925>space

18
00:00:47.225 --> 00:00:48.845
<00:00:47.225>and <00:00:47.575>currently <00:00:47.925>working <00:00:48.275>at <00:00:48.625>Bloomberg.

19
00:00:50.065 --> 00:00:51.645
<00:00:50.065>Uh, <00:00:50.345>Bloomberg <00:00:50.625>is <00:00:50.905>a <00:00:51.184>finance <00:00:51.464>company

20
00:00:51.745 --> 00:00:52.965
<00:00:51.745>if <00:00:51.928>you <00:00:52.111>haven't <00:00:52.294>heard <00:00:52.477>of <00:00:52.660>them <00:00:52.843>before.

21
00:00:53.425 --> 00:00:57.165
<00:00:53.425>Um, <00:00:53.532>I've <00:00:53.640>been <00:00:53.748>there <00:00:53.855>for <00:00:53.963>just <00:00:54.071>over <00:00:54.178>a <00:00:54.286>year, <00:00:54.394>a <00:00:54.501>year <00:00:54.609>and <00:00:54.717>a <00:00:54.824>half,

22
00:00:57.425 --> 00:01:00.565
<00:00:57.425>and <00:00:57.552>I <00:00:57.679>now <00:00:57.806>work <00:00:57.934>more <00:00:58.061>across <00:00:58.188>the <00:00:58.315>full <00:00:58.443>stack <00:00:58.570>building <00:00:58.697>out <00:00:58.824>tools

23
00:01:00.665 --> 00:01:03.445
<00:01:00.665>for <00:01:00.865>evaluators <00:01:01.065>to <00:01:01.265>evaluate <00:01:01.464>the <00:01:01.665>prices <00:01:01.865>of <00:01:02.065>bonds.

24
00:01:04.555 --> 00:01:07.725
<00:01:04.555>This <00:01:04.755>is <00:01:04.955>my <00:01:05.155>second <00:01:05.355>time <00:01:05.555>in <00:01:05.755>Berlin, <00:01:05.955>um,

25
00:01:07.945 --> 00:01:09.845
<00:01:07.945>but <00:01:08.119>it's <00:01:08.294>actually <00:01:08.470>my <00:01:08.645>first <00:01:08.820>time <00:01:08.994>at <00:01:09.169>this <00:01:09.345>conference

26
00:01:09.845 --> 00:01:11.205
<00:01:09.845>so <00:01:10.048>I'm <00:01:10.253>really <00:01:10.457>excited <00:01:10.661>to <00:01:10.865>be <00:01:11.069>here

27
00:01:11.205 --> 00:01:12.805
<00:01:11.205>and <00:01:11.405>share <00:01:11.605>the <00:01:11.804>next <00:01:12.005>30 <00:01:12.205>minutes <00:01:12.405>with <00:01:12.605>you.

28
00:01:15.785 --> 00:01:17.685
<00:01:15.785>So, <00:01:16.065>uh, <00:01:16.345>to <00:01:16.625>kick <00:01:16.905>things <00:01:17.185>off,

29
00:01:18.085 --> 00:01:20.845
<00:01:18.085>I <00:01:18.260>love <00:01:18.435>all <00:01:18.610>things <00:01:18.785>front <00:01:18.960>end <00:01:19.135>UIs <00:01:19.310>the <00:01:19.485>web.

30
00:01:21.225 --> 00:01:23.125
<00:01:21.225>Um, <00:01:21.505>I <00:01:21.785>love <00:01:22.065>encouraging <00:01:22.345>more <00:01:22.625>people

31
00:01:23.225 --> 00:01:27.245
<00:01:23.225>to <00:01:23.341>see <00:01:23.458>the <00:01:23.574>incredible <00:01:23.691>tools <00:01:23.808>that <00:01:23.925>we <00:01:24.041>have <00:01:24.158>to <00:01:24.274>make <00:01:24.391>us <00:01:24.508>be <00:01:24.625>able

32
00:01:27.245 --> 00:01:28.925
<00:01:27.245>to <00:01:27.478>build <00:01:27.711>so <00:01:27.945>rapidly <00:01:28.178>in <00:01:28.411>the <00:01:28.645>web.

33
00:01:29.425 --> 00:01:32.885
<00:01:29.425>Um, <00:01:29.552>and <00:01:29.679>honestly <00:01:29.806>my <00:01:29.934>love <00:01:30.061>for <00:01:30.188>front <00:01:30.315>end <00:01:30.443>stemmed <00:01:30.570>from <00:01:30.697>my <00:01:30.825>love

34
00:01:32.885 --> 00:01:34.325
<00:01:32.884>for <00:01:33.208>art <00:01:33.533>as <00:01:33.857>a <00:01:34.181>child

35
00:01:35.265 --> 00:01:37.725
<00:01:35.265>and <00:01:35.392>the <00:01:35.519>truth <00:01:35.646>is <00:01:35.774>when <00:01:35.901>I <00:01:36.028>was <00:01:36.155>younger <00:01:36.283>I <00:01:36.410>had <00:01:36.537>no <00:01:36.665>idea

36
00:01:37.725 --> 00:01:39.165
<00:01:37.725>that <00:01:38.048>this <00:01:38.372>job <00:01:38.696>even <00:01:39.020>existed.

37
00:01:39.865 --> 00:01:43.765
<00:01:39.865>But <00:01:39.992>I <00:01:40.119>did <00:01:40.246>know <00:01:40.374>that <00:01:40.501>I <00:01:40.628>had <00:01:40.755>two <00:01:40.883>loves <00:01:41.010>that <00:01:41.137>was <00:01:41.265>art

38
00:01:43.905 --> 00:01:47.845
<00:01:43.905>and <00:01:44.080>computers <00:01:44.255>that <00:01:44.430>led <00:01:44.605>me <00:01:44.780>via <00:01:44.955>a <00:01:45.130>pretty <00:01:45.305>untraditional

39
00:01:47.875 --> 00:01:49.085
<00:01:47.875>path <00:01:48.092>to <00:01:48.310>where <00:01:48.528>I <00:01:48.746>am <00:01:48.964>today.

40
00:01:49.665 --> 00:01:51.685
<00:01:49.664>Uh, <00:01:49.898>I <00:01:50.131>studied <00:01:50.365>something <00:01:50.598>called <00:01:50.831>digital <00:01:51.065>media

41
00:01:52.395 --> 00:01:54.965
<00:01:52.395>that <00:01:52.595>basically <00:01:52.795>allowed <00:01:52.995>me <00:01:53.195>to <00:01:53.395>combine <00:01:53.595>my <00:01:53.795>love

42
00:01:54.965 --> 00:01:58.965
<00:01:54.965>for <00:01:55.165>graphic <00:01:55.365>design <00:01:55.565>and <00:01:55.765>software <00:01:55.965>engineering, <00:01:56.165>um, <00:01:56.365>together

43
00:01:59.545 --> 00:02:02.045
<00:01:59.545>and <00:01:59.685>it <00:01:59.825>also <00:01:59.965>helped <00:02:00.105>me <00:02:00.245>to <00:02:00.385>land <00:02:00.525>my <00:02:00.665>very <00:02:00.805>first <00:02:00.945>job,

44
00:02:02.095 --> 00:02:04.845
<00:02:02.095>which <00:02:02.270>was <00:02:02.445>at <00:02:02.620>a <00:02:02.795>really <00:02:02.970>small <00:02:03.145>digital <00:02:03.320>agency <00:02:03.495>building

45
00:02:04.845 --> 00:02:06.085
<00:02:04.845>WordPress <00:02:05.961>websites.

46
00:02:06.815 --> 00:02:08.805
<00:02:06.815>There <00:02:07.015>was <00:02:07.215>only <00:02:07.414>four <00:02:07.615>engineers <00:02:07.815>at <00:02:08.014>that <00:02:08.215>company.

47
00:02:09.735 --> 00:02:12.165
<00:02:09.735>Since <00:02:09.890>then <00:02:10.046>I've <00:02:10.201>worked <00:02:10.357>at <00:02:10.512>a <00:02:10.668>bunch <00:02:10.823>of <00:02:10.979>different <00:02:11.135>places.

48
00:02:12.785 --> 00:02:16.405
<00:02:12.785>Um, <00:02:12.901>I <00:02:13.018>worked <00:02:13.135>at <00:02:13.251>Starling <00:02:13.368>Bank, <00:02:13.484>which <00:02:13.601>is <00:02:13.718>a <00:02:13.835>FinTech <00:02:13.951>in <00:02:14.068>the <00:02:14.185>uk.

49
00:02:16.725 --> 00:02:17.725
<00:02:16.725>I <00:02:16.853>don't <00:02:16.982>know <00:02:17.110>if <00:02:17.239>you <00:02:17.367>have <00:02:17.496>it <00:02:17.625>over

50
00:02:17.725 --> 00:02:18.885
<00:02:17.725>here <00:02:17.933>in <00:02:18.142>Germany, <00:02:18.351>I'm <00:02:18.560>not <00:02:18.769>sure.

51
00:02:19.465 --> 00:02:23.085
<00:02:19.465>Um, <00:02:19.592>I <00:02:19.719>also <00:02:19.846>worked <00:02:19.974>at <00:02:20.101>Twitter, <00:02:20.228>which <00:02:20.355>is <00:02:20.483>now <00:02:20.610>of <00:02:20.737>course <00:02:20.865>known

52
00:02:23.085 --> 00:02:25.845
<00:02:23.085>as <00:02:23.212>X, <00:02:23.339>but <00:02:23.466>I <00:02:23.594>will <00:02:23.721>not <00:02:23.848>call <00:02:23.975>it <00:02:24.103>that <00:02:24.230>out <00:02:24.357>of <00:02:24.485>principle

53
00:02:26.505 --> 00:02:29.165
<00:02:26.505>and <00:02:26.738>most <00:02:26.971>recently <00:02:27.204>Bloomberg <00:02:27.438>as <00:02:27.671>I <00:02:27.905>mentioned.

54
00:02:30.225 --> 00:02:32.565
<00:02:30.225>So <00:02:30.400>where <00:02:30.575>did <00:02:30.750>this <00:02:30.924>love <00:02:31.100>story <00:02:31.275>with <00:02:31.450>storybook <00:02:31.625>begin?

55
00:02:33.345 --> 00:02:35.165
<00:02:33.345>It <00:02:33.545>was <00:02:33.745>born <00:02:33.945>when <00:02:34.145>I <00:02:34.345>worked <00:02:34.545>at <00:02:34.745>Starling

56
00:02:35.165 --> 00:02:37.565
<00:02:35.165>but <00:02:35.340>it <00:02:35.515>really <00:02:35.690>flourished <00:02:35.864>during <00:02:36.040>my <00:02:36.215>time <00:02:36.390>at <00:02:36.565>Twitter.

57
00:02:39.905 --> 00:02:43.445
<00:02:39.905>Oh <00:02:40.060>sorry. <00:02:40.216>Um, <00:02:40.371>at <00:02:40.527>Twitter <00:02:40.682>I <00:02:40.838>worked <00:02:40.993>on <00:02:41.149>search <00:02:41.305>features

58
00:02:43.445 --> 00:02:44.565
<00:02:43.445>for <00:02:43.781>their <00:02:44.117>web <00:02:44.453>application

59
00:02:44.865 --> 00:02:48.365
<00:02:44.865>and <00:02:45.040>then <00:02:45.215>I <00:02:45.390>moved <00:02:45.565>internally <00:02:45.740>to <00:02:45.915>a <00:02:46.090>foundation <00:02:46.265>team

60
00:02:48.795 --> 00:02:51.565
<00:02:48.795>that <00:02:48.995>was <00:02:49.195>building <00:02:49.395>out <00:02:49.595>web <00:02:49.795>product <00:02:49.995>components <00:02:50.195>is

61
00:02:51.565 --> 00:02:53.405
<00:02:51.565>what <00:02:51.798>we <00:02:52.031>called <00:02:52.265>it <00:02:52.498>for <00:02:52.731>feature <00:02:52.965>engineers

62
00:02:53.405 --> 00:02:54.685
<00:02:53.405>to <00:02:53.635>be <00:02:53.865>able <00:02:54.096>to <00:02:54.326>build <00:02:54.557>quicker.

63
00:02:55.345 --> 00:02:58.325
<00:02:55.345>Our <00:02:55.520>most <00:02:55.695>like <00:02:55.870>flagship <00:02:56.045>product <00:02:56.220>was <00:02:56.395>the <00:02:56.570>tweet <00:02:56.745>component.

64
00:02:59.465 --> 00:03:02.245
<00:02:59.465>We <00:02:59.665>also <00:02:59.865>maintained <00:03:00.065>our <00:03:00.265>internal <00:03:00.465>core <00:03:00.665>UI <00:03:00.865>library.

65
00:03:03.265 --> 00:03:06.365
<00:03:03.265>So <00:03:03.404>when <00:03:03.545>I <00:03:03.684>moved <00:03:03.825>teams <00:03:03.964>from <00:03:04.105>being <00:03:04.244>a <00:03:04.385>feature <00:03:04.524>engineer <00:03:04.665>into

66
00:03:06.365 --> 00:03:11.125
<00:03:06.365>this <00:03:06.540>foundation, <00:03:06.715>um, <00:03:06.890>role, <00:03:07.065>I <00:03:07.240>had <00:03:07.415>this <00:03:07.590>unique <00:03:07.765>perspective

67
00:03:11.255 --> 00:03:14.525
<00:03:11.255>where <00:03:11.410>I'd <00:03:11.566>spent <00:03:11.721>time <00:03:11.877>building <00:03:12.032>in <00:03:12.188>this <00:03:12.343>really <00:03:12.499>large <00:03:12.655>complex

68
00:03:14.745 --> 00:03:16.925
<00:03:14.745>web <00:03:15.025>app <00:03:15.305>building <00:03:15.585>out <00:03:15.865>new <00:03:16.145>features

69
00:03:17.585 --> 00:03:20.445
<00:03:17.585>and <00:03:17.760>then <00:03:17.935>I <00:03:18.110>worked <00:03:18.285>on <00:03:18.460>building <00:03:18.635>in <00:03:18.810>complete <00:03:18.985>isolation

70
00:03:20.985 --> 00:03:22.365
<00:03:20.985>for <00:03:21.399>this <00:03:21.813>component <00:03:22.227>library

71
00:03:23.385 --> 00:03:27.005
<00:03:23.385>and <00:03:23.560>I <00:03:23.734>realized <00:03:23.910>the <00:03:24.084>huge <00:03:24.260>benefits <00:03:24.435>that <00:03:24.609>storybook <00:03:24.785>brought

72
00:03:27.105 --> 00:03:29.085
<00:03:27.105>to <00:03:27.454>accelerating <00:03:27.804>that <00:03:28.155>development <00:03:28.505>process

73
00:03:29.785 --> 00:03:31.285
<00:03:29.785>and <00:03:30.010>it <00:03:30.234>really <00:03:30.460>got <00:03:30.685>me <00:03:30.910>thinking <00:03:31.135>as

74
00:03:31.285 --> 00:03:32.565
<00:03:31.285>to <00:03:31.477>why <00:03:31.668>we <00:03:31.861>are <00:03:32.053>not <00:03:32.245>leveraging <00:03:32.437>that

75
00:03:33.105 --> 00:03:35.045
<00:03:33.105>inside <00:03:33.454>the <00:03:33.804>large <00:03:34.155>web <00:03:34.505>applications

76
00:03:35.045 --> 00:03:36.605
<00:03:35.045>that <00:03:35.325>we're <00:03:35.605>all <00:03:35.885>working <00:03:36.165>in <00:03:36.445>daily

77
00:03:38.065 --> 00:03:39.765
<00:03:38.065>and <00:03:38.415>they're <00:03:38.765>arguably <00:03:39.115>much <00:03:39.465>harder

78
00:03:40.025 --> 00:03:42.805
<00:03:40.025>and <00:03:40.180>more <00:03:40.336>difficult <00:03:40.491>to <00:03:40.647>deal <00:03:40.802>with <00:03:40.958>and <00:03:41.113>manage <00:03:41.269>moving <00:03:41.425>forward.

79
00:03:44.205 --> 00:03:47.225
<00:03:44.204>So <00:03:44.344>throughout <00:03:44.484>my <00:03:44.624>career <00:03:44.765>I've <00:03:44.904>worked <00:03:45.045>on <00:03:45.184>some <00:03:45.325>very <00:03:45.464>large <00:03:45.605>apps

80
00:03:47.565 --> 00:03:50.905
<00:03:47.565>and <00:03:47.692>in <00:03:47.819>my <00:03:47.946>opinion, <00:03:48.074>they <00:03:48.201>all <00:03:48.328>start <00:03:48.455>facing <00:03:48.583>the <00:03:48.710>same <00:03:48.837>problem <00:03:48.965>at

81
00:03:50.905 --> 00:03:53.185
<00:03:50.905>some <00:03:51.185>point <00:03:51.465>at <00:03:51.745>either <00:03:52.025>the <00:03:52.305>number

82
00:03:53.185 --> 00:03:55.985
<00:03:53.185>of <00:03:53.360>engineers <00:03:53.535>working <00:03:53.710>on <00:03:53.885>a <00:03:54.060>singular <00:03:54.235>app <00:03:54.410>is <00:03:54.585>growing

83
00:03:56.525 --> 00:03:58.345
<00:03:56.525>or <00:03:56.725>the <00:03:56.925>number <00:03:57.125>of <00:03:57.325>apps <00:03:57.525>grow <00:03:57.725>as <00:03:57.925>well.

84
00:03:59.785 --> 00:04:01.025
<00:03:59.785>Engineers <00:04:00.064>begin <00:04:00.343>to <00:04:00.622>make <00:04:00.901>changes

85
00:04:01.205 --> 00:04:03.905
<00:04:01.205>and <00:04:01.380>they <00:04:01.555>don't <00:04:01.730>really <00:04:01.905>understand <00:04:02.080>the <00:04:02.255>repercussions <00:04:02.430>of <00:04:02.605>those

86
00:04:03.905 --> 00:04:05.785
<00:04:03.905>because <00:04:04.138>they <00:04:04.371>don't <00:04:04.605>know <00:04:04.838>how <00:04:05.071>they're <00:04:05.305>used,

87
00:04:05.935 --> 00:04:07.345
<00:04:05.935>they <00:04:06.188>don't <00:04:06.442>know <00:04:06.696>where <00:04:06.950>they're <00:04:07.204>used.

88
00:04:08.045 --> 00:04:10.785
<00:04:08.045>Um, <00:04:08.220>and <00:04:08.394>this <00:04:08.570>ends <00:04:08.744>up <00:04:08.920>leading <00:04:09.095>to <00:04:09.269>causing <00:04:09.445>bugs

89
00:04:12.485 --> 00:04:14.625
<00:04:12.485>and <00:04:12.835>it <00:04:13.185>becomes <00:04:13.535>increasingly <00:04:13.885>difficult

90
00:04:14.725 --> 00:04:16.985
<00:04:14.725>to <00:04:14.958>manage <00:04:15.191>all <00:04:15.424>the <00:04:15.658>components <00:04:15.891>within <00:04:16.125>your

91
00:04:16.985 --> 00:04:19.025
<00:04:16.985>application <00:04:17.451>as <00:04:17.918>it <00:04:18.385>scales.

92
00:04:19.725 --> 00:04:22.865
<00:04:19.725>So <00:04:19.852>when <00:04:19.979>new <00:04:20.106>features <00:04:20.234>are <00:04:20.361>built, <00:04:20.488>it <00:04:20.615>ends <00:04:20.743>up <00:04:20.870>being <00:04:20.997>a <00:04:21.125>lot

93
00:04:22.865 --> 00:04:25.785
<00:04:22.865>of <00:04:23.040>duplicate <00:04:23.215>work <00:04:23.390>when <00:04:23.565>actually <00:04:23.740>there <00:04:23.915>was <00:04:24.090>probably <00:04:24.265>something

94
00:04:25.785 --> 00:04:27.545
<00:04:25.785>there <00:04:25.960>you <00:04:26.135>could <00:04:26.310>have <00:04:26.485>reused <00:04:26.660>in <00:04:26.835>the <00:04:27.010>first <00:04:27.185>place,

95
00:04:27.605 --> 00:04:28.785
<00:04:27.605>you <00:04:27.817>just <00:04:28.029>didn't <00:04:28.242>know <00:04:28.454>about <00:04:28.667>it.

96
00:04:29.685 --> 00:04:31.905
<00:04:29.685>So <00:04:29.965>it's <00:04:30.245>either <00:04:30.525>because <00:04:30.805>the <00:04:31.085>discovery

97
00:04:32.045 --> 00:04:33.625
<00:04:32.045>of <00:04:32.395>those <00:04:32.745>components <00:04:33.095>is <00:04:33.445>hard

98
00:04:34.365 --> 00:04:37.545
<00:04:34.365>or <00:04:34.481>the <00:04:34.598>component <00:04:34.715>has <00:04:34.831>been <00:04:34.948>built <00:04:35.065>in <00:04:35.181>a <00:04:35.298>way <00:04:35.415>that <00:04:35.531>is <00:04:35.648>so <00:04:35.765>specific

99
00:04:37.645 --> 00:04:38.785
<00:04:37.645>to <00:04:37.901>the <00:04:38.157>first <00:04:38.414>use <00:04:38.671>case

100
00:04:39.295 --> 00:04:43.665
<00:04:39.295>that <00:04:39.470>extracting <00:04:39.645>out <00:04:39.820>making <00:04:39.995>it <00:04:40.170>more <00:04:40.345>generic <00:04:40.520>refactoring <00:04:40.695>is

101
00:04:43.945 --> 00:04:45.865
<00:04:43.945>actually <00:04:44.100>more <00:04:44.256>work <00:04:44.411>than <00:04:44.567>just <00:04:44.722>building <00:04:44.878>a <00:04:45.033>new <00:04:45.189>version <00:04:45.344>from

102
00:04:45.865 --> 00:04:48.385
<00:04:45.865>scratch, <00:04:46.331>which <00:04:46.798>then <00:04:47.265>leads

103
00:04:48.445 --> 00:04:52.185
<00:04:48.445>to <00:04:48.585>having <00:04:48.724>these <00:04:48.865>bloated <00:04:49.005>code <00:04:49.145>bases <00:04:49.284>which <00:04:49.425>you <00:04:49.565>don't <00:04:49.705>want <00:04:49.844>in

104
00:04:52.185 --> 00:04:53.745
<00:04:52.185>your <00:04:52.651>already <00:04:53.118>large <00:04:53.585>application.

105
00:04:55.285 --> 00:04:57.665
<00:04:55.284>So <00:04:55.484>that's <00:04:55.684>where <00:04:55.885>component <00:04:56.085>driven <00:04:56.284>development <00:04:56.484>comes <00:04:56.684>along.

106
00:04:58.445 --> 00:05:01.585
<00:04:58.445>It <00:04:58.620>really <00:04:58.795>allows <00:04:58.969>us <00:04:59.145>to <00:04:59.320>decouple <00:04:59.495>the <00:04:59.670>development <00:04:59.844>process.

107
00:05:02.485 --> 00:05:05.585
<00:05:02.485>The <00:05:02.660>large <00:05:02.835>files <00:05:03.010>are <00:05:03.185>split <00:05:03.360>into <00:05:03.535>smaller <00:05:03.710>subparts <00:05:03.885>meaning

108
00:05:05.585 --> 00:05:08.665
<00:05:05.585>teams <00:05:05.760>that <00:05:05.935>can, <00:05:06.109>teams <00:05:06.284>can <00:05:06.460>work <00:05:06.635>on <00:05:06.810>those <00:05:06.984>um,

109
00:05:09.245 --> 00:05:11.625
<00:05:09.245>in <00:05:09.478>parallel <00:05:09.711>without <00:05:09.945>being <00:05:10.178>reliant <00:05:10.411>on <00:05:10.645>others.

110
00:05:12.445 --> 00:05:15.945
<00:05:12.445>And <00:05:12.585>since <00:05:12.724>the <00:05:12.865>components <00:05:13.005>can <00:05:13.145>be <00:05:13.284>reused, <00:05:13.425>it <00:05:13.565>also <00:05:13.705>speeds <00:05:13.844>up

111
00:05:15.945 --> 00:05:17.865
<00:05:15.945>that <00:05:16.224>development <00:05:16.505>process <00:05:16.784>in <00:05:17.065>the <00:05:17.344>future.

112
00:05:19.045 --> 00:05:21.025
<00:05:19.045>And <00:05:19.220>I <00:05:19.395>know <00:05:19.570>you're <00:05:19.745>probably <00:05:19.920>sat <00:05:20.095>there <00:05:20.270>thinking <00:05:20.445>like,

113
00:05:21.035 --> 00:05:22.825
<00:05:21.035>hello <00:05:21.235>Emma, <00:05:21.435>have <00:05:21.635>you <00:05:21.835>ever <00:05:22.035>heard <00:05:22.235>of <00:05:22.435>React?

114
00:05:22.855 --> 00:05:26.905
<00:05:22.855>Like <00:05:23.055>yes, <00:05:23.255>component <00:05:23.455>driven <00:05:23.655>development <00:05:23.855>is <00:05:24.055>a <00:05:24.255>fundamental

115
00:05:26.905 --> 00:05:29.505
<00:05:26.905>feature <00:05:27.184>in <00:05:27.465>frontend <00:05:27.744>libraries <00:05:28.025>like <00:05:28.304>react,

116
00:05:30.165 --> 00:05:33.425
<00:05:30.165>but <00:05:30.305>in <00:05:30.445>reality <00:05:30.585>we're <00:05:30.725>still <00:05:30.865>ending <00:05:31.005>up <00:05:31.145>with <00:05:31.285>these <00:05:31.425>huge <00:05:31.565>files

117
00:05:33.815 --> 00:05:36.665
<00:05:33.815>with <00:05:34.048>components <00:05:34.281>that <00:05:34.515>are <00:05:34.748>covering <00:05:34.981>multiple <00:05:35.215>concerns

118
00:05:37.095 --> 00:05:39.905
<00:05:37.095>that <00:05:37.270>really <00:05:37.445>need <00:05:37.620>to <00:05:37.795>be <00:05:37.970>further <00:05:38.145>split <00:05:38.320>out <00:05:38.495>into

119
00:05:39.905 --> 00:05:41.105
<00:05:39.905>smaller <00:05:40.445>reusable <00:05:40.985>parts.

120
00:05:41.805 --> 00:05:45.505
<00:05:41.805>Um, <00:05:41.945>or <00:05:42.085>we <00:05:42.225>end <00:05:42.365>up <00:05:42.505>with <00:05:42.645>components <00:05:42.785>that <00:05:42.925>have <00:05:43.065>poor <00:05:43.205>APIs

121
00:05:45.615 --> 00:05:48.345
<00:05:45.615>because <00:05:45.848>they've <00:05:46.081>been <00:05:46.315>built <00:05:46.548>so <00:05:46.781>specific <00:05:47.015>to

122
00:05:48.345 --> 00:05:49.385
<00:05:48.345>that <00:05:48.657>first <00:05:48.969>use <00:05:49.281>case

123
00:05:50.955 --> 00:05:53.735
<00:05:50.955>and <00:05:51.094>then <00:05:51.234>they <00:05:51.375>require <00:05:51.515>more <00:05:51.655>work <00:05:51.794>to <00:05:51.935>end <00:05:52.075>up <00:05:52.215>being <00:05:52.354>reused.

124
00:05:54.595 --> 00:05:57.330
<00:05:54.595>It <00:05:54.711>just <00:05:54.828>feels <00:05:54.945>to <00:05:55.061>me <00:05:55.178>like <00:05:55.295>there's <00:05:55.411>more <00:05:55.528>work <00:05:55.645>to <00:05:55.761>be <00:05:55.878>be <00:05:55.995>done

125
00:05:57.505 --> 00:05:58.765
<00:05:57.505>to <00:05:57.788>really <00:05:58.072>feel <00:05:58.355>the <00:05:58.639>benefit

126
00:05:59.105 --> 00:06:02.365
<00:05:59.105>of <00:05:59.385>writing <00:05:59.665>truly <00:05:59.945>modularized <00:06:00.225>reusable <00:06:00.505>code.

127
00:06:03.905 --> 00:06:05.925
<00:06:03.905>So <00:06:04.255>thinking <00:06:04.604>in <00:06:04.955>a <00:06:05.304>reusable

128
00:06:05.985 --> 00:06:08.925
<00:06:05.985>and <00:06:06.160>flexible <00:06:06.335>way <00:06:06.510>from <00:06:06.685>the <00:06:06.860>start <00:06:07.035>is <00:06:07.210>game <00:06:07.385>changing.

129
00:06:09.745 --> 00:06:12.685
<00:06:09.745>I'm <00:06:09.885>not <00:06:10.025>saying <00:06:10.165>you <00:06:10.305>have <00:06:10.445>to <00:06:10.585>think <00:06:10.725>of <00:06:10.865>every <00:06:11.005>single <00:06:11.145>outcome

130
00:06:12.865 --> 00:06:14.885
<00:06:12.865>or <00:06:13.098>all <00:06:13.331>possibilities <00:06:13.565>when <00:06:13.798>you <00:06:14.031>just <00:06:14.265>have

131
00:06:14.885 --> 00:06:16.645
<00:06:14.885>that <00:06:15.118>one <00:06:15.351>use <00:06:15.585>case <00:06:15.818>at <00:06:16.051>the <00:06:16.284>start,

132
00:06:17.665 --> 00:06:20.485
<00:06:17.665>but <00:06:17.840>take <00:06:18.015>that <00:06:18.190>extra <00:06:18.365>30 <00:06:18.540>minutes, <00:06:18.715>half <00:06:18.890>an <00:06:19.065>hour

133
00:06:20.665 --> 00:06:22.925
<00:06:20.665>to <00:06:20.898>really <00:06:21.131>think <00:06:21.365>about <00:06:21.598>your <00:06:21.831>component <00:06:22.065>API

134
00:06:23.185 --> 00:06:25.045
<00:06:23.185>before <00:06:23.385>you <00:06:23.585>just <00:06:23.785>dive <00:06:23.985>in <00:06:24.185>and <00:06:24.385>start <00:06:24.585>building.

135
00:06:27.665 --> 00:06:29.165
<00:06:27.665>So <00:06:27.935>let's <00:06:28.205>remind <00:06:28.475>ourselves <00:06:28.745>of <00:06:29.015>some

136
00:06:29.165 --> 00:06:30.845
<00:06:29.165>of <00:06:29.398>the <00:06:29.631>best <00:06:29.865>practices <00:06:30.098>when <00:06:30.331>thinking <00:06:30.565>about

137
00:06:30.845 --> 00:06:32.365
<00:06:30.845>component <00:06:31.529>API <00:06:32.213>design.

138
00:06:32.625 --> 00:06:34.485
<00:06:32.625>Before <00:06:32.858>we <00:06:33.091>take <00:06:33.325>that <00:06:33.558>step <00:06:33.791>to <00:06:34.025>build,

139
00:06:34.945 --> 00:06:37.365
<00:06:34.945>we <00:06:35.120>should <00:06:35.295>really <00:06:35.469>consider <00:06:35.645>these <00:06:35.820>when <00:06:35.995>building <00:06:36.170>both <00:06:36.344>in

140
00:06:37.435 --> 00:06:40.525
<00:06:37.435>isolation <00:06:37.635>and <00:06:37.835>as <00:06:38.035>part <00:06:38.235>of <00:06:38.435>that <00:06:38.635>larger <00:06:38.835>application.

141
00:06:41.665 --> 00:06:44.485
<00:06:41.665>So <00:06:41.840>remember <00:06:42.015>to <00:06:42.190>keep <00:06:42.365>your <00:06:42.540>components <00:06:42.715>small <00:06:42.890>and <00:06:43.065>focused.

142
00:06:45.325 --> 00:06:47.885
<00:06:45.325>A <00:06:45.465>good <00:06:45.604>rule <00:06:45.745>to <00:06:45.885>follow <00:06:46.025>is <00:06:46.164>to <00:06:46.305>try <00:06:46.445>to <00:06:46.585>have, <00:06:46.724>try

143
00:06:47.885 --> 00:06:50.245
<00:06:47.885>to <00:06:48.085>create <00:06:48.284>components <00:06:48.485>that <00:06:48.685>have <00:06:48.885>a <00:06:49.085>single <00:06:49.284>responsibility.

144
00:06:51.065 --> 00:06:53.925
<00:06:51.065>It <00:06:51.240>makes <00:06:51.415>them <00:06:51.590>more <00:06:51.765>reusable <00:06:51.940>and <00:06:52.115>easier <00:06:52.290>to <00:06:52.465>maintain

145
00:06:54.585 --> 00:06:57.085
<00:06:54.585>and <00:06:54.760>also <00:06:54.935>easier <00:06:55.109>to <00:06:55.284>debug <00:06:55.460>when <00:06:55.635>things <00:06:55.810>go <00:06:55.984>wrong.

146
00:06:58.705 --> 00:07:01.045
<00:06:58.705>And <00:06:59.055>that <00:06:59.405>single <00:06:59.755>responsibility <00:07:00.104>could

147
00:07:01.045 --> 00:07:02.645
<00:07:01.045>be <00:07:01.395>constructing <00:07:01.745>a <00:07:02.095>larger <00:07:02.445>layout.

148
00:07:03.305 --> 00:07:04.685
<00:07:03.305>It <00:07:03.512>doesn't <00:07:03.719>have <00:07:03.926>to <00:07:04.133>be <00:07:04.340>as <00:07:04.547>simple

149
00:07:04.705 --> 00:07:06.685
<00:07:04.705>as <00:07:04.880>this <00:07:05.055>is <00:07:05.229>just <00:07:05.405>a <00:07:05.580>really <00:07:05.755>small <00:07:05.930>tiny <00:07:06.104>button

150
00:07:06.745 --> 00:07:09.605
<00:07:06.745>and <00:07:06.920>everything <00:07:07.095>has <00:07:07.270>to <00:07:07.445>be <00:07:07.620>like <00:07:07.795>that <00:07:07.970>as <00:07:08.145>long

151
00:07:09.605 --> 00:07:11.605
<00:07:09.605>as <00:07:09.805>it <00:07:10.005>just <00:07:10.205>takes <00:07:10.405>care <00:07:10.605>of <00:07:10.805>one <00:07:11.005>thing

152
00:07:11.705 --> 00:07:13.485
<00:07:11.705>and <00:07:11.984>just <00:07:12.265>has <00:07:12.544>one <00:07:12.825>main <00:07:13.104>focus.

153
00:07:15.865 --> 00:07:18.285
<00:07:15.865>So <00:07:16.098>then <00:07:16.331>you <00:07:16.565>can <00:07:16.798>encourage <00:07:17.031>component <00:07:17.265>composition.

154
00:07:18.395 --> 00:07:20.685
<00:07:18.395>Once <00:07:18.628>you <00:07:18.861>have <00:07:19.094>those <00:07:19.328>smaller <00:07:19.561>reusable <00:07:19.794>parts,

155
00:07:21.385 --> 00:07:24.965
<00:07:21.385>you <00:07:21.525>can <00:07:21.664>break <00:07:21.805>down <00:07:21.945>those <00:07:22.085>larger <00:07:22.224>complex <00:07:22.365>UIs <00:07:22.505>into <00:07:22.645>the <00:07:22.784>smaller

156
00:07:25.245 --> 00:07:26.525
<00:07:25.245>reusable <00:07:26.397>sub-components

157
00:07:26.785 --> 00:07:29.845
<00:07:26.785>and <00:07:26.960>then <00:07:27.135>construct <00:07:27.310>those <00:07:27.485>in <00:07:27.660>a <00:07:27.835>reusable <00:07:28.010>larger <00:07:28.185>one.

158
00:07:31.035 --> 00:07:32.845
<00:07:31.035>This <00:07:31.501>approach <00:07:31.968>promotes <00:07:32.435>modularity

159
00:07:33.025 --> 00:07:35.925
<00:07:33.025>and <00:07:33.258>reusability <00:07:33.491>while <00:07:33.724>still <00:07:33.958>maintaining <00:07:34.191>a <00:07:34.424>clear

160
00:07:35.985 --> 00:07:37.965
<00:07:35.985>and <00:07:36.451>concise <00:07:36.918>component <00:07:37.385>hierarchy.

161
00:07:40.155 --> 00:07:44.205
<00:07:40.155>Next <00:07:40.282>I <00:07:40.409>advise <00:07:40.536>to <00:07:40.664>pass <00:07:40.791>all <00:07:40.918>data <00:07:41.045>to <00:07:41.173>UI <00:07:41.300>components <00:07:41.427>via <00:07:41.554>props.

162
00:07:44.665 --> 00:07:46.725
<00:07:44.665>It <00:07:44.898>allows <00:07:45.131>for <00:07:45.365>flexibility <00:07:45.598>in <00:07:45.831>the <00:07:46.065>behavior

163
00:07:46.825 --> 00:07:48.125
<00:07:46.825>and <00:07:47.409>the <00:07:47.995>appearance.

164
00:07:48.895 --> 00:07:52.045
<00:07:48.895>Personally <00:07:49.050>I <00:07:49.206>like <00:07:49.361>to <00:07:49.517>have <00:07:49.672>a <00:07:49.828>split <00:07:49.983>of <00:07:50.139>container <00:07:50.294>components

165
00:07:52.315 --> 00:07:56.125
<00:07:52.315>that <00:07:52.470>control <00:07:52.626>all <00:07:52.781>of <00:07:52.937>the <00:07:53.092>data, <00:07:53.248>fetching <00:07:53.403>any <00:07:53.559>business <00:07:53.715>logic,

166
00:07:56.385 --> 00:07:58.285
<00:07:56.385>any <00:07:56.618>data <00:07:56.851>formatting <00:07:57.085>that <00:07:57.318>needs <00:07:57.551>to <00:07:57.784>happen

167
00:07:58.825 --> 00:08:01.245
<00:07:58.825>before <00:07:59.025>then <00:07:59.224>passing <00:07:59.425>all <00:07:59.625>of <00:07:59.825>that <00:08:00.025>data <00:08:00.224>through

168
00:08:01.245 --> 00:08:03.525
<00:08:01.245>to <00:08:01.445>the <00:08:01.645>UI <00:08:01.845>component <00:08:02.045>just <00:08:02.245>via <00:08:02.445>the <00:08:02.645>props.

169
00:08:04.255 --> 00:08:06.165
<00:08:04.255>Again, <00:08:04.605>it's <00:08:04.955>useful <00:08:05.305>for <00:08:05.655>debugging

170
00:08:06.265 --> 00:08:09.765
<00:08:06.265>and <00:08:06.420>the <00:08:06.576>separation <00:08:06.731>of <00:08:06.887>concerns <00:08:07.042>really <00:08:07.198>means <00:08:07.353>you <00:08:07.509>can <00:08:07.664>identify

171
00:08:09.765 --> 00:08:12.685
<00:08:09.765>where <00:08:09.920>your <00:08:10.076>bug <00:08:10.231>is <00:08:10.387>coming <00:08:10.542>from <00:08:10.698>much <00:08:10.853>quicker <00:08:11.009>than <00:08:11.164>if

172
00:08:12.685 --> 00:08:14.565
<00:08:12.685>everything <00:08:12.885>is <00:08:13.085>just <00:08:13.285>thrown <00:08:13.485>into <00:08:13.685>the <00:08:13.885>same <00:08:14.085>thing.

173
00:08:17.545 --> 00:08:21.125
<00:08:17.545>Try <00:08:17.685>to <00:08:17.825>use <00:08:17.965>generic <00:08:18.105>naming <00:08:18.245>where <00:08:18.385>you <00:08:18.525>can, <00:08:18.665>um, <00:08:18.805>as <00:08:18.945>much

174
00:08:21.125 --> 00:08:22.285
<00:08:21.125>as <00:08:21.333>it <00:08:21.542>makes <00:08:21.751>sense <00:08:21.960>to <00:08:22.169>do.

175
00:08:22.285 --> 00:08:24.245
<00:08:22.285>So <00:08:22.751>there <00:08:23.218>are <00:08:23.685>benefits

176
00:08:24.245 --> 00:08:27.605
<00:08:24.245>to <00:08:24.400>having <00:08:24.556>your <00:08:24.711>component <00:08:24.867>named <00:08:25.022>more <00:08:25.178>generic <00:08:25.333>from <00:08:25.489>the <00:08:25.645>start,

177
00:08:28.235 --> 00:08:30.645
<00:08:28.235>even <00:08:28.410>when <00:08:28.585>you <00:08:28.760>don't <00:08:28.935>know <00:08:29.110>all <00:08:29.285>the <00:08:29.460>specific <00:08:29.635>use

178
00:08:30.645 --> 00:08:32.005
<00:08:30.645>cases <00:08:30.889>at <00:08:31.134>that <00:08:31.379>point <00:08:31.624>in <00:08:31.869>time.

179
00:08:33.265 --> 00:08:36.565
<00:08:33.265>For <00:08:33.465>example, <00:08:33.664>instead <00:08:33.865>of <00:08:34.064>calling <00:08:34.265>it <00:08:34.465>profile <00:08:34.664>header,

180
00:08:36.815 --> 00:08:39.845
<00:08:36.815>maybe <00:08:36.990>just <00:08:37.165>call <00:08:37.340>it <00:08:37.515>header, <00:08:37.690>is <00:08:37.865>it <00:08:38.040>actually <00:08:38.215>specific

181
00:08:39.905 --> 00:08:41.685
<00:08:39.905>to <00:08:40.138>the <00:08:40.371>profile <00:08:40.605>or <00:08:40.838>is <00:08:41.071>it <00:08:41.304>just

182
00:08:41.685 --> 00:08:43.725
<00:08:41.684>that <00:08:41.885>the <00:08:42.084>design <00:08:42.284>you've <00:08:42.484>been <00:08:42.684>given <00:08:42.885>at <00:08:43.084>the

183
00:08:43.965 --> 00:08:45.405
<00:08:43.965>moment <00:08:44.289>is <00:08:44.613>on <00:08:44.937>a <00:08:45.261>profile?

184
00:08:46.215 --> 00:08:48.725
<00:08:46.215>Other <00:08:46.390>engineers <00:08:46.565>are <00:08:46.740>much <00:08:46.915>more <00:08:47.090>likely <00:08:47.265>to <00:08:47.440>look <00:08:47.615>at

185
00:08:48.725 --> 00:08:50.845
<00:08:48.725>that <00:08:48.925>component, <00:08:49.125>see <00:08:49.325>if <00:08:49.525>they <00:08:49.725>can <00:08:49.925>reuse <00:08:50.125>it.

186
00:08:51.105 --> 00:08:54.165
<00:08:51.105>If <00:08:51.232>the <00:08:51.359>naming <00:08:51.486>is <00:08:51.614>more <00:08:51.741>generic, <00:08:51.868>it <00:08:51.995>could <00:08:52.123>fit <00:08:52.250>their <00:08:52.377>use <00:08:52.505>case.

187
00:08:57.005 --> 00:08:59.445
<00:08:57.005>Remember <00:08:57.180>to <00:08:57.355>set <00:08:57.530>default <00:08:57.705>props <00:08:57.880>for <00:08:58.055>your <00:08:58.230>optional <00:08:58.405>props.

188
00:08:59.795 --> 00:09:02.005
<00:08:59.795>This <00:08:59.969>helps <00:09:00.145>to <00:09:00.319>provide <00:09:00.495>a <00:09:00.670>base <00:09:00.844>for <00:09:01.020>the <00:09:01.194>component,

189
00:09:02.005 --> 00:09:05.245
<00:09:02.005>making <00:09:02.180>it <00:09:02.355>more <00:09:02.530>predictable <00:09:02.705>even <00:09:02.880>when <00:09:03.055>values <00:09:03.230>for <00:09:03.405>all

190
00:09:05.245 --> 00:09:07.645
<00:09:05.245>of <00:09:05.385>the <00:09:05.525>props <00:09:05.665>have <00:09:05.805>not <00:09:05.945>been <00:09:06.085>passed <00:09:06.225>through, <00:09:06.365>people <00:09:06.505>know <00:09:06.645>what

191
00:09:07.645 --> 00:09:08.685
<00:09:07.645>to <00:09:07.957>expect <00:09:08.269>from <00:09:08.580>it.

192
00:09:11.325 --> 00:09:14.045
<00:09:11.325>Remember <00:09:11.480>to <00:09:11.636>localize <00:09:11.791>the <00:09:11.947>styles <00:09:12.102>of <00:09:12.258>your <00:09:12.413>component <00:09:12.569>as <00:09:12.725>well.

193
00:09:14.225 --> 00:09:17.445
<00:09:14.225>So <00:09:14.380>all <00:09:14.536>styles <00:09:14.691>related <00:09:14.847>to <00:09:15.002>a <00:09:15.158>component <00:09:15.313>should <00:09:15.469>live <00:09:15.625>where

194
00:09:17.445 --> 00:09:18.805
<00:09:17.445>that <00:09:17.853>component <00:09:18.261>is <00:09:18.669>housed.

195
00:09:19.345 --> 00:09:20.885
<00:09:19.345>Um, <00:09:19.807>and <00:09:20.269>styles <00:09:20.731>relating

196
00:09:20.885 --> 00:09:23.045
<00:09:20.885>to <00:09:21.118>a <00:09:21.351>child <00:09:21.585>component <00:09:21.818>shouldn't <00:09:22.051>be <00:09:22.285>controlled

197
00:09:23.045 --> 00:09:24.325
<00:09:23.045>by <00:09:23.429>the <00:09:23.813>parent <00:09:24.197>container

198
00:09:24.905 --> 00:09:28.205
<00:09:24.905>unless <00:09:25.045>of <00:09:25.185>course <00:09:25.324>it <00:09:25.464>its <00:09:25.605>job <00:09:25.745>is <00:09:25.885>to <00:09:26.025>control <00:09:26.165>the <00:09:26.305>layout.

199
00:09:28.425 --> 00:09:30.605
<00:09:28.425>For <00:09:28.658>example, <00:09:28.891>in <00:09:29.125>components <00:09:29.358>like <00:09:29.591>a <00:09:29.824>grid

200
00:09:30.665 --> 00:09:33.525
<00:09:30.665>or <00:09:30.839>a <00:09:31.015>list, <00:09:31.189>stuff <00:09:31.365>like <00:09:31.540>that <00:09:31.714>that <00:09:31.890>is <00:09:32.064>encompassing.

201
00:09:33.945 --> 00:09:36.805
<00:09:33.945>Um, <00:09:34.100>to <00:09:34.256>the <00:09:34.411>point <00:09:34.567>of <00:09:34.722>that <00:09:34.878>it's <00:09:35.033>controlling <00:09:35.189>a <00:09:35.345>layout

202
00:09:38.145 --> 00:09:40.325
<00:09:38.145>And <00:09:38.378>finally <00:09:38.611>use <00:09:38.845>the <00:09:39.078>render <00:09:39.311>props <00:09:39.545>pattern

203
00:09:40.755 --> 00:09:44.685
<00:09:40.755>with <00:09:40.895>default <00:09:41.035>fallbacks <00:09:41.175>to <00:09:41.314>give <00:09:41.455>this <00:09:41.595>kind <00:09:41.735>of <00:09:41.875>slot <00:09:42.015>space <00:09:42.155>API

204
00:09:44.755 --> 00:09:47.645
<00:09:44.755>that <00:09:44.988>really <00:09:45.221>gives <00:09:45.455>flexibility <00:09:45.688>to <00:09:45.921>the <00:09:46.155>consumers

205
00:09:47.645 --> 00:09:49.285
<00:09:47.645>of <00:09:48.111>your <00:09:48.578>component, <00:09:49.045>um,

206
00:09:49.425 --> 00:09:51.765
<00:09:49.425>and <00:09:49.658>allows <00:09:49.891>'em <00:09:50.125>to <00:09:50.358>override <00:09:50.591>certain <00:09:50.824>sections

207
00:09:51.765 --> 00:09:54.365
<00:09:51.765>of <00:09:51.920>your <00:09:52.076>component <00:09:52.231>whilst <00:09:52.387>keeping <00:09:52.542>the <00:09:52.698>rest <00:09:52.853>of <00:09:53.009>it <00:09:53.165>intact.

208
00:09:54.835 --> 00:09:57.965
<00:09:54.835>This <00:09:54.990>is <00:09:55.146>especially <00:09:55.301>useful <00:09:55.457>if <00:09:55.612>your <00:09:55.768>company <00:09:55.923>is <00:09:56.079>big <00:09:56.235>on

209
00:09:57.965 --> 00:09:59.645
<00:09:57.965>experimentation <00:09:58.665>in <00:09:59.365>UIs.

210
00:10:00.425 --> 00:10:02.965
<00:10:00.425>So <00:10:00.599>what <00:10:00.775>I <00:10:00.949>mean <00:10:01.125>by <00:10:01.300>that <00:10:01.474>is <00:10:01.650>large <00:10:01.824>components

211
00:10:03.815 --> 00:10:05.525
<00:10:03.815>often <00:10:04.281>compose <00:10:04.748>smaller <00:10:05.215>components.

212
00:10:06.185 --> 00:10:09.045
<00:10:06.185>If <00:10:06.385>we <00:10:06.584>think <00:10:06.785>about <00:10:06.984>those <00:10:07.185>as <00:10:07.385>individual <00:10:07.584>slots,

213
00:10:09.515 --> 00:10:12.165
<00:10:09.515>your <00:10:09.715>default <00:10:09.915>fallback <00:10:10.115>can <00:10:10.314>be <00:10:10.515>that <00:10:10.715>small <00:10:10.915>component

214
00:10:12.465 --> 00:10:16.205
<00:10:12.465>but <00:10:12.572>you <00:10:12.680>could <00:10:12.788>also <00:10:12.895>expose <00:10:13.003>a <00:10:13.111>hook <00:10:13.218>for <00:10:13.326>them <00:10:13.434>to <00:10:13.541>be <00:10:13.649>able <00:10:13.757>to <00:10:13.865>pass

215
00:10:16.205 --> 00:10:18.645
<00:10:16.205>through <00:10:16.360>a <00:10:16.516>component <00:10:16.671>to <00:10:16.827>render <00:10:16.982>in <00:10:17.138>that <00:10:17.293>slot <00:10:17.449>as <00:10:17.605>well.

216
00:10:19.355 --> 00:10:22.165
<00:10:19.355>This <00:10:19.555>opens <00:10:19.755>up <00:10:19.955>so <00:10:20.155>much <00:10:20.355>opportunity <00:10:20.555>for <00:10:20.755>reuse

217
00:10:22.585 --> 00:10:24.085
<00:10:22.585>and <00:10:22.810>less <00:10:23.035>duplicate <00:10:23.260>code <00:10:23.485>in <00:10:23.710>the <00:10:23.935>future.

218
00:10:25.905 --> 00:10:28.245
<00:10:25.905>So <00:10:26.060>if <00:10:26.216>we <00:10:26.371>start <00:10:26.527>thinking <00:10:26.682>about <00:10:26.838>all <00:10:26.993>of <00:10:27.149>these <00:10:27.305>things

219
00:10:28.745 --> 00:10:31.605
<00:10:28.745>and <00:10:28.945>when <00:10:29.145>we're <00:10:29.345>building <00:10:29.545>the <00:10:29.745>UI <00:10:29.945>components, <00:10:30.145>be

220
00:10:31.605 --> 00:10:32.725
<00:10:31.605>that <00:10:31.857>in <00:10:32.109>a <00:10:32.361>component <00:10:32.613>library

221
00:10:32.865 --> 00:10:35.045
<00:10:32.865>or <00:10:33.098>especially <00:10:33.331>in <00:10:33.565>those <00:10:33.798>larger <00:10:34.031>web <00:10:34.265>apps,

222
00:10:35.965 --> 00:10:37.685
<00:10:35.965>I <00:10:36.245>promise <00:10:36.525>you'll <00:10:36.805>have <00:10:37.085>stunning <00:10:37.365>components

223
00:10:38.435 --> 00:10:41.885
<00:10:38.435>that <00:10:38.635>they're <00:10:38.834>also <00:10:39.035>gonna <00:10:39.234>be <00:10:39.435>maintainable, <00:10:39.635>modular, <00:10:39.834>flexible

224
00:10:41.905 --> 00:10:44.165
<00:10:41.905>and <00:10:42.079>reusable, <00:10:42.255>which <00:10:42.430>is <00:10:42.605>what <00:10:42.780>we <00:10:42.954>all <00:10:43.130>really <00:10:43.305>want.

225
00:10:45.865 --> 00:10:47.885
<00:10:45.865>And <00:10:46.065>what <00:10:46.265>better <00:10:46.465>place <00:10:46.665>to <00:10:46.865>house <00:10:47.065>those <00:10:47.265>components

226
00:10:47.915 --> 00:10:49.885
<00:10:47.915>with <00:10:48.265>beautiful <00:10:48.615>APIs <00:10:48.964>than <00:10:49.314>storybook?

227
00:10:50.785 --> 00:10:53.645
<00:10:50.785>So <00:10:50.959>we <00:10:51.135>typically <00:10:51.310>associate <00:10:51.485>storybook <00:10:51.660>as <00:10:51.834>a <00:10:52.010>great <00:10:52.185>tool

228
00:10:53.665 --> 00:10:55.405
<00:10:53.665>for <00:10:54.015>building <00:10:54.365>out <00:10:54.714>component <00:10:55.064>libraries,

229
00:10:55.545 --> 00:10:58.525
<00:10:55.545>but <00:10:55.719>there's <00:10:55.895>actually <00:10:56.069>so <00:10:56.245>many <00:10:56.420>benefits <00:10:56.594>to <00:10:56.770>not <00:10:56.944>um,

230
00:10:58.865 --> 00:11:01.205
<00:10:58.865>to <00:10:59.040>highlight <00:10:59.215>over <00:10:59.390>the <00:10:59.565>next <00:10:59.740>15 <00:10:59.915>minutes <00:11:00.090>to <00:11:00.265>using

231
00:11:01.205 --> 00:11:03.685
<00:11:01.205>that <00:11:01.555>in <00:11:01.905>larger <00:11:02.255>web <00:11:02.605>applications.

232
00:11:04.945 --> 00:11:08.525
<00:11:04.945>So <00:11:05.100>storybook <00:11:05.256>enables <00:11:05.411>us <00:11:05.567>to <00:11:05.722>build <00:11:05.878>UI <00:11:06.033>components <00:11:06.189>in <00:11:06.345>isolation.

233
00:11:09.025 --> 00:11:12.325
<00:11:09.025>You <00:11:09.199>can <00:11:09.375>create <00:11:09.550>and <00:11:09.725>showcase <00:11:09.900>those <00:11:10.074>components <00:11:10.250>in <00:11:10.425>an

234
00:11:12.325 --> 00:11:15.285
<00:11:12.325>environment <00:11:12.558>completely <00:11:12.791>separate <00:11:13.025>to <00:11:13.258>your <00:11:13.491>production <00:11:13.725>app.

235
00:11:16.435 --> 00:11:18.125
<00:11:16.435>This <00:11:16.668>is <00:11:16.901>what <00:11:17.135>um, <00:11:17.368>it <00:11:17.601>looks <00:11:17.834>like

236
00:11:18.125 --> 00:11:19.245
<00:11:18.125>for <00:11:18.237>those <00:11:18.349>of <00:11:18.461>you <00:11:18.573>who <00:11:18.685>have <00:11:18.797>not <00:11:18.909>seen <00:11:19.021>it <00:11:19.133>before.

237
00:11:20.275 --> 00:11:23.245
<00:11:20.275>This <00:11:20.415>means <00:11:20.555>that <00:11:20.694>you <00:11:20.834>can <00:11:20.975>get <00:11:21.115>sign <00:11:21.255>off <00:11:21.395>from <00:11:21.535>product <00:11:21.675>from

238
00:11:23.325 --> 00:11:26.045
<00:11:23.325>design <00:11:23.525>without <00:11:23.725>actually <00:11:23.925>having <00:11:24.125>to <00:11:24.325>make <00:11:24.525>any <00:11:24.725>changes

239
00:11:26.225 --> 00:11:27.485
<00:11:26.225>to <00:11:26.603>your <00:11:26.981>production <00:11:27.359>app.

240
00:11:28.675 --> 00:11:31.085
<00:11:28.675>It's <00:11:28.849>important <00:11:29.025>to <00:11:29.199>note <00:11:29.375>that <00:11:29.550>you <00:11:29.724>can <00:11:29.900>integrate <00:11:30.074>storybook

241
00:11:31.115 --> 00:11:34.165
<00:11:31.115>with <00:11:31.348>React <00:11:31.581>view <00:11:31.815>next, <00:11:32.048>uh, <00:11:32.281>spell <00:11:32.515>uh,

242
00:11:34.185 --> 00:11:35.405
<00:11:34.185>and <00:11:34.367>I <00:11:34.550>think <00:11:34.733>some <00:11:34.916>others <00:11:35.099>as <00:11:35.283>well.

243
00:11:35.425 --> 00:11:37.125
<00:11:35.425>But <00:11:35.658>I'm <00:11:35.891>specifically <00:11:36.125>gonna <00:11:36.358>go <00:11:36.591>over <00:11:36.824>some

244
00:11:37.125 --> 00:11:38.165
<00:11:37.125>react <00:11:37.593>examples <00:11:38.060>today.

245
00:11:40.465 --> 00:11:42.405
<00:11:40.465>So <00:11:40.665>how <00:11:40.865>can <00:11:41.065>you <00:11:41.265>get <00:11:41.465>started <00:11:41.665>with <00:11:41.865>storybook?

246
00:11:42.945 --> 00:11:44.645
<00:11:42.945>You <00:11:43.178>really <00:11:43.411>just <00:11:43.645>run <00:11:43.878>these <00:11:44.111>two <00:11:44.345>commands

247
00:11:44.645 --> 00:11:45.725
<00:11:44.645>and <00:11:44.807>then <00:11:44.969>the <00:11:45.131>world <00:11:45.293>is <00:11:45.455>your <00:11:45.617>oyster.

248
00:11:46.945 --> 00:11:48.725
<00:11:46.945>It <00:11:47.295>installs <00:11:47.645>the <00:11:47.995>required <00:11:48.345>dependencies.

249
00:11:49.225 --> 00:11:51.445
<00:11:49.225>Um, <00:11:49.380>it <00:11:49.536>sets <00:11:49.691>up <00:11:49.847>scripts <00:11:50.002>to <00:11:50.158>be <00:11:50.313>able <00:11:50.469>to <00:11:50.625>run

250
00:11:51.505 --> 00:11:55.765
<00:11:51.505>and <00:11:51.705>build <00:11:51.905>storybook <00:11:52.105>it <00:11:52.305>um, <00:11:52.505>provides <00:11:52.705>default <00:11:52.905>config

251
00:11:55.785 --> 00:11:58.245
<00:11:55.785>for <00:11:55.959>the <00:11:56.135>setup <00:11:56.310>and <00:11:56.485>also <00:11:56.660>gives <00:11:56.834>you <00:11:57.010>some <00:11:57.185>boilerplate

252
00:11:58.245 --> 00:11:59.445
<00:11:58.245>stories <00:11:58.515>to <00:11:58.785>get <00:11:59.055>you <00:11:59.325>started.

253
00:12:00.385 --> 00:12:02.085
<00:12:00.385>So <00:12:00.665>once <00:12:00.944>you <00:12:01.225>have <00:12:01.505>storybook <00:12:01.785>installed,

254
00:12:02.145 --> 00:12:04.765
<00:12:02.145>you <00:12:02.285>can <00:12:02.425>then <00:12:02.564>just <00:12:02.704>go <00:12:02.845>ahead <00:12:02.985>and <00:12:03.125>start <00:12:03.265>writing <00:12:03.405>your <00:12:03.545>stories.

255
00:12:06.555 --> 00:12:08.015
<00:12:06.555>So <00:12:06.719>I'm <00:12:06.883>gonna <00:12:07.047>show <00:12:07.212>you <00:12:07.376>how <00:12:07.540>we <00:12:07.704>do <00:12:07.869>that.

256
00:12:08.225 --> 00:12:10.175
<00:12:08.225>First <00:12:08.380>up <00:12:08.536>we're <00:12:08.691>gonna <00:12:08.847>take <00:12:09.002>a <00:12:09.158>look <00:12:09.313>at <00:12:09.469>the <00:12:09.625>component

257
00:12:10.175 --> 00:12:11.975
<00:12:10.175>that <00:12:10.408>we're <00:12:10.641>gonna <00:12:10.875>write <00:12:11.108>some <00:12:11.341>stories <00:12:11.574>for.

258
00:12:12.445 --> 00:12:14.535
<00:12:12.445>This <00:12:12.678>is <00:12:12.911>a <00:12:13.145>very <00:12:13.378>simple <00:12:13.611>button <00:12:13.845>component.

259
00:12:14.645 --> 00:12:17.135
<00:12:14.645>It's <00:12:14.785>all <00:12:14.925>the <00:12:15.064>same <00:12:15.204>file <00:12:15.345>I've <00:12:15.485>just <00:12:15.625>put <00:12:15.765>it <00:12:15.905>onto <00:12:16.045>so

260
00:12:17.135 --> 00:12:18.255
<00:12:17.135>that <00:12:17.336>the <00:12:17.538>code <00:12:17.739>is <00:12:17.941>slightly <00:12:18.143>bigger.

261
00:12:19.075 --> 00:12:21.015
<00:12:19.075>So <00:12:19.230>on <00:12:19.386>the <00:12:19.541>left <00:12:19.697>hand <00:12:19.852>side <00:12:20.008>we've <00:12:20.163>got <00:12:20.319>some <00:12:20.475>style

262
00:12:21.015 --> 00:12:22.255
<00:12:21.015>components <00:12:21.573>going <00:12:22.131>on.

263
00:12:22.515 --> 00:12:25.055
<00:12:22.515>Um, <00:12:22.642>and <00:12:22.769>then <00:12:22.896>on <00:12:23.024>the <00:12:23.151>right <00:12:23.278>hand <00:12:23.405>side <00:12:23.533>is <00:12:23.660>the <00:12:23.787>button <00:12:23.915>code.

264
00:12:25.555 --> 00:12:27.575
<00:12:25.555>We <00:12:25.729>have <00:12:25.905>some <00:12:26.079>props <00:12:26.255>that <00:12:26.430>are <00:12:26.604>being <00:12:26.780>passed <00:12:26.954>through.

265
00:12:27.715 --> 00:12:30.695
<00:12:27.715>So <00:12:27.870>you <00:12:28.026>can <00:12:28.181>change <00:12:28.337>the <00:12:28.492>kind <00:12:28.648>of <00:12:28.803>the <00:12:28.959>button <00:12:29.115>um,

266
00:12:30.835 --> 00:12:32.215
<00:12:30.835>to <00:12:31.145>be <00:12:31.456>primary <00:12:31.766>or <00:12:32.077>secondary.

267
00:12:32.595 --> 00:12:35.495
<00:12:32.595>You <00:12:32.750>can <00:12:32.906>set <00:12:33.061>the <00:12:33.217>size, <00:12:33.372>you <00:12:33.528>can <00:12:33.683>define <00:12:33.839>a <00:12:33.995>label

268
00:12:35.525 --> 00:12:37.175
<00:12:35.525>that <00:12:35.805>is <00:12:36.084>the <00:12:36.365>only <00:12:36.645>required <00:12:36.925>property

269
00:12:37.235 --> 00:12:39.135
<00:12:37.235>and <00:12:37.435>then <00:12:37.635>also <00:12:37.835>you <00:12:38.035>can <00:12:38.235>control <00:12:38.435>the <00:12:38.635>state

270
00:12:39.135 --> 00:12:40.215
<00:12:39.135>with <00:12:39.459>the <00:12:39.783>disabled <00:12:40.107>prop.

271
00:12:41.735 --> 00:12:44.435
<00:12:41.735>We <00:12:41.875>also <00:12:42.015>have <00:12:42.155>added <00:12:42.295>fallbacks <00:12:42.435>for <00:12:42.575>all <00:12:42.715>of <00:12:42.855>the <00:12:42.995>optional <00:12:43.135>props

272
00:12:44.435 --> 00:12:46.235
<00:12:44.435>and <00:12:44.635>we've <00:12:44.834>also <00:12:45.035>added <00:12:45.234>some <00:12:45.435>comments <00:12:45.635>in <00:12:45.834>to

273
00:12:46.245 --> 00:12:47.835
<00:12:46.245>where <00:12:46.595>the <00:12:46.945>props <00:12:47.295>are <00:12:47.645>defined.

274
00:12:49.295 --> 00:12:52.435
<00:12:49.295>So <00:12:49.495>from <00:12:49.694>looking <00:12:49.895>at <00:12:50.094>this, <00:12:50.295>are <00:12:50.495>we <00:12:50.694>able

275
00:12:52.435 --> 00:12:55.035
<00:12:52.435>to <00:12:52.590>really <00:12:52.746>see <00:12:52.901>at <00:12:53.057>a <00:12:53.212>glance <00:12:53.368>what <00:12:53.523>the <00:12:53.679>offerings <00:12:53.834>are

276
00:12:55.035 --> 00:12:56.235
<00:12:55.035>of <00:12:55.395>this <00:12:55.755>button <00:12:56.115>component?

277
00:12:56.595 --> 00:12:59.435
<00:12:56.595>Visually, <00:12:56.750>if <00:12:56.906>you <00:12:57.061>are <00:12:57.217>an <00:12:57.372>engineer <00:12:57.528>and <00:12:57.683>the <00:12:57.839>designers <00:12:57.995>come

278
00:12:59.435 --> 00:13:01.235
<00:12:59.435>and <00:12:59.590>brought <00:12:59.746>you <00:12:59.901>a <00:13:00.057>new <00:13:00.212>design <00:13:00.368>that's <00:13:00.523>got <00:13:00.679>a <00:13:00.834>button,

279
00:13:01.855 --> 00:13:04.635
<00:13:01.855>can <00:13:01.982>you <00:13:02.109>really <00:13:02.236>easily <00:13:02.364>see <00:13:02.491>if <00:13:02.618>you <00:13:02.745>are <00:13:02.873>able <00:13:03.000>to <00:13:03.127>use <00:13:03.255>this?

280
00:13:05.615 --> 00:13:07.555
<00:13:05.615>Do <00:13:05.790>you <00:13:05.965>know <00:13:06.140>what <00:13:06.315>the <00:13:06.490>default <00:13:06.665>size <00:13:06.840>looks <00:13:07.015>like

281
00:13:07.615 --> 00:13:09.195
<00:13:07.615>and <00:13:07.848>if <00:13:08.081>that's <00:13:08.315>what <00:13:08.548>you've <00:13:08.781>been <00:13:09.015>given

282
00:13:09.815 --> 00:13:11.355
<00:13:09.815>or <00:13:10.013>do <00:13:10.211>you <00:13:10.409>actually <00:13:10.607>need <00:13:10.805>some <00:13:11.003>more <00:13:11.201>time

283
00:13:11.455 --> 00:13:15.155
<00:13:11.455>to <00:13:11.582>spend <00:13:11.709>digging <00:13:11.836>into <00:13:11.964>the <00:13:12.091>code <00:13:12.218>to <00:13:12.345>see <00:13:12.473>what <00:13:12.600>that <00:13:12.727>maps <00:13:12.855>to?

284
00:13:16.155 --> 00:13:18.155
<00:13:16.155>Wouldn't <00:13:16.329>it <00:13:16.505>be <00:13:16.680>great <00:13:16.855>if <00:13:17.030>you <00:13:17.204>had <00:13:17.380>some <00:13:17.555>kind

285
00:13:18.155 --> 00:13:20.275
<00:13:18.155>of <00:13:18.388>visual <00:13:18.621>documentation <00:13:18.855>to <00:13:19.088>help <00:13:19.321>with <00:13:19.555>that?

286
00:13:20.775 --> 00:13:22.115
<00:13:20.775>That's <00:13:21.076>where <00:13:21.378>stories <00:13:21.679>come <00:13:21.981>in.

287
00:13:24.385 --> 00:13:27.165
<00:13:24.385>So <00:13:24.560>first <00:13:24.735>before <00:13:24.910>you <00:13:25.085>define <00:13:25.260>your <00:13:25.435>stories, <00:13:25.610>you <00:13:25.785>can,

288
00:13:27.275 --> 00:13:29.005
<00:13:27.275>I've <00:13:27.475>done <00:13:27.675>this <00:13:27.875>in <00:13:28.074>the <00:13:28.275>button <00:13:28.475>dot <00:13:28.675>stories.

289
00:13:29.345 --> 00:13:31.085
<00:13:29.345>Uh, <00:13:29.545>this <00:13:29.745>is <00:13:29.945>all <00:13:30.145>in <00:13:30.345>TypeScript <00:13:30.545>as <00:13:30.745>well.

290
00:13:31.285 --> 00:13:32.725
<00:13:31.285>I <00:13:31.544>should <00:13:31.803>have <00:13:32.062>mentioned <00:13:32.321>that <00:13:32.581>um,

291
00:13:33.345 --> 00:13:34.605
<00:13:33.345>in <00:13:33.571>the <00:13:33.798>button <00:13:34.025>dot <00:13:34.252>stories <00:13:34.479>file.

292
00:13:34.625 --> 00:13:36.845
<00:13:34.625>But <00:13:34.780>you <00:13:34.936>can <00:13:35.091>also <00:13:35.247>have <00:13:35.402>a <00:13:35.558>top <00:13:35.713>level <00:13:35.869>stories <00:13:36.025>folder.

293
00:13:37.165 --> 00:13:39.645
<00:13:37.165>I <00:13:37.339>just <00:13:37.515>prefer <00:13:37.689>to <00:13:37.865>have <00:13:38.040>my <00:13:38.214>stories <00:13:38.390>directly <00:13:38.564>alongside

294
00:13:39.645 --> 00:13:41.325
<00:13:39.645>where <00:13:39.995>the <00:13:40.345>components <00:13:40.694>sits <00:13:41.045>itself.

295
00:13:42.705 --> 00:13:44.445
<00:13:42.705>Before <00:13:42.938>you <00:13:43.171>get <00:13:43.405>started <00:13:43.638>though, <00:13:43.871>you <00:13:44.105>have

296
00:13:44.445 --> 00:13:46.285
<00:13:44.445>to <00:13:44.678>define <00:13:44.911>some <00:13:45.145>metadata <00:13:45.378>for <00:13:45.611>the <00:13:45.845>story.

297
00:13:46.625 --> 00:13:49.045
<00:13:46.625>So <00:13:46.765>let's <00:13:46.905>just <00:13:47.045>take <00:13:47.185>a <00:13:47.325>look <00:13:47.465>at <00:13:47.605>what's <00:13:47.745>going <00:13:47.885>on <00:13:48.025>here.

298
00:13:49.985 --> 00:13:53.765
<00:13:49.985>We <00:13:50.125>have <00:13:50.265>the <00:13:50.405>title, <00:13:50.545>this <00:13:50.685>defines <00:13:50.825>where <00:13:50.965>you <00:13:51.105>want <00:13:51.245>the <00:13:51.385>component

299
00:13:53.865 --> 00:13:56.765
<00:13:53.865>to <00:13:54.098>sit <00:13:54.331>hierarchically <00:13:54.565>in <00:13:54.798>the <00:13:55.031>generated <00:13:55.265>storybook.

300
00:13:56.785 --> 00:13:58.805
<00:13:56.785>So <00:13:56.959>this <00:13:57.135>is <00:13:57.310>just <00:13:57.485>in <00:13:57.660>a <00:13:57.834>folder <00:13:58.010>called <00:13:58.185>components

301
00:13:58.985 --> 00:14:02.405
<00:13:58.985>and <00:13:59.218>the <00:13:59.451>button, <00:13:59.685>the <00:13:59.918>component <00:14:00.151>pretty <00:14:00.385>self-explanatory.

302
00:14:02.405 --> 00:14:05.925
<00:14:02.405>It's <00:14:02.545>just <00:14:02.685>the <00:14:02.824>button <00:14:02.964>that <00:14:03.105>I <00:14:03.245>showed <00:14:03.385>you <00:14:03.525>just <00:14:03.665>before <00:14:03.805>tags.

303
00:14:06.015 --> 00:14:07.685
<00:14:06.015>There <00:14:06.295>are <00:14:06.574>so <00:14:06.855>many <00:14:07.135>different <00:14:07.415>tags

304
00:14:07.685 --> 00:14:09.525
<00:14:07.685>that <00:14:07.964>you <00:14:08.244>can <00:14:08.525>implement <00:14:08.805>with <00:14:09.084>storybook.

305
00:14:09.715 --> 00:14:11.925
<00:14:09.715>This <00:14:09.995>one <00:14:10.275>in <00:14:10.555>particular <00:14:10.835>is <00:14:11.115>saying,

306
00:14:11.925 --> 00:14:15.205
<00:14:11.925>please <00:14:12.158>storybook <00:14:12.391>auto <00:14:12.625>generate <00:14:12.858>us <00:14:13.091>some <00:14:13.324>documentation.

307
00:14:15.435 --> 00:14:18.045
<00:14:15.435>That <00:14:15.590>would <00:14:15.746>be <00:14:15.901>great. <00:14:16.057>And <00:14:16.212>then <00:14:16.368>you <00:14:16.523>have <00:14:16.679>to <00:14:16.834>remember

308
00:14:18.045 --> 00:14:22.165
<00:14:18.045>to <00:14:18.172>export <00:14:18.299>the <00:14:18.426>metadata <00:14:18.554>as <00:14:18.681>well <00:14:18.808>in <00:14:18.935>the <00:14:19.063>file <00:14:19.190>as <00:14:19.317>the <00:14:19.444>default.

309
00:14:24.395 --> 00:14:26.685
<00:14:24.395>Then <00:14:24.569>we <00:14:24.745>can <00:14:24.920>start <00:14:25.095>writing <00:14:25.270>some <00:14:25.444>of <00:14:25.620>our <00:14:25.795>stories.

310
00:14:27.745 --> 00:14:29.205
<00:14:27.745>So <00:14:28.007>here <00:14:28.270>we <00:14:28.533>have <00:14:28.796>four <00:14:29.059>stories.

311
00:14:29.665 --> 00:14:32.885
<00:14:29.665>Um, <00:14:29.792>the <00:14:29.919>title <00:14:30.046>that <00:14:30.174>each <00:14:30.301>uh, <00:14:30.428>of <00:14:30.555>them <00:14:30.683>is <00:14:30.810>set <00:14:30.937>to <00:14:31.064>is

312
00:14:32.885 --> 00:14:34.445
<00:14:32.885>what <00:14:33.235>appears <00:14:33.585>in <00:14:33.935>the <00:14:34.285>storybook.

313
00:14:34.445 --> 00:14:35.685
<00:14:34.445>So <00:14:34.668>we <00:14:34.891>have <00:14:35.114>the <00:14:35.337>default <00:14:35.560>one.

314
00:14:35.945 --> 00:14:37.445
<00:14:35.945>As <00:14:36.137>you <00:14:36.330>can <00:14:36.523>see, <00:14:36.716>I'm <00:14:36.909>literally <00:14:37.102>just <00:14:37.295>passing

315
00:14:37.445 --> 00:14:39.845
<00:14:37.445>through <00:14:37.620>the <00:14:37.795>label, <00:14:37.970>which <00:14:38.145>is <00:14:38.320>the <00:14:38.495>only <00:14:38.670>required <00:14:38.845>property.

316
00:14:40.535 --> 00:14:41.865
<00:14:40.535>Then <00:14:40.934>we <00:14:41.333>have <00:14:41.732>secondary,

317
00:14:41.865 --> 00:14:44.305
<00:14:41.865>which <00:14:42.065>is <00:14:42.265>overriding <00:14:42.465>the <00:14:42.665>kind <00:14:42.865>we <00:14:43.065>have <00:14:43.265>large,

318
00:14:44.305 --> 00:14:45.665
<00:14:44.305>which <00:14:44.611>is <00:14:44.916>overriding <00:14:45.223>the <00:14:45.529>size

319
00:14:46.085 --> 00:14:48.945
<00:14:46.085>and <00:14:46.240>we <00:14:46.396>have <00:14:46.551>disabled <00:14:46.707>which <00:14:46.862>is <00:14:47.018>overriding <00:14:47.173>the <00:14:47.329>disabled <00:14:47.485>prop.

320
00:14:49.685 --> 00:14:52.325
<00:14:49.685>So <00:14:49.918>now <00:14:50.151>we <00:14:50.385>have <00:14:50.618>a <00:14:50.851>documented, <00:14:51.084>um,

321
00:14:53.255 --> 00:14:55.125
<00:14:53.255>we've <00:14:53.605>documented <00:14:53.955>each <00:14:54.305>version <00:14:54.655>of

322
00:14:55.125 --> 00:14:56.845
<00:14:55.125>what <00:14:55.405>this <00:14:55.685>component <00:14:55.965>could <00:14:56.245>look <00:14:56.525>like

323
00:14:57.795 --> 00:14:59.685
<00:14:57.795>with <00:14:58.028>the <00:14:58.261>existing <00:14:58.495>code <00:14:58.728>that <00:14:58.961>we <00:14:59.194>have.

324
00:15:00.675 --> 00:15:03.045
<00:15:00.675>This <00:15:00.849>way <00:15:01.025>of <00:15:01.199>writing <00:15:01.375>stories <00:15:01.550>is <00:15:01.724>also <00:15:01.900>something <00:15:02.074>called

325
00:15:03.045 --> 00:15:04.205
<00:15:03.045>component <00:15:03.567>story <00:15:04.089>format,

326
00:15:04.495 --> 00:15:06.525
<00:15:04.495>which <00:15:04.695>is <00:15:04.895>the <00:15:05.095>recommended <00:15:05.295>way <00:15:05.495>to <00:15:05.695>do <00:15:05.895>so.

327
00:15:08.305 --> 00:15:10.085
<00:15:08.305>So <00:15:08.584>the <00:15:08.864>stories <00:15:09.145>we <00:15:09.425>wrote <00:15:09.704>previously,

328
00:15:10.275 --> 00:15:11.965
<00:15:10.275>this <00:15:10.741>is <00:15:11.208>the <00:15:11.675>autogenerated

329
00:15:12.245 --> 00:15:13.525
<00:15:12.245>documentation <00:15:12.475>that <00:15:12.705>we <00:15:12.936>get <00:15:13.166>from <00:15:13.396>them.

330
00:15:14.345 --> 00:15:16.405
<00:15:14.345>So <00:15:14.485>you <00:15:14.625>can <00:15:14.765>see <00:15:14.905>at <00:15:15.045>the <00:15:15.185>top <00:15:15.325>we <00:15:15.465>get <00:15:15.605>a <00:15:15.745>lot

331
00:15:16.405 --> 00:15:18.045
<00:15:16.405>of <00:15:17.105>prop <00:15:17.805>documentation.

332
00:15:18.425 --> 00:15:20.045
<00:15:18.425>The <00:15:18.625>comments <00:15:18.824>that <00:15:19.025>we <00:15:19.224>had <00:15:19.425>in <00:15:19.625>the <00:15:19.824>code

333
00:15:20.135 --> 00:15:21.405
<00:15:20.135>fills <00:15:20.516>the <00:15:20.896>description <00:15:21.278>column.

334
00:15:22.065 --> 00:15:23.885
<00:15:22.065>Um, <00:15:22.298>it <00:15:22.531>shows <00:15:22.765>what <00:15:22.998>the <00:15:23.231>defaults <00:15:23.465>are

335
00:15:24.225 --> 00:15:28.405
<00:15:24.225>and <00:15:24.380>also <00:15:24.536>directly <00:15:24.691>in <00:15:24.847>storybook <00:15:25.002>you <00:15:25.158>can <00:15:25.313>toggle <00:15:25.469>the <00:15:25.625>different

336
00:15:28.465 --> 00:15:30.645
<00:15:28.465>um, <00:15:28.640>controls <00:15:28.815>on <00:15:28.990>the <00:15:29.165>right <00:15:29.340>hand <00:15:29.515>side <00:15:29.690>to <00:15:29.865>see

337
00:15:30.645 --> 00:15:32.205
<00:15:30.645>what <00:15:30.845>it <00:15:31.045>would <00:15:31.245>look <00:15:31.444>like <00:15:31.645>with <00:15:31.845>something <00:15:32.045>else.

338
00:15:33.225 --> 00:15:34.925
<00:15:33.225>You <00:15:33.505>then <00:15:33.785>get <00:15:34.065>a <00:15:34.345>view <00:15:34.625>of

339
00:15:34.925 --> 00:15:37.685
<00:15:34.925>what <00:15:35.158>each <00:15:35.391>component <00:15:35.625>actually <00:15:35.858>looks <00:15:36.091>like <00:15:36.324>visually.

340
00:15:38.265 --> 00:15:39.845
<00:15:38.265>And <00:15:38.465>then <00:15:38.665>the <00:15:38.865>other <00:15:39.064>thing <00:15:39.265>as <00:15:39.465>well <00:15:39.665>is

341
00:15:39.845 --> 00:15:41.565
<00:15:39.845>that <00:15:40.125>it <00:15:40.405>provides <00:15:40.685>code <00:15:40.965>snippets <00:15:41.245>too.

342
00:15:41.705 --> 00:15:45.125
<00:15:41.705>So <00:15:41.860>you <00:15:42.016>can <00:15:42.171>literally <00:15:42.327>just <00:15:42.482>go <00:15:42.638>in <00:15:42.793>there, <00:15:42.949>copy <00:15:43.105>it

343
00:15:45.225 --> 00:15:46.485
<00:15:45.225>and <00:15:45.451>paste <00:15:45.678>it <00:15:45.905>in <00:15:46.132>your <00:15:46.359>code,

344
00:15:46.575 --> 00:15:48.325
<00:15:46.575>which <00:15:46.775>we <00:15:46.975>all <00:15:47.175>love <00:15:47.375>to <00:15:47.575>copy <00:15:47.775>and <00:15:47.975>paste.

345
00:15:48.785 --> 00:15:50.605
<00:15:48.785>So <00:15:49.251>that's <00:15:49.718>incredible, <00:15:50.185>right?

346
00:15:51.145 --> 00:15:54.565
<00:15:51.145>And <00:15:51.345>you've <00:15:51.545>just <00:15:51.745>got <00:15:51.944>free <00:15:52.145>documentation, <00:15:52.345>free <00:15:52.545>docs,

347
00:15:54.565 --> 00:15:55.605
<00:15:54.565>you <00:15:54.721>don't <00:15:54.877>have <00:15:55.033>to <00:15:55.189>do <00:15:55.345>it <00:15:55.501>yourself.

348
00:15:56.025 --> 00:15:58.325
<00:15:56.025>You <00:15:56.258>get <00:15:56.491>better <00:15:56.725>discoverability <00:15:56.958>of <00:15:57.191>the <00:15:57.425>components.

349
00:15:58.825 --> 00:16:01.125
<00:15:58.825>You <00:15:59.000>have <00:15:59.175>increased <00:15:59.350>knowledge <00:15:59.525>sharing <00:15:59.700>of <00:15:59.875>what <00:16:00.050>is <00:16:00.225>available,

350
00:16:01.125 --> 00:16:04.245
<00:16:01.125>meaning <00:16:01.280>less <00:16:01.436>duplicate <00:16:01.591>work <00:16:01.747>in <00:16:01.902>the <00:16:02.058>future <00:16:02.213>By <00:16:02.369>doing <00:16:02.525>this.

351
00:16:05.585 --> 00:16:08.125
<00:16:05.585>And <00:16:05.725>I <00:16:05.865>know <00:16:06.005>you're <00:16:06.145>probably <00:16:06.285>sat <00:16:06.425>there <00:16:06.565>thinking <00:16:06.705>now <00:16:06.845>like <00:16:06.985>this

352
00:16:08.125 --> 00:16:12.165
<00:16:08.125>is <00:16:08.265>cool <00:16:08.405>Emma, <00:16:08.545>but <00:16:08.685>in <00:16:08.825>reality <00:16:08.965>components <00:16:09.105>in <00:16:09.245>these <00:16:09.385>large <00:16:09.525>web

353
00:16:12.165 --> 00:16:14.165
<00:16:12.165>apps <00:16:12.398>are <00:16:12.631>not <00:16:12.865>like <00:16:13.098>that <00:16:13.331>button <00:16:13.564>component.

354
00:16:14.555 --> 00:16:17.165
<00:16:14.555>They <00:16:14.755>make <00:16:14.954>API <00:16:15.155>calls, <00:16:15.354>they <00:16:15.555>interact <00:16:15.755>with <00:16:15.954>state,

355
00:16:17.435 --> 00:16:18.605
<00:16:17.435>there's <00:16:17.698>much <00:16:17.961>more <00:16:18.224>to <00:16:18.488>them.

356
00:16:19.435 --> 00:16:21.205
<00:16:19.435>Well <00:16:19.609>don't <00:16:19.785>worry, <00:16:19.959>I <00:16:20.135>got <00:16:20.310>you <00:16:20.484>there <00:16:20.660>as <00:16:20.834>well

357
00:16:21.205 --> 00:16:24.365
<00:16:21.205>because <00:16:21.345>you <00:16:21.485>can <00:16:21.625>actually <00:16:21.765>cover <00:16:21.905>both <00:16:22.045>of <00:16:22.185>those <00:16:22.325>use <00:16:22.465>cases <00:16:22.605>too.

358
00:16:25.025 --> 00:16:27.885
<00:16:25.025>So <00:16:25.180>it <00:16:25.336>doesn't <00:16:25.491>matter <00:16:25.647>if <00:16:25.802>your <00:16:25.958>component <00:16:26.113>makes <00:16:26.269>API <00:16:26.425>calls,

359
00:16:28.185 --> 00:16:29.885
<00:16:28.185>you <00:16:28.418>can <00:16:28.651>mock <00:16:28.885>these <00:16:29.118>in <00:16:29.351>your <00:16:29.584>stories

360
00:16:30.065 --> 00:16:32.205
<00:16:30.065>as <00:16:30.415>well <00:16:30.765>using <00:16:31.115>uh, <00:16:31.465>parameters.

361
00:16:33.345 --> 00:16:34.805
<00:16:33.345>So <00:16:33.673>parameters <00:16:34.002>are <00:16:34.330>a <00:16:34.659>set

362
00:16:34.805 --> 00:16:37.525
<00:16:34.805>of <00:16:35.038>static <00:16:35.271>defined <00:16:35.505>metadata <00:16:35.738>about <00:16:35.971>a <00:16:36.204>story

363
00:16:38.355 --> 00:16:40.605
<00:16:38.355>here <00:16:38.635>we're <00:16:38.915>setting <00:16:39.195>the <00:16:39.475>MSW <00:16:39.755>handler.

364
00:16:40.825 --> 00:16:44.725
<00:16:40.825>Um, <00:16:40.965>MSW <00:16:41.105>is <00:16:41.245>mock <00:16:41.385>service <00:16:41.525>worker, <00:16:41.665>it's <00:16:41.805>an <00:16:41.945>API <00:16:42.085>mocking <00:16:42.225>library

365
00:16:45.705 --> 00:16:49.005
<00:16:45.705>and <00:16:45.880>we <00:16:46.055>are <00:16:46.230>basically <00:16:46.405>saying <00:16:46.580>intercept <00:16:46.755>all <00:16:46.930>the <00:16:47.105>requests

366
00:16:49.145 --> 00:16:51.005
<00:16:49.145>to <00:16:49.495>slash <00:16:49.845>API <00:16:50.194>slash <00:16:50.545>something

367
00:16:51.465 --> 00:16:53.805
<00:16:51.465>and <00:16:51.640>get <00:16:51.815>the <00:16:51.990>return <00:16:52.165>to <00:16:52.340>be <00:16:52.515>this <00:16:52.690>fake <00:16:52.865>data

368
00:16:54.075 --> 00:16:56.365
<00:16:54.075>that <00:16:54.275>I've <00:16:54.475>written <00:16:54.675>myself <00:16:54.875>for <00:16:55.075>the <00:16:55.275>stories <00:16:55.475>purposes.

369
00:16:57.385 --> 00:16:59.285
<00:16:57.385>The <00:16:57.665>really <00:16:57.944>neat <00:16:58.225>thing <00:16:58.505>here <00:16:58.785>is

370
00:16:59.285 --> 00:17:02.605
<00:16:59.285>that <00:16:59.440>you <00:16:59.596>can <00:16:59.751>override <00:16:59.907>these <00:17:00.062>parameters <00:17:00.218>at <00:17:00.373>each <00:17:00.529>story <00:17:00.685>level.

371
00:17:03.265 --> 00:17:04.925
<00:17:03.265>So <00:17:03.439>if <00:17:03.615>you <00:17:03.790>wanted <00:17:03.965>to <00:17:04.139>do <00:17:04.315>a <00:17:04.490>story <00:17:04.665>of

372
00:17:04.925 --> 00:17:06.485
<00:17:04.925>what <00:17:05.204>your <00:17:05.484>component <00:17:05.764>would <00:17:06.044>look <00:17:06.325>like,

373
00:17:06.865 --> 00:17:10.405
<00:17:06.865>say <00:17:07.020>if <00:17:07.176>the <00:17:07.331>API <00:17:07.487>returned <00:17:07.642>an <00:17:07.798>error, <00:17:07.953>you <00:17:08.109>can <00:17:08.265>do

374
00:17:10.405 --> 00:17:11.685
<00:17:10.405>that <00:17:10.693>directly <00:17:10.981>in <00:17:11.269>your <00:17:11.557>stories,

375
00:17:12.215 --> 00:17:13.725
<00:17:12.214>which <00:17:12.554>is <00:17:12.894>pretty <00:17:13.234>incredible, <00:17:13.573>right?

376
00:17:13.835 --> 00:17:16.365
<00:17:13.835>That <00:17:13.962>is <00:17:14.089>not <00:17:14.216>something <00:17:14.344>that <00:17:14.471>you <00:17:14.598>would <00:17:14.725>want <00:17:14.853>to <00:17:14.980>do <00:17:15.107>in <00:17:15.235>just

377
00:17:16.365 --> 00:17:19.565
<00:17:16.365>that <00:17:16.598>primitive <00:17:16.831>UI <00:17:17.065>component <00:17:17.298>library <00:17:17.531>use <00:17:17.765>case,

378
00:17:19.945 --> 00:17:22.165
<00:17:19.944>but <00:17:20.100>you <00:17:20.256>can <00:17:20.411>leverage <00:17:20.567>it <00:17:20.722>in <00:17:20.878>those <00:17:21.033>larger <00:17:21.189>web <00:17:21.345>apps.

379
00:17:24.265 --> 00:17:26.965
<00:17:24.265>In <00:17:24.440>addition <00:17:24.615>to <00:17:24.790>that, <00:17:24.965>if <00:17:25.140>your <00:17:25.315>component <00:17:25.490>is <00:17:25.665>interacting

380
00:17:26.965 --> 00:17:30.285
<00:17:26.964>with <00:17:27.120>some <00:17:27.276>kind <00:17:27.431>of <00:17:27.587>global <00:17:27.742>state, <00:17:27.898>you <00:17:28.053>can <00:17:28.209>also <00:17:28.365>replicate

381
00:17:30.285 --> 00:17:32.365
<00:17:30.285>that <00:17:30.565>in <00:17:30.845>your <00:17:31.125>stories <00:17:31.405>utilizing <00:17:31.685>decorators.

382
00:17:33.305 --> 00:17:36.925
<00:17:33.305>So <00:17:33.460>decorators <00:17:33.616>wrap <00:17:33.771>your <00:17:33.927>story <00:17:34.082>in <00:17:34.238>some <00:17:34.393>basically <00:17:34.549>like <00:17:34.705>extra

383
00:17:37.035 --> 00:17:40.365
<00:17:37.035>rendering <00:17:37.235>functionality <00:17:37.435>to <00:17:37.635>provide <00:17:37.835>it <00:17:38.035>some <00:17:38.235>more <00:17:38.435>context.

384
00:17:41.745 --> 00:17:45.565
<00:17:41.745>So <00:17:41.872>for <00:17:41.999>example <00:17:42.126>here <00:17:42.254>you <00:17:42.381>can <00:17:42.508>wrap <00:17:42.635>your <00:17:42.763>story <00:17:42.890>in <00:17:43.017>a <00:17:43.145>provider

385
00:17:45.635 --> 00:17:49.085
<00:17:45.635>with <00:17:45.810>a <00:17:45.985>mock <00:17:46.160>store, <00:17:46.335>pass <00:17:46.510>through <00:17:46.685>some <00:17:46.860>mock <00:17:47.035>state.

386
00:17:50.145 --> 00:17:52.845
<00:17:50.145>Um, <00:17:50.300>and <00:17:50.456>then <00:17:50.611>this <00:17:50.767>means <00:17:50.922>that <00:17:51.078>in <00:17:51.233>your <00:17:51.389>rendered <00:17:51.545>story

387
00:17:53.505 --> 00:17:58.445
<00:17:53.505>any <00:17:53.645>changes <00:17:53.785>to <00:17:53.925>the <00:17:54.065>actual <00:17:54.205>state <00:17:54.345>in <00:17:54.485>that <00:17:54.625>will <00:17:54.765>actually <00:17:54.905>like

388
00:17:58.965 --> 00:18:01.605
<00:17:58.965>interact <00:17:59.139>with <00:17:59.314>the <00:17:59.490>actual <00:17:59.665>state <00:17:59.840>in <00:18:00.014>the <00:18:00.189>actual <00:18:00.365>component

389
00:18:02.435 --> 00:18:04.245
<00:18:02.435>that <00:18:02.590>it <00:18:02.746>would <00:18:02.901>happen <00:18:03.057>in <00:18:03.212>the <00:18:03.368>real <00:18:03.523>world <00:18:03.679>as <00:18:03.835>well.

390
00:18:04.795 --> 00:18:07.125
<00:18:04.795>This <00:18:04.970>is <00:18:05.145>so <00:18:05.320>crucial <00:18:05.495>when <00:18:05.670>it <00:18:05.845>comes <00:18:06.020>to <00:18:06.195>testing,

391
00:18:07.335 --> 00:18:09.205
<00:18:07.335>which <00:18:07.490>I'm <00:18:07.646>gonna <00:18:07.801>go <00:18:07.957>over <00:18:08.112>in <00:18:08.268>a <00:18:08.423>minute <00:18:08.579>as <00:18:08.735>well.

392
00:18:09.305 --> 00:18:10.365
<00:18:09.305>So <00:18:09.782>just <00:18:10.259>remember

393
00:18:10.365 --> 00:18:13.005
<00:18:10.365>that <00:18:10.598>it's <00:18:10.831>actually <00:18:11.065>interacting <00:18:11.298>with <00:18:11.531>the <00:18:11.765>state.

394
00:18:13.005 --> 00:18:16.085
<00:18:13.005>You're <00:18:13.180>not <00:18:13.355>mocking <00:18:13.530>anything <00:18:13.705>like <00:18:13.880>further <00:18:14.055>down <00:18:14.230>the <00:18:14.405>tree.

395
00:18:18.575 --> 00:18:21.075
<00:18:18.575>You <00:18:18.775>can <00:18:18.975>even <00:18:19.175>code <00:18:19.375>these <00:18:19.575>interactions <00:18:19.775>into <00:18:19.975>your

396
00:18:21.075 --> 00:18:22.315
<00:18:21.075>stories <00:18:21.354>using <00:18:21.633>a <00:18:21.912>play <00:18:22.191>method.

397
00:18:22.495 --> 00:18:24.475
<00:18:22.495>So <00:18:22.669>if <00:18:22.844>I <00:18:23.020>loop <00:18:23.195>back <00:18:23.370>to <00:18:23.544>the <00:18:23.719>button <00:18:23.895>component

398
00:18:24.475 --> 00:18:27.315
<00:18:24.475>that <00:18:24.675>I <00:18:24.875>was <00:18:25.074>showing <00:18:25.274>earlier <00:18:25.475>here, <00:18:25.675>we're <00:18:25.875>trying

399
00:18:27.315 --> 00:18:29.795
<00:18:27.315>to <00:18:27.515>find <00:18:27.715>the <00:18:27.915>um <00:18:28.115>button <00:18:28.315>from <00:18:28.515>its <00:18:28.715>role

400
00:18:30.095 --> 00:18:32.035
<00:18:30.095>and <00:18:30.375>then <00:18:30.655>we're <00:18:30.935>actually <00:18:31.215>simulating <00:18:31.495>a

401
00:18:32.035 --> 00:18:33.555
<00:18:32.035>user <00:18:32.377>clicking <00:18:32.719>on <00:18:33.061>that <00:18:33.403>button.

402
00:18:34.865 --> 00:18:37.555
<00:18:34.865>This <00:18:35.145>is <00:18:35.425>really <00:18:35.705>handy <00:18:35.985>for <00:18:36.265>components

403
00:18:37.555 --> 00:18:40.995
<00:18:37.555>that <00:18:37.695>you <00:18:37.835>have <00:18:37.975>whose <00:18:38.115>UI <00:18:38.255>changes <00:18:38.395>based <00:18:38.535>on <00:18:38.675>a <00:18:38.815>user <00:18:38.955>interaction.

404
00:18:41.295 --> 00:18:44.875
<00:18:41.295>So <00:18:41.450>you <00:18:41.606>don't <00:18:41.761>just <00:18:41.917>want <00:18:42.072>like <00:18:42.228>initial <00:18:42.383>states <00:18:42.539>of <00:18:42.695>components.

405
00:18:45.415 --> 00:18:48.715
<00:18:45.415>You <00:18:45.555>also <00:18:45.695>wanna <00:18:45.835>have <00:18:45.975>stories <00:18:46.115>that <00:18:46.254>show <00:18:46.395>how <00:18:46.534>they <00:18:46.675>will <00:18:46.815>interact

406
00:18:48.745 --> 00:18:51.195
<00:18:48.745>with <00:18:48.900>a <00:18:49.056>user <00:18:49.211>and <00:18:49.367>what <00:18:49.522>that <00:18:49.678>UI <00:18:49.833>will <00:18:49.989>look <00:18:50.145>like.

407
00:18:53.535 --> 00:18:56.235
<00:18:53.535>So <00:18:53.690>from <00:18:53.846>just <00:18:54.001>those <00:18:54.157>few <00:18:54.312>extra <00:18:54.468>tools, <00:18:54.623>you <00:18:54.779>can <00:18:54.935>see

408
00:18:56.235 --> 00:19:00.395
<00:18:56.235>that <00:18:56.375>you <00:18:56.514>really <00:18:56.655>can <00:18:56.794>build <00:18:56.935>whole <00:18:57.074>entire <00:18:57.215>UIs <00:18:57.354>without <00:18:57.495>the <00:18:57.635>need

409
00:19:00.395 --> 00:19:01.715
<00:19:00.395>for <00:19:00.791>complex <00:19:01.187>dev <00:19:01.582>stacks

410
00:19:02.295 --> 00:19:06.065
<00:19:02.295>and <00:19:02.422>you <00:19:02.549>can <00:19:02.676>easily <00:19:02.804>work <00:19:02.931>in <00:19:03.058>parallel <00:19:03.185>on <00:19:03.313>your <00:19:03.440>team <00:19:03.567>whilst <00:19:03.695>you

411
00:19:06.305 --> 00:19:07.985
<00:19:06.305>separate <00:19:06.538>what <00:19:06.771>each <00:19:07.005>of <00:19:07.238>you're <00:19:07.471>working <00:19:07.705>on.

412
00:19:09.045 --> 00:19:10.505
<00:19:09.045>But <00:19:09.307>of <00:19:09.570>course <00:19:09.833>a <00:19:10.096>crucial <00:19:10.359>part

413
00:19:10.565 --> 00:19:14.145
<00:19:10.565>to <00:19:10.740>building <00:19:10.915>these <00:19:11.090>UIs <00:19:11.265>in <00:19:11.440>isolation <00:19:11.615>is <00:19:11.790>engineers <00:19:11.965>having

414
00:19:14.205 --> 00:19:15.625
<00:19:14.205>access <00:19:14.630>to <00:19:15.057>the <00:19:15.483>designs

415
00:19:16.045 --> 00:19:17.585
<00:19:16.045>and <00:19:16.507>designers <00:19:16.969>having <00:19:17.431>access

416
00:19:17.585 --> 00:19:19.785
<00:19:17.585>to <00:19:17.818>those <00:19:18.051>production <00:19:18.285>built <00:19:18.518>components <00:19:18.751>as <00:19:18.985>well.

417
00:19:20.525 --> 00:19:23.425
<00:19:20.525>And <00:19:20.680>this <00:19:20.836>can <00:19:20.991>be <00:19:21.147>done <00:19:21.302>with <00:19:21.458>storybooks <00:19:21.613>integration <00:19:21.769>with <00:19:21.925>Figma.

418
00:19:25.075 --> 00:19:28.055
<00:19:25.075>So <00:19:25.250>you <00:19:25.425>can <00:19:25.600>embed <00:19:25.775>storybook <00:19:25.950>in <00:19:26.125>your <00:19:26.300>Figma <00:19:26.475>using,

419
00:19:28.055 --> 00:19:29.895
<00:19:28.055>there's <00:19:28.405>a <00:19:28.755>Figma <00:19:29.105>storybook <00:19:29.455>plugin

420
00:19:29.995 --> 00:19:32.815
<00:19:29.995>but <00:19:30.169>also <00:19:30.344>the <00:19:30.520>other <00:19:30.695>way <00:19:30.870>round <00:19:31.044>you <00:19:31.219>can <00:19:31.395>um,

421
00:19:34.075 --> 00:19:38.375
<00:19:34.075>you <00:19:34.230>can <00:19:34.386>link <00:19:34.541>the <00:19:34.697>Figma <00:19:34.852>into <00:19:35.008>your <00:19:35.163>storybook <00:19:35.319>via <00:19:35.475>a

422
00:19:38.375 --> 00:19:39.455
<00:19:38.375>storybook <00:19:38.860>add-on <00:19:39.347>that.

423
00:19:39.595 --> 00:19:41.375
<00:19:39.595>Um, <00:19:40.295>storybook <00:19:40.995>offers.

424
00:19:42.075 --> 00:19:45.495
<00:19:42.075>So <00:19:42.250>a <00:19:42.425>key <00:19:42.600>strength <00:19:42.775>of <00:19:42.950>storybook <00:19:43.125>is <00:19:43.300>its <00:19:43.475>extensibility

425
00:19:45.955 --> 00:19:48.895
<00:19:45.955>and <00:19:46.110>the <00:19:46.266>ability <00:19:46.421>to <00:19:46.577>really <00:19:46.732>customize <00:19:46.888>it <00:19:47.043>to <00:19:47.199>the <00:19:47.355>workflow

426
00:19:48.895 --> 00:19:53.015
<00:19:48.895>that <00:19:49.128>you <00:19:49.361>have <00:19:49.595>using <00:19:49.828>the <00:19:50.061>design <00:19:50.295>Add-on

427
00:19:53.085 --> 00:19:56.775
<00:19:53.085>that <00:19:53.260>I'm <00:19:53.435>importing <00:19:53.610>in <00:19:53.785>the <00:19:53.960>main <00:19:54.135>storybook <00:19:54.310>config <00:19:54.485>file.

428
00:19:57.445 --> 00:20:01.295
<00:19:57.445>Then <00:19:57.600>in <00:19:57.756>your <00:19:57.911>component <00:19:58.067>story <00:19:58.222>file <00:19:58.378>using <00:19:58.533>the <00:19:58.689>parameters <00:19:58.845>which

429
00:20:01.335 --> 00:20:03.575
<00:20:01.335>I <00:20:01.535>mentioned <00:20:01.735>earlier, <00:20:01.935>you <00:20:02.135>just <00:20:02.335>add <00:20:02.535>an <00:20:02.735>entry

430
00:20:03.725 --> 00:20:04.775
<00:20:03.725>into <00:20:04.040>the <00:20:04.355>design <00:20:04.670>key.

431
00:20:04.955 --> 00:20:07.335
<00:20:04.955>You're <00:20:05.110>saying <00:20:05.266>this <00:20:05.421>is <00:20:05.577>a <00:20:05.732>Figma <00:20:05.888>file, <00:20:06.043>I <00:20:06.199>know <00:20:06.355>it

432
00:20:07.635 --> 00:20:12.015
<00:20:07.635>and <00:20:07.751>here's <00:20:07.868>the <00:20:07.985>URL <00:20:08.101>and <00:20:08.218>to <00:20:08.335>that <00:20:08.451>this <00:20:08.568>is <00:20:08.685>what <00:20:08.801>it <00:20:08.918>looks <00:20:09.035>like.

433
00:20:12.515 --> 00:20:14.335
<00:20:12.515>The <00:20:12.715>up <00:20:12.915>is <00:20:13.115>your <00:20:13.315>component <00:20:13.515>that <00:20:13.715>you've <00:20:13.915>written

434
00:20:14.635 --> 00:20:17.295
<00:20:14.635>and <00:20:14.810>the <00:20:14.985>bottom <00:20:15.160>is <00:20:15.335>your <00:20:15.510>Figma <00:20:15.685>design <00:20:15.860>directly <00:20:16.035>there.

435
00:20:17.955 --> 00:20:19.935
<00:20:17.955>So <00:20:18.188>you <00:20:18.421>can <00:20:18.655>view <00:20:18.888>your <00:20:19.121>Figma <00:20:19.355>designs

436
00:20:20.455 --> 00:20:21.975
<00:20:20.455>directly <00:20:20.910>alongside <00:20:21.367>your <00:20:21.822>component,

437
00:20:22.795 --> 00:20:25.495
<00:20:22.795>but <00:20:22.950>let's <00:20:23.106>not <00:20:23.261>forget <00:20:23.417>that <00:20:23.572>you <00:20:23.728>can <00:20:23.883>actually <00:20:24.039>create <00:20:24.195>stories

438
00:20:25.555 --> 00:20:28.855
<00:20:25.555>of <00:20:25.695>whole <00:20:25.835>pages <00:20:25.975>or <00:20:26.115>whole <00:20:26.255>sections <00:20:26.395>of <00:20:26.535>a <00:20:26.675>page <00:20:26.815>as <00:20:26.955>well.

439
00:20:29.555 --> 00:20:32.575
<00:20:29.555>So <00:20:29.695>this <00:20:29.835>means <00:20:29.975>that <00:20:30.115>you <00:20:30.255>can <00:20:30.395>truly <00:20:30.535>just <00:20:30.675>build <00:20:30.815>designs <00:20:30.955>in

440
00:20:32.575 --> 00:20:36.215
<00:20:32.575>isolation, <00:20:32.775>share <00:20:32.975>your <00:20:33.175>storybook <00:20:33.375>instance <00:20:33.575>URL <00:20:33.775>with <00:20:33.975>product

441
00:20:36.355 --> 00:20:39.255
<00:20:36.355>and <00:20:36.555>design <00:20:36.755>and <00:20:36.955>get <00:20:37.155>that <00:20:37.355>feedback <00:20:37.555>earlier <00:20:37.755>on

442
00:20:39.675 --> 00:20:41.295
<00:20:39.675>and <00:20:39.955>they <00:20:40.235>can <00:20:40.514>compare <00:20:40.794>it <00:20:41.075>directly

443
00:20:41.295 --> 00:20:42.495
<00:20:41.295>with <00:20:41.511>the <00:20:41.727>design <00:20:41.943>they <00:20:42.158>gave <00:20:42.375>you.

444
00:20:44.595 --> 00:20:46.855
<00:20:44.595>So <00:20:44.770>you <00:20:44.945>can <00:20:45.120>see <00:20:45.295>from <00:20:45.470>all <00:20:45.645>of <00:20:45.820>these <00:20:45.995>integrations

445
00:20:46.855 --> 00:20:48.965
<00:20:46.855>that <00:20:47.088>this <00:20:47.321>really <00:20:47.555>helps <00:20:47.788>to <00:20:48.021>prevent <00:20:48.255>code

446
00:20:48.965 --> 00:20:52.245
<00:20:48.965>and <00:20:49.198>design <00:20:49.431>inconsistencies <00:20:49.665>from <00:20:49.898>developing <00:20:50.131>when <00:20:50.365>building

447
00:20:52.605 --> 00:20:56.005
<00:20:52.605>software <00:20:52.760>at <00:20:52.916>scale <00:20:53.071>because <00:20:53.227>we <00:20:53.382>are <00:20:53.538>providing <00:20:53.693>almost <00:20:53.849>like <00:20:54.005>a

448
00:20:56.005 --> 00:20:57.845
<00:20:56.005>rule <00:20:56.285>book <00:20:56.565>to <00:20:56.845>say <00:20:57.125>this <00:20:57.405>is

449
00:20:57.845 --> 00:20:59.845
<00:20:57.845>how <00:20:58.078>we <00:20:58.311>expect <00:20:58.545>these <00:20:58.778>components <00:20:59.011>to <00:20:59.245>act.

450
00:21:00.465 --> 00:21:04.365
<00:21:00.465>Um, <00:21:00.592>this <00:21:00.719>is <00:21:00.846>the <00:21:00.974>variations <00:21:01.101>we <00:21:01.228>have <00:21:01.355>to <00:21:01.483>today <00:21:01.610>in <00:21:01.737>our <00:21:01.865>code

451
00:21:04.785 --> 00:21:06.125
<00:21:04.785>and <00:21:04.986>this <00:21:05.187>is <00:21:05.388>what <00:21:05.589>you <00:21:05.790>can <00:21:05.991>use.

452
00:21:07.525 --> 00:21:10.325
<00:21:07.525>Designers <00:21:07.758>could <00:21:07.991>even <00:21:08.225>use <00:21:08.458>the <00:21:08.691>generated <00:21:08.925>storybook

453
00:21:10.325 --> 00:21:11.845
<00:21:10.325>as <00:21:10.667>a <00:21:11.009>tool <00:21:11.351>for <00:21:11.693>prototyping.

454
00:21:12.505 --> 00:21:13.845
<00:21:12.505>So <00:21:12.806>they <00:21:13.108>would <00:21:13.409>be <00:21:13.711>encouraged

455
00:21:13.845 --> 00:21:17.165
<00:21:13.845>to <00:21:14.045>leverage <00:21:14.245>existing <00:21:14.445>components <00:21:14.645>rather <00:21:14.845>than <00:21:15.045>creating <00:21:15.245>new

456
00:21:17.215 --> 00:21:19.405
<00:21:17.215>variations <00:21:17.564>when <00:21:17.915>there's <00:21:18.264>something <00:21:18.615>actually

457
00:21:19.405 --> 00:21:22.245
<00:21:19.405>that's <00:21:19.580>pretty <00:21:19.754>similar, <00:21:19.930>which <00:21:20.105>they <00:21:20.280>could <00:21:20.455>just <00:21:20.629>use <00:21:20.805>that.

458
00:21:22.705 --> 00:21:25.485
<00:21:22.705>But <00:21:22.845>today <00:21:22.985>there's <00:21:23.125>no <00:21:23.264>visual <00:21:23.405>thing <00:21:23.544>for <00:21:23.685>them <00:21:23.824>to <00:21:23.965>look <00:21:24.105>at

459
00:21:25.705 --> 00:21:27.485
<00:21:25.705>unless <00:21:25.938>it's <00:21:26.171>a <00:21:26.405>component <00:21:26.638>from <00:21:26.871>a <00:21:27.105>library.

460
00:21:29.985 --> 00:21:31.285
<00:21:29.985>But <00:21:30.277>honestly <00:21:30.570>in <00:21:30.862>my <00:21:31.155>opinion,

461
00:21:31.385 --> 00:21:34.765
<00:21:31.385>the <00:21:31.618>coolest <00:21:31.851>thing <00:21:32.085>about <00:21:32.318>stories <00:21:32.551>um, <00:21:32.785>is

462
00:21:34.765 --> 00:21:36.685
<00:21:34.765>that <00:21:35.045>you <00:21:35.325>can <00:21:35.605>actually <00:21:35.885>import <00:21:36.165>them

463
00:21:36.745 --> 00:21:39.285
<00:21:36.745>and <00:21:36.945>test <00:21:37.145>them <00:21:37.344>directly <00:21:37.544>using <00:21:37.745>React <00:21:37.945>testing <00:21:38.145>library

464
00:21:40.265 --> 00:21:41.635
<00:21:40.265>for <00:21:40.676>UI <00:21:41.087>driven <00:21:41.498>testing.

465
00:21:42.375 --> 00:21:45.235
<00:21:42.375>So <00:21:42.530>here's <00:21:42.686>an <00:21:42.841>example <00:21:42.997>again <00:21:43.152>going <00:21:43.308>back <00:21:43.463>to <00:21:43.619>the <00:21:43.775>button,

466
00:21:45.975 --> 00:21:48.195
<00:21:45.975>we <00:21:46.175>are <00:21:46.375>importing <00:21:46.574>all <00:21:46.774>of <00:21:46.975>the <00:21:47.175>button <00:21:47.375>stories.

467
00:21:48.615 --> 00:21:50.595
<00:21:48.615>We <00:21:48.895>are <00:21:49.175>also <00:21:49.455>importing <00:21:49.735>composed <00:21:50.015>stories

468
00:21:50.595 --> 00:21:51.915
<00:21:50.595>method <00:21:51.189>from <00:21:51.783>storybook.

469
00:21:52.615 --> 00:21:53.995
<00:21:52.615>Um, <00:21:52.925>we're <00:21:53.235>passing <00:21:53.546>those <00:21:53.857>through

470
00:21:53.995 --> 00:21:55.355
<00:21:53.995>and <00:21:54.239>then <00:21:54.484>extracting <00:21:54.729>out <00:21:54.974>the <00:21:55.219>names

471
00:21:55.735 --> 00:21:58.235
<00:21:55.735>and <00:21:55.909>then <00:21:56.084>you <00:21:56.260>just <00:21:56.435>write <00:21:56.610>all <00:21:56.784>your <00:21:56.959>normal <00:21:57.135>react

472
00:21:58.235 --> 00:21:59.275
<00:21:58.235>testing <00:21:58.703>library <00:21:59.171>code.

473
00:21:59.855 --> 00:22:03.395
<00:21:59.855>We <00:22:00.030>are <00:22:00.205>rendering <00:22:00.380>the <00:22:00.555>stories <00:22:00.730>directly <00:22:00.905>here, <00:22:01.080>which <00:22:01.255>means

474
00:22:03.395 --> 00:22:05.475
<00:22:03.395>that <00:22:03.595>all <00:22:03.795>of <00:22:03.995>the <00:22:04.195>setup <00:22:04.395>for <00:22:04.595>different <00:22:04.795>states

475
00:22:05.695 --> 00:22:09.035
<00:22:05.695>how <00:22:05.850>stuff's <00:22:06.006>interacting <00:22:06.161>APIs, <00:22:06.317>like <00:22:06.472>it's <00:22:06.628>all <00:22:06.783>handled <00:22:06.939>for <00:22:07.095>you,

476
00:22:09.335 --> 00:22:10.875
<00:22:09.335>you <00:22:09.508>don't <00:22:09.681>need <00:22:09.854>to <00:22:10.028>worry <00:22:10.201>about <00:22:10.374>any <00:22:10.547>of <00:22:10.721>it.

477
00:22:11.465 --> 00:22:13.355
<00:22:11.465>This <00:22:11.745>is <00:22:12.024>so <00:22:12.304>incredible <00:22:12.584>for <00:22:12.865>Velocity

478
00:22:13.385 --> 00:22:16.275
<00:22:13.385>because <00:22:13.735>you're <00:22:14.085>combining <00:22:14.435>code <00:22:14.785>documentation,

479
00:22:16.415 --> 00:22:20.835
<00:22:16.415>visual <00:22:16.590>documentation <00:22:16.764>and <00:22:16.940>testing <00:22:17.115>all <00:22:17.290>in <00:22:17.465>the <00:22:17.639>same <00:22:17.815>setup.

480
00:22:22.125 --> 00:22:23.265
<00:22:22.125>And <00:22:22.467>there's <00:22:22.809>even <00:22:23.151>more

481
00:22:23.265 --> 00:22:26.505
<00:22:23.265>because <00:22:23.465>you <00:22:23.665>can <00:22:23.865>also <00:22:24.065>do <00:22:24.265>visual <00:22:24.465>regression <00:22:24.665>testing.

482
00:22:27.685 --> 00:22:30.465
<00:22:27.685>So <00:22:27.885>a <00:22:28.085>company <00:22:28.284>called <00:22:28.485>Chromatic <00:22:28.685>actually <00:22:28.885>owns <00:22:29.085>Storybook,

483
00:22:30.825 --> 00:22:32.705
<00:22:30.825>I <00:22:31.000>dunno <00:22:31.175>if <00:22:31.350>any <00:22:31.525>of <00:22:31.700>you're <00:22:31.875>familiar <00:22:32.050>with <00:22:32.225>Chromatic,

484
00:22:32.845 --> 00:22:35.305
<00:22:32.845>but <00:22:33.020>they <00:22:33.195>are <00:22:33.370>a <00:22:33.545>visual <00:22:33.720>testing <00:22:33.895>and <00:22:34.070>review <00:22:34.245>tool.

485
00:22:35.615 --> 00:22:38.425
<00:22:35.615>They <00:22:35.815>basically <00:22:36.015>grab <00:22:36.215>all <00:22:36.415>of <00:22:36.615>your <00:22:36.815>UIs, <00:22:37.015>um,

486
00:22:38.605 --> 00:22:40.225
<00:22:38.605>across <00:22:39.071>many <00:22:39.538>different <00:22:40.005>browsers

487
00:22:40.325 --> 00:22:43.185
<00:22:40.325>and <00:22:40.525>will <00:22:40.725>flag <00:22:40.925>any <00:22:41.125>visual <00:22:41.325>changes <00:22:41.525>to <00:22:41.725>you.

488
00:22:43.825 --> 00:22:45.265
<00:22:43.825>Particularly <00:22:44.473>it <00:22:45.121>helps

489
00:22:45.285 --> 00:22:47.905
<00:22:45.285>to <00:22:45.518>detect <00:22:45.751>UI <00:22:45.985>regression <00:22:46.218>regressions <00:22:46.451>in <00:22:46.685>ci

490
00:22:48.565 --> 00:22:51.505
<00:22:48.565>so <00:22:48.845>it <00:22:49.125>compares <00:22:49.405>um, <00:22:49.685>your <00:22:49.965>stories

491
00:22:51.505 --> 00:22:53.705
<00:22:51.505>that <00:22:51.680>are <00:22:51.855>being <00:22:52.030>built <00:22:52.205>compared <00:22:52.380>to <00:22:52.555>your <00:22:52.730>production <00:22:52.905>stories.

492
00:22:54.765 --> 00:22:56.425
<00:22:54.765>But <00:22:54.940>we <00:22:55.115>don't <00:22:55.290>have <00:22:55.465>time <00:22:55.640>to <00:22:55.815>wait <00:22:55.990>for <00:22:56.165>ci.

493
00:22:56.965 --> 00:22:58.665
<00:22:56.965>So <00:22:57.165>they've <00:22:57.365>actually <00:22:57.564>brought <00:22:57.764>it <00:22:57.965>to <00:22:58.165>us <00:22:58.365>locally.

494
00:22:59.365 --> 00:23:01.465
<00:22:59.365>So <00:22:59.715>via <00:23:00.065>another <00:23:00.415>storybook <00:23:00.765>add-on.

495
00:23:02.085 --> 00:23:03.785
<00:23:02.085>So <00:23:02.285>this <00:23:02.485>is <00:23:02.685>the <00:23:02.885>tweet <00:23:03.085>that <00:23:03.285>they <00:23:03.485>shared.

496
00:23:03.925 --> 00:23:05.985
<00:23:03.925>It <00:23:04.125>was <00:23:04.325>in <00:23:04.524>N <00:23:04.725>November <00:23:04.925>just <00:23:05.125>last <00:23:05.325>year.

497
00:23:06.805 --> 00:23:09.145
<00:23:06.805>And <00:23:07.005>basically <00:23:07.205>you <00:23:07.405>can <00:23:07.605>build <00:23:07.805>your <00:23:08.005>components <00:23:08.205>locally

498
00:23:09.805 --> 00:23:12.225
<00:23:09.805>and <00:23:09.980>run <00:23:10.155>your <00:23:10.330>visual <00:23:10.505>tests <00:23:10.680>as <00:23:10.855>you <00:23:11.030>are <00:23:11.205>developing

499
00:23:12.685 --> 00:23:16.305
<00:23:12.685>and <00:23:12.860>you <00:23:13.034>get <00:23:13.210>warned <00:23:13.385>immediately <00:23:13.560>if <00:23:13.735>components <00:23:13.909>don't <00:23:14.085>look

500
00:23:16.305 --> 00:23:19.465
<00:23:16.305>right <00:23:16.445>without <00:23:16.585>having <00:23:16.725>to <00:23:16.865>wait <00:23:17.005>for <00:23:17.145>that <00:23:17.285>feedback <00:23:17.425>loop <00:23:17.565>from <00:23:17.705>ci,

501
00:23:20.165 --> 00:23:24.905
<00:23:20.165>you <00:23:20.305>can <00:23:20.445>also <00:23:20.585>then <00:23:20.725>approve <00:23:20.865>or <00:23:21.004>reject <00:23:21.145>um, <00:23:21.284>the <00:23:21.425>changes <00:23:21.565>locally

502
00:23:25.085 --> 00:23:26.225
<00:23:25.085>and <00:23:25.290>that <00:23:25.495>will <00:23:25.700>get <00:23:25.905>pushed <00:23:26.110>up

503
00:23:26.225 --> 00:23:28.865
<00:23:26.225>to <00:23:26.504>your <00:23:26.784>chromatic <00:23:27.064>live <00:23:27.344>production <00:23:27.625>instance.

504
00:23:30.845 --> 00:23:34.065
<00:23:30.845>So <00:23:30.985>the <00:23:31.125>test <00:23:31.265>coverage <00:23:31.405>provided <00:23:31.545>by <00:23:31.685>storybook <00:23:31.825>is <00:23:31.965>huge <00:23:32.105>as <00:23:32.245>well.

505
00:23:34.605 --> 00:23:36.705
<00:23:34.605>It <00:23:34.805>supports <00:23:35.005>so <00:23:35.205>many <00:23:35.405>different <00:23:35.605>kinds <00:23:35.805>of <00:23:36.005>tests.

506
00:23:36.845 --> 00:23:39.825
<00:23:36.845>You <00:23:37.000>have <00:23:37.156>visual <00:23:37.311>accessibility, <00:23:37.467>which <00:23:37.622>I <00:23:37.778>didn't <00:23:37.933>go <00:23:38.089>over <00:23:38.245>today

507
00:23:39.825 --> 00:23:41.705
<00:23:39.825>but <00:23:39.980>that <00:23:40.136>is <00:23:40.291>an <00:23:40.447>incredible <00:23:40.602>part <00:23:40.758>of <00:23:40.913>it <00:23:41.069>as <00:23:41.225>well.

508
00:23:42.535 --> 00:23:44.745
<00:23:42.535>Interaction <00:23:42.885>tests <00:23:43.235>and <00:23:43.585>snapshot <00:23:43.935>tests.

509
00:23:46.985 --> 00:23:50.165
<00:23:46.985>So <00:23:47.140>now <00:23:47.296>that <00:23:47.451>you <00:23:47.607>have <00:23:47.762>your <00:23:47.918>components <00:23:48.073>managed <00:23:48.229>via <00:23:48.385>storybook,

510
00:23:51.205 --> 00:23:53.845
<00:23:51.205>identifying <00:23:51.405>those <00:23:51.605>duplicative <00:23:51.804>efforts <00:23:52.004>is <00:23:52.205>so <00:23:52.405>much <00:23:52.605>easier,

511
00:23:54.335 --> 00:23:56.365
<00:23:54.335>especially <00:23:54.801>across <00:23:55.268>your <00:23:55.735>applications.

512
00:23:57.545 --> 00:24:00.085
<00:23:57.545>You <00:23:57.700>might <00:23:57.856>even <00:23:58.011>realize <00:23:58.167>that <00:23:58.322>you <00:23:58.478>can <00:23:58.633>actually <00:23:58.789>support <00:23:58.945>cross

513
00:24:00.085 --> 00:24:03.565
<00:24:00.085>project <00:24:00.285>integration <00:24:00.485>by <00:24:00.685>creating <00:24:00.885>your <00:24:01.085>own <00:24:01.285>shared <00:24:01.485>library

514
00:24:04.065 --> 00:24:06.005
<00:24:04.065>or <00:24:04.298>even <00:24:04.531>adding <00:24:04.765>to <00:24:04.998>an <00:24:05.231>existing <00:24:05.465>one.

515
00:24:06.825 --> 00:24:08.245
<00:24:06.825>You <00:24:07.144>can <00:24:07.464>now <00:24:07.783>easily <00:24:08.102>drag

516
00:24:08.245 --> 00:24:11.685
<00:24:08.245>and <00:24:08.524>drop <00:24:08.804>your <00:24:09.084>well-documented <00:24:09.364>well-tested <00:24:09.645>reusable

517
00:24:11.685 --> 00:24:13.525
<00:24:11.685>components <00:24:12.151>into <00:24:12.618>a <00:24:13.085>library

518
00:24:13.955 --> 00:24:16.605
<00:24:13.955>because <00:24:14.129>you've <00:24:14.304>already <00:24:14.480>done <00:24:14.655>90% <00:24:14.830>of <00:24:15.004>the <00:24:15.179>heavy <00:24:15.355>lifting

519
00:24:19.745 --> 00:24:22.965
<00:24:19.745>As <00:24:19.885>a <00:24:20.024>bonus <00:24:20.165>storybook <00:24:20.304>has <00:24:20.445>loads <00:24:20.584>of <00:24:20.725>other <00:24:20.864>add-ons <00:24:21.004>as <00:24:21.145>well

520
00:24:22.965 --> 00:24:24.765
<00:24:22.965>that <00:24:23.120>I <00:24:23.276>did <00:24:23.431>not <00:24:23.587>have <00:24:23.742>time <00:24:23.898>to <00:24:24.053>go <00:24:24.209>through <00:24:24.365>today.

521
00:24:25.265 --> 00:24:28.125
<00:24:25.265>Um, <00:24:25.420>but <00:24:25.576>I <00:24:25.731>wanted <00:24:25.887>to <00:24:26.042>mention <00:24:26.198>a <00:24:26.353>couple <00:24:26.509>more <00:24:26.665>specifically.

522
00:24:28.445 --> 00:24:31.125
<00:24:28.445>I <00:24:28.645>already <00:24:28.845>mentioned <00:24:29.044>accessibility <00:24:29.245>on <00:24:29.445>the <00:24:29.645>testing <00:24:29.845>side.

523
00:24:31.265 --> 00:24:34.285
<00:24:31.265>Um, <00:24:31.392>but <00:24:31.519>that <00:24:31.646>is <00:24:31.774>a <00:24:31.901>really, <00:24:32.028>really <00:24:32.155>good <00:24:32.283>add-on <00:24:32.410>to <00:24:32.537>look <00:24:32.665>into

524
00:24:35.025 --> 00:24:36.165
<00:24:35.025>the <00:24:35.281>add-ons <00:24:35.538>are <00:24:35.794>both <00:24:36.051>core

525
00:24:36.185 --> 00:24:38.325
<00:24:36.185>and <00:24:36.360>community <00:24:36.534>driven, <00:24:36.710>so <00:24:36.885>if <00:24:37.060>you <00:24:37.235>wanna <00:24:37.409>get <00:24:37.585>involved,

526
00:24:38.555 --> 00:24:39.845
<00:24:38.555>they're <00:24:38.787>open <00:24:39.019>to <00:24:39.251>that <00:24:39.483>as <00:24:39.716>well.

527
00:24:40.545 --> 00:24:44.925
<00:24:40.545>Um, <00:24:40.685>and <00:24:40.825>also <00:24:40.965>if <00:24:41.105>you <00:24:41.245>are <00:24:41.385>using <00:24:41.525>next <00:24:41.665>JS <00:24:41.805>storybook <00:24:41.945>integrates

528
00:24:44.935 --> 00:24:46.685
<00:24:44.935>incredibly <00:24:45.284>well <00:24:45.635>with <00:24:45.985>next <00:24:46.335>js.

529
00:24:46.785 --> 00:24:50.165
<00:24:46.785>You <00:24:46.940>can <00:24:47.096>compose <00:24:47.251>and <00:24:47.407>test <00:24:47.562>whole <00:24:47.718>pages. <00:24:47.873>It's <00:24:48.029>really <00:24:48.185>neat.

530
00:24:51.545 --> 00:24:53.965
<00:24:51.545>So <00:24:51.778>Storybook <00:24:52.011>is <00:24:52.245>a <00:24:52.478>very <00:24:52.711>powerful <00:24:52.945>tool

531
00:24:53.965 --> 00:24:55.485
<00:24:53.965>for <00:24:54.307>building <00:24:54.649>complex <00:24:54.991>web <00:24:55.332>apps

532
00:24:55.745 --> 00:24:57.605
<00:24:55.745>and <00:24:55.978>it's <00:24:56.211>not <00:24:56.445>to <00:24:56.678>be <00:24:56.911>cast <00:24:57.145>aside

533
00:24:57.665 --> 00:25:00.965
<00:24:57.665>to <00:24:57.840>only <00:24:58.014>use <00:24:58.190>when <00:24:58.365>building <00:24:58.540>component <00:24:58.715>libraries <00:24:58.889>in <00:24:59.065>isolation.

534
00:25:01.845 --> 00:25:02.885
<00:25:01.845>I <00:25:02.001>hope <00:25:02.157>you <00:25:02.313>give <00:25:02.469>it <00:25:02.625>a <00:25:02.781>try

535
00:25:02.885 --> 00:25:06.005
<00:25:02.885>and <00:25:03.040>see <00:25:03.196>if <00:25:03.351>yourself, <00:25:03.507>I <00:25:03.662>promise <00:25:03.818>this <00:25:03.973>isn't <00:25:04.129>an <00:25:04.285>ad,

536
00:25:06.205 --> 00:25:07.405
<00:25:06.205>I <00:25:06.420>just <00:25:06.637>really <00:25:06.853>love <00:25:07.069>the <00:25:07.284>tool

537
00:25:07.465 --> 00:25:09.605
<00:25:07.465>and <00:25:07.639>I <00:25:07.814>think <00:25:07.990>that <00:25:08.165>the <00:25:08.340>value <00:25:08.514>add <00:25:08.689>it's <00:25:08.865>brought

538
00:25:09.605 --> 00:25:10.845
<00:25:09.605>to <00:25:09.977>me <00:25:10.349>is <00:25:10.721>priceless.

539
00:25:11.825 --> 00:25:13.845
<00:25:11.825>So <00:25:12.000>thank <00:25:12.175>you <00:25:12.350>very <00:25:12.525>much. <00:25:12.700>These <00:25:12.875>are <00:25:13.050>my <00:25:13.225>contacts.

540
00:25:13.985 --> 00:25:16.605
<00:25:13.985>If <00:25:14.125>you <00:25:14.264>want <00:25:14.405>to <00:25:14.544>chat <00:25:14.685>more <00:25:14.824>about <00:25:14.965>anything <00:25:15.104>I've <00:25:15.245>spoken <00:25:15.385>about

541
00:25:16.605 --> 00:25:17.725
<00:25:16.605>today, <00:25:16.941>please <00:25:17.277>reach <00:25:17.612>out.

542
00:25:18.365 --> 00:25:19.885
<00:25:18.365>I <00:25:18.560>don't <00:25:18.755>use <00:25:18.951>Twitter <00:25:19.146>as <00:25:19.342>much <00:25:19.537>these <00:25:19.733>days

543
00:25:19.945 --> 00:25:21.485
<00:25:19.945>for <00:25:20.143>reasons <00:25:20.341>I <00:25:20.539>probably <00:25:20.736>don't <00:25:20.935>need <00:25:21.132>to <00:25:21.331>say,

544
00:25:21.585 --> 00:25:23.005
<00:25:21.585>but <00:25:21.840>I <00:25:22.096>am <00:25:22.351>still <00:25:22.607>on <00:25:22.863>there.

545
00:25:23.385 --> 00:25:25.325
<00:25:23.385>Um, <00:25:23.585>but <00:25:23.785>otherwise <00:25:23.985>connect <00:25:24.185>with <00:25:24.385>me <00:25:24.585>on <00:25:24.785>LinkedIn

546
00:25:25.325 --> 00:25:27.605
<00:25:25.325>or <00:25:25.465>drop <00:25:25.605>me <00:25:25.745>an <00:25:25.885>email <00:25:26.025>or <00:25:26.165>I'm <00:25:26.305>about <00:25:26.445>the <00:25:26.585>conference <00:25:26.725>today

547
00:25:27.605 --> 00:25:28.645
<00:25:27.605>and <00:25:27.917>tomorrow <00:25:28.229>as <00:25:28.541>well.

548
00:25:28.815 --> 00:25:29.285
<00:25:28.815>Thank <00:25:29.238>you.