State of Julia Interactive Apps, Executables and WebApps

General Usage
, ,
1

I want to share my simulation online to users with different machines (Windows, MacBooks, Linux), etc., without them having to download Julia. Is there a clear, simple way to do so right now?

The 2 things that I have in mind are:

  • I can create a Web app. Create maybe an embeddable, or some file that I can run through JavaScript on my website, and that people can interact with, play around, and have to install nothing. I don’t know if a browser would natively be able to do this, or I would have to have a server running that hosts my simulation on the website, and only then can this be possible (if it even is)

    • I see a few names around this idea: WGLMakie.jl, Bonito.jl, WebAssemblyCompiler.jl, Genie.jl. What is the best, simplest way to do things here that is most compatible, and where I don’t end up rewriting most of my work in JavaScript or C/C++ itself?
    • Interactions · Bonito is the closest thing I’ve seen to what I want. But again, you have to write part of your non-static elements code in JS here; it also does NOT seem to work on mobiles (which is fine, I guess). Can someone point me to how to, from scratch, deploy such interactive “apps” on a website in a simple, concise, step-by-step manner (the documentation was a little confusing to me)?
    • WGLMakie | Makie is a little bit of a mess, precisely none of the examples work for me so I do think there needs to be a clear example of how Bonito and WGLMakie work together.
    • There is also Pluto.jl that I am unsure of about whether it can run interactive windows such as those generated by Makie.jl or not when running on devices without a Julia executable installed.

  • On the other hand, I would love to know about a simple way to create an executable file that is complete on its own. I can just download it on any machine, and it will most likely run.

    • PackageCompiler.jl is the key name here (StaticCompiler.jl is also there, but I am unsure of whether it is still under development or not).
    • Again, any simple step-by-step examples from beginning to end how how I can write some simple code, compile it, send it to another user, and run that on another machine?
    • Something that I have read on this is how the size of the executable can (could?) have been huge, but JuliaC.jl seems to be a native solution that the Julia Community and Developers are looking forward to. Again, simple explanatory examples?
    • Sysimages, Apps, Libraries, which one do I create for myself, and which one do I deploy/share with others?
      • As something adjacent, with the executable sharing out of the way, what is a very simple explanation of a workflow in order to compile some code natively in Julia to boost the workflow output for the code, each time you boot things up? I am tired of having to wait sometimes an upward of 2-5 minutes for loading my packages, and sample code runs to even begin doing my work for the day. Anything to speed up such initial load times for a workflow? Are there any problems with this? Any simple example and explanation again?

I’ve seen some of these things here, but I would still like the experts to put down their notes here, for I feel it is really hard for beginners who are not proficient in dealing with computer languages and the system for 10 years to get started with Julia and read all the fancy documentation. Even though some of this might be repetitive, I would love to again have this one place where all this information is present in a clear and simple manner.

I apologize if you think this is not a good post, and I should spend more time digging into examples and documentation myself.

Thank you so much.

1 Like
2

I think Genie is the most fully featured one, as of my favourite it may be Oxygen.jl or Bonito.jl but they are lower level indeed and some js may be needed. I would still say go to Genie if you want both help from the Devs and a wither family of feature without even talking about the docs and the no code possibilities which are great already in Genie.
Ps : if your project is industry related don’t hesitate to talk to Juliahub I’m sure they are nice and may give you better advice than any of us

3

That the WGLMakie docs are broken is really unfortunate, but this is because of vitepress which we use to build the docs and not because WGLMakie is broken… We should at least add a note about this until we’ve fixed it.

Bonito is not broken on mobile, Bonito itself doesn’t do much styling for you so one needs to use a mobile optimized framework with bonito or do it yourself :wink:

Anyways, if your simulations are in Julia it will be very hard to let users interact with it unless you cache all possible combinations (combinatorial explosion) or compile Julia to JavaScript (not yet possible).
I’d say your best bet is to setup a simple Julia server which uses WGLMakie and bonito to create a simple dashboard.
This will require a server, but you won’t need to write any JavaScript. Unless you can easily precompute all your simulation results, a server will be the only way. I can point you to some docs once I’m back at my pc.

1 Like
4

Using https://bonitobook.org could be a simple way to show your results in a mobile optimized way, and it’s much less low level then bonito.
You can still serve it like any other bonito app though :slight_smile:

5

You should also have a look at:

Bonito, Bonitobook and Makie seem to bundle fine, although GLMakie had some fixable problems on windows

6

@sdanisch
I was able to write

using WGLMakie, Observables
using GeometryBasics: Point3f, Sphere
import Bonito as D
import Bonito.TailwindDashboard as DOM

WGLMakie.activate!()
Makie.inline!(true)

app = App() do session
    # sliders
    sx = D.Slider("x", -5.0:0.1:5.0, value=0.0)
    sy = D.Slider("y", -5.0:0.1:5.0, value=0.0)
    sz = D.Slider("z", -5.0:0.1:5.0, value=0.0)

    # --- WRAP Bonito slider values into real Makie Observables ---
    ox = Observable(sx.value[])
    oy = Observable(sy.value[])
    oz = Observable(sz.value[])

    # connect Bonito-side events → Makie Observables
    on(sx.value) do v
        ox[] = v
    end
    on(sy.value) do v
        oy[] = v
    end
    on(sz.value) do v
        oz[] = v
    end

    # 3D point observable
    p = @lift([Point3f($ox, $oy, $oz)])

    # scene
    scene = Scene(camera=cam3d!, size=(700, 600))

    meshscatter!(scene, p;
        marker=Sphere(Point3f(0), 1.0),
        color=:red,
        space=:data,
        markersize=1.0
    )

    # cube outline
    cube_vertices = [
        Point3f(-5, -5, -5), Point3f(5, -5, -5), Point3f(5, 5, -5), Point3f(-5, 5, -5),
        Point3f(-5, -5, 5), Point3f(5, -5, 5), Point3f(5, 5, 5), Point3f(-5, 5, 5)
    ]
    for i in 1:4
        lines!(scene, [cube_vertices[i], cube_vertices[mod1(i + 1, 4)]], color=:gray)
        lines!(scene, [cube_vertices[i+4], cube_vertices[mod1(i + 1, 4)+4]], color=:gray)
        lines!(scene, [cube_vertices[i], cube_vertices[i+4]], color=:gray)
    end


    ## Add ambiently rotating surface 
    N = 60
    function xy_data(x, y)
        r = sqrt(x^2 + y^2)
        r == 0.0 ? 1f0 : (sin(r) / r)
    end
    l = range(-10, stop=10, length=N)
    z = Float32[xy_data(x, y) for x in l, y in l]

    z_rot_angle = Observable(0.0f0)

    # Simple rotation matrix around z-axis as an observable
    rotation_model = @lift(Makie.rotationmatrix_z($z_rot_angle))

    surface!(scene, -5 .. 5, -5 .. 5, z;
        colormap=:Spectral,
        model=rotation_model,
        transparency=true,
        alpha=0.7
    )
    center!(scene)

    # Update rotation angle over time
    @async begin
        while true
            z_rot_angle[] += 0.01
            sleep(0.03)
        end
    end
    w = WGLMakie.WithConfig(scene; use_html_widget=true)
    Bonito.record_states(session, DOM.div(D.FlexRow(
            D.FlexCol(sx, sy, sz),   # controls
            DOM.div(w)               # 3D scene
        ); align_items="center", justify_content="center", height="100vh"))

end

server = Bonito.Server(app, "0.0.0.0", 80)
Bonito.export_static("webgl_demo_3D.html", app)

I was able to write this, reading up your documentation on WGLMakie.jl and Bonito.jl. Is there any way possible that I can have the nonstatic objects in Scene, including my custom mesh and surface objects, be saved as web elements that I can embed in a website?

I will surely check out BonitoBook. Does it require users to have Julia installed, though? Can it handle such complex scenes and objects and real time renders and updates?

Also, what do you think about PackageCompiler for creating redistributable .exe files for such Makie interactive Scenes?

1 Like
7

This seems really interesting. Although I still don’t see anywhere it says that it can produce a simple .exe file.

Can that not be done in Julia at all? A simple .ext file that contains all the required code in itself that can be clicked on by a non-technical person and used for whatever the usecase of the application is?

8

I think since @sdanisch has contributed to both the projects, Bonito.jl would be best for my use case, since my simulations are primarily on GLMakie. However, I will certainly check out Genie and Oxygen.jl.

I used to like JuliaHub. But for some reason, I can no longer use it for free, and have to pay them for the web servers running the session. My project is really research-related, not so much the industry. But I would give it a try! Thanks!