Alpine JS is pretty useful

A first look at Alpine JS.
💬 Topics:
- Progressive enhancement;
- Alpine JS use cases;
- Working with Alpine JS.
🔥 The "First Impressions" series:
- Fresh - • Fresh JS is worth chec...
- Svelte - • Svelte is surprisingly...
- Astro - • Astro JS is here to stay
🎈Other links:
- GitHub project - github.com/awesome-club/aweso...
#javascript #alpinejs

[@knolljo]

Alpine and htmx helped me so much, as a beginner in web development, to get fast and fun results

[@owenwexler7214]

Alpine is fast becoming the de facto global app state library for HTMX and that is a good niche to occupy.

[@vov4egde]

I think if you're using `defer` attr in your script tag you could put it into head tag, since the execution will be ..well ... deferred :)

[@awesome-coding]

You are right! It's just my habit to place such scripts at the end of the page.

[@alex_constantin]

Super useful video! I am really happy to learn about these new libraries. Thank you!

[@WebDevEducation]

This is awesome, thanks for the tutorial! 🔥 I've previously used Vue JS in a similar way on a legacy WorldServer project but Alphine JS seems like it might be better suited to this use case.

[@jamshediqbal7936]

Nice explanation. It reminds me the days of AngularJS (1.x)

[@awesome-coding]

Thanks! Simpler times! 😅

[@jamshediqbal7936]

@@awesome-coding Yes

[@jediampm]

hi, thanks for the video, it a great replace for jquery, and before going full vue app. Alpine in its core it is base on vue,so you dont need to pass arrow fn, like in react, svelte or solidjs or preact. it jus @click= "fn()", and if you dont organize well the code, like you did, your html can easily turn out be a big mess. ;)

[@awesome-coding]

Thanks for pointing that out!

[@okanyldrmop]

Great video, may I also ask which font are you using?

[@awesome-coding]

Hey! That’s Open Sans from Google Fonts.

[@okanyldrmop]

@@awesome-coding Thank you!

[@ignitedcms1288]

Hello, will you be adding accessibility for your components?

[@awesome-coding]

Hey! This is actually a very good point, and sadly I’m lacking the discipline to always follow the standards for accessibility. I’ll make a point of mentioning this in future videos. Thanks!

[@ignitedcms1288]

@@awesome-coding I think this is an important thing to touch upon when people are creating their own components, as it involves adding aria classes, keyboard bindings and focus states. So it becomes much more involved then people originally think to get right. Thanks

[@luizetulio4888]

This is so nice. I am learning Django and use Tailwind and Alpine to develop basic websites. Alpine has been a excellent tool to improve ux. Do you offer consulting on how to implement this product variation page + shopping cart using node+Django with alpine+tailwind? Anyways congratulations for the content!

[@awesome-coding]

Great to hear! I'm glad you found this video useful. Funny thing - I'm actually studying python and Django these days as well, so your tech stack might be a good idea for one of my next videos!

[@luizetulio4888]

@@awesome-coding It would be great if you could repeat this product page shopping cart concept using Django with tailwind. If you need support on patreon, ko-fi, or any donation please let me know.

[@awesome-coding]

@@luizetulio4888 Hey! Will do - The plan is to have something like that posted on my channel in the next month (if all goes well). No need for a donation! Thanks for offering anyway :)

[@cloudsystem3740]

wow thanks for sharing

[@awesome-coding]

Thank you too!

[@ashleyfreebush]

It seems you use deno for every video. Are you using it in real projects?

[@awesome-coding]

Hey! I don’t think deno is quite there yet when it comes to production readyness, but the perspectives are great!

[@voychoi9923]

Subscribed

[@awesome-coding]

Thank you!

[@laughingvampire7555]

I think a simple library like this one can be useful for 90% of websites out there. I'm even inclined to consider for the 100% of the projects out there, so please dear developer community help me to think what use cases would be too much for a simple library like this one?

[@awesome-coding]

Totally agree! Alpine will cover most use cases. I think it's a matter of dev experience and personal preference with all these libraries these days.

[@oluwatomisinbabatunde8426]

looking like vue js

[@awesome-coding]

For certain it has the same progressive enhancement capabilities.

[@oluwatomisinbabatunde8426]

@@awesome-coding I still use Vue 2 this way to add reactivity to html although I’m yet to check out petite Vue and alpine has almost the same syntax and ideology but with Vue I can choose the segment of html to inject reactivity I find it really flexible

[@awesome-coding]

@@oluwatomisinbabatunde8426 In all honesty, petite-vue is probably a better alternative than Alpine just because of the entire Vue echosystem. Once you are locked in on Vue, it's tough to transition to a different framework because of all the great things they already offer. I also worked heavily with Vue 1 and 2, but I switched to React because the functional approach felt more natural to me. I know Vue 3 comes with the Composition API, so things are looking pretty awesome for Vue:)

[@bm2085]

I had to use alpine in a couple of projects and I have hated it. It's a confusing, chaotic mess. It might be good for small things, but nothing serious.

[@awesome-coding]

Hey! Thanks for your feedback! Could you please share what were the main issues you faced? Thanks! I can see how having everything in the markup could turn out to be confusing. This is why I had all the JS in the video in a separate file.

[@bm2085]

@@awesome-coding Yeah I had the functionality in a separate file also. I had to add multiple payment options of a couple of payment providers to a form. The main issue I faced was code separation. I wish I could have used Vue instead.

[@JEsterCW]

Lol, what a guy

[@Kiev-en-3-jours]

It looks messy. What an ugly mixed of concerns. The sad truth is it's already 2024 and we don't have any clean and simple solution for reactivity. Solidjs needs extra tools nonsense. React is .. Well don't even want to talk about React. This industry is in such a sad state.