Introducing State Management

[00:00:00]
>> Evan You: In the afternoon, we're going to talk about two very important topics, state management and routing. So state management is kind of a big topic. So the agenda really covers four exercises, but before diving into exercises, obviously, we need to talk a little bit about state management in general.

[00:00:24]
So the idea of state management sorta did not exist in frontend until Facebook brought up this concept called Flux. Well, before that, we were trying to move MVC into the frontend world, and our state lives in so-called models, which is a good abstraction for a lot of cases.

[00:00:53]
In fact, it probably still works pretty well, but the primary problem with, say, backbone back then is we lacked a way to declaratively hook our models into our rendering process. So this new wave of React, Vue, and Angular, the biggest advantage is our state is now sort of transparently connected to our Vue.

[00:01:19]
But that also brings in the problem, because it is so easy to spread state everywhere, and change them anywhere. Your application, as it grows, it becomes more and more difficult to track down where you store the state and where you're changing the state, right? At the end of the day, a lot of the problem is really trying to pinpoint where the problem originates from when you run into something.

[00:01:47]
And without a proper pattern for you to organize all these code that's touching your state, you end up with a sort of a hunting game when you run into something weird. And really, your app becomes more and more unpredictable in that sense. So state management, really, it's just a movement of frontend developers trying to figure out ways to sort of bring disciplines into where your code should live, and how you should manage your states.

[00:02:19]
And eventually, makes it easier for you to pinpoint problems when things go wrong, and also helps with collaboration and that stuff. So Flux was sort of this first idea of unidirectional data flow and all that. And later on, the React community popped up a lot of different implementations of the Flux pattern, and eventually, today the de facto library people use is Redux.

[00:02:47]
And there's a alternative pattern, MobX, which is closer to the reactivity model pattern, and its internal implementation is actually very similar to to Vue's. So in the Vue world, obviously, it's pretty straightforward and easy to just put your state inside your components. In fact, it probably would work in a lot of simple cases.

[00:03:12]
I personally think that state management libraries or patterns is not necessarily needed in every case. For simple scenarios, you might be better off without it. And the author of Redux, Dan Abramov, has a quote saying that Flux patterns are like glasses. You know it when you need it, right?

[00:03:38]
If you're seeing everything perfectly fine, then you probably don't need it, but the moment you realize, there's something wrong with my sight, you do need it. And it's a natural process, but sometimes it's not that easy to predict how big your app will be, but you have intuition, right?

[00:03:58]
If your boss tell you, hey, this is our most important app, you need to expect to maintain it for a few years, then you probably need to think about state management from day one. So let's talk a bit about Vuex, which is the state management pattern for Vue.

[00:04:18]
It's an official library by the Vue team, and it's also associated with the code organizing patterns that comes with it. But today we're not really going to be talking about how to use Vuex. If you have not used it before,
>> Evan You: Has any one of you used Vuex before?

[00:04:45]
Okay, great, so some of you already know what it does. So if you haven't, it might be a good idea to read through this page. It's called What is Vuex? It's in the Vuex docs.
>> Evan You: A quick example, we have code like this. Everybody know what this does.

[00:05:14]
It's a Vue instance. It has some state, it has a template, it has some methods, and [COUGH] if you call app.increment, it will increment the count, in turn, render the count. So this is a very simple app, but it has the three essential pieces of what a user interface is consisted of.

[00:05:40]
It has a state, it has the view, it has our possible ways that the state could change. And the difficulty arises when [COUGH] we have multiple applications, or we have multiple components in the same app, really. But you can think of a component as a small circle. It's a self-contained unit, right?

[00:06:06]
Ideally, we want our components to be as decoupled as possible. That's the ideal situation, because if they're decoupled, they're easy to maintain. But the problem arises when you have multiple components that need access to the same piece of state. That's where the complexity comes in, and in reality, in almost all the big apps, you will run into such scenarios.

[00:06:26]
For example, you grab some data from the backend API, and your page A needs that data, your page B also needs that data. And even worse, there could be two different components nested in very different, deeply nested component trees, but they still need to access the same piece of data.

[00:06:46]
So the question becomes unclear which component should own the data, right, and eventually, you realize neither of them should own the data. The data should be hoisted out to be managed in a centralized place if the data is meant to be shared by multiple components across your app.

[00:07:04]
So that brings up the necessity for a library or a pattern for you to do that, and Vuex is essentially that whole thing for the Vue ecosystem. But Vuex really kind of has already gone through quite a few iterations, so in addition to the basic concepts, it also brings more.

[00:07:27]
It also brings some extra things that's only meant for when you are really growing big, for example, the module system, and plugin system, and all that. But today we're not going to talk about that. We're going to sort of go from the ground up, as the name of this workshop suggests.

[00:07:49]
We're gonna think about how we can sorta start with the most simple, most minimal implementation of what a potential state management library could look for Vue.