AlpineJS - The Most Fun You'll Ever Have Without a JavaScript File

I really don't like AlpineJS, but it's not what you think. Let me explain. Alpine JS is the easiest framework you'll ever have to learn. With only 15 attributes, 6 properties and 2 methods you'll be up and going before you know it.
The problem is that it is something you would use for progressive enhancement...so it loads on the client side like jQuery and that might make it less performant.
The thing I love about this framework is how you use it. You create a series of x-data attributes directly on your html, which lets you create state variables, use loops and conditionals, and even load external data.
But like they say, there's no better way to get a feel for what it does than by seeing it yourself, so let's build a to do style app with it.
Index
=====
00:00 Intro
00:55 Displaying Data
01:40 Working with Lists
02:33 Two-way Data Binding
03:13 Adding an Event Handler
04:27 Removing Items
Links
====
AlpineJS: alpinejs.dev/
Bootstrap: getbootstrap.com/
Finished Code: go.raybo.org/857m
Follow Me
=======
Blog: raybo.org
LinkedIn: / planetoftheweb
Twitter: / planetoftheweb

[@talhazaryab]

So glad to see you on youtube. Hope your channel grow fast.

[@planetoftheweb]

Thanks, it's been around for a while, but I've really just been posting to it more in the past couple of years.

[@combinio9533]

Lot of fun, indeed. Thanks for sharing :)

[@maskman4821]

This is a vey good demo of Alpinejs, good job 👍

[@planetoftheweb]

Thanks. I really love this thing. I secretly wish I could build everything with it.

[@GreyDeathVaccine]

Great vid. BTW I subscribed. I'm coming back to JS after years spent on the backend in PHP (although PHP has changed beyond recognition and is now 10x better than when I started).

[@planetoftheweb]

I feel like I'd like to use it for everything, and it's great for web projects, but I can see where I might want to do something with Svelte instead.

[@chadgregory9037]

Tailwind and Alpine are the future!!

[@planetoftheweb]

You should check our asembletcss and some of the other projects I did courses on

[@WebDevEducation]

I've predominantly been working with React + TypeScript for the past 5+ years but had a couple of legacy projects where React wasn't appropriate. I eventually settled on Vue JS however Alpine JS would have been a better fit. It's a great little library :)

[@planetoftheweb]

Agreed. I wish I could use it for more things

[@daniloalonso2466]

Using Alpine as a templating tool, paired with some very simple, plain vanilla JS, is the biggest breath of fresh air I've had in a while. I've come to appreciate the simplicity of server-side rendered HTML, basic CSS, and basic JS. I've grown resentful to JSON api jwt wonkiness, SPAs, especially React. Excessive complexity for no good reason. I can not longer think of a good reason to have the complexity of a React app, or a SPA. You actually have better features if you do server-side-rendered apps, such as simple cookie session management, and server-side authorization. No duplicated logic. And when you need dynamic components, because it's obviously 2022/23, then you use a simple tool like Alpine JS.... The amount of headaches and devops nonsense this saves is unbelievable. I think we need to take a step back from these over-complicated stacks and return to simplicity. Alpine is it...

[@GreyDeathVaccine]

You are right. Add HTMX.js to the mix, and you barely need to write any JS code 🙂. Most of the HTML will be rendered on server side.

[@kimbapslayer1995]

Sure but react is still the inspiration and the power behind Nextjs, solid, and preact. When it comes to large scale projects, I only see react and angular.

[@daniloalonso2466]

@@kimbapslayer1995 Guess you've never heard of an app called SoundSlice

[@ben_sch]

Really well done video and good demo of Alpine, thanks! Just a minor criticism: The cutoff at the end was kind of abrupt. Could have shown adding the final element and then cut to your face again for the outro. Other than that great pacing and no fluff 👏

[@planetoftheweb]

I wish KZbin let you just update a video. Editing is probably what takes me the longest, I don't have a budget to hire someone.

[@Landon_Hughes]

Great framework to pair with Django 😁

[@planetoftheweb]

I hadn't thought of that. I guess it sort of does a lot of the front end you need for something like Django.

[@louisraillard3449]

I'm new to web development, would you recommend learning this tool as a total beginner ? I've used a bit of vue.js but that's it, and am currently learning tailwind.

[@mdoerkse]

I think it's not a bad place to start and learn some concepts. If you ever need something more complex you could move up to Vue. Or try doing some simple things with both and see which you prefer. Alpine has similar syntax to Vue.

[@JBuchmann]

If you're working for yourself then i guess sure. But if your goal is to be employed at a company you really need to have a strong foundation in pure JS, and CSS. From there go ahead and learn the Tailwind, and JS frameworks like Vue

[@mikeonthebox]

You actually have to write Javascript on a .js file under some circumstances.

[@kylegaijin]

you added the count property to the data section, and said you were going to track it, but then you just added a hard coded list.length afterward. You never used the count property. What was that for?

[@planetoftheweb]

You're right. When I record things, sometimes I change my mind, so my intention is to track that count, but then ended up using the length of the list instead.

[@kylegaijin]

@@planetofthewebroger that !! :)

[@DanielFallman]

Thanks for this, but I think one part of it is partly misleading. If you look at Alpine.js' docs, most of the x-data logic lives in the html markup. This is a great way to show simple and concise examples, but in a real-world scenario when building anything other than very simple functionality, you'd wrap functionality in an x-data function (e.g. x-data="doStuff()" ) that either lives in a script tag at the bottom or the page or -- preferably -- in a separate .js file.

[@planetoftheweb]

I don't think I'd call this misleading, I don't believe I tried to mislead anyone here. If you watch the video, I clearly go over how x-data works. You can load data externally or from an API, you don't need to have a HUGE x-data object in the file. I think it is for smaller projects, but there's something beautiful about how you can do things in HTML like you can with TailwindCSS.

[@khairulhaaziq2332]

if it's just a single function, using script tag at bottom of page is fine. This is mainly for small apps or rather, small pages. I think the simplicity is beautiful.

[@bgbrunocom]

[BUG] repo files are empty

[@planetoftheweb]

Which one is empty. I tried the finished version and it worked fine for me.

[@kimbapslayer1995]

Lmfao. The easiest todo app on earth.