VueUse Composition Utilities

[00:00:00]
>> Ben Hong: All right, who here has heard of VueUse? Yay, okay, so we got some people here, and then there are obviously some who haven't. And so this is the one composable library. I tell everyone as much as I humanly can, because it just represents this incredible collection of what possibilities there are with composables.

[00:00:25]
So if you're looking for examples of how composables could be written, I'm not sure there's really a better library to stare at, because what they've essentially done, if you don't know what VueUse is. Is they've taken all the core functionality of browsers and stuff, and they've made everything reactive, so it's ready to be used for Vue.

[00:00:43]
So, again, they say show, don't tell. So the first thing, so has anyone here ever implemented local storage by themselves? Yeah, the API is not terrible, but it's a little verbose. And so, what's cool is that they have this thing called useStorage. And useStorage essentially, instead of doing something ref, you just say my thing, like flag, useStorage.

[00:01:13]
You give it a key of whatever you want the local source to store it under, right, cuz that's what it's going to retrieve it, and then whatever value you want. And then after that, flag just becomes this reactive ref. And then whenever it changes, it updates the local storage, and it's fantastic.

[00:01:30]
And so the reason this is also particularly cool is because what this means is it's a little. It's not as effective in this particular demo because we technically have a backend that's saving data. But to give you an example, if we look at the task store that we have here, you'll notice here that right now it's just a regular reactive array.

[00:01:58]
But if you were to import useStorage from view, use core, like this, and you just wrapped it, I think I can do it like this, taskList. I think that works. Yeah, clean, okay. By the way, you see that? Maybe reforGetter. So more commonly, I think, seen in libraries is where we're seeing it, because they just don't know what their user is going to do.

[00:02:34]
So what's cool about this then, is that now that you have this, all you've done is you've wrapped. Instead of just making it a normal ref, you've wrapped useStorage to it. And so now, if we go to our site and go to our tasks, you'll see here inside of your application.

[00:02:52]
Let me bring this up so it's easier for everyone to see. Look at that, all your stuff's there. It's fantastic. And so if you're working on just a client side rendered app, you don't have access to a database and you want to be able to save your stuff in between sessions.

[00:03:08]
This is a really cheap and easy way to do so. It's not quite a local database, but honestly, I think it'll get you pretty darn far being able to do that, especially if you just, cookie IDs, whatever. It makes it just so easy. And so to be clear though, the default is local storage.

[00:03:25]
But you can see here, and this is the pattern that I want to talk about next, that they actually make it easy for you to then like configure things. So for example, da, da, da. Let's see, where is it? Use the other store choice can be specified via a third argument.

[00:03:44]
So where is that third argument? So here's an example where they've given you, here's your key, here's your object, and then they actually have what they call like a serializer. So they actually give you the option to determine how your data is being parsed. So, you have some custom tree walker thing that again, a JSON parse, JSON stringify, that's fairly standard, but you might have some unique things that you're doing.

[00:04:07]
You can walk in there and it basically accepts those things. I'll switch back to this in just a second. The pattern here that we're talking about is ultimately what is called the options parameter object. And so to quickly just give you an overview of what I mean by this is that a lot of times when people are writing composables, although this really does apply to I think JavaScript as a whole, like when you're architecting your.

[00:04:32]
For example, we were just using useFetch earlier, right? That's what we were doing. It's easy for developers to get carried away cuz they're like, there's URL, there's the methods, there's the body type, whatever. And they kind of, before you know it, there are some method signatures that are just so many arguments long.

[00:04:51]
And the problem with this, even with this three alone, is that you have to remember which order they're in, right? And so the options parameter object basically tries to encourage developers to think more along the lines that like call it like the rule of thumb being that your first.

[00:05:06]
The rule of thumb is the first two parameters which are commonly used. Say in this particular case, like you're on your methods. Those are so common that like, cool. Those are the required ones that I want you to memorize. But if I have stuff like body type and whatever, this is really an options object.

[00:05:23]
And inside of the options object you can then say if you have body, what a format. And then it's like JSON, whatever, you can then expose additional functionality through this part. And so it's this idea of trying to keep your signatures lower so that obviously they're easier to understand.

[00:05:46]
And then by doing so, you then unlock what you see here inside of you use, which is that they ultimately. Let me pick one, for example, use ref history. Okay, let me bump this up so you can see properly. Does this have the controls? So what we see here, right, is useref history comes on in, it takes in your counter.

[00:06:14]
And then what it does is it exposes additional functionality that then can be used basically without having you configure a bunch of stuff. This is also called a controls pattern. And so typically you can assume that it normally allows you to increment, decrement and whatnot, but then it exposes additional functionality for undo and redo should you choose to expose it.

[00:06:38]
Thinking of it like overloading a JavaScript function where you have a basic implementation, where it like does the simplest thing you want it to do. And then when the user configures again, I'm not sure where there was an example that was, let me just write the signature for you was essentially like this.

[00:06:56]
So by default it was something like this. It was like usePlayVideo, right? And so usePlayVideo by default, assume that you would basically give it, again, let's say VIDEO_URL. And then when you basically grab the video and you played it, or you basically you ran the function, you would play the video because that's what you would by normally default do.

[00:07:27]
And then what it did was interesting enough. It would allow you to do something like controls equals true. And what that happened was it would then instead of assuming you wanted to play, it would all of a sudden expose a play, a pause, a stop and like fast forward, for example, and would give you fine grain control over how the function worked.

[00:07:48]
And so I'm not telling you whether you should do it this way one way or another, but I have found it to be an interesting way to allow users to progressively enhance complexity in their functions. Because normally I think we're used to just kind of writing new functions every time you want new functionality.

[00:08:03]
But this way, with this kind of controls, true flag or via the options parameter. It gives you a way of thinking about things from, okay, nine out of ten times users are doing this. One out of ten times, they need more granular control. This is how we're gonna expose it to them.

[00:08:17]
So this is like a pattern that's kind of interesting that I just wanted to share with you.
>> Speaker 2: Use media controls.
>> Ben Hong: It was it in that one I didn't want to use.
>> Speaker 2: Might be what you were thinking of.
>> Ben Hong: Maybe. You know what's funny? Yeah, it might be that one, you said useMediaControls.

[00:08:39]
Yeah, it has a source [CROSSTALK] and then it has a whole bunch of options and then if you just click it is just playing. Yeah, I think this is similar. Yeah, there's so much fun stuff in here to play with. So for example, one of the things I've used a lot is useColorMode.

[00:08:53]
It basically uses the browser API to automatically detect whether what kind of theme you prefer, light, dark. And then since that's something you have to manage anyways, it's just really convenient to have.