tduccuong

tduccuong

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!

Showing Posts 1 to 10

hauleth

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.

tduccuong

tduccuong OP

thanks a lot for the pointer to Scenic!

evadne

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.

sorentwo

sorentwo

Oban Core Team

That process reminded me of the old Yehuda Katz project, Tokaido:

I can’t believe that was 8 years ago now!

ityonemo

ityonemo

As much as I hate electron, I think if someone figured out how to bundle electron with elixir (possibly via bakeware) it would be really cool, even if it’s not much more than a proof of principle.

axelson

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.

elcritch

elcritch

I’ve been tempted to do exactly that. It’s what I use for IoT devices essentially. LiveView makes it much saner, but it’d be way cooler if you could use react-native somehow. As in LiveView modding vdom and re-using react native bindings.

ityonemo

ityonemo

wait, you’ve attached liveview to react native? That’s kind of amazing. Do you have a reference to how one does that?

elcritch

elcritch

haha, alas no. I should’ve been clearer. I use LiveView with a browser in kiosk mode. Though, I do think it would be awesome to use react-native with LiveView. I think it may be possible to hook up, but not sure… it depends if the JSX calls are translated to a vdom that LiveView’s mdom library could modify.

According to this SO answer it looks like react-native does create a vdom. However that vdom has a bunch of shadow nodes specific to react-native. It wouldn’t be impossible to use, but it may require a lot of effort copying react-native JSX functions. Though someone could write a macro that’d parse a JSX view into a LiveView template (it’d probably not be too hard to convert 90% of JS expressions into Elixir equivalents probably, then hand tuning to fix the rest). That post links to https://www.youtube.com/watch?v=8va9prUqjnA as a more detailed source on the internals of react-native.

So if one were to do it it’d probably require:

  • Get Nodejs setup with websocket to phoenix
  • Configure mdom to work on the vdom instead of a real DOM (might have to override some document.querySelector(…) calls)
  • Setup LiveView templates to create the appropriate vdom to match react-native outputs from JSX
  • Ensure react-native starts but doesn’t actually modify the vdom, so get the reference to it’s root vdom (somehow)

Then who knows if it’d break on every react-native update or not.

Where Next? Top

Trending in Questions Top

stjefim
Hello! Suppose you are building workflow (order / task / payment) processing system with the following requirements: Each workflow con...
New
Blokh
Hey guys, I’ve got a huge CSV ( around 10 GB ) that needs to be processed hourly Do you guys have any suggestions what is the best prac...
New
kszambelanczyk
Hello! Could someone please give me a help/sample code, how to delete a file from s3 using waffle/waffle_ecto from Phoenix app. I creat...
New
Onor.io
I have what I’ve heard referred to as a “lookup table” in my database. This is a way of assigning codes to common values. One common lo...
New
jaybe78
Hello, I’m developing a online persistent chat system (what’s app) like using elixir/dynamodb/aws for a mobile app(flutter). The diffic...
New
Trolleger
What approach to take when sending live updates to “random” users Hi! I have a question, I have a little chat app, and when I create a DM...
New
widianto
I think I’ve found a small improvement I could contribute to <%= web_namespace %>.CoreComponents (installer/templates/phx_web/compo...
New

Other Trending Topics Top

garrison
Hobbes is a low-level distributed database for the Elixir programming language. Hobbes provides a simple, safe, and scalable storage lay...
New
mcass19
ExRatatui lets you cook up rich terminal UIs in Elixir, powered by Rust’s ratatui via Rustler NIFs. Build interactive terminal applicatio...
New
Damirados
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge & Solve. They are GUI (Emerge) and State management (S...
New
netoum
Corex is an accessible, unstyled UI component library for Phoenix that integrates Zag.js state machines using Vanilla JavaScript and Live...
New
wintermeyer
There are three potential reasons for members of this forum to have a look at https://vutuv.de You are tired or annoyed of LinkedIn. Yo...
New
webofbits
Aludel - LLM Evaluation Workbench Aludel is an embeddable Phoenix LiveView dashboard for evaluating and comparing LLM prompts across mult...
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews