JupyterLite, Emscripten-forge, Xeus, and Mamba

The computational quartet for in browser interactive computing

PyData Paris 2024

2024-09-25

• Jeremy Tuloup
• Ian Thomas
• Thorsten Beier

About

• Jeremy Tuloup
• Ian Thomas
• Thorsten Beier
• QuantStack

What is JupyterLite?

JupyterLite is a JupyterLab distribution that runs entirely in the web browser, backed by in-browser language kernels.

"Normal Jupyter"

JupyterLite

Lightweight Jupyter Frontend running in the browser

• no Python server
• no command line
• no need to install Python and other packages on the user machine
• can be hosted as a static website

Boots in seconds

The jupyter-lite CLI is a Static Site Generator (SSG)

# install the CLI
pip install jupyterlite-core

# build the website
jupyter lite build

It generates static assets that can be served easily

├── api
│   └── translations
│       ├── all.json
│       └── en.json
├── bootstrap.js
├── build
│   ├── 9507.1e6cc5d.js
│   ├── 9602.62bf0f1.js
│   ├── 9621.e2e8b5d.js
│   ├── ...
│   ├── repl
│   │   ├── bundle.js
│   ├── retro
│   │   ├── bundle.js
│   ├── schemas
│   │   ├── all.json
│   │   ├── @jupyterlab
│   │   │   ├── application-extension
│   │   │   │   ├── commands.json
│   │   │   │   ├── context-menu.json
│   │   │   │   ├── shell.json
│   │   │   │   └── sidebar.json
│   ├── themes
│   │   └── @jupyterlab
│   │       ├── theme-dark-extension
│   │       │   ├── index.css
│   │       │   └── index.js
...

...
│   │       └── theme-light-extension
│   │           ├── index.css
│   │           └── index.js
├── config-utils.js
├── extensions
│       └── xeus-python-kernel
│           └── static
│               ├── numpy-1.24.2-py310h6d2fff6_0.0.data
│               ├── numpy-1.24.2-py310h6d2fff6_0.0.js
│               ├── python-3.10.2-h_hash_26_cpython.0.data
│               ├── python-3.10.2-h_hash_26_cpython.0.js
│               ├── python_data.js
│               ├── remoteEntry.35b4eac217ec6bf078a4.js
├── lab
│   ├── favicon.ico
│   ├── index.html
│   ├── jupyter-lite.ipynb
│   ├── jupyter-lite.json
│   ├── package.json
│   ├── tree
│   │   └── index.html
│   └── workspaces
│       └── index.html
...

Easy to deploy

Served via well-cacheable, static HTTP(S) on most static web hosts

Standing on the shoulders of giants

• Built from the ground-up using JupyterLab components and extensions
• The frontend communicates to the in-browser kernels via the Jupyter Protocol

Wasm powered Jupyter running in the browser

• https://developer.mozilla.org/en-US/docs/WebAssembly

Interactive Computing in the browser

• Python kernels:
  • Pyodide
  • Xeus Python
• Visualizations:
  • matplotlib
  • ipywidgets
  • plotly
  • and more...

Embed a live Python console on your website

Embed with:

<iframe
  src="https://jupyterlite.github.io/demo/repl/index.html?kernel=python&toolbar=1"
  width="100%"
  height="500px"
>
</iframe>

Or even the full JupyterLab UI

numpy.org

sympy.org

jupyterlite-sphinx

Deploy your own on GitHub Pages

Quickstart: https://github.com/jupyterlite/xeus-python-demo

Deploy static web applications with Voici

Voici Gallery

• Live: https://voila-dashboards.github.io/voici-gallery
• Add your example: https://github.com/voila-dashboards/voici-gallery

Strengths

• Easy to deploy and scale (static files)
• Interactive computing in the browser accessible to more people
• Simpler for users (no need to install Python and other packages locally)
• Educational use cases
• Reproducibility time capsule

Current developments

• In-browser terminal
• AI code completions and chat
• Real Time Collaboration via WebRTC
• Emscripten Forge and Conda Forge

AI code completions and chat

Real Time Collaboration

Terminal

JupyterLab

• Terminal connects to a real shell running on the server

JupyterLite

• Now has experimental support for a Terminal running in the browser
• Early stage work in progress

The quartet of tools

What is a kernel?

JupyterLite kernels: pyodide and xeus

Python kernel differences

	pyodide	xeus
Build and package system	pip-based	conda-based
Install packages at runtime	%pip install ipympl
Supports pre-installed packages
Supports time.sleep

Emscripten-forge and mamba

Building WebAssembly packages

How do I use package 'x' in JupyterLite?

• Is it a pure Python package?

  • Noarch wheel from PyPI for pyodide
  • Noarch package from conda-forge for xeus

• Does it need compiling?

  • Pyodide recipe at https://github.com/pyodide/pyodide
  • Emscripten-forge recipe at https://github.com/emscripten-forge/recipes

Create a JupyterLite deployment

• Demo repos:

  • For pyodide kernel https://github.com/jupyterlite/demo
  • For xeus-python kernel https://github.com/jupyterlite/xeus-python-demo

• Inputs required:

  • What packages to include (requirements.txt or environment.yml)?
  • What content to include (notebooks, data files, etc)?
  • Build environment (build-environment.yml) containing jupyterlite-core

Local deployment with both python kernels

name: jlite-build
channels:
  - conda-forge
dependencies:
  - python
  - jupyter_server
  - jupyterlite-core
  - jupyterlite-pyodide-kernel
  - jupyterlite-xeus

name: jlite-demo
channels:
  - https://repo.mamba.pm/emscripten-forge
  - conda-forge
dependencies:
  - xeus-python
  - ipympl
  - matplotlib

Sequence of commands:

micromamba create -f build-environment.yml
micromamba activate jlite-build
jupyter lite build --contents contents
jupyter lite serve

Summary of improvements in the last year

• More stable and easy-to-use build system in Emscripten-forge rattler-build
• Experimental Terminal in JupyterLite

Roadmap

• R kernel
• Proposal to move emscripten-forge to conda-forge
• Xeus kernel install packages at runtime

Thanks!

Thanks to all the contributors of JupyterLite, Pyodide, Emscripten Forge, and the Jupyter Community!

• Presentation: https://github.com/jtpio/pydata-paris-2024-jupyterlite-xeus
• Live version: https://jtpio.github.io/pydata-paris-2024-jupyterlite-xeus/files/index.html