Introducing Reactivity

[00:00:00]
>> Evan You: So there's a lot of misunderstandings or confusions about the term reactivity actually means in a programming context. To some people it might just mean rx. Reactive programming is like streams and stuff, but in our context this really just means that when you change the state and how the state reflects in the update of the entire system.

[00:00:20]
In our particular context, how changing state reflects into changes in the dom. How does Vue track changes? So let's first think about a variable, JavaScript variable, that's just a = 3. And then we have another variable b which is 10 times of a. So this is a requirement, so imagine you're the developer and your manager tells you hey we need to build a program.

[00:00:47]
The requirement is the variable b should always be 10 times the value of a. Okay so how would you implement that? So this is a very naive imperative solution right? The problem is later on when you change a, b doesn't update because it's procedural. It doesn't keep the relationship in sync.

[00:01:06]
So how can we keep them in sync, right? So the idea is, instead of having to manually update b every time you change a we want that relationship to be declarative. So we realize what your manager actually wants you to build is a spreadsheet, right? They want you to build Excel.

[00:01:26]
We have two cells. The B cell should always be ten times of A. And in Excel we have this thing called functions that allows you to declare the relationship between two cells. So cell B should always be 10 times the value of cell A. And how do we express that in programming terms?

[00:01:42]
So what if we can have the a magic function called onAChanged? That just takes an internal function and will re-execute this function whenever A changes. Then our problem is solved. The problem is, how do implement that function? But before we dive into that, let's translate the problem into something that's closer to web development.

[00:02:08]
Let's say we have this actually span cell and we want to make sure the a cell. So we have the b1 cell, we also have the a1 cell. We want to make sure the b1 cell is always kept in sync per the requirements of the spreadsheet. So this is imperative way of doing it, right?

[00:02:25]
We can just use the DOM API, select it, set the text content. And if we wrap this thing inside our magic onaChanged or onStateChanged function Suddenly it becomes declarative, right? We've declared that the relationship between our state.a and the DOM staging of the cell b1. And if we abstract further away, abstract away this imperative DOM into a templating language We have essentially created a view library, all right?

[00:03:02]
So this internal representation, view = render(state) is the very high level abstraction of how all the view rendering systems work. If we look at that the bigger question. So we'll not really bother with the details in here because it involves detailed DOM, DOM implementations, virtual DOM implementations and all that.

[00:03:28]
We're not going to look into that. What we're more interested about is how do we implement this outer function and this is how it might be implemented, all right. So it simply saves the update function somewhere and then, instead of allowing users to arbitrarily manipulate the state, we require them to always call a function to manipulate the state.

[00:03:53]
And that function is called a set state. Set state simply takes the new state, and replaces the old state, and then calls update function again. Right and if you've used React you will find this extremely familiar because React forces you to trigger on state changes of your setState.

[00:04:12]
And this is essentially what React is all about. Not all about but this is in a nutshell how React works, right? So we've noticed something different in the view context or in the angular context that we can, in fact, directly manipulate the state without having to call set state.

[00:04:32]
So how does that work? Well, in angulars, things are a bit different because angular uses dirty checking, and it's sort of intercepts your events, like clicks to perform a digest cycle. Then it sort of checks all the things, whether it has changed. In views contacts we do it a bit more granularly in the sense that we actually convert your state objects to become reactive.

[00:04:59]
By using the ES5 object.defineProperty API, we convert all these properties into getters and setters. So in the case of state.a, we actually convert a into a getter and a setter. And in those scenarios, we'll be able to do interesting things. So if we renamed onStateChanged function to something like auto run.

[00:05:23]
This is essentially a basic form of dependency tracking that's commonly shared in Knockout.js, Meteor Tracker, and Vue.js and MobX. MobX is a state management pattern for React.