Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

web gui ? #99

Open
gedw99 opened this issue Dec 30, 2023 · 2 comments
Open

web gui ? #99

gedw99 opened this issue Dec 30, 2023 · 2 comments

Comments

@gedw99
Copy link

gedw99 commented Dec 30, 2023

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
Copy link
Author

gedw99 commented May 5, 2024

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
Copy link
Author

gedw99 commented Jun 21, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant