Introduction to Vue.js Reactive Programming

[00:00:00]
>> Sarah Drasner: Let's go to watchers. We haven't really dug into the Vue instance yet. And we haven't really talked about reactivity yet. And part of the reason why I waited until now is because it really connects nicely to understanding what watchers do and their relationship to how we use them.

[00:00:17] So when we talk about reactivity and what reactive programming is, what do we mean? What is reactive? A lot of times people are like, well it's RxJS and you're not wrong, RxJS is reactive programming. But reactive programming is actually a bigger umbrella and RxJS is a library that is reactive that is under that larger umbrella.

[00:00:40] So you could have things that are reactive, that are not RXJS. So what is reactive? Reactive programing is programming with asynchronous data streams, what? Okay, [LAUGH] a stream is a sequence of on going events ordered in time that offer some hooks with which to observe it. I think a common example that people use is something like, a really minute one that we all now, is something like a Hoverstate, if you highlight a transition on a Hoverstate.

[00:01:10] You have the moment that you have hovered on it, you have the stream that occurs while it's transitioning and then you have its end state. So, those hooks are like when you first start observing it, points in between and then when you're done observing it. These are, of course, really, really generalized and simplified ways of describing this concept.

[00:01:34] But I'm not going to dive too far into reactivity, I just need you to kind of understand the basis of it before we keep going. So when we use reactive premises for building applications, it means it's very easy to update state in reaction to events that occur. And really that's what we're using Vue for, right?

[00:01:54] We're not using Vue for building out the HTML and CSS so much, we are. But really the parts where you and that Vue instance come in handy are the points where we're changing things, and we're interacting with things, and we're updating things. So Andre Staltz has a great post about it.

[00:02:14] It's very, very long but it's very, very good. And so if you wanna read more about reactive programming, you can do more of a deep dive there. It's written in English [LAUGH] and is really great. So what is reactive? What does reactivity mean for all of the different frameworks that we've been talking about so far?

[00:02:32] Well, Angular.1.x uses dirty checking in order to be reactive. Cycle and Angular 2 use reactive streams like XStream and RxJS, so these are all different ways that people are reactive. Vue.js, MobX, and Ractive all use a variation of getters and setters. And so that's what we're gonna talk about today because that's Vue's version of using reactive premises.

[00:02:59] Despite the name, react is not reactive. I actually thought it was, then I was talking to Dan Avero and he was like, no it's not. [LAUGH] It uses a pull approach rather than a push approach. And if you want more information about that design architecture, you can do more of a deep dive in the react design documentation.

[00:03:18] There's an anchor tag that it goes to directly that section. There's actually great docs in vue's guide about vue's reactivity in its system. So if you wanna do a deep dive there, you can do that. Damian Dullsz, who works at Monterail, who just put on the vue conf recently, wrote a great post about creating a reactive engine.

[00:03:40] So that one is really, really awesome as well. So in vue, the vue instance takes the object, walks through the properties that we give to it and converts them to getters and setters. So in that vue instance this data property is really, really important to vue. And the reason why we define it initially, is that if you can't detect property addition or deletion so we have to state it initially before we get going working on it.

[00:04:13] In order for it to set up that reactivity system in those getters and setters, we need that object in order to keep track of things.