Introducing the "Animations Allowed" Problem

[00:00:00]
>> Jafar Husain: Now, we're gonna go into a harder problem, and this is actually a real problem we had at Netflix. We run JavaScript on very low end devices, sometimes the embedded devices that run inside of your television. Now, this particular problem might not be applicable to your day-to-day life, but the problem solving techniques required to solve it almost certainly will be.

[00:00:19]
One of the challenges we had was that animations. We needed to turn them off on very low end devices. When there was a lot going on inside of the platforms. When we were performing a lot of tasks inside of the platform, i.e., the native C plus plus parts sort of like the equivalent of the browser.

[00:00:34]
You would wanna turn off animations to make sure those animations didn't look jagged. So instead of smoothly animating things from place to place you're trying to, we would just pop them from place to place without an animation. So let's see if we can visualize how we would solve this problem.

[00:00:54]
>> Jafar Husain: So for those who saw my previous class you know that I like to visualize observables using this syntax X.
>> Jafar Husain: This syntax, of course, doesn't really exist in JavaScript. But it's just a nice syntax I like to use to help us to visualize Observables. And that can be a really useful technique when you guys are solving problems, to visualize what the stream looks like.

[00:01:25]
So what's a way of visualizing what happens inside of a platform when it's performing tasks? At any time, the platform, basically like our equivalent of the browser could start doing some work. We don't have insight into what specific work it's doing, but it's just going to tell us somehow with some sort of event that it's begun doing some work.

[00:01:45]
And that work can last for a certain period of time, and then that work is gonna end. And so, our goal is we wanna make sure that it's only when the platform isn't doing anything at all that we're gonna flip animations on. So first I'm gonna model what I'm calling a tasks observable.

[00:02:06]
>> Jafar Husain: And this is basically what represents what's going on inside the platform when I get a moment.
>> Jafar Husain: Now, the data in here doesn't really mean very much to us. It's just random output from the platform. Not random but unimportant.
>> Jafar Husain: So I've written this as a two dimensional observable, this is how I visualize two dimensional observables.

[00:02:44]
So why is this two dimensional? Anybody wanna guess?
>> Speaker 2: You have an observable within the other observable?
>> Jafar Husain: Yeah, it's an observable. A two-dimensional observable is an observable that are next to other observables. And so, why would be visualize the tasks and the platform this way? Well, it's because the platform might be performing two tasks at the same time, right?

[00:03:10]
No reason it couldn't be concurrently running things, right? It might be threaded or it might be asynchronous, but the point is, it can do two things at the same time. So a very natural way of understanding the work happening in the platform is to think of it as a two-dimensional observable, right?

[00:03:23]
So I get an observable that means a new task has begun, then I subscribe to that observable, which is a hot observable, incidentally, right? I'm not kicking it off, the platform has told me that the work has begun, and so I subscribe to it. And when that observable completes, I know that at least that one task has now completed in the platform.

[00:03:41]
But while I was listening to that other inner observable, so you've got an outer observable, which is right here, and we've got an inner-observable which represents each individual task. The outer-observable is all of the tasks from now, until eternity that the platform is going to be creating. It's an infinite observable, and then the inner-observable is one particular task.

[00:04:01]
And the data inside is just data coming out of the platform. We don't particularly care about it. We just know that, hey, there's some work going on there. Does that make sense? So my job is to create animations allowed. Animations allowed is a simple stream that switches to false as soon as a task starts, and switches to true as soon as no tasks are running.

[00:04:35]
>> Jafar Husain: Does that make sense? Right? So this is a real problem we had to solve in Netflix. And for a while it took us a long time, so you shouldn't expect that you're gonna just [SOUND] fix and be able to solve this problem. I like it cuz it's a really hard one, and we can start to think and learn about how we can solve seemingly hard problems by just composing operations together.