A Review of Alpine JS

I used Alpine JS in a recent project for work.

The application

It is an app embedded on a website for a state retirement benefit, funded by an income tax.

The app is a calculator to determine your contribution and benefit amount.

There is a form that takes initial input, and dynamic components and a graph to display the calculated output.

There are additional widgets under the graph that allow the user to explore calculations for different input.

There are several states the app can be in, depending on input.

The calculations, graph, and text depends on the state.

Choosing Alpine

I could have written the javascript from scratch, but it seemed like their should be a better way to manage state and reactivity.

Between React and Vue, Vue made more sense since you can sprinkle the syntax into HTML components in other languages.

I wanted to try Alpine because it is minimal yet seemed to cover my needs.

At 7kb, it has a tiny footprint.

A little deeper

Alpine is one of an emerging type of javascript libraries that are not framework dependent.

I'm seeing a similar pattern among these technologies:

https://stimulus.hotwired.dev/

https://livewire.laravel.com/docs/alpine

Outline

  1. Layout
  2. Input form
  3. Contributions
  4. Benefits graph
  5. Adjustment widgets
  6. Edit fields