Into To Alpine.Js
Alpine.Js is a rugged yet light framework that sits on top of your markup. Thats right, ON TOP OF YOUR MARKUP. This framework was not meant to take the place of much larger frameworks like Vue or React, but to bridge the gap between vanilla JS and Jquery. In the words of the creator Caleb Porzio, ‘“Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost. You get to keep your DOM, and sprinkle in behavior as you see fit.”
Generally When researching new technologies to use, you uncover the purpose for this new tool that you are adding to your belt. So when defending why one would use Alpine.Js over React or Vue, one can justify the usage by stating that the application is a single page with interactivity. Where as with Vue or React, you deal with routing and more complexity. Also Alpine Js does not have a virtual DOM like its big opposition Vue and React.
So if you are still reading this article, you must be looking to get started using Alpine.Js! Simply put the its CDN in the bottom of your head section like shown below:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script></head><body></body></html>
As simple as it is, your page is now ready to utilize Alpine.JS! As mentioned before Alpine.Js is a very light and simple framework, All of its documentation sits on its Github repo inside the ReadMe folders. https://github.com/alpinejs/alpine
Once the CDN is put into the document, the next to do is create our very first component! To do this we first define state with the x-data attribute. The scope of state is within the div as to which it was defined. So everything that sits in between the opening and closing div tags has access to the state.
<div x-data='{isOpen: false}'><button @click='isOpen = !isOpen'>Toggle</button><h1 x-show='isOpen'>Hello Josh </h1></div>
Let’s breakdown this example a little more. As mentioned previously to incorporate state we use x-data directive, so we state the directive followed by an equal sign and two curly braces. Inside the curly braces is where you can set the state of your component. To adjust the state between false and true we simply add an @click followed by the action to take on that click. Now that we have set up our state and implemented a click function now we need something to toggle. Included in the example above we have an H1 tag with the x-show directive and is set to the value of our state. So each time this button is click we will see this H1 toggle between visible and invisible.
So now that we have an idea how Alpine.Js is used to create action on a single page. Here is a list of all the directives to add to your arsenal.
In conclusion, as a developer moving away from vanilla JS Alpine.Js is a great option. Its primary use is for projects or applications that keep the user on the same page. It is optimal because while coding it just like your users you never have to leave the html document to get work done. In my next topic I will cover Tailwind CSS which goes great with Alpine.JS.
