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
====

Follow Me
=======

[talhazaryab]

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

[maskman]

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

[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).

[combinio]

Lot of fun, indeed. Thanks for sharing :)

[daniloalonso]

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...

[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 :)

[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 👏

[louisraillard]

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.

[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?

[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.