a basic version of Alpine from scratch. Front-end frameworks are notoriously black boxy, at least they were for me. It always sort of intimidated me. But after writing my own, I've realized that the core components of a front-end framework really aren't that difficult to grasp. And I think I can actually demonstrate them really clearly for you. So let's just do it. Let's jump in and recreate Alpine. So I have a blank page here. We're going to start by just creating an Alpine component and actually using Alpine, and then

So I have a blank page here. We're going to start by just creating an Alpine component and actually using Alpine, and then we'll swap it out for our own JavaScript. So let's create a blank page. So HTML, we're going to keep it really simple, just an HTML tag. Here's a div. This is going to be our Alpine component. And we initialize an Alpine component with x-data. If you're used to Vue.js, this is very much like the data key in a Vue component. And then we just declare our data.

If you're used to Vue.js, this is very much like the data key in a Vue component. And then we just declare our data. So we're going to say count is zero. Okay. All right. We're going to create two buttons, one to increment, and we're going to listen for a click on that. Once we hear the click, we will increment count by one. And then there's also going to be a decrement button. Okay.

And then there's also going to be a decrement button. Okay. And now we'll make a span tag and use x-text, which is just like v-text to echo out the count. Or in Vue, you might be used to this syntax, something like this, right? Okay. So in Vue, this is almost the same. You would just have v-text and then x-data would be in your actual component. All right. So here's our Alpine component. Let's pull in Alpine itself and just see if this thing works.

Then it becomes DOM, the document object model. We don't have to get into it, but you'll hear me throw around this word DOM and basically I mean the HTML that lives in the browser page. What does it mean to refresh the DOM? So this is what's happening when I click plus, the DOM is refreshed. Some smart system somewhere is walking through the DOM and updating the things that need to be updated. In this case, if we update count, we need to update the things that reference count, right? And when the data changes, how do we figure out when data changes?

right? And when the data changes, how do we figure out when data changes? Well, we're going to get into that. So why don't we just jump in and start writing some code? So for this video, we're going to, we're going to make our metric. Let's just get the data from this expression and get it into some JavaScript object or variable, something that we can use in JavaScript. So we're going to start really simply. Let's say let dataString equals, okay. And document.querySelector.

Let's say let dataString equals, okay. And document.querySelector. And we're going to search for any element with an x-data property, which is going to get us this element right here. Okay. And then we will get that attribute, getAttribute x-data. Okay. So let's walk through this one more time. Let dataString. I'm saying this variable dataString, I want you to set it to the element that has the

Let dataString. I'm saying this variable dataString, I want you to set it to the element that has the X data property. That's right here. And I want you to actually get the value of that attribute, which is going to be this. So with any luck, let's run this in our browser. We'll refresh. We're going to use devTools, a ton, this little console and Chrome devTools. So dataString, we should actually be able to access that right here. And there we go.

Like, I need that, but from this string. So how do we do that? Well, there's a couple of things we could do. You could use json.parse. I don't know if you've ever seen that before, but with json.parse, you would think that you would be able to do kind of what we want. Like we could say, count is zero, right? Okay. Hit enter. And it doesn't work.

Hit enter. And it doesn't work. So JSON.parse is actually really, really strict. For this to work, we would need double quotes, and then it works. And that's just a little bit too inflexible. So I'm going to introduce you to something that is notoriously dangerous and bad called eval. So eval means evaluate. PHP has eval and JavaScript has eval, and I'm sure most other languages have some form of it.

I could say foo plus hey, and it's going to say bar hey. You can actually modify variables inside of an eval statement. I could say foo is equal to yo-yo, a-yo. And then I type foo, and now it's equal to a-yo. Okay, so you can see why it's kind of dangerous. In a front-end framework, it's not as dangerous. In PHP, it's a very dangerous operation. If you do any Googling about it, you'll quickly learn to not use it. And actually, Alpine's first iteration did use eval, but we stopped using eval. We used something else.

I don't know. But there, we just turn that string into an actual object. So if we do let foo =, now foo is set to that data. Okay. So now we can say data =, all right, now eval. And then inside of here, we'll have our parentheses. And now we want to actually reference that data string. So there's a bunch of different ways we could string interpolate, which means, you know, or here we're concatenating where you want to just, you know, stitch strings together. My favorite one is backticks in JavaScript.

So let's refresh our page and see what data is set to. All right. There we go. We have the data from our attribute right here. Okay. Now, before we move on, let's actually make a couple of quick refactors. Let's make a variable for that root element. We'll say root is equal to document.querySelector(x-data). And then dataString is equal to root.getAttribute('data'). Okay.

And then dataString is equal to root->getAttribute(). Okay. So this is a lot of kind of cruft here. So let's extract a function. We'll say getInitialData(). All right. And then this is going to get the dataString and return it. Okay. So return eval($dataString). And now here we can say $data equals getInitialData().

So return eval data string. And now here we can say let data equals getInitialData. Okay. So now we've cleaned that up a little bit and separated out a separate function. And that is it. That is our first objective. We got the data from the component and we got it into JavaScript. So in the next video, we're going to actually do something with that data and change the DOM ourselves.