search

maxpert / marmot

A distributed SQLite replicator built on top of NATS
https://maxpert.github.io/marmot/
MIT License
1.81k stars 41 forks source link

web gui ? #99

Open gedw99 opened 9 months ago

gedw99 commented 9 months ago

Hey @maxpert

Was thinking that a HTMX based Web GUi might be a nice match for Marmot ? All golang of course..

what sort of things would be useful to expose ?

gedw99 commented 4 months ago

This can easily be done using the NATS CLI running with the NATS agent ( marmot ).

The NATS Cli can do JSON out, and so we can easily just call the NATS CLI, which calls NATS, etc

gedw99 commented 3 months ago

I have started using datastar for HTMX based Web GUI. https://github.com/delaneyj/datastar

I think it could be a good match for a Marmot Web GUI.

The backed uses a golang and NATS Jetstream, allowing it to be scaled out with the state synced from NATS JetStream cluster.

The golang templating system uses templ to make it very easy to build new GUI and for good runtime performance. https://templ.guide

The client side JS is all typescript, and allows plugins to be added as you please. It's using NPM, but I use bun and it works fine.

The css is based on Tailwind and Daisy https://daisyui.com, but Shoelace https://shoelace.style can also be used. It has examples for both.

The build system uses Task: https://taskfile.dev

Interesting Aspects

Everything is unit tested using Playwright, and so any GUI you build can have full tests that touches all the code. This is a huge advantage compared to using the standard htmx.

The other thing is that with it using NATS, it supports global ( in terms of many servers in many regions ) real time updates to the GUI over SEE, and so allows a synchronised GUI of Marmot, not matter how many Marmot servers you have or how many users are editing data in real time.

The fact that its uses NATS Jetstream to do its Magic makes for operational efficiency and a nice match with Marmot since it can use the same NATS server that Marmot is using.

The real time nature allows not just Dashboard scenarios, but also editing data such that if any data changes on the backend, you get it updated in the GUI where your doing edits. This allows many use cases for managing Marmot where there maybe many OPS users.

Examples

The home page has a demonstration of the classic Todo utilising real time editing at https://data-star.dev.

The golang code is at https://github.com/delaneyj/datastar/blob/main/backends/go/site/routes_home.templ

If you open 2 tabs, and edit something in one, you will see the other tabs update in real time. If you put 1 row into edit mode, it will go into edit mode on the other tab, illustrating to the other users that someone else is editing the data.

The real time TODO example is pretty new and works fine on Desktop browsers, but has a few bugs on IOS Safari still to do with focus.

https://data-star.dev/examples/edit_row is NOT using real time editing sync, and if you open 2 tabs, you will see how edits are not synced in real time to the GUI.