WEBVTT Kind: captions Language: en 00:00:00.000 --> 00:00:01.950 align:start position:0% Welcome<00:00:00.440> everyone<00:00:00.800> to<00:00:00.920> our<00:00:01.040> talk.<00:00:01.440> I<00:00:01.560> am<00:00:01.760> Alan 00:00:01.950 --> 00:00:01.960 align:start position:0% Welcome everyone to our talk. I am Alan 00:00:01.960 --> 00:00:04.030 align:start position:0% Welcome everyone to our talk. I am Alan Diper.<00:00:02.360> This<00:00:02.520> is<00:00:02.600> my<00:00:03.040> long-time<00:00:03.480> friend<00:00:03.840> and 00:00:04.030 --> 00:00:04.040 align:start position:0% Diper. This is my long-time friend and 00:00:04.040 --> 00:00:06.750 align:start position:0% Diper. This is my long-time friend and open<00:00:04.400> source<00:00:04.680> collaborator<00:00:05.080> Misha<00:00:05.320> Niskin. 00:00:06.750 --> 00:00:06.760 align:start position:0% open source collaborator Misha Niskin. 00:00:06.760 --> 00:00:08.990 align:start position:0% open source collaborator Misha Niskin. Uh<00:00:07.040> we're<00:00:07.200> here<00:00:07.520> to 00:00:08.990 --> 00:00:09.000 align:start position:0% Uh we're here to 00:00:09.000 --> 00:00:12.550 align:start position:0% Uh we're here to uh<00:00:10.160> give<00:00:10.400> a<00:00:10.440> short<00:00:10.960> a<00:00:11.000> short<00:00:11.240> talk<00:00:11.480> about<00:00:12.400> kind 00:00:12.550 --> 00:00:12.560 align:start position:0% uh give a short a short talk about kind 00:00:12.560 --> 00:00:14.310 align:start position:0% uh give a short a short talk about kind of<00:00:12.640> the<00:00:12.680> dark<00:00:13.040> arts.<00:00:13.680> Maybe<00:00:13.920> some<00:00:14.040> of<00:00:14.160> you<00:00:14.200> have 00:00:14.310 --> 00:00:14.320 align:start position:0% of the dark arts. Maybe some of you have 00:00:14.320 --> 00:00:16.510 align:start position:0% of the dark arts. Maybe some of you have seen<00:00:14.720> Army<00:00:14.960> of<00:00:15.040> Darkness.<00:00:16.080> Familiar<00:00:16.320> with<00:00:16.440> the 00:00:16.510 --> 00:00:16.520 align:start position:0% seen Army of Darkness. Familiar with the 00:00:16.520 --> 00:00:19.070 align:start position:0% seen Army of Darkness. Familiar with the book,<00:00:17.320> the<00:00:17.400> Necronomicon? 00:00:19.070 --> 00:00:19.080 align:start position:0% book, the Necronomicon? 00:00:19.080 --> 00:00:20.790 align:start position:0% book, the Necronomicon? Um 00:00:20.790 --> 00:00:20.800 align:start position:0% Um 00:00:20.800 --> 00:00:22.030 align:start position:0% Um No,<00:00:21.200> we're<00:00:21.400> actually<00:00:21.640> not<00:00:21.760> going<00:00:21.880> to<00:00:21.920> talk 00:00:22.030 --> 00:00:22.040 align:start position:0% No, we're actually not going to talk 00:00:22.040 --> 00:00:22.910 align:start position:0% No, we're actually not going to talk about<00:00:22.200> these<00:00:22.320> kinds<00:00:22.480> of<00:00:22.560> things.<00:00:22.720> We're<00:00:22.800> going 00:00:22.910 --> 00:00:22.920 align:start position:0% about these kinds of things. We're going 00:00:22.920 --> 00:00:24.150 align:start position:0% about these kinds of things. We're going to<00:00:22.960> talk<00:00:23.040> about<00:00:23.200> computers.<00:00:23.720> In<00:00:23.800> particular, 00:00:24.150 --> 00:00:24.160 align:start position:0% to talk about computers. In particular, 00:00:24.160 --> 00:00:25.750 align:start position:0% to talk about computers. In particular, we're<00:00:24.240> going<00:00:24.360> to<00:00:24.400> talk<00:00:24.600> about<00:00:25.360> web 00:00:25.750 --> 00:00:25.760 align:start position:0% we're going to talk about web 00:00:25.760 --> 00:00:28.070 align:start position:0% we're going to talk about web application<00:00:26.320> programming.<00:00:27.080> So,<00:00:27.880> there<00:00:28.000> have 00:00:28.070 --> 00:00:28.080 align:start position:0% application programming. So, there have 00:00:28.080 --> 00:00:30.190 align:start position:0% application programming. So, there have been<00:00:28.680> uh<00:00:28.840> more<00:00:29.040> than<00:00:29.160> a<00:00:29.200> handful<00:00:29.600> of<00:00:29.800> of<00:00:29.960> talks 00:00:30.190 --> 00:00:30.200 align:start position:0% been uh more than a handful of of talks 00:00:30.200 --> 00:00:32.749 align:start position:0% been uh more than a handful of of talks about<00:00:30.400> this<00:00:30.520> topic.<00:00:31.160> We're<00:00:31.320> just<00:00:32.080> uh 00:00:32.749 --> 00:00:32.759 align:start position:0% about this topic. We're just uh 00:00:32.759 --> 00:00:36.830 align:start position:0% about this topic. We're just uh another<00:00:33.120> way<00:00:33.280> to<00:00:33.400> make<00:00:33.600> web<00:00:33.800> pages.<00:00:34.720> So,<00:00:35.720> uh 00:00:36.830 --> 00:00:36.840 align:start position:0% another way to make web pages. So, uh 00:00:36.840 --> 00:00:40.990 align:start position:0% another way to make web pages. So, uh advance<00:00:37.160> me<00:00:37.280> there. 00:00:40.990 --> 00:00:41.000 align:start position:0% 00:00:41.000 --> 00:00:43.070 align:start position:0% Cool.<00:00:41.440> There's<00:00:41.720> our 00:00:43.070 --> 00:00:43.080 align:start position:0% Cool. There's our 00:00:43.080 --> 00:00:44.550 align:start position:0% Cool. There's our info.<00:00:43.480> If<00:00:43.600> you'd<00:00:43.720> like<00:00:43.880> to<00:00:43.960> pull<00:00:44.160> up<00:00:44.320> any<00:00:44.440> of 00:00:44.550 --> 00:00:44.560 align:start position:0% info. If you'd like to pull up any of 00:00:44.560 --> 00:00:46.350 align:start position:0% info. If you'd like to pull up any of our<00:00:44.640> information<00:00:45.040> right<00:00:45.160> now,<00:00:45.280> hoplon.io<00:00:46.240> is 00:00:46.350 --> 00:00:46.360 align:start position:0% our information right now, hoplon.io is 00:00:46.360 --> 00:00:48.590 align:start position:0% our information right now, hoplon.io is the<00:00:46.400> place<00:00:46.600> to<00:00:46.720> go<00:00:46.800> to<00:00:46.920> learn. 00:00:48.590 --> 00:00:48.600 align:start position:0% the place to go to learn. 00:00:48.600 --> 00:00:49.430 align:start position:0% the place to go to learn. Why<00:00:48.840> are<00:00:48.920> we<00:00:49.000> interested<00:00:49.320> in<00:00:49.360> the 00:00:49.430 --> 00:00:49.440 align:start position:0% Why are we interested in the 00:00:49.440 --> 00:00:52.910 align:start position:0% Why are we interested in the Necronomicon?<00:00:50.160> Dark<00:00:50.480> spells,<00:00:51.480> evil<00:00:51.760> magics 00:00:52.910 --> 00:00:52.920 align:start position:0% Necronomicon? Dark spells, evil magics 00:00:52.920 --> 00:00:54.790 align:start position:0% Necronomicon? Dark spells, evil magics with<00:00:53.040> the<00:00:53.120> CK<00:00:53.840> ending. 00:00:54.790 --> 00:00:54.800 align:start position:0% with the CK ending. 00:00:54.800 --> 00:00:56.070 align:start position:0% with the CK ending. Um 00:00:56.070 --> 00:00:56.080 align:start position:0% Um 00:00:56.080 --> 00:00:58.510 align:start position:0% Um Well,<00:00:56.880> as<00:00:57.320> web<00:00:57.560> application<00:00:58.000> programmers, 00:00:58.510 --> 00:00:58.520 align:start position:0% Well, as web application programmers, 00:00:58.520 --> 00:01:00.790 align:start position:0% Well, as web application programmers, we're<00:00:58.640> looking<00:00:58.920> at<00:00:59.120> an<00:00:59.240> increasingly<00:00:59.800> hostile 00:01:00.790 --> 00:01:00.800 align:start position:0% we're looking at an increasingly hostile 00:01:00.800 --> 00:01:02.510 align:start position:0% we're looking at an increasingly hostile platform<00:01:01.240> space.<00:01:01.640> By<00:01:01.800> hostile,<00:01:02.120> I<00:01:02.160> mean<00:01:02.360> more 00:01:02.510 --> 00:01:02.520 align:start position:0% platform space. By hostile, I mean more 00:01:02.520 --> 00:01:04.509 align:start position:0% platform space. By hostile, I mean more complicated.<00:01:03.640> All<00:01:03.840> kinds<00:01:04.080> of<00:01:04.120> different 00:01:04.509 --> 00:01:04.519 align:start position:0% complicated. All kinds of different 00:01:04.519 --> 00:01:05.990 align:start position:0% complicated. All kinds of different deployment<00:01:04.960> targets<00:01:05.280> now.<00:01:05.560> It<00:01:05.640> used<00:01:05.840> to<00:01:05.880> be 00:01:05.990 --> 00:01:06.000 align:start position:0% deployment targets now. It used to be 00:01:06.000 --> 00:01:09.510 align:start position:0% deployment targets now. It used to be just,<00:01:06.560> you<00:01:06.640> know,<00:01:07.560> IE<00:01:07.880> 5.5<00:01:08.640> on<00:01:08.760> Windows<00:01:09.040> XP<00:01:09.400> and 00:01:09.510 --> 00:01:09.520 align:start position:0% just, you know, IE 5.5 on Windows XP and 00:01:09.520 --> 00:01:10.830 align:start position:0% just, you know, IE 5.5 on Windows XP and it<00:01:09.600> was<00:01:09.720> good.<00:01:10.160> Now<00:01:10.440> it's,<00:01:10.600> you<00:01:10.720> know,<00:01:10.800> it 00:01:10.830 --> 00:01:10.840 align:start position:0% it was good. Now it's, you know, it 00:01:10.840 --> 00:01:13.350 align:start position:0% it was good. Now it's, you know, it needs<00:01:11.000> to<00:01:11.040> work<00:01:11.240> on<00:01:11.360> Chrome<00:01:11.600> 33,<00:01:12.080> Firefox<00:01:12.560> 25, 00:01:13.350 --> 00:01:13.360 align:start position:0% needs to work on Chrome 33, Firefox 25, 00:01:13.360 --> 00:01:15.550 align:start position:0% needs to work on Chrome 33, Firefox 25, WebKit<00:01:14.040> 2.whatever. 00:01:15.550 --> 00:01:15.560 align:start position:0% WebKit 2.whatever. 00:01:15.560 --> 00:01:17.310 align:start position:0% WebKit 2.whatever. So,<00:01:15.800> we're<00:01:15.960> in<00:01:16.280> uh<00:01:16.320> facing<00:01:16.640> a<00:01:16.960> a<00:01:17.000> wall<00:01:17.240> of 00:01:17.310 --> 00:01:17.320 align:start position:0% So, we're in uh facing a a wall of 00:01:17.320 --> 00:01:19.190 align:start position:0% So, we're in uh facing a a wall of complexity<00:01:17.800> when<00:01:17.920> it<00:01:18.000> comes<00:01:18.240> to<00:01:18.680> platforms 00:01:19.190 --> 00:01:19.200 align:start position:0% complexity when it comes to platforms 00:01:19.200 --> 00:01:22.350 align:start position:0% complexity when it comes to platforms we're<00:01:19.320> expected<00:01:19.800> to<00:01:19.880> deliver<00:01:20.240> to. 00:01:22.350 --> 00:01:22.360 align:start position:0% we're expected to deliver to. 00:01:22.360 --> 00:01:24.470 align:start position:0% we're expected to deliver to. Um<00:01:22.960> we're<00:01:23.120> bad<00:01:23.360> at<00:01:23.440> estimating<00:01:24.040> how<00:01:24.200> long<00:01:24.400> it 00:01:24.470 --> 00:01:24.480 align:start position:0% Um we're bad at estimating how long it 00:01:24.480 --> 00:01:26.430 align:start position:0% Um we're bad at estimating how long it will<00:01:24.600> take<00:01:25.040> to<00:01:25.160> build<00:01:25.400> any<00:01:25.560> given<00:01:25.880> application 00:01:26.430 --> 00:01:26.440 align:start position:0% will take to build any given application 00:01:26.440 --> 00:01:28.430 align:start position:0% will take to build any given application to<00:01:26.560> target<00:01:27.080> any<00:01:27.280> particular<00:01:28.000> set<00:01:28.320> of 00:01:28.430 --> 00:01:28.440 align:start position:0% to target any particular set of 00:01:28.440 --> 00:01:31.830 align:start position:0% to target any particular set of platforms.<00:01:29.440> I<00:01:29.600> guess<00:01:30.200> by<00:01:30.360> we,<00:01:30.640> I<00:01:30.720> just<00:01:30.920> mean<00:01:31.400> me 00:01:31.830 --> 00:01:31.840 align:start position:0% platforms. I guess by we, I just mean me 00:01:31.840 --> 00:01:34.150 align:start position:0% platforms. I guess by we, I just mean me and<00:01:32.240> and<00:01:32.400> Misha.<00:01:32.920> He's<00:01:33.120> worse<00:01:33.280> than<00:01:33.440> I<00:01:33.520> am. 00:01:34.150 --> 00:01:34.160 align:start position:0% and and Misha. He's worse than I am. 00:01:34.160 --> 00:01:36.430 align:start position:0% and and Misha. He's worse than I am. But,<00:01:34.400> we're<00:01:34.520> both<00:01:34.720> pretty<00:01:34.920> bad<00:01:35.200> at<00:01:35.360> it.<00:01:35.960> And 00:01:36.430 --> 00:01:36.440 align:start position:0% But, we're both pretty bad at it. And 00:01:36.440 --> 00:01:38.550 align:start position:0% But, we're both pretty bad at it. And honestly,<00:01:36.880> I<00:01:37.320> even<00:01:37.520> the<00:01:37.600> best<00:01:37.960> developers, 00:01:38.550 --> 00:01:38.560 align:start position:0% honestly, I even the best developers, 00:01:38.560 --> 00:01:40.110 align:start position:0% honestly, I even the best developers, programmers<00:01:39.040> I've<00:01:39.200> ever<00:01:39.400> met<00:01:39.680> are<00:01:39.800> usually 00:01:40.110 --> 00:01:40.120 align:start position:0% programmers I've ever met are usually 00:01:40.120 --> 00:01:42.070 align:start position:0% programmers I've ever met are usually off<00:01:40.360> by<00:01:40.880> an<00:01:41.000> order<00:01:41.160> of<00:01:41.240> magnitude.<00:01:41.840> Maybe 00:01:42.070 --> 00:01:42.080 align:start position:0% off by an order of magnitude. Maybe 00:01:42.080 --> 00:01:44.350 align:start position:0% off by an order of magnitude. Maybe maybe<00:01:42.360> maybe<00:01:42.840> three<00:01:43.080> to<00:01:43.160> four<00:01:43.360> times. 00:01:44.350 --> 00:01:44.360 align:start position:0% maybe maybe three to four times. 00:01:44.360 --> 00:01:46.270 align:start position:0% maybe maybe three to four times. Not<00:01:44.560> quite<00:01:44.760> order<00:01:44.960> of<00:01:45.000> magnitude,<00:01:45.440> but<00:01:46.040> very 00:01:46.270 --> 00:01:46.280 align:start position:0% Not quite order of magnitude, but very 00:01:46.280 --> 00:01:47.310 align:start position:0% Not quite order of magnitude, but very few<00:01:46.440> people<00:01:46.720> are<00:01:46.840> really<00:01:47.080> good<00:01:47.240> at 00:01:47.310 --> 00:01:47.320 align:start position:0% few people are really good at 00:01:47.320 --> 00:01:49.230 align:start position:0% few people are really good at estimating.<00:01:47.960> Even<00:01:48.240> even<00:01:48.400> the<00:01:48.480> best<00:01:48.720> of<00:01:48.840> us. 00:01:49.230 --> 00:01:49.240 align:start position:0% estimating. Even even the best of us. 00:01:49.240 --> 00:01:52.030 align:start position:0% estimating. Even even the best of us. So,<00:01:49.400> this<00:01:49.560> is<00:01:49.960> kind<00:01:50.120> of<00:01:50.200> scary.<00:01:50.800> We<00:01:51.560> don't<00:01:51.840> know 00:01:52.030 --> 00:01:52.040 align:start position:0% So, this is kind of scary. We don't know 00:01:52.040 --> 00:01:53.470 align:start position:0% So, this is kind of scary. We don't know how<00:01:52.200> long<00:01:52.440> anything<00:01:52.800> we<00:01:52.920> do<00:01:53.080> will<00:01:53.200> take. 00:01:53.470 --> 00:01:53.480 align:start position:0% how long anything we do will take. 00:01:53.480 --> 00:01:56.830 align:start position:0% how long anything we do will take. That's<00:01:53.720> weird.<00:01:54.360> Why<00:01:54.480> do<00:01:54.560> people<00:01:54.760> hire<00:01:55.000> us? 00:01:56.830 --> 00:01:56.840 align:start position:0% That's weird. Why do people hire us? 00:01:56.840 --> 00:01:57.870 align:start position:0% That's weird. Why do people hire us? Um 00:01:57.870 --> 00:01:57.880 align:start position:0% Um 00:01:57.880 --> 00:02:00.190 align:start position:0% Um once<00:01:58.160> we<00:01:58.280> do<00:01:58.520> have<00:01:58.680> something<00:01:58.960> figured<00:01:59.280> out, 00:02:00.190 --> 00:02:00.200 align:start position:0% once we do have something figured out, 00:02:00.200 --> 00:02:01.870 align:start position:0% once we do have something figured out, like<00:02:00.920> we're<00:02:01.080> happy<00:02:01.320> with<00:02:01.440> something,<00:02:01.720> we've 00:02:01.870 --> 00:02:01.880 align:start position:0% like we're happy with something, we've 00:02:01.880 --> 00:02:03.430 align:start position:0% like we're happy with something, we've shipped<00:02:02.160> it.<00:02:02.320> Oh<00:02:02.440> yeah,<00:02:02.680> we<00:02:02.840> shipped<00:02:03.040> the<00:02:03.160> app, 00:02:03.430 --> 00:02:03.440 align:start position:0% shipped it. Oh yeah, we shipped the app, 00:02:03.440 --> 00:02:06.230 align:start position:0% shipped it. Oh yeah, we shipped the app, works<00:02:03.680> great,<00:02:03.960> Android<00:02:04.320> 4.5.<00:02:05.160> Awesome.<00:02:06.120> You 00:02:06.230 --> 00:02:06.240 align:start position:0% works great, Android 4.5. Awesome. You 00:02:06.240 --> 00:02:07.910 align:start position:0% works great, Android 4.5. Awesome. You know,<00:02:06.360> snowball<00:02:06.760> or<00:02:06.840> whatever<00:02:07.080> it's<00:02:07.200> called. 00:02:07.910 --> 00:02:07.920 align:start position:0% know, snowball or whatever it's called. 00:02:07.920 --> 00:02:09.870 align:start position:0% know, snowball or whatever it's called. Snow<00:02:08.200> ice<00:02:08.399> cream.<00:02:08.800> Ice<00:02:08.960> cream. 00:02:09.870 --> 00:02:09.880 align:start position:0% Snow ice cream. Ice cream. 00:02:09.880 --> 00:02:10.749 align:start position:0% Snow ice cream. Ice cream. Um 00:02:10.749 --> 00:02:10.759 align:start position:0% Um 00:02:10.759 --> 00:02:12.030 align:start position:0% Um but<00:02:10.840> then<00:02:11.240> the<00:02:11.320> next<00:02:11.520> day<00:02:11.600> somebody<00:02:11.880> says, 00:02:12.030 --> 00:02:12.040 align:start position:0% but then the next day somebody says, 00:02:12.040 --> 00:02:14.230 align:start position:0% but then the next day somebody says, "Hey,<00:02:12.160> does<00:02:12.320> it<00:02:12.400> work<00:02:12.600> on<00:02:12.760> iOS?" 00:02:14.230 --> 00:02:14.240 align:start position:0% "Hey, does it work on iOS?" 00:02:14.240 --> 00:02:15.870 align:start position:0% "Hey, does it work on iOS?" It<00:02:14.520> should.<00:02:14.920> I<00:02:14.959> mean,<00:02:15.200> you<00:02:15.280> know,<00:02:15.400> one's<00:02:15.640> web 00:02:15.870 --> 00:02:15.880 align:start position:0% It should. I mean, you know, one's web 00:02:15.880 --> 00:02:16.949 align:start position:0% It should. I mean, you know, one's web kit,<00:02:16.120> the<00:02:16.200> other<00:02:16.320> they're<00:02:16.440> both<00:02:16.600> sort<00:02:16.760> of<00:02:16.800> web 00:02:16.949 --> 00:02:16.959 align:start position:0% kit, the other they're both sort of web 00:02:16.959 --> 00:02:18.150 align:start position:0% kit, the other they're both sort of web kit<00:02:17.120> based,<00:02:17.320> should<00:02:17.480> work.<00:02:17.720> But<00:02:17.800> of<00:02:17.880> course<00:02:18.040> it 00:02:18.150 --> 00:02:18.160 align:start position:0% kit based, should work. But of course it 00:02:18.160 --> 00:02:20.430 align:start position:0% kit based, should work. But of course it doesn't<00:02:18.600> because,<00:02:18.959> you<00:02:19.040> know,<00:02:19.680> one<00:02:19.920> is<00:02:20.360> a 00:02:20.430 --> 00:02:20.440 align:start position:0% doesn't because, you know, one is a 00:02:20.440 --> 00:02:22.949 align:start position:0% doesn't because, you know, one is a different<00:02:21.040> aspect<00:02:21.480> ratio<00:02:21.840> or<00:02:21.959> whatever.<00:02:22.920> So 00:02:22.949 --> 00:02:22.959 align:start position:0% different aspect ratio or whatever. So 00:02:22.959 --> 00:02:24.949 align:start position:0% different aspect ratio or whatever. So now<00:02:23.160> we're<00:02:23.560> facing<00:02:23.880> again<00:02:24.160> this<00:02:24.400> this<00:02:24.600> wall<00:02:24.880> of 00:02:24.949 --> 00:02:24.959 align:start position:0% now we're facing again this this wall of 00:02:24.959 --> 00:02:26.430 align:start position:0% now we're facing again this this wall of complexity<00:02:25.480> and<00:02:25.600> we 00:02:26.430 --> 00:02:26.440 align:start position:0% complexity and we 00:02:26.440 --> 00:02:27.870 align:start position:0% complexity and we are<00:02:26.560> not<00:02:26.760> able<00:02:26.920> to<00:02:27.000> estimate<00:02:27.440> how<00:02:27.600> long<00:02:27.800> it 00:02:27.870 --> 00:02:27.880 align:start position:0% are not able to estimate how long it 00:02:27.880 --> 00:02:29.870 align:start position:0% are not able to estimate how long it would<00:02:28.000> take<00:02:28.320> to<00:02:28.440> port<00:02:28.680> one<00:02:28.880> app<00:02:29.120> to<00:02:29.880> a 00:02:29.870 --> 00:02:29.880 align:start position:0% would take to port one app to a 00:02:29.880 --> 00:02:32.430 align:start position:0% would take to port one app to a different<00:02:30.120> platform. 00:02:32.430 --> 00:02:32.440 align:start position:0% different platform. 00:02:32.440 --> 00:02:33.949 align:start position:0% different platform. So<00:02:32.760> all<00:02:32.959> of<00:02:33.000> these<00:02:33.160> battles<00:02:33.520> are<00:02:33.760> you<00:02:33.840> would 00:02:33.949 --> 00:02:33.959 align:start position:0% So all of these battles are you would 00:02:33.959 --> 00:02:35.870 align:start position:0% So all of these battles are you would think<00:02:34.120> are<00:02:34.280> easy<00:02:34.520> ones<00:02:34.760> to<00:02:34.880> fight.<00:02:35.200> Like<00:02:35.800> I 00:02:35.870 --> 00:02:35.880 align:start position:0% think are easy ones to fight. Like I 00:02:35.880 --> 00:02:37.190 align:start position:0% think are easy ones to fight. Like I have<00:02:36.000> an<00:02:36.080> existing<00:02:36.480> app,<00:02:36.680> I<00:02:36.760> need<00:02:36.920> to<00:02:37.000> get<00:02:37.120> it 00:02:37.190 --> 00:02:37.200 align:start position:0% have an existing app, I need to get it 00:02:37.200 --> 00:02:38.190 align:start position:0% have an existing app, I need to get it to<00:02:37.240> work<00:02:37.440> on<00:02:37.520> a<00:02:37.600> slightly<00:02:37.959> different 00:02:38.190 --> 00:02:38.200 align:start position:0% to work on a slightly different 00:02:38.200 --> 00:02:39.550 align:start position:0% to work on a slightly different platform.<00:02:38.680> No,<00:02:38.920> it's<00:02:39.040> not<00:02:39.240> easy,<00:02:39.440> it's 00:02:39.550 --> 00:02:39.560 align:start position:0% platform. No, it's not easy, it's 00:02:39.560 --> 00:02:42.230 align:start position:0% platform. No, it's not easy, it's incredibly<00:02:39.959> hard.<00:02:40.480> And<00:02:40.920> um 00:02:42.230 --> 00:02:42.240 align:start position:0% incredibly hard. And um 00:02:42.240 --> 00:02:43.430 align:start position:0% incredibly hard. And um to<00:02:42.280> solve<00:02:42.520> this<00:02:42.600> problem<00:02:42.880> we<00:02:42.959> need<00:02:43.120> to<00:02:43.240> look 00:02:43.430 --> 00:02:43.440 align:start position:0% to solve this problem we need to look 00:02:43.440 --> 00:02:44.990 align:start position:0% to solve this problem we need to look towards<00:02:44.080> the<00:02:44.160> dark<00:02:44.440> arts,<00:02:44.840> dead 00:02:44.990 --> 00:02:45.000 align:start position:0% towards the dark arts, dead 00:02:45.000 --> 00:02:47.390 align:start position:0% towards the dark arts, dead technologies.<00:02:45.840> Spreadsheets<00:02:46.480> are<00:02:47.120> one<00:02:47.320> of 00:02:47.390 --> 00:02:47.400 align:start position:0% technologies. Spreadsheets are one of 00:02:47.400 --> 00:02:49.150 align:start position:0% technologies. Spreadsheets are one of those<00:02:47.760> technologies. 00:02:49.150 --> 00:02:49.160 align:start position:0% those technologies. 00:02:49.160 --> 00:02:51.150 align:start position:0% those technologies. Um 00:02:51.150 --> 00:02:51.160 align:start position:0% Um 00:02:51.160 --> 00:02:52.590 align:start position:0% Um spreadsheets<00:02:51.600> are<00:02:51.680> not<00:02:51.800> just<00:02:51.959> notorious,<00:02:52.480> I'd 00:02:52.590 --> 00:02:52.600 align:start position:0% spreadsheets are not just notorious, I'd 00:02:52.600 --> 00:02:54.590 align:start position:0% spreadsheets are not just notorious, I'd say<00:02:52.720> spreadsheets<00:02:53.240> are<00:02:53.400> infamous.<00:02:54.360> I<00:02:54.440> mean, 00:02:54.590 --> 00:02:54.600 align:start position:0% say spreadsheets are infamous. I mean, 00:02:54.600 --> 00:02:56.230 align:start position:0% say spreadsheets are infamous. I mean, these<00:02:54.800> are 00:02:56.230 --> 00:02:56.240 align:start position:0% these are 00:02:56.240 --> 00:02:57.150 align:start position:0% these are We've<00:02:56.320> all<00:02:56.440> had<00:02:56.560> experiences<00:02:57.040> with 00:02:57.150 --> 00:02:57.160 align:start position:0% We've all had experiences with 00:02:57.160 --> 00:02:58.750 align:start position:0% We've all had experiences with spreadsheets.<00:02:57.920> Um 00:02:58.750 --> 00:02:58.760 align:start position:0% spreadsheets. Um 00:02:58.760 --> 00:03:00.590 align:start position:0% spreadsheets. Um they've<00:02:58.920> been<00:02:59.040> around<00:02:59.400> forever.<00:02:59.800> We<00:02:59.920> kind<00:03:00.120> of 00:03:00.590 --> 00:03:00.600 align:start position:0% they've been around forever. We kind of 00:03:00.600 --> 00:03:02.670 align:start position:0% they've been around forever. We kind of count<00:03:00.840> on<00:03:00.959> them<00:03:01.160> as<00:03:01.560> or<00:03:01.680> we<00:03:01.959> we<00:03:02.239> see<00:03:02.440> them<00:03:02.560> as 00:03:02.670 --> 00:03:02.680 align:start position:0% count on them as or we we see them as 00:03:02.680 --> 00:03:04.910 align:start position:0% count on them as or we we see them as just<00:03:02.800> a<00:03:02.880> part<00:03:03.040> of<00:03:03.120> the<00:03:03.160> computing<00:03:03.560> landscape. 00:03:04.910 --> 00:03:04.920 align:start position:0% just a part of the computing landscape. 00:03:04.920 --> 00:03:06.470 align:start position:0% just a part of the computing landscape. Um<00:03:05.040> this<00:03:05.200> is<00:03:05.320> an<00:03:05.400> example<00:03:05.760> of<00:03:05.840> VisiCalc<00:03:06.320> from 00:03:06.470 --> 00:03:06.480 align:start position:0% Um this is an example of VisiCalc from 00:03:06.480 --> 00:03:08.550 align:start position:0% Um this is an example of VisiCalc from 1979.<00:03:07.280> This<00:03:07.440> was<00:03:07.640> the<00:03:07.760> killer<00:03:08.080> app<00:03:08.320> for<00:03:08.440> the 00:03:08.550 --> 00:03:08.560 align:start position:0% 1979. This was the killer app for the 00:03:08.560 --> 00:03:09.790 align:start position:0% 1979. This was the killer app for the Apple<00:03:08.800> II. 00:03:09.790 --> 00:03:09.800 align:start position:0% Apple II. 00:03:09.800 --> 00:03:11.509 align:start position:0% Apple II. Um 00:03:11.509 --> 00:03:11.519 align:start position:0% Um 00:03:11.519 --> 00:03:12.949 align:start position:0% Um so that's<00:03:11.920> what<00:03:12.080> a<00:03:12.120> spreadsheet<00:03:12.519> looked<00:03:12.680> like 00:03:12.949 --> 00:03:12.959 align:start position:0% so that's what a spreadsheet looked like 00:03:12.959 --> 00:03:15.430 align:start position:0% so that's what a spreadsheet looked like in<00:03:13.440> 1979. 00:03:15.430 --> 00:03:15.440 align:start position:0% in 1979. 00:03:15.440 --> 00:03:17.430 align:start position:0% in 1979. This<00:03:15.600> is<00:03:15.760> what<00:03:15.959> the<00:03:16.040> spreadsheet<00:03:16.560> looks<00:03:16.800> in 00:03:17.430 --> 00:03:17.440 align:start position:0% This is what the spreadsheet looks in 00:03:17.440 --> 00:03:19.270 align:start position:0% This is what the spreadsheet looks in 2014. 00:03:19.270 --> 00:03:19.280 align:start position:0% 2014. 00:03:19.280 --> 00:03:20.430 align:start position:0% 2014. Uh 00:03:20.430 --> 00:03:20.440 align:start position:0% Uh 00:03:20.440 --> 00:03:23.790 align:start position:0% Uh what<00:03:20.760> Anybody<00:03:21.080> notice<00:03:21.360> anything? 00:03:23.790 --> 00:03:23.800 align:start position:0% what Anybody notice anything? 00:03:23.800 --> 00:03:24.550 align:start position:0% what Anybody notice anything? Yeah. 00:03:24.550 --> 00:03:24.560 align:start position:0% Yeah. 00:03:24.560 --> 00:03:26.310 align:start position:0% Yeah. The<00:03:24.640> colors<00:03:25.000> changed<00:03:25.320> a<00:03:25.400> little.<00:03:26.080> What<00:03:26.200> does 00:03:26.310 --> 00:03:26.320 align:start position:0% The colors changed a little. What does 00:03:26.320 --> 00:03:28.350 align:start position:0% The colors changed a little. What does this<00:03:26.480> look<00:03:26.680> like<00:03:26.800> though?<00:03:27.239> Hit<00:03:27.360> us,<00:03:27.480> Misha. 00:03:28.350 --> 00:03:28.360 align:start position:0% this look like though? Hit us, Misha. 00:03:28.360 --> 00:03:29.949 align:start position:0% this look like though? Hit us, Misha. Patrick<00:03:28.640> Stewart. 00:03:29.949 --> 00:03:29.959 align:start position:0% Patrick Stewart. 00:03:29.959 --> 00:03:32.590 align:start position:0% Patrick Stewart. Patrick<00:03:30.280> Stewart<00:03:30.560> has<00:03:30.720> not<00:03:30.920> aged. 00:03:32.590 --> 00:03:32.600 align:start position:0% Patrick Stewart has not aged. 00:03:32.600 --> 00:03:33.870 align:start position:0% Patrick Stewart has not aged. Neither<00:03:32.840> have<00:03:33.000> spreadsheets.<00:03:33.600> They're<00:03:33.760> the 00:03:33.870 --> 00:03:33.880 align:start position:0% Neither have spreadsheets. They're the 00:03:33.880 --> 00:03:36.070 align:start position:0% Neither have spreadsheets. They're the same<00:03:34.200> thing.<00:03:34.680> They<00:03:34.800> have<00:03:34.959> been<00:03:35.160> forever.<00:03:35.920> For 00:03:36.070 --> 00:03:36.080 align:start position:0% same thing. They have been forever. For 00:03:36.080 --> 00:03:37.509 align:start position:0% same thing. They have been forever. For all<00:03:36.200> times,<00:03:36.600> Patrick<00:03:36.920> Stewart<00:03:37.200> has<00:03:37.320> been 00:03:37.509 --> 00:03:37.519 align:start position:0% all times, Patrick Stewart has been 00:03:37.519 --> 00:03:39.110 align:start position:0% all times, Patrick Stewart has been Patrick<00:03:37.840> Stewart<00:03:38.440> and<00:03:38.560> spreadsheets<00:03:39.000> have 00:03:39.110 --> 00:03:39.120 align:start position:0% Patrick Stewart and spreadsheets have 00:03:39.120 --> 00:03:41.150 align:start position:0% Patrick Stewart and spreadsheets have been<00:03:39.239> spreadsheets. 00:03:41.150 --> 00:03:41.160 align:start position:0% been spreadsheets. 00:03:41.160 --> 00:03:42.750 align:start position:0% been spreadsheets. Like<00:03:41.440> Patrick<00:03:41.760> Stewart,<00:03:42.280> spreadsheets<00:03:42.680> are 00:03:42.750 --> 00:03:42.760 align:start position:0% Like Patrick Stewart, spreadsheets are 00:03:42.760 --> 00:03:45.390 align:start position:0% Like Patrick Stewart, spreadsheets are amazing.<00:03:43.680> They're<00:03:43.800> an<00:03:43.880> amazing<00:03:44.160> technology. 00:03:45.390 --> 00:03:45.400 align:start position:0% amazing. They're an amazing technology. 00:03:45.400 --> 00:03:46.790 align:start position:0% amazing. They're an amazing technology. To the<00:03:45.480> extent<00:03:45.800> that 00:03:46.790 --> 00:03:46.800 align:start position:0% To the extent that 00:03:46.800 --> 00:03:49.030 align:start position:0% To the extent that Patrick<00:03:47.080> Stewart<00:03:47.360> is<00:03:47.480> a<00:03:47.519> technology. 00:03:49.030 --> 00:03:49.040 align:start position:0% Patrick Stewart is a technology. 00:03:49.040 --> 00:03:50.229 align:start position:0% Patrick Stewart is a technology. Should<00:03:49.120> have<00:03:49.200> thought<00:03:49.360> about<00:03:49.519> that<00:03:49.640> slide. 00:03:50.229 --> 00:03:50.239 align:start position:0% Should have thought about that slide. 00:03:50.239 --> 00:03:51.750 align:start position:0% Should have thought about that slide. But<00:03:50.360> they're<00:03:50.480> both<00:03:50.680> amazing. 00:03:51.750 --> 00:03:51.760 align:start position:0% But they're both amazing. 00:03:51.760 --> 00:03:53.070 align:start position:0% But they're both amazing. Um 00:03:53.070 --> 00:03:53.080 align:start position:0% Um 00:03:53.080 --> 00:03:54.430 align:start position:0% Um unlike<00:03:53.440> Patrick<00:03:53.800> Stewart,<00:03:54.160> a<00:03:54.200> lot<00:03:54.360> of 00:03:54.430 --> 00:03:54.440 align:start position:0% unlike Patrick Stewart, a lot of 00:03:54.440 --> 00:03:56.910 align:start position:0% unlike Patrick Stewart, a lot of programmers<00:03:54.920> don't<00:03:55.120> like<00:03:55.280> spreadsheets. 00:03:56.910 --> 00:03:56.920 align:start position:0% programmers don't like spreadsheets. 00:03:56.920 --> 00:03:58.310 align:start position:0% programmers don't like spreadsheets. Uh<00:03:57.440> I<00:03:57.480> don't<00:03:57.640> know<00:03:57.720> what<00:03:57.880> it<00:03:58.000> is.<00:03:58.160> You<00:03:58.240> know, 00:03:58.310 --> 00:03:58.320 align:start position:0% Uh I don't know what it is. You know, 00:03:58.320 --> 00:03:59.990 align:start position:0% Uh I don't know what it is. You know, they<00:03:58.440> have<00:03:58.600> a<00:03:58.640> long<00:03:58.920> time<00:03:59.120> association<00:03:59.800> with 00:03:59.990 --> 00:04:00.000 align:start position:0% they have a long time association with 00:04:00.000 --> 00:04:02.950 align:start position:0% they have a long time association with Windows<00:04:00.840> and<00:04:00.960> sort<00:04:01.120> of<00:04:01.280> business<00:04:02.080> stuff<00:04:02.680> that 00:04:02.950 --> 00:04:02.960 align:start position:0% Windows and sort of business stuff that 00:04:02.960 --> 00:04:04.790 align:start position:0% Windows and sort of business stuff that seems<00:04:03.280> stupid. 00:04:04.790 --> 00:04:04.800 align:start position:0% seems stupid. 00:04:04.800 --> 00:04:06.510 align:start position:0% seems stupid. So,<00:04:04.880> we<00:04:04.960> disparage<00:04:05.480> them<00:04:05.640> openly.<00:04:06.120> I<00:04:06.200> mean, 00:04:06.510 --> 00:04:06.520 align:start position:0% So, we disparage them openly. I mean, 00:04:06.520 --> 00:04:08.630 align:start position:0% So, we disparage them openly. I mean, it's<00:04:07.080> I<00:04:07.160> honestly<00:04:07.560> I<00:04:07.720> it's<00:04:08.000> rare<00:04:08.280> that<00:04:08.400> you<00:04:08.480> run 00:04:08.630 --> 00:04:08.640 align:start position:0% it's I honestly I it's rare that you run 00:04:08.640 --> 00:04:10.110 align:start position:0% it's I honestly I it's rare that you run into<00:04:08.800> a<00:04:08.840> programmer<00:04:09.160> who's<00:04:09.240> like,<00:04:09.840> "Dude,<00:04:10.040> I'm 00:04:10.110 --> 00:04:10.120 align:start position:0% into a programmer who's like, "Dude, I'm 00:04:10.120 --> 00:04:12.230 align:start position:0% into a programmer who's like, "Dude, I'm into<00:04:10.280> VB<00:04:10.600> macros." 00:04:12.230 --> 00:04:12.240 align:start position:0% into VB macros." 00:04:12.240 --> 00:04:13.350 align:start position:0% into VB macros." Yeah,<00:04:12.400> I'm<00:04:12.520> talking<00:04:12.760> to<00:04:12.840> a<00:04:12.880> strange<00:04:13.200> loop 00:04:13.350 --> 00:04:13.360 align:start position:0% Yeah, I'm talking to a strange loop 00:04:13.360 --> 00:04:16.310 align:start position:0% Yeah, I'm talking to a strange loop about<00:04:13.600> VB4<00:04:14.120> macros<00:04:14.680> and<00:04:14.880> Excel<00:04:15.240> 97.<00:04:15.920> Cool. 00:04:16.310 --> 00:04:16.320 align:start position:0% about VB4 macros and Excel 97. Cool. 00:04:16.320 --> 00:04:18.110 align:start position:0% about VB4 macros and Excel 97. Cool. Like,<00:04:16.519> you<00:04:16.600> don't<00:04:16.720> hear<00:04:16.840> that.<00:04:17.160> No.<00:04:17.840> We<00:04:17.959> think 00:04:18.110 --> 00:04:18.120 align:start position:0% Like, you don't hear that. No. We think 00:04:18.120 --> 00:04:19.349 align:start position:0% Like, you don't hear that. No. We think they<00:04:18.239> suck. 00:04:19.349 --> 00:04:19.359 align:start position:0% they suck. 00:04:19.359 --> 00:04:20.830 align:start position:0% they suck. So,<00:04:19.480> we<00:04:19.600> see<00:04:19.760> them<00:04:19.920> as<00:04:20.000> an<00:04:20.120> open<00:04:20.320> problem,<00:04:20.720> like 00:04:20.830 --> 00:04:20.840 align:start position:0% So, we see them as an open problem, like 00:04:20.840 --> 00:04:22.190 align:start position:0% So, we see them as an open problem, like something<00:04:21.120> that<00:04:21.239> we<00:04:21.320> need<00:04:21.480> to<00:04:21.600> solve.<00:04:22.040> Like, 00:04:22.190 --> 00:04:22.200 align:start position:0% something that we need to solve. Like, 00:04:22.200 --> 00:04:23.790 align:start position:0% something that we need to solve. Like, the<00:04:22.280> fact<00:04:22.640> that<00:04:22.760> we<00:04:22.960> have<00:04:23.120> a<00:04:23.160> close<00:04:23.440> friend<00:04:23.720> who 00:04:23.790 --> 00:04:23.800 align:start position:0% the fact that we have a close friend who 00:04:23.800 --> 00:04:25.310 align:start position:0% the fact that we have a close friend who uses<00:04:24.080> a<00:04:24.120> spreadsheet.<00:04:25.040> Like,<00:04:25.160> let's 00:04:25.310 --> 00:04:25.320 align:start position:0% uses a spreadsheet. Like, let's 00:04:25.320 --> 00:04:27.150 align:start position:0% uses a spreadsheet. Like, let's intervene.<00:04:26.280> I'm<00:04:26.400> going<00:04:26.520> to<00:04:26.560> make<00:04:26.760> this<00:04:26.880> person 00:04:27.150 --> 00:04:27.160 align:start position:0% intervene. I'm going to make this person 00:04:27.160 --> 00:04:28.830 align:start position:0% intervene. I'm going to make this person a<00:04:27.200> program.<00:04:27.840> Like,<00:04:27.960> I'm<00:04:28.040> going<00:04:28.160> to 00:04:28.830 --> 00:04:28.840 align:start position:0% a program. Like, I'm going to 00:04:28.840 --> 00:04:29.950 align:start position:0% a program. Like, I'm going to Whoa. 00:04:29.950 --> 00:04:29.960 align:start position:0% Whoa. 00:04:29.960 --> 00:04:31.270 align:start position:0% Whoa. Um 00:04:31.270 --> 00:04:31.280 align:start position:0% Um 00:04:31.280 --> 00:04:32.510 align:start position:0% Um Part<00:04:31.440> of<00:04:31.480> that<00:04:31.640> is<00:04:31.760> that<00:04:31.960> they're<00:04:32.080> not<00:04:32.320> sort<00:04:32.440> of 00:04:32.510 --> 00:04:32.520 align:start position:0% Part of that is that they're not sort of 00:04:32.520 --> 00:04:33.909 align:start position:0% Part of that is that they're not sort of computer<00:04:32.840> science-y<00:04:33.280> enough.<00:04:33.560> There<00:04:33.720> aren't 00:04:33.909 --> 00:04:33.919 align:start position:0% computer science-y enough. There aren't 00:04:33.919 --> 00:04:36.550 align:start position:0% computer science-y enough. There aren't really<00:04:34.200> open<00:04:34.640> problems<00:04:35.160> around<00:04:35.520> them. 00:04:36.550 --> 00:04:36.560 align:start position:0% really open problems around them. 00:04:36.560 --> 00:04:37.909 align:start position:0% really open problems around them. Um 00:04:37.909 --> 00:04:37.919 align:start position:0% Um 00:04:37.919 --> 00:04:39.110 align:start position:0% Um But,<00:04:38.120> the<00:04:38.200> reality<00:04:38.560> of<00:04:38.640> spreadsheets<00:04:39.040> are 00:04:39.110 --> 00:04:39.120 align:start position:0% But, the reality of spreadsheets are 00:04:39.120 --> 00:04:41.270 align:start position:0% But, the reality of spreadsheets are that<00:04:39.800> they're<00:04:40.000> what<00:04:40.240> people<00:04:40.520> use<00:04:40.800> when<00:04:40.960> we<00:04:41.120> let 00:04:41.270 --> 00:04:41.280 align:start position:0% that they're what people use when we let 00:04:41.280 --> 00:04:43.030 align:start position:0% that they're what people use when we let them<00:04:41.440> down.<00:04:41.960> When<00:04:42.120> we<00:04:42.280> fail<00:04:42.600> someone,<00:04:42.919> when 00:04:43.030 --> 00:04:43.040 align:start position:0% them down. When we fail someone, when 00:04:43.040 --> 00:04:44.830 align:start position:0% them down. When we fail someone, when they<00:04:43.120> come<00:04:43.280> to<00:04:43.360> us<00:04:43.520> and<00:04:43.640> say,<00:04:44.360> "Oh,<00:04:44.520> hey,<00:04:44.760> you 00:04:44.830 --> 00:04:44.840 align:start position:0% they come to us and say, "Oh, hey, you 00:04:44.840 --> 00:04:46.350 align:start position:0% they come to us and say, "Oh, hey, you know,<00:04:45.320> what<00:04:45.440> would<00:04:45.560> it<00:04:45.680> take<00:04:45.880> to<00:04:45.960> visualize 00:04:46.350 --> 00:04:46.360 align:start position:0% know, what would it take to visualize 00:04:46.360 --> 00:04:47.350 align:start position:0% know, what would it take to visualize these<00:04:46.480> sales<00:04:46.680> figures?"<00:04:47.040> And<00:04:47.120> you're<00:04:47.200> like, 00:04:47.350 --> 00:04:47.360 align:start position:0% these sales figures?" And you're like, 00:04:47.360 --> 00:04:48.909 align:start position:0% these sales figures?" And you're like, "Well,<00:04:47.720> I<00:04:47.760> need<00:04:47.919> a<00:04:48.000> team<00:04:48.200> of<00:04:48.320> five,<00:04:48.640> a<00:04:48.680> budget 00:04:48.909 --> 00:04:48.919 align:start position:0% "Well, I need a team of five, a budget 00:04:48.919 --> 00:04:50.710 align:start position:0% "Well, I need a team of five, a budget of<00:04:49.000> 3<00:04:49.160> million,<00:04:49.560> and<00:04:49.800> 4<00:04:50.000> months."<00:04:50.600> You're 00:04:50.710 --> 00:04:50.720 align:start position:0% of 3 million, and 4 months." You're 00:04:50.720 --> 00:04:52.550 align:start position:0% of 3 million, and 4 months." You're like,<00:04:50.840> "Okay,<00:04:51.640> spreadsheet<00:04:52.000> time."<00:04:52.400> 20 00:04:52.550 --> 00:04:52.560 align:start position:0% like, "Okay, spreadsheet time." 20 00:04:52.560 --> 00:04:54.630 align:start position:0% like, "Okay, spreadsheet time." 20 minutes<00:04:52.760> later,<00:04:53.320> done. 00:04:54.630 --> 00:04:54.640 align:start position:0% minutes later, done. 00:04:54.640 --> 00:04:55.990 align:start position:0% minutes later, done. They're<00:04:54.760> the<00:04:54.840> technology<00:04:55.280> that<00:04:55.440> people<00:04:55.680> go<00:04:55.840> to 00:04:55.990 --> 00:04:56.000 align:start position:0% They're the technology that people go to 00:04:56.000 --> 00:04:57.870 align:start position:0% They're the technology that people go to to<00:04:56.120> solve<00:04:56.320> their<00:04:56.440> problems<00:04:57.080> when<00:04:57.560> we're<00:04:57.680> not 00:04:57.870 --> 00:04:57.880 align:start position:0% to solve their problems when we're not 00:04:57.880 --> 00:04:59.190 align:start position:0% to solve their problems when we're not able<00:04:58.080> to.<00:04:58.480> So,<00:04:58.600> if<00:04:58.680> we're<00:04:58.760> going<00:04:58.880> to<00:04:58.960> learn 00:04:59.190 --> 00:04:59.200 align:start position:0% able to. So, if we're going to learn 00:04:59.200 --> 00:05:00.710 align:start position:0% able to. So, if we're going to learn from<00:04:59.400> anything,<00:04:59.919> I<00:05:00.000> think<00:05:00.200> spreadsheets<00:05:00.640> are 00:05:00.710 --> 00:05:00.720 align:start position:0% from anything, I think spreadsheets are 00:05:00.720 --> 00:05:02.790 align:start position:0% from anything, I think spreadsheets are a<00:05:00.760> great<00:05:00.960> place<00:05:01.160> to<00:05:01.280> look. 00:05:02.790 --> 00:05:02.800 align:start position:0% a great place to look. 00:05:02.800 --> 00:05:05.550 align:start position:0% a great place to look. Um<00:05:03.440> I<00:05:03.520> took<00:05:03.640> a<00:05:03.680> stab<00:05:03.960> here<00:05:04.160> at<00:05:05.000> describing 00:05:05.550 --> 00:05:05.560 align:start position:0% Um I took a stab here at describing 00:05:05.560 --> 00:05:06.430 align:start position:0% Um I took a stab here at describing We're<00:05:05.680> kind<00:05:05.800> of<00:05:05.880> taking<00:05:06.120> a<00:05:06.160> look<00:05:06.360> at 00:05:06.430 --> 00:05:06.440 align:start position:0% We're kind of taking a look at 00:05:06.440 --> 00:05:08.550 align:start position:0% We're kind of taking a look at spreadsheets<00:05:06.919> from<00:05:07.080> the<00:05:07.360> from<00:05:07.520> the<00:05:07.800> eyes<00:05:08.120> of<00:05:08.240> a 00:05:08.550 --> 00:05:08.560 align:start position:0% spreadsheets from the from the eyes of a 00:05:08.560 --> 00:05:11.670 align:start position:0% spreadsheets from the from the eyes of a programming<00:05:09.040> language<00:05:10.200> and<00:05:10.360> environment. 00:05:11.670 --> 00:05:11.680 align:start position:0% programming language and environment. 00:05:11.680 --> 00:05:12.909 align:start position:0% programming language and environment. And<00:05:11.800> I<00:05:11.840> think 00:05:12.909 --> 00:05:12.919 align:start position:0% And I think 00:05:12.919 --> 00:05:14.710 align:start position:0% And I think uh<00:05:13.000> spreadsheets<00:05:13.440> are<00:05:13.520> amazing<00:05:13.960> for<00:05:14.400> roughly 00:05:14.710 --> 00:05:14.720 align:start position:0% uh spreadsheets are amazing for roughly 00:05:14.720 --> 00:05:16.630 align:start position:0% uh spreadsheets are amazing for roughly these<00:05:14.919> three<00:05:15.080> reasons.<00:05:15.480> I<00:05:15.520> mean,<00:05:16.280> they<00:05:16.400> suck 00:05:16.630 --> 00:05:16.640 align:start position:0% these three reasons. I mean, they suck 00:05:16.640 --> 00:05:18.230 align:start position:0% these three reasons. I mean, they suck for<00:05:16.720> a<00:05:16.760> lot<00:05:16.919> more,<00:05:17.120> but<00:05:17.800> for<00:05:17.919> these<00:05:18.080> three 00:05:18.230 --> 00:05:18.240 align:start position:0% for a lot more, but for these three 00:05:18.240 --> 00:05:19.390 align:start position:0% for a lot more, but for these three reasons,<00:05:18.520> I<00:05:18.560> think<00:05:18.720> they're<00:05:18.840> particularly 00:05:19.390 --> 00:05:19.400 align:start position:0% reasons, I think they're particularly 00:05:19.400 --> 00:05:21.510 align:start position:0% reasons, I think they're particularly incredible<00:05:19.960> and<00:05:20.160> we<00:05:20.240> should<00:05:20.600> we<00:05:20.720> should<00:05:21.240> dive 00:05:21.510 --> 00:05:21.520 align:start position:0% incredible and we should we should dive 00:05:21.520 --> 00:05:23.790 align:start position:0% incredible and we should we should dive in.<00:05:22.160> I<00:05:22.240> think<00:05:22.400> they're<00:05:22.760> reactive<00:05:23.560> out<00:05:23.680> of<00:05:23.720> the 00:05:23.790 --> 00:05:23.800 align:start position:0% in. I think they're reactive out of the 00:05:23.800 --> 00:05:25.350 align:start position:0% in. I think they're reactive out of the box.<00:05:24.200> I<00:05:24.240> mean,<00:05:24.360> there's<00:05:24.520> a<00:05:25.040> there's<00:05:25.200> like<00:05:25.320> a 00:05:25.350 --> 00:05:25.360 align:start position:0% box. I mean, there's a there's like a 00:05:25.360 --> 00:05:26.990 align:start position:0% box. I mean, there's a there's like a reactive<00:05:25.760> manifesto<00:05:26.280> now.<00:05:26.520> We're<00:05:26.640> looking<00:05:26.880> at 00:05:26.990 --> 00:05:27.000 align:start position:0% reactive manifesto now. We're looking at 00:05:27.000 --> 00:05:28.990 align:start position:0% reactive manifesto now. We're looking at FRP<00:05:27.720> and<00:05:27.840> all<00:05:27.919> this<00:05:28.080> stuff,<00:05:28.520> but<00:05:28.680> spreadsheets 00:05:28.990 --> 00:05:29.000 align:start position:0% FRP and all this stuff, but spreadsheets 00:05:29.000 --> 00:05:30.270 align:start position:0% FRP and all this stuff, but spreadsheets have<00:05:29.080> been<00:05:29.640> they've<00:05:29.720> been<00:05:29.800> doing<00:05:29.960> reactive 00:05:30.270 --> 00:05:30.280 align:start position:0% have been they've been doing reactive 00:05:30.280 --> 00:05:32.310 align:start position:0% have been they've been doing reactive programming<00:05:30.680> since<00:05:30.800> 1979. 00:05:32.310 --> 00:05:32.320 align:start position:0% programming since 1979. 00:05:32.320 --> 00:05:34.630 align:start position:0% programming since 1979. So,<00:05:33.280> this<00:05:33.520> is<00:05:34.120> uh<00:05:34.200> something<00:05:34.480> pretty 00:05:34.630 --> 00:05:34.640 align:start position:0% So, this is uh something pretty 00:05:34.640 --> 00:05:35.790 align:start position:0% So, this is uh something pretty incredible. 00:05:35.790 --> 00:05:35.800 align:start position:0% incredible. 00:05:35.800 --> 00:05:37.310 align:start position:0% incredible. They're<00:05:35.919> transparent.<00:05:36.600> They're<00:05:36.720> transparent 00:05:37.310 --> 00:05:37.320 align:start position:0% They're transparent. They're transparent 00:05:37.320 --> 00:05:38.470 align:start position:0% They're transparent. They're transparent in<00:05:37.400> the<00:05:37.480> way 00:05:38.470 --> 00:05:38.480 align:start position:0% in the way 00:05:38.480 --> 00:05:40.150 align:start position:0% in the way um<00:05:38.800> your<00:05:38.960> program<00:05:39.320> is<00:05:39.440> transparent<00:05:39.960> when<00:05:40.080> you 00:05:40.150 --> 00:05:40.160 align:start position:0% um your program is transparent when you 00:05:40.160 --> 00:05:42.510 align:start position:0% um your program is transparent when you have<00:05:40.280> a<00:05:40.320> good<00:05:40.520> debugger<00:05:41.200> attached. 00:05:42.510 --> 00:05:42.520 align:start position:0% have a good debugger attached. 00:05:42.520 --> 00:05:45.070 align:start position:0% have a good debugger attached. It's<00:05:42.680> easy<00:05:42.880> to<00:05:43.000> see,<00:05:43.480> at<00:05:43.600> least<00:05:43.840> for 00:05:45.070 --> 00:05:45.080 align:start position:0% It's easy to see, at least for 00:05:45.080 --> 00:05:46.590 align:start position:0% It's easy to see, at least for some<00:05:45.280> size<00:05:45.520> of<00:05:45.640> spreadsheets,<00:05:46.120> what's<00:05:46.320> going 00:05:46.590 --> 00:05:46.600 align:start position:0% some size of spreadsheets, what's going 00:05:46.600 --> 00:05:47.670 align:start position:0% some size of spreadsheets, what's going on. 00:05:47.670 --> 00:05:47.680 align:start position:0% on. 00:05:47.680 --> 00:05:48.630 align:start position:0% on. And<00:05:47.800> finally,<00:05:48.120> and<00:05:48.240> I<00:05:48.280> think<00:05:48.480> most 00:05:48.630 --> 00:05:48.640 align:start position:0% And finally, and I think most 00:05:48.640 --> 00:05:49.750 align:start position:0% And finally, and I think most importantly,<00:05:49.040> they're<00:05:49.200> layered.<00:05:49.640> They 00:05:49.750 --> 00:05:49.760 align:start position:0% importantly, they're layered. They 00:05:49.760 --> 00:05:52.030 align:start position:0% importantly, they're layered. They present<00:05:50.120> a<00:05:50.160> layered<00:05:50.600> approach<00:05:51.000> to<00:05:51.120> computing 00:05:52.030 --> 00:05:52.040 align:start position:0% present a layered approach to computing 00:05:52.040 --> 00:05:53.790 align:start position:0% present a layered approach to computing that<00:05:52.160> allows<00:05:52.560> small<00:05:53.000> groups<00:05:53.280> of<00:05:53.400> people<00:05:53.680> and 00:05:53.790 --> 00:05:53.800 align:start position:0% that allows small groups of people and 00:05:53.800 --> 00:05:55.950 align:start position:0% that allows small groups of people and teams<00:05:54.120> and<00:05:54.240> businesses<00:05:54.840> to<00:05:55.160> to<00:05:55.320> work<00:05:55.640> on<00:05:55.760> each 00:05:55.950 --> 00:05:55.960 align:start position:0% teams and businesses to to work on each 00:05:55.960 --> 00:05:57.870 align:start position:0% teams and businesses to to work on each other<00:05:56.080> to<00:05:56.160> extend<00:05:56.480> each<00:05:56.600> other's<00:05:56.840> work<00:05:57.080> easily 00:05:57.870 --> 00:05:57.880 align:start position:0% other to extend each other's work easily 00:05:57.880 --> 00:05:59.270 align:start position:0% other to extend each other's work easily in<00:05:58.000> ways<00:05:58.200> that<00:05:58.320> we<00:05:58.440> have<00:05:58.560> a<00:05:58.600> lot<00:05:58.760> of<00:05:58.840> difficulty 00:05:59.270 --> 00:05:59.280 align:start position:0% in ways that we have a lot of difficulty 00:05:59.280 --> 00:06:00.790 align:start position:0% in ways that we have a lot of difficulty doing<00:05:59.560> with<00:05:59.640> our<00:05:59.720> programming 00:06:00.790 --> 00:06:00.800 align:start position:0% doing with our programming 00:06:00.800 --> 00:06:03.470 align:start position:0% doing with our programming uh<00:06:00.920> constructs. 00:06:03.470 --> 00:06:03.480 align:start position:0% uh constructs. 00:06:03.480 --> 00:06:05.150 align:start position:0% uh constructs. So,<00:06:04.080> reactivity<00:06:04.600> is<00:06:04.720> the<00:06:04.800> first<00:06:05.000> thing<00:06:05.080> I'm 00:06:05.150 --> 00:06:05.160 align:start position:0% So, reactivity is the first thing I'm 00:06:05.160 --> 00:06:06.870 align:start position:0% So, reactivity is the first thing I'm going<00:06:05.280> to<00:06:05.520> hit<00:06:05.720> on<00:06:05.880> here.<00:06:06.200> Uh<00:06:06.320> this<00:06:06.480> is<00:06:06.720> a 00:06:06.870 --> 00:06:06.880 align:start position:0% going to hit on here. Uh this is a 00:06:06.880 --> 00:06:08.830 align:start position:0% going to hit on here. Uh this is a screenshot<00:06:07.400> from<00:06:07.600> a<00:06:07.920> interview<00:06:08.240> that<00:06:08.560> uh<00:06:08.680> Rich 00:06:08.830 --> 00:06:08.840 align:start position:0% screenshot from a interview that uh Rich 00:06:08.840 --> 00:06:10.110 align:start position:0% screenshot from a interview that uh Rich Hickey<00:06:09.080> did<00:06:09.240> with<00:06:09.360> Brian<00:06:09.600> Beckman<00:06:09.880> a<00:06:09.920> couple 00:06:10.110 --> 00:06:10.120 align:start position:0% Hickey did with Brian Beckman a couple 00:06:10.120 --> 00:06:11.590 align:start position:0% Hickey did with Brian Beckman a couple years<00:06:10.280> ago. 00:06:11.590 --> 00:06:11.600 align:start position:0% years ago. 00:06:11.600 --> 00:06:12.790 align:start position:0% years ago. Ironically,<00:06:12.040> at<00:06:12.120> Microsoft<00:06:12.600> on<00:06:12.720> the 00:06:12.790 --> 00:06:12.800 align:start position:0% Ironically, at Microsoft on the 00:06:12.800 --> 00:06:13.990 align:start position:0% Ironically, at Microsoft on the spreadsheet. 00:06:13.990 --> 00:06:14.000 align:start position:0% spreadsheet. 00:06:14.000 --> 00:06:15.230 align:start position:0% spreadsheet. Um 00:06:15.230 --> 00:06:15.240 align:start position:0% Um 00:06:15.240 --> 00:06:16.750 align:start position:0% Um One<00:06:15.480> of<00:06:15.560> the<00:06:15.600> things<00:06:15.800> Rich<00:06:15.960> says<00:06:16.440> uh<00:06:16.520> when<00:06:16.680> the 00:06:16.750 --> 00:06:16.760 align:start position:0% One of the things Rich says uh when the 00:06:16.760 --> 00:06:18.310 align:start position:0% One of the things Rich says uh when the topic<00:06:17.160> of<00:06:17.680> uh 00:06:18.310 --> 00:06:18.320 align:start position:0% topic of uh 00:06:18.320 --> 00:06:21.030 align:start position:0% topic of uh the<00:06:18.560> so-called<00:06:18.960> epical<00:06:19.240> time<00:06:19.520> model<00:06:19.800> comes<00:06:20.040> up 00:06:21.030 --> 00:06:21.040 align:start position:0% the so-called epical time model comes up 00:06:21.040 --> 00:06:23.070 align:start position:0% the so-called epical time model comes up is<00:06:21.200> that<00:06:21.360> you<00:06:21.440> can<00:06:21.600> have<00:06:22.120> a<00:06:22.160> lot<00:06:22.480> of<00:06:22.560> semantics 00:06:23.070 --> 00:06:23.080 align:start position:0% is that you can have a lot of semantics 00:06:23.080 --> 00:06:24.950 align:start position:0% is that you can have a lot of semantics for<00:06:23.200> managing<00:06:23.640> time<00:06:24.160> once<00:06:24.400> you<00:06:24.520> separate 00:06:24.950 --> 00:06:24.960 align:start position:0% for managing time once you separate 00:06:24.960 --> 00:06:26.670 align:start position:0% for managing time once you separate value<00:06:25.400> from<00:06:25.560> identity.<00:06:26.160> So,<00:06:26.240> this<00:06:26.440> is<00:06:26.560> the 00:06:26.670 --> 00:06:26.680 align:start position:0% value from identity. So, this is the 00:06:26.680 --> 00:06:29.350 align:start position:0% value from identity. So, this is the separation<00:06:27.280> that<00:06:27.440> Clojure<00:06:28.440> uh<00:06:28.919> gives<00:06:29.200> us 00:06:29.350 --> 00:06:29.360 align:start position:0% separation that Clojure uh gives us 00:06:29.360 --> 00:06:30.750 align:start position:0% separation that Clojure uh gives us where<00:06:29.480> we<00:06:29.560> separate,<00:06:30.120> you<00:06:30.200> know,<00:06:30.280> the<00:06:30.400> name<00:06:30.680> of 00:06:30.750 --> 00:06:30.760 align:start position:0% where we separate, you know, the name of 00:06:30.760 --> 00:06:32.270 align:start position:0% where we separate, you know, the name of something<00:06:31.080> with<00:06:31.200> the<00:06:31.440> value<00:06:31.760> it<00:06:31.840> may<00:06:31.960> have<00:06:32.200> at 00:06:32.270 --> 00:06:32.280 align:start position:0% something with the value it may have at 00:06:32.280 --> 00:06:34.350 align:start position:0% something with the value it may have at a<00:06:32.320> point<00:06:32.520> in<00:06:32.600> time. 00:06:34.350 --> 00:06:34.360 align:start position:0% a point in time. 00:06:34.360 --> 00:06:38.110 align:start position:0% a point in time. Um<00:06:35.320> in<00:06:35.560> spreadsheet<00:06:36.040> world,<00:06:36.760> we<00:06:36.880> do<00:06:37.120> have 00:06:38.110 --> 00:06:38.120 align:start position:0% Um in spreadsheet world, we do have 00:06:38.120 --> 00:06:39.590 align:start position:0% Um in spreadsheet world, we do have something<00:06:38.440> like<00:06:38.640> that,<00:06:38.880> a<00:06:38.960> reference<00:06:39.400> type, 00:06:39.590 --> 00:06:39.600 align:start position:0% something like that, a reference type, 00:06:39.600 --> 00:06:41.750 align:start position:0% something like that, a reference type, if<00:06:39.760> you<00:06:39.880> will,<00:06:40.640> that<00:06:41.120> uh 00:06:41.750 --> 00:06:41.760 align:start position:0% if you will, that uh 00:06:41.760 --> 00:06:43.990 align:start position:0% if you will, that uh sort<00:06:41.960> of<00:06:42.080> fits<00:06:42.320> into<00:06:42.520> this<00:06:43.040> this<00:06:43.280> worldview. 00:06:43.990 --> 00:06:44.000 align:start position:0% sort of fits into this this worldview. 00:06:44.000 --> 00:06:45.950 align:start position:0% sort of fits into this this worldview. It<00:06:44.320> It<00:06:44.880> It's<00:06:44.960> fine. 00:06:45.950 --> 00:06:45.960 align:start position:0% It It It's fine. 00:06:45.960 --> 00:06:47.670 align:start position:0% It It It's fine. And<00:06:46.200> that's<00:06:46.360> the<00:06:46.480> cell. 00:06:47.670 --> 00:06:47.680 align:start position:0% And that's the cell. 00:06:47.680 --> 00:06:49.230 align:start position:0% And that's the cell. The<00:06:47.840> cell<00:06:48.160> in<00:06:48.240> a<00:06:48.280> lot<00:06:48.440> of<00:06:48.520> ways,<00:06:48.720> and<00:06:48.840> by<00:06:48.960> cell<00:06:49.200> I 00:06:49.230 --> 00:06:49.240 align:start position:0% The cell in a lot of ways, and by cell I 00:06:49.240 --> 00:06:50.310 align:start position:0% The cell in a lot of ways, and by cell I mean,<00:06:49.400> you<00:06:49.480> know,<00:06:49.560> the<00:06:49.640> little<00:06:49.880> box<00:06:50.200> in<00:06:50.280> a 00:06:50.310 --> 00:06:50.320 align:start position:0% mean, you know, the little box in a 00:06:50.320 --> 00:06:51.750 align:start position:0% mean, you know, the little box in a spreadsheet<00:06:50.760> where<00:06:50.880> you<00:06:50.960> type<00:06:51.200> in<00:06:51.280> a<00:06:51.320> value<00:06:51.640> or 00:06:51.750 --> 00:06:51.760 align:start position:0% spreadsheet where you type in a value or 00:06:51.760 --> 00:06:54.110 align:start position:0% spreadsheet where you type in a value or a<00:06:51.800> formula,<00:06:52.720> is<00:06:53.200> one<00:06:53.360> of<00:06:53.480> these<00:06:53.680> reference 00:06:54.110 --> 00:06:54.120 align:start position:0% a formula, is one of these reference 00:06:54.120 --> 00:06:57.030 align:start position:0% a formula, is one of these reference types.<00:06:54.600> It's<00:06:54.760> a<00:06:54.840> reactive<00:06:56.120> unit<00:06:56.560> of<00:06:56.680> time 00:06:57.030 --> 00:06:57.040 align:start position:0% types. It's a reactive unit of time 00:06:57.040 --> 00:06:59.550 align:start position:0% types. It's a reactive unit of time management.<00:06:58.200> Uh<00:06:58.480> it's<00:06:58.680> what<00:06:59.080> gives 00:06:59.550 --> 00:06:59.560 align:start position:0% management. Uh it's what gives 00:06:59.560 --> 00:07:01.909 align:start position:0% management. Uh it's what gives spreadsheets<00:07:00.120> this<00:07:00.919> magical<00:07:01.360> property<00:07:01.760> of 00:07:01.909 --> 00:07:01.919 align:start position:0% spreadsheets this magical property of 00:07:01.919 --> 00:07:03.830 align:start position:0% spreadsheets this magical property of reactivity. 00:07:03.830 --> 00:07:03.840 align:start position:0% reactivity. 00:07:03.840 --> 00:07:05.070 align:start position:0% reactivity. The<00:07:04.040> result<00:07:04.360> of<00:07:04.480> using<00:07:04.720> cells<00:07:05.000> in 00:07:05.070 --> 00:07:05.080 align:start position:0% The result of using cells in 00:07:05.080 --> 00:07:07.150 align:start position:0% The result of using cells in spreadsheets<00:07:05.640> is<00:07:05.720> that<00:07:05.960> time<00:07:06.200> does<00:07:06.360> not<00:07:06.640> exist 00:07:07.150 --> 00:07:07.160 align:start position:0% spreadsheets is that time does not exist 00:07:07.160 --> 00:07:09.030 align:start position:0% spreadsheets is that time does not exist in<00:07:07.240> the<00:07:07.320> spreadsheet.<00:07:08.280> Um<00:07:08.800> you<00:07:08.880> know,<00:07:08.960> if 00:07:09.030 --> 00:07:09.040 align:start position:0% in the spreadsheet. Um you know, if 00:07:09.040 --> 00:07:11.150 align:start position:0% in the spreadsheet. Um you know, if anybody's<00:07:09.640> like<00:07:09.840> seen<00:07:10.000> the<00:07:10.080> SICP<00:07:10.680> lectures, 00:07:11.150 --> 00:07:11.160 align:start position:0% anybody's like seen the SICP lectures, 00:07:11.160 --> 00:07:12.270 align:start position:0% anybody's like seen the SICP lectures, they<00:07:11.280> go 00:07:12.270 --> 00:07:12.280 align:start position:0% they go 00:07:12.280 --> 00:07:13.990 align:start position:0% they go three<00:07:12.480> lectures<00:07:12.880> without<00:07:13.200> even<00:07:13.600> mutating 00:07:13.990 --> 00:07:14.000 align:start position:0% three lectures without even mutating 00:07:14.000 --> 00:07:15.470 align:start position:0% three lectures without even mutating anything.<00:07:14.720> And<00:07:14.800> then<00:07:14.919> suddenly,<00:07:15.320> you<00:07:15.400> know, 00:07:15.470 --> 00:07:15.480 align:start position:0% anything. And then suddenly, you know, 00:07:15.480 --> 00:07:16.950 align:start position:0% anything. And then suddenly, you know, you<00:07:15.560> define<00:07:15.919> something<00:07:16.200> a<00:07:16.240> second<00:07:16.560> time<00:07:16.840> and 00:07:16.950 --> 00:07:16.960 align:start position:0% you define something a second time and 00:07:16.960 --> 00:07:19.070 align:start position:0% you define something a second time and time<00:07:17.200> is<00:07:17.280> introduced.<00:07:18.480> Spreadsheets,<00:07:18.960> there 00:07:19.070 --> 00:07:19.080 align:start position:0% time is introduced. Spreadsheets, there 00:07:19.080 --> 00:07:21.870 align:start position:0% time is introduced. Spreadsheets, there is<00:07:19.200> no<00:07:19.360> time.<00:07:20.040> They<00:07:20.240> are<00:07:20.520> timeless<00:07:21.680> and 00:07:21.870 --> 00:07:21.880 align:start position:0% is no time. They are timeless and 00:07:21.880 --> 00:07:25.870 align:start position:0% is no time. They are timeless and creepy,<00:07:22.440> same<00:07:22.640> way<00:07:22.760> Patrick<00:07:23.120> Stewart<00:07:23.360> is. 00:07:25.870 --> 00:07:25.880 align:start position:0% 00:07:25.880 --> 00:07:27.790 align:start position:0% They're<00:07:26.120> transparent.<00:07:26.960> Um 00:07:27.790 --> 00:07:27.800 align:start position:0% They're transparent. Um 00:07:27.800 --> 00:07:29.350 align:start position:0% They're transparent. Um So,<00:07:27.960> again,<00:07:28.160> you<00:07:28.240> know,<00:07:28.680> the<00:07:28.800> the<00:07:28.960> spreadsheet 00:07:29.350 --> 00:07:29.360 align:start position:0% So, again, you know, the the spreadsheet 00:07:29.360 --> 00:07:30.990 align:start position:0% So, again, you know, the the spreadsheet interface<00:07:29.800> is<00:07:29.919> basically<00:07:30.320> the<00:07:30.480> an<00:07:30.560> incredible 00:07:30.990 --> 00:07:31.000 align:start position:0% interface is basically the an incredible 00:07:31.000 --> 00:07:32.310 align:start position:0% interface is basically the an incredible debugger.<00:07:31.480> It's<00:07:31.640> an<00:07:31.720> awesome<00:07:31.960> debugging 00:07:32.310 --> 00:07:32.320 align:start position:0% debugger. It's an awesome debugging 00:07:32.320 --> 00:07:33.750 align:start position:0% debugger. It's an awesome debugging environment.<00:07:32.720> You<00:07:32.800> can<00:07:32.919> see<00:07:33.120> every<00:07:33.440> the<00:07:33.520> value 00:07:33.750 --> 00:07:33.760 align:start position:0% environment. You can see every the value 00:07:33.760 --> 00:07:35.230 align:start position:0% environment. You can see every the value of<00:07:33.880> every<00:07:34.080> variable. 00:07:35.230 --> 00:07:35.240 align:start position:0% of every variable. 00:07:35.240 --> 00:07:36.870 align:start position:0% of every variable. And<00:07:35.400> when<00:07:35.520> you<00:07:35.600> change<00:07:35.840> the<00:07:35.919> values<00:07:36.240> of<00:07:36.320> these 00:07:36.870 --> 00:07:36.880 align:start position:0% And when you change the values of these 00:07:36.880 --> 00:07:38.670 align:start position:0% And when you change the values of these constituent<00:07:37.400> variables,<00:07:37.800> things<00:07:38.160> change 00:07:38.670 --> 00:07:38.680 align:start position:0% constituent variables, things change 00:07:38.680 --> 00:07:40.430 align:start position:0% constituent variables, things change reactively. 00:07:40.430 --> 00:07:40.440 align:start position:0% reactively. 00:07:40.440 --> 00:07:43.190 align:start position:0% reactively. You<00:07:40.640> You<00:07:40.720> easily<00:07:40.960> see<00:07:41.120> what's<00:07:41.280> going<00:07:41.480> on. 00:07:43.190 --> 00:07:43.200 align:start position:0% You You easily see what's going on. 00:07:43.200 --> 00:07:44.630 align:start position:0% You You easily see what's going on. You<00:07:43.440> have<00:07:43.600> data,<00:07:43.920> you<00:07:44.000> have<00:07:44.120> formulas,<00:07:44.560> you 00:07:44.630 --> 00:07:44.640 align:start position:0% You have data, you have formulas, you 00:07:44.640 --> 00:07:46.630 align:start position:0% You have data, you have formulas, you have<00:07:44.760> visual<00:07:45.400> visualizations<00:07:46.160> backed<00:07:46.480> by 00:07:46.630 --> 00:07:46.640 align:start position:0% have visual visualizations backed by 00:07:46.640 --> 00:07:48.270 align:start position:0% have visual visualizations backed by either<00:07:46.840> of<00:07:46.920> those<00:07:47.080> things. 00:07:48.270 --> 00:07:48.280 align:start position:0% either of those things. 00:07:48.280 --> 00:07:49.350 align:start position:0% either of those things. Um 00:07:49.350 --> 00:07:49.360 align:start position:0% Um 00:07:49.360 --> 00:07:51.390 align:start position:0% Um just<00:07:49.600> a<00:07:49.680> great<00:07:50.440> a<00:07:50.520> great<00:07:50.760> debugging<00:07:51.160> They're 00:07:51.390 --> 00:07:51.400 align:start position:0% just a great a great debugging They're 00:07:51.400 --> 00:07:56.590 align:start position:0% just a great a great debugging They're they're<00:07:51.520> just<00:07:51.720> a<00:07:51.760> natural<00:07:52.200> debugging<00:07:52.600> tool. 00:07:56.590 --> 00:07:56.600 align:start position:0% 00:07:56.600 --> 00:07:59.190 align:start position:0% Uh<00:07:57.240> the<00:07:57.360> third<00:07:57.600> point<00:07:57.840> I<00:07:57.880> mentioned<00:07:58.520> about 00:07:59.190 --> 00:07:59.200 align:start position:0% Uh the third point I mentioned about 00:07:59.200 --> 00:08:01.510 align:start position:0% Uh the third point I mentioned about layering,<00:08:00.320> uh<00:08:00.400> I<00:08:00.480> think<00:08:00.680> we<00:08:00.760> can<00:08:01.040> we<00:08:01.160> can<00:08:01.280> start 00:08:01.510 --> 00:08:01.520 align:start position:0% layering, uh I think we can we can start 00:08:01.520 --> 00:08:03.070 align:start position:0% layering, uh I think we can we can start to<00:08:01.560> see<00:08:01.760> here.<00:08:02.520> So,<00:08:02.600> we're<00:08:02.720> looking<00:08:02.960> at<00:08:03.040> a 00:08:03.070 --> 00:08:03.080 align:start position:0% to see here. So, we're looking at a 00:08:03.080 --> 00:08:06.030 align:start position:0% to see here. So, we're looking at a spreadsheet<00:08:03.600> and<00:08:03.680> we've<00:08:03.800> got<00:08:04.240> a<00:08:04.320> data<00:08:04.640> grid 00:08:06.030 --> 00:08:06.040 align:start position:0% spreadsheet and we've got a data grid 00:08:06.040 --> 00:08:08.030 align:start position:0% spreadsheet and we've got a data grid and<00:08:06.160> then<00:08:06.280> we've<00:08:06.400> got<00:08:06.560> a<00:08:06.600> visualization.<00:08:07.960> The 00:08:08.030 --> 00:08:08.040 align:start position:0% and then we've got a visualization. The 00:08:08.040 --> 00:08:10.030 align:start position:0% and then we've got a visualization. The incredible<00:08:08.440> thing<00:08:09.320> about<00:08:09.560> what<00:08:09.680> we're<00:08:09.760> seeing 00:08:10.030 --> 00:08:10.040 align:start position:0% incredible thing about what we're seeing 00:08:10.040 --> 00:08:13.110 align:start position:0% incredible thing about what we're seeing here<00:08:10.200> is<00:08:10.320> that<00:08:11.080> you<00:08:11.200> can<00:08:11.360> change 00:08:13.110 --> 00:08:13.120 align:start position:0% here is that you can change 00:08:13.120 --> 00:08:14.310 align:start position:0% here is that you can change attributes<00:08:13.640> of<00:08:13.720> the<00:08:13.800> way<00:08:13.919> the<00:08:14.000> data<00:08:14.240> is 00:08:14.310 --> 00:08:14.320 align:start position:0% attributes of the way the data is 00:08:14.320 --> 00:08:16.430 align:start position:0% attributes of the way the data is displayed,<00:08:14.800> like<00:08:14.960> those<00:08:15.200> red<00:08:15.640> uh<00:08:16.000> horizontal 00:08:16.430 --> 00:08:16.440 align:start position:0% displayed, like those red uh horizontal 00:08:16.440 --> 00:08:18.150 align:start position:0% displayed, like those red uh horizontal bars.<00:08:16.680> Maybe<00:08:16.880> I<00:08:16.919> want<00:08:17.080> them<00:08:17.200> to<00:08:17.280> be<00:08:17.360> blue 00:08:18.150 --> 00:08:18.160 align:start position:0% bars. Maybe I want them to be blue 00:08:18.160 --> 00:08:19.390 align:start position:0% bars. Maybe I want them to be blue without<00:08:18.520> interacting<00:08:18.919> at<00:08:19.040> all<00:08:19.200> with<00:08:19.320> the 00:08:19.390 --> 00:08:19.400 align:start position:0% without interacting at all with the 00:08:19.400 --> 00:08:21.510 align:start position:0% without interacting at all with the underlying<00:08:19.720> data. 00:08:21.510 --> 00:08:21.520 align:start position:0% underlying data. 00:08:21.520 --> 00:08:23.590 align:start position:0% underlying data. Likewise,<00:08:22.040> or<00:08:22.360> or<00:08:22.840> symmetrically,<00:08:23.440> I<00:08:23.480> could 00:08:23.590 --> 00:08:23.600 align:start position:0% Likewise, or or symmetrically, I could 00:08:23.600 --> 00:08:24.909 align:start position:0% Likewise, or or symmetrically, I could change<00:08:23.840> the<00:08:23.919> data<00:08:24.200> without<00:08:24.520> changing<00:08:24.800> the 00:08:24.909 --> 00:08:24.919 align:start position:0% change the data without changing the 00:08:24.919 --> 00:08:26.230 align:start position:0% change the data without changing the chart. 00:08:26.230 --> 00:08:26.240 align:start position:0% chart. 00:08:26.240 --> 00:08:27.670 align:start position:0% chart. And<00:08:26.360> in<00:08:26.400> fact, 00:08:27.670 --> 00:08:27.680 align:start position:0% And in fact, 00:08:27.680 --> 00:08:29.390 align:start position:0% And in fact, uh 00:08:29.390 --> 00:08:29.400 align:start position:0% uh 00:08:29.400 --> 00:08:31.350 align:start position:0% uh just<00:08:30.080> get<00:08:30.440> uh<00:08:30.560> yeah,<00:08:30.760> look<00:08:30.960> at<00:08:31.000> this<00:08:31.160> next 00:08:31.350 --> 00:08:31.360 align:start position:0% just get uh yeah, look at this next 00:08:31.360 --> 00:08:32.390 align:start position:0% just get uh yeah, look at this next screen<00:08:31.560> here. 00:08:32.390 --> 00:08:32.400 align:start position:0% screen here. 00:08:32.400 --> 00:08:33.510 align:start position:0% screen here. I<00:08:32.440> mean 00:08:33.510 --> 00:08:33.520 align:start position:0% I mean 00:08:33.520 --> 00:08:36.110 align:start position:0% I mean you<00:08:33.680> can<00:08:34.200> add<00:08:34.719> new<00:08:34.880> charts.<00:08:35.320> You<00:08:35.400> can<00:08:35.520> have<00:08:35.880> N 00:08:36.110 --> 00:08:36.120 align:start position:0% you can add new charts. You can have N 00:08:36.120 --> 00:08:37.950 align:start position:0% you can add new charts. You can have N charts,<00:08:36.520> all<00:08:36.719> different<00:08:37.000> kinds<00:08:37.200> of<00:08:37.280> charts.<00:08:37.840> I 00:08:37.950 --> 00:08:37.960 align:start position:0% charts, all different kinds of charts. I 00:08:37.960 --> 00:08:39.390 align:start position:0% charts, all different kinds of charts. I here<00:08:38.200> I'm<00:08:38.280> showing<00:08:38.520> off<00:08:38.719> like<00:08:38.840> the<00:08:38.960> pie<00:08:39.159> chart, 00:08:39.390 --> 00:08:39.400 align:start position:0% here I'm showing off like the pie chart, 00:08:39.400 --> 00:08:40.870 align:start position:0% here I'm showing off like the pie chart, which<00:08:39.520> is<00:08:39.640> like 00:08:40.870 --> 00:08:40.880 align:start position:0% which is like 00:08:40.880 --> 00:08:44.310 align:start position:0% which is like probably<00:08:41.200> not<00:08:41.360> the<00:08:41.440> one<00:08:41.599> you<00:08:41.680> want,<00:08:42.039> but<00:08:42.880> um 00:08:44.310 --> 00:08:44.320 align:start position:0% probably not the one you want, but um 00:08:44.320 --> 00:08:45.510 align:start position:0% probably not the one you want, but um you<00:08:44.440> know,<00:08:44.560> there<00:08:44.680> are<00:08:44.800> lots<00:08:45.040> of<00:08:45.120> charts<00:08:45.440> and 00:08:45.510 --> 00:08:45.520 align:start position:0% you know, there are lots of charts and 00:08:45.520 --> 00:08:46.950 align:start position:0% you know, there are lots of charts and we<00:08:45.600> can<00:08:45.720> attach<00:08:46.080> them<00:08:46.240> or<00:08:46.360> plug<00:08:46.600> them<00:08:46.720> into 00:08:46.950 --> 00:08:46.960 align:start position:0% we can attach them or plug them into 00:08:46.960 --> 00:08:49.230 align:start position:0% we can attach them or plug them into this<00:08:47.120> existing<00:08:47.600> data<00:08:47.880> and<00:08:48.000> formula<00:08:48.360> without 00:08:49.230 --> 00:08:49.240 align:start position:0% this existing data and formula without 00:08:49.240 --> 00:08:51.030 align:start position:0% this existing data and formula without changing<00:08:49.839> the<00:08:49.920> data<00:08:50.200> or<00:08:50.360> the<00:08:50.440> formulas.<00:08:50.920> And 00:08:51.030 --> 00:08:51.040 align:start position:0% changing the data or the formulas. And 00:08:51.040 --> 00:08:53.470 align:start position:0% changing the data or the formulas. And this<00:08:51.200> is<00:08:51.400> incredible<00:08:51.880> power. 00:08:53.470 --> 00:08:53.480 align:start position:0% this is incredible power. 00:08:53.480 --> 00:08:56.030 align:start position:0% this is incredible power. So,<00:08:53.960> that's<00:08:54.240> the<00:08:54.360> tech.<00:08:55.280> The<00:08:55.360> sort<00:08:55.520> of<00:08:55.600> human 00:08:56.030 --> 00:08:56.040 align:start position:0% So, that's the tech. The sort of human 00:08:56.040 --> 00:08:58.150 align:start position:0% So, that's the tech. The sort of human side<00:08:56.320> of<00:08:56.400> it<00:08:56.680> is<00:08:56.960> that<00:08:57.320> spreadsheets<00:08:57.800> give<00:08:58.040> us 00:08:58.150 --> 00:08:58.160 align:start position:0% side of it is that spreadsheets give us 00:08:58.160 --> 00:09:00.750 align:start position:0% side of it is that spreadsheets give us this<00:08:58.360> natural<00:08:58.680> boundary<00:08:59.040> to<00:08:59.120> divide<00:08:59.480> labor. 00:09:00.750 --> 00:09:00.760 align:start position:0% this natural boundary to divide labor. 00:09:00.760 --> 00:09:03.630 align:start position:0% this natural boundary to divide labor. One<00:09:00.960> person<00:09:01.320> can<00:09:01.440> enter<00:09:01.640> the<00:09:01.760> data. 00:09:03.630 --> 00:09:03.640 align:start position:0% One person can enter the data. 00:09:03.640 --> 00:09:06.110 align:start position:0% One person can enter the data. Someone<00:09:03.920> who<00:09:04.040> knows<00:09:04.440> the<00:09:04.560> business<00:09:05.280> or<00:09:05.400> knows 00:09:06.110 --> 00:09:06.120 align:start position:0% Someone who knows the business or knows 00:09:06.120 --> 00:09:07.950 align:start position:0% Someone who knows the business or knows the<00:09:06.600> what<00:09:06.839> relationships<00:09:07.400> to<00:09:07.480> look<00:09:07.680> for<00:09:07.839> in 00:09:07.950 --> 00:09:07.960 align:start position:0% the what relationships to look for in 00:09:07.960 --> 00:09:10.270 align:start position:0% the what relationships to look for in the<00:09:08.000> data<00:09:08.640> can<00:09:08.800> write<00:09:08.960> formulas. 00:09:10.270 --> 00:09:10.280 align:start position:0% the data can write formulas. 00:09:10.280 --> 00:09:12.550 align:start position:0% the data can write formulas. And<00:09:10.480> then<00:09:10.800> others<00:09:11.200> can<00:09:11.360> make<00:09:11.600> visualizations 00:09:12.550 --> 00:09:12.560 align:start position:0% And then others can make visualizations 00:09:12.560 --> 00:09:14.190 align:start position:0% And then others can make visualizations without<00:09:12.880> necessarily<00:09:13.360> writing<00:09:13.600> formulas<00:09:14.040> or 00:09:14.190 --> 00:09:14.200 align:start position:0% without necessarily writing formulas or 00:09:14.200 --> 00:09:15.670 align:start position:0% without necessarily writing formulas or entering<00:09:14.440> new<00:09:14.560> data. 00:09:15.670 --> 00:09:15.680 align:start position:0% entering new data. 00:09:15.680 --> 00:09:17.910 align:start position:0% entering new data. So,<00:09:15.839> what<00:09:16.160> we<00:09:16.280> see<00:09:16.960> in<00:09:17.200> organizations<00:09:17.800> that 00:09:17.910 --> 00:09:17.920 align:start position:0% So, what we see in organizations that 00:09:17.920 --> 00:09:20.070 align:start position:0% So, what we see in organizations that use<00:09:18.040> spreadsheets<00:09:18.520> is<00:09:19.160> these<00:09:19.280> spreadsheets 00:09:20.070 --> 00:09:20.080 align:start position:0% use spreadsheets is these spreadsheets 00:09:20.080 --> 00:09:21.950 align:start position:0% use spreadsheets is these spreadsheets sort<00:09:20.280> of<00:09:20.360> circulate 00:09:21.950 --> 00:09:21.960 align:start position:0% sort of circulate 00:09:21.960 --> 00:09:24.070 align:start position:0% sort of circulate like,<00:09:22.360> you<00:09:22.440> know,<00:09:22.560> trash<00:09:22.920> around<00:09:23.120> the<00:09:23.200> oceans 00:09:24.070 --> 00:09:24.080 align:start position:0% like, you know, trash around the oceans 00:09:24.080 --> 00:09:25.470 align:start position:0% like, you know, trash around the oceans from<00:09:24.280> different 00:09:25.470 --> 00:09:25.480 align:start position:0% from different 00:09:25.480 --> 00:09:27.870 align:start position:0% from different uh<00:09:25.600> business<00:09:25.960> units<00:09:26.240> inside<00:09:26.520> the<00:09:26.600> company. 00:09:27.870 --> 00:09:27.880 align:start position:0% uh business units inside the company. 00:09:27.880 --> 00:09:29.870 align:start position:0% uh business units inside the company. And<00:09:28.000> people<00:09:28.240> tack<00:09:28.480> stuff<00:09:28.760> on.<00:09:29.520> Maybe<00:09:29.720> they'll 00:09:29.870 --> 00:09:29.880 align:start position:0% And people tack stuff on. Maybe they'll 00:09:29.880 --> 00:09:31.430 align:start position:0% And people tack stuff on. Maybe they'll want<00:09:30.040> to<00:09:30.080> use<00:09:30.200> it<00:09:30.320> for<00:09:30.440> a<00:09:30.480> report.<00:09:31.000> Oh,<00:09:31.080> maybe<00:09:31.360> I 00:09:31.430 --> 00:09:31.440 align:start position:0% want to use it for a report. Oh, maybe I 00:09:31.440 --> 00:09:32.510 align:start position:0% want to use it for a report. Oh, maybe I have<00:09:31.600> a<00:09:31.680> better<00:09:31.880> idea<00:09:32.040> for<00:09:32.120> how<00:09:32.200> to<00:09:32.280> do<00:09:32.360> this 00:09:32.510 --> 00:09:32.520 align:start position:0% have a better idea for how to do this 00:09:32.520 --> 00:09:33.710 align:start position:0% have a better idea for how to do this formula. 00:09:33.710 --> 00:09:33.720 align:start position:0% formula. 00:09:33.720 --> 00:09:35.190 align:start position:0% formula. Um 00:09:35.190 --> 00:09:35.200 align:start position:0% Um 00:09:35.200 --> 00:09:36.590 align:start position:0% Um I<00:09:35.280> mean,<00:09:35.400> that's<00:09:35.760> that's<00:09:36.200> from<00:09:36.360> a<00:09:36.400> like<00:09:36.560> a 00:09:36.590 --> 00:09:36.600 align:start position:0% I mean, that's that's from a like a 00:09:36.600 --> 00:09:38.150 align:start position:0% I mean, that's that's from a like a change<00:09:37.000> management<00:09:37.560> perspective<00:09:37.960> that's 00:09:38.150 --> 00:09:38.160 align:start position:0% change management perspective that's 00:09:38.160 --> 00:09:39.350 align:start position:0% change management perspective that's bad,<00:09:38.440> but<00:09:38.560> it's<00:09:38.680> amazing<00:09:39.160> from<00:09:39.280> the 00:09:39.350 --> 00:09:39.360 align:start position:0% bad, but it's amazing from the 00:09:39.360 --> 00:09:41.030 align:start position:0% bad, but it's amazing from the perspective<00:09:39.840> of<00:09:40.040> everybody<00:09:40.480> has<00:09:40.640> a<00:09:40.720> way<00:09:40.880> to 00:09:41.030 --> 00:09:41.040 align:start position:0% perspective of everybody has a way to 00:09:41.040 --> 00:09:42.430 align:start position:0% perspective of everybody has a way to contribute<00:09:41.600> something<00:09:41.840> they're<00:09:41.960> good<00:09:42.160> at<00:09:42.360> to 00:09:42.430 --> 00:09:42.440 align:start position:0% contribute something they're good at to 00:09:42.440 --> 00:09:44.510 align:start position:0% contribute something they're good at to this<00:09:43.240> to<00:09:43.320> this<00:09:43.520> programming<00:09:43.920> and<00:09:44.160> this 00:09:44.510 --> 00:09:44.520 align:start position:0% this to this programming and this 00:09:44.520 --> 00:09:46.790 align:start position:0% this to this programming and this environment. 00:09:46.790 --> 00:09:46.800 align:start position:0% environment. 00:09:46.800 --> 00:09:50.270 align:start position:0% environment. So,<00:09:47.520> hoplon<00:09:48.240> this<00:09:48.560> web 00:09:50.270 --> 00:09:50.280 align:start position:0% So, hoplon this web 00:09:50.280 --> 00:09:52.430 align:start position:0% So, hoplon this web thing<00:09:51.000> it's<00:09:51.160> a<00:09:51.320> it's<00:09:51.440> a<00:09:51.520> framework<00:09:51.920> a<00:09:52.000> set<00:09:52.240> of 00:09:52.430 --> 00:09:52.440 align:start position:0% thing it's a it's a framework a set of 00:09:52.440 --> 00:09:53.750 align:start position:0% thing it's a it's a framework a set of libraries<00:09:52.920> that<00:09:53.040> we've<00:09:53.160> developed<00:09:53.520> working 00:09:53.750 --> 00:09:53.760 align:start position:0% libraries that we've developed working 00:09:53.760 --> 00:09:55.350 align:start position:0% libraries that we've developed working closure<00:09:54.040> and<00:09:54.120> closure<00:09:54.440> script.<00:09:54.760> It's<00:09:55.080> if<00:09:55.240> it's 00:09:55.350 --> 00:09:55.360 align:start position:0% closure and closure script. It's if it's 00:09:55.360 --> 00:09:56.910 align:start position:0% closure and closure script. It's if it's influenced<00:09:55.720> by<00:09:55.880> any<00:09:56.120> one<00:09:56.280> thing<00:09:56.480> I'd<00:09:56.600> say<00:09:56.720> that 00:09:56.910 --> 00:09:56.920 align:start position:0% influenced by any one thing I'd say that 00:09:56.920 --> 00:09:58.590 align:start position:0% influenced by any one thing I'd say that thing<00:09:57.120> is<00:09:57.400> spreadsheets. 00:09:58.590 --> 00:09:58.600 align:start position:0% thing is spreadsheets. 00:09:58.600 --> 00:10:00.390 align:start position:0% thing is spreadsheets. So,<00:09:58.840> at<00:09:58.920> the<00:09:59.040> heart<00:09:59.400> of<00:09:59.680> our<00:09:59.800> framework<00:10:00.240> is<00:10:00.360> a 00:10:00.390 --> 00:10:00.400 align:start position:0% So, at the heart of our framework is a 00:10:00.400 --> 00:10:02.910 align:start position:0% So, at the heart of our framework is a closure<00:10:00.720> script<00:10:00.960> library<00:10:01.280> called<00:10:01.520> Javelin. 00:10:02.910 --> 00:10:02.920 align:start position:0% closure script library called Javelin. 00:10:02.920 --> 00:10:06.790 align:start position:0% closure script library called Javelin. And<00:10:03.800> Javelin<00:10:04.280> is<00:10:04.640> an<00:10:04.880> abstract<00:10:06.080> spreadsheet. 00:10:06.790 --> 00:10:06.800 align:start position:0% And Javelin is an abstract spreadsheet. 00:10:06.800 --> 00:10:08.070 align:start position:0% And Javelin is an abstract spreadsheet. It's<00:10:06.920> a<00:10:07.000> way<00:10:07.160> to<00:10:07.240> do<00:10:07.360> spreadsheet<00:10:07.880> like 00:10:08.070 --> 00:10:08.080 align:start position:0% It's a way to do spreadsheet like 00:10:08.080 --> 00:10:10.430 align:start position:0% It's a way to do spreadsheet like programming<00:10:09.200> in<00:10:09.400> a<00:10:09.440> closure<00:10:09.800> script 00:10:10.430 --> 00:10:10.440 align:start position:0% programming in a closure script 00:10:10.440 --> 00:10:13.830 align:start position:0% programming in a closure script environment.<00:10:11.640> And<00:10:11.760> our<00:10:11.840> goal<00:10:12.240> is<00:10:12.600> to<00:10:13.280> try<00:10:13.560> and 00:10:13.830 --> 00:10:13.840 align:start position:0% environment. And our goal is to try and 00:10:13.840 --> 00:10:15.150 align:start position:0% environment. And our goal is to try and deliver<00:10:14.200> all<00:10:14.360> of<00:10:14.440> the<00:10:14.560> things<00:10:14.880> that<00:10:14.960> are<00:10:15.040> good 00:10:15.150 --> 00:10:15.160 align:start position:0% deliver all of the things that are good 00:10:15.160 --> 00:10:16.750 align:start position:0% deliver all of the things that are good about<00:10:15.360> spreadsheets<00:10:15.840> to<00:10:15.960> the<00:10:16.080> closure<00:10:16.360> script 00:10:16.750 --> 00:10:16.760 align:start position:0% about spreadsheets to the closure script 00:10:16.760 --> 00:10:19.030 align:start position:0% about spreadsheets to the closure script programmer. 00:10:19.030 --> 00:10:19.040 align:start position:0% programmer. 00:10:19.040 --> 00:10:22.830 align:start position:0% programmer. So,<00:10:19.320> like<00:10:19.880> normal<00:10:20.120> spreadsheets<00:10:20.880> Excel<00:10:21.200> 97 00:10:22.830 --> 00:10:22.840 align:start position:0% So, like normal spreadsheets Excel 97 00:10:22.840 --> 00:10:24.590 align:start position:0% So, like normal spreadsheets Excel 97 we<00:10:22.960> have<00:10:23.120> input<00:10:23.400> cells. 00:10:24.590 --> 00:10:24.600 align:start position:0% we have input cells. 00:10:24.600 --> 00:10:26.710 align:start position:0% we have input cells. And<00:10:24.800> one<00:10:24.960> creates<00:10:25.320> input<00:10:25.640> cells 00:10:26.710 --> 00:10:26.720 align:start position:0% And one creates input cells 00:10:26.720 --> 00:10:28.390 align:start position:0% And one creates input cells by 00:10:28.390 --> 00:10:28.400 align:start position:0% by 00:10:28.400 --> 00:10:30.270 align:start position:0% by one<00:10:28.880> one<00:10:29.080> of<00:10:29.160> two<00:10:29.280> methods.<00:10:29.640> The<00:10:29.720> first<00:10:29.960> method 00:10:30.270 --> 00:10:30.280 align:start position:0% one one of two methods. The first method 00:10:30.280 --> 00:10:32.790 align:start position:0% one one of two methods. The first method is<00:10:31.080> you<00:10:31.440> can<00:10:31.560> call<00:10:31.720> the<00:10:31.800> cell<00:10:32.080> constructor. 00:10:32.790 --> 00:10:32.800 align:start position:0% is you can call the cell constructor. 00:10:32.800 --> 00:10:34.710 align:start position:0% is you can call the cell constructor. And<00:10:32.920> this<00:10:33.080> is<00:10:33.360> this<00:10:33.520> is<00:10:34.000> just<00:10:34.200> a<00:10:34.240> function<00:10:34.600> you 00:10:34.710 --> 00:10:34.720 align:start position:0% And this is this is just a function you 00:10:34.720 --> 00:10:36.430 align:start position:0% And this is this is just a function you call<00:10:34.960> that<00:10:35.040> returns<00:10:35.600> a<00:10:35.680> reference<00:10:36.040> type<00:10:36.280> of 00:10:36.430 --> 00:10:36.440 align:start position:0% call that returns a reference type of 00:10:36.440 --> 00:10:37.990 align:start position:0% call that returns a reference type of cell.<00:10:37.040> This<00:10:37.160> is<00:10:37.280> similar<00:10:37.560> to<00:10:37.640> how<00:10:37.760> you<00:10:37.880> would 00:10:37.990 --> 00:10:38.000 align:start position:0% cell. This is similar to how you would 00:10:38.000 --> 00:10:39.710 align:start position:0% cell. This is similar to how you would create<00:10:38.240> an<00:10:38.360> atom<00:10:38.760> or<00:10:38.880> an<00:10:39.000> agent<00:10:39.320> or<00:10:39.440> any<00:10:39.560> kind 00:10:39.710 --> 00:10:39.720 align:start position:0% create an atom or an agent or any kind 00:10:39.720 --> 00:10:41.870 align:start position:0% create an atom or an agent or any kind of<00:10:39.880> closure<00:10:40.240> reference<00:10:40.600> type. 00:10:41.870 --> 00:10:41.880 align:start position:0% of closure reference type. 00:10:41.880 --> 00:10:43.790 align:start position:0% of closure reference type. So,<00:10:42.080> here<00:10:42.240> we're<00:10:42.360> def<00:10:42.720> defining<00:10:43.120> a<00:10:43.200> thing<00:10:43.720> to 00:10:43.790 --> 00:10:43.800 align:start position:0% So, here we're def defining a thing to 00:10:43.800 --> 00:10:45.150 align:start position:0% So, here we're def defining a thing to be<00:10:43.880> the<00:10:44.000> cell. 00:10:45.150 --> 00:10:45.160 align:start position:0% be the cell. 00:10:45.160 --> 00:10:48.110 align:start position:0% be the cell. Another<00:10:46.000> way<00:10:46.120> to<00:10:46.240> make<00:10:46.400> a<00:10:46.440> cell<00:10:46.960> in<00:10:47.920> with 00:10:48.110 --> 00:10:48.120 align:start position:0% Another way to make a cell in with 00:10:48.120 --> 00:10:50.470 align:start position:0% Another way to make a cell in with Javelin<00:10:48.480> is<00:10:48.560> we<00:10:48.640> have<00:10:48.760> a<00:10:48.800> macro<00:10:49.200> def<00:10:49.520> C.<00:10:50.360> And 00:10:50.470 --> 00:10:50.480 align:start position:0% Javelin is we have a macro def C. And 00:10:50.480 --> 00:10:52.670 align:start position:0% Javelin is we have a macro def C. And all<00:10:50.560> that<00:10:50.800> does<00:10:51.120> is<00:10:51.280> create<00:10:51.560> a<00:10:51.600> cell<00:10:51.880> named<00:10:52.160> N 00:10:52.670 --> 00:10:52.680 align:start position:0% all that does is create a cell named N 00:10:52.680 --> 00:10:53.510 align:start position:0% all that does is create a cell named N and<00:10:52.839> you<00:10:52.920> don't<00:10:53.040> have<00:10:53.120> to<00:10:53.240> type<00:10:53.440> the 00:10:53.510 --> 00:10:53.520 align:start position:0% and you don't have to type the 00:10:53.520 --> 00:10:55.070 align:start position:0% and you don't have to type the constructor<00:10:54.040> in.<00:10:54.480> We<00:10:54.560> just<00:10:54.760> have<00:10:54.880> this 00:10:55.070 --> 00:10:55.080 align:start position:0% constructor in. We just have this 00:10:55.080 --> 00:10:56.670 align:start position:0% constructor in. We just have this because<00:10:55.760> our<00:10:55.920> programs<00:10:56.200> tend<00:10:56.320> to<00:10:56.400> have<00:10:56.480> lots 00:10:56.670 --> 00:10:56.680 align:start position:0% because our programs tend to have lots 00:10:56.680 --> 00:10:58.710 align:start position:0% because our programs tend to have lots of<00:10:56.760> cells. 00:10:58.710 --> 00:10:58.720 align:start position:0% of cells. 00:10:58.720 --> 00:11:02.990 align:start position:0% of cells. We<00:10:58.880> have<00:10:59.000> formula<00:10:59.400> cells.<00:11:00.120> Formula<00:11:00.480> cells<00:11:01.080> are 00:11:02.990 --> 00:11:03.000 align:start position:0% We have formula cells. Formula cells are 00:11:03.000 --> 00:11:04.950 align:start position:0% We have formula cells. Formula cells are different<00:11:03.400> from<00:11:03.520> input<00:11:03.839> cells<00:11:04.600> and<00:11:04.720> that<00:11:04.839> they 00:11:04.950 --> 00:11:04.960 align:start position:0% different from input cells and that they 00:11:04.960 --> 00:11:06.990 align:start position:0% different from input cells and that they shouldn't<00:11:05.280> really<00:11:05.440> be<00:11:05.560> mutated.<00:11:06.720> You<00:11:06.800> don't 00:11:06.990 --> 00:11:07.000 align:start position:0% shouldn't really be mutated. You don't 00:11:07.000 --> 00:11:08.870 align:start position:0% shouldn't really be mutated. You don't change<00:11:07.280> the<00:11:07.400> contents<00:11:07.800> of<00:11:07.880> them<00:11:08.160> dynamically 00:11:08.870 --> 00:11:08.880 align:start position:0% change the contents of them dynamically 00:11:08.880 --> 00:11:11.110 align:start position:0% change the contents of them dynamically necessarily.<00:11:10.120> What<00:11:10.240> they<00:11:10.360> do<00:11:10.560> contain<00:11:11.000> are 00:11:11.110 --> 00:11:11.120 align:start position:0% necessarily. What they do contain are 00:11:11.120 --> 00:11:13.390 align:start position:0% necessarily. What they do contain are closure<00:11:11.480> script<00:11:11.760> expressions<00:11:12.480> which<00:11:12.800> are 00:11:13.390 --> 00:11:13.400 align:start position:0% closure script expressions which are 00:11:13.400 --> 00:11:16.430 align:start position:0% closure script expressions which are analogous<00:11:14.000> to<00:11:14.560> the<00:11:14.680> formula<00:11:15.080> values<00:11:15.600> in<00:11:16.360> you 00:11:16.430 --> 00:11:16.440 align:start position:0% analogous to the formula values in you 00:11:16.440 --> 00:11:18.470 align:start position:0% analogous to the formula values in you know<00:11:16.520> an<00:11:16.760> Excel<00:11:17.080> spreadsheet.<00:11:18.120> So,<00:11:18.240> in<00:11:18.320> this 00:11:18.470 --> 00:11:18.480 align:start position:0% know an Excel spreadsheet. So, in this 00:11:18.480 --> 00:11:20.310 align:start position:0% know an Excel spreadsheet. So, in this case<00:11:18.800> we're<00:11:18.920> defining<00:11:19.400> an<00:11:19.480> input<00:11:19.800> cell<00:11:20.000> called 00:11:20.310 --> 00:11:20.320 align:start position:0% case we're defining an input cell called 00:11:20.320 --> 00:11:23.150 align:start position:0% case we're defining an input cell called N<00:11:21.120> giving<00:11:21.320> an<00:11:21.440> initial<00:11:21.720> value<00:11:21.960> of<00:11:22.040> zero. 00:11:23.150 --> 00:11:23.160 align:start position:0% N giving an initial value of zero. 00:11:23.160 --> 00:11:25.150 align:start position:0% N giving an initial value of zero. Then<00:11:23.400> we're<00:11:23.480> defining<00:11:24.120> a<00:11:24.240> formula<00:11:24.800> cell 00:11:25.150 --> 00:11:25.160 align:start position:0% Then we're defining a formula cell 00:11:25.160 --> 00:11:28.350 align:start position:0% Then we're defining a formula cell called<00:11:25.440> N<00:11:25.560> *<00:11:25.880> 5<00:11:26.839> and<00:11:27.000> we're<00:11:27.120> using<00:11:27.440> cell<00:11:27.880> equal 00:11:28.350 --> 00:11:28.360 align:start position:0% called N * 5 and we're using cell equal 00:11:28.360 --> 00:11:30.070 align:start position:0% called N * 5 and we're using cell equal which<00:11:28.520> is<00:11:28.720> the<00:11:28.880> cell<00:11:29.440> a<00:11:29.520> formula<00:11:29.880> cell 00:11:30.070 --> 00:11:30.080 align:start position:0% which is the cell a formula cell 00:11:30.080 --> 00:11:32.030 align:start position:0% which is the cell a formula cell constructor<00:11:30.640> macro<00:11:31.600> that<00:11:31.760> takes<00:11:31.960> an 00:11:32.030 --> 00:11:32.040 align:start position:0% constructor macro that takes an 00:11:32.040 --> 00:11:33.630 align:start position:0% constructor macro that takes an expression. 00:11:33.630 --> 00:11:33.640 align:start position:0% expression. 00:11:33.640 --> 00:11:34.830 align:start position:0% expression. And<00:11:33.760> at<00:11:33.840> this<00:11:34.040> point<00:11:34.240> we<00:11:34.360> can<00:11:34.480> differ 00:11:34.830 --> 00:11:34.840 align:start position:0% And at this point we can differ 00:11:34.840 --> 00:11:37.430 align:start position:0% And at this point we can differ dereference<00:11:35.440> either<00:11:35.720> n<00:11:36.040> or<00:11:36.240> n<00:11:36.360> *<00:11:36.640> 5<00:11:37.080> and<00:11:37.200> we'll 00:11:37.430 --> 00:11:37.440 align:start position:0% dereference either n or n * 5 and we'll 00:11:37.440 --> 00:11:40.390 align:start position:0% dereference either n or n * 5 and we'll see<00:11:37.640> values<00:11:38.000> that<00:11:38.120> are<00:11:38.200> consistent. 00:11:40.390 --> 00:11:40.400 align:start position:0% see values that are consistent. 00:11:40.400 --> 00:11:43.070 align:start position:0% see values that are consistent. If<00:11:40.520> we<00:11:40.640> swap<00:11:41.000> bang<00:11:41.200> on<00:11:41.360> n,<00:11:41.920> incrementing<00:11:42.440> the 00:11:43.070 --> 00:11:43.080 align:start position:0% If we swap bang on n, incrementing the 00:11:43.080 --> 00:11:44.630 align:start position:0% If we swap bang on n, incrementing the its<00:11:43.280> value, 00:11:44.630 --> 00:11:44.640 align:start position:0% its value, 00:11:44.640 --> 00:11:46.390 align:start position:0% its value, and<00:11:44.760> then<00:11:44.920> dereference<00:11:45.480> n<00:11:45.720> and<00:11:45.840> dereference<00:11:46.280> n 00:11:46.390 --> 00:11:46.400 align:start position:0% and then dereference n and dereference n 00:11:46.400 --> 00:11:48.470 align:start position:0% and then dereference n and dereference n *<00:11:46.640> 5,<00:11:47.640> we'll<00:11:47.760> see<00:11:47.880> that<00:11:48.040> n<00:11:48.200> has<00:11:48.360> been 00:11:48.470 --> 00:11:48.480 align:start position:0% * 5, we'll see that n has been 00:11:48.480 --> 00:11:51.470 align:start position:0% * 5, we'll see that n has been incremented<00:11:49.200> and<00:11:50.120> n<00:11:50.360> *<00:11:50.640> 5<00:11:50.960> is<00:11:51.080> somewhat 00:11:51.470 --> 00:11:51.480 align:start position:0% incremented and n * 5 is somewhat 00:11:51.480 --> 00:11:52.950 align:start position:0% incremented and n * 5 is somewhat magically,<00:11:51.960> but<00:11:52.280> in<00:11:52.400> that<00:11:52.680> awesome 00:11:52.950 --> 00:11:52.960 align:start position:0% magically, but in that awesome 00:11:52.960 --> 00:11:54.350 align:start position:0% magically, but in that awesome spreadsheet<00:11:53.400> way, 00:11:54.350 --> 00:11:54.360 align:start position:0% spreadsheet way, 00:11:54.360 --> 00:11:56.670 align:start position:0% spreadsheet way, uh<00:11:54.600> reflects<00:11:55.560> the<00:11:55.640> value.<00:11:56.160> And<00:11:56.360> that's<00:11:56.600> the 00:11:56.670 --> 00:11:56.680 align:start position:0% uh reflects the value. And that's the 00:11:56.680 --> 00:11:58.070 align:start position:0% uh reflects the value. And that's the value<00:11:56.960> we<00:11:57.080> established<00:11:57.760> through<00:11:57.920> our 00:11:58.070 --> 00:11:58.080 align:start position:0% value we established through our 00:11:58.080 --> 00:12:01.310 align:start position:0% value we established through our formula. 00:12:01.310 --> 00:12:01.320 align:start position:0% 00:12:01.320 --> 00:12:02.950 align:start position:0% Uh<00:12:01.800> the<00:12:02.000> the<00:12:02.120> same<00:12:02.280> way<00:12:02.360> there's<00:12:02.520> a<00:12:02.560> defc, 00:12:02.950 --> 00:12:02.960 align:start position:0% Uh the the same way there's a defc, 00:12:02.960 --> 00:12:04.590 align:start position:0% Uh the the same way there's a defc, there's<00:12:03.120> a<00:12:03.160> defc=<00:12:03.920> and<00:12:04.000> again<00:12:04.200> this<00:12:04.360> is<00:12:04.440> just 00:12:04.590 --> 00:12:04.600 align:start position:0% there's a defc= and again this is just 00:12:04.600 --> 00:12:06.070 align:start position:0% there's a defc= and again this is just sort<00:12:04.760> of<00:12:04.880> a 00:12:06.070 --> 00:12:06.080 align:start position:0% sort of a 00:12:06.080 --> 00:12:09.190 align:start position:0% sort of a having<00:12:06.280> fun<00:12:06.440> with<00:12:06.560> macros<00:12:06.960> little<00:12:07.120> exercise. 00:12:09.190 --> 00:12:09.200 align:start position:0% having fun with macros little exercise. 00:12:09.200 --> 00:12:10.790 align:start position:0% having fun with macros little exercise. Javelin<00:12:09.520> is<00:12:09.880> different<00:12:10.320> in<00:12:10.440> I<00:12:10.480> think<00:12:10.680> some 00:12:10.790 --> 00:12:10.800 align:start position:0% Javelin is different in I think some 00:12:10.800 --> 00:12:12.430 align:start position:0% Javelin is different in I think some interesting<00:12:11.200> ways<00:12:11.480> from<00:12:11.640> spreadsheets<00:12:12.240> that 00:12:12.430 --> 00:12:12.440 align:start position:0% interesting ways from spreadsheets that 00:12:12.440 --> 00:12:15.310 align:start position:0% interesting ways from spreadsheets that you<00:12:12.520> may<00:12:12.640> be<00:12:12.800> used<00:12:13.000> to.<00:12:13.400> The<00:12:13.520> first<00:12:14.080> and 00:12:15.310 --> 00:12:15.320 align:start position:0% you may be used to. The first and 00:12:15.320 --> 00:12:17.590 align:start position:0% you may be used to. The first and maybe<00:12:15.480> coolest<00:12:15.920> difference<00:12:16.280> is<00:12:16.400> that<00:12:16.720> cells 00:12:17.590 --> 00:12:17.600 align:start position:0% maybe coolest difference is that cells 00:12:17.600 --> 00:12:20.630 align:start position:0% maybe coolest difference is that cells in<00:12:17.760> a<00:12:17.800> spreadsheet,<00:12:18.880> like<00:12:19.040> we<00:12:19.160> have<00:12:19.320> in<00:12:19.440> Excel, 00:12:20.630 --> 00:12:20.640 align:start position:0% in a spreadsheet, like we have in Excel, 00:12:20.640 --> 00:12:22.150 align:start position:0% in a spreadsheet, like we have in Excel, can't<00:12:20.880> take<00:12:21.040> collection<00:12:21.440> values.<00:12:21.840> You<00:12:21.960> you 00:12:22.150 --> 00:12:22.160 align:start position:0% can't take collection values. You you 00:12:22.160 --> 00:12:25.070 align:start position:0% can't take collection values. You you can<00:12:22.280> put<00:12:22.440> numbers<00:12:22.800> and<00:12:22.920> strings,<00:12:23.880> but<00:12:24.840> putting 00:12:25.070 --> 00:12:25.080 align:start position:0% can put numbers and strings, but putting 00:12:25.080 --> 00:12:26.470 align:start position:0% can put numbers and strings, but putting collection<00:12:25.480> values<00:12:25.760> in<00:12:25.840> the<00:12:25.920> cell<00:12:26.240> is<00:12:26.360> not 00:12:26.470 --> 00:12:26.480 align:start position:0% collection values in the cell is not 00:12:26.480 --> 00:12:28.150 align:start position:0% collection values in the cell is not even<00:12:26.640> really<00:12:26.840> possible.<00:12:27.400> So,<00:12:27.760> people<00:12:28.040> have 00:12:28.150 --> 00:12:28.160 align:start position:0% even really possible. So, people have 00:12:28.160 --> 00:12:29.150 align:start position:0% even really possible. So, people have other<00:12:28.320> mechanisms<00:12:28.800> to<00:12:28.920> deal<00:12:29.040> with 00:12:29.150 --> 00:12:29.160 align:start position:0% other mechanisms to deal with 00:12:29.160 --> 00:12:31.230 align:start position:0% other mechanisms to deal with collections<00:12:29.680> like<00:12:30.080> ranges<00:12:30.840> and<00:12:31.000> pivot 00:12:31.230 --> 00:12:31.240 align:start position:0% collections like ranges and pivot 00:12:31.240 --> 00:12:32.870 align:start position:0% collections like ranges and pivot tables. 00:12:32.870 --> 00:12:32.880 align:start position:0% tables. 00:12:32.880 --> 00:12:34.390 align:start position:0% tables. Cells<00:12:33.200> in<00:12:33.400> in<00:12:33.560> ClojureScript<00:12:34.040> are<00:12:34.080> not<00:12:34.240> that 00:12:34.390 --> 00:12:34.400 align:start position:0% Cells in in ClojureScript are not that 00:12:34.400 --> 00:12:35.829 align:start position:0% Cells in in ClojureScript are not that way.<00:12:34.520> Like<00:12:34.800> any<00:12:35.000> other<00:12:35.200> Clojure<00:12:35.480> reference 00:12:35.829 --> 00:12:35.839 align:start position:0% way. Like any other Clojure reference 00:12:35.839 --> 00:12:37.190 align:start position:0% way. Like any other Clojure reference type,<00:12:36.080> that<00:12:36.240> you<00:12:36.280> can<00:12:36.400> put<00:12:36.560> any<00:12:36.760> value<00:12:37.080> in 00:12:37.190 --> 00:12:37.200 align:start position:0% type, that you can put any value in 00:12:37.200 --> 00:12:39.670 align:start position:0% type, that you can put any value in them,<00:12:37.360> including<00:12:38.000> other<00:12:38.200> cells,<00:12:39.040> functions, 00:12:39.670 --> 00:12:39.680 align:start position:0% them, including other cells, functions, 00:12:39.680 --> 00:12:41.110 align:start position:0% them, including other cells, functions, I<00:12:39.720> mean<00:12:39.880> anything<00:12:40.160> that's<00:12:40.320> a<00:12:40.360> value,<00:12:40.839> which<00:12:41.000> is 00:12:41.110 --> 00:12:41.120 align:start position:0% I mean anything that's a value, which is 00:12:41.120 --> 00:12:42.870 align:start position:0% I mean anything that's a value, which is everything<00:12:41.440> in<00:12:41.520> ClojureScript,<00:12:42.520> can<00:12:42.640> go<00:12:42.760> in<00:12:42.839> a 00:12:42.870 --> 00:12:42.880 align:start position:0% everything in ClojureScript, can go in a 00:12:42.880 --> 00:12:44.990 align:start position:0% everything in ClojureScript, can go in a cell. 00:12:44.990 --> 00:12:45.000 align:start position:0% cell. 00:12:45.000 --> 00:12:46.470 align:start position:0% cell. And<00:12:45.400> the<00:12:45.480> other<00:12:45.600> difference<00:12:45.920> is<00:12:46.000> that<00:12:46.160> unlike 00:12:46.470 --> 00:12:46.480 align:start position:0% And the other difference is that unlike 00:12:46.480 --> 00:12:49.630 align:start position:0% And the other difference is that unlike the<00:12:46.720> spreadsheets,<00:12:48.000> um 00:12:49.630 --> 00:12:49.640 align:start position:0% the spreadsheets, um 00:12:49.640 --> 00:12:50.470 align:start position:0% the spreadsheets, um uh 00:12:50.470 --> 00:12:50.480 align:start position:0% uh 00:12:50.480 --> 00:12:52.510 align:start position:0% uh grid,<00:12:51.160> the<00:12:51.240> global<00:12:51.600> scope<00:12:51.880> of<00:12:52.000> a<00:12:52.040> spreadsheet 00:12:52.510 --> 00:12:52.520 align:start position:0% grid, the global scope of a spreadsheet 00:12:52.520 --> 00:12:55.630 align:start position:0% grid, the global scope of a spreadsheet is<00:12:52.640> this<00:12:52.920> 2D<00:12:53.280> grid.<00:12:54.360> The<00:12:54.440> scopes<00:12:54.960> and<00:12:55.080> names<00:12:55.520> in 00:12:55.630 --> 00:12:55.640 align:start position:0% is this 2D grid. The scopes and names in 00:12:55.640 --> 00:12:57.470 align:start position:0% is this 2D grid. The scopes and names in Javelin<00:12:56.160> follow<00:12:56.480> ClojureScript's.<00:12:57.280> So,<00:12:57.400> you 00:12:57.470 --> 00:12:57.480 align:start position:0% Javelin follow ClojureScript's. So, you 00:12:57.480 --> 00:12:59.110 align:start position:0% Javelin follow ClojureScript's. So, you can<00:12:57.640> create<00:12:57.920> let<00:12:58.120> bound<00:12:58.480> cells,<00:12:58.920> that<00:12:59.040> you 00:12:59.110 --> 00:12:59.120 align:start position:0% can create let bound cells, that you 00:12:59.120 --> 00:13:00.190 align:start position:0% can create let bound cells, that you know,<00:12:59.200> cells<00:12:59.480> that<00:12:59.560> are<00:12:59.640> only<00:12:59.839> available 00:13:00.190 --> 00:13:00.200 align:start position:0% know, cells that are only available 00:13:00.200 --> 00:13:02.230 align:start position:0% know, cells that are only available inside<00:13:00.400> of<00:13:00.480> closure.<00:13:01.440> You<00:13:01.480> can<00:13:01.640> have<00:13:01.839> package 00:13:02.230 --> 00:13:02.240 align:start position:0% inside of closure. You can have package 00:13:02.240 --> 00:13:04.350 align:start position:0% inside of closure. You can have package cells<00:13:02.640> in<00:13:02.839> namespaces. 00:13:04.350 --> 00:13:04.360 align:start position:0% cells in namespaces. 00:13:04.360 --> 00:13:05.630 align:start position:0% cells in namespaces. So,<00:13:05.040> um 00:13:05.630 --> 00:13:05.640 align:start position:0% So, um 00:13:05.640 --> 00:13:07.030 align:start position:0% So, um that<00:13:05.920> approach<00:13:06.280> that<00:13:06.400> we<00:13:06.480> take<00:13:06.640> with<00:13:06.760> Javelin 00:13:07.030 --> 00:13:07.040 align:start position:0% that approach that we take with Javelin 00:13:07.040 --> 00:13:08.230 align:start position:0% that approach that we take with Javelin is<00:13:07.120> kind<00:13:07.280> of<00:13:07.360> similar<00:13:07.640> to<00:13:07.720> the<00:13:07.800> way<00:13:07.960> people 00:13:08.230 --> 00:13:08.240 align:start position:0% is kind of similar to the way people 00:13:08.240 --> 00:13:11.070 align:start position:0% is kind of similar to the way people work<00:13:08.400> with<00:13:08.600> sheets<00:13:08.960> or<00:13:09.080> worksheets<00:13:09.640> in<00:13:10.160> in<00:13:10.839> um 00:13:11.070 --> 00:13:11.080 align:start position:0% work with sheets or worksheets in in um 00:13:11.080 --> 00:13:14.350 align:start position:0% work with sheets or worksheets in in um spreadsheet<00:13:11.440> programs. 00:13:14.350 --> 00:13:14.360 align:start position:0% 00:13:14.360 --> 00:13:16.390 align:start position:0% So,<00:13:14.760> that<00:13:14.920> was<00:13:15.360> undead<00:13:15.839> technology<00:13:16.200> number 00:13:16.390 --> 00:13:16.400 align:start position:0% So, that was undead technology number 00:13:16.400 --> 00:13:18.390 align:start position:0% So, that was undead technology number one,<00:13:16.680> spreadsheets.<00:13:17.680> Uh<00:13:17.800> the<00:13:17.920> other<00:13:18.080> undead 00:13:18.390 --> 00:13:18.400 align:start position:0% one, spreadsheets. Uh the other undead 00:13:18.400 --> 00:13:19.670 align:start position:0% one, spreadsheets. Uh the other undead technology<00:13:18.839> which<00:13:19.000> we're<00:13:19.320> we're<00:13:19.440> probably 00:13:19.670 --> 00:13:19.680 align:start position:0% technology which we're we're probably 00:13:19.680 --> 00:13:21.910 align:start position:0% technology which we're we're probably more<00:13:19.839> familiar<00:13:20.080> with<00:13:20.280> is<00:13:20.440> Lisp.<00:13:21.000> Lisp,<00:13:21.680> like 00:13:21.910 --> 00:13:21.920 align:start position:0% more familiar with is Lisp. Lisp, like 00:13:21.920 --> 00:13:23.870 align:start position:0% more familiar with is Lisp. Lisp, like spreadsheets,<00:13:22.400> is<00:13:23.000> most<00:13:23.240> programmers<00:13:23.680> think 00:13:23.870 --> 00:13:23.880 align:start position:0% spreadsheets, is most programmers think 00:13:23.880 --> 00:13:26.430 align:start position:0% spreadsheets, is most programmers think sucks.<00:13:24.520> Of<00:13:24.560> course,<00:13:24.760> we<00:13:24.839> know<00:13:24.960> otherwise. 00:13:26.430 --> 00:13:26.440 align:start position:0% sucks. Of course, we know otherwise. 00:13:26.440 --> 00:13:29.190 align:start position:0% sucks. Of course, we know otherwise. Um<00:13:27.160> so,<00:13:27.560> I'm<00:13:27.640> going<00:13:27.760> to<00:13:27.840> let<00:13:28.200> Misha<00:13:28.640> uh 00:13:29.190 --> 00:13:29.200 align:start position:0% Um so, I'm going to let Misha uh 00:13:29.200 --> 00:13:32.230 align:start position:0% Um so, I'm going to let Misha uh teach<00:13:29.360> us<00:13:29.440> some<00:13:29.560> things<00:13:29.800> about<00:13:30.240> uh<00:13:30.760> part<00:13:30.960> two. 00:13:32.230 --> 00:13:32.240 align:start position:0% teach us some things about uh part two. 00:13:32.240 --> 00:13:34.150 align:start position:0% teach us some things about uh part two. Yeah,<00:13:32.320> so<00:13:32.640> uh<00:13:33.040> H<00:13:33.240> Lisp<00:13:33.520> is<00:13:33.680> kind<00:13:33.880> of<00:13:34.000> the 00:13:34.150 --> 00:13:34.160 align:start position:0% Yeah, so uh H Lisp is kind of the 00:13:34.160 --> 00:13:36.470 align:start position:0% Yeah, so uh H Lisp is kind of the charting<00:13:34.800> and<00:13:35.040> forms<00:13:35.600> the<00:13:35.720> charts<00:13:36.000> and<00:13:36.120> forms 00:13:36.470 --> 00:13:36.480 align:start position:0% charting and forms the charts and forms 00:13:36.480 --> 00:13:38.950 align:start position:0% charting and forms the charts and forms layer<00:13:37.240> of<00:13:37.520> the<00:13:37.640> spreadsheet. 00:13:38.950 --> 00:13:38.960 align:start position:0% layer of the spreadsheet. 00:13:38.960 --> 00:13:40.590 align:start position:0% layer of the spreadsheet. Uh<00:13:39.200> a<00:13:39.240> cool<00:13:39.440> thing<00:13:39.600> about<00:13:39.800> spreadsheets<00:13:40.360> is 00:13:40.590 --> 00:13:40.600 align:start position:0% Uh a cool thing about spreadsheets is 00:13:40.600 --> 00:13:42.950 align:start position:0% Uh a cool thing about spreadsheets is that<00:13:41.520> given<00:13:41.840> a<00:13:41.880> spreadsheet<00:13:42.440> that<00:13:42.600> has 00:13:42.950 --> 00:13:42.960 align:start position:0% that given a spreadsheet that has 00:13:42.960 --> 00:13:45.470 align:start position:0% that given a spreadsheet that has formulas<00:13:43.480> you<00:13:43.560> might<00:13:43.720> not<00:13:43.920> even<00:13:44.080> understand, 00:13:45.470 --> 00:13:45.480 align:start position:0% formulas you might not even understand, 00:13:45.480 --> 00:13:47.430 align:start position:0% formulas you might not even understand, you<00:13:45.560> might<00:13:45.760> be<00:13:45.880> presenting<00:13:46.560> something<00:13:47.000> to<00:13:47.320> the 00:13:47.430 --> 00:13:47.440 align:start position:0% you might be presenting something to the 00:13:47.440 --> 00:13:49.550 align:start position:0% you might be presenting something to the board<00:13:47.760> of<00:13:47.840> directors<00:13:48.720> or,<00:13:49.000> you<00:13:49.120> know,<00:13:49.280> like<00:13:49.480> in 00:13:49.550 --> 00:13:49.560 align:start position:0% board of directors or, you know, like in 00:13:49.560 --> 00:13:52.470 align:start position:0% board of directors or, you know, like in the<00:13:50.040> on<00:13:50.200> TV,<00:13:51.160> somebody<00:13:51.400> always<00:13:51.600> has<00:13:51.720> to<00:13:51.800> make<00:13:52.000> a 00:13:52.470 --> 00:13:52.480 align:start position:0% the on TV, somebody always has to make a 00:13:52.480 --> 00:13:54.550 align:start position:0% the on TV, somebody always has to make a make<00:13:52.640> a<00:13:52.720> report<00:13:53.240> by<00:13:53.440> Friday<00:13:53.960> or<00:13:54.080> whatever<00:13:54.440> and 00:13:54.550 --> 00:13:54.560 align:start position:0% make a report by Friday or whatever and 00:13:54.560 --> 00:13:55.790 align:start position:0% make a report by Friday or whatever and they<00:13:54.600> have<00:13:54.720> to<00:13:54.800> stay<00:13:54.960> up<00:13:55.080> late.<00:13:55.600> But,<00:13:55.680> what 00:13:55.790 --> 00:13:55.800 align:start position:0% they have to stay up late. But, what 00:13:55.800 --> 00:13:56.870 align:start position:0% they have to stay up late. But, what they're<00:13:55.880> doing<00:13:56.120> is<00:13:56.200> they're<00:13:56.600> taking<00:13:56.840> a 00:13:56.870 --> 00:13:56.880 align:start position:0% they're doing is they're taking a 00:13:56.880 --> 00:13:58.350 align:start position:0% they're doing is they're taking a spreadsheet<00:13:57.600> and<00:13:57.880> they<00:13:57.920> have<00:13:58.040> a<00:13:58.120> Word 00:13:58.350 --> 00:13:58.360 align:start position:0% spreadsheet and they have a Word 00:13:58.360 --> 00:13:59.790 align:start position:0% spreadsheet and they have a Word document,<00:13:58.840> they're<00:13:58.920> putting<00:13:59.160> content<00:13:59.640> in 00:13:59.790 --> 00:13:59.800 align:start position:0% document, they're putting content in 00:13:59.800 --> 00:14:01.830 align:start position:0% document, they're putting content in there,<00:14:00.320> making<00:14:00.600> graphs,<00:14:01.160> things<00:14:01.400> like<00:14:01.560> that, 00:14:01.830 --> 00:14:01.840 align:start position:0% there, making graphs, things like that, 00:14:01.840 --> 00:14:03.550 align:start position:0% there, making graphs, things like that, and<00:14:02.120> pulling<00:14:02.400> them<00:14:02.520> into<00:14:02.680> their 00:14:03.550 --> 00:14:03.560 align:start position:0% and pulling them into their 00:14:03.560 --> 00:14:04.630 align:start position:0% and pulling them into their into<00:14:03.720> their<00:14:03.840> Word<00:14:04.040> document<00:14:04.440> that<00:14:04.560> they're 00:14:04.630 --> 00:14:04.640 align:start position:0% into their Word document that they're 00:14:04.640 --> 00:14:06.390 align:start position:0% into their Word document that they're going<00:14:04.760> to<00:14:04.840> show<00:14:05.040> to<00:14:05.160> somebody<00:14:05.800> to<00:14:05.920> hopefully 00:14:06.390 --> 00:14:06.400 align:start position:0% going to show to somebody to hopefully 00:14:06.400 --> 00:14:08.470 align:start position:0% going to show to somebody to hopefully elicit<00:14:06.760> some<00:14:06.920> kind<00:14:07.080> of<00:14:07.200> action. 00:14:08.470 --> 00:14:08.480 align:start position:0% elicit some kind of action. 00:14:08.480 --> 00:14:10.430 align:start position:0% elicit some kind of action. And<00:14:08.800> that's<00:14:09.080> really<00:14:09.360> what,<00:14:09.920> you<00:14:10.040> know,<00:14:10.160> a<00:14:10.240> web 00:14:10.430 --> 00:14:10.440 align:start position:0% And that's really what, you know, a web 00:14:10.440 --> 00:14:13.190 align:start position:0% And that's really what, you know, a web application<00:14:11.000> is<00:14:11.240> too,<00:14:11.720> the<00:14:11.840> UI<00:14:12.160> of<00:14:12.280> it. 00:14:13.190 --> 00:14:13.200 align:start position:0% application is too, the UI of it. 00:14:13.200 --> 00:14:16.510 align:start position:0% application is too, the UI of it. And<00:14:13.720> so,<00:14:14.200> H<00:14:14.440> Lisp<00:14:14.720> is<00:14:15.040> that<00:14:15.440> part<00:14:15.720> of<00:14:15.800> it,<00:14:16.360> the 00:14:16.510 --> 00:14:16.520 align:start position:0% And so, H Lisp is that part of it, the 00:14:16.520 --> 00:14:18.230 align:start position:0% And so, H Lisp is that part of it, the the<00:14:16.640> charting<00:14:17.120> part. 00:14:18.230 --> 00:14:18.240 align:start position:0% the charting part. 00:14:18.240 --> 00:14:19.990 align:start position:0% the charting part. So,<00:14:18.480> HTML, 00:14:19.990 --> 00:14:20.000 align:start position:0% So, HTML, 00:14:20.000 --> 00:14:21.830 align:start position:0% So, HTML, uh<00:14:20.320> when<00:14:20.480> you<00:14:20.560> load<00:14:20.760> index.html<00:14:21.600> into<00:14:21.760> a 00:14:21.830 --> 00:14:21.840 align:start position:0% uh when you load index.html into a 00:14:21.840 --> 00:14:23.790 align:start position:0% uh when you load index.html into a browser,<00:14:22.320> the<00:14:22.400> browser<00:14:22.920> normally<00:14:23.400> reads<00:14:23.760> a 00:14:23.790 --> 00:14:23.800 align:start position:0% browser, the browser normally reads a 00:14:23.800 --> 00:14:25.830 align:start position:0% browser, the browser normally reads a bunch<00:14:24.120> of<00:14:24.320> HTML<00:14:24.680> markup 00:14:25.830 --> 00:14:25.840 align:start position:0% bunch of HTML markup 00:14:25.840 --> 00:14:28.310 align:start position:0% bunch of HTML markup and<00:14:26.000> loads<00:14:26.200> it<00:14:26.280> into<00:14:26.440> the<00:14:26.520> DOM. 00:14:28.310 --> 00:14:28.320 align:start position:0% and loads it into the DOM. 00:14:28.320 --> 00:14:30.829 align:start position:0% and loads it into the DOM. But,<00:14:28.800> this<00:14:29.040> HTML<00:14:29.600> is<00:14:29.760> already<00:14:30.200> a<00:14:30.280> programming 00:14:30.829 --> 00:14:30.839 align:start position:0% But, this HTML is already a programming 00:14:30.839 --> 00:14:32.829 align:start position:0% But, this HTML is already a programming language.<00:14:31.640> It's<00:14:31.760> not<00:14:31.880> a<00:14:31.920> very<00:14:32.080> good<00:14:32.240> one,<00:14:32.560> but 00:14:32.829 --> 00:14:32.839 align:start position:0% language. It's not a very good one, but 00:14:32.839 --> 00:14:35.070 align:start position:0% language. It's not a very good one, but it<00:14:33.000> definitely<00:14:33.520> is.<00:14:34.320> Like,<00:14:34.480> the<00:14:34.560> browser<00:14:34.920> has 00:14:35.070 --> 00:14:35.080 align:start position:0% it definitely is. Like, the browser has 00:14:35.080 --> 00:14:37.230 align:start position:0% it definitely is. Like, the browser has to<00:14:35.200> parse<00:14:35.520> this<00:14:35.720> HTML<00:14:36.160> markup,<00:14:36.640> which<00:14:36.839> is<00:14:37.000> kind 00:14:37.230 --> 00:14:37.240 align:start position:0% to parse this HTML markup, which is kind 00:14:37.240 --> 00:14:38.829 align:start position:0% to parse this HTML markup, which is kind of<00:14:37.360> weird,<00:14:37.760> and<00:14:37.880> then<00:14:38.320> it<00:14:38.400> has<00:14:38.520> to<00:14:38.600> build<00:14:38.800> a 00:14:38.829 --> 00:14:38.839 align:start position:0% of weird, and then it has to build a 00:14:38.839 --> 00:14:40.750 align:start position:0% of weird, and then it has to build a tree<00:14:39.240> and<00:14:39.360> it<00:14:39.400> has<00:14:39.520> to<00:14:39.640> walk<00:14:39.880> the<00:14:40.000> tree,<00:14:40.440> create 00:14:40.750 --> 00:14:40.760 align:start position:0% tree and it has to walk the tree, create 00:14:40.760 --> 00:14:43.190 align:start position:0% tree and it has to walk the tree, create DOM<00:14:41.000> elements,<00:14:41.960> and<00:14:42.600> uh<00:14:42.680> you<00:14:42.760> know,<00:14:42.880> put<00:14:43.080> them 00:14:43.190 --> 00:14:43.200 align:start position:0% DOM elements, and uh you know, put them 00:14:43.200 --> 00:14:45.110 align:start position:0% DOM elements, and uh you know, put them in<00:14:43.280> the<00:14:43.360> DOM. 00:14:45.110 --> 00:14:45.120 align:start position:0% in the DOM. 00:14:45.120 --> 00:14:48.230 align:start position:0% in the DOM. And<00:14:45.560> so,<00:14:46.360> what's,<00:14:47.320> I<00:14:47.360> mean,<00:14:47.560> luckily,<00:14:48.000> thank 00:14:48.230 --> 00:14:48.240 align:start position:0% And so, what's, I mean, luckily, thank 00:14:48.240 --> 00:14:49.350 align:start position:0% And so, what's, I mean, luckily, thank God, 00:14:49.350 --> 00:14:49.360 align:start position:0% God, 00:14:49.360 --> 00:14:50.590 align:start position:0% God, uh 00:14:50.590 --> 00:14:50.600 align:start position:0% uh 00:14:50.600 --> 00:14:52.310 align:start position:0% uh well,<00:14:50.760> sorry.<00:14:51.200> So, 00:14:52.310 --> 00:14:52.320 align:start position:0% well, sorry. So, 00:14:52.320 --> 00:14:54.350 align:start position:0% well, sorry. So, unfortunately,<00:14:53.760> uh<00:14:53.880> it<00:14:53.960> doesn't<00:14:54.200> have<00:14:54.320> a 00:14:54.350 --> 00:14:54.360 align:start position:0% unfortunately, uh it doesn't have a 00:14:54.360 --> 00:14:55.829 align:start position:0% unfortunately, uh it doesn't have a means<00:14:54.600> of<00:14:54.680> abstraction.<00:14:55.320> So,<00:14:55.440> there's<00:14:55.600> no<00:14:55.720> way 00:14:55.829 --> 00:14:55.839 align:start position:0% means of abstraction. So, there's no way 00:14:55.839 --> 00:14:58.910 align:start position:0% means of abstraction. So, there's no way to<00:14:55.920> define<00:14:56.320> something<00:14:56.600> new<00:14:56.920> in<00:14:57.040> HTML<00:14:57.480> markup. 00:14:58.910 --> 00:14:58.920 align:start position:0% to define something new in HTML markup. 00:14:58.920 --> 00:15:00.230 align:start position:0% to define something new in HTML markup. There's<00:14:59.040> no<00:14:59.160> access<00:14:59.480> to<00:14:59.600> the<00:14:59.680> JavaScript 00:15:00.230 --> 00:15:00.240 align:start position:0% There's no access to the JavaScript 00:15:00.240 --> 00:15:02.470 align:start position:0% There's no access to the JavaScript environment,<00:15:01.120> uh<00:15:01.320> which<00:15:01.520> was<00:15:01.720> kind<00:15:01.960> of<00:15:02.120> bolted 00:15:02.470 --> 00:15:02.480 align:start position:0% environment, uh which was kind of bolted 00:15:02.480 --> 00:15:05.190 align:start position:0% environment, uh which was kind of bolted on<00:15:02.680> after<00:15:03.000> HTML<00:15:03.440> already<00:15:03.720> existed.<00:15:04.800> So,<00:15:05.080> you 00:15:05.190 --> 00:15:05.200 align:start position:0% on after HTML already existed. So, you 00:15:05.200 --> 00:15:07.230 align:start position:0% on after HTML already existed. So, you can<00:15:05.320> create<00:15:05.600> all<00:15:05.680> this<00:15:05.839> stuff<00:15:06.080> in<00:15:06.160> the<00:15:06.240> DOM, 00:15:07.230 --> 00:15:07.240 align:start position:0% can create all this stuff in the DOM, 00:15:07.240 --> 00:15:09.710 align:start position:0% can create all this stuff in the DOM, but<00:15:07.760> there's<00:15:07.960> no<00:15:08.320> real<00:15:08.600> linkage<00:15:09.200> to<00:15:09.600> the 00:15:09.710 --> 00:15:09.720 align:start position:0% but there's no real linkage to the 00:15:09.720 --> 00:15:11.710 align:start position:0% but there's no real linkage to the dynamic<00:15:10.160> environment,<00:15:10.880> JavaScript,<00:15:11.600> and 00:15:11.710 --> 00:15:11.720 align:start position:0% dynamic environment, JavaScript, and 00:15:11.720 --> 00:15:13.550 align:start position:0% dynamic environment, JavaScript, and there<00:15:11.800> are<00:15:11.839> no<00:15:11.960> scopes.<00:15:12.839> So,<00:15:12.960> that<00:15:13.120> means<00:15:13.400> that 00:15:13.550 --> 00:15:13.560 align:start position:0% there are no scopes. So, that means that 00:15:13.560 --> 00:15:15.630 align:start position:0% there are no scopes. So, that means that you<00:15:13.640> just<00:15:13.960> are<00:15:14.040> basically<00:15:14.480> dumping<00:15:14.880> this 00:15:15.630 --> 00:15:15.640 align:start position:0% you just are basically dumping this 00:15:15.640 --> 00:15:17.430 align:start position:0% you just are basically dumping this everything<00:15:15.960> into<00:15:16.120> this<00:15:16.280> global<00:15:16.640> tree<00:15:17.320> that 00:15:17.430 --> 00:15:17.440 align:start position:0% everything into this global tree that 00:15:17.440 --> 00:15:18.990 align:start position:0% everything into this global tree that you<00:15:17.520> then<00:15:17.720> have<00:15:18.000> to 00:15:18.990 --> 00:15:19.000 align:start position:0% you then have to 00:15:19.000 --> 00:15:21.030 align:start position:0% you then have to fish<00:15:19.160> around<00:15:19.560> in<00:15:20.120> using<00:15:20.440> selectors<00:15:20.960> or 00:15:21.030 --> 00:15:21.040 align:start position:0% fish around in using selectors or 00:15:21.040 --> 00:15:24.030 align:start position:0% fish around in using selectors or something<00:15:21.320> to<00:15:21.520> find<00:15:21.760> things. 00:15:24.030 --> 00:15:24.040 align:start position:0% something to find things. 00:15:24.040 --> 00:15:25.750 align:start position:0% something to find things. But<00:15:24.240> thank<00:15:24.440> God, 00:15:25.750 --> 00:15:25.760 align:start position:0% But thank God, 00:15:25.760 --> 00:15:30.270 align:start position:0% But thank God, HTML<00:15:26.480> is<00:15:26.760> kind<00:15:27.000> of<00:15:27.120> lispy,<00:15:28.160> so<00:15:29.240> uh<00:15:30.040> you<00:15:30.160> know 00:15:30.270 --> 00:15:30.280 align:start position:0% HTML is kind of lispy, so uh you know 00:15:30.280 --> 00:15:31.950 align:start position:0% HTML is kind of lispy, so uh you know what<00:15:30.400> to<00:15:30.520> do. 00:15:31.950 --> 00:15:31.960 align:start position:0% what to do. 00:15:31.960 --> 00:15:32.990 align:start position:0% what to do. Um 00:15:32.990 --> 00:15:33.000 align:start position:0% Um 00:15:33.000 --> 00:15:35.670 align:start position:0% Um these<00:15:33.400> this<00:15:33.600> HTML<00:15:34.080> markup<00:15:34.440> over<00:15:34.600> here,<00:15:35.520> you 00:15:35.670 --> 00:15:35.680 align:start position:0% these this HTML markup over here, you 00:15:35.680 --> 00:15:37.630 align:start position:0% these this HTML markup over here, you can<00:15:35.800> see<00:15:35.960> that<00:15:36.120> it's<00:15:36.520> syntactically 00:15:37.630 --> 00:15:37.640 align:start position:0% can see that it's syntactically 00:15:37.640 --> 00:15:39.950 align:start position:0% can see that it's syntactically equivalent<00:15:38.280> to<00:15:38.520> this<00:15:38.720> Lisp<00:15:39.200> markup.<00:15:39.720> I<00:15:39.760> mean, 00:15:39.950 --> 00:15:39.960 align:start position:0% equivalent to this Lisp markup. I mean, 00:15:39.960 --> 00:15:41.630 align:start position:0% equivalent to this Lisp markup. I mean, people<00:15:40.200> have<00:15:40.320> suggested<00:15:40.920> S-expressions 00:15:41.630 --> 00:15:41.640 align:start position:0% people have suggested S-expressions 00:15:41.640 --> 00:15:44.510 align:start position:0% people have suggested S-expressions instead<00:15:42.000> of,<00:15:42.480> you<00:15:42.600> know,<00:15:42.720> XML<00:15:43.800> syntax<00:15:44.360> for<00:15:44.480> a 00:15:44.510 --> 00:15:44.520 align:start position:0% instead of, you know, XML syntax for a 00:15:44.520 --> 00:15:45.950 align:start position:0% instead of, you know, XML syntax for a long<00:15:44.680> time. 00:15:45.950 --> 00:15:45.960 align:start position:0% long time. 00:15:45.960 --> 00:15:47.670 align:start position:0% long time. But<00:15:46.320> what's<00:15:46.480> interesting<00:15:46.920> in<00:15:47.000> ClojureScript 00:15:47.670 --> 00:15:47.680 align:start position:0% But what's interesting in ClojureScript 00:15:47.680 --> 00:15:49.350 align:start position:0% But what's interesting in ClojureScript is<00:15:47.800> that<00:15:48.080> you<00:15:48.160> can<00:15:48.280> actually<00:15:48.640> implement<00:15:49.120> these 00:15:49.350 --> 00:15:49.360 align:start position:0% is that you can actually implement these 00:15:49.360 --> 00:15:51.950 align:start position:0% is that you can actually implement these things,<00:15:49.720> implement<00:15:50.080> the<00:15:50.160> semantic<00:15:50.720> as<00:15:50.880> well. 00:15:51.950 --> 00:15:51.960 align:start position:0% things, implement the semantic as well. 00:15:51.960 --> 00:15:53.310 align:start position:0% things, implement the semantic as well. So, 00:15:53.310 --> 00:15:53.320 align:start position:0% So, 00:15:53.320 --> 00:15:56.270 align:start position:0% So, uh<00:15:53.400> in<00:15:53.720> H<00:15:53.880> Lisp,<00:15:54.320> div<00:15:54.720> is<00:15:54.920> actually<00:15:55.320> a<00:15:55.400> function 00:15:56.270 --> 00:15:56.280 align:start position:0% uh in H Lisp, div is actually a function 00:15:56.280 --> 00:15:59.910 align:start position:0% uh in H Lisp, div is actually a function which<00:15:56.520> returns<00:15:57.120> a<00:15:57.160> DOM<00:15:57.480> element. 00:15:59.910 --> 00:15:59.920 align:start position:0% which returns a DOM element. 00:15:59.920 --> 00:16:01.710 align:start position:0% which returns a DOM element. And<00:16:00.600> uh<00:16:00.680> this<00:16:00.800> is<00:16:00.880> all<00:16:01.000> done<00:16:01.200> by<00:16:01.280> the<00:16:01.400> Hoplon 00:16:01.710 --> 00:16:01.720 align:start position:0% And uh this is all done by the Hoplon 00:16:01.720 --> 00:16:04.630 align:start position:0% And uh this is all done by the Hoplon compiler,<00:16:02.680> which<00:16:02.920> takes<00:16:03.760> uh<00:16:03.920> you<00:16:04.000> know,<00:16:04.320> .hl 00:16:04.630 --> 00:16:04.640 align:start position:0% compiler, which takes uh you know, .hl 00:16:04.640 --> 00:16:06.790 align:start position:0% compiler, which takes uh you know, .hl files,<00:16:05.560> and<00:16:05.720> for<00:16:05.880> each<00:16:06.000> one<00:16:06.120> of<00:16:06.200> those,<00:16:06.600> which 00:16:06.790 --> 00:16:06.800 align:start position:0% files, and for each one of those, which 00:16:06.800 --> 00:16:08.870 align:start position:0% files, and for each one of those, which is<00:16:07.360> uh<00:16:07.680> you<00:16:07.760> know,<00:16:07.920> a<00:16:07.960> page,<00:16:08.520> the<00:16:08.600> unit<00:16:08.800> of 00:16:08.870 --> 00:16:08.880 align:start position:0% is uh you know, a page, the unit of 00:16:08.880 --> 00:16:11.070 align:start position:0% is uh you know, a page, the unit of compilation<00:16:09.320> is<00:16:09.400> a<00:16:09.440> page,<00:16:10.360> uh<00:16:10.600> it<00:16:10.720> emits<00:16:10.960> an 00:16:11.070 --> 00:16:11.080 align:start position:0% compilation is a page, uh it emits an 00:16:11.080 --> 00:16:13.830 align:start position:0% compilation is a page, uh it emits an HTML<00:16:11.640> bootstrapping<00:16:12.360> kind<00:16:12.560> of<00:16:12.640> minimal<00:16:13.480> file 00:16:13.830 --> 00:16:13.840 align:start position:0% HTML bootstrapping kind of minimal file 00:16:13.840 --> 00:16:16.110 align:start position:0% HTML bootstrapping kind of minimal file just<00:16:14.080> to<00:16:14.200> load<00:16:14.680> a<00:16:14.800> JavaScript<00:16:15.320> file,<00:16:15.920> which 00:16:16.110 --> 00:16:16.120 align:start position:0% just to load a JavaScript file, which 00:16:16.120 --> 00:16:18.510 align:start position:0% just to load a JavaScript file, which contains<00:16:16.520> all<00:16:16.600> the<00:16:16.680> compiled<00:16:17.240> ClojureScript, 00:16:18.510 --> 00:16:18.520 align:start position:0% contains all the compiled ClojureScript, 00:16:18.520 --> 00:16:20.790 align:start position:0% contains all the compiled ClojureScript, and<00:16:18.840> the<00:16:18.920> DOM's<00:16:19.200> actually<00:16:19.480> built<00:16:19.680> at<00:16:19.800> run<00:16:20.000> time 00:16:20.790 --> 00:16:20.800 align:start position:0% and the DOM's actually built at run time 00:16:20.800 --> 00:16:22.710 align:start position:0% and the DOM's actually built at run time via<00:16:21.040> a<00:16:21.080> program.<00:16:22.240> And<00:16:22.360> the<00:16:22.440> front<00:16:22.600> end 00:16:22.710 --> 00:16:22.720 align:start position:0% via a program. And the front end 00:16:22.720 --> 00:16:24.230 align:start position:0% via a program. And the front end compiles<00:16:23.160> to<00:16:23.240> just<00:16:23.440> static<00:16:23.760> HTML<00:16:24.160> and 00:16:24.230 --> 00:16:24.240 align:start position:0% compiles to just static HTML and 00:16:24.240 --> 00:16:26.110 align:start position:0% compiles to just static HTML and JavaScript,<00:16:24.720> so<00:16:24.800> you<00:16:24.880> could<00:16:25.040> like<00:16:25.640> host<00:16:25.920> it<00:16:26.000> on 00:16:26.110 --> 00:16:26.120 align:start position:0% JavaScript, so you could like host it on 00:16:26.120 --> 00:16:28.350 align:start position:0% JavaScript, so you could like host it on S3<00:16:26.640> or<00:16:27.000> whatever. 00:16:28.350 --> 00:16:28.360 align:start position:0% S3 or whatever. 00:16:28.360 --> 00:16:30.270 align:start position:0% S3 or whatever. So,<00:16:28.480> this<00:16:28.600> is<00:16:28.680> an<00:16:28.760> example<00:16:29.200> page. 00:16:30.270 --> 00:16:30.280 align:start position:0% So, this is an example page. 00:16:30.280 --> 00:16:32.630 align:start position:0% So, this is an example page. Uh<00:16:30.480> this<00:16:30.600> is<00:16:30.680> kind<00:16:30.839> of<00:16:31.000> what,<00:16:31.800> you<00:16:31.880> know,<00:16:32.560> a 00:16:32.630 --> 00:16:32.640 align:start position:0% Uh this is kind of what, you know, a 00:16:32.640 --> 00:16:35.870 align:start position:0% Uh this is kind of what, you know, a page<00:16:32.920> normally<00:16:33.280> looks<00:16:33.520> like<00:16:33.680> simplified,<00:16:34.760> but 00:16:35.870 --> 00:16:35.880 align:start position:0% page normally looks like simplified, but 00:16:35.880 --> 00:16:36.990 align:start position:0% page normally looks like simplified, but uh 00:16:36.990 --> 00:16:37.000 align:start position:0% uh 00:16:37.000 --> 00:16:39.230 align:start position:0% uh you<00:16:37.160> can<00:16:37.280> actually<00:16:37.720> also<00:16:38.000> do<00:16:38.200> this<00:16:38.400> in<00:16:38.720> HTML 00:16:39.230 --> 00:16:39.240 align:start position:0% you can actually also do this in HTML 00:16:39.240 --> 00:16:41.750 align:start position:0% you can actually also do this in HTML syntax.<00:16:40.080> The<00:16:40.240> Hoplon<00:16:40.560> compiler<00:16:41.560> just 00:16:41.750 --> 00:16:41.760 align:start position:0% syntax. The Hoplon compiler just 00:16:41.760 --> 00:16:43.310 align:start position:0% syntax. The Hoplon compiler just compiles<00:16:42.120> it<00:16:42.200> all<00:16:42.280> to<00:16:42.360> ClojureScript<00:16:42.839> anyway. 00:16:43.310 --> 00:16:43.320 align:start position:0% compiles it all to ClojureScript anyway. 00:16:43.320 --> 00:16:44.430 align:start position:0% compiles it all to ClojureScript anyway. So,<00:16:43.480> that's<00:16:43.640> cool.<00:16:43.800> You<00:16:43.880> could<00:16:44.040> use<00:16:44.200> your 00:16:44.430 --> 00:16:44.440 align:start position:0% So, that's cool. You could use your 00:16:44.440 --> 00:16:45.630 align:start position:0% So, that's cool. You could use your tools,<00:16:44.800> like<00:16:44.920> if<00:16:45.000> you<00:16:45.040> use<00:16:45.200> Haml<00:16:45.520> or 00:16:45.630 --> 00:16:45.640 align:start position:0% tools, like if you use Haml or 00:16:45.640 --> 00:16:46.710 align:start position:0% tools, like if you use Haml or something. 00:16:46.710 --> 00:16:46.720 align:start position:0% something. 00:16:46.720 --> 00:16:48.950 align:start position:0% something. You<00:16:46.880> could<00:16:46.960> do<00:16:47.080> that. 00:16:48.950 --> 00:16:48.960 align:start position:0% You could do that. 00:16:48.960 --> 00:16:51.550 align:start position:0% You could do that. Uh<00:16:49.240> a<00:16:49.320> tricky<00:16:49.600> thing<00:16:50.080> about,<00:16:50.680> you<00:16:50.760> know, 00:16:51.550 --> 00:16:51.560 align:start position:0% Uh a tricky thing about, you know, 00:16:51.560 --> 00:16:54.470 align:start position:0% Uh a tricky thing about, you know, making<00:16:52.240> HTML<00:16:52.760> into<00:16:52.960> Lisp<00:16:53.320> or<00:16:53.400> Lisp<00:16:53.640> into<00:16:53.800> HTML 00:16:54.470 --> 00:16:54.480 align:start position:0% making HTML into Lisp or Lisp into HTML 00:16:54.480 --> 00:16:56.270 align:start position:0% making HTML into Lisp or Lisp into HTML is<00:16:55.120> uh<00:16:55.200> how<00:16:55.320> to<00:16:55.440> deal<00:16:55.520> with<00:16:55.680> attributes,<00:16:56.160> which 00:16:56.270 --> 00:16:56.280 align:start position:0% is uh how to deal with attributes, which 00:16:56.280 --> 00:16:58.190 align:start position:0% is uh how to deal with attributes, which is<00:16:56.360> sort<00:16:56.480> of<00:16:56.560> like<00:16:56.680> metadata<00:16:57.400> on<00:16:57.600> functions<00:16:58.120> in 00:16:58.190 --> 00:16:58.200 align:start position:0% is sort of like metadata on functions in 00:16:58.200 --> 00:17:01.350 align:start position:0% is sort of like metadata on functions in a<00:16:58.240> way,<00:16:59.040> uh<00:16:59.440> on<00:16:59.600> function<00:16:59.920> calls,<00:17:00.280> rather.<00:17:01.120> And 00:17:01.350 --> 00:17:01.360 align:start position:0% a way, uh on function calls, rather. And 00:17:01.360 --> 00:17:02.630 align:start position:0% a way, uh on function calls, rather. And so,<00:17:01.520> the<00:17:01.640> way<00:17:01.760> we<00:17:01.880> do<00:17:02.040> it<00:17:02.120> is<00:17:02.280> you<00:17:02.360> can<00:17:02.440> either 00:17:02.630 --> 00:17:02.640 align:start position:0% so, the way we do it is you can either 00:17:02.640 --> 00:17:04.829 align:start position:0% so, the way we do it is you can either pass<00:17:02.880> in<00:17:02.960> a<00:17:03.000> map<00:17:03.320> as<00:17:03.440> the<00:17:03.520> first<00:17:03.839> argument,<00:17:04.640> or 00:17:04.829 --> 00:17:04.839 align:start position:0% pass in a map as the first argument, or 00:17:04.839 --> 00:17:07.910 align:start position:0% pass in a map as the first argument, or just<00:17:05.120> some<00:17:05.319> keyword-value<00:17:06.400> pairs,<00:17:07.160> and<00:17:07.319> it'll 00:17:07.910 --> 00:17:07.920 align:start position:0% just some keyword-value pairs, and it'll 00:17:07.920 --> 00:17:09.630 align:start position:0% just some keyword-value pairs, and it'll It's<00:17:08.079> unambiguous<00:17:08.720> because<00:17:09.240> we<00:17:09.360> know<00:17:09.480> that 00:17:09.630 --> 00:17:09.640 align:start position:0% It's unambiguous because we know that 00:17:09.640 --> 00:17:11.910 align:start position:0% It's unambiguous because we know that keywords<00:17:10.120> can't<00:17:10.439> be<00:17:10.560> children<00:17:11.640> of<00:17:11.839> an 00:17:11.910 --> 00:17:11.920 align:start position:0% keywords can't be children of an 00:17:11.920 --> 00:17:14.150 align:start position:0% keywords can't be children of an element. 00:17:14.150 --> 00:17:14.160 align:start position:0% element. 00:17:14.160 --> 00:17:15.350 align:start position:0% element. Uh<00:17:14.400> but<00:17:14.520> they<00:17:14.560> don't<00:17:14.760> have<00:17:14.880> to<00:17:14.959> be<00:17:15.040> strings. 00:17:15.350 --> 00:17:15.360 align:start position:0% Uh but they don't have to be strings. 00:17:15.360 --> 00:17:16.790 align:start position:0% Uh but they don't have to be strings. The<00:17:15.439> values<00:17:15.839> could<00:17:16.000> be<00:17:16.120> other<00:17:16.319> things,<00:17:16.640> which 00:17:16.790 --> 00:17:16.800 align:start position:0% The values could be other things, which 00:17:16.800 --> 00:17:18.150 align:start position:0% The values could be other things, which we'll<00:17:16.920> see<00:17:17.040> later. 00:17:18.150 --> 00:17:18.160 align:start position:0% we'll see later. 00:17:18.160 --> 00:17:19.990 align:start position:0% we'll see later. Uh<00:17:18.240> there's<00:17:18.439> no<00:17:18.560> boxing<00:17:19.000> or<00:17:19.120> indirection<00:17:19.760> or 00:17:19.990 --> 00:17:20.000 align:start position:0% Uh there's no boxing or indirection or 00:17:20.000 --> 00:17:21.590 align:start position:0% Uh there's no boxing or indirection or virtual<00:17:20.360> DOMs<00:17:20.680> or<00:17:20.760> anything<00:17:21.000> like<00:17:21.160> that.<00:17:21.439> When 00:17:21.590 --> 00:17:21.600 align:start position:0% virtual DOMs or anything like that. When 00:17:21.600 --> 00:17:23.670 align:start position:0% virtual DOMs or anything like that. When you<00:17:21.720> call<00:17:21.920> the<00:17:22.040> div<00:17:22.240> function,<00:17:23.079> you<00:17:23.199> get<00:17:23.640> a 00:17:23.670 --> 00:17:23.680 align:start position:0% you call the div function, you get a 00:17:23.680 --> 00:17:25.910 align:start position:0% you call the div function, you get a native<00:17:24.079> HTML<00:17:24.560> div<00:17:24.839> element<00:17:25.400> that<00:17:25.560> you<00:17:25.640> can<00:17:25.760> do 00:17:25.910 --> 00:17:25.920 align:start position:0% native HTML div element that you can do 00:17:25.920 --> 00:17:28.910 align:start position:0% native HTML div element that you can do stuff<00:17:26.199> to. 00:17:28.910 --> 00:17:28.920 align:start position:0% 00:17:28.920 --> 00:17:32.070 align:start position:0% But<00:17:29.440> uh<00:17:29.640> the<00:17:29.760> elements<00:17:30.080> implement<00:17:30.760> uh<00:17:31.040> I<00:17:31.160> fun, 00:17:32.070 --> 00:17:32.080 align:start position:0% But uh the elements implement uh I fun, 00:17:32.080 --> 00:17:33.750 align:start position:0% But uh the elements implement uh I fun, which<00:17:32.320> is<00:17:32.520> the<00:17:32.640> protocol<00:17:33.120> to<00:17:33.240> make<00:17:33.400> something 00:17:33.750 --> 00:17:33.760 align:start position:0% which is the protocol to make something 00:17:33.760 --> 00:17:36.310 align:start position:0% which is the protocol to make something invocable<00:17:34.400> in<00:17:34.520> ClosureScript.<00:17:35.680> So,<00:17:36.200> you 00:17:36.310 --> 00:17:36.320 align:start position:0% invocable in ClosureScript. So, you 00:17:36.320 --> 00:17:38.110 align:start position:0% invocable in ClosureScript. So, you know,<00:17:36.480> on<00:17:36.560> the<00:17:36.760> the<00:17:36.960> invocation<00:17:37.560> semantic<00:17:38.000> of 00:17:38.110 --> 00:17:38.120 align:start position:0% know, on the the invocation semantic of 00:17:38.120 --> 00:17:41.190 align:start position:0% know, on the the invocation semantic of HTML<00:17:38.720> is<00:17:39.240> append<00:17:39.600> child<00:17:40.000> or<00:17:40.120> set<00:17:40.320> attribute. 00:17:41.190 --> 00:17:41.200 align:start position:0% HTML is append child or set attribute. 00:17:41.200 --> 00:17:42.510 align:start position:0% HTML is append child or set attribute. So,<00:17:41.400> we<00:17:41.560> implement<00:17:41.920> that,<00:17:42.160> so<00:17:42.280> you<00:17:42.400> can 00:17:42.510 --> 00:17:42.520 align:start position:0% So, we implement that, so you can 00:17:42.520 --> 00:17:44.830 align:start position:0% So, we implement that, so you can basically<00:17:42.960> use<00:17:43.320> you<00:17:43.400> can<00:17:43.520> construct<00:17:44.400> custom 00:17:44.830 --> 00:17:44.840 align:start position:0% basically use you can construct custom 00:17:44.840 --> 00:17:46.510 align:start position:0% basically use you can construct custom DOM<00:17:45.120> elements,<00:17:45.600> meaning<00:17:46.120> things<00:17:46.320> that<00:17:46.440> have 00:17:46.510 --> 00:17:46.520 align:start position:0% DOM elements, meaning things that have 00:17:46.520 --> 00:17:49.710 align:start position:0% DOM elements, meaning things that have the<00:17:46.600> same<00:17:46.840> semantic<00:17:47.480> as<00:17:48.000> uh<00:17:48.360> a<00:17:48.440> built-in 00:17:49.710 --> 00:17:49.720 align:start position:0% the same semantic as uh a built-in 00:17:49.720 --> 00:17:52.590 align:start position:0% the same semantic as uh a built-in uh<00:17:50.040> native<00:17:50.360> DOM<00:17:50.600> element<00:17:50.880> like<00:17:51.040> div<00:17:51.280> or<00:17:51.360> span, 00:17:52.590 --> 00:17:52.600 align:start position:0% uh native DOM element like div or span, 00:17:52.600 --> 00:17:53.870 align:start position:0% uh native DOM element like div or span, uh<00:17:52.720> but<00:17:52.840> you<00:17:52.920> can<00:17:53.040> construct<00:17:53.360> it<00:17:53.440> yourself<00:17:53.800> and 00:17:53.870 --> 00:17:53.880 align:start position:0% uh but you can construct it yourself and 00:17:53.880 --> 00:17:55.910 align:start position:0% uh but you can construct it yourself and then<00:17:54.000> use<00:17:54.120> it<00:17:54.200> in<00:17:54.280> markup. 00:17:55.910 --> 00:17:55.920 align:start position:0% then use it in markup. 00:17:55.920 --> 00:17:58.190 align:start position:0% then use it in markup. And<00:17:56.120> so,<00:17:56.200> this<00:17:56.480> suggests<00:17:57.600> uh 00:17:58.190 --> 00:17:58.200 align:start position:0% And so, this suggests uh 00:17:58.200 --> 00:18:00.070 align:start position:0% And so, this suggests uh you<00:17:58.280> know,<00:17:58.440> you<00:17:58.560> can<00:17:58.680> now<00:17:58.800> use<00:17:59.080> functions<00:17:59.920> in 00:18:00.070 --> 00:18:00.080 align:start position:0% you know, you can now use functions in 00:18:00.080 --> 00:18:02.470 align:start position:0% you know, you can now use functions in place<00:18:00.360> of<00:18:00.480> templates.<00:18:01.040> So,<00:18:01.200> no<00:18:01.320> more<00:18:01.480> printf 00:18:02.470 --> 00:18:02.480 align:start position:0% place of templates. So, no more printf 00:18:02.480 --> 00:18:04.470 align:start position:0% place of templates. So, no more printf or<00:18:02.640> printf-like<00:18:03.280> things.<00:18:04.040> You're<00:18:04.160> dealing 00:18:04.470 --> 00:18:04.480 align:start position:0% or printf-like things. You're dealing 00:18:04.480 --> 00:18:06.710 align:start position:0% or printf-like things. You're dealing with<00:18:04.680> actual<00:18:05.400> live<00:18:05.800> objects<00:18:06.320> that<00:18:06.480> you<00:18:06.560> can 00:18:06.710 --> 00:18:06.720 align:start position:0% with actual live objects that you can 00:18:06.720 --> 00:18:08.590 align:start position:0% with actual live objects that you can compose<00:18:07.800> uh<00:18:07.880> in<00:18:07.960> the<00:18:08.040> same<00:18:08.240> way<00:18:08.360> that<00:18:08.480> you 00:18:08.590 --> 00:18:08.600 align:start position:0% compose uh in the same way that you 00:18:08.600 --> 00:18:10.390 align:start position:0% compose uh in the same way that you compose<00:18:08.920> your<00:18:09.040> markup<00:18:09.360> originally.<00:18:10.280> And 00:18:10.390 --> 00:18:10.400 align:start position:0% compose your markup originally. And 00:18:10.400 --> 00:18:12.190 align:start position:0% compose your markup originally. And those<00:18:10.600> things<00:18:10.800> become<00:18:11.320> essentially<00:18:11.840> custom 00:18:12.190 --> 00:18:12.200 align:start position:0% those things become essentially custom 00:18:12.200 --> 00:18:13.750 align:start position:0% those things become essentially custom elements<00:18:12.920> that<00:18:13.040> can<00:18:13.160> then<00:18:13.400> be<00:18:13.560> in<00:18:13.680> your 00:18:13.750 --> 00:18:13.760 align:start position:0% elements that can then be in your 00:18:13.760 --> 00:18:15.630 align:start position:0% elements that can then be in your markup,<00:18:14.200> and<00:18:14.760> you<00:18:14.880> know,<00:18:15.000> somebody<00:18:15.280> can<00:18:15.440> use 00:18:15.630 --> 00:18:15.640 align:start position:0% markup, and you know, somebody can use 00:18:15.640 --> 00:18:17.630 align:start position:0% markup, and you know, somebody can use those<00:18:15.920> to<00:18:16.000> build<00:18:16.200> other<00:18:16.360> things.<00:18:17.400> So,<00:18:17.440> this<00:18:17.560> is 00:18:17.630 --> 00:18:17.640 align:start position:0% those to build other things. So, this is 00:18:17.640 --> 00:18:19.070 align:start position:0% those to build other things. So, this is an<00:18:17.720> example<00:18:18.160> of<00:18:18.200> that.<00:18:18.440> We're<00:18:18.520> making<00:18:18.760> a<00:18:18.840> foo 00:18:19.070 --> 00:18:19.080 align:start position:0% an example of that. We're making a foo 00:18:19.080 --> 00:18:20.270 align:start position:0% an example of that. We're making a foo element<00:18:19.440> here, 00:18:20.270 --> 00:18:20.280 align:start position:0% element here, 00:18:20.280 --> 00:18:22.230 align:start position:0% element here, which<00:18:20.440> takes<00:18:20.720> any<00:18:20.880> number<00:18:21.080> of<00:18:21.160> children 00:18:22.230 --> 00:18:22.240 align:start position:0% which takes any number of children 00:18:22.240 --> 00:18:25.430 align:start position:0% which takes any number of children and<00:18:23.080> makes<00:18:23.280> a<00:18:23.320> div<00:18:23.720> with<00:18:23.920> a<00:18:24.120> a<00:18:24.160> heading<00:18:24.440> element 00:18:25.430 --> 00:18:25.440 align:start position:0% and makes a div with a a heading element 00:18:25.440 --> 00:18:27.670 align:start position:0% and makes a div with a a heading element and<00:18:25.600> then<00:18:25.800> puts<00:18:26.040> the<00:18:26.120> children<00:18:26.480> in. 00:18:27.670 --> 00:18:27.680 align:start position:0% and then puts the children in. 00:18:27.680 --> 00:18:29.150 align:start position:0% and then puts the children in. So, 00:18:29.150 --> 00:18:29.160 align:start position:0% So, 00:18:29.160 --> 00:18:33.550 align:start position:0% So, uh<00:18:29.560> sequences<00:18:30.000> get<00:18:30.160> spliced<00:18:30.560> in<00:18:30.720> as<00:18:30.880> children. 00:18:33.550 --> 00:18:33.560 align:start position:0% 00:18:33.560 --> 00:18:35.550 align:start position:0% We<00:18:33.640> have<00:18:33.800> this<00:18:34.160> uh<00:18:34.240> this<00:18:34.360> little<00:18:34.520> macro<00:18:34.920> here, 00:18:35.550 --> 00:18:35.560 align:start position:0% We have this uh this little macro here, 00:18:35.560 --> 00:18:37.510 align:start position:0% We have this uh this little macro here, which<00:18:35.800> allows<00:18:36.200> you<00:18:36.280> because<00:18:36.600> there's<00:18:37.280> it 00:18:37.510 --> 00:18:37.520 align:start position:0% which allows you because there's it 00:18:37.520 --> 00:18:39.710 align:start position:0% which allows you because there's it supports<00:18:37.960> two<00:18:38.120> different<00:18:38.600> um<00:18:39.120> kinds<00:18:39.560> of 00:18:39.710 --> 00:18:39.720 align:start position:0% supports two different um kinds of 00:18:39.720 --> 00:18:40.950 align:start position:0% supports two different um kinds of attributes, 00:18:40.950 --> 00:18:40.960 align:start position:0% attributes, 00:18:40.960 --> 00:18:43.390 align:start position:0% attributes, uh<00:18:41.200> two<00:18:41.360> different<00:18:41.680> syntaxes<00:18:42.360> kind<00:18:42.600> of.<00:18:43.240> Uh 00:18:43.390 --> 00:18:43.400 align:start position:0% uh two different syntaxes kind of. Uh 00:18:43.400 --> 00:18:45.630 align:start position:0% uh two different syntaxes kind of. Uh you<00:18:43.480> know,<00:18:43.600> the<00:18:43.680> key<00:18:43.880> value<00:18:44.720> uh<00:18:44.920> pairs<00:18:45.440> and<00:18:45.560> the 00:18:45.630 --> 00:18:45.640 align:start position:0% you know, the key value uh pairs and the 00:18:45.640 --> 00:18:47.430 align:start position:0% you know, the key value uh pairs and the map.<00:18:46.400> So,<00:18:46.560> in<00:18:46.680> order<00:18:46.800> to<00:18:46.920> deal<00:18:47.120> with<00:18:47.240> that 00:18:47.430 --> 00:18:47.440 align:start position:0% map. So, in order to deal with that 00:18:47.440 --> 00:18:49.150 align:start position:0% map. So, in order to deal with that efficiently,<00:18:48.240> we<00:18:48.360> have<00:18:48.480> this<00:18:48.600> little<00:18:48.760> macro 00:18:49.150 --> 00:18:49.160 align:start position:0% efficiently, we have this little macro 00:18:49.160 --> 00:18:50.950 align:start position:0% efficiently, we have this little macro that<00:18:49.280> just<00:18:49.520> collects<00:18:50.000> the<00:18:50.160> attributes<00:18:50.720> into<00:18:50.920> a 00:18:50.950 --> 00:18:50.960 align:start position:0% that just collects the attributes into a 00:18:50.960 --> 00:18:54.190 align:start position:0% that just collects the attributes into a map<00:18:51.440> and<00:18:51.520> the<00:18:51.600> children<00:18:52.000> into<00:18:52.200> a<00:18:52.240> seek,<00:18:53.160> and 00:18:54.190 --> 00:18:54.200 align:start position:0% map and the children into a seek, and 00:18:54.200 --> 00:18:56.590 align:start position:0% map and the children into a seek, and then<00:18:54.360> calls<00:18:54.640> your<00:18:54.760> body.<00:18:55.320> So,<00:18:56.080> th-<00:18:56.280> this<00:18:56.440> is<00:18:56.520> an 00:18:56.590 --> 00:18:56.600 align:start position:0% then calls your body. So, th- this is an 00:18:56.600 --> 00:18:58.670 align:start position:0% then calls your body. So, th- this is an example<00:18:57.000> of<00:18:57.080> that.<00:18:57.800> So,<00:18:57.920> here<00:18:58.120> we<00:18:58.240> have<00:18:58.520> a 00:18:58.670 --> 00:18:58.680 align:start position:0% example of that. So, here we have a 00:18:58.680 --> 00:19:01.150 align:start position:0% example of that. So, here we have a quick<00:18:58.960> list<00:18:59.680> uh<00:18:59.920> custom<00:19:00.280> element,<00:19:00.960> which 00:19:01.150 --> 00:19:01.160 align:start position:0% quick list uh custom element, which 00:19:01.160 --> 00:19:02.910 align:start position:0% quick list uh custom element, which basically<00:19:01.680> rolls<00:19:02.040> up<00:19:02.200> all<00:19:02.320> of<00:19:02.400> its<00:19:02.560> children 00:19:02.910 --> 00:19:02.920 align:start position:0% basically rolls up all of its children 00:19:02.920 --> 00:19:04.710 align:start position:0% basically rolls up all of its children into<00:19:03.240> an<00:19:03.360> unordered<00:19:03.720> list<00:19:04.000> and<00:19:04.120> wraps<00:19:04.440> them 00:19:04.710 --> 00:19:04.720 align:start position:0% into an unordered list and wraps them 00:19:04.720 --> 00:19:06.710 align:start position:0% into an unordered list and wraps them with<00:19:05.120> uh<00:19:05.400> list<00:19:05.640> items. 00:19:06.710 --> 00:19:06.720 align:start position:0% with uh list items. 00:19:06.720 --> 00:19:09.310 align:start position:0% with uh list items. And<00:19:07.200> uh<00:19:07.400> if<00:19:07.600> I<00:19:08.120> set<00:19:08.360> the<00:19:08.440> class<00:19:08.800> on<00:19:08.880> this<00:19:09.040> thing, 00:19:09.310 --> 00:19:09.320 align:start position:0% And uh if I set the class on this thing, 00:19:09.320 --> 00:19:10.710 align:start position:0% And uh if I set the class on this thing, it<00:19:09.400> gets<00:19:09.600> passed<00:19:09.920> down<00:19:10.120> to<00:19:10.240> the<00:19:10.320> unordered 00:19:10.710 --> 00:19:10.720 align:start position:0% it gets passed down to the unordered 00:19:10.720 --> 00:19:11.790 align:start position:0% it gets passed down to the unordered list 00:19:11.790 --> 00:19:11.800 align:start position:0% list 00:19:11.800 --> 00:19:13.630 align:start position:0% list that<00:19:12.360> that<00:19:12.520> it<00:19:12.600> returns.<00:19:13.400> So,<00:19:13.480> this<00:19:13.600> is 00:19:13.630 --> 00:19:13.640 align:start position:0% that that it returns. So, this is 00:19:13.640 --> 00:19:15.350 align:start position:0% that that it returns. So, this is useful. 00:19:15.350 --> 00:19:15.360 align:start position:0% useful. 00:19:15.360 --> 00:19:16.110 align:start position:0% useful. Uh 00:19:16.110 --> 00:19:16.120 align:start position:0% Uh 00:19:16.120 --> 00:19:17.550 align:start position:0% Uh so,<00:19:16.280> every<00:19:16.480> page,<00:19:16.920> which<00:19:17.040> is<00:19:17.160> the<00:19:17.280> unit<00:19:17.480> of 00:19:17.550 --> 00:19:17.560 align:start position:0% so, every page, which is the unit of 00:19:17.560 --> 00:19:19.430 align:start position:0% so, every page, which is the unit of compilation<00:19:18.200> for<00:19:18.320> this<00:19:18.480> thing, 00:19:19.430 --> 00:19:19.440 align:start position:0% compilation for this thing, 00:19:19.440 --> 00:19:19.990 align:start position:0% compilation for this thing, uh 00:19:19.990 --> 00:19:20.000 align:start position:0% uh 00:19:20.000 --> 00:19:21.830 align:start position:0% uh it<00:19:20.160> has<00:19:20.320> a<00:19:20.400> thing<00:19:20.720> sort<00:19:20.920> of<00:19:21.000> like<00:19:21.160> a<00:19:21.400> namespace 00:19:21.830 --> 00:19:21.840 align:start position:0% it has a thing sort of like a namespace 00:19:21.840 --> 00:19:24.110 align:start position:0% it has a thing sort of like a namespace declaration.<00:19:23.080> Um<00:19:23.440> except<00:19:23.760> instead<00:19:24.040> of 00:19:24.110 --> 00:19:24.120 align:start position:0% declaration. Um except instead of 00:19:24.120 --> 00:19:26.670 align:start position:0% declaration. Um except instead of specifying<00:19:24.680> the<00:19:24.760> namespace<00:19:25.240> name,<00:19:25.880> because 00:19:26.670 --> 00:19:26.680 align:start position:0% specifying the namespace name, because 00:19:26.680 --> 00:19:28.270 align:start position:0% specifying the namespace name, because the<00:19:26.800> page<00:19:27.160> is<00:19:27.280> the<00:19:27.440> end<00:19:27.680> result,<00:19:28.040> you're<00:19:28.120> not 00:19:28.270 --> 00:19:28.280 align:start position:0% the page is the end result, you're not 00:19:28.280 --> 00:19:30.510 align:start position:0% the page is the end result, you're not going<00:19:28.400> to<00:19:28.440> be<00:19:28.520> using<00:19:28.760> it<00:19:28.840> as<00:19:28.960> a<00:19:29.000> library,<00:19:29.800> so<00:19:30.280> uh 00:19:30.510 --> 00:19:30.520 align:start position:0% going to be using it as a library, so uh 00:19:30.520 --> 00:19:33.390 align:start position:0% going to be using it as a library, so uh you<00:19:30.680> actually<00:19:30.920> specify<00:19:31.440> where<00:19:31.800> you<00:19:31.960> want<00:19:32.400> the 00:19:33.390 --> 00:19:33.400 align:start position:0% you actually specify where you want the 00:19:33.400 --> 00:19:35.030 align:start position:0% you actually specify where you want the the<00:19:33.480> page<00:19:33.840> to<00:19:33.960> reside<00:19:34.400> in<00:19:34.480> your<00:19:34.600> document 00:19:35.030 --> 00:19:35.040 align:start position:0% the page to reside in your document 00:19:35.040 --> 00:19:37.390 align:start position:0% the page to reside in your document root. 00:19:37.390 --> 00:19:37.400 align:start position:0% root. 00:19:37.400 --> 00:19:37.990 align:start position:0% root. Uh 00:19:37.990 --> 00:19:38.000 align:start position:0% Uh 00:19:38.000 --> 00:19:41.110 align:start position:0% Uh and<00:19:38.520> H<00:19:38.720> list<00:19:39.160> uh<00:19:39.360> hoplon<00:19:39.800> refers<00:19:40.280> in<00:19:40.880> all<00:19:41.040> the 00:19:41.110 --> 00:19:41.120 align:start position:0% and H list uh hoplon refers in all the 00:19:41.120 --> 00:19:42.430 align:start position:0% and H list uh hoplon refers in all the things<00:19:41.360> like<00:19:41.520> div,<00:19:41.760> span,<00:19:42.160> and<00:19:42.280> all<00:19:42.360> the 00:19:42.430 --> 00:19:42.440 align:start position:0% things like div, span, and all the 00:19:42.440 --> 00:19:44.110 align:start position:0% things like div, span, and all the things<00:19:42.640> you<00:19:42.720> want,<00:19:42.920> so<00:19:43.000> you<00:19:43.080> don't<00:19:43.280> have<00:19:43.520> to, 00:19:44.110 --> 00:19:44.120 align:start position:0% things you want, so you don't have to, 00:19:44.120 --> 00:19:46.270 align:start position:0% things you want, so you don't have to, you<00:19:44.240> know,<00:19:44.840> painstakingly<00:19:45.640> refer<00:19:45.960> them<00:19:46.120> into 00:19:46.270 --> 00:19:46.280 align:start position:0% you know, painstakingly refer them into 00:19:46.280 --> 00:19:47.670 align:start position:0% you know, painstakingly refer them into your<00:19:46.400> namespace. 00:19:47.670 --> 00:19:47.680 align:start position:0% your namespace. 00:19:47.680 --> 00:19:48.350 align:start position:0% your namespace. Uh 00:19:48.350 --> 00:19:48.360 align:start position:0% Uh 00:19:48.360 --> 00:19:48.990 align:start position:0% Uh may<00:19:48.520> I? 00:19:48.990 --> 00:19:49.000 align:start position:0% may I? 00:19:49.000 --> 00:19:49.510 align:start position:0% may I? Absolutely. 00:19:49.510 --> 00:19:49.520 align:start position:0% Absolutely. 00:19:49.520 --> 00:19:50.070 align:start position:0% Absolutely. For<00:19:49.560> us<00:19:49.640> something<00:19:49.840> again. 00:19:50.070 --> 00:19:50.080 align:start position:0% For us something again. 00:19:50.080 --> 00:19:50.510 align:start position:0% For us something again. Please. 00:19:50.510 --> 00:19:50.520 align:start position:0% Please. 00:19:50.520 --> 00:19:53.110 align:start position:0% Please. Um so,<00:19:51.160> Micha<00:19:51.400> pointed<00:19:51.680> out<00:19:51.800> that<00:19:52.600> we<00:19:52.800> include 00:19:53.110 --> 00:19:53.120 align:start position:0% Um so, Micha pointed out that we include 00:19:53.120 --> 00:19:54.270 align:start position:0% Um so, Micha pointed out that we include all<00:19:53.240> of<00:19:53.320> those<00:19:53.440> things<00:19:53.640> automatically<00:19:54.120> for 00:19:54.270 --> 00:19:54.280 align:start position:0% all of those things automatically for 00:19:54.280 --> 00:19:56.670 align:start position:0% all of those things automatically for you,<00:19:54.360> the<00:19:54.440> HTML5<00:19:55.360> in<00:19:55.440> particular, 00:19:56.670 --> 00:19:56.680 align:start position:0% you, the HTML5 in particular, 00:19:56.680 --> 00:19:58.350 align:start position:0% you, the HTML5 in particular, uh<00:19:57.080> sort<00:19:57.240> of<00:19:57.280> built-ins.<00:19:57.880> But,<00:19:58.000> we<00:19:58.080> also<00:19:58.240> have 00:19:58.350 --> 00:19:58.360 align:start position:0% uh sort of built-ins. But, we also have 00:19:58.360 --> 00:20:00.710 align:start position:0% uh sort of built-ins. But, we also have an<00:19:58.440> SVG<00:19:58.800> namespace,<00:19:59.480> and<00:20:00.080> some<00:20:00.280> of<00:20:00.360> our<00:20:00.480> more 00:20:00.710 --> 00:20:00.720 align:start position:0% an SVG namespace, and some of our more 00:20:00.720 --> 00:20:03.110 align:start position:0% an SVG namespace, and some of our more interesting<00:20:01.080> work<00:20:01.440> lately<00:20:01.800> has<00:20:01.920> been 00:20:03.110 --> 00:20:03.120 align:start position:0% interesting work lately has been 00:20:03.120 --> 00:20:05.310 align:start position:0% interesting work lately has been working<00:20:03.400> with<00:20:03.560> SVG<00:20:04.040> as<00:20:04.160> if<00:20:04.320> it<00:20:04.440> were<00:20:04.560> a<00:20:04.600> Lisp, 00:20:05.310 --> 00:20:05.320 align:start position:0% working with SVG as if it were a Lisp, 00:20:05.320 --> 00:20:06.830 align:start position:0% working with SVG as if it were a Lisp, which<00:20:05.440> has<00:20:05.560> been<00:20:06.200> pretty<00:20:06.400> interesting,<00:20:06.760> and 00:20:06.830 --> 00:20:06.840 align:start position:0% which has been pretty interesting, and 00:20:06.840 --> 00:20:10.710 align:start position:0% which has been pretty interesting, and that<00:20:06.960> stuff<00:20:07.160> is<00:20:07.280> in<00:20:07.400> hoplon.svg<00:20:08.360> namespace. 00:20:10.710 --> 00:20:10.720 align:start position:0% that stuff is in hoplon.svg namespace. 00:20:10.720 --> 00:20:13.110 align:start position:0% that stuff is in hoplon.svg namespace. So,<00:20:10.840> here's<00:20:11.040> a<00:20:11.120> sample<00:20:11.720> uh<00:20:11.840> page<00:20:12.080> declaration, 00:20:13.110 --> 00:20:13.120 align:start position:0% So, here's a sample uh page declaration, 00:20:13.120 --> 00:20:14.510 align:start position:0% So, here's a sample uh page declaration, and<00:20:13.280> you<00:20:13.320> can<00:20:13.440> see<00:20:13.520> the<00:20:13.640> refer<00:20:13.960> hoplon<00:20:14.400> on<00:20:14.440> the 00:20:14.510 --> 00:20:14.520 align:start position:0% and you can see the refer hoplon on the 00:20:14.520 --> 00:20:16.470 align:start position:0% and you can see the refer hoplon on the second<00:20:14.800> line<00:20:15.040> there.<00:20:15.800> That's<00:20:15.960> basically<00:20:16.280> like 00:20:16.470 --> 00:20:16.480 align:start position:0% second line there. That's basically like 00:20:16.480 --> 00:20:17.670 align:start position:0% second line there. That's basically like refer<00:20:16.720> closure.<00:20:17.080> If<00:20:17.160> there's<00:20:17.320> something<00:20:17.560> that 00:20:17.670 --> 00:20:17.680 align:start position:0% refer closure. If there's something that 00:20:17.680 --> 00:20:19.150 align:start position:0% refer closure. If there's something that hoplon's<00:20:18.080> bringing<00:20:18.360> in<00:20:18.480> that's,<00:20:18.880> you<00:20:19.000> know, 00:20:19.150 --> 00:20:19.160 align:start position:0% hoplon's bringing in that's, you know, 00:20:19.160 --> 00:20:21.470 align:start position:0% hoplon's bringing in that's, you know, annoying<00:20:19.560> you,<00:20:19.680> you<00:20:19.800> can<00:20:20.160> just<00:20:20.360> exclude<00:20:20.800> it, 00:20:21.470 --> 00:20:21.480 align:start position:0% annoying you, you can just exclude it, 00:20:21.480 --> 00:20:23.070 align:start position:0% annoying you, you can just exclude it, and<00:20:21.800> you<00:20:21.880> won't<00:20:22.040> see<00:20:22.120> the<00:20:22.240> warnings.<00:20:22.760> So,<00:20:22.920> like 00:20:23.070 --> 00:20:23.080 align:start position:0% and you won't see the warnings. So, like 00:20:23.080 --> 00:20:26.950 align:start position:0% and you won't see the warnings. So, like div<00:20:23.280> and<00:20:23.400> span<00:20:23.720> and<00:20:23.840> stuff. 00:20:26.950 --> 00:20:26.960 align:start position:0% 00:20:26.960 --> 00:20:28.990 align:start position:0% DOM<00:20:27.280> basically,<00:20:28.240> the<00:20:28.320> document<00:20:28.720> object 00:20:28.990 --> 00:20:29.000 align:start position:0% DOM basically, the document object 00:20:29.000 --> 00:20:31.910 align:start position:0% DOM basically, the document object model,<00:20:29.400> is<00:20:29.760> an<00:20:29.960> IO<00:20:30.720> mechanism. 00:20:31.910 --> 00:20:31.920 align:start position:0% model, is an IO mechanism. 00:20:31.920 --> 00:20:33.910 align:start position:0% model, is an IO mechanism. Input<00:20:32.160> output.<00:20:32.960> That's<00:20:33.120> the<00:20:33.200> only<00:20:33.360> reason<00:20:33.680> it 00:20:33.910 --> 00:20:33.920 align:start position:0% Input output. That's the only reason it 00:20:33.920 --> 00:20:36.030 align:start position:0% Input output. That's the only reason it exists,<00:20:34.840> and 00:20:36.030 --> 00:20:36.040 align:start position:0% exists, and 00:20:36.040 --> 00:20:37.910 align:start position:0% exists, and uh<00:20:36.360> events<00:20:36.880> are<00:20:37.040> input.<00:20:37.480> In<00:20:37.520> other<00:20:37.680> words,<00:20:37.840> the 00:20:37.910 --> 00:20:37.920 align:start position:0% uh events are input. In other words, the 00:20:37.920 --> 00:20:40.070 align:start position:0% uh events are input. In other words, the user<00:20:38.120> clicks<00:20:38.400> on<00:20:38.560> something, 00:20:40.070 --> 00:20:40.080 align:start position:0% user clicks on something, 00:20:40.080 --> 00:20:41.830 align:start position:0% user clicks on something, and<00:20:40.800> uh<00:20:40.880> elements<00:20:41.240> and<00:20:41.320> their<00:20:41.400> properties 00:20:41.830 --> 00:20:41.840 align:start position:0% and uh elements and their properties 00:20:41.840 --> 00:20:43.230 align:start position:0% and uh elements and their properties provide<00:20:42.200> output.<00:20:42.680> You<00:20:42.760> know,<00:20:42.840> you<00:20:42.920> might<00:20:43.080> make 00:20:43.230 --> 00:20:43.240 align:start position:0% provide output. You know, you might make 00:20:43.240 --> 00:20:44.510 align:start position:0% provide output. You know, you might make something<00:20:43.480> red<00:20:43.680> by<00:20:43.800> changing<00:20:44.080> a<00:20:44.120> property, 00:20:44.510 --> 00:20:44.520 align:start position:0% something red by changing a property, 00:20:44.520 --> 00:20:46.230 align:start position:0% something red by changing a property, you<00:20:44.600> might<00:20:44.800> change<00:20:45.160> the<00:20:45.360> contents<00:20:45.800> of<00:20:45.880> a<00:20:45.920> text 00:20:46.230 --> 00:20:46.240 align:start position:0% you might change the contents of a text 00:20:46.240 --> 00:20:47.750 align:start position:0% you might change the contents of a text node. 00:20:47.750 --> 00:20:47.760 align:start position:0% node. 00:20:47.760 --> 00:20:49.150 align:start position:0% node. But,<00:20:47.840> what's<00:20:48.000> interesting<00:20:48.280> about<00:20:48.520> this<00:20:48.840> is, 00:20:49.150 --> 00:20:49.160 align:start position:0% But, what's interesting about this is, 00:20:49.160 --> 00:20:50.310 align:start position:0% But, what's interesting about this is, if<00:20:49.280> you<00:20:49.320> think<00:20:49.480> about<00:20:49.680> it<00:20:49.720> in<00:20:49.800> terms<00:20:50.040> of<00:20:50.120> like 00:20:50.310 --> 00:20:50.320 align:start position:0% if you think about it in terms of like 00:20:50.320 --> 00:20:51.870 align:start position:0% if you think about it in terms of like one-way<00:20:50.640> data<00:20:50.880> flow, 00:20:51.870 --> 00:20:51.880 align:start position:0% one-way data flow, 00:20:51.880 --> 00:20:53.950 align:start position:0% one-way data flow, input<00:20:52.160> and<00:20:52.280> output<00:20:52.520> never<00:20:52.760> have<00:20:52.920> to<00:20:53.040> mix.<00:20:53.760> So, 00:20:53.950 --> 00:20:53.960 align:start position:0% input and output never have to mix. So, 00:20:53.960 --> 00:20:56.870 align:start position:0% input and output never have to mix. So, you<00:20:54.120> could,<00:20:55.000> you<00:20:55.120> know,<00:20:55.280> have<00:20:55.640> one 00:20:56.870 --> 00:20:56.880 align:start position:0% you could, you know, have one 00:20:56.880 --> 00:20:58.110 align:start position:0% you could, you know, have one uh 00:20:58.110 --> 00:20:58.120 align:start position:0% uh 00:20:58.120 --> 00:20:59.590 align:start position:0% uh you<00:20:58.200> could<00:20:58.320> have<00:20:58.480> one<00:20:58.760> operation<00:20:59.280> that's 00:20:59.590 --> 00:20:59.600 align:start position:0% you could have one operation that's 00:20:59.600 --> 00:21:00.790 align:start position:0% you could have one operation that's setting 00:21:00.790 --> 00:21:00.800 align:start position:0% setting 00:21:00.800 --> 00:21:03.430 align:start position:0% setting properties<00:21:01.280> without<00:21:01.640> knowing<00:21:01.960> at<00:21:02.080> all<00:21:02.360> about 00:21:03.430 --> 00:21:03.440 align:start position:0% properties without knowing at all about 00:21:03.440 --> 00:21:06.710 align:start position:0% properties without knowing at all about what<00:21:04.080> events<00:21:04.880> are<00:21:05.000> are<00:21:05.240> listened<00:21:05.680> to<00:21:05.920> and<00:21:06.400> vice 00:21:06.710 --> 00:21:06.720 align:start position:0% what events are are listened to and vice 00:21:06.720 --> 00:21:09.630 align:start position:0% what events are are listened to and vice versa. 00:21:09.630 --> 00:21:09.640 align:start position:0% 00:21:09.640 --> 00:21:10.830 align:start position:0% So, 00:21:10.830 --> 00:21:10.840 align:start position:0% So, 00:21:10.840 --> 00:21:13.030 align:start position:0% So, basically<00:21:11.240> callbacks<00:21:12.120> trigger<00:21:12.480> updates<00:21:12.920> to 00:21:13.030 --> 00:21:13.040 align:start position:0% basically callbacks trigger updates to 00:21:13.040 --> 00:21:14.510 align:start position:0% basically callbacks trigger updates to input<00:21:13.360> cells. 00:21:14.510 --> 00:21:14.520 align:start position:0% input cells. 00:21:14.520 --> 00:21:16.430 align:start position:0% input cells. Meaning<00:21:14.840> I<00:21:14.880> click<00:21:15.120> on<00:21:15.200> a<00:21:15.280> button,<00:21:15.880> that<00:21:16.080> causes 00:21:16.430 --> 00:21:16.440 align:start position:0% Meaning I click on a button, that causes 00:21:16.440 --> 00:21:18.870 align:start position:0% Meaning I click on a button, that causes some<00:21:16.600> input<00:21:16.920> cell<00:21:17.480> to<00:21:17.600> change<00:21:17.800> its<00:21:17.920> value.<00:21:18.760> We 00:21:18.870 --> 00:21:18.880 align:start position:0% some input cell to change its value. We 00:21:18.880 --> 00:21:21.470 align:start position:0% some input cell to change its value. We swap<00:21:19.280> on<00:21:19.440> it<00:21:20.120> in<00:21:20.240> the<00:21:20.320> callback. 00:21:21.470 --> 00:21:21.480 align:start position:0% swap on it in the callback. 00:21:21.480 --> 00:21:24.990 align:start position:0% swap on it in the callback. And<00:21:22.400> that<00:21:23.080> eventually<00:21:23.680> may<00:21:23.960> or<00:21:24.120> may<00:21:24.280> not 00:21:24.990 --> 00:21:25.000 align:start position:0% And that eventually may or may not 00:21:25.000 --> 00:21:27.270 align:start position:0% And that eventually may or may not percolate<00:21:25.480> through<00:21:25.720> formula<00:21:26.120> cells 00:21:27.270 --> 00:21:27.280 align:start position:0% percolate through formula cells 00:21:27.280 --> 00:21:29.550 align:start position:0% percolate through formula cells to<00:21:27.720> cause<00:21:28.080> an<00:21:28.200> update<00:21:28.480> to<00:21:28.560> the<00:21:28.640> DOM.<00:21:29.320> In<00:21:29.400> other 00:21:29.550 --> 00:21:29.560 align:start position:0% to cause an update to the DOM. In other 00:21:29.560 --> 00:21:32.470 align:start position:0% to cause an update to the DOM. In other words,<00:21:29.960> some<00:21:30.280> DOM<00:21:30.520> element<00:21:31.160> might<00:21:31.360> be<00:21:32.240> hooked 00:21:32.470 --> 00:21:32.480 align:start position:0% words, some DOM element might be hooked 00:21:32.480 --> 00:21:34.310 align:start position:0% words, some DOM element might be hooked up<00:21:32.600> to<00:21:32.680> some<00:21:32.920> wired<00:21:33.200> up<00:21:33.280> to<00:21:33.360> some<00:21:33.920> to<00:21:34.080> some 00:21:34.310 --> 00:21:34.320 align:start position:0% up to some wired up to some to some 00:21:34.320 --> 00:21:37.550 align:start position:0% up to some wired up to some to some formula<00:21:34.720> cell,<00:21:35.520> and<00:21:36.360> that<00:21:36.600> formula<00:21:36.960> cell,<00:21:37.440> you 00:21:37.550 --> 00:21:37.560 align:start position:0% formula cell, and that formula cell, you 00:21:37.560 --> 00:21:41.390 align:start position:0% formula cell, and that formula cell, you know,<00:21:37.680> computes<00:21:38.120> that<00:21:38.240> it<00:21:38.320> should<00:21:38.440> be<00:21:38.560> red. 00:21:41.390 --> 00:21:41.400 align:start position:0% 00:21:41.400 --> 00:21:43.070 align:start position:0% So,<00:21:41.480> here's<00:21:41.680> an<00:21:41.720> example<00:21:42.080> of<00:21:42.160> that. 00:21:43.070 --> 00:21:43.080 align:start position:0% So, here's an example of that. 00:21:43.080 --> 00:21:45.270 align:start position:0% So, here's an example of that. I'm<00:21:43.160> defining<00:21:43.560> a<00:21:43.600> cell<00:21:43.920> here,<00:21:44.360> an<00:21:44.480> input<00:21:44.840> cell 00:21:45.270 --> 00:21:45.280 align:start position:0% I'm defining a cell here, an input cell 00:21:45.280 --> 00:21:47.150 align:start position:0% I'm defining a cell here, an input cell called<00:21:45.520> clicks,<00:21:46.360> whose<00:21:46.480> initial<00:21:46.760> value<00:21:47.040> is 00:21:47.150 --> 00:21:47.160 align:start position:0% called clicks, whose initial value is 00:21:47.160 --> 00:21:48.310 align:start position:0% called clicks, whose initial value is zero.<00:21:47.480> This<00:21:47.600> is<00:21:47.680> how<00:21:47.760> many<00:21:47.920> times<00:21:48.200> I've 00:21:48.310 --> 00:21:48.320 align:start position:0% zero. This is how many times I've 00:21:48.320 --> 00:21:49.870 align:start position:0% zero. This is how many times I've clicked<00:21:48.560> on<00:21:48.640> this<00:21:48.800> button. 00:21:49.870 --> 00:21:49.880 align:start position:0% clicked on this button. 00:21:49.880 --> 00:21:52.710 align:start position:0% clicked on this button. Then<00:21:49.960> I<00:21:50.000> have<00:21:50.120> a<00:21:50.160> button,<00:21:51.080> and<00:21:51.840> I<00:21:51.960> have<00:21:52.600> the 00:21:52.710 --> 00:21:52.720 align:start position:0% Then I have a button, and I have the 00:21:52.720 --> 00:21:55.430 align:start position:0% Then I have a button, and I have the style<00:21:53.160> attribute,<00:21:54.280> which<00:21:54.520> is<00:21:54.880> being<00:21:55.160> hooked 00:21:55.430 --> 00:21:55.440 align:start position:0% style attribute, which is being hooked 00:21:55.440 --> 00:21:58.070 align:start position:0% style attribute, which is being hooked up<00:21:55.600> reactively<00:21:56.760> to<00:21:56.880> that<00:21:57.120> clicks<00:21:57.560> cell<00:21:57.920> over 00:21:58.070 --> 00:21:58.080 align:start position:0% up reactively to that clicks cell over 00:21:58.080 --> 00:21:59.310 align:start position:0% up reactively to that clicks cell over here. 00:21:59.310 --> 00:21:59.320 align:start position:0% here. 00:21:59.320 --> 00:22:00.750 align:start position:0% here. So,<00:21:59.400> I'm<00:21:59.480> making<00:21:59.720> anonymous 00:22:00.750 --> 00:22:00.760 align:start position:0% So, I'm making anonymous 00:22:00.760 --> 00:22:02.230 align:start position:0% So, I'm making anonymous formula<00:22:01.160> cell<00:22:01.400> here, 00:22:02.230 --> 00:22:02.240 align:start position:0% formula cell here, 00:22:02.240 --> 00:22:03.710 align:start position:0% formula cell here, and<00:22:02.600> I<00:22:02.640> want<00:22:02.800> to<00:22:02.840> set<00:22:03.000> the<00:22:03.080> color<00:22:03.480> of<00:22:03.560> this 00:22:03.710 --> 00:22:03.720 align:start position:0% and I want to set the color of this 00:22:03.720 --> 00:22:06.350 align:start position:0% and I want to set the color of this thing<00:22:03.960> to<00:22:04.080> be<00:22:04.240> red<00:22:05.120> if<00:22:05.680> the<00:22:05.760> number<00:22:06.000> of<00:22:06.120> clicks 00:22:06.350 --> 00:22:06.360 align:start position:0% thing to be red if the number of clicks 00:22:06.360 --> 00:22:09.950 align:start position:0% thing to be red if the number of clicks is<00:22:06.480> even,<00:22:07.280> and<00:22:07.440> blue<00:22:07.880> if<00:22:08.000> it's<00:22:08.160> odd. 00:22:09.950 --> 00:22:09.960 align:start position:0% is even, and blue if it's odd. 00:22:09.960 --> 00:22:12.230 align:start position:0% is even, and blue if it's odd. Then<00:22:10.040> I<00:22:10.120> set<00:22:10.320> a<00:22:10.440> an<00:22:10.560> on-click<00:22:10.960> handler. 00:22:12.230 --> 00:22:12.240 align:start position:0% Then I set a an on-click handler. 00:22:12.240 --> 00:22:15.790 align:start position:0% Then I set a an on-click handler. So,<00:22:12.560> here<00:22:12.880> is<00:22:13.160> the<00:22:13.280> callback,<00:22:13.920> which<00:22:14.160> swaps<00:22:15.080> on 00:22:15.790 --> 00:22:15.800 align:start position:0% So, here is the callback, which swaps on 00:22:15.800 --> 00:22:18.110 align:start position:0% So, here is the callback, which swaps on clicks,<00:22:16.840> adding<00:22:17.120> one<00:22:17.280> to<00:22:17.400> it,<00:22:17.640> incrementing 00:22:18.110 --> 00:22:18.120 align:start position:0% clicks, adding one to it, incrementing 00:22:18.120 --> 00:22:19.030 align:start position:0% clicks, adding one to it, incrementing it. 00:22:19.030 --> 00:22:19.040 align:start position:0% it. 00:22:19.040 --> 00:22:21.870 align:start position:0% it. And<00:22:19.120> then<00:22:19.240> I<00:22:19.280> set<00:22:19.480> the<00:22:19.560> text<00:22:20.160> of<00:22:20.280> this<00:22:20.440> button 00:22:21.870 --> 00:22:21.880 align:start position:0% And then I set the text of this button 00:22:21.880 --> 00:22:24.390 align:start position:0% And then I set the text of this button to<00:22:22.760> inform<00:22:23.120> us<00:22:23.240> how<00:22:23.320> many<00:22:23.520> times<00:22:24.160> it's<00:22:24.240> been 00:22:24.390 --> 00:22:24.400 align:start position:0% to inform us how many times it's been 00:22:24.400 --> 00:22:26.910 align:start position:0% to inform us how many times it's been clicked<00:22:24.720> on. 00:22:26.910 --> 00:22:26.920 align:start position:0% clicked on. 00:22:26.920 --> 00:22:28.110 align:start position:0% clicked on. And<00:22:27.000> it<00:22:27.080> rules.<00:22:27.640> Totally.<00:22:27.880> And<00:22:27.960> it<00:22:28.000> does 00:22:28.110 --> 00:22:28.120 align:start position:0% And it rules. Totally. And it does 00:22:28.120 --> 00:22:30.150 align:start position:0% And it rules. Totally. And it does things. 00:22:30.150 --> 00:22:30.160 align:start position:0% things. 00:22:30.160 --> 00:22:33.150 align:start position:0% things. So,<00:22:30.880> what's<00:22:31.040> interesting<00:22:31.400> here<00:22:31.640> is<00:22:31.840> that<00:22:32.640> um 00:22:33.150 --> 00:22:33.160 align:start position:0% So, what's interesting here is that um 00:22:33.160 --> 00:22:34.590 align:start position:0% So, what's interesting here is that um you<00:22:33.240> know,<00:22:33.360> these<00:22:33.560> attributes,<00:22:34.200> basically 00:22:34.590 --> 00:22:34.600 align:start position:0% you know, these attributes, basically 00:22:34.600 --> 00:22:36.870 align:start position:0% you know, these attributes, basically they're<00:22:34.760> dispatching<00:22:35.240> on<00:22:35.360> value<00:22:35.720> here.<00:22:36.240> So, 00:22:36.870 --> 00:22:36.880 align:start position:0% they're dispatching on value here. So, 00:22:36.880 --> 00:22:39.350 align:start position:0% they're dispatching on value here. So, if<00:22:37.040> it<00:22:37.160> sees<00:22:37.360> a<00:22:37.440> cell<00:22:37.800> as<00:22:37.920> the<00:22:38.000> value,<00:22:38.720> it<00:22:38.880> knows 00:22:39.350 --> 00:22:39.360 align:start position:0% if it sees a cell as the value, it knows 00:22:39.360 --> 00:22:42.070 align:start position:0% if it sees a cell as the value, it knows hook<00:22:39.520> this<00:22:39.720> up<00:22:39.880> reactively<00:22:40.640> to<00:22:40.760> this<00:22:40.960> cell. 00:22:42.070 --> 00:22:42.080 align:start position:0% hook this up reactively to this cell. 00:22:42.080 --> 00:22:44.270 align:start position:0% hook this up reactively to this cell. If<00:22:42.240> it's<00:22:42.520> a<00:22:42.600> function,<00:22:43.440> then<00:22:43.560> it<00:22:43.680> says,<00:22:44.000> "Okay, 00:22:44.270 --> 00:22:44.280 align:start position:0% If it's a function, then it says, "Okay, 00:22:44.280 --> 00:22:45.470 align:start position:0% If it's a function, then it says, "Okay, this<00:22:44.440> is<00:22:44.480> a<00:22:44.560> callback,<00:22:45.080> so<00:22:45.200> I'm<00:22:45.280> going<00:22:45.400> to 00:22:45.470 --> 00:22:45.480 align:start position:0% this is a callback, so I'm going to 00:22:45.480 --> 00:22:46.470 align:start position:0% this is a callback, so I'm going to treat<00:22:45.680> this,<00:22:45.960> you<00:22:46.040> know,<00:22:46.120> I'm<00:22:46.160> going<00:22:46.280> to<00:22:46.360> look 00:22:46.470 --> 00:22:46.480 align:start position:0% treat this, you know, I'm going to look 00:22:46.480 --> 00:22:48.070 align:start position:0% treat this, you know, I'm going to look for<00:22:46.560> the<00:22:46.640> click<00:22:46.840> event." 00:22:48.070 --> 00:22:48.080 align:start position:0% for the click event." 00:22:48.080 --> 00:22:49.470 align:start position:0% for the click event." And 00:22:49.470 --> 00:22:49.480 align:start position:0% And 00:22:49.480 --> 00:22:51.230 align:start position:0% And if<00:22:49.640> it's<00:22:50.400> neither<00:22:50.680> of<00:22:50.760> those,<00:22:51.000> if<00:22:51.080> it's<00:22:51.200> a 00:22:51.230 --> 00:22:51.240 align:start position:0% if it's neither of those, if it's a 00:22:51.240 --> 00:22:53.190 align:start position:0% if it's neither of those, if it's a string,<00:22:51.880> then<00:22:52.000> it<00:22:52.120> just<00:22:52.320> sets<00:22:52.560> the<00:22:52.680> attribute 00:22:53.190 --> 00:22:53.200 align:start position:0% string, then it just sets the attribute 00:22:53.200 --> 00:22:56.870 align:start position:0% string, then it just sets the attribute on<00:22:53.320> that<00:22:53.480> element. 00:22:56.870 --> 00:22:56.880 align:start position:0% 00:22:56.880 --> 00:22:58.670 align:start position:0% Uh<00:22:57.040> the<00:22:57.160> attributes, 00:22:58.670 --> 00:22:58.680 align:start position:0% Uh the attributes, 00:22:58.680 --> 00:22:59.750 align:start position:0% Uh the attributes, these<00:22:58.840> special<00:22:59.200> attributes<00:22:59.560> can<00:22:59.680> be 00:22:59.750 --> 00:22:59.760 align:start position:0% these special attributes can be 00:22:59.760 --> 00:23:01.950 align:start position:0% these special attributes can be extended.<00:23:00.360> There<00:23:00.480> are<00:23:00.600> two<00:23:00.760> multimethods,<00:23:01.760> do 00:23:01.950 --> 00:23:01.960 align:start position:0% extended. There are two multimethods, do 00:23:01.960 --> 00:23:05.030 align:start position:0% extended. There are two multimethods, do bang<00:23:02.360> and<00:23:02.800> on!bang,<00:23:03.840> which<00:23:04.120> handle<00:23:04.640> input<00:23:04.920> and 00:23:05.030 --> 00:23:05.040 align:start position:0% bang and on!bang, which handle input and 00:23:05.040 --> 00:23:06.710 align:start position:0% bang and on!bang, which handle input and output.<00:23:05.400> So,<00:23:05.520> you<00:23:05.600> can<00:23:05.760> add<00:23:05.960> your<00:23:06.160> own<00:23:06.360> fancy 00:23:06.710 --> 00:23:06.720 align:start position:0% output. So, you can add your own fancy 00:23:06.720 --> 00:23:08.750 align:start position:0% output. So, you can add your own fancy thing.<00:23:07.000> So,<00:23:07.120> here's<00:23:07.360> an<00:23:07.480> example<00:23:07.960> of<00:23:08.080> like<00:23:08.640> the 00:23:08.750 --> 00:23:08.760 align:start position:0% thing. So, here's an example of like the 00:23:08.760 --> 00:23:10.110 align:start position:0% thing. So, here's an example of like the slide<00:23:09.280> attribute.<00:23:09.760> So,<00:23:09.840> you<00:23:09.880> can<00:23:10.000> make 00:23:10.110 --> 00:23:10.120 align:start position:0% slide attribute. So, you can make 00:23:10.120 --> 00:23:12.910 align:start position:0% slide attribute. So, you can make something<00:23:10.360> like<00:23:10.600> slide<00:23:10.960> up<00:23:11.080> or<00:23:11.160> down.<00:23:12.000> Or,<00:23:12.800> you 00:23:12.910 --> 00:23:12.920 align:start position:0% something like slide up or down. Or, you 00:23:12.920 --> 00:23:16.030 align:start position:0% something like slide up or down. Or, you know,<00:23:13.080> the<00:23:13.200> swipe<00:23:13.600> left<00:23:14.680> uh<00:23:15.160> event.<00:23:15.760> You<00:23:15.840> might 00:23:16.030 --> 00:23:16.040 align:start position:0% know, the swipe left uh event. You might 00:23:16.040 --> 00:23:18.070 align:start position:0% know, the swipe left uh event. You might hook<00:23:16.280> up<00:23:16.400> to<00:23:16.720> like<00:23:16.880> Hammer.js<00:23:17.440> or<00:23:17.520> something. 00:23:18.070 --> 00:23:18.080 align:start position:0% hook up to like Hammer.js or something. 00:23:18.080 --> 00:23:20.670 align:start position:0% hook up to like Hammer.js or something. So,<00:23:18.200> you<00:23:18.320> could<00:23:18.440> just<00:23:19.160> implement<00:23:19.600> that<00:23:20.600> with 00:23:20.670 --> 00:23:20.680 align:start position:0% So, you could just implement that with 00:23:20.680 --> 00:23:21.950 align:start position:0% So, you could just implement that with this<00:23:21.360> uh 00:23:21.950 --> 00:23:21.960 align:start position:0% this uh 00:23:21.960 --> 00:23:23.950 align:start position:0% this uh with<00:23:22.080> this<00:23:22.200> multimethod,<00:23:23.200> and<00:23:23.320> then<00:23:23.640> you<00:23:23.760> can 00:23:23.950 --> 00:23:23.960 align:start position:0% with this multimethod, and then you can 00:23:23.960 --> 00:23:25.550 align:start position:0% with this multimethod, and then you can use<00:23:24.240> those<00:23:24.480> things<00:23:24.760> as<00:23:24.880> if<00:23:25.040> they<00:23:25.160> were<00:23:25.280> already 00:23:25.550 --> 00:23:25.560 align:start position:0% use those things as if they were already 00:23:25.560 --> 00:23:27.390 align:start position:0% use those things as if they were already included<00:23:25.960> in<00:23:26.080> Hoplon. 00:23:27.390 --> 00:23:27.400 align:start position:0% included in Hoplon. 00:23:27.400 --> 00:23:29.150 align:start position:0% included in Hoplon. One<00:23:27.520> cool<00:23:27.680> thing<00:23:27.840> about<00:23:28.040> that<00:23:28.200> is<00:23:28.320> that<00:23:28.800> what 00:23:29.150 --> 00:23:29.160 align:start position:0% One cool thing about that is that what 00:23:29.160 --> 00:23:30.790 align:start position:0% One cool thing about that is that what he<00:23:29.280> just<00:23:29.400> showed<00:23:29.560> that<00:23:29.680> multimethod,<00:23:30.560> it<00:23:30.640> lets 00:23:30.790 --> 00:23:30.800 align:start position:0% he just showed that multimethod, it lets 00:23:30.800 --> 00:23:32.830 align:start position:0% he just showed that multimethod, it lets you<00:23:30.920> add<00:23:31.160> attributes<00:23:31.720> to<00:23:32.120> components<00:23:32.640> or 00:23:32.830 --> 00:23:32.840 align:start position:0% you add attributes to components or 00:23:32.840 --> 00:23:34.350 align:start position:0% you add attributes to components or object<00:23:33.280> custom<00:23:33.600> elements<00:23:33.920> that<00:23:34.040> you<00:23:34.120> don't 00:23:34.350 --> 00:23:34.360 align:start position:0% object custom elements that you don't 00:23:34.360 --> 00:23:36.590 align:start position:0% object custom elements that you don't own.<00:23:35.040> This<00:23:35.160> differs<00:23:35.440> from<00:23:35.920> Angular<00:23:36.320> where<00:23:36.480> you 00:23:36.590 --> 00:23:36.600 align:start position:0% own. This differs from Angular where you 00:23:36.600 --> 00:23:38.270 align:start position:0% own. This differs from Angular where you can<00:23:36.880> add<00:23:37.120> custom<00:23:37.400> attributes,<00:23:37.920> but<00:23:38.200> it 00:23:38.270 --> 00:23:38.280 align:start position:0% can add custom attributes, but it 00:23:38.280 --> 00:23:40.390 align:start position:0% can add custom attributes, but it involves<00:23:38.640> scopes<00:23:39.080> and<00:23:39.280> various<00:23:39.560> machinery. 00:23:40.390 --> 00:23:40.400 align:start position:0% involves scopes and various machinery. 00:23:40.400 --> 00:23:43.030 align:start position:0% involves scopes and various machinery. And<00:23:40.480> web<00:23:40.640> component<00:23:41.240> specs,<00:23:41.680> which<00:23:42.160> also 00:23:43.030 --> 00:23:43.040 align:start position:0% And web component specs, which also 00:23:43.040 --> 00:23:44.790 align:start position:0% And web component specs, which also require<00:23:43.360> that<00:23:43.480> you<00:23:43.600> own<00:23:43.760> the<00:23:43.880> element.<00:23:44.600> So,<00:23:44.720> in 00:23:44.790 --> 00:23:44.800 align:start position:0% require that you own the element. So, in 00:23:44.800 --> 00:23:46.430 align:start position:0% require that you own the element. So, in this<00:23:44.920> example,<00:23:45.280> he's<00:23:45.400> actually 00:23:46.430 --> 00:23:46.440 align:start position:0% this example, he's actually 00:23:46.440 --> 00:23:48.230 align:start position:0% this example, he's actually teaching<00:23:46.920> elements<00:23:47.440> that<00:23:47.560> had<00:23:47.720> no<00:23:47.880> idea<00:23:48.080> what 00:23:48.230 --> 00:23:48.240 align:start position:0% teaching elements that had no idea what 00:23:48.240 --> 00:23:49.950 align:start position:0% teaching elements that had no idea what swipe<00:23:48.680> or<00:23:48.800> any<00:23:48.960> of<00:23:49.000> this<00:23:49.120> stuff<00:23:49.360> is,<00:23:49.760> how<00:23:49.880> to 00:23:49.950 --> 00:23:49.960 align:start position:0% swipe or any of this stuff is, how to 00:23:49.960 --> 00:23:51.390 align:start position:0% swipe or any of this stuff is, how to respond<00:23:50.280> to<00:23:50.360> these<00:23:50.480> kinds<00:23:50.640> of<00:23:50.720> events<00:23:51.240> uh 00:23:51.390 --> 00:23:51.400 align:start position:0% respond to these kinds of events uh 00:23:51.400 --> 00:23:53.270 align:start position:0% respond to these kinds of events uh without<00:23:51.800> modifying<00:23:52.280> them.<00:23:52.560> So,<00:23:52.680> this<00:23:52.800> is<00:23:53.120> kind 00:23:53.270 --> 00:23:53.280 align:start position:0% without modifying them. So, this is kind 00:23:53.280 --> 00:23:55.190 align:start position:0% without modifying them. So, this is kind of<00:23:53.320> an<00:23:53.400> example<00:23:53.800> of<00:23:53.960> a 00:23:55.190 --> 00:23:55.200 align:start position:0% of an example of a 00:23:55.200 --> 00:23:58.310 align:start position:0% of an example of a What's<00:23:55.320> that<00:23:55.480> like<00:23:56.200> problem? 00:23:58.310 --> 00:23:58.320 align:start position:0% What's that like problem? 00:23:58.320 --> 00:24:00.070 align:start position:0% What's that like problem? The<00:23:58.360> expression<00:23:58.720> problem.<00:23:59.160> Yes. 00:24:00.070 --> 00:24:00.080 align:start position:0% The expression problem. Yes. 00:24:00.080 --> 00:24:03.070 align:start position:0% The expression problem. Yes. That<00:24:00.240> thing. 00:24:03.070 --> 00:24:03.080 align:start position:0% 00:24:03.080 --> 00:24:05.310 align:start position:0% And<00:24:03.360> when<00:24:03.480> HTML<00:24:03.880> is<00:24:03.960> a<00:24:04.000> program,<00:24:04.800> which<00:24:05.000> it<00:24:05.120> is 00:24:05.310 --> 00:24:05.320 align:start position:0% And when HTML is a program, which it is 00:24:05.320 --> 00:24:07.350 align:start position:0% And when HTML is a program, which it is here,<00:24:06.000> you<00:24:06.120> can<00:24:06.200> do<00:24:06.400> all<00:24:06.520> kinds<00:24:06.800> of<00:24:07.120> neat 00:24:07.350 --> 00:24:07.360 align:start position:0% here, you can do all kinds of neat 00:24:07.360 --> 00:24:08.750 align:start position:0% here, you can do all kinds of neat things.<00:24:07.600> So,<00:24:07.760> here's<00:24:08.080> a<00:24:08.200> a<00:24:08.240> function<00:24:08.560> called 00:24:08.750 --> 00:24:08.760 align:start position:0% things. So, here's a a function called 00:24:08.760 --> 00:24:10.790 align:start position:0% things. So, here's a a function called defvalues,<00:24:09.360> which<00:24:09.520> is<00:24:09.600> basically<00:24:10.040> like<00:24:10.640> in 00:24:10.790 --> 00:24:10.800 align:start position:0% defvalues, which is basically like in 00:24:10.800 --> 00:24:12.590 align:start position:0% defvalues, which is basically like in let<00:24:11.000> you<00:24:11.080> can<00:24:11.200> destructure,<00:24:12.240> you<00:24:12.360> know,<00:24:12.480> the 00:24:12.590 --> 00:24:12.600 align:start position:0% let you can destructure, you know, the 00:24:12.600 --> 00:24:14.230 align:start position:0% let you can destructure, you know, the binding<00:24:13.000> form<00:24:13.400> and<00:24:13.520> the<00:24:13.600> expression.<00:24:14.120> So, 00:24:14.230 --> 00:24:14.240 align:start position:0% binding form and the expression. So, 00:24:14.240 --> 00:24:15.870 align:start position:0% binding form and the expression. So, this<00:24:14.360> is<00:24:14.440> basically<00:24:14.840> just<00:24:15.400> a<00:24:15.440> thing<00:24:15.600> that<00:24:15.720> does 00:24:15.870 --> 00:24:15.880 align:start position:0% this is basically just a thing that does 00:24:15.880 --> 00:24:17.510 align:start position:0% this is basically just a thing that does that,<00:24:16.080> but<00:24:16.160> it<00:24:16.280> defines<00:24:16.880> the<00:24:16.960> things<00:24:17.240> instead 00:24:17.510 --> 00:24:17.520 align:start position:0% that, but it defines the things instead 00:24:17.520 --> 00:24:20.110 align:start position:0% that, but it defines the things instead of<00:24:17.600> binding<00:24:17.960> them<00:24:18.640> locally.<00:24:19.680> So,<00:24:19.880> we<00:24:19.960> have<00:24:20.080> a 00:24:20.110 --> 00:24:20.120 align:start position:0% of binding them locally. So, we have a 00:24:20.120 --> 00:24:21.630 align:start position:0% of binding them locally. So, we have a function<00:24:20.400> called<00:24:20.600> tabify,<00:24:21.280> which<00:24:21.400> I'm<00:24:21.480> not 00:24:21.630 --> 00:24:21.640 align:start position:0% function called tabify, which I'm not 00:24:21.640 --> 00:24:23.190 align:start position:0% function called tabify, which I'm not showing<00:24:21.880> here,<00:24:22.320> but<00:24:22.480> basically<00:24:22.840> what<00:24:22.960> it<00:24:23.040> does 00:24:23.190 --> 00:24:23.200 align:start position:0% showing here, but basically what it does 00:24:23.200 --> 00:24:25.750 align:start position:0% showing here, but basically what it does is<00:24:23.320> it<00:24:23.440> takes<00:24:24.080> pairs<00:24:24.440> of<00:24:24.560> things.<00:24:25.480> And<00:24:25.600> if<00:24:25.680> you 00:24:25.750 --> 00:24:25.760 align:start position:0% is it takes pairs of things. And if you 00:24:25.760 --> 00:24:27.990 align:start position:0% is it takes pairs of things. And if you think<00:24:25.880> about<00:24:26.120> tabs<00:24:26.640> like<00:24:27.040> on<00:24:27.200> the<00:24:27.280> web,<00:24:27.880> you 00:24:27.990 --> 00:24:28.000 align:start position:0% think about tabs like on the web, you 00:24:28.000 --> 00:24:30.070 align:start position:0% think about tabs like on the web, you click<00:24:28.200> on<00:24:28.320> something<00:24:28.720> and<00:24:28.840> it<00:24:28.960> shows<00:24:29.520> content 00:24:30.070 --> 00:24:30.080 align:start position:0% click on something and it shows content 00:24:30.080 --> 00:24:31.710 align:start position:0% click on something and it shows content certain<00:24:30.360> content<00:24:30.760> and<00:24:30.880> hides<00:24:31.120> other<00:24:31.280> content, 00:24:31.710 --> 00:24:31.720 align:start position:0% certain content and hides other content, 00:24:31.720 --> 00:24:33.070 align:start position:0% certain content and hides other content, right?<00:24:31.960> And<00:24:32.040> then<00:24:32.160> you<00:24:32.280> click<00:24:32.560> on<00:24:32.680> another 00:24:33.070 --> 00:24:33.080 align:start position:0% right? And then you click on another 00:24:33.080 --> 00:24:34.750 align:start position:0% right? And then you click on another thing<00:24:33.720> and<00:24:33.840> it<00:24:33.960> shows<00:24:34.280> the<00:24:34.360> content 00:24:34.750 --> 00:24:34.760 align:start position:0% thing and it shows the content 00:24:34.760 --> 00:24:37.990 align:start position:0% thing and it shows the content associated<00:24:35.240> with<00:24:35.400> that<00:24:36.480> tab,<00:24:37.080> right?<00:24:37.880> So, 00:24:37.990 --> 00:24:38.000 align:start position:0% associated with that tab, right? So, 00:24:38.000 --> 00:24:39.430 align:start position:0% associated with that tab, right? So, there's<00:24:38.200> like<00:24:38.560> a 00:24:39.430 --> 00:24:39.440 align:start position:0% there's like a 00:24:39.440 --> 00:24:42.070 align:start position:0% there's like a an<00:24:39.560> interesting<00:24:40.640> way<00:24:40.800> to<00:24:40.920> generalize<00:24:41.520> this. 00:24:42.070 --> 00:24:42.080 align:start position:0% an interesting way to generalize this. 00:24:42.080 --> 00:24:44.270 align:start position:0% an interesting way to generalize this. So,<00:24:42.200> if<00:24:42.280> you<00:24:42.360> imagine<00:24:42.840> that<00:24:43.560> the<00:24:43.720> real 00:24:44.270 --> 00:24:44.280 align:start position:0% So, if you imagine that the real 00:24:44.280 --> 00:24:47.070 align:start position:0% So, if you imagine that the real abstraction<00:24:44.920> here<00:24:45.240> is<00:24:46.000> a<00:24:46.080> number<00:24:46.400> of<00:24:46.520> triggers 00:24:47.070 --> 00:24:47.080 align:start position:0% abstraction here is a number of triggers 00:24:47.080 --> 00:24:49.030 align:start position:0% abstraction here is a number of triggers and<00:24:47.200> a<00:24:47.240> number<00:24:47.520> of<00:24:47.640> contents,<00:24:48.600> and<00:24:48.840> you<00:24:48.920> just 00:24:49.030 --> 00:24:49.040 align:start position:0% and a number of contents, and you just 00:24:49.040 --> 00:24:50.310 align:start position:0% and a number of contents, and you just want<00:24:49.160> to<00:24:49.240> set<00:24:49.360> a<00:24:49.400> relationship<00:24:49.880> between<00:24:50.160> these 00:24:50.310 --> 00:24:50.320 align:start position:0% want to set a relationship between these 00:24:50.320 --> 00:24:51.950 align:start position:0% want to set a relationship between these things<00:24:50.600> that<00:24:50.720> when<00:24:50.840> you<00:24:50.920> click<00:24:51.120> on<00:24:51.200> a<00:24:51.240> trigger, 00:24:51.950 --> 00:24:51.960 align:start position:0% things that when you click on a trigger, 00:24:51.960 --> 00:24:53.790 align:start position:0% things that when you click on a trigger, the<00:24:52.160> the<00:24:52.280> associated<00:24:52.720> content<00:24:53.160> shows<00:24:53.400> itself 00:24:53.790 --> 00:24:53.800 align:start position:0% the the associated content shows itself 00:24:53.800 --> 00:24:55.990 align:start position:0% the the associated content shows itself and<00:24:53.920> the<00:24:54.000> other<00:24:54.160> contents<00:24:54.560> hide<00:24:54.760> themselves. 00:24:55.990 --> 00:24:56.000 align:start position:0% and the other contents hide themselves. 00:24:56.000 --> 00:24:57.830 align:start position:0% and the other contents hide themselves. And<00:24:57.000> uh<00:24:57.120> when<00:24:57.240> you<00:24:57.320> click<00:24:57.520> on<00:24:57.600> the<00:24:57.680> other 00:24:57.830 --> 00:24:57.840 align:start position:0% And uh when you click on the other 00:24:57.840 --> 00:24:59.150 align:start position:0% And uh when you click on the other trigger 00:24:59.150 --> 00:24:59.160 align:start position:0% trigger 00:24:59.160 --> 00:25:01.550 align:start position:0% trigger you<00:24:59.240> know<00:25:00.000> same<00:25:00.160> thing<00:25:00.360> happens.<00:25:01.000> So<00:25:01.160> here<00:25:01.400> we 00:25:01.550 --> 00:25:01.560 align:start position:0% you know same thing happens. So here we 00:25:01.560 --> 00:25:02.830 align:start position:0% you know same thing happens. So here we have 00:25:02.830 --> 00:25:02.840 align:start position:0% have 00:25:02.840 --> 00:25:04.550 align:start position:0% have basically<00:25:03.200> we<00:25:03.320> call<00:25:03.640> this<00:25:03.880> this<00:25:04.080> function<00:25:04.440> to 00:25:04.550 --> 00:25:04.560 align:start position:0% basically we call this this function to 00:25:04.560 --> 00:25:06.590 align:start position:0% basically we call this this function to tabify<00:25:05.080> these<00:25:05.320> things,<00:25:05.880> but<00:25:06.000> it<00:25:06.080> returns<00:25:06.480> them 00:25:06.590 --> 00:25:06.600 align:start position:0% tabify these things, but it returns them 00:25:06.600 --> 00:25:08.790 align:start position:0% tabify these things, but it returns them back.<00:25:06.960> It<00:25:07.080> doesn't<00:25:07.320> compose<00:25:07.720> them. 00:25:08.790 --> 00:25:08.800 align:start position:0% back. It doesn't compose them. 00:25:08.800 --> 00:25:10.910 align:start position:0% back. It doesn't compose them. And<00:25:09.080> this<00:25:09.200> is<00:25:09.320> an<00:25:09.400> interesting<00:25:09.800> thing<00:25:10.040> because 00:25:10.910 --> 00:25:10.920 align:start position:0% And this is an interesting thing because 00:25:10.920 --> 00:25:13.790 align:start position:0% And this is an interesting thing because we've<00:25:11.400> been<00:25:11.600> able<00:25:11.920> to<00:25:12.520> decouple 00:25:13.790 --> 00:25:13.800 align:start position:0% we've been able to decouple 00:25:13.800 --> 00:25:15.430 align:start position:0% we've been able to decouple the<00:25:13.880> relationship<00:25:14.480> between<00:25:14.800> the<00:25:14.880> things<00:25:15.320> and 00:25:15.430 --> 00:25:15.440 align:start position:0% the relationship between the things and 00:25:15.440 --> 00:25:17.430 align:start position:0% the relationship between the things and their<00:25:15.560> internal<00:25:15.960> state<00:25:16.760> from<00:25:17.200> their 00:25:17.430 --> 00:25:17.440 align:start position:0% their internal state from their 00:25:17.440 --> 00:25:19.350 align:start position:0% their internal state from their composition<00:25:17.960> in<00:25:18.040> the<00:25:18.120> DOM. 00:25:19.350 --> 00:25:19.360 align:start position:0% composition in the DOM. 00:25:19.360 --> 00:25:22.550 align:start position:0% composition in the DOM. So<00:25:19.680> the<00:25:19.880> UI<00:25:20.200> guy<00:25:20.560> can<00:25:20.880> use<00:25:21.200> this<00:25:21.600> this<00:25:21.840> function 00:25:22.550 --> 00:25:22.560 align:start position:0% So the UI guy can use this this function 00:25:22.560 --> 00:25:24.510 align:start position:0% So the UI guy can use this this function to<00:25:22.680> create<00:25:22.960> the<00:25:23.080> tabs<00:25:23.720> kind<00:25:23.920> of<00:25:24.000> relationship 00:25:24.510 --> 00:25:24.520 align:start position:0% to create the tabs kind of relationship 00:25:24.520 --> 00:25:26.350 align:start position:0% to create the tabs kind of relationship between<00:25:24.800> elements,<00:25:25.600> but<00:25:25.720> he<00:25:25.840> might<00:25:26.000> not<00:25:26.200> want 00:25:26.350 --> 00:25:26.360 align:start position:0% between elements, but he might not want 00:25:26.360 --> 00:25:28.390 align:start position:0% between elements, but he might not want to<00:25:26.640> put<00:25:26.840> them<00:25:26.960> into<00:25:27.160> an<00:25:27.240> unordered<00:25:27.560> list<00:25:27.800> here 00:25:28.390 --> 00:25:28.400 align:start position:0% to put them into an unordered list here 00:25:28.400 --> 00:25:29.870 align:start position:0% to put them into an unordered list here like<00:25:28.600> I<00:25:28.680> did.<00:25:28.880> He<00:25:29.000> might<00:25:29.160> want<00:25:29.320> to<00:25:29.400> put<00:25:29.640> like 00:25:29.870 --> 00:25:29.880 align:start position:0% like I did. He might want to put like 00:25:29.880 --> 00:25:31.230 align:start position:0% like I did. He might want to put like one<00:25:30.040> trigger<00:25:30.360> way<00:25:30.520> over<00:25:30.720> here<00:25:31.000> and<00:25:31.120> one 00:25:31.230 --> 00:25:31.240 align:start position:0% one trigger way over here and one 00:25:31.240 --> 00:25:33.030 align:start position:0% one trigger way over here and one trigger<00:25:31.520> way<00:25:31.720> over<00:25:31.920> here,<00:25:32.640> and<00:25:32.720> it<00:25:32.800> might<00:25:32.920> not 00:25:33.030 --> 00:25:33.040 align:start position:0% trigger way over here, and it might not 00:25:33.040 --> 00:25:34.950 align:start position:0% trigger way over here, and it might not look<00:25:33.200> like<00:25:33.360> tabs<00:25:33.640> at<00:25:33.760> all.<00:25:34.080> It's<00:25:34.240> just,<00:25:34.840> you 00:25:34.950 --> 00:25:34.960 align:start position:0% look like tabs at all. It's just, you 00:25:34.960 --> 00:25:36.350 align:start position:0% look like tabs at all. It's just, you know,<00:25:35.080> essentially<00:25:35.680> a<00:25:35.760> tab-like 00:25:36.350 --> 00:25:36.360 align:start position:0% know, essentially a tab-like 00:25:36.360 --> 00:25:38.230 align:start position:0% know, essentially a tab-like relationship,<00:25:37.360> and<00:25:37.480> he<00:25:37.560> can<00:25:37.640> express<00:25:38.000> that, 00:25:38.230 --> 00:25:38.240 align:start position:0% relationship, and he can express that, 00:25:38.240 --> 00:25:40.390 align:start position:0% relationship, and he can express that, and<00:25:38.320> he<00:25:38.400> can<00:25:38.520> make<00:25:38.680> his<00:25:38.840> own<00:25:39.480> custom<00:25:39.840> elements 00:25:40.390 --> 00:25:40.400 align:start position:0% and he can make his own custom elements 00:25:40.400 --> 00:25:41.950 align:start position:0% and he can make his own custom elements that,<00:25:41.040> you<00:25:41.160> know,<00:25:41.320> use<00:25:41.560> this<00:25:41.760> as<00:25:41.880> an 00:25:41.950 --> 00:25:41.960 align:start position:0% that, you know, use this as an 00:25:41.960 --> 00:25:44.510 align:start position:0% that, you know, use this as an underlying<00:25:42.800> lower-level<00:25:43.360> thing.<00:25:44.120> So<00:25:44.280> you<00:25:44.360> can 00:25:44.510 --> 00:25:44.520 align:start position:0% underlying lower-level thing. So you can 00:25:44.520 --> 00:25:46.110 align:start position:0% underlying lower-level thing. So you can progress<00:25:44.920> from<00:25:45.080> simple<00:25:45.400> things<00:25:45.800> to<00:25:45.920> more 00:25:46.110 --> 00:25:46.120 align:start position:0% progress from simple things to more 00:25:46.120 --> 00:25:49.870 align:start position:0% progress from simple things to more complex<00:25:47.160> in<00:25:47.320> a<00:25:47.680> in<00:25:47.760> a<00:25:47.800> nice<00:25:48.040> way. 00:25:49.870 --> 00:25:49.880 align:start position:0% complex in a in a nice way. 00:25:49.880 --> 00:25:51.230 align:start position:0% complex in a in a nice way. You<00:25:49.960> can<00:25:50.080> also<00:25:50.240> do<00:25:50.360> things<00:25:50.520> like<00:25:50.680> this.<00:25:51.040> So 00:25:51.230 --> 00:25:51.240 align:start position:0% You can also do things like this. So 00:25:51.240 --> 00:25:52.990 align:start position:0% You can also do things like this. So here,<00:25:51.920> a<00:25:52.000> lot<00:25:52.160> of<00:25:52.240> times<00:25:52.520> people<00:25:52.760> will<00:25:52.880> do 00:25:52.990 --> 00:25:53.000 align:start position:0% here, a lot of times people will do 00:25:53.000 --> 00:25:54.870 align:start position:0% here, a lot of times people will do like,<00:25:53.360> you<00:25:53.440> know,<00:25:53.600> div<00:25:54.040> and<00:25:54.200> give<00:25:54.320> it<00:25:54.400> a<00:25:54.440> class 00:25:54.870 --> 00:25:54.880 align:start position:0% like, you know, div and give it a class 00:25:54.880 --> 00:25:56.190 align:start position:0% like, you know, div and give it a class red,<00:25:55.240> and<00:25:55.360> that<00:25:55.480> means<00:25:55.680> that,<00:25:55.880> you<00:25:56.000> know,<00:25:56.120> it 00:25:56.190 --> 00:25:56.200 align:start position:0% red, and that means that, you know, it 00:25:56.200 --> 00:25:57.470 align:start position:0% red, and that means that, you know, it should<00:25:56.320> be<00:25:56.440> red,<00:25:56.680> all<00:25:56.760> the<00:25:56.840> things<00:25:57.080> with<00:25:57.200> class 00:25:57.470 --> 00:25:57.480 align:start position:0% should be red, all the things with class 00:25:57.480 --> 00:25:58.430 align:start position:0% should be red, all the things with class red. 00:25:58.430 --> 00:25:58.440 align:start position:0% red. 00:25:58.440 --> 00:26:00.710 align:start position:0% red. And<00:25:58.800> but<00:25:59.240> that's<00:25:59.520> like<00:25:59.680> a<00:25:59.720> weird<00:26:00.120> kind<00:26:00.440> of,<00:26:00.640> you 00:26:00.710 --> 00:26:00.720 align:start position:0% And but that's like a weird kind of, you 00:26:00.720 --> 00:26:02.190 align:start position:0% And but that's like a weird kind of, you know,<00:26:00.840> that<00:26:01.080> that<00:26:01.280> CSS,<00:26:01.720> especially<00:26:02.040> with<00:26:02.160> the 00:26:02.190 --> 00:26:02.200 align:start position:0% know, that that CSS, especially with the 00:26:02.200 --> 00:26:04.070 align:start position:0% know, that that CSS, especially with the cascading,<00:26:02.720> is<00:26:02.800> like<00:26:02.920> a<00:26:03.000> weird<00:26:03.280> kind<00:26:03.520> of 00:26:04.070 --> 00:26:04.080 align:start position:0% cascading, is like a weird kind of 00:26:04.080 --> 00:26:06.470 align:start position:0% cascading, is like a weird kind of scoping<00:26:04.600> system<00:26:05.320> and<00:26:05.720> aspect-oriented 00:26:06.470 --> 00:26:06.480 align:start position:0% scoping system and aspect-oriented 00:26:06.480 --> 00:26:07.990 align:start position:0% scoping system and aspect-oriented programming.<00:26:07.360> You<00:26:07.440> know,<00:26:07.520> you're<00:26:07.640> setting<00:26:07.880> up 00:26:07.990 --> 00:26:08.000 align:start position:0% programming. You know, you're setting up 00:26:08.000 --> 00:26:09.870 align:start position:0% programming. You know, you're setting up a<00:26:08.040> scope<00:26:08.520> in<00:26:08.600> which,<00:26:09.160> you<00:26:09.240> know,<00:26:09.520> and<00:26:09.720> and 00:26:09.870 --> 00:26:09.880 align:start position:0% a scope in which, you know, and and 00:26:09.880 --> 00:26:11.390 align:start position:0% a scope in which, you know, and and really<00:26:10.120> the<00:26:10.440> the<00:26:10.600> purpose<00:26:10.960> of<00:26:11.080> it<00:26:11.160> is<00:26:11.280> to 00:26:11.390 --> 00:26:11.400 align:start position:0% really the the purpose of it is to 00:26:11.400 --> 00:26:14.190 align:start position:0% really the the purpose of it is to manipulate<00:26:11.920> properties<00:26:12.600> of<00:26:13.000> objects,<00:26:14.080> you 00:26:14.190 --> 00:26:14.200 align:start position:0% manipulate properties of objects, you 00:26:14.200 --> 00:26:16.190 align:start position:0% manipulate properties of objects, you know,<00:26:14.360> like<00:26:14.600> I<00:26:14.640> want<00:26:14.760> to<00:26:14.800> set<00:26:14.960> the<00:26:15.240> style.color 00:26:16.190 --> 00:26:16.200 align:start position:0% know, like I want to set the style.color 00:26:16.200 --> 00:26:17.310 align:start position:0% know, like I want to set the style.color property. 00:26:17.310 --> 00:26:17.320 align:start position:0% property. 00:26:17.320 --> 00:26:20.150 align:start position:0% property. So<00:26:18.000> a<00:26:18.080> more<00:26:18.240> direct<00:26:18.920> and<00:26:19.240> powerful<00:26:19.680> way<00:26:19.880> is<00:26:20.040> to 00:26:20.150 --> 00:26:20.160 align:start position:0% So a more direct and powerful way is to 00:26:20.160 --> 00:26:22.630 align:start position:0% So a more direct and powerful way is to actually<00:26:20.440> define<00:26:20.800> a<00:26:20.840> thing<00:26:21.120> called<00:26:21.360> red<00:26:21.600> div. 00:26:22.630 --> 00:26:22.640 align:start position:0% actually define a thing called red div. 00:26:22.640 --> 00:26:24.510 align:start position:0% actually define a thing called red div. And<00:26:23.000> since<00:26:23.360> all<00:26:23.480> these<00:26:23.680> things<00:26:23.960> implement<00:26:24.440> I 00:26:24.510 --> 00:26:24.520 align:start position:0% And since all these things implement I 00:26:24.520 --> 00:26:26.630 align:start position:0% And since all these things implement I fun,<00:26:24.960> and<00:26:25.080> they're<00:26:25.200> all<00:26:25.320> invocable, 00:26:26.630 --> 00:26:26.640 align:start position:0% fun, and they're all invocable, 00:26:26.640 --> 00:26:29.310 align:start position:0% fun, and they're all invocable, we<00:26:27.040> can<00:26:27.120> just<00:26:27.320> use<00:26:27.520> that<00:26:27.960> in<00:26:28.040> the<00:26:28.120> DOM.<00:26:28.920> And<00:26:29.200> so 00:26:29.310 --> 00:26:29.320 align:start position:0% we can just use that in the DOM. And so 00:26:29.320 --> 00:26:31.310 align:start position:0% we can just use that in the DOM. And so that<00:26:29.560> can<00:26:30.040> you<00:26:30.160> can<00:26:30.280> use<00:26:30.600> lexical<00:26:31.000> scope 00:26:31.310 --> 00:26:31.320 align:start position:0% that can you can use lexical scope 00:26:31.320 --> 00:26:32.790 align:start position:0% that can you can use lexical scope there.<00:26:31.840> You<00:26:31.960> know,<00:26:32.080> red<00:26:32.240> div<00:26:32.440> might<00:26:32.640> mean<00:26:32.760> a 00:26:32.790 --> 00:26:32.800 align:start position:0% there. You know, red div might mean a 00:26:32.800 --> 00:26:34.070 align:start position:0% there. You know, red div might mean a different<00:26:33.080> thing<00:26:33.240> in<00:26:33.360> one<00:26:33.480> context<00:26:33.960> than 00:26:34.070 --> 00:26:34.080 align:start position:0% different thing in one context than 00:26:34.080 --> 00:26:35.910 align:start position:0% different thing in one context than another.<00:26:34.320> You<00:26:34.400> can<00:26:34.520> use<00:26:34.680> dynamic<00:26:35.160> scope<00:26:35.800> to 00:26:35.910 --> 00:26:35.920 align:start position:0% another. You can use dynamic scope to 00:26:35.920 --> 00:26:37.350 align:start position:0% another. You can use dynamic scope to figure<00:26:36.160> out<00:26:36.280> what<00:26:36.400> color<00:26:36.640> it<00:26:36.760> should<00:26:36.880> be.<00:26:37.240> All 00:26:37.350 --> 00:26:37.360 align:start position:0% figure out what color it should be. All 00:26:37.360 --> 00:26:39.350 align:start position:0% figure out what color it should be. All the<00:26:37.480> things<00:26:37.760> that<00:26:38.200> that<00:26:38.720> Closure<00:26:39.000> lets<00:26:39.160> you<00:26:39.240> do 00:26:39.350 --> 00:26:39.360 align:start position:0% the things that that Closure lets you do 00:26:39.360 --> 00:26:41.350 align:start position:0% the things that that Closure lets you do already. 00:26:41.350 --> 00:26:41.360 align:start position:0% already. 00:26:41.360 --> 00:26:43.710 align:start position:0% already. It's<00:26:41.400> more<00:26:41.520> powerful<00:26:41.920> than<00:26:42.040> CSS,<00:26:42.480> I<00:26:42.520> believe. 00:26:43.710 --> 00:26:43.720 align:start position:0% It's more powerful than CSS, I believe. 00:26:43.720 --> 00:26:47.190 align:start position:0% It's more powerful than CSS, I believe. So<00:26:43.880> Castra<00:26:44.520> is<00:26:45.200> the<00:26:45.320> back<00:26:45.600> end<00:26:46.000> that<00:26:46.120> we<00:26:46.240> use. 00:26:47.190 --> 00:26:47.200 align:start position:0% So Castra is the back end that we use. 00:26:47.200 --> 00:26:49.710 align:start position:0% So Castra is the back end that we use. And<00:26:47.480> this<00:26:47.600> is<00:26:47.800> a<00:26:48.040> an<00:26:48.160> RPC 00:26:49.710 --> 00:26:49.720 align:start position:0% And this is a an RPC 00:26:49.720 --> 00:26:50.990 align:start position:0% And this is a an RPC an<00:26:49.840> RPC 00:26:50.990 --> 00:26:51.000 align:start position:0% an RPC 00:26:51.000 --> 00:26:53.710 align:start position:0% an RPC uh<00:26:51.400> middleware. 00:26:53.710 --> 00:26:53.720 align:start position:0% uh middleware. 00:26:53.720 --> 00:26:55.950 align:start position:0% uh middleware. and<00:26:54.000> a<00:26:54.080> ClojureScript<00:26:54.560> client<00:26:54.840> library. 00:26:55.950 --> 00:26:55.960 align:start position:0% and a ClojureScript client library. 00:26:55.960 --> 00:26:57.630 align:start position:0% and a ClojureScript client library. Uh<00:26:56.080> it<00:26:56.120> uses<00:26:56.480> EDN<00:26:56.880> back<00:26:57.120> and<00:26:57.240> forth,<00:26:57.440> so<00:26:57.560> you 00:26:57.630 --> 00:26:57.640 align:start position:0% Uh it uses EDN back and forth, so you 00:26:57.640 --> 00:27:00.270 align:start position:0% Uh it uses EDN back and forth, so you call<00:26:58.000> it<00:26:58.160> like<00:26:58.400> functions<00:26:59.080> on<00:26:59.200> the<00:26:59.320> client, 00:27:00.270 --> 00:27:00.280 align:start position:0% call it like functions on the client, 00:27:00.280 --> 00:27:02.110 align:start position:0% call it like functions on the client, and<00:27:00.800> uh<00:27:01.200> you<00:27:01.320> know,<00:27:01.440> you<00:27:01.720> give<00:27:01.920> it 00:27:02.110 --> 00:27:02.120 align:start position:0% and uh you know, you give it 00:27:02.120 --> 00:27:03.910 align:start position:0% and uh you know, you give it ClojureScript<00:27:02.640> data. 00:27:03.910 --> 00:27:03.920 align:start position:0% ClojureScript data. 00:27:03.920 --> 00:27:05.990 align:start position:0% ClojureScript data. You<00:27:04.000> don't<00:27:04.600> it's<00:27:04.960> pretty<00:27:05.200> much<00:27:05.400> transparent. 00:27:05.990 --> 00:27:06.000 align:start position:0% You don't it's pretty much transparent. 00:27:06.000 --> 00:27:07.510 align:start position:0% You don't it's pretty much transparent. There's<00:27:06.160> no 00:27:07.510 --> 00:27:07.520 align:start position:0% There's no 00:27:07.520 --> 00:27:08.070 align:start position:0% There's no uh 00:27:08.070 --> 00:27:08.080 align:start position:0% uh 00:27:08.080 --> 00:27:09.470 align:start position:0% uh you're<00:27:08.200> not<00:27:08.360> making<00:27:08.600> anything<00:27:08.840> be<00:27:08.960> JSON<00:27:09.400> or 00:27:09.470 --> 00:27:09.480 align:start position:0% you're not making anything be JSON or 00:27:09.480 --> 00:27:11.990 align:start position:0% you're not making anything be JSON or anything<00:27:09.680> like<00:27:09.840> that.<00:27:10.720> Um<00:27:11.400> it<00:27:11.520> has<00:27:11.720> a<00:27:11.760> foreign 00:27:11.990 --> 00:27:12.000 align:start position:0% anything like that. Um it has a foreign 00:27:12.000 --> 00:27:13.910 align:start position:0% anything like that. Um it has a foreign assist<00:27:12.200> per<00:27:12.320> CQRS<00:27:12.880> state<00:27:13.080> machine<00:27:13.400> pattern, 00:27:13.910 --> 00:27:13.920 align:start position:0% assist per CQRS state machine pattern, 00:27:13.920 --> 00:27:16.430 align:start position:0% assist per CQRS state machine pattern, and<00:27:14.480> uh<00:27:14.880> it's<00:27:15.160> great<00:27:15.440> with<00:27:15.560> Datomic<00:27:16.040> because 00:27:16.430 --> 00:27:16.440 align:start position:0% and uh it's great with Datomic because 00:27:16.440 --> 00:27:18.950 align:start position:0% and uh it's great with Datomic because the<00:27:16.520> CQRS<00:27:17.040> pattern<00:27:17.760> is<00:27:18.200> uh 00:27:18.950 --> 00:27:18.960 align:start position:0% the CQRS pattern is uh 00:27:18.960 --> 00:27:20.670 align:start position:0% the CQRS pattern is uh really<00:27:19.240> amenable<00:27:19.640> to<00:27:19.800> polling,<00:27:20.480> which 00:27:20.670 --> 00:27:20.680 align:start position:0% really amenable to polling, which 00:27:20.680 --> 00:27:22.670 align:start position:0% really amenable to polling, which Datomic<00:27:21.200> is<00:27:21.320> really<00:27:21.560> good<00:27:21.800> at.<00:27:22.000> Like,<00:27:22.480> reads 00:27:22.670 --> 00:27:22.680 align:start position:0% Datomic is really good at. Like, reads 00:27:22.680 --> 00:27:24.750 align:start position:0% Datomic is really good at. Like, reads are<00:27:22.800> free,<00:27:23.040> so<00:27:23.200> polling<00:27:23.720> is<00:27:24.080> a<00:27:24.120> lot<00:27:24.400> cheaper 00:27:24.750 --> 00:27:24.760 align:start position:0% are free, so polling is a lot cheaper 00:27:24.760 --> 00:27:26.390 align:start position:0% are free, so polling is a lot cheaper than<00:27:25.280> if<00:27:25.400> you're<00:27:25.520> calling<00:27:25.840> into,<00:27:26.200> you<00:27:26.320> know, 00:27:26.390 --> 00:27:26.400 align:start position:0% than if you're calling into, you know, 00:27:26.400 --> 00:27:29.270 align:start position:0% than if you're calling into, you know, like<00:27:26.560> MySQL<00:27:27.040> or<00:27:27.160> something. 00:27:29.270 --> 00:27:29.280 align:start position:0% like MySQL or something. 00:27:29.280 --> 00:27:31.070 align:start position:0% like MySQL or something. Here's<00:27:29.440> the<00:27:29.520> picture,<00:27:29.840> basically,<00:27:30.560> of<00:27:30.880> what's 00:27:31.070 --> 00:27:31.080 align:start position:0% Here's the picture, basically, of what's 00:27:31.080 --> 00:27:32.430 align:start position:0% Here's the picture, basically, of what's going<00:27:31.280> on.<00:27:31.400> In<00:27:31.480> the<00:27:31.560> client,<00:27:31.960> you<00:27:32.040> call<00:27:32.280> this 00:27:32.430 --> 00:27:32.440 align:start position:0% going on. In the client, you call this 00:27:32.440 --> 00:27:34.150 align:start position:0% going on. In the client, you call this function. 00:27:34.150 --> 00:27:34.160 align:start position:0% function. 00:27:34.160 --> 00:27:35.430 align:start position:0% function. Goes<00:27:34.400> through 00:27:35.430 --> 00:27:35.440 align:start position:0% Goes through 00:27:35.440 --> 00:27:37.950 align:start position:0% Goes through uh<00:27:35.840> our<00:27:36.000> little<00:27:36.200> servlet<00:27:37.280> uh 00:27:37.950 --> 00:27:37.960 align:start position:0% uh our little servlet uh 00:27:37.960 --> 00:27:39.670 align:start position:0% uh our little servlet uh our<00:27:38.080> middleware<00:27:38.480> in<00:27:38.600> Ring. 00:27:39.670 --> 00:27:39.680 align:start position:0% our middleware in Ring. 00:27:39.680 --> 00:27:43.070 align:start position:0% our middleware in Ring. And<00:27:40.680> the<00:27:41.040> RPC<00:27:41.480> handler 00:27:43.070 --> 00:27:43.080 align:start position:0% And the RPC handler 00:27:43.080 --> 00:27:45.190 align:start position:0% And the RPC handler looks<00:27:43.320> at<00:27:43.440> authentication<00:27:44.040> annotations, 00:27:45.190 --> 00:27:45.200 align:start position:0% looks at authentication annotations, 00:27:45.200 --> 00:27:47.150 align:start position:0% looks at authentication annotations, calls<00:27:45.560> an<00:27:45.680> RPC<00:27:46.080> function<00:27:46.480> in<00:27:46.560> your<00:27:46.760> API 00:27:47.150 --> 00:27:47.160 align:start position:0% calls an RPC function in your API 00:27:47.160 --> 00:27:48.710 align:start position:0% calls an RPC function in your API namespace, 00:27:48.710 --> 00:27:48.720 align:start position:0% namespace, 00:27:48.720 --> 00:27:50.870 align:start position:0% namespace, and<00:27:49.440> that's<00:27:49.680> basically<00:27:50.200> for<00:27:50.360> side<00:27:50.600> effects 00:27:50.870 --> 00:27:50.880 align:start position:0% and that's basically for side effects 00:27:50.880 --> 00:27:51.830 align:start position:0% and that's basically for side effects only.<00:27:51.080> It's<00:27:51.200> going<00:27:51.320> to<00:27:51.400> manipulate<00:27:51.760> the 00:27:51.830 --> 00:27:51.840 align:start position:0% only. It's going to manipulate the 00:27:51.840 --> 00:27:54.030 align:start position:0% only. It's going to manipulate the database<00:27:52.200> in<00:27:52.280> some<00:27:52.480> way. 00:27:54.030 --> 00:27:54.040 align:start position:0% database in some way. 00:27:54.040 --> 00:27:56.270 align:start position:0% database in some way. It<00:27:54.160> always<00:27:54.400> returns<00:27:54.960> the<00:27:55.040> same<00:27:55.320> exact<00:27:55.680> query. 00:27:56.270 --> 00:27:56.280 align:start position:0% It always returns the same exact query. 00:27:56.280 --> 00:27:57.990 align:start position:0% It always returns the same exact query. So,<00:27:56.480> if<00:27:56.640> you<00:27:56.760> were<00:27:57.040> a<00:27:57.120> shopping<00:27:57.480> cart<00:27:57.720> site, 00:27:57.990 --> 00:27:58.000 align:start position:0% So, if you were a shopping cart site, 00:27:58.000 --> 00:28:00.430 align:start position:0% So, if you were a shopping cart site, this<00:27:58.160> query<00:27:58.440> might<00:27:58.680> be<00:27:59.200> what's<00:27:59.360> your<00:27:59.520> user<00:27:59.920> ID 00:28:00.430 --> 00:28:00.440 align:start position:0% this query might be what's your user ID 00:28:00.440 --> 00:28:02.390 align:start position:0% this query might be what's your user ID and<00:28:00.720> what's<00:28:00.880> in<00:28:00.960> your<00:28:01.080> shopping<00:28:01.440> cart,<00:28:01.760> say. 00:28:02.390 --> 00:28:02.400 align:start position:0% and what's in your shopping cart, say. 00:28:02.400 --> 00:28:03.390 align:start position:0% and what's in your shopping cart, say. But,<00:28:02.520> that<00:28:02.640> doesn't<00:28:02.880> depend<00:28:03.160> It<00:28:03.240> doesn't 00:28:03.390 --> 00:28:03.400 align:start position:0% But, that doesn't depend It doesn't 00:28:03.400 --> 00:28:06.110 align:start position:0% But, that doesn't depend It doesn't matter<00:28:03.640> what<00:28:04.400> what<00:28:04.680> the<00:28:05.160> uh<00:28:05.440> endpoint<00:28:05.920> was 00:28:06.110 --> 00:28:06.120 align:start position:0% matter what what the uh endpoint was 00:28:06.120 --> 00:28:07.590 align:start position:0% matter what what the uh endpoint was that<00:28:06.240> you<00:28:06.360> called.<00:28:06.640> You<00:28:06.760> call<00:28:07.000> login,<00:28:07.480> you 00:28:07.590 --> 00:28:07.600 align:start position:0% that you called. You call login, you 00:28:07.600 --> 00:28:09.710 align:start position:0% that you called. You call login, you call,<00:28:08.280> you<00:28:08.400> know,<00:28:08.520> buy<00:28:08.760> a<00:28:08.840> thing.<00:28:09.320> Whatever 00:28:09.710 --> 00:28:09.720 align:start position:0% call, you know, buy a thing. Whatever 00:28:09.720 --> 00:28:11.630 align:start position:0% call, you know, buy a thing. Whatever endpoint<00:28:10.080> you<00:28:10.160> call,<00:28:10.720> it<00:28:10.880> always<00:28:11.160> returns<00:28:11.560> the 00:28:11.630 --> 00:28:11.640 align:start position:0% endpoint you call, it always returns the 00:28:11.640 --> 00:28:13.310 align:start position:0% endpoint you call, it always returns the same<00:28:11.960> exact<00:28:12.280> query. 00:28:13.310 --> 00:28:13.320 align:start position:0% same exact query. 00:28:13.320 --> 00:28:15.230 align:start position:0% same exact query. This<00:28:13.440> makes<00:28:13.640> things<00:28:13.840> very<00:28:14.040> simple<00:28:14.400> because 00:28:15.230 --> 00:28:15.240 align:start position:0% This makes things very simple because 00:28:15.240 --> 00:28:18.590 align:start position:0% This makes things very simple because now<00:28:15.800> your<00:28:16.520> your<00:28:17.080> AJAX<00:28:17.480> call<00:28:18.120> doesn't<00:28:18.360> have<00:28:18.480> to 00:28:18.590 --> 00:28:18.600 align:start position:0% now your your AJAX call doesn't have to 00:28:18.600 --> 00:28:20.830 align:start position:0% now your your AJAX call doesn't have to know<00:28:18.840> what<00:28:19.000> to<00:28:19.120> do<00:28:19.280> with<00:28:19.400> the<00:28:19.480> response. 00:28:20.830 --> 00:28:20.840 align:start position:0% know what to do with the response. 00:28:20.840 --> 00:28:22.510 align:start position:0% know what to do with the response. It<00:28:20.960> just<00:28:21.240> fires<00:28:21.560> and<00:28:21.680> forgets.<00:28:22.240> All<00:28:22.440> the 00:28:22.510 --> 00:28:22.520 align:start position:0% It just fires and forgets. All the 00:28:22.520 --> 00:28:25.550 align:start position:0% It just fires and forgets. All the responses<00:28:23.320> come<00:28:23.520> back<00:28:23.840> to<00:28:23.960> the<00:28:24.080> same<00:28:24.560> handler, 00:28:25.550 --> 00:28:25.560 align:start position:0% responses come back to the same handler, 00:28:25.560 --> 00:28:28.630 align:start position:0% responses come back to the same handler, which<00:28:25.760> updates<00:28:26.120> the<00:28:26.200> global<00:28:26.560> state<00:28:27.080> of<00:28:27.960> of<00:28:28.160> the 00:28:28.630 --> 00:28:28.640 align:start position:0% which updates the global state of of the 00:28:28.640 --> 00:28:29.830 align:start position:0% which updates the global state of of the um 00:28:29.830 --> 00:28:29.840 align:start position:0% um 00:28:29.840 --> 00:28:31.790 align:start position:0% um of<00:28:29.960> the<00:28:30.040> client. 00:28:31.790 --> 00:28:31.800 align:start position:0% of the client. 00:28:31.800 --> 00:28:33.230 align:start position:0% of the client. So,<00:28:31.880> the<00:28:32.000> API<00:28:32.320> endpoints<00:28:32.680> are<00:28:32.760> just<00:28:32.920> regular 00:28:33.230 --> 00:28:33.240 align:start position:0% So, the API endpoints are just regular 00:28:33.240 --> 00:28:34.230 align:start position:0% So, the API endpoints are just regular functions,<00:28:33.720> but<00:28:33.840> they<00:28:33.920> have<00:28:34.080> these 00:28:34.230 --> 00:28:34.240 align:start position:0% functions, but they have these 00:28:34.240 --> 00:28:36.390 align:start position:0% functions, but they have these annotations<00:28:35.440> on<00:28:35.640> them,<00:28:35.840> which<00:28:36.000> are<00:28:36.080> similar 00:28:36.390 --> 00:28:36.400 align:start position:0% annotations on them, which are similar 00:28:36.400 --> 00:28:38.590 align:start position:0% annotations on them, which are similar to<00:28:36.520> Clojure<00:28:36.880> pre-<00:28:37.040> and<00:28:37.120> post-conditions. 00:28:38.590 --> 00:28:38.600 align:start position:0% to Clojure pre- and post-conditions. 00:28:38.600 --> 00:28:39.990 align:start position:0% to Clojure pre- and post-conditions. Uh 00:28:39.990 --> 00:28:40.000 align:start position:0% Uh 00:28:40.000 --> 00:28:41.630 align:start position:0% Uh this<00:28:40.160> allows<00:28:40.360> you<00:28:40.440> to<00:28:40.720> to<00:28:40.840> compose<00:28:41.280> API 00:28:41.630 --> 00:28:41.640 align:start position:0% this allows you to to compose API 00:28:41.640 --> 00:28:44.350 align:start position:0% this allows you to to compose API functions<00:28:42.720> uh<00:28:42.800> without<00:28:43.080> mocking<00:28:43.400> any<00:28:43.560> state. 00:28:44.350 --> 00:28:44.360 align:start position:0% functions uh without mocking any state. 00:28:44.360 --> 00:28:46.510 align:start position:0% functions uh without mocking any state. So,<00:28:44.640> it<00:28:44.800> separates<00:28:45.160> the<00:28:45.240> authentication<00:28:46.360> from 00:28:46.510 --> 00:28:46.520 align:start position:0% So, it separates the authentication from 00:28:46.520 --> 00:28:48.230 align:start position:0% So, it separates the authentication from the<00:28:46.640> invocation.<00:28:47.480> So,<00:28:47.600> the<00:28:47.720> authentication 00:28:48.230 --> 00:28:48.240 align:start position:0% the invocation. So, the authentication 00:28:48.240 --> 00:28:49.750 align:start position:0% the invocation. So, the authentication only<00:28:48.440> happens<00:28:49.000> when<00:28:49.160> it<00:28:49.240> comes<00:28:49.480> in<00:28:49.560> on<00:28:49.640> the 00:28:49.750 --> 00:28:49.760 align:start position:0% only happens when it comes in on the 00:28:49.760 --> 00:28:51.150 align:start position:0% only happens when it comes in on the HTTP 00:28:51.150 --> 00:28:51.160 align:start position:0% HTTP 00:28:51.160 --> 00:28:53.630 align:start position:0% HTTP uh<00:28:51.440> as<00:28:51.600> an<00:28:51.680> HTTP<00:28:52.160> endpoint. 00:28:53.630 --> 00:28:53.640 align:start position:0% uh as an HTTP endpoint. 00:28:53.640 --> 00:28:55.630 align:start position:0% uh as an HTTP endpoint. Uh<00:28:54.000> and<00:28:54.160> also<00:28:54.400> exceptions<00:28:54.960> can<00:28:55.120> percolate<00:28:55.520> out 00:28:55.630 --> 00:28:55.640 align:start position:0% Uh and also exceptions can percolate out 00:28:55.640 --> 00:28:57.750 align:start position:0% Uh and also exceptions can percolate out to<00:28:55.720> the<00:28:55.800> client<00:28:56.200> and<00:28:56.280> be<00:28:56.400> caught. 00:28:57.750 --> 00:28:57.760 align:start position:0% to the client and be caught. 00:28:57.760 --> 00:29:00.230 align:start position:0% to the client and be caught. So,<00:28:57.920> this<00:28:58.000> is<00:28:58.080> an<00:28:58.160> example<00:28:58.560> of<00:28:58.640> that. 00:29:00.230 --> 00:29:00.240 align:start position:0% So, this is an example of that. 00:29:00.240 --> 00:29:01.070 align:start position:0% So, this is an example of that. It's<00:29:00.280> a<00:29:00.320> map<00:29:00.640> where<00:29:00.760> you<00:29:00.840> give<00:29:00.960> it<00:29:01.040> a 00:29:01.070 --> 00:29:01.080 align:start position:0% It's a map where you give it a 00:29:01.080 --> 00:29:02.750 align:start position:0% It's a map where you give it a precondition<00:29:01.800> and<00:29:01.920> a<00:29:01.960> query,<00:29:02.320> which<00:29:02.520> is<00:29:02.640> what 00:29:02.750 --> 00:29:02.760 align:start position:0% precondition and a query, which is what 00:29:02.760 --> 00:29:05.030 align:start position:0% precondition and a query, which is what it<00:29:02.840> returns<00:29:03.640> at<00:29:03.760> the<00:29:03.880> end. 00:29:05.030 --> 00:29:05.040 align:start position:0% it returns at the end. 00:29:05.040 --> 00:29:06.270 align:start position:0% it returns at the end. And<00:29:05.200> you<00:29:05.280> can<00:29:05.440> call<00:29:05.720> these<00:29:05.920> things<00:29:06.080> from<00:29:06.200> the 00:29:06.270 --> 00:29:06.280 align:start position:0% And you can call these things from the 00:29:06.280 --> 00:29:08.390 align:start position:0% And you can call these things from the REPL,<00:29:06.560> and<00:29:06.640> they<00:29:06.760> work<00:29:06.960> just<00:29:07.200> fine.<00:29:08.040> Uh<00:29:08.280> they 00:29:08.390 --> 00:29:08.400 align:start position:0% REPL, and they work just fine. Uh they 00:29:08.400 --> 00:29:09.430 align:start position:0% REPL, and they work just fine. Uh they work<00:29:08.560> exactly<00:29:08.920> the<00:29:08.960> same<00:29:09.160> way.<00:29:09.240> You<00:29:09.320> don't 00:29:09.430 --> 00:29:09.440 align:start position:0% work exactly the same way. You don't 00:29:09.440 --> 00:29:12.430 align:start position:0% work exactly the same way. You don't have<00:29:09.560> to<00:29:09.680> mock<00:29:09.920> any<00:29:10.040> state<00:29:10.320> at<00:29:10.440> all. 00:29:12.430 --> 00:29:12.440 align:start position:0% have to mock any state at all. 00:29:12.440 --> 00:29:14.990 align:start position:0% have to mock any state at all. This<00:29:12.560> is<00:29:12.640> a<00:29:13.000> example<00:29:13.440> application<00:29:14.600> of<00:29:14.760> what<00:29:14.920> it 00:29:14.990 --> 00:29:15.000 align:start position:0% This is a example application of what it 00:29:15.000 --> 00:29:17.470 align:start position:0% This is a example application of what it would<00:29:15.120> look<00:29:15.280> like. 00:29:17.470 --> 00:29:17.480 align:start position:0% would look like. 00:29:17.480 --> 00:29:18.750 align:start position:0% would look like. And<00:29:17.560> on<00:29:17.640> the<00:29:17.720> client<00:29:18.040> side,<00:29:18.320> you<00:29:18.440> create 00:29:18.750 --> 00:29:18.760 align:start position:0% And on the client side, you create 00:29:18.760 --> 00:29:21.070 align:start position:0% And on the client side, you create generally<00:29:19.120> three<00:29:19.680> Javelin<00:29:20.080> cells,<00:29:20.600> one<00:29:20.840> for 00:29:21.070 --> 00:29:21.080 align:start position:0% generally three Javelin cells, one for 00:29:21.080 --> 00:29:23.030 align:start position:0% generally three Javelin cells, one for the<00:29:21.800> the<00:29:21.920> state<00:29:22.400> of<00:29:22.520> your<00:29:22.640> little<00:29:22.800> state 00:29:23.030 --> 00:29:23.040 align:start position:0% the the state of your little state 00:29:23.040 --> 00:29:24.870 align:start position:0% the the state of your little state machine,<00:29:23.760> one<00:29:23.960> for<00:29:24.080> any<00:29:24.240> errors<00:29:24.600> that<00:29:24.720> come 00:29:24.870 --> 00:29:24.880 align:start position:0% machine, one for any errors that come 00:29:24.880 --> 00:29:27.710 align:start position:0% machine, one for any errors that come back,<00:29:25.120> exceptions,<00:29:26.000> and<00:29:26.240> one<00:29:26.440> for<00:29:26.800> how<00:29:26.960> many, 00:29:27.710 --> 00:29:27.720 align:start position:0% back, exceptions, and one for how many, 00:29:27.720 --> 00:29:29.950 align:start position:0% back, exceptions, and one for how many, you<00:29:27.840> know,<00:29:28.080> a<00:29:28.240> a<00:29:28.320> sequence<00:29:28.800> of<00:29:29.360> currently<00:29:29.800> in 00:29:29.950 --> 00:29:29.960 align:start position:0% you know, a a sequence of currently in 00:29:29.960 --> 00:29:32.310 align:start position:0% you know, a a sequence of currently in progress<00:29:30.600> async<00:29:30.920> calls.<00:29:31.840> Cuz<00:29:31.960> you<00:29:32.040> might<00:29:32.160> want 00:29:32.310 --> 00:29:32.320 align:start position:0% progress async calls. Cuz you might want 00:29:32.320 --> 00:29:33.990 align:start position:0% progress async calls. Cuz you might want to<00:29:32.680> know<00:29:33.000> if<00:29:33.120> something's<00:29:33.480> still<00:29:33.640> loading<00:29:33.960> or 00:29:33.990 --> 00:29:34.000 align:start position:0% to know if something's still loading or 00:29:34.000 --> 00:29:35.430 align:start position:0% to know if something's still loading or not. 00:29:35.430 --> 00:29:35.440 align:start position:0% not. 00:29:35.440 --> 00:29:37.070 align:start position:0% not. Uh<00:29:35.600> you<00:29:35.720> construct<00:29:36.080> the<00:29:36.120> remote<00:29:36.360> endpoints 00:29:37.070 --> 00:29:37.080 align:start position:0% Uh you construct the remote endpoints 00:29:37.080 --> 00:29:38.830 align:start position:0% Uh you construct the remote endpoints and<00:29:37.280> call<00:29:37.480> them<00:29:37.600> like<00:29:37.760> functions.<00:29:38.680> So, 00:29:38.830 --> 00:29:38.840 align:start position:0% and call them like functions. So, 00:29:38.840 --> 00:29:40.070 align:start position:0% and call them like functions. So, basically,<00:29:39.160> there's<00:29:39.360> this<00:29:39.560> make<00:29:39.800> remote 00:29:40.070 --> 00:29:40.080 align:start position:0% basically, there's this make remote 00:29:40.080 --> 00:29:41.470 align:start position:0% basically, there's this make remote function<00:29:40.440> that<00:29:40.560> allows<00:29:40.880> you<00:29:41.000> to<00:29:41.120> construct 00:29:41.470 --> 00:29:41.480 align:start position:0% function that allows you to construct 00:29:41.480 --> 00:29:43.270 align:start position:0% function that allows you to construct the<00:29:41.600> endpoint<00:29:42.680> and<00:29:42.760> hook<00:29:42.920> it<00:29:43.000> up<00:29:43.120> to<00:29:43.200> the 00:29:43.270 --> 00:29:43.280 align:start position:0% the endpoint and hook it up to the 00:29:43.280 --> 00:29:44.510 align:start position:0% the endpoint and hook it up to the cells. 00:29:44.510 --> 00:29:44.520 align:start position:0% cells. 00:29:44.520 --> 00:29:46.550 align:start position:0% cells. Then,<00:29:44.840> you<00:29:44.960> just<00:29:45.160> call<00:29:45.480> it 00:29:46.550 --> 00:29:46.560 align:start position:0% Then, you just call it 00:29:46.560 --> 00:29:47.630 align:start position:0% Then, you just call it like<00:29:46.720> over<00:29:46.880> here,<00:29:47.080> you<00:29:47.200> call<00:29:47.360> it<00:29:47.440> like<00:29:47.560> a 00:29:47.630 --> 00:29:47.640 align:start position:0% like over here, you call it like a 00:29:47.640 --> 00:29:48.990 align:start position:0% like over here, you call it like a function.<00:29:48.400> And<00:29:48.480> you<00:29:48.520> don't<00:29:48.640> have<00:29:48.760> to<00:29:48.840> worry 00:29:48.990 --> 00:29:49.000 align:start position:0% function. And you don't have to worry 00:29:49.000 --> 00:29:50.790 align:start position:0% function. And you don't have to worry about<00:29:49.240> what<00:29:49.360> it<00:29:49.440> returns.<00:29:49.880> You<00:29:49.920> don't<00:29:50.040> have<00:29:50.160> to 00:29:50.790 --> 00:29:50.800 align:start position:0% about what it returns. You don't have to 00:29:50.800 --> 00:29:52.070 align:start position:0% about what it returns. You don't have to This<00:29:51.040> part<00:29:51.360> right<00:29:51.520> here<00:29:51.640> doesn't<00:29:51.880> have<00:29:52.000> to 00:29:52.070 --> 00:29:52.080 align:start position:0% This part right here doesn't have to 00:29:52.080 --> 00:29:54.030 align:start position:0% This part right here doesn't have to know<00:29:52.480> how<00:29:52.760> the<00:29:52.880> rest<00:29:53.120> of<00:29:53.200> the<00:29:53.440> application<00:29:53.920> is 00:29:54.030 --> 00:29:54.040 align:start position:0% know how the rest of the application is 00:29:54.040 --> 00:29:55.790 align:start position:0% know how the rest of the application is affected.<00:29:54.760> That<00:29:54.920> percolates<00:29:55.440> up<00:29:55.640> through 00:29:55.790 --> 00:29:55.800 align:start position:0% affected. That percolates up through 00:29:55.800 --> 00:30:00.790 align:start position:0% affected. That percolates up through formula<00:29:56.200> cells<00:29:56.520> automatically. 00:30:00.790 --> 00:30:00.800 align:start position:0% 00:30:00.800 --> 00:30:02.310 align:start position:0% Here's<00:30:01.040> a<00:30:01.400> a<00:30:01.440> picture<00:30:01.840> of<00:30:02.040> of<00:30:02.160> the 00:30:02.310 --> 00:30:02.320 align:start position:0% Here's a a picture of of the 00:30:02.320 --> 00:30:07.310 align:start position:0% Here's a a picture of of the architecture<00:30:02.880> of<00:30:03.240> what<00:30:03.400> I<00:30:03.440> just<00:30:03.720> described. 00:30:07.310 --> 00:30:07.320 align:start position:0% 00:30:07.320 --> 00:30:09.310 align:start position:0% Does<00:30:07.400> anyone<00:30:07.720> have<00:30:07.920> questions? 00:30:09.310 --> 00:30:09.320 align:start position:0% Does anyone have questions? 00:30:09.320 --> 00:30:10.550 align:start position:0% Does anyone have questions? Thumbs<00:30:09.560> up,<00:30:09.680> thumbs<00:30:09.880> down.<00:30:10.320> I<00:30:10.360> don't<00:30:10.480> know. 00:30:10.550 --> 00:30:10.560 align:start position:0% Thumbs up, thumbs down. I don't know. 00:30:10.560 --> 00:30:12.390 align:start position:0% Thumbs up, thumbs down. I don't know. How<00:30:10.640> do<00:30:10.720> we<00:30:10.800> feel?<00:30:11.600> Yes. 00:30:12.390 --> 00:30:12.400 align:start position:0% How do we feel? Yes. 00:30:12.400 --> 00:30:16.790 align:start position:0% How do we feel? Yes. Is<00:30:12.520> Castra<00:30:12.840> a<00:30:12.880> little<00:30:13.040> bit<00:30:13.160> like<00:30:13.280> Short<00:30:13.600> Leaf? 00:30:16.790 --> 00:30:16.800 align:start position:0% 00:30:16.800 --> 00:30:17.630 align:start position:0% Can<00:30:16.880> you<00:30:16.920> say<00:30:17.040> that<00:30:17.120> again? 00:30:17.630 --> 00:30:17.640 align:start position:0% Can you say that again? 00:30:17.640 --> 00:30:20.270 align:start position:0% Can you say that again? Is<00:30:17.800> Castra<00:30:18.120> a<00:30:18.160> little<00:30:18.320> bit<00:30:18.440> like<00:30:18.560> Short<00:30:18.920> Leaf? 00:30:20.270 --> 00:30:20.280 align:start position:0% Is Castra a little bit like Short Leaf? 00:30:20.280 --> 00:30:21.750 align:start position:0% Is Castra a little bit like Short Leaf? The<00:30:20.360> question<00:30:20.720> is,<00:30:20.880> is<00:30:21.000> Castra<00:30:21.360> like<00:30:21.520> Short 00:30:21.750 --> 00:30:21.760 align:start position:0% The question is, is Castra like Short 00:30:21.760 --> 00:30:23.710 align:start position:0% The question is, is Castra like Short Leaf? 00:30:23.710 --> 00:30:23.720 align:start position:0% Leaf? 00:30:23.720 --> 00:30:26.710 align:start position:0% Leaf? Well,<00:30:23.800> it's<00:30:23.920> an<00:30:24.000> RPC<00:30:24.920> framework,<00:30:25.560> but 00:30:26.710 --> 00:30:26.720 align:start position:0% Well, it's an RPC framework, but 00:30:26.720 --> 00:30:27.830 align:start position:0% Well, it's an RPC framework, but um 00:30:27.830 --> 00:30:27.840 align:start position:0% um 00:30:27.840 --> 00:30:30.350 align:start position:0% um the<00:30:28.200> um<00:30:29.000> the<00:30:29.160> annotations<00:30:29.720> that<00:30:29.840> we<00:30:29.920> do<00:30:30.200> to 00:30:30.350 --> 00:30:30.360 align:start position:0% the um the annotations that we do to 00:30:30.360 --> 00:30:32.110 align:start position:0% the um the annotations that we do to separate<00:30:31.280> all<00:30:31.440> the<00:30:31.520> things<00:30:31.760> that<00:30:31.880> have<00:30:31.960> to<00:30:32.040> do 00:30:32.110 --> 00:30:32.120 align:start position:0% separate all the things that have to do 00:30:32.120 --> 00:30:33.870 align:start position:0% separate all the things that have to do with<00:30:32.200> the<00:30:32.280> session,<00:30:32.720> basically, 00:30:33.870 --> 00:30:33.880 align:start position:0% with the session, basically, 00:30:33.880 --> 00:30:36.510 align:start position:0% with the session, basically, into<00:30:34.320> a<00:30:34.400> separate<00:30:34.720> layer<00:30:35.280> that 00:30:36.510 --> 00:30:36.520 align:start position:0% into a separate layer that 00:30:36.520 --> 00:30:38.830 align:start position:0% into a separate layer that I<00:30:36.640> think<00:30:37.240> that's<00:30:37.440> a<00:30:37.480> little<00:30:37.680> bit<00:30:37.840> different. 00:30:38.830 --> 00:30:38.840 align:start position:0% I think that's a little bit different. 00:30:38.840 --> 00:30:40.550 align:start position:0% I think that's a little bit different. Um<00:30:39.160> so,<00:30:39.400> like<00:30:39.600> when<00:30:39.720> you're<00:30:39.800> at<00:30:39.880> the<00:30:39.960> REPL, 00:30:40.550 --> 00:30:40.560 align:start position:0% Um so, like when you're at the REPL, 00:30:40.560 --> 00:30:42.030 align:start position:0% Um so, like when you're at the REPL, there's<00:30:40.760> no<00:30:40.920> session<00:30:41.320> that<00:30:41.440> you<00:30:41.520> worry<00:30:41.760> about. 00:30:42.030 --> 00:30:42.040 align:start position:0% there's no session that you worry about. 00:30:42.040 --> 00:30:43.790 align:start position:0% there's no session that you worry about. You<00:30:42.120> don't<00:30:42.240> have<00:30:42.360> to<00:30:42.480> mock<00:30:42.720> anything.<00:30:43.680> And 00:30:43.790 --> 00:30:43.800 align:start position:0% You don't have to mock anything. And 00:30:43.800 --> 00:30:45.230 align:start position:0% You don't have to mock anything. And everything<00:30:44.120> runs<00:30:44.600> the<00:30:44.720> same.<00:30:44.960> So,<00:30:45.040> you<00:30:45.120> can 00:30:45.230 --> 00:30:45.240 align:start position:0% everything runs the same. So, you can 00:30:45.240 --> 00:30:47.430 align:start position:0% everything runs the same. So, you can test<00:30:45.520> things.<00:30:45.840> You<00:30:45.920> can<00:30:46.520> You<00:30:46.640> can<00:30:47.040> work<00:30:47.280> the 00:30:47.430 --> 00:30:47.440 align:start position:0% test things. You can You can work the 00:30:47.440 --> 00:30:49.390 align:start position:0% test things. You can You can work the app<00:30:47.760> from<00:30:47.920> the<00:30:48.000> REPL,<00:30:48.880> which<00:30:48.920> I<00:30:48.960> do<00:30:49.080> a<00:30:49.160> lot<00:30:49.320> when 00:30:49.390 --> 00:30:49.400 align:start position:0% app from the REPL, which I do a lot when 00:30:49.400 --> 00:30:51.510 align:start position:0% app from the REPL, which I do a lot when I'm<00:30:49.480> developing. 00:30:51.510 --> 00:30:51.520 align:start position:0% I'm developing. 00:30:51.520 --> 00:30:53.230 align:start position:0% I'm developing. Funny<00:30:51.800> side<00:30:52.040> note,<00:30:52.520> the<00:30:52.600> original<00:30:52.920> version<00:30:53.160> of 00:30:53.230 --> 00:30:53.240 align:start position:0% Funny side note, the original version of 00:30:53.240 --> 00:30:55.790 align:start position:0% Funny side note, the original version of Castra<00:30:53.560> was<00:30:53.760> written<00:30:53.960> in<00:30:54.080> PHP.<00:30:54.840> Is<00:30:54.880> that<00:30:55.360> true? 00:30:55.790 --> 00:30:55.800 align:start position:0% Castra was written in PHP. Is that true? 00:30:55.800 --> 00:30:57.190 align:start position:0% Castra was written in PHP. Is that true? Oh,<00:30:55.880> we<00:30:55.960> won't<00:30:56.120> talk<00:30:56.240> about<00:30:56.400> that.<00:30:56.560> Sorry.<00:30:57.080> No, 00:30:57.190 --> 00:30:57.200 align:start position:0% Oh, we won't talk about that. Sorry. No, 00:30:57.200 --> 00:30:59.390 align:start position:0% Oh, we won't talk about that. Sorry. No, other<00:30:57.480> other<00:30:57.640> questions?<00:30:58.600> Yes. 00:30:59.390 --> 00:30:59.400 align:start position:0% other other questions? Yes. 00:30:59.400 --> 00:31:00.670 align:start position:0% other other questions? Yes. Uh<00:30:59.680> you<00:30:59.800> seem<00:31:00.000> to<00:31:00.080> have<00:31:00.200> gone<00:31:00.320> over<00:31:00.400> like<00:31:00.560> the 00:31:00.670 --> 00:31:00.680 align:start position:0% Uh you seem to have gone over like the 00:31:00.680 --> 00:31:02.030 align:start position:0% Uh you seem to have gone over like the example<00:31:01.160> code. 00:31:02.030 --> 00:31:02.040 align:start position:0% example code. 00:31:02.040 --> 00:31:06.070 align:start position:0% example code. Can<00:31:02.120> you<00:31:02.200> go<00:31:02.240> back<00:31:02.480> to<00:31:02.560> that? 00:31:06.070 --> 00:31:06.080 align:start position:0% 00:31:06.080 --> 00:31:07.390 align:start position:0% Sure.<00:31:06.360> This<00:31:06.560> one? 00:31:07.390 --> 00:31:07.400 align:start position:0% Sure. This one? 00:31:07.400 --> 00:31:08.790 align:start position:0% Sure. This one? No,<00:31:07.680> this 00:31:08.790 --> 00:31:08.800 align:start position:0% No, this 00:31:08.800 --> 00:31:09.230 align:start position:0% No, this This<00:31:08.920> one? 00:31:09.230 --> 00:31:09.240 align:start position:0% This one? 00:31:09.240 --> 00:31:10.350 align:start position:0% This one? Yeah. 00:31:10.350 --> 00:31:10.360 align:start position:0% Yeah. 00:31:10.360 --> 00:31:11.950 align:start position:0% Yeah. Okay.<00:31:10.600> I'm<00:31:10.720> sorry<00:31:10.920> we<00:31:11.000> don't<00:31:11.160> have<00:31:11.640> Let<00:31:11.720> me<00:31:11.800> try 00:31:11.950 --> 00:31:11.960 align:start position:0% Okay. I'm sorry we don't have Let me try 00:31:11.960 --> 00:31:14.110 align:start position:0% Okay. I'm sorry we don't have Let me try and 00:31:14.110 --> 00:31:14.120 align:start position:0% and 00:31:14.120 --> 00:31:16.630 align:start position:0% and There<00:31:14.280> we<00:31:14.440> go.<00:31:15.160> All<00:31:15.200> right. 00:31:16.630 --> 00:31:16.640 align:start position:0% There we go. All right. 00:31:16.640 --> 00:31:18.630 align:start position:0% There we go. All right. So,<00:31:16.840> Castra<00:31:17.240> define<00:31:17.680> uh 00:31:18.630 --> 00:31:18.640 align:start position:0% So, Castra define uh 00:31:18.640 --> 00:31:20.550 align:start position:0% So, Castra define uh exports<00:31:19.120> this<00:31:19.440> uh<00:31:19.560> defn<00:31:19.920> macro,<00:31:20.280> which<00:31:20.440> is 00:31:20.550 --> 00:31:20.560 align:start position:0% exports this uh defn macro, which is 00:31:20.560 --> 00:31:22.150 align:start position:0% exports this uh defn macro, which is really<00:31:20.760> the<00:31:20.880> same<00:31:21.080> as<00:31:21.200> defn,<00:31:21.640> but<00:31:21.800> it<00:31:21.880> just 00:31:22.150 --> 00:31:22.160 align:start position:0% really the same as defn, but it just 00:31:22.160 --> 00:31:24.310 align:start position:0% really the same as defn, but it just implements<00:31:22.680> these<00:31:23.560> uh<00:31:23.960> you<00:31:24.040> know,<00:31:24.120> these 00:31:24.310 --> 00:31:24.320 align:start position:0% implements these uh you know, these 00:31:24.320 --> 00:31:25.950 align:start position:0% implements these uh you know, these annotations<00:31:24.920> here. 00:31:25.950 --> 00:31:25.960 align:start position:0% annotations here. 00:31:25.960 --> 00:31:28.150 align:start position:0% annotations here. And<00:31:26.440> the<00:31:26.520> precondition,<00:31:27.160> generally<00:31:27.920> the<00:31:28.000> way 00:31:28.150 --> 00:31:28.160 align:start position:0% And the precondition, generally the way 00:31:28.160 --> 00:31:29.910 align:start position:0% And the precondition, generally the way we<00:31:28.320> do<00:31:28.480> it<00:31:28.680> is<00:31:29.040> we<00:31:29.160> set<00:31:29.360> up<00:31:29.520> a<00:31:29.600> separate 00:31:29.910 --> 00:31:29.920 align:start position:0% we do it is we set up a separate 00:31:29.920 --> 00:31:32.590 align:start position:0% we do it is we set up a separate namespace<00:31:30.520> for<00:31:31.080> HTTP<00:31:31.600> rules,<00:31:32.400> and<00:31:32.480> it's 00:31:32.590 --> 00:31:32.600 align:start position:0% namespace for HTTP rules, and it's 00:31:32.600 --> 00:31:34.790 align:start position:0% namespace for HTTP rules, and it's basically<00:31:33.080> like<00:31:33.280> Turing<00:31:33.600> complete,<00:31:34.720> you 00:31:34.790 --> 00:31:34.800 align:start position:0% basically like Turing complete, you 00:31:34.800 --> 00:31:36.510 align:start position:0% basically like Turing complete, you know,<00:31:34.960> authentication.<00:31:35.920> You<00:31:36.000> just<00:31:36.160> call<00:31:36.360> this 00:31:36.510 --> 00:31:36.520 align:start position:0% know, authentication. You just call this 00:31:36.520 --> 00:31:37.670 align:start position:0% know, authentication. You just call this thing<00:31:36.720> just<00:31:36.840> like<00:31:36.960> a<00:31:37.000> precondition,<00:31:37.520> and<00:31:37.640> you 00:31:37.670 --> 00:31:37.680 align:start position:0% thing just like a precondition, and you 00:31:37.680 --> 00:31:39.510 align:start position:0% thing just like a precondition, and you can<00:31:37.800> throw<00:31:37.960> an<00:31:38.040> exception<00:31:38.840> from<00:31:39.000> those<00:31:39.200> rules, 00:31:39.510 --> 00:31:39.520 align:start position:0% can throw an exception from those rules, 00:31:39.520 --> 00:31:41.350 align:start position:0% can throw an exception from those rules, which<00:31:39.640> will<00:31:39.760> be<00:31:39.840> caught<00:31:40.040> in<00:31:40.120> the<00:31:40.200> client. 00:31:41.350 --> 00:31:41.360 align:start position:0% which will be caught in the client. 00:31:41.360 --> 00:31:44.390 align:start position:0% which will be caught in the client. But,<00:31:42.240> that<00:31:42.400> only<00:31:42.600> happens<00:31:43.320> at<00:31:43.520> the<00:31:43.760> acts<00:31:44.240> at 00:31:44.390 --> 00:31:44.400 align:start position:0% But, that only happens at the acts at 00:31:44.400 --> 00:31:46.470 align:start position:0% But, that only happens at the acts at the<00:31:44.560> actual<00:31:45.040> endpoint.<00:31:45.480> In<00:31:45.560> other<00:31:45.720> words,<00:31:46.280> if 00:31:46.470 --> 00:31:46.480 align:start position:0% the actual endpoint. In other words, if 00:31:46.480 --> 00:31:48.390 align:start position:0% the actual endpoint. In other words, if I<00:31:46.600> call<00:31:46.960> the<00:31:47.200> the<00:31:47.320> login<00:31:47.760> function<00:31:48.160> from<00:31:48.280> the 00:31:48.390 --> 00:31:48.400 align:start position:0% I call the the login function from the 00:31:48.400 --> 00:31:49.910 align:start position:0% I call the the login function from the client, 00:31:49.910 --> 00:31:49.920 align:start position:0% client, 00:31:49.920 --> 00:31:52.630 align:start position:0% client, it<00:31:50.040> will<00:31:50.240> run<00:31:50.640> this<00:31:50.840> precondition. 00:31:52.630 --> 00:31:52.640 align:start position:0% it will run this precondition. 00:31:52.640 --> 00:31:55.030 align:start position:0% it will run this precondition. But,<00:31:53.000> if<00:31:53.240> login<00:31:53.640> itself<00:31:54.040> calls<00:31:54.360> another<00:31:54.680> API 00:31:55.030 --> 00:31:55.040 align:start position:0% But, if login itself calls another API 00:31:55.040 --> 00:31:56.470 align:start position:0% But, if login itself calls another API function 00:31:56.470 --> 00:31:56.480 align:start position:0% function 00:31:56.480 --> 00:31:57.990 align:start position:0% function internally,<00:31:56.960> like<00:31:57.120> sometimes<00:31:57.480> when<00:31:57.760> when<00:31:57.880> you 00:31:57.990 --> 00:31:58.000 align:start position:0% internally, like sometimes when when you 00:31:58.000 --> 00:31:59.790 align:start position:0% internally, like sometimes when when you register<00:31:58.400> someone,<00:31:59.080> you<00:31:59.200> want<00:31:59.320> to<00:31:59.400> log<00:31:59.640> them 00:31:59.790 --> 00:31:59.800 align:start position:0% register someone, you want to log them 00:31:59.800 --> 00:32:01.230 align:start position:0% register someone, you want to log them in<00:31:59.920> then,<00:32:00.080> right?<00:32:00.680> So,<00:32:00.760> it'd<00:32:00.840> be<00:32:00.920> nice<00:32:01.120> to<00:32:01.200> be 00:32:01.230 --> 00:32:01.240 align:start position:0% in then, right? So, it'd be nice to be 00:32:01.240 --> 00:32:03.270 align:start position:0% in then, right? So, it'd be nice to be able<00:32:01.400> to<00:32:01.480> just<00:32:01.600> call<00:32:01.800> that<00:32:01.920> API<00:32:02.240> function,<00:32:03.160> so 00:32:03.270 --> 00:32:03.280 align:start position:0% able to just call that API function, so 00:32:03.280 --> 00:32:04.270 align:start position:0% able to just call that API function, so it<00:32:03.360> doesn't<00:32:03.640> trigger<00:32:03.920> any<00:32:04.120> of<00:32:04.200> the 00:32:04.270 --> 00:32:04.280 align:start position:0% it doesn't trigger any of the 00:32:04.280 --> 00:32:06.390 align:start position:0% it doesn't trigger any of the authentication<00:32:04.880> stuff<00:32:05.120> there. 00:32:06.390 --> 00:32:06.400 align:start position:0% authentication stuff there. 00:32:06.400 --> 00:32:09.630 align:start position:0% authentication stuff there. You<00:32:06.480> know,<00:32:06.600> it<00:32:06.680> just<00:32:06.840> calls<00:32:07.080> right<00:32:07.280> through. 00:32:09.630 --> 00:32:09.640 align:start position:0% You know, it just calls right through. 00:32:09.640 --> 00:32:12.270 align:start position:0% You know, it just calls right through. And<00:32:10.120> uh<00:32:10.200> so,<00:32:10.360> the<00:32:10.480> query<00:32:11.520> uh<00:32:11.720> the<00:32:11.840> query 00:32:12.270 --> 00:32:12.280 align:start position:0% And uh so, the query uh the query 00:32:12.280 --> 00:32:14.270 align:start position:0% And uh so, the query uh the query annotation<00:32:12.800> here<00:32:13.440> is<00:32:13.760> so<00:32:13.880> that<00:32:14.040> you<00:32:14.120> could 00:32:14.270 --> 00:32:14.280 align:start position:0% annotation here is so that you could 00:32:14.280 --> 00:32:18.150 align:start position:0% annotation here is so that you could return<00:32:14.840> that<00:32:15.120> CQRS<00:32:16.560> state<00:32:16.920> query. 00:32:18.150 --> 00:32:18.160 align:start position:0% return that CQRS state query. 00:32:18.160 --> 00:32:20.270 align:start position:0% return that CQRS state query. And<00:32:18.520> this<00:32:18.680> allows<00:32:19.040> you<00:32:19.120> at<00:32:19.200> the<00:32:19.320> REPL<00:32:19.920> uh<00:32:20.080> this 00:32:20.270 --> 00:32:20.280 align:start position:0% And this allows you at the REPL uh this 00:32:20.280 --> 00:32:21.750 align:start position:0% And this allows you at the REPL uh this function<00:32:20.600> could<00:32:20.720> actually<00:32:21.000> return<00:32:21.400> one<00:32:21.560> thing 00:32:21.750 --> 00:32:21.760 align:start position:0% function could actually return one thing 00:32:21.760 --> 00:32:23.550 align:start position:0% function could actually return one thing at<00:32:21.880> the<00:32:21.960> REPL,<00:32:22.680> which<00:32:22.840> might<00:32:22.960> be<00:32:23.080> useful<00:32:23.400> for 00:32:23.550 --> 00:32:23.560 align:start position:0% at the REPL, which might be useful for 00:32:23.560 --> 00:32:25.590 align:start position:0% at the REPL, which might be useful for you<00:32:23.680> when<00:32:23.800> you're<00:32:23.960> coding<00:32:24.320> it,<00:32:24.880> but<00:32:25.360> when<00:32:25.480> an 00:32:25.590 --> 00:32:25.600 align:start position:0% you when you're coding it, but when an 00:32:25.600 --> 00:32:27.630 align:start position:0% you when you're coding it, but when an HTTP<00:32:26.040> client<00:32:26.360> connects,<00:32:26.760> they<00:32:26.880> get<00:32:27.120> back<00:32:27.400> this 00:32:27.630 --> 00:32:27.640 align:start position:0% HTTP client connects, they get back this 00:32:27.640 --> 00:32:31.590 align:start position:0% HTTP client connects, they get back this state,<00:32:28.680> you<00:32:28.800> know,<00:32:28.920> this<00:32:29.120> state<00:32:29.400> map. 00:32:31.590 --> 00:32:31.600 align:start position:0% state, you know, this state map. 00:32:31.600 --> 00:32:32.190 align:start position:0% state, you know, this state map. Yes. 00:32:32.190 --> 00:32:32.200 align:start position:0% Yes. 00:32:32.200 --> 00:32:34.630 align:start position:0% Yes. What's<00:32:32.600> the<00:32:32.880> CQRS? 00:32:34.630 --> 00:32:34.640 align:start position:0% What's the CQRS? 00:32:34.640 --> 00:32:36.270 align:start position:0% What's the CQRS? Question<00:32:34.880> was,<00:32:35.040> what<00:32:35.160> is<00:32:35.240> CQRS?<00:32:36.000> I<00:32:36.040> can<00:32:36.160> take 00:32:36.270 --> 00:32:36.280 align:start position:0% Question was, what is CQRS? I can take 00:32:36.280 --> 00:32:36.670 align:start position:0% Question was, what is CQRS? I can take that<00:32:36.400> one. 00:32:36.670 --> 00:32:36.680 align:start position:0% that one. 00:32:36.680 --> 00:32:37.270 align:start position:0% that one. Yeah,<00:32:36.880> please. 00:32:37.270 --> 00:32:37.280 align:start position:0% Yeah, please. 00:32:37.280 --> 00:32:39.750 align:start position:0% Yeah, please. Yeah,<00:32:37.440> so<00:32:37.840> um<00:32:38.480> all<00:32:38.720> of<00:32:38.800> this<00:32:39.040> is<00:32:39.160> to<00:32:39.280> serve<00:32:39.560> one 00:32:39.750 --> 00:32:39.760 align:start position:0% Yeah, so um all of this is to serve one 00:32:39.760 --> 00:32:41.470 align:start position:0% Yeah, so um all of this is to serve one end,<00:32:39.960> which<00:32:40.120> is<00:32:40.240> basically<00:32:40.800> to<00:32:40.960> be<00:32:41.080> able<00:32:41.360> to 00:32:41.470 --> 00:32:41.480 align:start position:0% end, which is basically to be able to 00:32:41.480 --> 00:32:43.550 align:start position:0% end, which is basically to be able to conceive<00:32:42.120> of<00:32:42.280> when<00:32:42.400> we're<00:32:42.520> programming<00:32:43.440> the 00:32:43.550 --> 00:32:43.560 align:start position:0% conceive of when we're programming the 00:32:43.560 --> 00:32:45.950 align:start position:0% conceive of when we're programming the server<00:32:44.080> as<00:32:44.400> part<00:32:44.560> of<00:32:44.680> our<00:32:44.760> spreadsheet.<00:32:45.880> So, 00:32:45.950 --> 00:32:45.960 align:start position:0% server as part of our spreadsheet. So, 00:32:45.960 --> 00:32:47.590 align:start position:0% server as part of our spreadsheet. So, the<00:32:46.040> same<00:32:46.280> way<00:32:46.640> um<00:32:46.880> someone<00:32:47.120> who's<00:32:47.240> interested 00:32:47.590 --> 00:32:47.600 align:start position:0% the same way um someone who's interested 00:32:47.600 --> 00:32:49.030 align:start position:0% the same way um someone who's interested in<00:32:47.680> making<00:32:48.000> charts<00:32:48.400> over<00:32:48.560> an<00:32:48.640> existing 00:32:49.030 --> 00:32:49.040 align:start position:0% in making charts over an existing 00:32:49.040 --> 00:32:51.150 align:start position:0% in making charts over an existing spreadsheet<00:32:49.880> can<00:32:50.000> just<00:32:50.440> use<00:32:50.720> the<00:32:50.800> existing 00:32:51.150 --> 00:32:51.160 align:start position:0% spreadsheet can just use the existing 00:32:51.160 --> 00:32:53.470 align:start position:0% spreadsheet can just use the existing formulas<00:32:51.880> without<00:32:52.480> necessarily 00:32:53.470 --> 00:32:53.480 align:start position:0% formulas without necessarily 00:32:53.480 --> 00:32:54.590 align:start position:0% formulas without necessarily manipulating<00:32:54.040> any<00:32:54.160> of<00:32:54.240> the<00:32:54.320> data<00:32:54.520> or 00:32:54.590 --> 00:32:54.600 align:start position:0% manipulating any of the data or 00:32:54.600 --> 00:32:55.710 align:start position:0% manipulating any of the data or formulas. 00:32:55.710 --> 00:32:55.720 align:start position:0% formulas. 00:32:55.720 --> 00:32:56.870 align:start position:0% formulas. We<00:32:55.800> want<00:32:55.920> to<00:32:56.000> look<00:32:56.120> at<00:32:56.200> the<00:32:56.240> server<00:32:56.520> the<00:32:56.640> same 00:32:56.870 --> 00:32:56.880 align:start position:0% We want to look at the server the same 00:32:56.880 --> 00:32:59.270 align:start position:0% We want to look at the server the same way.<00:32:57.280> So,<00:32:57.440> in<00:32:57.520> our<00:32:57.640> case<00:32:57.920> here,<00:32:58.640> the<00:32:58.760> server<00:32:59.120> is 00:32:59.270 --> 00:32:59.280 align:start position:0% way. So, in our case here, the server is 00:32:59.280 --> 00:33:00.790 align:start position:0% way. So, in our case here, the server is the<00:32:59.440> source<00:32:59.760> of<00:32:59.880> a<00:32:59.920> value,<00:33:00.480> which<00:33:00.640> is<00:33:00.720> the 00:33:00.790 --> 00:33:00.800 align:start position:0% the source of a value, which is the 00:33:00.800 --> 00:33:02.710 align:start position:0% the source of a value, which is the current<00:33:01.080> user's<00:33:01.440> state. 00:33:02.710 --> 00:33:02.720 align:start position:0% current user's state. 00:33:02.720 --> 00:33:04.670 align:start position:0% current user's state. Um<00:33:03.320> we<00:33:03.440> would<00:33:03.600> like<00:33:03.760> to<00:33:03.880> be<00:33:03.960> able<00:33:04.200> to<00:33:04.320> take<00:33:04.520> that 00:33:04.670 --> 00:33:04.680 align:start position:0% Um we would like to be able to take that 00:33:04.680 --> 00:33:06.990 align:start position:0% Um we would like to be able to take that value<00:33:05.040> and<00:33:05.200> aim<00:33:05.400> it<00:33:05.600> at<00:33:05.840> UI<00:33:06.120> elements,<00:33:06.760> like 00:33:06.990 --> 00:33:07.000 align:start position:0% value and aim it at UI elements, like 00:33:07.000 --> 00:33:08.150 align:start position:0% value and aim it at UI elements, like this<00:33:07.200> little<00:33:07.360> box<00:33:07.640> here<00:33:07.800> should<00:33:07.960> be<00:33:08.040> the 00:33:08.150 --> 00:33:08.160 align:start position:0% this little box here should be the 00:33:08.160 --> 00:33:09.390 align:start position:0% this little box here should be the person's<00:33:08.480> name<00:33:08.800> and<00:33:08.880> this<00:33:09.000> should<00:33:09.120> be<00:33:09.280> the 00:33:09.390 --> 00:33:09.400 align:start position:0% person's name and this should be the 00:33:09.400 --> 00:33:11.230 align:start position:0% person's name and this should be the number<00:33:09.640> of<00:33:09.720> buddies<00:33:10.040> or<00:33:10.080> whatever. 00:33:11.230 --> 00:33:11.240 align:start position:0% number of buddies or whatever. 00:33:11.240 --> 00:33:12.710 align:start position:0% number of buddies or whatever. Um<00:33:11.440> we<00:33:11.560> want<00:33:11.720> to<00:33:11.760> con-<00:33:12.000> consider<00:33:12.320> the<00:33:12.400> server 00:33:12.710 --> 00:33:12.720 align:start position:0% Um we want to con- consider the server 00:33:12.720 --> 00:33:15.430 align:start position:0% Um we want to con- consider the server as<00:33:13.040> like<00:33:13.200> kind<00:33:13.360> of<00:33:13.440> a<00:33:13.480> remote<00:33:14.200> cell. 00:33:15.430 --> 00:33:15.440 align:start position:0% as like kind of a remote cell. 00:33:15.440 --> 00:33:18.310 align:start position:0% as like kind of a remote cell. CQRS<00:33:16.440> uh<00:33:16.600> stands<00:33:16.920> for<00:33:17.160> command<00:33:17.680> query 00:33:18.310 --> 00:33:18.320 align:start position:0% CQRS uh stands for command query 00:33:18.320 --> 00:33:20.950 align:start position:0% CQRS uh stands for command query response<00:33:19.360> separation. 00:33:20.950 --> 00:33:20.960 align:start position:0% response separation. 00:33:20.960 --> 00:33:22.510 align:start position:0% response separation. Is<00:33:21.000> that<00:33:21.400> ish? 00:33:22.510 --> 00:33:22.520 align:start position:0% Is that ish? 00:33:22.520 --> 00:33:25.070 align:start position:0% Is that ish? Martin<00:33:22.800> Fowler.<00:33:23.360> Martin<00:33:23.600> Fowler<00:33:23.880> has<00:33:24.000> a<00:33:24.080> good 00:33:25.070 --> 00:33:25.080 align:start position:0% Martin Fowler. Martin Fowler has a good 00:33:25.080 --> 00:33:25.510 align:start position:0% Martin Fowler. Martin Fowler has a good Well, 00:33:25.510 --> 00:33:25.520 align:start position:0% Well, 00:33:25.520 --> 00:33:28.030 align:start position:0% Well, Yeah,<00:33:25.640> Martin<00:33:25.840> Fowler<00:33:26.040> has<00:33:26.160> the<00:33:26.240> write-up.<00:33:26.800> Uh 00:33:28.030 --> 00:33:28.040 align:start position:0% Yeah, Martin Fowler has the write-up. Uh 00:33:28.040 --> 00:33:29.590 align:start position:0% Yeah, Martin Fowler has the write-up. Uh Anyway,<00:33:28.200> if<00:33:28.280> you<00:33:28.360> type<00:33:28.600> in<00:33:28.720> CQRS<00:33:29.360> Martin 00:33:29.590 --> 00:33:29.600 align:start position:0% Anyway, if you type in CQRS Martin 00:33:29.600 --> 00:33:31.510 align:start position:0% Anyway, if you type in CQRS Martin Fowler,<00:33:29.880> you'll<00:33:30.080> you'll<00:33:30.240> get<00:33:30.400> to<00:33:30.480> the<00:33:31.320> one<00:33:31.440> of 00:33:31.510 --> 00:33:31.520 align:start position:0% Fowler, you'll you'll get to the one of 00:33:31.520 --> 00:33:33.030 align:start position:0% Fowler, you'll you'll get to the one of the<00:33:31.760> the<00:33:31.880> source<00:33:32.120> documents.<00:33:32.920> But, 00:33:33.030 --> 00:33:33.040 align:start position:0% the the source documents. But, 00:33:33.040 --> 00:33:34.790 align:start position:0% the the source documents. But, basically,<00:33:33.480> it's<00:33:33.680> a<00:33:33.800> it's<00:33:33.960> a<00:33:34.000> fancy<00:33:34.360> term<00:33:34.680> for 00:33:34.790 --> 00:33:34.800 align:start position:0% basically, it's a it's a fancy term for 00:33:34.800 --> 00:33:37.190 align:start position:0% basically, it's a it's a fancy term for the<00:33:34.920> same<00:33:35.320> kind<00:33:35.600> of<00:33:35.720> pattern.<00:33:36.680> Where<00:33:36.960> I<00:33:37.000> have<00:33:37.120> a 00:33:37.190 --> 00:33:37.200 align:start position:0% the same kind of pattern. Where I have a 00:33:37.200 --> 00:33:38.710 align:start position:0% the same kind of pattern. Where I have a source<00:33:37.480> of<00:33:37.560> events,<00:33:38.040> which<00:33:38.160> in<00:33:38.240> our<00:33:38.360> case<00:33:38.600> is 00:33:38.710 --> 00:33:38.720 align:start position:0% source of events, which in our case is 00:33:38.720 --> 00:33:40.550 align:start position:0% source of events, which in our case is the<00:33:38.840> user.<00:33:39.600> Those<00:33:39.760> events<00:33:40.040> are<00:33:40.120> streaming 00:33:40.550 --> 00:33:40.560 align:start position:0% the user. Those events are streaming 00:33:40.560 --> 00:33:42.870 align:start position:0% the user. Those events are streaming into<00:33:40.960> some<00:33:41.160> remote<00:33:41.560> remote<00:33:42.120> data<00:33:42.360> store, 00:33:42.870 --> 00:33:42.880 align:start position:0% into some remote remote data store, 00:33:42.880 --> 00:33:45.310 align:start position:0% into some remote remote data store, Datomic.<00:33:43.960> And<00:33:44.280> we<00:33:44.400> have<00:33:44.520> formula<00:33:44.960> cells, 00:33:45.310 --> 00:33:45.320 align:start position:0% Datomic. And we have formula cells, 00:33:45.320 --> 00:33:47.870 align:start position:0% Datomic. And we have formula cells, which<00:33:45.800> are<00:33:45.880> calculating<00:33:46.440> the<00:33:46.520> user's<00:33:46.840> state. 00:33:47.870 --> 00:33:47.880 align:start position:0% which are calculating the user's state. 00:33:47.880 --> 00:33:50.110 align:start position:0% which are calculating the user's state. Um<00:33:48.360> and<00:33:48.640> those<00:33:48.800> would<00:33:48.880> be<00:33:49.000> Datomic<00:33:49.400> queries. 00:33:50.110 --> 00:33:50.120 align:start position:0% Um and those would be Datomic queries. 00:33:50.120 --> 00:33:52.350 align:start position:0% Um and those would be Datomic queries. We<00:33:50.280> periodically<00:33:50.920> want<00:33:51.120> to<00:33:51.200> update<00:33:51.520> the<00:33:51.600> UI 00:33:52.350 --> 00:33:52.360 align:start position:0% We periodically want to update the UI 00:33:52.360 --> 00:33:53.750 align:start position:0% We periodically want to update the UI based<00:33:52.560> on<00:33:52.680> what<00:33:52.800> we<00:33:52.880> pull<00:33:53.040> from<00:33:53.160> Datomic.<00:33:53.640> We 00:33:53.750 --> 00:33:53.760 align:start position:0% based on what we pull from Datomic. We 00:33:53.760 --> 00:33:55.670 align:start position:0% based on what we pull from Datomic. We want<00:33:53.920> to<00:33:53.960> do<00:33:54.080> that<00:33:54.320> in<00:33:54.440> a<00:33:54.880> a<00:33:54.920> unidirectional 00:33:55.670 --> 00:33:55.680 align:start position:0% want to do that in a a unidirectional 00:33:55.680 --> 00:33:57.630 align:start position:0% want to do that in a a unidirectional data<00:33:55.920> flow<00:33:56.160> kind<00:33:56.280> of<00:33:56.400> way. 00:33:57.630 --> 00:33:57.640 align:start position:0% data flow kind of way. 00:33:57.640 --> 00:33:58.910 align:start position:0% data flow kind of way. Yeah,<00:33:57.800> I<00:33:57.840> think<00:33:58.120> I<00:33:58.160> think<00:33:58.360> to<00:33:58.440> think<00:33:58.600> about<00:33:58.840> is 00:33:58.910 --> 00:33:58.920 align:start position:0% Yeah, I think I think to think about is 00:33:58.920 --> 00:34:00.630 align:start position:0% Yeah, I think I think to think about is like<00:33:59.160> if<00:33:59.320> you<00:33:59.400> have<00:33:59.600> a<00:33:59.880> a<00:33:59.920> function<00:34:00.280> that<00:34:00.440> does 00:34:00.630 --> 00:34:00.640 align:start position:0% like if you have a a function that does 00:34:00.640 --> 00:34:03.190 align:start position:0% like if you have a a function that does an<00:34:00.720> Ajax<00:34:01.040> call<00:34:01.760> to<00:34:01.960> the<00:34:02.080> server,<00:34:02.920> like<00:34:03.120> the 00:34:03.190 --> 00:34:03.200 align:start position:0% an Ajax call to the server, like the 00:34:03.200 --> 00:34:05.150 align:start position:0% an Ajax call to the server, like the login<00:34:03.560> function,<00:34:04.320> a<00:34:04.360> lot<00:34:04.520> of<00:34:04.560> times<00:34:04.800> you'll<00:34:05.000> be 00:34:05.150 --> 00:34:05.160 align:start position:0% login function, a lot of times you'll be 00:34:05.160 --> 00:34:07.510 align:start position:0% login function, a lot of times you'll be saying,<00:34:05.640> "Okay,<00:34:06.040> here's<00:34:06.280> a<00:34:06.320> callback<00:34:06.960> and, 00:34:07.510 --> 00:34:07.520 align:start position:0% saying, "Okay, here's a callback and, 00:34:07.520 --> 00:34:09.710 align:start position:0% saying, "Okay, here's a callback and, you<00:34:07.640> know,<00:34:07.760> if<00:34:07.880> the<00:34:07.960> server<00:34:08.240> returns<00:34:08.720> true, 00:34:09.710 --> 00:34:09.720 align:start position:0% you know, if the server returns true, 00:34:09.720 --> 00:34:11.669 align:start position:0% you know, if the server returns true, then<00:34:10.480> I'm<00:34:10.600> going<00:34:10.720> to<00:34:10.760> do<00:34:10.919> this.<00:34:11.399> And<00:34:11.520> if<00:34:11.600> it 00:34:11.669 --> 00:34:11.679 align:start position:0% then I'm going to do this. And if it 00:34:11.679 --> 00:34:12.830 align:start position:0% then I'm going to do this. And if it returns<00:34:12.040> false,<00:34:12.399> then<00:34:12.480> I'm<00:34:12.520> going<00:34:12.639> to<00:34:12.720> do 00:34:12.830 --> 00:34:12.840 align:start position:0% returns false, then I'm going to do 00:34:12.840 --> 00:34:14.830 align:start position:0% returns false, then I'm going to do that,<00:34:13.080> right?"<00:34:13.960> So,<00:34:14.280> but<00:34:14.440> the<00:34:14.520> things<00:34:14.760> you 00:34:14.830 --> 00:34:14.840 align:start position:0% that, right?" So, but the things you 00:34:14.840 --> 00:34:16.430 align:start position:0% that, right?" So, but the things you generally<00:34:15.200> want<00:34:15.320> to<00:34:15.399> do<00:34:15.639> is,<00:34:16.240> you<00:34:16.320> know, 00:34:16.430 --> 00:34:16.440 align:start position:0% generally want to do is, you know, 00:34:16.440 --> 00:34:17.470 align:start position:0% generally want to do is, you know, change<00:34:16.679> the<00:34:16.760> state<00:34:16.919> of<00:34:17.000> the<00:34:17.040> application, 00:34:17.470 --> 00:34:17.480 align:start position:0% change the state of the application, 00:34:17.480 --> 00:34:19.230 align:start position:0% change the state of the application, like<00:34:17.600> I<00:34:17.679> want<00:34:17.840> to<00:34:17.879> show<00:34:18.120> you<00:34:18.639> uh<00:34:18.720> an<00:34:18.840> error,<00:34:19.200> a 00:34:19.230 --> 00:34:19.240 align:start position:0% like I want to show you uh an error, a 00:34:19.240 --> 00:34:21.830 align:start position:0% like I want to show you uh an error, a flash<00:34:19.600> message,<00:34:20.320> like<00:34:20.960> incorrect<00:34:21.399> password 00:34:21.830 --> 00:34:21.840 align:start position:0% flash message, like incorrect password 00:34:21.840 --> 00:34:23.110 align:start position:0% flash message, like incorrect password or<00:34:21.919> something,<00:34:22.240> right?<00:34:22.720> But,<00:34:22.840> that<00:34:22.960> means 00:34:23.110 --> 00:34:23.120 align:start position:0% or something, right? But, that means 00:34:23.120 --> 00:34:24.909 align:start position:0% or something, right? But, that means that<00:34:23.320> like<00:34:23.800> this<00:34:23.960> piece<00:34:24.159> of<00:34:24.280> code<00:34:24.520> that<00:34:24.639> sends 00:34:24.909 --> 00:34:24.919 align:start position:0% that like this piece of code that sends 00:34:24.919 --> 00:34:26.750 align:start position:0% that like this piece of code that sends off<00:34:25.080> the<00:34:25.159> request<00:34:25.520> to<00:34:25.600> login,<00:34:26.240> now<00:34:26.399> needs<00:34:26.639> to 00:34:26.750 --> 00:34:26.760 align:start position:0% off the request to login, now needs to 00:34:26.760 --> 00:34:29.030 align:start position:0% off the request to login, now needs to know<00:34:27.000> about<00:34:27.520> what<00:34:27.760> to<00:34:27.879> do 00:34:29.030 --> 00:34:29.040 align:start position:0% know about what to do 00:34:29.040 --> 00:34:30.629 align:start position:0% know about what to do with<00:34:29.240> the<00:34:29.320> response. 00:34:30.629 --> 00:34:30.639 align:start position:0% with the response. 00:34:30.639 --> 00:34:32.790 align:start position:0% with the response. And<00:34:31.000> it<00:34:31.120> has<00:34:31.280> to<00:34:31.399> know<00:34:31.840> where<00:34:32.159> to<00:34:32.280> go<00:34:32.440> to<00:34:32.600> do 00:34:32.790 --> 00:34:32.800 align:start position:0% And it has to know where to go to do 00:34:32.800 --> 00:34:34.909 align:start position:0% And it has to know where to go to do that,<00:34:33.240> right?<00:34:33.600> And<00:34:33.720> it<00:34:33.840> has<00:34:34.040> to<00:34:34.120> now<00:34:34.320> cooperate 00:34:34.909 --> 00:34:34.919 align:start position:0% that, right? And it has to now cooperate 00:34:34.919 --> 00:34:35.710 align:start position:0% that, right? And it has to now cooperate with<00:34:35.040> these<00:34:35.200> other<00:34:35.360> parts<00:34:35.600> of<00:34:35.639> your 00:34:35.710 --> 00:34:35.720 align:start position:0% with these other parts of your 00:34:35.720 --> 00:34:37.550 align:start position:0% with these other parts of your application.<00:34:36.720> And<00:34:36.840> now<00:34:36.960> imagine<00:34:37.320> that<00:34:37.440> you 00:34:37.550 --> 00:34:37.560 align:start position:0% application. And now imagine that you 00:34:37.560 --> 00:34:40.310 align:start position:0% application. And now imagine that you have<00:34:38.320> 10<00:34:38.560> buttons<00:34:38.919> on<00:34:39.000> the<00:34:39.080> page,<00:34:39.960> right?<00:34:40.200> And 00:34:40.310 --> 00:34:40.320 align:start position:0% have 10 buttons on the page, right? And 00:34:40.320 --> 00:34:41.590 align:start position:0% have 10 buttons on the page, right? And you<00:34:40.399> could<00:34:40.560> click<00:34:40.800> any<00:34:41.000> one<00:34:41.120> of<00:34:41.200> them<00:34:41.320> in<00:34:41.440> any 00:34:41.590 --> 00:34:41.600 align:start position:0% you could click any one of them in any 00:34:41.600 --> 00:34:43.470 align:start position:0% you could click any one of them in any order.<00:34:42.360> So,<00:34:42.480> now<00:34:42.639> you<00:34:42.760> run<00:34:42.879> into<00:34:43.040> all<00:34:43.159> kinds<00:34:43.399> of 00:34:43.470 --> 00:34:43.480 align:start position:0% order. So, now you run into all kinds of 00:34:43.480 --> 00:34:45.470 align:start position:0% order. So, now you run into all kinds of synchronization<00:34:44.120> issues<00:34:44.480> like,<00:34:45.080> you<00:34:45.200> know, 00:34:45.470 --> 00:34:45.480 align:start position:0% synchronization issues like, you know, 00:34:45.480 --> 00:34:46.750 align:start position:0% synchronization issues like, you know, should<00:34:45.720> it<00:34:45.840> Do<00:34:45.960> I<00:34:46.000> need<00:34:46.120> to<00:34:46.200> disable<00:34:46.560> this 00:34:46.750 --> 00:34:46.760 align:start position:0% should it Do I need to disable this 00:34:46.760 --> 00:34:48.669 align:start position:0% should it Do I need to disable this button<00:34:47.159> when<00:34:47.679> when<00:34:47.840> I<00:34:47.919> press<00:34:48.159> this<00:34:48.360> button<00:34:48.560> and 00:34:48.669 --> 00:34:48.679 align:start position:0% button when when I press this button and 00:34:48.679 --> 00:34:50.070 align:start position:0% button when when I press this button and so<00:34:48.800> on?<00:34:49.200> So,<00:34:49.320> now<00:34:49.440> all<00:34:49.520> these<00:34:49.679> things<00:34:49.879> have<00:34:50.000> to 00:34:50.070 --> 00:34:50.080 align:start position:0% so on? So, now all these things have to 00:34:50.080 --> 00:34:52.030 align:start position:0% so on? So, now all these things have to know<00:34:50.240> about<00:34:50.520> each<00:34:50.679> other<00:34:50.879> very<00:34:51.120> intimately. 00:34:52.030 --> 00:34:52.040 align:start position:0% know about each other very intimately. 00:34:52.040 --> 00:34:53.669 align:start position:0% know about each other very intimately. And<00:34:52.159> then<00:34:52.280> you<00:34:52.399> change<00:34:52.720> something<00:34:53.520> and<00:34:53.639> you 00:34:53.669 --> 00:34:53.679 align:start position:0% And then you change something and you 00:34:53.679 --> 00:34:55.350 align:start position:0% And then you change something and you don't<00:34:53.840> know<00:34:53.960> what's<00:34:54.120> going<00:34:54.240> to<00:34:54.320> happen. 00:34:55.350 --> 00:34:55.360 align:start position:0% don't know what's going to happen. 00:34:55.360 --> 00:34:57.750 align:start position:0% don't know what's going to happen. Whereas<00:34:55.600> with<00:34:55.760> CQRS, 00:34:57.750 --> 00:34:57.760 align:start position:0% Whereas with CQRS, 00:34:57.760 --> 00:34:59.430 align:start position:0% Whereas with CQRS, things<00:34:58.160> just<00:34:58.360> fire<00:34:58.640> and<00:34:58.760> forget.<00:34:59.120> You<00:34:59.200> send<00:34:59.400> a 00:34:59.430 --> 00:34:59.440 align:start position:0% things just fire and forget. You send a 00:34:59.440 --> 00:35:01.350 align:start position:0% things just fire and forget. You send a message<00:34:59.800> to<00:34:59.880> the<00:35:00.000> server<00:35:00.840> and<00:35:01.000> what<00:35:01.120> comes 00:35:01.350 --> 00:35:01.360 align:start position:0% message to the server and what comes 00:35:01.360 --> 00:35:03.190 align:start position:0% message to the server and what comes back<00:35:01.680> is<00:35:01.840> the<00:35:01.920> next<00:35:02.280> state<00:35:02.760> of<00:35:02.880> a<00:35:02.920> state 00:35:03.190 --> 00:35:03.200 align:start position:0% back is the next state of a state 00:35:03.200 --> 00:35:04.790 align:start position:0% back is the next state of a state machine,<00:35:04.000> which<00:35:04.200> could<00:35:04.360> actually<00:35:04.600> be<00:35:04.680> the 00:35:04.790 --> 00:35:04.800 align:start position:0% machine, which could actually be the 00:35:04.800 --> 00:35:07.270 align:start position:0% machine, which could actually be the same<00:35:05.320> as<00:35:05.480> the<00:35:05.600> current<00:35:05.840> state.<00:35:06.720> Like,<00:35:06.960> nothing 00:35:07.270 --> 00:35:07.280 align:start position:0% same as the current state. Like, nothing 00:35:07.280 --> 00:35:08.510 align:start position:0% same as the current state. Like, nothing might<00:35:07.440> happen<00:35:07.680> on<00:35:07.760> the<00:35:07.840> server<00:35:08.120> that<00:35:08.240> you<00:35:08.360> care 00:35:08.510 --> 00:35:08.520 align:start position:0% might happen on the server that you care 00:35:08.520 --> 00:35:10.430 align:start position:0% might happen on the server that you care about,<00:35:09.240> right?<00:35:09.720> And<00:35:09.840> so<00:35:09.920> then<00:35:10.080> nothing<00:35:10.320> will 00:35:10.430 --> 00:35:10.440 align:start position:0% about, right? And so then nothing will 00:35:10.440 --> 00:35:13.030 align:start position:0% about, right? And so then nothing will change.<00:35:11.440> Or<00:35:11.600> something<00:35:11.920> could<00:35:12.160> happen,<00:35:12.560> but 00:35:13.030 --> 00:35:13.040 align:start position:0% change. Or something could happen, but 00:35:13.040 --> 00:35:14.430 align:start position:0% change. Or something could happen, but you<00:35:13.160> don't<00:35:13.320> need<00:35:13.440> to<00:35:13.520> know<00:35:13.640> about<00:35:13.880> it<00:35:13.960> here. 00:35:14.430 --> 00:35:14.440 align:start position:0% you don't need to know about it here. 00:35:14.440 --> 00:35:15.590 align:start position:0% you don't need to know about it here. There's<00:35:14.600> something<00:35:14.840> that's<00:35:15.040> looking<00:35:15.360> at<00:35:15.480> our 00:35:15.590 --> 00:35:15.600 align:start position:0% There's something that's looking at our 00:35:15.600 --> 00:35:17.910 align:start position:0% There's something that's looking at our state<00:35:16.120> model<00:35:16.840> and<00:35:17.000> saying,<00:35:17.280> "Okay,<00:35:17.640> when 00:35:17.910 --> 00:35:17.920 align:start position:0% state model and saying, "Okay, when 00:35:17.920 --> 00:35:19.070 align:start position:0% state model and saying, "Okay, when there's<00:35:18.120> stuff<00:35:18.360> in<00:35:18.440> the<00:35:18.480> shopping<00:35:18.840> cart,<00:35:19.000> I 00:35:19.070 --> 00:35:19.080 align:start position:0% there's stuff in the shopping cart, I 00:35:19.080 --> 00:35:22.910 align:start position:0% there's stuff in the shopping cart, I want<00:35:19.200> to<00:35:19.240> show<00:35:19.400> the<00:35:19.480> shopping<00:35:19.800> cart." 00:35:22.910 --> 00:35:22.920 align:start position:0% 00:35:22.920 --> 00:35:23.470 align:start position:0% Yes. 00:35:23.470 --> 00:35:23.480 align:start position:0% Yes. 00:35:23.480 --> 00:35:24.950 align:start position:0% Yes. Can<00:35:23.600> you 00:35:24.950 --> 00:35:24.960 align:start position:0% Can you 00:35:24.960 --> 00:35:25.750 align:start position:0% Can you talk 00:35:25.750 --> 00:35:25.760 align:start position:0% talk 00:35:25.760 --> 00:35:27.350 align:start position:0% talk briefly<00:35:26.240> about 00:35:27.350 --> 00:35:27.360 align:start position:0% briefly about 00:35:27.360 --> 00:35:29.150 align:start position:0% briefly about how<00:35:27.520> that<00:35:27.800> process<00:35:28.200> works?<00:35:28.520> So,<00:35:28.760> when<00:35:28.920> you<00:35:29.000> get 00:35:29.150 --> 00:35:29.160 align:start position:0% how that process works? So, when you get 00:35:29.160 --> 00:35:31.670 align:start position:0% how that process works? So, when you get that<00:35:29.440> new<00:35:29.560> state,<00:35:30.400> how<00:35:30.520> does<00:35:30.720> that<00:35:31.040> then<00:35:31.360> get 00:35:31.670 --> 00:35:31.680 align:start position:0% that new state, how does that then get 00:35:31.680 --> 00:35:32.830 align:start position:0% that new state, how does that then get reflected 00:35:32.830 --> 00:35:32.840 align:start position:0% reflected 00:35:32.840 --> 00:35:34.550 align:start position:0% reflected in<00:35:33.000> the<00:35:33.080> document? 00:35:34.550 --> 00:35:34.560 align:start position:0% in the document? 00:35:34.560 --> 00:35:36.310 align:start position:0% in the document? Question,<00:35:34.800> I<00:35:34.840> think<00:35:35.000> was<00:35:35.640> paraphrasing<00:35:36.200> how 00:35:36.310 --> 00:35:36.320 align:start position:0% Question, I think was paraphrasing how 00:35:36.320 --> 00:35:38.190 align:start position:0% Question, I think was paraphrasing how to<00:35:36.440> integrate<00:35:36.920> the<00:35:37.000> server's<00:35:37.600> state<00:35:37.960> with<00:35:38.080> the 00:35:38.190 --> 00:35:38.200 align:start position:0% to integrate the server's state with the 00:35:38.200 --> 00:35:40.710 align:start position:0% to integrate the server's state with the client<00:35:38.520> state.<00:35:39.120> How<00:35:39.200> do<00:35:39.280> How<00:35:39.360> do<00:35:39.400> we<00:35:39.520> do<00:35:39.640> that? 00:35:40.710 --> 00:35:40.720 align:start position:0% client state. How do How do we do that? 00:35:40.720 --> 00:35:42.470 align:start position:0% client state. How do How do we do that? Like,<00:35:40.880> how<00:35:40.960> does<00:35:41.120> it<00:35:41.200> get<00:35:41.360> into<00:35:41.600> the<00:35:42.200> How<00:35:42.280> does 00:35:42.470 --> 00:35:42.480 align:start position:0% Like, how does it get into the How does 00:35:42.480 --> 00:35:43.950 align:start position:0% Like, how does it get into the How does it<00:35:42.640> reflect<00:35:43.000> How<00:35:43.160> is<00:35:43.240> it<00:35:43.360> reflected<00:35:43.800> in<00:35:43.880> the 00:35:43.950 --> 00:35:43.960 align:start position:0% it reflect How is it reflected in the 00:35:43.960 --> 00:35:45.710 align:start position:0% it reflect How is it reflected in the document?<00:35:44.680> Is<00:35:44.800> what<00:35:44.920> you<00:35:45.000> want<00:35:45.120> to<00:35:45.160> know. 00:35:45.710 --> 00:35:45.720 align:start position:0% document? Is what you want to know. 00:35:45.720 --> 00:35:46.430 align:start position:0% document? Is what you want to know. Right.<00:35:46.120> So, 00:35:46.430 --> 00:35:46.440 align:start position:0% Right. So, 00:35:46.440 --> 00:35:47.430 align:start position:0% Right. So, Right. 00:35:47.430 --> 00:35:47.440 align:start position:0% Right. 00:35:47.440 --> 00:35:49.630 align:start position:0% Right. in<00:35:47.760> the<00:35:47.880> demo<00:35:48.440> yesterday,<00:35:49.320> you<00:35:49.400> know,<00:35:49.480> that 00:35:49.630 --> 00:35:49.640 align:start position:0% in the demo yesterday, you know, that 00:35:49.640 --> 00:35:51.790 align:start position:0% in the demo yesterday, you know, that was<00:35:49.800> using<00:35:50.080> React 00:35:51.790 --> 00:35:51.800 align:start position:0% was using React 00:35:51.800 --> 00:35:52.830 align:start position:0% was using React and<00:35:51.920> they're<00:35:52.000> figuring<00:35:52.320> out<00:35:52.440> this 00:35:52.830 --> 00:35:52.840 align:start position:0% and they're figuring out this 00:35:52.840 --> 00:35:54.630 align:start position:0% and they're figuring out this integration<00:35:53.480> strategy. 00:35:54.630 --> 00:35:54.640 align:start position:0% integration strategy. 00:35:54.640 --> 00:35:58.310 align:start position:0% integration strategy. I<00:35:54.760> use<00:35:55.320> Do<00:35:55.400> you<00:35:55.480> re-render? 00:35:58.310 --> 00:35:58.320 align:start position:0% 00:35:58.320 --> 00:36:00.230 align:start position:0% Right.<00:35:58.720> Yeah,<00:35:58.800> I<00:35:58.840> can<00:35:59.120> I<00:35:59.160> can<00:35:59.720> go<00:35:59.880> for 00:36:00.230 --> 00:36:00.240 align:start position:0% Right. Yeah, I can I can go for 00:36:00.240 --> 00:36:02.070 align:start position:0% Right. Yeah, I can I can go for Yeah.<00:36:00.600> Yeah,<00:36:00.760> so<00:36:01.320> in<00:36:01.440> general,<00:36:01.720> there<00:36:01.840> are<00:36:01.920> two 00:36:02.070 --> 00:36:02.080 align:start position:0% Yeah. Yeah, so in general, there are two 00:36:02.080 --> 00:36:04.830 align:start position:0% Yeah. Yeah, so in general, there are two approaches<00:36:03.120> to 00:36:04.830 --> 00:36:04.840 align:start position:0% approaches to 00:36:04.840 --> 00:36:06.190 align:start position:0% approaches to doing<00:36:05.040> this<00:36:05.160> thing<00:36:05.320> that<00:36:05.440> we<00:36:05.520> need<00:36:05.640> to<00:36:05.760> do.<00:36:06.000> And 00:36:06.190 --> 00:36:06.200 align:start position:0% doing this thing that we need to do. And 00:36:06.200 --> 00:36:08.190 align:start position:0% doing this thing that we need to do. And I<00:36:06.320> I<00:36:06.400> think<00:36:06.600> React<00:36:06.920> represents<00:36:07.360> one<00:36:07.640> approach 00:36:08.190 --> 00:36:08.200 align:start position:0% I I think React represents one approach 00:36:08.200 --> 00:36:09.270 align:start position:0% I I think React represents one approach and<00:36:08.520> everything<00:36:08.840> we're<00:36:08.920> showing<00:36:09.160> you 00:36:09.270 --> 00:36:09.280 align:start position:0% and everything we're showing you 00:36:09.280 --> 00:36:10.710 align:start position:0% and everything we're showing you represents<00:36:09.720> another. 00:36:10.710 --> 00:36:10.720 align:start position:0% represents another. 00:36:10.720 --> 00:36:13.630 align:start position:0% represents another. The<00:36:10.800> basic<00:36:11.600> bifurcation<00:36:12.320> is<00:36:12.440> between<00:36:13.400> two 00:36:13.630 --> 00:36:13.640 align:start position:0% The basic bifurcation is between two 00:36:13.640 --> 00:36:16.030 align:start position:0% The basic bifurcation is between two ways<00:36:14.000> to<00:36:14.120> repaint<00:36:14.640> the<00:36:14.720> UI. 00:36:16.030 --> 00:36:16.040 align:start position:0% ways to repaint the UI. 00:36:16.040 --> 00:36:18.230 align:start position:0% ways to repaint the UI. One<00:36:16.240> is<00:36:16.360> faster,<00:36:16.840> one<00:36:17.040> is<00:36:17.160> slower. 00:36:18.230 --> 00:36:18.240 align:start position:0% One is faster, one is slower. 00:36:18.240 --> 00:36:20.710 align:start position:0% One is faster, one is slower. One<00:36:19.000> may<00:36:19.200> may<00:36:19.400> or<00:36:19.480> may<00:36:19.600> not<00:36:19.760> be<00:36:19.880> inconsistent, 00:36:20.710 --> 00:36:20.720 align:start position:0% One may may or may not be inconsistent, 00:36:20.720 --> 00:36:22.110 align:start position:0% One may may or may not be inconsistent, one<00:36:20.920> is<00:36:21.040> guaranteed<00:36:21.400> to<00:36:21.440> be<00:36:21.560> consistent. 00:36:22.110 --> 00:36:22.120 align:start position:0% one is guaranteed to be consistent. 00:36:22.120 --> 00:36:23.670 align:start position:0% one is guaranteed to be consistent. Those<00:36:22.320> are<00:36:22.400> the<00:36:22.480> trade-offs. 00:36:23.670 --> 00:36:23.680 align:start position:0% Those are the trade-offs. 00:36:23.680 --> 00:36:26.190 align:start position:0% Those are the trade-offs. The<00:36:23.720> React<00:36:24.120> approach<00:36:24.640> is<00:36:25.640> the<00:36:25.760> same<00:36:25.960> one<00:36:26.080> that 00:36:26.190 --> 00:36:26.200 align:start position:0% The React approach is the same one that 00:36:26.200 --> 00:36:27.910 align:start position:0% The React approach is the same one that Angular<00:36:26.560> uses,<00:36:27.000> but<00:36:27.080> slightly 00:36:27.910 --> 00:36:27.920 align:start position:0% Angular uses, but slightly 00:36:27.920 --> 00:36:29.990 align:start position:0% Angular uses, but slightly refined.<00:36:28.360> It's<00:36:28.480> called<00:36:28.680> dirty<00:36:28.960> checking.<00:36:29.960> And 00:36:29.990 --> 00:36:30.000 align:start position:0% refined. It's called dirty checking. And 00:36:30.000 --> 00:36:31.470 align:start position:0% refined. It's called dirty checking. And historically, 00:36:31.470 --> 00:36:31.480 align:start position:0% historically, 00:36:31.480 --> 00:36:33.190 align:start position:0% historically, people<00:36:31.640> who<00:36:31.680> have<00:36:31.760> been<00:36:31.880> writing<00:36:32.120> UIs<00:36:33.000> using 00:36:33.190 --> 00:36:33.200 align:start position:0% people who have been writing UIs using 00:36:33.200 --> 00:36:34.190 align:start position:0% people who have been writing UIs using this<00:36:33.320> approach,<00:36:33.600> I<00:36:33.640> think<00:36:33.760> there's<00:36:33.840> a<00:36:33.920> common 00:36:34.190 --> 00:36:34.200 align:start position:0% this approach, I think there's a common 00:36:34.200 --> 00:36:36.270 align:start position:0% this approach, I think there's a common list<00:36:34.360> system<00:36:34.640> called<00:36:34.960> Garnet<00:36:35.600> or<00:36:35.800> there's 00:36:36.270 --> 00:36:36.280 align:start position:0% list system called Garnet or there's 00:36:36.280 --> 00:36:37.870 align:start position:0% list system called Garnet or there's whatever,<00:36:36.520> there's<00:36:36.640> papers<00:36:37.000> there's<00:36:37.160> papers. 00:36:37.870 --> 00:36:37.880 align:start position:0% whatever, there's papers there's papers. 00:36:37.880 --> 00:36:40.710 align:start position:0% whatever, there's papers there's papers. Check<00:36:38.000> them<00:36:38.120> out.<00:36:39.040> Um 00:36:40.710 --> 00:36:40.720 align:start position:0% Check them out. Um 00:36:40.720 --> 00:36:41.630 align:start position:0% Check them out. Um Uh 00:36:41.630 --> 00:36:41.640 align:start position:0% Uh 00:36:41.640 --> 00:36:43.830 align:start position:0% Uh the<00:36:42.120> thing<00:36:42.360> you<00:36:42.480> get<00:36:42.600> is<00:36:42.720> speed<00:36:43.440> because<00:36:43.720> you 00:36:43.830 --> 00:36:43.840 align:start position:0% the thing you get is speed because you 00:36:43.840 --> 00:36:45.510 align:start position:0% the thing you get is speed because you don't<00:36:44.160> need<00:36:44.400> to<00:36:44.520> check<00:36:44.840> everything<00:36:45.360> that 00:36:45.510 --> 00:36:45.520 align:start position:0% don't need to check everything that 00:36:45.520 --> 00:36:46.910 align:start position:0% don't need to check everything that you're<00:36:45.640> trying<00:36:45.840> to<00:36:45.880> update<00:36:46.200> for<00:36:46.280> equality. 00:36:46.910 --> 00:36:46.920 align:start position:0% you're trying to update for equality. 00:36:46.920 --> 00:36:48.870 align:start position:0% you're trying to update for equality. Like<00:36:47.000> that's<00:36:47.200> the<00:36:47.320> essence<00:36:47.600> of<00:36:47.680> data<00:36:47.920> flow<00:36:48.280> is 00:36:48.870 --> 00:36:48.880 align:start position:0% Like that's the essence of data flow is 00:36:48.880 --> 00:36:49.990 align:start position:0% Like that's the essence of data flow is we<00:36:49.000> spin<00:36:49.240> through<00:36:49.360> these<00:36:49.520> values<00:36:49.840> that<00:36:49.960> are 00:36:49.990 --> 00:36:50.000 align:start position:0% we spin through these values that are 00:36:50.000 --> 00:36:51.430 align:start position:0% we spin through these values that are coming<00:36:50.280> in<00:36:50.560> and<00:36:50.720> if<00:36:50.840> they're<00:36:50.960> different<00:36:51.320> than 00:36:51.430 --> 00:36:51.440 align:start position:0% coming in and if they're different than 00:36:51.440 --> 00:36:54.430 align:start position:0% coming in and if they're different than ones<00:36:51.600> we<00:36:51.720> knew<00:36:51.920> about,<00:36:52.920> we<00:36:52.960> need<00:36:53.080> to<00:36:53.160> do<00:36:53.320> stuff. 00:36:54.430 --> 00:36:54.440 align:start position:0% ones we knew about, we need to do stuff. 00:36:54.440 --> 00:36:55.870 align:start position:0% ones we knew about, we need to do stuff. With<00:36:54.600> dirty<00:36:54.880> checking,<00:36:55.240> you<00:36:55.320> just<00:36:55.520> say,<00:36:55.680> "Hey, 00:36:55.870 --> 00:36:55.880 align:start position:0% With dirty checking, you just say, "Hey, 00:36:55.880 --> 00:36:58.390 align:start position:0% With dirty checking, you just say, "Hey, if<00:36:56.120> anything<00:36:56.640> in<00:36:56.760> the<00:36:56.840> tree<00:36:57.160> changed,<00:36:58.000> we<00:36:58.160> know 00:36:58.390 --> 00:36:58.400 align:start position:0% if anything in the tree changed, we know 00:36:58.400 --> 00:36:59.470 align:start position:0% if anything in the tree changed, we know that<00:36:58.600> stuff<00:36:58.840> below<00:36:59.080> we're<00:36:59.160> just<00:36:59.280> going<00:36:59.400> to 00:36:59.470 --> 00:36:59.480 align:start position:0% that stuff below we're just going to 00:36:59.480 --> 00:37:01.030 align:start position:0% that stuff below we're just going to blow<00:36:59.680> away<00:36:59.880> anything<00:37:00.200> that<00:37:00.320> existed<00:37:00.680> below<00:37:00.920> it 00:37:01.030 --> 00:37:01.040 align:start position:0% blow away anything that existed below it 00:37:01.040 --> 00:37:03.070 align:start position:0% blow away anything that existed below it without<00:37:01.400> checking<00:37:01.680> it<00:37:01.760> for<00:37:01.880> equality." 00:37:03.070 --> 00:37:03.080 align:start position:0% without checking it for equality." 00:37:03.080 --> 00:37:04.870 align:start position:0% without checking it for equality." So<00:37:03.120> you<00:37:03.160> get<00:37:03.360> speed<00:37:03.720> there. 00:37:04.870 --> 00:37:04.880 align:start position:0% So you get speed there. 00:37:04.880 --> 00:37:06.230 align:start position:0% So you get speed there. On<00:37:04.920> the<00:37:05.000> other<00:37:05.160> side,<00:37:05.440> which<00:37:05.560> is<00:37:05.640> what<00:37:05.800> Javelin 00:37:06.230 --> 00:37:06.240 align:start position:0% On the other side, which is what Javelin 00:37:06.240 --> 00:37:08.670 align:start position:0% On the other side, which is what Javelin does<00:37:06.520> and<00:37:06.640> which<00:37:06.800> is<00:37:06.880> what<00:37:07.040> spreadsheets<00:37:07.640> do, 00:37:08.670 --> 00:37:08.680 align:start position:0% does and which is what spreadsheets do, 00:37:08.680 --> 00:37:10.590 align:start position:0% does and which is what spreadsheets do, we<00:37:08.800> do<00:37:09.040> equality<00:37:09.440> checking<00:37:09.760> for<00:37:09.880> every<00:37:10.160> value 00:37:10.590 --> 00:37:10.600 align:start position:0% we do equality checking for every value 00:37:10.600 --> 00:37:12.350 align:start position:0% we do equality checking for every value that<00:37:10.720> gets<00:37:10.920> pushed<00:37:11.200> in.<00:37:11.960> And<00:37:12.040> we<00:37:12.120> don't 00:37:12.350 --> 00:37:12.360 align:start position:0% that gets pushed in. And we don't 00:37:12.360 --> 00:37:14.310 align:start position:0% that gets pushed in. And we don't calculate<00:37:12.880> diffs.<00:37:13.240> There's<00:37:13.480> really<00:37:13.680> no<00:37:14.240> the 00:37:14.310 --> 00:37:14.320 align:start position:0% calculate diffs. There's really no the 00:37:14.320 --> 00:37:15.470 align:start position:0% calculate diffs. There's really no the same<00:37:14.440> way<00:37:14.520> there's<00:37:14.680> not<00:37:14.800> really<00:37:14.960> a<00:37:15.000> concept<00:37:15.360> of 00:37:15.470 --> 00:37:15.480 align:start position:0% same way there's not really a concept of 00:37:15.480 --> 00:37:16.870 align:start position:0% same way there's not really a concept of a<00:37:15.520> diff<00:37:15.800> in<00:37:15.880> a<00:37:15.920> spreadsheet,<00:37:16.400> there<00:37:16.520> isn't<00:37:16.800> in 00:37:16.870 --> 00:37:16.880 align:start position:0% a diff in a spreadsheet, there isn't in 00:37:16.880 --> 00:37:18.310 align:start position:0% a diff in a spreadsheet, there isn't in Javelin. 00:37:18.310 --> 00:37:18.320 align:start position:0% Javelin. 00:37:18.320 --> 00:37:20.190 align:start position:0% Javelin. What<00:37:18.480> we've<00:37:18.680> found<00:37:19.240> in<00:37:19.560> in<00:37:19.720> our<00:37:19.920> efforts 00:37:20.190 --> 00:37:20.200 align:start position:0% What we've found in in our efforts 00:37:20.200 --> 00:37:21.950 align:start position:0% What we've found in in our efforts around<00:37:20.520> this<00:37:20.920> and<00:37:21.080> the<00:37:21.160> reason<00:37:21.400> we<00:37:21.520> went<00:37:21.760> with 00:37:21.950 --> 00:37:21.960 align:start position:0% around this and the reason we went with 00:37:21.960 --> 00:37:23.350 align:start position:0% around this and the reason we went with spreadsheet<00:37:22.400> style<00:37:22.640> data<00:37:22.880> flow<00:37:23.080> instead<00:37:23.280> of 00:37:23.350 --> 00:37:23.360 align:start position:0% spreadsheet style data flow instead of 00:37:23.360 --> 00:37:25.910 align:start position:0% spreadsheet style data flow instead of dirty<00:37:23.600> checking<00:37:24.480> is<00:37:24.760> that 00:37:25.910 --> 00:37:25.920 align:start position:0% dirty checking is that 00:37:25.920 --> 00:37:27.750 align:start position:0% dirty checking is that you<00:37:26.040> need<00:37:26.160> to<00:37:26.240> be<00:37:26.280> able<00:37:26.440> to<00:37:26.560> write<00:37:26.920> components 00:37:27.750 --> 00:37:27.760 align:start position:0% you need to be able to write components 00:37:27.760 --> 00:37:29.270 align:start position:0% you need to be able to write components that<00:37:27.920> compose<00:37:28.360> with<00:37:28.480> each<00:37:28.680> other<00:37:29.000> under<00:37:29.240> a 00:37:29.270 --> 00:37:29.280 align:start position:0% that compose with each other under a 00:37:29.280 --> 00:37:30.470 align:start position:0% that compose with each other under a semantic. 00:37:30.470 --> 00:37:30.480 align:start position:0% semantic. 00:37:30.480 --> 00:37:32.830 align:start position:0% semantic. Like<00:37:31.440> the<00:37:31.640> reason<00:37:32.000> we<00:37:32.120> invented<00:37:32.520> this<00:37:32.640> whole 00:37:32.830 --> 00:37:32.840 align:start position:0% Like the reason we invented this whole 00:37:32.840 --> 00:37:35.150 align:start position:0% Like the reason we invented this whole thing<00:37:33.200> is<00:37:33.360> because<00:37:34.120> we<00:37:34.200> had<00:37:34.320> a<00:37:34.360> product<00:37:35.000> with<00:37:35.120> a 00:37:35.150 --> 00:37:35.160 align:start position:0% thing is because we had a product with a 00:37:35.160 --> 00:37:37.670 align:start position:0% thing is because we had a product with a front<00:37:35.480> end.<00:37:36.160> And<00:37:36.240> we<00:37:36.360> had<00:37:36.600> the<00:37:37.040> it<00:37:37.160> was<00:37:37.320> for<00:37:37.520> a 00:37:37.670 --> 00:37:37.680 align:start position:0% front end. And we had the it was for a 00:37:37.680 --> 00:37:39.670 align:start position:0% front end. And we had the it was for a meal<00:37:37.960> delivery<00:37:38.360> application. 00:37:39.670 --> 00:37:39.680 align:start position:0% meal delivery application. 00:37:39.680 --> 00:37:42.470 align:start position:0% meal delivery application. We<00:37:39.760> needed<00:37:40.000> to<00:37:40.120> rebrand<00:37:41.080> the<00:37:41.560> the 00:37:42.470 --> 00:37:42.480 align:start position:0% We needed to rebrand the the 00:37:42.480 --> 00:37:43.910 align:start position:0% We needed to rebrand the the Uh<00:37:42.800> well<00:37:42.880> actually,<00:37:43.120> this<00:37:43.280> is<00:37:43.480> stuff<00:37:43.720> Misha 00:37:43.910 --> 00:37:43.920 align:start position:0% Uh well actually, this is stuff Misha 00:37:43.920 --> 00:37:45.390 align:start position:0% Uh well actually, this is stuff Misha worked<00:37:44.120> on<00:37:44.200> before<00:37:44.520> I<00:37:44.760> joined.<00:37:44.960> I<00:37:45.200> I<00:37:45.280> just 00:37:45.390 --> 00:37:45.400 align:start position:0% worked on before I joined. I I just 00:37:45.400 --> 00:37:46.630 align:start position:0% worked on before I joined. I I just showed<00:37:45.560> up<00:37:45.680> at<00:37:45.720> the<00:37:45.800> very<00:37:46.000> end<00:37:46.160> and<00:37:46.240> like<00:37:46.480> took 00:37:46.630 --> 00:37:46.640 align:start position:0% showed up at the very end and like took 00:37:46.640 --> 00:37:48.430 align:start position:0% showed up at the very end and like took all<00:37:46.720> the<00:37:46.800> credit.<00:37:47.600> But<00:37:48.120> it<00:37:48.240> was<00:37:48.360> an 00:37:48.430 --> 00:37:48.440 align:start position:0% all the credit. But it was an 00:37:48.440 --> 00:37:50.630 align:start position:0% all the credit. But it was an application<00:37:48.920> it<00:37:49.000> was<00:37:49.120> like<00:37:49.360> a<00:37:50.040> 10<00:37:50.280> billion 00:37:50.630 --> 00:37:50.640 align:start position:0% application it was like a 10 billion 00:37:50.640 --> 00:37:55.150 align:start position:0% application it was like a 10 billion line<00:37:50.880> PHP<00:37:51.360> jQuery<00:37:52.080> shenanigan.<00:37:53.240> And<00:37:54.360> um 00:37:55.150 --> 00:37:55.160 align:start position:0% line PHP jQuery shenanigan. And um 00:37:55.160 --> 00:37:56.750 align:start position:0% line PHP jQuery shenanigan. And um it<00:37:55.440> it<00:37:55.680> it<00:37:55.800> had<00:37:56.000> all<00:37:56.120> the<00:37:56.200> logic<00:37:56.520> in<00:37:56.640> it 00:37:56.750 --> 00:37:56.760 align:start position:0% it it it had all the logic in it 00:37:56.760 --> 00:37:58.470 align:start position:0% it it it had all the logic in it encoded,<00:37:57.520> obviously,<00:37:58.000> but<00:37:58.280> it<00:37:58.360> was 00:37:58.470 --> 00:37:58.480 align:start position:0% encoded, obviously, but it was 00:37:58.480 --> 00:37:59.750 align:start position:0% encoded, obviously, but it was impossible<00:37:58.960> to<00:37:59.040> maintain.<00:37:59.480> And<00:37:59.560> then<00:37:59.680> the 00:37:59.750 --> 00:37:59.760 align:start position:0% impossible to maintain. And then the 00:37:59.760 --> 00:38:01.590 align:start position:0% impossible to maintain. And then the requirement<00:38:00.160> came<00:38:00.320> down,<00:38:00.560> "Hey,<00:38:01.280> take<00:38:01.440> this 00:38:01.590 --> 00:38:01.600 align:start position:0% requirement came down, "Hey, take this 00:38:01.600 --> 00:38:03.230 align:start position:0% requirement came down, "Hey, take this business<00:38:01.960> logic,<00:38:02.400> but<00:38:02.560> let's<00:38:02.760> white<00:38:03.040> white 00:38:03.230 --> 00:38:03.240 align:start position:0% business logic, but let's white white 00:38:03.240 --> 00:38:04.990 align:start position:0% business logic, but let's white white label<00:38:03.520> it.<00:38:04.200> Like<00:38:04.320> instead<00:38:04.560> of<00:38:04.640> this<00:38:04.760> being 00:38:04.990 --> 00:38:05.000 align:start position:0% label it. Like instead of this being 00:38:05.000 --> 00:38:06.550 align:start position:0% label it. Like instead of this being meals<00:38:05.280> for,<00:38:05.560> you<00:38:05.640> know,<00:38:05.760> this<00:38:05.960> demographic, 00:38:06.550 --> 00:38:06.560 align:start position:0% meals for, you know, this demographic, 00:38:06.560 --> 00:38:07.990 align:start position:0% meals for, you know, this demographic, we<00:38:06.680> want<00:38:06.800> to<00:38:06.840> ship<00:38:07.000> meals<00:38:07.200> to<00:38:07.280> these<00:38:07.480> people. 00:38:07.990 --> 00:38:08.000 align:start position:0% we want to ship meals to these people. 00:38:08.000 --> 00:38:09.790 align:start position:0% we want to ship meals to these people. Is<00:38:08.120> that<00:38:08.320> possible?"<00:38:09.320> This<00:38:09.400> came<00:38:09.560> down<00:38:09.720> to 00:38:09.790 --> 00:38:09.800 align:start position:0% Is that possible?" This came down to 00:38:09.800 --> 00:38:10.830 align:start position:0% Is that possible?" This came down to Misha 00:38:10.830 --> 00:38:10.840 align:start position:0% Misha 00:38:10.840 --> 00:38:11.990 align:start position:0% Misha and 00:38:11.990 --> 00:38:12.000 align:start position:0% and 00:38:12.000 --> 00:38:13.110 align:start position:0% and I<00:38:12.080> guess<00:38:12.240> your<00:38:12.320> short<00:38:12.520> answer<00:38:12.720> was<00:38:12.840> no,<00:38:13.000> it's 00:38:13.110 --> 00:38:13.120 align:start position:0% I guess your short answer was no, it's 00:38:13.120 --> 00:38:15.870 align:start position:0% I guess your short answer was no, it's not<00:38:13.280> possible<00:38:14.320> to<00:38:14.440> pull<00:38:14.640> anything<00:38:15.080> reusable 00:38:15.870 --> 00:38:15.880 align:start position:0% not possible to pull anything reusable 00:38:15.880 --> 00:38:18.430 align:start position:0% not possible to pull anything reusable out<00:38:16.000> of<00:38:16.040> this<00:38:16.200> app<00:38:17.040> because<00:38:17.520> the<00:38:17.840> logic<00:38:18.320> and 00:38:18.430 --> 00:38:18.440 align:start position:0% out of this app because the logic and 00:38:18.440 --> 00:38:20.590 align:start position:0% out of this app because the logic and the<00:38:18.480> view<00:38:18.680> are<00:38:18.760> just<00:38:18.920> so<00:38:19.080> deeply<00:38:19.720> intertwined. 00:38:20.590 --> 00:38:20.600 align:start position:0% the view are just so deeply intertwined. 00:38:20.600 --> 00:38:22.030 align:start position:0% the view are just so deeply intertwined. Yeah,<00:38:20.680> and<00:38:20.760> I<00:38:20.800> think<00:38:21.000> to<00:38:21.080> point<00:38:21.360> out<00:38:21.560> also<00:38:21.880> is 00:38:22.030 --> 00:38:22.040 align:start position:0% Yeah, and I think to point out also is 00:38:22.040 --> 00:38:25.630 align:start position:0% Yeah, and I think to point out also is that<00:38:22.840> so<00:38:23.840> about<00:38:24.280> the<00:38:24.360> dirty<00:38:24.600> checking 00:38:25.630 --> 00:38:25.640 align:start position:0% that so about the dirty checking 00:38:25.640 --> 00:38:27.230 align:start position:0% that so about the dirty checking the<00:38:25.680> way<00:38:25.840> Javelin<00:38:26.280> works<00:38:26.560> is<00:38:26.760> you<00:38:26.840> can<00:38:26.960> imagine 00:38:27.230 --> 00:38:27.240 align:start position:0% the way Javelin works is you can imagine 00:38:27.240 --> 00:38:29.670 align:start position:0% the way Javelin works is you can imagine a<00:38:27.280> graph<00:38:27.600> of<00:38:27.720> cells,<00:38:28.520> you<00:38:28.640> know,<00:38:28.800> that<00:38:28.960> are 00:38:29.670 --> 00:38:29.680 align:start position:0% a graph of cells, you know, that are 00:38:29.680 --> 00:38:30.990 align:start position:0% a graph of cells, you know, that are kind<00:38:29.800> of<00:38:29.880> organized<00:38:30.240> by<00:38:30.360> the<00:38:30.480> relationships 00:38:30.990 --> 00:38:31.000 align:start position:0% kind of organized by the relationships 00:38:31.000 --> 00:38:32.110 align:start position:0% kind of organized by the relationships to<00:38:31.040> each<00:38:31.200> other.<00:38:31.360> In<00:38:31.400> other<00:38:31.600> words,<00:38:31.720> a<00:38:31.760> formula 00:38:32.110 --> 00:38:32.120 align:start position:0% to each other. In other words, a formula 00:38:32.120 --> 00:38:33.790 align:start position:0% to each other. In other words, a formula cell<00:38:32.280> might<00:38:32.440> depend<00:38:33.040> it<00:38:33.160> might<00:38:33.280> refer<00:38:33.640> to 00:38:33.790 --> 00:38:33.800 align:start position:0% cell might depend it might refer to 00:38:33.800 --> 00:38:35.950 align:start position:0% cell might depend it might refer to other<00:38:34.000> cells.<00:38:34.760> So,<00:38:34.840> that<00:38:35.000> forms<00:38:35.240> a<00:38:35.280> graph,<00:38:35.840> but 00:38:35.950 --> 00:38:35.960 align:start position:0% other cells. So, that forms a graph, but 00:38:35.960 --> 00:38:39.430 align:start position:0% other cells. So, that forms a graph, but it's<00:38:36.080> this<00:38:36.640> this<00:38:36.800> directed<00:38:37.160> graph<00:38:37.560> and 00:38:39.430 --> 00:38:39.440 align:start position:0% it's this this directed graph and 00:38:39.440 --> 00:38:42.430 align:start position:0% it's this this directed graph and no<00:38:39.920> no<00:38:40.200> cell<00:38:40.640> will<00:38:41.160> will<00:38:41.440> trigger<00:38:41.760> any<00:38:41.920> updates 00:38:42.430 --> 00:38:42.440 align:start position:0% no no cell will will trigger any updates 00:38:42.440 --> 00:38:44.470 align:start position:0% no no cell will will trigger any updates if<00:38:42.560> its<00:38:42.680> value<00:38:42.920> doesn't<00:38:43.160> change.<00:38:43.960> So,<00:38:44.120> there's 00:38:44.470 --> 00:38:44.480 align:start position:0% if its value doesn't change. So, there's 00:38:44.480 --> 00:38:45.950 align:start position:0% if its value doesn't change. So, there's like<00:38:44.680> very<00:38:44.880> aggressive<00:38:45.320> pruning<00:38:45.640> that<00:38:45.760> goes 00:38:45.950 --> 00:38:45.960 align:start position:0% like very aggressive pruning that goes 00:38:45.960 --> 00:38:48.710 align:start position:0% like very aggressive pruning that goes on<00:38:46.120> just<00:38:46.280> naturally.<00:38:47.160> In<00:38:47.280> other<00:38:47.440> words,<00:38:47.920> if<00:38:48.400> if 00:38:48.710 --> 00:38:48.720 align:start position:0% on just naturally. In other words, if if 00:38:48.720 --> 00:38:50.630 align:start position:0% on just naturally. In other words, if if an<00:38:48.920> input<00:38:49.200> cell<00:38:49.360> changes<00:38:49.920> it<00:38:49.960> might<00:38:50.120> cause<00:38:50.440> one 00:38:50.630 --> 00:38:50.640 align:start position:0% an input cell changes it might cause one 00:38:50.640 --> 00:38:53.430 align:start position:0% an input cell changes it might cause one formula<00:38:51.040> cell<00:38:51.160> to<00:38:51.280> change,<00:38:52.120> but<00:38:52.640> if<00:38:53.080> that's 00:38:53.430 --> 00:38:53.440 align:start position:0% formula cell to change, but if that's 00:38:53.440 --> 00:38:55.190 align:start position:0% formula cell to change, but if that's where<00:38:53.600> it<00:38:53.720> ends<00:38:53.960> then<00:38:54.080> that's<00:38:54.320> where<00:38:54.440> it<00:38:54.560> ends. 00:38:55.190 --> 00:38:55.200 align:start position:0% where it ends then that's where it ends. 00:38:55.200 --> 00:38:56.670 align:start position:0% where it ends then that's where it ends. So,<00:38:55.360> if<00:38:55.480> you<00:38:55.600> have<00:38:55.840> a<00:38:55.880> lot<00:38:56.040> of<00:38:56.120> DOM<00:38:56.360> elements 00:38:56.670 --> 00:38:56.680 align:start position:0% So, if you have a lot of DOM elements 00:38:56.680 --> 00:38:57.790 align:start position:0% So, if you have a lot of DOM elements that<00:38:56.800> are<00:38:56.880> looking<00:38:57.200> at<00:38:57.320> all<00:38:57.480> these<00:38:57.640> other 00:38:57.790 --> 00:38:57.800 align:start position:0% that are looking at all these other 00:38:57.800 --> 00:38:59.230 align:start position:0% that are looking at all these other formula<00:38:58.160> cells 00:38:59.230 --> 00:38:59.240 align:start position:0% formula cells 00:38:59.240 --> 00:39:01.030 align:start position:0% formula cells nothing<00:38:59.560> happens<00:39:00.000> because<00:39:00.480> no<00:39:00.640> values 00:39:01.030 --> 00:39:01.040 align:start position:0% nothing happens because no values 00:39:01.040 --> 00:39:02.750 align:start position:0% nothing happens because no values changed.<00:39:01.760> However,<00:39:02.040> if<00:39:02.200> the<00:39:02.280> values<00:39:02.600> did 00:39:02.750 --> 00:39:02.760 align:start position:0% changed. However, if the values did 00:39:02.760 --> 00:39:04.590 align:start position:0% changed. However, if the values did change,<00:39:03.440> then<00:39:03.560> you<00:39:03.640> definitely<00:39:04.080> need<00:39:04.240> to 00:39:04.590 --> 00:39:04.600 align:start position:0% change, then you definitely need to 00:39:04.600 --> 00:39:06.670 align:start position:0% change, then you definitely need to update<00:39:04.960> those<00:39:05.120> DOM<00:39:05.360> elements<00:39:05.720> anyway,<00:39:06.560> no 00:39:06.670 --> 00:39:06.680 align:start position:0% update those DOM elements anyway, no 00:39:06.680 --> 00:39:08.870 align:start position:0% update those DOM elements anyway, no matter<00:39:06.920> what<00:39:07.520> because<00:39:07.840> they're<00:39:08.040> no<00:39:08.360> longer, 00:39:08.870 --> 00:39:08.880 align:start position:0% matter what because they're no longer, 00:39:08.880 --> 00:39:10.470 align:start position:0% matter what because they're no longer, you<00:39:09.000> know, 00:39:10.470 --> 00:39:10.480 align:start position:0% you know, 00:39:10.480 --> 00:39:13.070 align:start position:0% you know, consistent.<00:39:11.280> So, 00:39:13.070 --> 00:39:13.080 align:start position:0% consistent. So, 00:39:13.080 --> 00:39:14.470 align:start position:0% consistent. So, I<00:39:13.120> think 00:39:14.470 --> 00:39:14.480 align:start position:0% I think 00:39:14.480 --> 00:39:16.430 align:start position:0% I think another<00:39:14.880> thing<00:39:15.040> to<00:39:15.160> look<00:39:15.400> at 00:39:16.430 --> 00:39:16.440 align:start position:0% another thing to look at 00:39:16.440 --> 00:39:18.950 align:start position:0% another thing to look at comparing<00:39:17.160> these<00:39:17.320> two<00:39:17.480> approaches<00:39:18.400> is<00:39:18.720> like<00:39:18.920> I 00:39:18.950 --> 00:39:18.960 align:start position:0% comparing these two approaches is like I 00:39:18.960 --> 00:39:21.430 align:start position:0% comparing these two approaches is like I look<00:39:19.160> at<00:39:19.240> the<00:39:19.320> DOM<00:39:19.680> as<00:39:20.000> this<00:39:20.240> input<00:39:20.520> output 00:39:21.430 --> 00:39:21.440 align:start position:0% look at the DOM as this input output 00:39:21.440 --> 00:39:22.670 align:start position:0% look at the DOM as this input output device. 00:39:22.670 --> 00:39:22.680 align:start position:0% device. 00:39:22.680 --> 00:39:25.350 align:start position:0% device. And<00:39:23.040> React<00:39:23.440> seems<00:39:23.680> more<00:39:23.880> to<00:39:24.000> me<00:39:24.280> like<00:39:24.800> a<00:39:24.880> buffer 00:39:25.350 --> 00:39:25.360 align:start position:0% And React seems more to me like a buffer 00:39:25.360 --> 00:39:27.270 align:start position:0% And React seems more to me like a buffer kind<00:39:25.560> of<00:39:25.640> like<00:39:25.840> Emacs.<00:39:26.680> You<00:39:26.800> can<00:39:26.920> type<00:39:27.080> around 00:39:27.270 --> 00:39:27.280 align:start position:0% kind of like Emacs. You can type around 00:39:27.280 --> 00:39:29.910 align:start position:0% kind of like Emacs. You can type around in<00:39:27.360> Emacs<00:39:27.960> and<00:39:28.680> Emacs<00:39:29.040> has,<00:39:29.320> I'm<00:39:29.480> sure,<00:39:29.800> all 00:39:29.910 --> 00:39:29.920 align:start position:0% in Emacs and Emacs has, I'm sure, all 00:39:29.920 --> 00:39:31.270 align:start position:0% in Emacs and Emacs has, I'm sure, all kinds<00:39:30.120> of<00:39:30.240> clever<00:39:30.480> tricks<00:39:30.840> to<00:39:30.960> avoid 00:39:31.270 --> 00:39:31.280 align:start position:0% kinds of clever tricks to avoid 00:39:31.280 --> 00:39:32.550 align:start position:0% kinds of clever tricks to avoid repainting<00:39:31.680> the<00:39:31.800> entire<00:39:32.120> thing<00:39:32.360> when<00:39:32.480> you 00:39:32.550 --> 00:39:32.560 align:start position:0% repainting the entire thing when you 00:39:32.560 --> 00:39:33.670 align:start position:0% repainting the entire thing when you type, 00:39:33.670 --> 00:39:33.680 align:start position:0% type, 00:39:33.680 --> 00:39:35.830 align:start position:0% type, but<00:39:33.720> it's<00:39:33.840> still<00:39:34.560> the<00:39:34.680> abstraction<00:39:35.240> is<00:39:35.400> still 00:39:35.830 --> 00:39:35.840 align:start position:0% but it's still the abstraction is still 00:39:35.840 --> 00:39:38.590 align:start position:0% but it's still the abstraction is still a<00:39:35.920> buffer,<00:39:37.000> you<00:39:37.080> know,<00:39:37.240> that's<00:39:37.920> a<00:39:37.960> sequential 00:39:38.590 --> 00:39:38.600 align:start position:0% a buffer, you know, that's a sequential 00:39:38.600 --> 00:39:39.590 align:start position:0% a buffer, you know, that's a sequential thing. 00:39:39.590 --> 00:39:39.600 align:start position:0% thing. 00:39:39.600 --> 00:39:41.230 align:start position:0% thing. The<00:39:39.640> DOM<00:39:39.960> is<00:39:40.080> a<00:39:40.120> little<00:39:40.360> bit<00:39:40.480> richer<00:39:40.760> than<00:39:40.880> that 00:39:41.230 --> 00:39:41.240 align:start position:0% The DOM is a little bit richer than that 00:39:41.240 --> 00:39:42.950 align:start position:0% The DOM is a little bit richer than that in<00:39:41.400> that<00:39:41.680> it<00:39:41.800> gives<00:39:42.000> you<00:39:42.400> kind<00:39:42.560> of<00:39:42.640> more<00:39:42.760> like<00:39:42.920> a 00:39:42.950 --> 00:39:42.960 align:start position:0% in that it gives you kind of more like a 00:39:42.960 --> 00:39:45.110 align:start position:0% in that it gives you kind of more like a file<00:39:43.320> system<00:39:43.920> of<00:39:44.080> buffers.<00:39:44.880> You<00:39:44.960> know,<00:39:45.040> you 00:39:45.110 --> 00:39:45.120 align:start position:0% file system of buffers. You know, you 00:39:45.120 --> 00:39:46.750 align:start position:0% file system of buffers. You know, you have<00:39:45.240> this<00:39:45.400> tree<00:39:46.040> of<00:39:46.160> buffers<00:39:46.480> that<00:39:46.560> you<00:39:46.640> can 00:39:46.750 --> 00:39:46.760 align:start position:0% have this tree of buffers that you can 00:39:46.760 --> 00:39:47.710 align:start position:0% have this tree of buffers that you can kind<00:39:46.920> of<00:39:47.000> read<00:39:47.160> from<00:39:47.320> and<00:39:47.440> write<00:39:47.600> to 00:39:47.710 --> 00:39:47.720 align:start position:0% kind of read from and write to 00:39:47.720 --> 00:39:50.510 align:start position:0% kind of read from and write to individually,<00:39:48.720> right?<00:39:49.280> And<00:39:49.400> so,<00:39:49.560> now<00:39:49.840> you<00:39:50.320> can 00:39:50.510 --> 00:39:50.520 align:start position:0% individually, right? And so, now you can 00:39:50.520 --> 00:39:52.190 align:start position:0% individually, right? And so, now you can you<00:39:50.640> can<00:39:50.760> be<00:39:50.880> treating<00:39:51.240> each<00:39:51.640> each<00:39:51.920> DOM 00:39:52.190 --> 00:39:52.200 align:start position:0% you can be treating each each DOM 00:39:52.200 --> 00:39:54.910 align:start position:0% you can be treating each each DOM element<00:39:53.160> as<00:39:53.360> a<00:39:53.400> buffer<00:39:54.240> and<00:39:54.400> doing<00:39:54.600> things<00:39:54.800> to 00:39:54.910 --> 00:39:54.920 align:start position:0% element as a buffer and doing things to 00:39:54.920 --> 00:39:57.110 align:start position:0% element as a buffer and doing things to them<00:39:55.040> individually.<00:39:56.040> And<00:39:56.160> once<00:39:56.320> you<00:39:56.440> have<00:39:56.960> if 00:39:57.110 --> 00:39:57.120 align:start position:0% them individually. And once you have if 00:39:57.120 --> 00:39:59.390 align:start position:0% them individually. And once you have if you're<00:39:57.240> working<00:39:57.680> with<00:39:58.000> the<00:39:58.600> the<00:39:58.680> DOM<00:39:59.000> element 00:39:59.390 --> 00:39:59.400 align:start position:0% you're working with the the DOM element 00:39:59.400 --> 00:40:01.790 align:start position:0% you're working with the the DOM element itself,<00:40:00.320> right?<00:40:00.760> And<00:40:00.880> like<00:40:01.080> everything 00:40:01.790 --> 00:40:01.800 align:start position:0% itself, right? And like everything 00:40:01.800 --> 00:40:03.590 align:start position:0% itself, right? And like everything involving<00:40:02.240> IO<00:40:02.480> is<00:40:02.640> stateful.<00:40:03.320> When<00:40:03.440> you<00:40:03.480> have 00:40:03.590 --> 00:40:03.600 align:start position:0% involving IO is stateful. When you have 00:40:03.600 --> 00:40:05.350 align:start position:0% involving IO is stateful. When you have a<00:40:03.640> file<00:40:03.920> handle,<00:40:04.160> that's<00:40:04.360> a<00:40:04.400> stateful<00:40:04.840> thing 00:40:05.350 --> 00:40:05.360 align:start position:0% a file handle, that's a stateful thing 00:40:05.360 --> 00:40:06.470 align:start position:0% a file handle, that's a stateful thing because<00:40:05.640> you<00:40:05.720> might<00:40:05.920> write<00:40:06.120> to<00:40:06.240> it<00:40:06.320> and<00:40:06.400> it 00:40:06.470 --> 00:40:06.480 align:start position:0% because you might write to it and it 00:40:06.480 --> 00:40:07.910 align:start position:0% because you might write to it and it needs<00:40:06.640> to<00:40:06.720> keep<00:40:06.880> track<00:40:07.160> of<00:40:07.240> its<00:40:07.400> buffers.<00:40:07.800> It 00:40:07.910 --> 00:40:07.920 align:start position:0% needs to keep track of its buffers. It 00:40:07.920 --> 00:40:09.230 align:start position:0% needs to keep track of its buffers. It needs<00:40:08.080> to<00:40:08.160> keep<00:40:08.320> track<00:40:08.640> of,<00:40:09.040> you<00:40:09.120> know, 00:40:09.230 --> 00:40:09.240 align:start position:0% needs to keep track of, you know, 00:40:09.240 --> 00:40:10.590 align:start position:0% needs to keep track of, you know, whether<00:40:09.480> things<00:40:09.680> are<00:40:09.760> flushed<00:40:10.080> to<00:40:10.200> disk<00:40:10.520> or 00:40:10.590 --> 00:40:10.600 align:start position:0% whether things are flushed to disk or 00:40:10.600 --> 00:40:11.750 align:start position:0% whether things are flushed to disk or whether<00:40:10.760> you<00:40:10.840> could<00:40:11.000> read<00:40:11.160> from<00:40:11.360> it<00:40:11.480> or<00:40:11.560> write 00:40:11.750 --> 00:40:11.760 align:start position:0% whether you could read from it or write 00:40:11.760 --> 00:40:14.750 align:start position:0% whether you could read from it or write to<00:40:11.880> it<00:40:12.000> or<00:40:12.080> what.<00:40:12.920> So, 00:40:14.750 --> 00:40:14.760 align:start position:0% to it or what. So, 00:40:14.760 --> 00:40:16.790 align:start position:0% to it or what. So, DOM<00:40:15.040> elements<00:40:15.400> actually<00:40:15.800> act<00:40:16.120> the<00:40:16.200> same<00:40:16.560> kind 00:40:16.790 --> 00:40:16.800 align:start position:0% DOM elements actually act the same kind 00:40:16.800 --> 00:40:18.750 align:start position:0% DOM elements actually act the same kind of<00:40:16.920> way<00:40:17.200> and<00:40:17.360> so<00:40:17.800> you<00:40:17.960> can<00:40:18.120> do<00:40:18.320> like<00:40:18.480> in<00:40:18.600> that 00:40:18.750 --> 00:40:18.760 align:start position:0% of way and so you can do like in that 00:40:18.760 --> 00:40:21.110 align:start position:0% of way and so you can do like in that tab<00:40:19.040> example<00:40:20.040> where<00:40:20.160> you<00:40:20.240> can<00:40:20.440> pass<00:40:20.840> DOM 00:40:21.110 --> 00:40:21.120 align:start position:0% tab example where you can pass DOM 00:40:21.120 --> 00:40:22.830 align:start position:0% tab example where you can pass DOM elements<00:40:21.800> to<00:40:21.920> a<00:40:21.960> function<00:40:22.320> that<00:40:22.440> doesn't<00:40:22.680> know 00:40:22.830 --> 00:40:22.840 align:start position:0% elements to a function that doesn't know 00:40:22.840 --> 00:40:24.430 align:start position:0% elements to a function that doesn't know what<00:40:23.040> they<00:40:23.240> are<00:40:23.400> at<00:40:23.520> all. 00:40:24.430 --> 00:40:24.440 align:start position:0% what they are at all. 00:40:24.440 --> 00:40:26.070 align:start position:0% what they are at all. And<00:40:24.560> they<00:40:24.680> just<00:40:24.840> apply<00:40:25.120> magic<00:40:25.520> to<00:40:25.600> them,<00:40:25.920> and 00:40:26.070 --> 00:40:26.080 align:start position:0% And they just apply magic to them, and 00:40:26.080 --> 00:40:28.030 align:start position:0% And they just apply magic to them, and then<00:40:26.280> these<00:40:26.640> DOM<00:40:26.920> elements<00:40:27.240> remember<00:40:27.960> the 00:40:28.030 --> 00:40:28.040 align:start position:0% then these DOM elements remember the 00:40:28.040 --> 00:40:29.790 align:start position:0% then these DOM elements remember the magic.<00:40:28.560> In<00:40:28.680> other<00:40:28.800> words,<00:40:29.320> attaching<00:40:29.720> an 00:40:29.790 --> 00:40:29.800 align:start position:0% magic. In other words, attaching an 00:40:29.800 --> 00:40:31.790 align:start position:0% magic. In other words, attaching an event<00:40:30.040> handler<00:40:30.320> to<00:40:30.440> something<00:40:30.800> is<00:40:30.920> a<00:40:30.960> mutation 00:40:31.790 --> 00:40:31.800 align:start position:0% event handler to something is a mutation 00:40:31.800 --> 00:40:33.550 align:start position:0% event handler to something is a mutation cuz<00:40:31.960> it<00:40:32.080> has<00:40:32.280> to<00:40:32.400> keep<00:40:32.640> track<00:40:33.280> of<00:40:33.400> what<00:40:33.520> it 00:40:33.550 --> 00:40:33.560 align:start position:0% cuz it has to keep track of what it 00:40:33.560 --> 00:40:35.150 align:start position:0% cuz it has to keep track of what it needs<00:40:33.720> to<00:40:33.800> notify. 00:40:35.150 --> 00:40:35.160 align:start position:0% needs to notify. 00:40:35.160 --> 00:40:37.030 align:start position:0% needs to notify. So,<00:40:35.400> that's<00:40:35.600> a<00:40:35.640> very<00:40:35.840> powerful<00:40:36.280> thing<00:40:36.880> when 00:40:37.030 --> 00:40:37.040 align:start position:0% So, that's a very powerful thing when 00:40:37.040 --> 00:40:38.350 align:start position:0% So, that's a very powerful thing when you're<00:40:37.120> working<00:40:37.400> with<00:40:37.480> the<00:40:37.640> actual<00:40:38.080> DOM 00:40:38.350 --> 00:40:38.360 align:start position:0% you're working with the actual DOM 00:40:38.360 --> 00:40:39.750 align:start position:0% you're working with the actual DOM elements<00:40:38.720> because<00:40:39.080> you<00:40:39.160> pass<00:40:39.400> them<00:40:39.520> to<00:40:39.600> this 00:40:39.750 --> 00:40:39.760 align:start position:0% elements because you pass them to this 00:40:39.760 --> 00:40:41.510 align:start position:0% elements because you pass them to this one<00:40:39.960> function<00:40:40.360> that<00:40:40.800> just<00:40:41.000> arranges<00:40:41.360> some 00:40:41.510 --> 00:40:41.520 align:start position:0% one function that just arranges some 00:40:41.520 --> 00:40:42.830 align:start position:0% one function that just arranges some relationship<00:40:42.040> between<00:40:42.320> them<00:40:42.480> and<00:40:42.560> passes 00:40:42.830 --> 00:40:42.840 align:start position:0% relationship between them and passes 00:40:42.840 --> 00:40:44.190 align:start position:0% relationship between them and passes them<00:40:42.960> back.<00:40:43.440> You<00:40:43.520> pass<00:40:43.720> them<00:40:43.840> to<00:40:43.920> something 00:40:44.190 --> 00:40:44.200 align:start position:0% them back. You pass them to something 00:40:44.200 --> 00:40:46.430 align:start position:0% them back. You pass them to something else.<00:40:45.000> You<00:40:45.080> might<00:40:45.240> be<00:40:45.360> mixing<00:40:45.760> elements 00:40:46.430 --> 00:40:46.440 align:start position:0% else. You might be mixing elements 00:40:46.440 --> 00:40:48.670 align:start position:0% else. You might be mixing elements around,<00:40:46.880> and<00:40:46.960> then<00:40:47.080> you<00:40:47.160> compose<00:40:47.520> them<00:40:47.640> later. 00:40:48.670 --> 00:40:48.680 align:start position:0% around, and then you compose them later. 00:40:48.680 --> 00:40:50.070 align:start position:0% around, and then you compose them later. So,<00:40:48.840> you're<00:40:48.960> not,<00:40:49.480> you<00:40:49.560> know,<00:40:49.720> you're<00:40:49.840> not 00:40:50.070 --> 00:40:50.080 align:start position:0% So, you're not, you know, you're not 00:40:50.080 --> 00:40:52.470 align:start position:0% So, you're not, you know, you're not bound<00:40:50.400> to<00:40:50.480> any<00:40:50.640> particular<00:40:51.520> composition<00:40:52.400> of 00:40:52.470 --> 00:40:52.480 align:start position:0% bound to any particular composition of 00:40:52.480 --> 00:40:53.070 align:start position:0% bound to any particular composition of them. 00:40:53.070 --> 00:40:53.080 align:start position:0% them. 00:40:53.080 --> 00:40:56.670 align:start position:0% them. I<00:40:53.120> think<00:40:53.320> actually<00:40:53.640> we're<00:40:53.760> out<00:40:53.880> of<00:40:53.960> time.<00:40:54.960> Um 00:40:56.670 --> 00:40:56.680 align:start position:0% I think actually we're out of time. Um 00:40:56.680 --> 00:40:57.790 align:start position:0% I think actually we're out of time. Um I<00:40:56.760> think<00:40:56.920> we<00:40:57.000> should<00:40:57.160> leave<00:40:57.360> you<00:40:57.480> with<00:40:57.640> what 00:40:57.790 --> 00:40:57.800 align:start position:0% I think we should leave you with what 00:40:57.800 --> 00:40:59.030 align:start position:0% I think we should leave you with what Misha<00:40:58.000> just<00:40:58.200> said,<00:40:58.360> which<00:40:58.480> was<00:40:58.600> remember<00:40:58.960> the 00:40:59.030 --> 00:40:59.040 align:start position:0% Misha just said, which was remember the 00:40:59.040 --> 00:41:00.870 align:start position:0% Misha just said, which was remember the magic.<00:40:59.600> That<00:40:59.720> sounds<00:40:59.960> cool. 00:41:00.870 --> 00:41:00.880 align:start position:0% magic. That sounds cool. 00:41:00.880 --> 00:41:03.110 align:start position:0% magic. That sounds cool. Um<00:41:01.600> but<00:41:01.800> we'll<00:41:01.920> be<00:41:02.000> around<00:41:02.480> if<00:41:02.920> you<00:41:03.000> have 00:41:03.110 --> 00:41:03.120 align:start position:0% Um but we'll be around if you have 00:41:03.120 --> 00:41:05.430 align:start position:0% Um but we'll be around if you have questions,<00:41:03.680> want<00:41:03.840> to<00:41:03.920> chat.<00:41:04.360> Uh<00:41:04.440> hoplon.io<00:41:05.320> is 00:41:05.430 --> 00:41:05.440 align:start position:0% questions, want to chat. Uh hoplon.io is 00:41:05.440 --> 00:41:07.110 align:start position:0% questions, want to chat. Uh hoplon.io is the<00:41:05.520> place<00:41:05.760> to<00:41:05.840> go<00:41:05.960> and<00:41:06.080> learn. 00:41:07.110 --> 00:41:07.120 align:start position:0% the place to go and learn. 00:41:07.120 --> 00:41:08.350 align:start position:0% the place to go and learn. Um<00:41:07.280> thank<00:41:07.440> you<00:41:07.520> so<00:41:07.640> much<00:41:07.800> for<00:41:07.920> your<00:41:08.000> time,<00:41:08.280> and 00:41:08.350 --> 00:41:08.360 align:start position:0% Um thank you so much for your time, and 00:41:08.360 --> 00:41:11.600 align:start position:0% Um thank you so much for your time, and thank<00:41:08.520> you<00:41:08.640> Alex<00:41:08.920> and<00:41:09.000> everybody<00:41:09.280> else.