nimforum mirror - Electron-like app with Nim

ElAfalw (orginal) [2020-09-18T11:13:48+02:00] view original

Basically, this question is more like food for thought.

I've been thinking of create a webview-based app (in order to be portable, one code base and all that) but do it in nim.

Of course, I know about Electron but it seems to me to bloated (plus, why add Node.js when I don't need it).

I've also had a look at Flutter. I'm not really sure how mature it is, but it does look interest. However, again, too bloated. (It took me 1 day only to get it installed on mac Os Catalina, and the files seem all over the place. Plus, Dart? Really?)

So... The idea is:

The app has to be written in Nim (the backend)

The app loads a webview-type of thing (Chromium-based?)

We load a given page to the webview

How would I go about that?

mrhdias (orginal) [2020-09-18T13:37:25+02:00] view original

Check this repository: https://github.com/juancarlospaco/webgui

https://juancarlospaco.github.io/webgui/

mratsim (orginal) [2020-09-18T15:21:06+02:00] view original

Also webview:

https://github.com/oskca/webview

have a small PoC here where I use it for scientific charts:

https://github.com/numforge/monocle

The main issue with webview is that you don't have access to any filesystem operation (like saving or loading a file).

alexeypetrushin (orginal) [2020-09-18T16:11:50+02:00] view original

Are there any app built with those libraries?

francisl (orginal) [2020-09-19T07:10:33+02:00] view original

If it's any help, oskca/webview wasn't working for me witht he new version of webview. So I made some changes in a fork.

https://github.com/francisl/webview https://github.com/oskca/webview/pull/17

It doesn't have all the features of the original repo, but at least you can get going.

This is a great start, imo, to have something similar to electron. Even better, because you don't have to package a whole browser with your app. The drawback is that it can render differently on each OSes.

snej (orginal) [2020-09-19T18:05:32+02:00] view original

For mobile apps there's Cordova aka PhoneGap. It’s a packaging layer that wraps your web-based app in a native (iOS or Android) web view. I don’t know if it supports desktop apps though.

I agree about Electron being, um, sub-optimal. I hate the idea of each app carrying an entire Chromium browser with it.

snej (orginal) [2020-09-19T18:18:04+02:00] view original

It works like React that implemented on Nim side.

OK, that really got my attention. I’ve been wanting to build a great social/collaboration app for a long time (with a distributed/p2p back end.) It makes sense to use a web view as the primary UI since it involves lots of text & multimedia layout, but I really don’t want to implement the code as JS (or even Nim compiled to JS.) So this idea sounds great.

It sounds like this isn’t available in Nim, though, just Elixir? And implementing all the DOM-diffing and updating sounds challenging. Hmm.

(Incidentally, “like React but with native views” is exactly what Apple's new-ish SwiftUI framework is. You describe the UI declaratively in Swift, and it builds it out of UIKit or AppKit views. I’ve been learning it recently and really enjoying it.)

alexeypetrushin (orginal) [2020-09-19T20:53:18+02:00] view original

It sounds like this isn’t available in Nim, though, just Elixir? And implementing all the DOM-diffing and updating sounds challenging. Hmm.

Yes the LiveView is implementation of this concept in Elixir.

I don't think it will be too complicated to implement. Following things need to be implemented.

Component Tree (easy)

Diff Algoritm that compares 2 Component Trees and produces sequence of operations how to transform one into another. (should be relatively easy too as recursive function, for leaf component it's trival - just compare two leafs, for container component - iterate children and compare each. And add each diff to list)

Event serialisation (easy, there could be some tiny surprises, but given that LiveView does it, it should be ok). Every JS event, even keystroke should be serialised and sent to Nim (it may sount like a performance hit, but it will be fast).

Tiny JS that receive list of diffs produced by Nim and apply it to current DOM (easy).

Nim listener that receives JS events as JSON and dispatches it to Nim handlers (easy).

Data model in Nim should be immutable (looks like Nim support that) for fast equality checks (it would work without it, but that's the key for performance, there are lots of comparison operations in React-like model, it should be fast by comparing only the object reference, so objects representing the model should be immutable, seems like it also should be possible with nim).

Templating language that build Component Tree (easy, just use builders, like div(id = "list", div(id = "list-item", class="some-style", ...).

Some kinda framework to give all that structure and wrap in a nice way (easy).

There are 2 things that make it easier:

Elixir LiveView solves much harder problem as it's Client/Server framework and it has to deal with network latency, that's not easy. But with descktop app we don't have that problem, so huge simplification.

React.JS is large because it tries to squeeze every possible perfromance bit, and doing that is not easy. But we don't need that (at least not in v1), we don't need that because even in the most naive adn "slow" implementation this concept works very fast. Again huge simplification.

I'm going to try to implement this approach in ~6 months, as I'm going to need to write some UI. It should take 1-2 weeks of full time work.

P.S.

I would say it would be beneficial to read how React.JS works and maybe built simple Todo app with it (React.JS TodoMVC is a good example).

alexeypetrushin (orginal) [2020-09-19T21:10:08+02:00] view original

You describe the UI declaratively in Swift, and it builds it out of UIKit or AppKit views

This approach goes one step further. It not only builds the initial version of UI, but also magically updates it when you update the model. I don't know if Swift UI also does that.

snej (orginal) [2020-09-21T00:08:07+02:00] view original

[OT] Yeah, SwiftUI can do that if you also use the Combine framework, which is a ReactiveX-type data flow system (with some neat support for backpressure.) You create a Publisher for your model data, and your view logic subscribes to that. Then model changes will trigger view changes.

alexeypetrushin (orginal) [2020-09-21T14:23:34+02:00] view original

I see. There are the general concept of "reactivity". And lots of ways to implement it

Native reactivity, "magic" like Elm or Svelte.

Optimised brute-force way like React.JS with smart DIFF algorithm.

publish/observe pattern like RxJS (Swift UI Combine seems to be that kind of framework).

We can immediately rule out magical native reactivity as it's too hard to implement. Publish/Observe is very performance efficient but (at least in my understanding) requires more code to write than should be. I personally think that optimised brute-force way how React.JS works is most balanced way it's easy to implement and requires less code to write and has good enough performance something like (I may be wrong but seems it should be like that) O(log n) where n is the size of the component tree.

Mirror of forum.nim-lang.org

6834 :: Electron-like app with Nim