tduccuong

Desktop GUI app with Elixir?

Hi,

is there any work on GUI with Elixir, that is similar to Electron/Javascript? My idea is to bundle Phoenix and BEAM into a single self-executable binary. When run, the Phoenix webserver will serve locally to a lightweight rendering engine like this one.

Thanks!

12 comments

/phoenix #gui

3 14060 12

2020-10-13 13:05:17 UTC

Marked As Solved

hauleth

Default Erlang distribution comes with Erlang bindings to WxWidgets (this is used by Wings3D - 3D modeller written in Erlang by @bjorng), this is what is used for example by observer application, so you can use this instead of launching full fledged HTTP server to mock the GUI application. Alternatively you can check out Scenic.

Post #1

Also Liked

evadne

I think for most use cases you can consider spawnfest/bakeware which packs a single executable which contains a launcher and an embedded archive.

I’ve indeed been toying with the idea of building an entirely independent Mac app bundle that is compatible with Sandboxing etc and around the existing Elixir releases concept. Since I don’t know how to write applications well for Linux / Windows I’ve focused on Macs. A particular concern that came up pretty quickly was handling of dynamically linked libraries, which I have had to manually relocate and then rewrite the entries in shared libraries within the release via a build script. So far the solution works for OpenSSL and I am sure will work with most libraries, but it has been quite an ugly experience so more thinking and studying is required to simplify it.

I have tried this approach with a Phoenix app and a Scenic app and more or less things work and I could put the app bundle on another machine and it works properly. (Usually Erlang is installed on top of OpenSSL installed via Homebrew on Macs so a simple Elixir release won’t work on other Macs without Homebrew / OpenSSL.)

For Windows, the same technique which was used to build portable apps could probably be used. I’ve not studied how though.

Post #4

axelson

Scenic Core Team

You will probably find this Proof of Concept relevant to your interests: GitHub - fazibear/elixir_desktop_application: Code for story: https://puddleofcode.com/story/how-to-create-desktop-application-with-elixir · GitHub (the startup instructions, although default are correct)

Which is powered by GitHub - nerves-web-kiosk/webengine_kiosk: Qt WebEngine-based kiosk · GitHub which runs with qt webengine. Of course that is different than electron, and may be more difficult to install. But on a machine that has qt installed, running mix phx.server will bring up a desktop window that loads http://localhost:4000

It would be interesting to see if someone could create a new Proof of Concept by adding bakeware to the above.

Post #7

und0ck3d

Lot of work to be done but you can give this a try:

https://github.com/crqra/webview

I can work on it if there’s interest.

Post #11

Last Post!

Sanjibukai

There is this little comment in the documentation (on the very bottom, the last code snippet) JavaScript interoperability — Phoenix LiveView v1.2.5 that explains how to interface with existing JS (in that case AlpineJS). I found that bit of code somehow cryptic but I used it as is and it’s working..
If someone has more links about that dom: and window.___.clone part I definitely want to learn more about that..

@ityonemo @elcritch I don’t have much experience with Front-end frameworks but I played a little with Vue and more recently with Svelte.
But I guess that it might be easier to do this (attaching liveview with some front end code) with Svelte.. Because there is no VDOM or complex runtime code.
Also, Svelte for example has some option to do server-side hydration, so I guess that it could be possible to use liveview to update not only some data but even the views of Svelte components.

Again I’m not that expert in Front-ends but I’ll definitely try some experience soon..
Already tried SS hydration with regular SSR Phoenix..

Anyway, I’m interested in that topic and waiting to read more from you guys!

Post #12