Introduction to Alpine.js

This chapter introduces Alpine.js, a JavaScript framework that combines the simplicity of jQuery with the reactivity of modern frameworks like Vue.js. The speaker discusses the motivations behind the framework and its use cases, including adding interactive elements to static sites and integrating with third-party libraries.

Transcript

chevron_right

Play full episode

chevron_right

Transcript

Episode notes

[00:03:41] Caleb gives us an introduction about himself, how long he’s been doing programming, and what he’s doing now.

[00:06:29] Jason brings up a popular blog post Caleb wrote a few years ago and he tells us a little bit about it.

[00:10:48] We hear an overview of what Alpine is and when it started.

[00:16:42] Caleb explains things Alpine does directly correlated to Stimulus.

[00:19:56] We find out what Caleb does if gets into a situation with listening for events from third party JavaScript library.

[00:26:56] Jason tells us the pain point for him with making a transition on a modal in Stimulus, which is why he went to Alpine.

[00:32:00] Caleb released a series of components that is a paid add on and we hear more about them and Headless UI. He also shares his grand vision with Headless UI.

[00:40:41] Andrew tells us about a new blogging thing Twitter released.

[00:45:35] Caleb details what Livewire is and the tell us some of the implementation details to compare it to some of the tools there are in Rails.

[00:48:59] In Livewire, we learn if state declared in the front end or is it declared in the PHP side of things.

[00:52:25] Jason brings up how WebSockets doesn’t work on Livewire, only on AJAX, and Caleb talks more about this.

[00:54:33] Jason mentions Stimulus Reflex and talks about why his favorite library is CableReady, and Chris tells us about using Turbo.

[00:57:39] Morph Plugin is new on Alpine.js and Caleb explains what it does. Caleb wonders if there’s a big con or trade off using Turbo.

[01:05:56] Caleb mentions a Tailwind bootstrap thing he’s used that’s cool called daisyUI.

[01:09:03] Jason brings up the acronym TALL stack which is Tailwind, Alpine.js, Laravel, and Livewire, and asks Caleb how he feels creating two of these in the stack.

[01:12:18] Find out where you can follow Caleb online and support his work.

Panelists:

Jason Charnes

Chris Oliver

Andrew Mason

Guest:

Caleb Porzio

Sponsor:

Honeybadger

Links:

Jason Charnes Twitter

Chris Oliver Twitter