---
title: Jupyter Lite
subtitle: du notebook au déploiement dans le navigateur
date: 2024-11-05
layout: notes
header-includes: |
<style>
body { font-family: mono;}
div.content {max-width: 800px;}
div.notes {font-size: large; }
code { font-size: 0.85em; }
figure img { border: 2px #eee solid; border-radius: 5px;}
figcaption { font-size: 1em; }
/*section.level2 {display: initial; width: 60%; border-right: 2px solid #eee; }*/
section.level2 {border: 1px #ddd solid; border-radius: 3px; flex: 1 1 500px;}
section.footnotes {display: inline-block; width: 60%; font-size: small;}
section.footnotes hr {border-bottom-width: 2px}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.info, section.info {color: #31708f; background-color: #d9edf7; border-color: #bce8f1; border: 1px solid ; padding: 0.7em 1em; margin-bottom: 0.5em;}
div.success, section.success {color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; border: 1px solid; padding: 0.7em 1em; margin-bottom: 0.5em;}
div.warning, section.warning {color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; border: 1px solid; padding: 0.7em 1em; margin-bottom: 0.5em;}
div.danger, section.danger {color: #a94442; background-color: #f2dede; border-color: #ebccd1; border: 1px solid; padding: 0.7em 1em; margin-bottom: 0.5em;}
ul { margin: 0 0 1em; }
ol>li>a { text-decoration: underline; }
a:visited {color: #2306ad;}
.blue {color: blue;}
.div130 { width: 130%; }
code, .sourceCode { background-color: lavender;}
</style>
---

## Bienvenue !

:::info

**Bienvenue sur la page de l'atelier _Jupyter Lite : du notebook au déploiement dans le navigateur_**

Vous êtes invités à participer à l'édition de cette page. Il suffit d'ouvrir sa source en cliquant sur le lien `edit on hackmd` en haut à gauche de la page :

Pour rafraichir cette page, cliquer sur le bouton `[Refresh]` en haut à gauche de la page

Pour en savoir plus, consulter [la documentation](https://pinkmypad.net).

:::

## L'atelier

:::warning

**Organisation :** Jérémy Tuloup et Pierre Poulain.

**Objectif :** L'objectif de l'atelier sera de d'examiner la technologie WebAssembly/WASM en terme de déploiement et de reproductibilité des notebooks.

**Durée :** 1h15

**Méthodes :**
- Introduction à WebAssembly/WASM
- Présentation du projet JupyterLite
- Démo
- Prise en main

**Outils & librairies :** JupyterLite, GitHub, JupyterLab, Python

**Pré-requis :**
- connaître (un peu) l'écosystème Jupyter (notamment JupyterLab)
- avoir déjà utilisé une plateforme comme GitHub ou GitLab
- disposer d'un ordinateur portable, d'une connexion wifi via Eduroam ou autre, d'un navigateur web récent, d'un compte [GitHub](https://github.com/)

**Ressources :**

- documentation du projet [JupyterLite](https://jupyterlite.readthedocs.io/en/stable/)
- [démo avec JupyterLab](https://jupyterlite.readthedocs.io/en/stable/try/lab)
- [démo avec Jupyter Notebook](https://jupyterlite.readthedocs.io/en/stable/try/tree)
- [support](https://jtp.io/gt-notebook-2024/)

:::

## Déroulé de l'atelier

:::success

1. Présentation de JupyterLite et de la technologie WebAssembly/WASM
2. Différences entre JupyterLite et un déploiement Jupyter traditionnel
3. Cas d'usage et démo
4. Retour d'expérience en enseignement
5. JupyterLite comme *time capsule*
6. Développements en cours
7. Déploiement sur les comptes GitHub / GitLab des participant.e.s

:::

## Prise de note

:::info
Cette section peut être utilisée librement comme espace d'organisation et de documentation pendant l'atelier.
:::

:::warning
**Participants :** _ajoutez vos noms ici_

- Nicolas R
:::

Mamba : distribution de paquets agnostique, similaire à conda-forge mais plus rapide

Jérémy, employé QuantStack, contributeur Jupyter, créateur de JupyterLite
Pierre, enseignant bioinformatique, utilisation de JupyterLite pour l'enseignement

Jupyter : interface web permettant d'exécuter du code localement ou à distance

Kernel: moteur d'exécution où le code va tourner

Format de notebook standard , utilisable dans d'autres clients (Collab, PyCharm)
Protocole Jupyter : standardisation des interactions de l'interface et du noyau
- utilisateur interagit avec le navigateur qui intérreoge un serveur qui charge le notebook et gère le lien avec le moteur
JupyterLite
- tout fonctionne dans le navigateur grâce à WebAssembly
- mais basé sur la stack Jupyter (pyodide, Xeus Python et interface Jupyterlab/Notebook)
- réutilisation des développements précédents mais packagés différement

WebAssembly (*wasm*)
- standards du web au mêm titre que HTML, CSS, javascript
- portage de programme dans d'autres langages dans le navigateur
- Pyodide: CPython compilé dans WebAssembly
- Approche Xeus Python : développement de moteur Jupyter intéropérables écrit en C++ compilable en WebAssembly

Avantages
- pas besoin d'avoir un serveur o d'installer Python en local
- pas de ligne de commande
- hébergement comme un site statique

historique de JupyterLite
- démarré en 2021
- intégration Pyodide et contributions de la communauté
- intégration dans JupyterLab ?

Créer un site web static
- outil installabl via pip
- très facile à déployer sur la plupart des sites servant des soites statiques
Nombreux moteurs en webassemlbly : Python, R, javascript

Complexité importante du packaging

Cas d'usages
- intégration dans une iframe d'une page web
- intégration dans la documentation (exemple de Numpy ou SciPy (écosystème scientifique de Python), [myst](https://rowanc1.github.io/myst-lite/))
- Education ([Capytale](https://capytale.fr), Paris Sacaly, UC Berkeley, LabNBook, UGA Phelma)

Nombreux développements en cours : terminal linux dans le navigateur, intégration de Jupyter AI, édition collaborative, emscriptent et conda forges (packaging), Xeus-R

Retours sur l'utilisation dans le monde éducatif (biologie/biochimie)

- 40/45 étudiants
- 2x 2h d'introdction à la programmation Python
- Utilisation du *literate progamming*
- difficultés d'avoir des machines configurées correctement

Solution envisagées précédemment
- MyBinder: lent, avec des crédits offerts par des entreprises
- en 2023, utilisation de JupyterLite: très facile à déployer, pas d'installation pour les étudiants, fonctionne partout (salle info, BU, ordinateur personnel, mise en place de quizzs interactifs)

Prochaines étapes: en 2025, utilisation avec 250 étudiants en L2 et 150 en L3 de biologie

Template pour githu pages et gitlab pages

Reproductibilité
- WebAssembly est un standard web
- sera exécutable pendant longtemps
- encapsulage et isolation : reproductibilité à évaluer ?
- la recette de la capsule doit être reproductible aussi

Konrad: il faut non seulement reproduire les traitements mais aussi pouvoir explorer le code et les données et pas juste avoir une version figée

## Compte-rendu

:::info
Cette section est utilisée comme espace de consolidation : synthèse des réalisation, difficultés/freins rencontré·e·s, pistes pour la suite, autre...
:::

### Réalisations

### Difficultés rencontrées

### Pour aller plus loin