Django and Alpine.js - Introduction to Alpine.js

[@ChrisGrey]

I've watched at least a million hours of technical videos and you, sir, are a world-class teacher.

[@bugbytes3923]

Thanks a lot Chris!

[@DisabledCookie]

i agree i had to watch the rest of the videos because this guy teaches so well

[@AliMulla]

You are competing for my favourite Django TH-camr spot. I love the fact, your videos are always as brief as possible but really informative. Keep up the amazing content please 🤲🙏

[@bugbytes3923]

Thank you very much Ali, I appreciate that comment - will try to keep making videos and improving!

[@Investigamer]

Thank you so much for covering alpine and HTMX. I'm primarily a backend developer, my past experience is doing PHP development while relying on jQuery for front end interactions, and now that I've moved on to Python I find the new frontend paradigm with things like React, Angular, etc way overcomplicated for my use cases, I've been searching for something lightweight and simple to make my site more reactive without reinventing the wheel or relying solely on jQuery. I've definitely found that with your content!

[@bugbytes3923]

Thank you for your comment, much appreciated! Yours sounds similar to my own background (PHP, Python), and I really enjoy these simple but effective front-end tools like Alpine.js.
Glad the videos have been helpful for you, please let me know if you have any requests or anything. Thanks again!

[@silkogelman]

Awesome introduction to Alpine.js in a Django setting.
Thank you very much BugBytes!
Right when I was thinking "I wonder how easy it is to fill that x-data with a bit of data from a Django view" you started talking about exactly that. 😀
Looking forward to your upcoming videos combining Alpine.js with more Django bits and Htmx!

[@bugbytes3923]

Thanks Sil! It's an interesting subject - hoping to show some more stuff w/ Django and HTMX soon. 😀

[@ale6au]

Thanks, that's great! Greedy for the next video :) The stack Django + htmx + Alpine seems very promising!

[@bugbytes3923]

Thank you!

[@leventadam]

Hi, thank you for Alpine and Htmx tutorials.

[@bugbytes3923]

Hi - you're welcome! Thanks for commenting.

[@mohammadshafayethaydar1652]

This is awesome man! Thank you very much, please continue.

[@bugbytes3923]

Thank you Mohammad, appreciated as always!

[@MrChinx25]

Thanks for the content! Keep it up. I love your Django HTMX tutorials. They help(ed) me immensely!

[@bugbytes3923]

Thanks Tomi, glad to hear that!

[@franklynOse]

this is really a goldmine. I

[@anatolys9203]

thank you very much! good job!

[@bugbytes3923]

Thanks Anatoly!

[@defidelity]

You really get the update 😁😁😁

[@seydinaoumarsamabaly1806]

Thank you so much man !

[@bugbytes3923]

Thanks again mate!

[@Rob-cq1nf]

Thanks a lot 🙏Nice combi

[@bugbytes3923]

Thanks!

[@mgr1282]

Hi, thanks. After Svelte I like Alpine, It's easy and ready to use. If they add components support to Alpine It will be great.

[@bugbytes3923]

Yeah, minimal setup required for Alpine which is nice! Thanks for commenting.

[@umairsarwar7472]

great job

[@bugbytes3923]

Thank you!

[@timothymalahy7880]

Great video this was very helpful.
I had a few questions.
1. What's the difference between x-on:click or @click?
2. Does the @ reference the prior x-data in the div?
3. Can you do x-data and y-on:click?
4. When adding in dynamic classes , Do you need to do it with this javascript function style or is there other options as well?

[@nicenaija9952]

Ouuuuuuuuu. Love it. When do we get to HTMX + Alpine

[@bugbytes3923]

An HTMX and Alpine integration video will be coming quite soon I think!
From your other comment, I'm also hoping to do some Hyperscript videos later on. The focus is on Alpine for the moment (Alpine and Hyperscript are quite similar in what they can do, albeit in different ways - but I do plan to cover both of these).
Thanks for commenting!

[@railspider]

Great intro video, thanks! Does x-data keep the data private, or can it be viewed the hacker's favourite tool F12? I'm assuming best practice is to use the django View to filter data before fetching it with x-init?

[@bugbytes3923]

Thanks! The data stored on the x-data directive is available client-side, so it's accessible via F12 - it's important not to store sensitive information in x-data (or return any sensitive information to the client-side, in general).
You should filter on the Django view beforehand. If you were using a library such as django-ninja or Django REST Framework to serialize models/querysets, you can specify explicitly the fields you want to return (more on that in the next video or two).

[@jasonvilla3696]

quick question, when fetching the data using alpine, can you use the jinja2 syntax for the url? like {% url 'people' %}

[@bugbytes3923]

Hey Jason - yes, you should be able to embed the URL template tag into the alpine attribute!

[@nicenaija9952]

Hyperscript tooo