Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "Coding a Simple Observable" Lesson is part of the full, Advanced State Management in React (feat. Redux and MobX) course featured in this preview video. Here's what you'd learn in this lesson:

Building a simple observable helps you understand how an observable works under the hood.

Get Unlimited Access Now

Transcript from the "Coding a Simple Observable" Lesson

[00:00:02]
>> Steve Kinney: To kind of understand this a little better and see how it's not black magic, what we're going to do is we're gonna write a slightly too simple version of this observable, right? And the versions in MobX are a little bit more complicated, cuz we're not dealing with computed or dependencies along this way, but we'll see it kind of in a very simple version with a do-it-yourself observable.

[00:00:34]
>> Steve Kinney: So here, we have just an observable value where we could say get and set, right? We saw it on that string earlier, and we'll see how that actually works with objects and why we didn't have to deal with objects, hint to hint computed properties, but we'll see that in a second.

[00:00:54] But we have this get and set, and so that we have an observable. Now, yes, the one in MobX is a lot more complicated than this one. But, it's a pretty good representation. So we could say,
>> Steve Kinney: And we get back this object with a get and a set.

[00:01:17] So this is now a string. And so, I could say x.get,
>> Steve Kinney: And we'll get the string back, right? Just as we saw with just the regular string before, with MobX. But you'll notice that whenever I set the value, I am going to just trigger this onChange, which is just effectively a console log.

[00:01:36] So I could say x.set,
>> Steve Kinney: And, oops. [SOUND] call that newValue,
>> Steve Kinney: x.set. You can say, the newValue is World, the oldValue was Hello. Now, yeah, I'm console logging. What's effectively happening under the hood is MobX is able to tell autorun, the world has changed. And, it's able to do really smart things of figuring out exactly the bare minimum that has changed about it, which makes it a lot easier.

[00:02:18] But basically, what we're able to do is events to register ourselves with, I have changed, I can tell everyone when I have changed. We've seen it. We can automatically render UI without any special framework with these really powerful patterns. All right. So let's dig in a little bit deeper.

[00:02:36] So this is our very simple version from before. This is not an official observable implementation, right? This is just a way to kind of like demonstrate it in a way that we can grasp in one sitting. This code right here, with all the decorators, I told you earlier that you don't necessarily need to use not standardized JavaScript features like decorators if you wanna do this.

[00:03:03] This is effective. And if you wanna write this in ES5, you could write it such, right? extendObservable. We can actually even write an overly simple version of extendObservable as well if we really wanted to. But extendObservable seems to take the current instance object along with an object of what things you wanna watch and what they currently are, right?

[00:03:24] So firstName and lastName, and then the actual firstName and lastName as they are. And, extendObservable, basically use setters and getters here. You remember how before when we had the string? We had to use set and get, and when we made that fake observable before, it had set and get?

[00:03:40] But you notice that when we have the person that was changing the page, I didn't have to do any of that, because it's using those computed properties. It's using the get that we saw very early on when we started talking about this that made us abide by the universal access principle, and set is the same thing, but for assigning value.

[00:03:56] So now, whenever you try to just call it, like, person.firstName or person.lastName, it's actually gonna call the get method, which is hooked into MobX, which will do everything. When you call set, it will do that thing we saw with the console log. Right? So we're effectively, even for our objects, we are still calling get and set.

[00:04:14] But because we have these computed properties on the classes and objects with that object of defineProperty, we don't have to notice it, right? We get to have a nice API for dealing with these things. But if effectively, we are calling these every single time someone assigns or gets one of these values.

[00:04:35]
>> Steve Kinney: And so then, the decorator where you saw just @observable, is effectively just this. It takes the current instance object and all of the properties that you called observable, and it just adds them onto [INAUDIBLE].