Keep Things Light With Alpine.js Till You Need Something Heavier

In the Laravel ecosystem we have an overwhelming number of ways to connect the front end to the backend. Overwhelming in this context is a good thing. Overwhelming means options, lots of good options.

Recently I've found myself reaching for the lowest tech option first. I've had a habit of reaching for the heavy hitters immediately. I would start a new bit of work and jump to building a Livewire component or a Vue/React component with Inertia. Sometimes going straight to these options right out of the gate is the right call based on project specifications.

However, I've found that starting with plain html sprinkled with a little bit of Alpine.js helps me arrive at something a little more performant much earlier. Obviously if you need updated html based on things occurring on the server during the lifecycle of the component this is not going to be a good fit for whatever you are building.

When I use Livewire I try to lean into Alpine.js as much as possible using the $wire directive to prevent unnecessary calls to the server. Starting with Alpine when I'm not sure if I'll need server reactivity gives me a head start on the markup performance if I do need to switch to a full blown Livewire component.