Hi,
Today, I hacked together a simple templating engine in Nim, yet to be perfected. Here it is: https://mildred.github.io/nim-svelte/ and I was wondering if I could embed the Nim compiler on a webpage to make it possible to play with my code in real-time in the browser. Is it possible?
The idea behind my code was to have a templating system that avoided the virtual DOM. I discovered a while ago SvelteJS (at the end of version 2) and it provides a nice alternative to Virtual DOM by updating only DOM nodes that needs updating. It avoids DOM diffing nonsense. With version 3 it also provides JavaScript with reactive abilities for the code logic. It all works by compiling the template file to javascript.
Yesterday evening, I took the generated javascript for simple examples and looked it up. I reproduced how it worked in Nim today (with large areas missing still).
In addition to that, and to avoid inventing yet another templating syntax, I took the the approach of directly using the HTML <template> element and map the elements with a simple DSL in Nim to JSON data structure. That's where I need the Nim compiler on the browser. At first I thought I would need macros or templates, but i nthe end plain procedures with the do syntax worked very well. That's how powerful Nim already is.
Nice project.
If your back end has access to the compiler, then you don't need to "embed" anything. You can simply use AJAX or WebSockets to transfer data in real-time.
I just finished implementing two-way binding, and I'm using macros to generate automatic getters and setters for arbitrary datasets (setters with the ability to update the whole template on parts that changed only)
Also, compared to what i did originally, it can now template any arbitrary dataset, not just JsonNode. It got a new name and a new home at: https://mildred.github.io/nclearseam/
I plan to start rewriting an app I did with Svelte using this, not sure I'll have time to finish, but just starting, it got me a fair number of issues handled.
I also managed to create a minimalist scoped CSS engine to allow defining CSS rules scoped for the component you write.
Is any abstraction or some generic algorithm exists to build a bridge between graph rewrite (DOM) and async message passing (AJAX)?
Looking on a task on writing universal frontend engine, which transfers changes between in-browser DOM and server-side application model (with DOM mirror in every session), it seems to be good to use a priority queue to sync interface and application run on a server using some message/graph rewrite engine in frontend.