https://github.com/jipok/jalpine
Proof of concept integration of Go + Alpine.js for building SPAs with JSON APIs. No Node.js, no build steps, just a clean developer experience. Features Todo app demo.
https://github.com/jipok/jalpine
alpinejs go golang lightweight microframework no-npm proof-of-concept reactive todo
Last synced: 10 days ago
JSON representation
Proof of concept integration of Go + Alpine.js for building SPAs with JSON APIs. No Node.js, no build steps, just a clean developer experience. Features Todo app demo.
- Host: GitHub
- URL: https://github.com/jipok/jalpine
- Owner: Jipok
- Created: 2025-02-26T12:22:52.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2025-03-07T16:35:02.000Z (7 months ago)
- Last Synced: 2025-03-07T17:32:10.521Z (7 months ago)
- Topics: alpinejs, go, golang, lightweight, microframework, no-npm, proof-of-concept, reactive, todo
- Language: Go
- Homepage:
- Size: 25.4 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JAlpine: A Go + Alpine.js Micro-Framework
> [!IMPORTANT]
> **Proof of Concept: Alternative Alpine.js Usage**
>
> This project demonstrates an **experimental approach** to Alpine.js usage. While Alpine.js was designed primarily for enhancing server-rendered HTML (as used with Laravel Livewire or go templ), JAlpine repurposes it as a SPA framework with JSON API communication.
>
> This architectural pattern diverges from Alpine's intended use case but explores its potential for lightweight Go-backed SPAs without complex frontend tooling. Consider it an interesting experiment rather than a production-ready solution.
>
> *This README was generated with Anthropic Claude 3.7 Sonnet.* Sorry for that
JAlpine is a lightweight micro-framework that seamlessly integrates Go on the backend with Alpine.js on the frontend. It provides a simple yet powerful way to build interactive web applications with minimal boilerplate.
DEMO: https://alpine.jipok.ru/
## Features
- **Zero-build frontend** - No Node.js, webpack, or complex build setup required
- **Server-side template handling** with dynamic includes and hot-reloading
- **Automatic dependency management** for external libraries (Alpine.js, Tailwind CSS)
- **Component-namespaced data binding** between server and client
- **Integrated AJAX helpers** via Alpine.js magic methods
- **Form validation** using go-playground/validator
- **Hot code reload detection** with automatic client refresh
## How It Works
JAlpine brings together the simplicity of Alpine.js with the performance of Go:
1. **Backend**: Go handles routing, data persistence, and HTML template rendering
2. **Frontend**: Alpine.js provides reactive data binding and DOM manipulation
3. **Integration**: JTemplate connects the two worlds with automatic data synchronization
The framework handles the complexities of:
- Downloading and managing frontend dependencies
- Injecting scripts and styles into HTML
- Processing template includes and component definitions
- Synchronizing component state between server and client
## Demo Todo Application
The included Todo app demonstrates JAlpine's capabilities:
- Create, toggle, and delete todos
- Filter todos by status (all, active, completed)
- Clear completed todos
- Server-side validation
- Real-time UI updates without page reloads
- Automatic version checking for hot reloads
### Installation
1. Clone this repository:
```
git clone https://github.com/yourusername/jalpine.git
cd jalpine
```
2. Run the application:
```
go run *.go
```
3. Open your browser at [http://localhost:8080](http://localhost:8080)
## Technical Details
### Core Components
#### JTemplate
The template engine handles:
- Dynamic file includes (`<% include file %>`)
- Source mapping for debugging
- Alpine.js component integration
- Version tracking for hot reloads
#### Static Library Management
Automatically downloads and manages:
- Alpine.js core and plugins
- Tailwind CSS
- Other frontend dependencies
#### AJAX Integration
Provides seamless API communication through Alpine.js magic methods:
- `$get(url)`
- `$post(url, data)`
- `$put(url, data)`
- `$patch(url, data)`
- `$delete(url, data)`
`data` is optional
### Directory Structure
```
├── static/ # Auto-generated frontend dependencies
├── index.html # Main template
├── main.go # Application entrypoint and routes
├── template.go # Template engine implementation
├── helpers.js # Client-side helpers
└── data.db # BuntDB database file (auto-created)
```
## Why Use JAlpine?
JAlpine is perfect for:
- Small to medium web applications
- Projects that need rapid development
- Teams that prefer Go on the backend
- Developers who want Alpine.js simplicity without complex frontend tooling