Reactive html apps in Go & alpine.js
source link: https://livefir.fly.dev/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Build progressively enhanced reactive html apps
using Go, html/template & Alpine.js
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.
Scroll below to see a demo & a quickstart guide ↓ or read about how it works.
1. Start with html/template
A Fir web page begins as a standard server-side rendered page which reloads to show the new state on user interaction. Click the buttons below to see it in action.
onEvent functions registered for
inc and dec. The
action/formaction attribute must be of the
format /?event=inc where
inc is the event name. Notice there is
no javascript in the page.
go run counter.goOpen your browser and go to http://localhost:9867 to see the counter in action.
<!DOCTYPE html><html lang="en"> <body> {{ block "count" . }} <div>Count: {{ .count }}</div> {{ end }} <form method="post"> <button formaction="/?event=inc" type="submit"> + </button> <button formaction="/?event=dec" type="submit"> - </button> </form> </body></html>
2. Enhance with alpinejs
Later we use fir's alpinejs plugin to enhance the form
submission and receive the re-rendered template as an
event. The event is handled by the
$fir.replace() helper function which
updates the inner content of the div on which the event
listener is declared. Click the buttons below to see
reactivity in action.
@fir:event-name:event-state::template-name
piggybacks on
alpinejs event binding syntax
to declare
html/templates
to be re-rendered on the server.
If the handler response for event
inc is ok then
re-render the template named
count on the server and return the
html output to the event listener as a
CustomEvent. The
CustomEvent.detail
property is used by the alpinejs plugin helper
$fir.replace() to update the div
on which the listener is declared.
go run counter.goOpen your browser and go to http://localhost:9867 to see the reactive counter in action.
<!DOCTYPE html><html lang="en"> <head> <script defer src="https://unpkg.com/@livefir/fir@latest/dist/fir.min.js"></script> <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script> </head> <body> <div x-data> <div @fir:inc:ok::count.window="$fir.replace()" @fir:dec:ok::count.window="$fir.replace()"> {{ block "count" . }} <div>Count: {{ .count }}</div> {{ end }} </div> <form method="post" @submit.prevent="$fir.submit()"> <button formaction="/?event=inc" type="submit"> + </button> <button formaction="/?event=dec" type="submit"> - </button> </form> </div> </body></html>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK