[ANN]: InteractBase, a redesign of Interact to create and style web apps in Julia

Community
,
1

I’m happy to announce the InteractBase, InteractBulma and InteractUIkit packages, to build interactive HTML5 widgets in Julia (InteractBulma and InteractUIkit are used to add “styling” to the widgets, using the Bulma or UIkit CSS frameworks respectively: adding a CSS framework is relatively straightforward and there may easily be more in the future).

How is it different from Interact?

The Interact package has provided similar functionality (adding widgets from Julia) for a while. This package is different in several ways:

  • It’s built on top of WebIO and therefore works in an Electron window via Blink, in the Juno IDE plot pane and in the browser via Mux, as well as in Jupyter notebook and Jupyter lab (meaning that the same code used in the Juno plot pane or in a notebook can be deployed as a web app)

  • The logic is decoupled from the styling, which allows for styling and responsive layout capabilities using existing CSS frameworks. This is an example of a UI designed with InteractBulma:

bulma
bulma1171×684 194 KB

  • Any HTML5 component can be used for widgets, which covers a lot of input types (color, date, time, text, number, range, email, password, autocomplete…) as well as custom features from CSS frameworks (accordions, tabs, etc…)

In the future, the Interact package will probably be repurposed to be a wrapper around InteractBase and its various themes (see PR).

A small demo

Here’s a small demo to see the package in action in combination with Plots in a jupyter notebook:

And here is the link to the blog post describing the package as part of my Google Summer of Code project.

Acknowledgments

The package benefitted immensely from the mentorship and previous packages of @shashi (in particular, the set of packages from JuliaGizmos organization) and @jobjob who worked on a previous iteration of this redesign of Interact with the package InteractNext. The future is for InteractNext to be reused as “material design” theme on top of InteractBase.

56 Likes
2

Important update (as this has already caused confusion to some users):

The package Interact (on master branch) is now a metapackage based on WebIO, CSSUtil, Observables, InteractBase/Bulma/UIkit. See the documentation for details on how to use it. The most basic functionality (that is to say @manipulate) is preserved with the same syntax, whereas more sophisticated usage of the package may break. In particular, as the new framework uses Observables, rather than Reactive, one should call observe(widget) rather than signal(widget) to obtain an Observable whose value will update when the user interacts with the widget.

The documentation already reflects the new (as of now unreleased) version. If you are willing to try the new version already, you can Pkg.checkout("Interact") and experiment with it before it gets released, which could be helpful to catch bugs early on in the process / understand which features of Interact that were commonly used are not adequately implemented in the new framework. If on the other hand, you (or a package you are developing) rely on many features of “Interact” and want to make sure your code does not break, it is of course possible to do Pkg.pin("Interact", v"0.7.2") or add an upper bound to Interact in REQUIRE.

6 Likes
3

Hi,
I recently joined the JuliaLang community. I am a beginner with the language.
I am using Interact to build a desktop app. I coudn’t find how to embed images (icons for exemple) on the window app.
I know we can do it with Tk or Gtk but I would like to use Interact. If you have any clues of information, that will be of great use to me. Thank you very much!