Use the power of a JavaScript framework right in your HTML file!!

frameworks are overrated, let's use HTML!

Intro

Jokes apart, this blog is about yet another javascript framework but with a twist, you don't have to make those .js files to use it, it integrates right with your HTML! ;)

Curious? I'm talking about alpineJS here! Alpine's creator Caleb says - "I hope you find Alpine to be a breath of fresh air. Silence among noise." AlpineJS is made to provide a simple, lightweight and powerful javascript framework to developers.

AlpineJS can be used using CDN or by installing the NPM package, but in this blog we'll be talking about only the CDN method as our goal is to use it with our HTML file. Let's start by building the classic ToDo app using AlpineJS!

ToDo App using Alpine

Let's start by creating a HTML file and putting the basic HTML boilerplate.

The firsts thing we need to do is importing alpinejs in our html file which can be done by adding a script tag in our Head tag like this.

There are three basic things we need for todo app, current todo text, an array to contain all the todos and the todo handling functions. Let's start by defining our variables for the todo. To define variables for a scope in alpineJS, you need to use x-data directive provided by alpine. x-data defines a chunk of HTML as an Alpine component and provides the reactive data for that component to reference. Here's what my code looks like -

Notice how you have to use this to access the data inside methods. The function logic is kinda simple so I'll not go much in detail, let's start by making our todo app. We will need one input area, a button to add todo and a list of todos with each todo having a button to remove it. Let's start!

Now, let's try to understand the code ;)
The first thing you see is an input tag with a x-model directive whose value is equal to todoEl which we had defined in our x-data directive. x-model allows you to bind the value of an input element to given variable, it automatically looks for changes in the input value and changes the variable accordingly!

The second tag is a button with @click directive, alpine allows you to use @ in place of x-on: directive which are mainly used for listening to DOM events like click, change, mouse events and other stuff. You can see that the @click has been bind with addTodo method from our x-data. So every time someone clicks on the button it ads the input text to our todos array as a string!

Now for the last part, we have the list of todos displayed using unordered list tag or <ul> tag. Inside, we have a template tag with x-for directive and a key. x-for directive allows you to create DOM elements by iterating through a list so basically we are iterating through all the todos inside our todos array to display them. Also note that alpine's x-for directive can be used only on aa template tag, we can't use it directly on a li tag. x-for="(todo, index) in todos" provides us with two things, the index of todo element and todo text which is a string.

Inside it we have another div with a <li> tag and a button to remove the todo. The li tag uses x-text directive to set it's value, it's another handy directive provided by alpine. The remove button has the same @click directive like our add todo button, it binds to the removeTodo function.

This is all you need to build a basic todo app using alpine, after adding some styles to the page it looks like this 👇

SOURCE CODE: https://gist.github.com/asheeeshh/f2dd43138bf66531d588b9b01e3d4737

TIP: Try to add a mark as completed button by yourself, alpine docs are very beginner friendly, if you still face any issues or have any doubts feel free to ask me below in comments.

Thanks for reading!

🍕 buy me a pizza slice!