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...
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.
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 :)
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).
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 👏
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?
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.
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.
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.
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.
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.
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.
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
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...
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.
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.
@@kimbapslayer1995 Guess you've never heard of an app called SoundSlice
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 :)
Agreed. I wish I could use it for more things
Lmfao. The easiest todo app on earth.
Tailwind and Alpine are the future!!
You should check our asembletcss and some of the other projects I did courses on
So glad to see you on youtube. Hope your channel grow fast.
Thanks, it's been around for a while, but I've really just been posting to it more in the past couple of years.
This is a vey good demo of Alpinejs, good job 👍
Thanks. I really love this thing. I secretly wish I could build everything with it.
Lot of fun, indeed. Thanks for sharing :)
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).
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.
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 👏
I wish TH-cam let you just update a video. Editing is probably what takes me the longest, I don't have a budget to hire someone.
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?
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.
@@planetofthewebroger that !! :)
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.
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.
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.
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.
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.
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
Great framework to pair with Django 😁
I hadn't thought of that. I guess it sort of does a lot of the front end you need for something like Django.
[BUG] repo files are empty
Which one is empty. I tried the finished version and it worked fine for me.