Alpine HTMX Go Web App

Serving a web experience similar to React, through Alpine.js, HTMX served by a Go-chi server.

Server bootstrapped from.

Stack

• alpine.js

• htmx

• Tailwind CSS

• Hyper UI Components

• Go

• Go Chi

Features

• Fully CSP compliant.

• Authentication and Authorization flows with JWT.

• Switch between json and html response types based on Accept header. Keeps the API interoperable with other clients.

• Caching for html responses in addition to json responses.

Base features are carried over from the boilerplate.

Setup

Run make to see all available commands.

Install dependencies

cd server
make packages_install

Run

Before running, make sure generate the tailwindcss styles.

cd server/templates
yarn install
yarn build

Alternatively, you can run yarn watch to watch for changes during development.

cd server
make run

Design Considerations and Advice

• All htmx response logic goes into the htmx directory, while the handlers directory contains the json response logic and invokes htmx handlers if the request expects htmx responses.

• Create helper functions to return specific error types. This will help you to handle errors in a more granular way. Example: NotFound, Unauthorized, Forbidden, BadRequest, InternalServerError could trigger rendering of a toast notification or a banner.

• Utilize your language's native templating engine to render HTML more dynamically. Example: Go's html/template package or Python's jinja2 package.

Additional Resources

• Lit - A library for building fast, lightweight web components. (Requires a build step, and relies on node.js ecosystem)

• spf.js - A lightweight JS framework used by YouTube to do a lot of things that HTMX does, while relying on JSON responses from the server.

Pros and Cons

This approach is not a replacement for React and co. But it can be used when you are looking for the following set of pros, while being aware of the cons.

Pros

• Potentially higher RPS (Requests per second) if coupled with a strong backend, with caching/CDNs and other optimizations.

• Server Driven UIs. (SEO, Easier A/B testing, etc.)

• Co-opt (incrementally) with existing applications.

• Simpler DevOps. (No need to deploy a separate frontend app)

• Skip expensive JSON serialization and deserialization on both ends.

Cons

• CSP (Content Security Policy) can be a nightmare to configure.

  • Refer to this for Alpine.js. (TL;DR: Strict CSP takes away most of the ease of Alpine.js)

  • Refer to this for HTMX. (TL;DR: HTMX with tight configuration can be secure, but the lack of Alpine.js's ease makes the overall experience less pleasant)

• More data transferred per Request (HTML is more verbose than JSON)

• Slower/Constrained Developer Experience (Hard to Debug, Poor IDE support, syntax highlighting, autocomplete, etc.)

• Code Sharing and Monorepo advantages from a stack like React+React Native are lost.