Pre-ANN: JuliaJS.jl

[Eric Forgy]

Hi,

Yesterday, I posted a link to a new package StringInterpolation. That was a warmup for this one :)

JuliaJS started life as PlotlyJS providing an interface from Julia to the recently open-sourced plotly.js. By the time I finished PlotlyJS, there wasn't really much "Plotly"-specific about it and I changed the name to make way for Spencer's cool PlotlyJS package (which I think these two packages can work happily together btw).

JuliaJS is HEAVILY inspired by the awesome Blink package, but there is no dependence on Atom/Electron.

One thing I like about JuliaJS, other than being able to use string interpolation with JS commands, is the ease at which the two-way communication works. For example, you can define a callback in Julia like so:

callback["Run My Code Please"] =  begin
    println("Ok! I will run your code.")
    # Your code here.
end

Then, on the JavaScript side:

JuliaJS.message("Run My Code Please")

and guess what it does? :)

I'm still learning Julia so I'm sure there are plenty of bugs and a ton of ways to do things better, so feedback, issues, PRs are most welcome. 

From the README:

https://github.com/EricForgy/JuliaJS.jl

Warning: This package is still very early in development. Feedback, issues and PRs are most welcome.

JuliaJS.jl

This is simple package that allows Julia to interact with JavaScript in a browser.

Installation

JuliaJS is not registered and it requires another unregistered package: StringInterpolation. To install, you'll need to run the following commands:

julia> Pkg.clone("https://github.com/EricForgy/StringInterpolation.jl.git")
julia> Pkg.clone("https://github.com/EricForgy/JuliaJS.jl.git")

Usage Example:

After installation, running the following from the Julia REPL

julia> using JuliaJS
Listening on 0.0.0.0:8000...

will start an HttpServer. Open your browser to http://localhost:8000/julia and you should see a blank page with "JuliaJS" in the browser tab.

With the browser open, run the following:

julia> include(Pkg.dir("JuliaJS","examples","plotly.jl"))

If the stars are aligned, you should see several sample charts appear in the browser window.

Notes:

Interpolation

The non-standard string literal `js` supports interpolation, but at the moment, the Julia expression needs to be enclosed in parentheses, e.g. instead of

julia> msg = "Hello World"
julia> js"""
console.log("$msg")
"""

you will need to enclose `msg` in parentheses as illustrated below:

julia> msg = "Hello World"
julia> js"""
console.log("$(msg)")
"""

WebSockets

JuliaJS creates an active link between Julia and your browser via WebSockets so you can update your charts from Julia without reloading the page. To see this, try rerunning the above example several times:

julia> include(Pkg.dir("JuliaJS","examples","plotly.jl"))
julia> include(Pkg.dir("JuliaJS","examples","plotly.jl"))
julia> include(Pkg.dir("JuliaJS","examples","plotly.jl"))
julia> include(Pkg.dir("JuliaJS","examples","plotly.jl"))

Each time you run from the REPL, the charts are updated without having to reload.

A fun artifact of using WebSockets is that you can "broadcast" your charts to several browsers and they will all get updated interactively. Here is a silly video demonstrating three browsers (including an iPhone) with charts being interactively controlled from the Julia REPL.

[Eric Forgy]

Sorry. Small correction:

callback["Run My Code Please"] =  begin
    println("Ok! I will run your code.")
    # Your code here.
end

should be (of course):

callback["Run My Code Please"] =  () -> begin

    println("Ok! I will run your code.")
    # Your code here.
end

[Michael Hatherly]

Hi Eric,

Are you planning for this to be a full-on JS interface? If so, would it make sense to follow the naming convention of some of the other interface packages like PyCall, RCall, and JavaCall? Perhaps JSCall?

I wasn't able to get the plotly example,
   

    include(Pkg.dir("JuliaJS","examples","plotly.jl"))

working. Should it just appear in the http://localhost:8000/julia tab? The js"..." macro calls did work though, which is cool!

-- Mike

[Eric Forgy]

Hi Mike,

Thanks for giving it a try :) Sorry the examples didn't work for you. Any chance you can submit an issue with some info and I'll see what I can do to fix it?

Yeah, the charts should have appeared in localhost:8000/julia. Since the js"..." worked, it shouldn't be too much trouble to get the charts to work too.

I'm open to renaming it and JSCall would seem to be a natural candidate. I'm curious, with the other xxxCall packages, can the language call back to Julia or is it a one-way "Call"? The purpose here is to have Julia and the browser linked and sending signals back and forth. You can imagine a browser-based IDE, interactive web dashboards, etc. I can actually see a JavaScript naming convention emerging:

• ThreeJS.jl <-> three.js
• PlotlyJS.jl <-> plotly,js
• xxxJS.jl <-> xxx.js

Although I had a hand in this :)

[Michael Hatherly]

> Any chance you can submit an issue with some info and I'll see what I can do to fix it?

Restarting the browser a few times got it to work... perhaps it was just taking a while to download d3 and plot.ly js assets. Anyway it's all working nicely now, thanks!

-- Mike

[Tony Kelman]

This is explicitly designed for interoperating with javascript in the browser, not local js execution engines like node.js, right? Given how widely used node is, it might not be unambiguous to claim JSCall.jl for a browser specific interoperability package.

Still, cool stuff.

[Eric Forgy]

Mike,

Cool! Glad it worked :) (Phew!)

Tony,

Yeah, this is just javascript in the browser. No node.js. Thanks :)

[Sisyphuss]

@Eric, thanks for your explanation in the other post, and sorry for the late response (I was in China).