Fir

A Go toolkit to build reactive web interfaces using: Go, html/template and alpinejs.

The Fir toolkit is designed for Go developers with moderate html/css & js skills who want to progressively build reactive web apps without mastering complex web frameworks. It includes a Go library and an Alpine.js plugin. Fir can be used for building passable UIs with low effort and is a good fit for internal tools, interactive forms and real-time feeds.

Fir has a simple and predictable server and client API with only one new (and weird) expression:

  <div @fir:create-chirp:ok::chirp="$fir.prependEl()">
  ...
  </div>

snippet from chirper example

Fir’s magic event handling expression fir:event-name:event-state::template-name piggybacks on alpinejs event binding syntax to declare html/templates to be re-rendered on the server. Once accustomed to this weirdness, Fir unlocks a great deal of productivity while adhering to web standards to enable rich and interactive apps

Fir sits somewhere between Phoenix Liveview and htmx in terms of capabilities. It's event-driven like Liveview but, instead of providing atomic UI diffs, it returns html fragments like htmx. Fir is closer to liveview since it ships with a server library. Similar to Liveview, Fir has the concept of routes: Fir Route, Liveview Router, loading data on page load: Fir OnLoad, Liveview onmount and handling user events: Fir OnEvent, Liveview handle_event.

Feature Highlights:

Server rendered: Render HTML on the server using Go’s standard html templating library.
DOM Patching: React to user or server events to update only the changed parts of a web page.
Progressive enhancement: Begin with a JavaScript-free HTML file and Fir's Go server API for quick setup. Gradually improve to avoid page reloads, using Fir's Alpine.js plugin for DOM updates.
Publish over websocket: Broadcast html fragments over websocket in response to both client and server events.
Interactivity over standard HTTP: Fir possesses a built-in pubsub over websocket capability to broadcast UI diff changes to connected clients. However, it doesn't solely rely on websockets. It's still possible to disable websockets and benefit from UI diffs sent over standard HTTP.
Broadcast from server: Broadcast page changes to specific connected clients.
Error tracking: Show and hide user specific errors on the page by simply returning an error or nil.
Development live reload: HTML pages reload automatically on edits if development mode is enabled

Usage

Demo & Quickstart

Examples

How it works

CLI

You don't need this to get started but the the cli can be used to generate a simple quickstart boilerplate:

go run github.com/livefir/cli gen project -n quickstart // generates a folder named quickstart
cd quickstart
go run main.go
open localhost:9867

go run github.com/livefir/cli gen route -n index // generates a new route

Community

on event send a diff of a block/template

We want to send a diff of the changed template instead of everything. This is similar to how phoenix liveview works: https://www.poeticoding.com/how-phoenix-liveview-works/

For the following example html page:

<div
    @fir:create:ok::todo="$fir.appendEl()"
    @fir:query:ok::todos="$fir.replace()">
    {{ block "todos" }}
        <div>List of todos</div>
        <div>Number of todos: {{ len .todos }}</div>
        <ul>
            {{ range .todos }}
                {{ block "todo" . }}
                    <li>{{ .Text }}</li>
                {{ end }}
            {{ end }}
        </ul>
    {{ end }}
</div>

OnLoad:

Include the static parts in the rendered html page when the page is first loaded:

<script>
{
    "todos": {
        "d": [
            "template@todo",
            "{{ len .todos }}"
        ],
        "s": [
            "<div>List of todos</div>\n<ul>",
            "</ul>\n<div>Number of todos: ",
            "</div>"
        ]
    },
    "todo": {
        "d": [
            "{{.Text}}"
        ],
        "s": [
            "<li>",
            "</li>"
        ]
    }
}</script>

Respond with dynamic parts to an event:

OnEvent('create',...)

{
    "type": "@fir:create:ok::todo",
    "detail": {
        "diff": [
            "todo 1"
        ]
    },
    "target": ".fir-create-ok--todo"
}

OnEvent('query',...)

{
    "type": "@fir:query:ok::todos",
    "detail": {
        "diff": {
            "0": {
                "d": [
                    [
                        "todo 1"
                    ],
                    [
                        "todo 2"
                    ]
                ]
            }
        }
    },
    "target": "fir-query-ok--todos"
}

The fir alpinejs plugin combines the static and dynamic parts to update the block/template in the browser.

livefir / fir Goto Github PK

fir's Introduction

Fir

Usage

CLI

Community

fir's People

Contributors

Stargazers

Watchers

Forkers

fir's Issues

Recommend Projects

Recommend Topics

Recommend Org