Django and Alpine.js - Client Side Filtering and Django Forms Integration

Then we'll create a form with a MultipleChoiceField, allowing users to select and deselect multiple genres of music and filter the form accordingly.

All this will integrate with the directives provided by Alpine, allowing developers to move the logic of filtering to the client, which can be a performance booster for your servers!

📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
00:44 Setup
01:12 Creating Django model
01:46 Loading data with custom management script
03:43 Fetching data with x-init directive
07:55 Creating Form class with ChoiceField
10:28 Rendering Alpine-powered field with django-widget-tweaks
13:01 Filtering data by selected genre
14:04 Getting initial value with x-ref directive
15:40 Adding MultipleChoiceField to form class
18:18 Writing JavaScript function to update x-data value on @change event
20:52 JavaScript spread operator with arrays
21:25 Benefits of client-side filtering vs. HTMX-based approach

☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:

▶️ Full Playlist:

𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:

📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:

#django #alpinejs #python

[danielcallaghan]

It would be great to expand more on what you said at the end about client-side rendering and when to use alpine and when to use htmx - this was another great video, enjoying your content a lot!

[seydinaoumarsamabaly]

Always a pleasure to see your videos. Always interested and quality content. Just thank you man.

[homunculus]

Great tutorial! I have a question though: is there a reason you are using a @change on the form field instead of a x-model directive? As far as I can tell, using x-model could avoid all the code related to the checkboxes logic

[hphp]

Great tutorial!

I watched your HTMX tutorials. HTMX is totally awesome.

For now HTMX seems a better/simpler way to do pretty much all you showed so far with Alpine. The argument about 'Alpine does not overload the backend" is kind of weak in this example. Selecting 10 or 50 bands from the db is more a "rounding error" difference. It does not matter. If it mattered we could optimize, but here (and in 99% of the times) if doesn't matter.

From my experience with Vue (multiple years) it looks like Alpine "can do it all". But HTMX is simpler for most of the stuff. HTMX does not force you to go back-and-forth with writing axios calls and encode/decode json... Alpine seems needed only for 'visual' stuff (like change tab's classes or something simple) and HTMX can do the bulk of the work.

I am watching the Alpine tutorials trying to figure out if it can do something else "easier" than HTMX that I've been missing in my head. So far the score heavily is in HTMX'es favor.

[andrewwarner]

Out of interest, why not use a ModelChoiceField instead of defining your GENRE_CHOICES using a list expression?