xeus kernels in the browser

JupyterCon 2023

@JohanMabille @ThorstenBeier @QuantStack

About

Johan Mabille

  • Technical Director at QuantStack
  • Jupyter Distinguished Contributor
  • Co-authored the xeus stack, the debugger in Jupyter
  • Leads the development of mamba

Thorsten Beier

  • Scientific Software Developer at QuantStack
  • Co-authored the emscripten-forge stack
  • Contributor to many open-source projects
@JohanMabille @ThorstenBeier @QuantStack

Jupyter architecture

center

  • A well-specified protocol built upon web standards
  • Implemented for more than 40 languages
@JohanMabille @ThorstenBeier @QuantStack

The Jupyter kernel protocol

Clients and kernels communicate (over the network) through 5 channels:

  • Shell: code execution, code completion
  • Control: stop and restart, kernel info, debugging
  • stdin: input request
  • IOPub: broadcast channel to publish results and kernel state
  • Heartbeat: to check the kernel is still alive

ZeroMQ provides the low-level transport layer over which the messages are sent.

@JohanMabille @ThorstenBeier @QuantStack

Writing kernels for Jupyter

  • Write from scratch in your favorite language
  • Adopt the kernel wrapper approach, based on ipykernel
  • Build upon xeus, a native implementation of the protocol
@JohanMabille @ThorstenBeier @QuantStack

Xeus

  • xeus is a C++ library which simplifies the implementation of kernels for Jupyter
  • developers can focus on implementing the interpreter part of the kernel
  • Tutorial for creating a kernel based on xeus: https://xeus.readthedocs.io/en/latest/kernel_implementation.html
  • xeus is architected in components that can be replaced with ad-hoc implementations
@JohanMabille @ThorstenBeier @QuantStack

The Xeus Universe




@JohanMabille @ThorstenBeier @QuantStack

The Xeus Universe





@JohanMabille @ThorstenBeier @QuantStack

Implementing a kernel

  • Start from a cookiecutter template:
cookiecutter https://github.com/jupyter-xeus/xeus-cookiecutter
  • Implement a handfull of methods:
    • execute request
    • complete request
    • inspect request
    • ...
@JohanMabille @ThorstenBeier @QuantStack

Traditional usage of Jupyter Kernels

center

@JohanMabille @ThorstenBeier @QuantStack

Traditional usage of Jupyter Kernels

center

@JohanMabille @ThorstenBeier @QuantStack

Traditional usage of Jupyter Kernels

center

@JohanMabille @ThorstenBeier @QuantStack

Traditional usage of Jupyter Kernels

center

@JohanMabille @ThorstenBeier @QuantStack

Traditional usage of Jupyter Kernels

center

@JohanMabille @ThorstenBeier @QuantStack

Traditional usage of Jupyter Kernels

center

@JohanMabille @ThorstenBeier @QuantStack

center

  • Wasm is a binary instruction format for a stack-based virtual machine
  • Portable compilation target for programming languages
  • Enabling deployment on the web
@JohanMabille @ThorstenBeier @QuantStack

Emscripten

center

Emscripten is a complete compiler toolchain to WebAssembly, using LLVM, with a special focus on speed, size, and the Web platform.

@JohanMabille @ThorstenBeier @QuantStack

WebAssembly allows to run native code in the browser.

Python:
github.com/pyodide/pyodide

  • python distribution compiled to WebAssembly
  • runs in the browser
  • includes numpy, pandas, matplotlib, etc...
  • write wasm kernels

R-Lang:
github.com/r-wasm/webr:

  • R interpreter compiled to WebAssembly
  • runs in the browser
  • includes packages compiled to WebAssembly
  • write wasm kernels
@JohanMabille @ThorstenBeier @QuantStack
@JohanMabille @ThorstenBeier @QuantStack

@JohanMabille @ThorstenBeier @QuantStack
@JohanMabille @ThorstenBeier @QuantStack

XeusLite: Xeus kernels for JupyterLite

center

@JohanMabille @ThorstenBeier @QuantStack

Architecture of xeus (old)

  • github.com/jupyter-xeus/xeus

  • Customizable via

    • Custom Interpreter
    • Custom Debugger
    • Custom Server

  • Hard coded to use ZeroMQ

    • ZeroMQ is not availalbe when compiling for Wasm
@JohanMabille @ThorstenBeier @QuantStack

Architecture of xeus (now)

@JohanMabille @ThorstenBeier @QuantStack

Usage of Xeus Kernels with JupyterLite

center

@JohanMabille @ThorstenBeier @QuantStack

Usage of Xeus Kernels with JupyterLite

center

@JohanMabille @ThorstenBeier @QuantStack

Usage of Xeus Kernels with JupyterLite

center

@JohanMabille @ThorstenBeier @QuantStack

Usage of Xeus Kernels with JupyterLite

center

@JohanMabille @ThorstenBeier @QuantStack

Usage of Xeus Kernels with JupyterLite

center

@JohanMabille @ThorstenBeier @QuantStack

Usage of Xeus Kernels with JupyterLite

center

@JohanMabille @ThorstenBeier @QuantStack

Usage of Xeus Kernels with JupyterLite

center

@JohanMabille @ThorstenBeier @QuantStack

Usage of Xeus Kernels with JupyterLite

center

@JohanMabille @ThorstenBeier @QuantStack

Examples of Xeus-Lite Kernels

@JohanMabille @ThorstenBeier @QuantStack

Applications

Embed REPL

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

Embed REPL

@JohanMabille @ThorstenBeier @QuantStack

Embed JupyterLite

<iframe
src="https://jupyterlite.github.io/demo/lab/index.html"
width="100%"
height="500px"
>
</iframe>
@JohanMabille @ThorstenBeier @QuantStack

Embed JupyterLite

@JohanMabille @ThorstenBeier @QuantStack

Deploying Xeus Python

center

@JohanMabille @ThorstenBeier @QuantStack

Outlook

  • improve xeus-lite kernels:
    • dynamic loading of conda packages with mamba
    • dynamic loading of pip packages with pip
  • implement more xeus-lite kernels:
    • xeus-cpp
    • xeus-r
  • improve testing for xeus-lite kernels
  • ability to generate lite kernels repos from regular kernel repos
@JohanMabille @ThorstenBeier @QuantStack

Resources

@JohanMabille @ThorstenBeier @QuantStack
@JohanMabille @ThorstenBeier @QuantStack

--- # The xeus galaxy - xeus: a native implementation of the Jupyter Kernel Protocol - xeus + interpreter + glue code = Jupyter kernel - xeus-cling (C++), xeus-python, xeus-sql, xeus-lua, etc... - xwidgets: a native backend for the Jupyter interactive widgets

<div class="grid grid-cols-2 gap-4">

A 2X2 GRID