Pure MobX Demo

[00:00:00]
>> Steve Kinney: So we're gonna follow one of our themes, which is to look at this library in isolation of react first, and then figuring out how to tie it into react. So this is like vanilla JavaScript DOM manipulation. All I've done so far is I've got this input field that I will eventually be able to type into it now.

[00:00:21]
And I'll have these two fields which will show me the text that I wrote in the input field and also show it to me in uppercase as well. Right, and what I wanna have happen is we're just gonna use the vanilla JavaScript and mob X first to kind of see some of these things.

[00:00:37]
And then we'll tie it into react. I put these console.logs in here because I have a type a personality and the esLint error is saying like, hey, you have these variables and you're not using them was a little much for me so we can get rid of that line.

[00:00:53]
Like that was enough to drive me nuts. So we've got these and so we can create some object, right? You can see we've got we're pulling in two things from our backs Observable and Auto Run, right? Observable is we wanna say, hey, this object, we wanna to look and feel like a regular JavaScript object, but we need to know when it changes, right.

[00:01:16]
And we're gonna do stuff based on that change, right? And so we can for instance. [SOUND] Say text. And we're doing this without decorators at first. Let's say, observable.
>> Steve Kinney: Right, and we'll say, all right, this thing has got a value. Hello world, and we'll give it one of those get_uppercase, we'll give you one of those getters.

[00:01:51]
>> Steve Kinney: Too much cards and less and that will return this.value.to uppercase.
>> Steve Kinney: And like if we didn't wrap it in observable, we'd still get an object that had a value of hello world and we said, text.uppercase, we would get the uppercase version of that, but we would never know when it changed.

[00:02:20]
Right, and that's the whole problem with figuring out when we need to re-render the down. When the state has changed, update the UI to reflect that state. How do you know the state has changed, right? We saw problems with this before we had referentially equal arrays, or like sometimes with the reactor form it is, referentially different functions that trigger a rerun, right?

[00:02:40]
This whole super-like great part of JavaScript is also sometimes problematic for us, and a lot of these are ways to handle this. So also, let's make an EventListener,
>> Steve Kinney: addEventListener, add a 'keyup',
>> Steve Kinney: We'll take the event and that text object that we just created, we're gonna reassign it's value.

[00:03:08]
>> Steve Kinney: event.target.value.
>> Steve Kinney: Cool, now what happens is, every time this object changes, I want to update the DOM. We're having like a almost a dumb lee sample version of react that is no different anything. Anytime the text up value changes which will happen whenever I type in this input field, go and do some stuff right.

[00:03:38]
And I can just treat this like. You notice I'm not doing anything. I'm not using a function. I'm not making a call back. I'm not using a ventimeter. I'm just saying, hey, that object I wanna reassign your property. So we'll go ahead and we'll say this autorun.
>> Steve Kinney: Takes a function.

[00:03:56]
And any observable that comes in there it kind of looks through them. Says like, cool. I wanna do some stuff, right? So we could say like textDisplay. We might actually like do the input field like reactive, but we'll try it out textDisplay.textContent = text.value, right? Soon as that all that it's doing is it is saying hey, this is going to run whenever and observed object inside of it is changed in any way.

[00:04:40]
>> Steve Kinney: Right, and all I'm doing this event listener is I'm not firing event. There's no, again, there's no eventimeters. There's nothing I'm just mutating an object. And like, hey, Steve, didn't you spend like a good few hours telling me one does that simply mutate objects? I did say that it was technically true, right?

[00:04:59]
Again, really cool abstractions make really awesome stuff be able to happen, right? And so I can also say the like, loudDisplay.
>> Steve Kinney: Equals text.uppercase, right. And like that, I'm just using it's technically calling a function that's taking that value and doing stuff, but you can see that it just pretty much works, it gives us these very nice subtractions.

[00:05:31]
And when we get these into like a React application, the autorun part will even be hidden from us, right? We're just gonna go mutating some objects, and our DOM is gonna re-render, and it's all gonna be magical and wonderful. Which it's pretty, pretty neat in this case. All right, cool.

[00:05:54]
So, let's go back for a second.
>> Steve Kinney: I'll show you one more. This is where the class. Where I can also like decorate it as such. Well actually look at this when we look at the react version. This is using react but there are ways to. I showed you with an object literal.

[00:06:23]
I also just wanted to show you with a class and we'll see what the decorators in, in a few seconds. So what could this begin to look like?
>> Steve Kinney: When we start to use the decorator syntax, it's gonna be pretty, pretty interesting.
>> Steve Kinney: Like this is effectively a kind of a version of what we had.

[00:06:50]
That isn't totally real. That kind of shows like what's kind of happening. This is what it begins to look like when you use the decorators. You can basically say these properties on this class, these are the ones that I am observing. These are the ones that when they change, I want to know more about them.

[00:07:10]
And like if you can't use the decorators you could do something like this. You saw the other decorate one that I had before. And you could theoretically write some of this stuff. This stresses you out. Don't worry about it cuz you don't have to do this. It's given to you by the library, so on and so forth.