Alpine.js offers the reactive and declarative properties of large frameworks like Vue or React at a much lower cost. It maintains the DOM, being able to improve and refine the behavior as appropriate. We could think of it as a Tailwind for JavaScript.
Alpine offers us 14 directives and 6 magical properties that you can learn about by reading their documentation.
Let’s do a small example to better understand what alpinejs is
Well, let’s get down to business and work on a weather widget that will look something like this:
template original de iaminos.
To do this project we need to know about:
- template strings
- some directives from alpine:
- x-data: Declare a new scope of the component.
- x-init: Execute an expression when a component is initialized.
- x-text: Updates the innerText of the element.
- have an open weather map api key.
Assuming that the template was downloaded, we are going to modify it little by little.
At let’s include this javascript tag:
With this we will have alpine initialized.
Now we are going to create a label script and we will include the following:
function temp() {
return {
temp: {},
init() {
// todo
}
}
}
If you want to know how it continues, I invite you to my blog.
.