Alpine.js Crash Course #11 - Alpine Lifecycle

Key Takeaways

Okay, then my friends, we have nearly reached the end of this course and I feel like we've covered quite a lot of ground, but there's just a couple more things I want to show you before we finish. And both of these things kind of relate to the life cycle of any Alpine component you make. And by component, I mean any root element that you add the x-data directive to along with all of its children elements as well. So, to demonstrate these two things, we're going to work not with the form that we made previously, but with a different HTML template which I've already created here. So, we have a div tag with the x-data directive already applied to it and notice the value of that is demo, which is a reference to the Alpine data I've already set up and I'll show you that shortly. Anyway, inside that div we've got two different sections. The first section is just a placeholder for where we're going to dynamically output some fetched data shortly. And the second section is an input field which later will use to update the page background color on the fly. Also, notice this x-model directive which keeps in sync with a property called BG. So, both of these different sections are going to allow me to demonstrate different life cycle features of Alpine. Now, in the JavaScript file, we already have the data object set up called demo and inside that we've got two properties defined. Posts, which is an empty array, and BG. So then, the first thing I'd like to show you is a life cycle hook called init which Alpine automatically fires when a component first gets initialized. So, think of this data we're creating right here and the element it's associated with, that div, as a component, two parts of a component. And when the page loads in the browser, Alpine initializes this component. And it's at this point that it automatically fires the init function if we have it defined within this component data object. All right? So, let's make that init function first of all by coming down here and call it, surprise surprise, init. And that's important, you must call this init because that's the function Alpine looks for. And then inside this function for now, let's just log something to the console by saying console.log and then inside that we'll just say init. All right, and then in the browser I'm going to refresh and as soon as Alpine initializes this component, we should see init over here in the console, which is pretty much right away. And we do, init. Awesome. So, it's firing that function straight away. Okay, so we know this init function runs right away when Alpine initializes the component, but what use is it? Well, we could use this function to fetch some data that we want to show on the page because that data is going to be fetched then right away as soon as the component initializes. So, let's do that. I'm going to paste in a simple fetch right here using just the fetch API and all this does is grab some fake JSON from the JSON Placeholder site in the form of post objects. And then when we have that, we update the posts property on this Alpine component to be equal to that parsed JSON data. So, now that post property would be an array of JavaScript objects where each one represents a single post, right? So, Alpine fires this init function as soon as this component gets initialized and inside that we fetch some data and update the post property with that data. And therefore, we could output those posts now in the template. So, let's go back to the HTML file and do this. Now, the way we're going to get those posts on the page is by using a loop like we've seen previously. And that way we can just loop through the blogs property or the posts property, I think it's called, which is an array, remember, and we're going to output a little bit of template for each one. So, we can make the template tag first of all and then we are going to use the x-for directive on it. Now, as a value, we can say post in posts. And we should also give this a key property and bind to it just in case these posts ever get reordered. They won't do, but it's good practice. So, for the value of that key, we can use the ID property which comes along for the ride on each post object. All right, and then inside this template tag, we can just output an LI tag for each post that we have. And on that tag, we're going to use the x-text directive to inject some text content, which will just be the post title. So, just write post.title to output that. And this title property, by the way, is something JSON Placeholder provides to us. All right? I've not made it up. Okay then, so now when the page loads in the browser, Alpine should trigger the fetch request by running the init function. And when we get the data back, we should see it then output on the page. Okay, and there we go, my friends. Now we can see these five post titles right here. And if we refresh, you're going to see that they come in pretty much immediately. It just takes less than half a second to fetch those and output them to the screen. Okay then, so the last thing I want to talk about is how we can watch properties and react by firing a function when they change. For example, we've got this BG property right here, which is an empty string to begin with. And currently, this is bound to the input field in the HTML because we use the x-model directive to hook it up. So, whenever a user types into the input field, it's going to update the BG property in real time. Now, the idea behind this is that whatever a user types in a color, like red or blue or even a hex code into the input field, we're storing that color in the BG property, right? Then, I want to watch the BG property for whenever it changes and I want to run some code to update the background style of this page whenever it does. So, how do we do this? Well, we can use a special watch function in Alpine to watch a property and react to it. So, we're going to set that watcher up inside the init function so that we're watching the BG property from the get-go. And we can do this by saying this. dot and then it's dollar sign watch. And then we want to invoke this watch method. Now, as a first argument to this method, we say which property that we want to watch. Now, in our case, it's the BG property. And as a second argument, we pass a function which runs every time this BG property value changes. Now, as arguments to this callback function, we automatically get access to the new property value, which we just changed to, and we're going to call that new BG, and the previous property value which we changed from, which I'm going to call old BG. Now, we don't actually need the previous value inside this function, old BG, but it's there if you did want it. What I'd like to do then is update the background color style of the page when the value changes. And to do that, I can say document.body and then use the style property on that. And the style I want to change is the background color. Okay? And we want to set it equal to whatever the new BG value is, which we have access to. And this line of code is standard JavaScript stuff, nothing to do with Alpine. We're just updating the background color of the body tag. All right? So, now we've got a watcher set up to watch the BG property and whenever that property value changes after we type into the input, it's going to fire this function to try and update the background color to be whatever that value is. So, let's try it out. All right, so moment of truth. What shall we change this to? Let's go for pink. Yep, that works. Awesome. Let's go for light blue. Cool, that works. And now let's do a hex code. I'm going to say 4789F2. And yep, that updates as well. Awesome. Okay then, my friends. So, that is the end of the series then, but there is still a lot more to Alpine that I've covered in these lessons. This was more of an introduction course than a deep dive. So, definitely check out the docs to learn more about it now you've got the basics under your belt. Also, I will be releasing courses in the near future, like I mentioned at the start of this series, which incorporate Alpine.js into those projects. So, if you like this one, then definitely stay tuned for those. [Music] [Music] [Music]