Django & Alpine.js - Simple and Complex Component State for Building Interactive UIs (a comparison)
In this video, we look at how to build interactive UIs with Alpine.js, using two main methods.
1. Defining interactivity with simple state - useful for toggling visibiility, opening/closing modals, tabs, alerts, etc
2. Storing complex data in Alpine state, after serialization from a backend. This allows us to manage the entirety of our data in the Alpine component.
📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
01:31 Creating a Team Model
04:29 Conditionally Showing Content Based on Simple Alpine State
08:58 Managing Complex Data in Alpine Components
14:33 Using Django’s json_script filter to load data into Alpine components
18:20 Highlighting rows using Alpine state
21:04 Rotating Elements using Alpine state
☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:
https://ko-fi.com/bugbytes
▶️ Full Playlist:
• Alpine.js
𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:
📖 Blog: https://bugbytes.io/posts/
👾 Github: https://github.com/bugbytes-io/
🐦 Twitter: / bugbytesio
📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
Alpine.js docs: https://alpinejs.dev/start-here
Bootstrap Tables: https://getbootstrap.com/docs/5.0/con...
json_script filter: https://docs.djangoproject.com/en/4.1...
REST Framework: https://www.django-rest-framework.org/
#django #python #javascript #alpinejs