Hi, would like to share a major update of the Mono Web Framework:
Twitter Clone in 60 lines of Nim, 7m Video
Simple and clean code, fluid interactive UI, plain Nim C-runtime no need to compile to JS.
Examples, Sources
Checkout readme, there are more examples https://github.com/al6x/nim/tree/main/mono
Current state
I'm activelly using it for Notes App.
It may have some edge cases, and I'm going to make some minor improvements in the future, but those are mostly polishing, all major features are implemented and work.
Main differences from Karax
I wrote detailed explanation here https://github.com/al6x/nim/blob/main/mono/docs/how_it_works.md
This is basically like this frameworks https://github.com/liveviews/liveviews right?
Yes, Mono is a blend of Svelte and Phoenix LiveView. The biggest difference from original Phoenix LiveVeiw and many other LiveView implementations are support for Stateful Components and BiDirectionalBindings (copied from Svelte).
JSON DB? Oh no
I used it because it's the simplest thing possible, I wanted to focus on UI and don't distract people with other things.
About Desktop, Mobile and SPA. Similar approach could be used.
The way it works, the framework split in 2 parts a) the framework itself and b) tiny adapter that forwards events to main part and renders instructions sent back from the main part.
So, it's possible to have many adapters, for many different platforms. The framework itself doesn't care how you going to render UI, be it with Web HTML and JS, or Java FX, or GTK or SwiftUI. And, the good part is that adapter is small and easy to write. It may require to slightly modify the main part, to alter/unify events model.
There are a few things that Phoenix LiveView does that might be worth exploring on your end (maybe you already are):
There are a few reasons though I'd pick Phoenix LiveView over Mono though...
I think Mono is a great step towards something like Phoenix LiveView but I believe it also has a way to go before it could be considered for any serious production use. Very cool project though! I hope you continue to iterate on it!
One final note - have you considered a name other than Mono? There's already a .NET project named Mono which is quite well known I believe.
Or whichever is the most popular in the community, really, unless there is a fundamental design conflict. I like that there's so much experimentation in the Nim community in regards to web tools, but if wider use is an ambition at all, the community needs to coalesce around at least a few of the key building blocks.
I.e. would it be inefficient for those mostly static pages, as it maybe checks for changes to the DOM more frequently than really necessary?
Mono provides one simple implementation for Transport and Session management. If you need custom, possible way would be to copy mono/http/server.nim and alter it the way you like.
it has a way to go before it could be considered for any serious production use.
About different name... I haven't thought about it as .NET and Nim communities are quite distant and have no intersection, so there seems to be no name conflict... maybe if there going to be confusion the yes.
Thanks for the detailed response. I think everything but the reply to #4 makes sense and cuts down on scope. The user isn't going to be able to fix the fact that you have a single threaded http server handling all requests. If the server is overburdened- there's nothing the user can do, and it's impossible for them to scale beyond the throughput of a single core running an async event loop.
It's less about confusion and more about people being able to find your project if they're interested. Searching for mono is going to return results for the .NET project.
Unbelievable... I gave ChatGPT Twitter Example code, and asked "Given this Twitter Clone in Nim using Mono Web Framework, can you write tick tac toe?" ChatGPT knows nothing about Mono, yet it created Tick Tack Toe example, and it almost works. I fixed styles a little bit, you can see the diff between original ChatGPT version and my fixes.
It renders interactive game board.
Hello together,
i've read this thread and i played around with the examples to get into it for a small tool i am working on...
I am not a genious and at the very beginning of my nim-lang journey - so please ban me not for the question: Which HTML5-Controls can i use with mono? I tried to setup a "Selection"-List - but it does not work: i even can't see the selection :(
Here's my code:
import base, mono/[core, http], std/os
import base/log
log_emitters.len = 0
type Hello = ref object of Component
name: string
input: string
list: string
proc render(self: Hello): El =
proc send =
echo self.input
echo self.list
el"":
el("input", it.bind_to(self.name))
el("textarea", it.bind_to(self.input))
el("button.primary", (text: "Done"), it.on_click(send))
el("selection",it.bind_to(self.list))
if not self.name.is_empty:
el("span", (text: "Hello " & self.name))
let asset_path = current_source_path().parent_dir.absolute_path
run_http_server((() => Hello()), asset_paths = @[asset_path], styles = @["/assets/twitter.css"])
Hi, I haven't tested the <select> el, it may need some update to work correctly, I'm going to look into it in a couple days. One error in your code is selection instead of select.
If you decide to dig into it, here's explanation how HTML inputs works in Mono:
The value attribute used to set and get the value of HTML inputs.
The HTML inputs are messy and every input has its own way of setting value. For example to set initial value for textarea the inner HTML should be used, but to update it or read later the textarea.value had to be used, same with input type=checkbox etc.
Mono nomalises that mess and provides unified value to set or get value on built-in HTML inputs and custom inputs like WebComponent.
The code responsible for that unification is ext/html.normalize - used to render initial HTML, important for Search Engines and Marketing, and ElUpdater in mono.ts.
The good thing is that this unification code had to be written only once, only for messy built-in HTML elements. As custom elements you are going to use are supposed to be working correctly and unified out of the box.