Julia [1] is a high-level, high-performance, general-purpose programming language. The "high level" refers to its expressive syntax, advanced data structures, and sophisticated type system, which are features that allow the programmer to solve complex problems with compact, readable programs [2]. High performance is achieved with a unique just-in-time compilation system that turns high-level code into native machine instructions on any of Julia's many supported architectures, including GPUs. Julia is a general-purpose language because it's convenient to use in any problem domain. The only areas in which Julia might not be an ideal choice, because of the overhead of compiling, are embedded and real-time applications (although even this may change [3] in the future).

Julia was originally envisioned as a new language [4] for scientific and technical computing. Since its relatively recent public release in 2012, its unique melding of advanced concepts in language design with uncompromised performance has led to rapid and enthusiastic adoption across many science and engineering disciplines. It's one of only four languages [5] that have been deployed on supercomputers for petaflop computations (the others are Fortran, C, and C++).

Because of the emphasis on technical computing in the Julia community, most of the books [6] and online documentation and tutorials are aimed at scientists and engineers who are interested in using the language for simulation, data analysis, and visualization of results; this is certainly true of my own book [7], for example. However, Julia is an excellent choice for other types of applications as well.

Julia on the Web?

Recently I've used Julia as a back-end language for interactive websites to demonstrate concepts in physics. Because very little information was available explaining how to build such projects, I had to assemble the required knowledge from disparate sources and complete the picture with a great deal of experimentation and testing. This article is the culmination of this process and represents my desire to present, in one place, a complete guide to creating interactive web applications with Julia.

I found that Julia was an ideal language for this purpose. All of the virtues that make it so well suited for computational tasks in science make it delightful to use on the back end of a web application, especially one involving physics calculations. In addition to the features already mentioned, Julia permits the use of Greek letters and Unicode symbols in variable names, which lets the scientist-programmer impart a familiar appearance to lines of code, making them more closely resemble his or her beloved equations. Julia's wide collection of graphics and audio libraries present convenient solutions for the task of constructing diagrams, animations, or sounds to illustrate the science concepts that I seek to explain in my web pages.

It's also almost trivially easy in Julia to spawn background tasks or perform calculations in parallel on multiple processors, which are factors that can improve responsiveness over the web. I discovered that Julia has excellent libraries for network communication, most critically for talking over WebSockets, which turned out to be a key element for my task. The parts of my programs for handling communication with the browser were surprisingly concise and easy to write, and the performance was excellent, which finally convinced me that the experiment was a success and made the techniques described here my favorite methods for building these types of interactive sites.

In this article, I document two methods for creating interactive web applications with Julia. The first uses the PlutoSliderServer web server [8], which allows you to transform a Pluto [9] notebook into a web application that you can safely make available on the public web. You can use this method even if you're unfamiliar with HTML or JavaScript, because you can build your application from a large collection of pre-made widgets that automatically set the values of variables in your Julia programs. The second method is more open-ended and allows you to build any type of web application that you can imagine. It's based on HTMX [10] and some simple (optional) JavaScript on the front end, communicating over WebSockets with your back-end Julia programs. I'll explain all the terms and ideas in this paragraph in the following sections, so don't be alarmed if I've mentioned some unfamiliar things. They're all well worth learning.

PlutoSliderServer

Pluto is a computational notebook that uses the web browser as an interface. It's an evolution of the popular Jupyter [11] notebook, improving on the concept by fixing [12] several problems in Jupyter's design. Whereas Jupyter can serve as an interface to many different languages (the name is a mashup of Julia, Python, and R, its original partners), Pluto works, and will likely forever only work, with Julia.

Like Jupyter, Pluto was originally intended to provide a convenient interface to a language kernel running locally on the same machine as the web browser that handles the Pluto interface. Although some solutions allow Pluto to work over the web, I don't want, for my purposes here, simply to expose a notebook to the user.

Ideally I want a simple means to translate a Pluto notebook to a web page, with interactivity provided by widgets with well-defined behavior; I don't want the visitors to the page to be able to execute arbitrary Julia code, which is what the full Pluto interface enables.

PlutoSliderServer offers the perfect solution. With this approach, you create a Pluto notebook that includes any computations, media, and explanatory prose (with Markdown or HTML) you desire. User interactivity is provided by a large collection of widgets (including the popular slider control, whence the name) from the PlutoUI [13] package. Each widget is bound to the value of a variable, and when the user manipulates the control to change the value of the variable, the relevant code is immediately executed on the server with the new value, displaying the results.

Here, I'll go through every step required to create and serve a web application with this approach. The first section of Table 1 gives you an idea of the kinds of things you can make with PlutoSliderServer. The URLs lead you to two pages I made with this technology, as well as a link to an MIT intro course on computational thinking, which uses PlutoSliderServer extensively in its online lectures.

Installation and Setup

I'll explain everything you need on this journey, but the trip will be a little smoother if you have just a little familiarity with Julia and its package system [14].

The first step is to install Julia if you don't have it already. I recommend an upgrade if your installed version is older than version 1.8. I tested all examples in this article with version 1.10; version 1.11 recently became available, but I encountered some issues with package compatibility under that version with at least one of the examples, so version 1.10 might be smoother sailing, at least until the problems with Pluto under the most recent release have been resolved.

To install Julia on any operating system in common use, visit the Julia website and click the big green Download button. Once you have Julia up and running, you will need a few packages. A "package" in Julialand is a library of functions and data structures that you can import and use in your programs.

For developing a PlutoSliderServer application, you'll need the Pluto package. Start up the Julia REPL (read-eval-print loop interactive terminal prompt) by typing julia in a terminal window. Of course, you can also use Visual Studio (VS) Code or your favorite development environment, and the procedure will be basically the same. Although you can now continue your development of PlutoSliderServer web applications in your default Julia environment, it's a better practice to create a separate environment for each project to help prevent package conflicts down the road and keep your work organized. An "environment" in Julia is simply a directory in your filesystem containing two special files Julia maintains that list dependency-resolved packages needed in your project, along with all your program files. The latter are text files with the .jl file extension.

After deciding where in the filesystem you want your new project to live, press the right square bracket (] ) key in REPL to activate package mode. The prompt changes from the green julia> to a blue pkg> . This new prompt is preceded by a notation in parenthesis indicating your current environment (Figure 1). Initially you're in the default environment for the version of Julia in use (in this example, version 1.10).

Figure 1: Activating an environment in the Julia REPL in package mode.

The next step is to activate the new environment you've settled on for your project; the command for this is also shown in the figure. At this point if you press the backspace key you'll return to normal REPL mode. However, you want to remain in package mode a little longer to add the one package needed for all Pluto development: the Pluto package. In package mode, at the pkg> prompt, enter the command

add Pluto

to download and precompile the package's program files (you need to be connected to the Internet). The process can take anywhere from less than a minute to several minutes, depending on the speed of your network connection and of your computer.

Pluto notebooks contain their own environments wholly encapsulated within the notebooks. This arrangement helps make them portable and their calculations reproducible, which is an important consideration for the scientists who comprise a good proportion of their user community. Therefore, any further packages needed for calculations in the notebook will not be added in the REPL but will be imported in the notebook. Julia and Pluto take care of these packages behind the scenes.