Composition API

[00:00:00]
>> So what we're gonna do now is I wanted to cover options API cuz this is where most people are starting from when they've heard of you and seen it. But now it's time for us to talk about composition API. And this is honestly where the bulk of the workshop is gonna be moving towards because while options API is certainly valid and it works with everything and I can't stress that enough.

[00:00:18]
Options API is a valid approach to writing your components a lot of examples and a lot of the ways things are being used these days have some element of composition API. And so it's kind of unavoidable to learn the fundamentals of it. So basically, we're gonna opt into it just to show you what it's like in its full form, so that people can get some practice with it.

[00:00:34]
Because one of the reasons why composition API even came into being is because while options API. I think its greatest claim to same from my experience is that when I taught an introductory view workshop, there was a designer who hadn't coded for years. And in fact primarily focused on HTML CSS barely any JavaScript, but within an hour she was able to get up and running with YouTube.

[00:00:56]
Because the options API provided her with very specific guidelines on how things were supposed to be built, right? Cuz one of the problems with freedom sometimes is there's no guardrails and it can be confusing when people architect things a certain way. However, with the guard rails that means there are constraints and sometimes you want to organize things the way you want to organize them, you might wanna use more native JavaScript features whatnot.

[00:01:18]
So the composition API was the answer to that, so what I'm gonna do now is I'm gonna switch these now, so we're gonna go back to the zoo example. So now we're on branch 02 begin and we'll be updating the exercise branch and preparation for everybody, all right?

[00:01:34]
So let's make sure we have our to do app up and running so let's refresh, there you go. Natural server built beautiful, all right, there we go, we have our to do list viewer. Okay, so composition API, how does this differ from options API? Well, first thing first is we're gonna basically get rid of a lot of the way it's being defined right now.

[00:01:55]
So first thing first, this whole export default object. This just disappears, this goes by all of that disappears. And so the next thing we need to do though is we need to actually then basically tell us that we're using composition API. And the way this is typically done is with the setup life cycle hooks, so actually let me undo this real quick just to demonstrate this.

[00:02:13]
If you ever see anything inside of setup method like this Instead of your options API, this is where you know composition API is being sprinkled in. Because basically what you need to know about composition API is that everything in here, from all these comments, all these lines, they're vanilla JavaScript.

[00:02:31]
In other words, they don't come with any Vue magic by default. Whereas when we're looking at options API stuff here, right, with methods, you see we can refer to this. And then computed then there's also global imports you get with routes and so there's a lot of magic that again it's not everyone's cup of tea.

[00:02:47]
But it's there it's been helpful for some situations but when we want to configure everything ourselves composition API is the answer. So what we're gonna do is because when an authentic pure composition API, we're gonna use what is known as the script setup block. And so what you're essentially doing is telling the script block and the compiler that we're gonna just skip that as an API and we're only gonna work with in the setup.

[00:03:09]
So let me just actually I'm just gonna comment this out, so that it doesn't yell at us. And so let's go ahead and map over the various things, shall we? The first thing first is the photo gallery, so typically you might be like okay, well what I might do is I'll do let photoGallery = an array.

[00:03:24]
And that'll do the trick, right, but this again is vanilla JavaScript. So we need to do is tell it that hey we actually wanna make it a reactive reference something that view will track for us, and how do we do that? We Import ref from view, that's all you do and once you import that you can actually wrap your value with the ref so you passing like basically the starting value.

[00:03:47]
And that will be basically what's set as the reactive reference, so that is the equivalent of what we just did here with data. Next, we have some computed properties, right, so let's go ahead do that. So the computed property here, I'll just make those conts. So we have here const number of photos, okay?

[00:04:03]
So again, right now we have a function that returns this property, but this doesn't exist anymore, because we're no longer in the basically the confines of options API. Okay, so what we need to do first is let's start by importing our computed helper method, because this is how we tell JavaScript, hey, we actually want this to be a computed property.

[00:04:23]
All right, there we go, but then remember, this doesn't exist, especially with the arrow function because the arrow function resets to this context. So what do we do? Well, you might think, okay, yeah, photo gallery, this This should be good, right? But we have to remember that photo gallery is not just an array.

[00:04:38]
It's not a variable that can just point to and get the value of because reactive references in view need to be unpacked. Without diving into proxies and stuff, just know that it's a way for you have to actually manually tell it, I wanna get something out of it.

[00:04:50]
And there's something nice about this syntax, right? So basically the way we do that, as we said, we wanna get the value out of it. And so this is how you say, okay, I want the length of the photo gallery value. And let's go ahead and now do that for the rest of them for even an odd.

[00:05:05]
So let me just copy this one here. And then we'll do const even albums equals computed and then just like this and then reset save what we solve a problem because this does not exist. So reset that to .value and then that's looking good. And then once again, let's go and just clone this cuz this will be easier than me copying that.

[00:05:34]
We have the odd albums and then we're gonna wrap this inside of that negation. And then all we have left now are the methods. And so the methods, if we think about what methods really are, they're really just JavaScript functions. So let's take this fetch photo gallery, and that can delete now all this boiler code.

[00:05:57]
And we're just gonna define it just like we would normally in a JavaScript function. Just give it the prefix function or it can use an aeros inax whichever one you prefer. And then basically what you have now Is you have everything basically, being automatically return to your template as you would expect.

[00:06:15]
Because we skipped the step of like showing you composition API within options. But never use composition API within the options API. You actually need to return explicitly what you wanna use. But one of the things that you get as a benefit of using script setup is there's a bunch of compiler optimizations.

[00:06:30]
And so it basically automatically knows like for example you'll notice here is this a number of photo is declared never used because it actually knows that inside of the template. It's going through basically all the reactive references and being like it doesn't exist. And that's true because, what did I say about one off errors?

[00:06:45]
I forgot the s that's why it's actually breaking. So I just need to add the s here and then I forgot I just need to replace this value with .value. And this here is our equivalent of what we did with options API in composition API. You have a question?

[00:07:02]
>> Yeah, although it might be an unnecessarily digression-
>> No, go for it.
>> So I see you're using the ref helper function, I know-
>> Yeah.
>> Sometimes you can also use Reactive for non-primitives. Is there a particular rule of thumb around that I notice this?
>> No, that's a great question.

[00:07:17]
So when it comes to reactive references, as we just explained, there's ref here. But as artfully pointed out, there's actually something else called a reactive helper method. And so it's worth clarifying here. So let's say we have another let's say that we have like a new photo objects.

[00:07:32]
All right, you could technically just do a ref with an object. But what you might see in some code bases as well is the reactive helper method. And the key difference with this is that let's say we just have id 1, 2, 3 title, best photo ever. So the difference with these two things is let's go ahead and actually let me copy this and just for now, just for the sake of comparison, these two things are let's say, best photo ever to, okay?

[00:07:58]
So when you refer to these properties in the ref, we said that you actually need to unpack it. So if I wanna refer to the title of the photo gallery, it'd be photoGallery.value.title, that's what you'd have to do. But in every active object, you actually can just go a newPhoto.title.

[00:08:15]
Now some of you might be interested going, that's the one for me, I wanna type less. And that's totally fine, right? And that's exactly how I felt. But as I mentioned before the beginning of this workshop, like decisions in our code bases are all about trade offs. One of the things that was aptly pointed out to me is that a library author preferred ref.

[00:08:31]
And the reason for that is because it made it very clear when you use a dot value, that it was a reactive reference being utilized. Because otherwise, if you just see like a new photo, that title being randomly like, again, our code is short enough that you can make the connections.

[00:08:45]
But once it's long, you're just sort of like, okay, new photo.title, guess I assume it's reactive or is it a lead? Is it a constant so technically, it does provide it that's off the skate that declarative nature a little bit. So again, is there one is better than the other?

[00:09:00]
I say whatever your team prefers. For now, we'll be using REST though because I think this is the one that people tend to shoot themselves in the foot with it. Because it's easy to forget to unpack it and when you don't unpack it then things break. So we just want to give you.

[00:09:14]
So at least as far as the examples I'll be showing you, I just want to show you the rough example because react if you just decide to use it. It'll feel really natural like you normally use the desktop for example it'll feel really natural for those of you who are used to that