You can create Phoenix LiveView applications without writing any JavaScript at all, which is an appealing prospect for many people, as JavaScript frameworks can be complicated and bloated. But JavaScript still has a place in LiveView apps for client-side operations that don't require a round-trip to the server and for creating smooth UI transitions. Luckily for us there is an easy-to-use JavaScript framework that works hand-in-glove with Phoenix LiveView.
AlpineJS, sometimes called Tailwind for JavaScript, is a simple and lightweight JavaScript framework that allows you to sprinkle bits of JavaScript code throughout your HTML markup. Alpine integrates seamlessly with LiveView, meaning that Alpine code doesn't need to be fenced off with phx-update="ignore" and it can even react to changes in LiveView assigns.
In this talk we will give an overview of AlpineJS, drill into how Alpine can interact with LiveView code, and look at 3 real-world examples: 1) expanding and contracting content with "Read more/less...", 2) creating a modal with enter and leave transitions, and 3) implementing a flash notice alert.