JupyterLite: Jupyter ❤️ WebAssembly ❤️ Python

Speaker 1 [00:04]

Hi everyone, my name is Jeremy and today I'm going to talk about a project called JupyterLite. It will be a mix of Jupyter, WebAssembly and Python. First of all, I'm currently working at Quantstack as a technical director. At Quantstack, we do a lot of open source, mostly on the Mamba ecosystem. And the Jupyter ecosystem, so I'm also a core developer in Jupyter so we help maintain projects like JupyterLab, Voila, dashboards, Jupyter server, Jupyter widgets, a lot of Jupyter. And a couple of us are really active in the Jupyter ecosystem so if you are using tools in the Jupyter world, you will probably be talking to us on GitHub and things like this. So you might be wondering how is JupyterLite different compared to normal Jupyter, because here I have a couple of cells, so I can just, you know, run them, and I get, you know, like what I would get in a normal Jupyter notebook. But the thing is, JupyterLite is a little bit different, and to get an idea of this, we can start from this repo, so this repo is the repo for this talk, and if you scroll down, you see at the very bottom there is a link that ends with GitHub.io, and this is pretty much the thing you have for when you host something on GitHub pages, which lets you host static files to make your website or anything else, so if you click on that, and you see that we get redirected to a JupyterLab UI, and it boots in seconds. So this is one aspect of JupyterLite, you get very easy and quick access to your interactive computing environment, because in the end, actually, JupyterLite is also published to PyPI as a Python package, and the Jupyter Lite CLI is pretty much just a static site generator. So, you know, like you would be using Jekyll for your blog or something similar, you can use Jupyter Lite to create your own Jupyter website. So, with this in place, in Mizzet you can create your own in a couple of minutes. So if you just go to this repo, we made this template, the demo repo, it's a public template on GitHub. So, if you look at this screencast here, there is normally this little use this template button here, and just in a couple of minutes, you activate the GitHub pages and you have your own website. So, that is very, very useful if you want to have a very lightweight Jupyter front-end running in a browser. You don't need to set up any server, you don't need to open a terminal, run a command line or anything like this. You don't even need to install Python or any other packages locally, so skip all of this. You can even add this little badge that looks like this yellow thing. So for example, you have it on your Rimi here, and if you click on that, you can redirect your users to your Jupyter website. So since it's a static website, let's do this, it's easy to deploy. We have a bit of documentation. So if you go to the docs, here we detail how you can host your own or use hosted environments to deploy your thing. So it could be on GitHub, pages, GitLab pages, read the docs, Netlify, many others, and actually for the main repo, the main JupyterLab repo, we use read the docs. So if you go to this URL here, you're going to be using a website based on the main branch and deploy to read the docs. So before continuing, I just wanted to do a little bit of history, just to highlight some of the prior art. So in the past, there was a project called Jive by Nick Bolweg, who is now a contributor of Jupiter Light, but also in Jupiter in many, many places. And he started this work with the same kind of motivation, trying to have a static website. But at the time, we didn't have the thing we were going to talk about later, WebAssembly. So it was there, but it was more of an experiment. So then came something that I wanted to experiment with, it's called the p5 notebook. So it's based, the idea was to have something like a minimal notebook UI, but very focused for P5JS which is a JavaScript library to draw stuff on a canvas that runs in a browser. So the idea was to use JupyterLab components and build something very, very simple and very, very minimal so they could be used by people who want to learn to code and things like this. We also have another project called Baston by Romain Cassaty who is using the classic notebook, which is now deprecated, but it's also interesting because they manage to also deploy it for educational purposes, so they have a couple of users there, so it's great to see Jupyter used in education. And also wanted to highlight two other things, so one is starboard and the other is observable. Those two are not strictly Jupyter, but they are still interesting because they use different approaches so they can mix languages, for example, with Starboard, and Observable is more like browser native, so it's a bit more towards JavaScript, even though you can also run other languages if you want to. So these are out there, and they all have their pros and cons, so it's still just to get an idea of where JupyterLite fits in all of this. So if we go back to JupyterLite, it's pretty much a combination of JupyterLab and Jupyter Notebook when it comes to the user interfaces. So you have the Jupyter Notebook 7 UI, so this is pretty much what we see right now. So Jupyter Notebook 7 is going to be the next major version for Jupyter Notebook and is going to be built using Jupyter components and this is pretty much what you see here, so it just looks the same as Jupyter Notebook notebook 6, also called the classic notebook. And you also have JupyterLab, so that's the one we looked at before. You can work with files. So if you go here, you can even, you know, open plots, open, yeah, icons. You can also open GeoJSON if you want. Also notebooks. So that's the presentation I'm currently showing here, and this is, yeah, so you can have like the notebook open and then you can interact with them like this, like if you were using a normal, let's say normal Jupyter on your machine, and, yeah, so the cool thing is that we are able to reuse a lot, really a lot of things coming from the JupyterLab ecosystem, And for example, the themes. So here we have a Drupalite night theme. That's a third party theme that we can actually use. And these settings are also persisted in your browser. So if you reload the page, they stay. So let's go back to Lite. What else? Yeah. We have also there is also console in JupyterLab. So here we have the JavaScript kernel, so if you do something like this, then you get some interactive computing with JavaScript, but also with Python and other languages. Yeah, and also you can change the languages. So in Jupyter, there is ongoing effort to localize the interface, and Jupyter Lite is just able to reuse this as is, so it's really great because all of the work is happening upstream, and Light is just able to reuse the same set of tools. So here we switch to French, and now it's in French, we go back to English, yeah. And this localisation effort is really, like, crowdsourced, so it's really great because it's also translators helping for all of the languages. And maybe one more thing I can show is third-party extensions, so let's say you have a set of users and you want to introduce them to the lab interface, so there is this extension by Frédéric Cournaval who wrote this, it's called JupyterLab Tour, and you can give a tour of the interface, so it's pretty useful, especially with light, because if you create your website and you want to guide your users, you can use this kind of extensions, and they are designed for Jupyter Lab, but they also work with Jupyter Light, which is great. So let's stop, and let's go back here. So once again, Jupyter Light is really standing on the shoulders of giants, So it's really built from the ground up, so it's just like another application, but really mostly reusing JupyterLab components. So there is a lot of work going on in the JupyterLab ecosystem, so JupyterLite is just reusing as much as possible from that, and the kernels, they run in a browser, but they still communicate to the front end using the Jupyter protocol, so it's still the same protocol under the hood, which is great because it's all based on standards, and it interacts really well with everything else. So here you have a picture of IPython, libraries like bqplot, matplotlib, and also Python and so on. So, yeah. So we usually like to refer to Jupyterite has a Wasm-powered Jupyter running in a browser, and Wasm is the short for WebAssembly, and if you go to the Mozilla developer network documentation here, so WebAssembly is kind of a new thing, but it's been there for a couple of years, and what it says is it can run on the modern web browsers, and it's also near native performance, and provides languages such as C, C++, Rust, so that they can target the web, and designed to run alongside JavaScript, which is great because JupyterLite is JavaScript, and we're going to see that JupyterLite is actually based also on a Python kernel built on top of Pyodide. So Pyodide is Python, or actually CPython and the scientific stack compiled to WebAssembly, so Python is in C, and we saw that C is one of the languages that can compile to WebAssembly, so PyLab project does this, and JupyterLite adds an extra layer on top of this to be able to integrate that as a kernel that can be used in the interface, so here I can run the code, and we see that Python is Python 3.9, because it's still using Pyodide 0.19, 0.20 landed yesterday, not updated yet, but it will be soon. It's also using IPython, so IPython runs in JupyterLite, so here if you import something that doesn't exist, you get some nice error, there is also basic support for code completion, You can get some help, like you would do in a normal notebook. Some magics are supported, like the history, and one thing that is nice also about Pyodide is that they provide a nice integration with the browser and with JavaScript, just like it said in the WebAssembly snippet above. So here we can actually use the fetch method from the browser and use it to fetch data from somewhere else, and we combine that, combining that with this kind of environments where we have, you know, viewers for JSON, this is really great because you can start exploring your request using this JSON viewer and you can search for fields and things like this. So, yeah. That's it. Matplotlib is shipped by default in Pyodide, so you can use it to do plots. But since Plotly has a JupyterLab extension, we can also use it in JupyterLite. So here you notice that you need to actually still install them a little bit on the fly like this. So that's one thing that is a bit different compared to normal Jupyter. So if we do this, we can then create a Plotly graph that is interactive, and there is also another library that is interesting, it's Altair, you can create these graphs and then you can save them to your machine, GeoJSON for example is another example, so here we point to the BCC in Berlin. So that was for like more static graphs, now let's talk about interactive widgets. So iPad widgets also works, you can interact with them, if you link this one and we move the slider, it moves there too. And custom widgets also work, so here we have a BQ plot, I can change the colour, change the graph, create a new one, and then you can update the data and it updates automatically, So all of this is still again all in the browser and still again reusing the extensions as they are distributed. Another one that is interesting is IPyCanvas. So here we're going to create a game of life. So PyCanvas is a library that lets you use the browser canvas from Python and draw something on that. So using Python. So here we draw the starting state of a game of life, and actually it's a good opportunity to also show you another extension that is pretty neat. It's called Sticky Land, and here you see if you click on that, you get your sticky cell here, so you can drag and drop it here. So hide the input, and you can continue with this, and it stays. So it's quite useful. Again, it was made for JupyterLab, but it works also with JupyterLite, and then we run that and then you get your thing output updated, and you can continue scrolling or do something else. Okay. So let's close it. So that was Python powered by Pyodide, but now let's talk about another kind of kernel. So Xoos is a Jupyter project, and it's a framework for authoring Jupyter kernels, and it's written in C++, and there are a couple of kernels using Xoos, it's actually C++ in a notebook, so if you haven't tried it, it's fun, so you can try that, but that one doesn't work yet in light, but maybe soon. And there is a blog post about the work that Torsten did to make Xoos work in JupyterLite. So here I would like to demo one of them, which is Xoos SQLite. It was made by Mariana, and then Torsten took it and pretty much made it work with WebAssembly. So that's great, because then we have this example notebook. So let me maybe let's clear outputs first so we can create databases, tables, insert data, select the data, insert more data, select, select, and you see that it renders using the Jupyter renders, so this is like HTML, which is nicer to visualize. And with SQLite kernel, it's also interesting because there is support for Vega so you can even have these static charts in line in your notebook, so that's quite useful because then you can visualize your data and then download PNG or SVG, so yeah. So there are a couple of kernels that are compatible with JupyterLite at the moment. There is also JavaScript and P5, but those are a bit different because JavaScript is native in the browser, so it's a bit easier to get them to work. There is also REN, which is also a space kernel, and an echo kernel just for testing. And there's also Lua, which is also working in JupyterLite. So in JupyterLite, you can work with files. So here we saw that we have the file browser on the right, and Jupyterite actually lets you kind of ship a set of notebooks and files by default when you generate the website, and then you can edit them in your browser, or you can create new ones. So you can create a new notebook here, and you can save it, you can close it, and then you can open it again and it stays. If you reload the page, it will be persisted to your storage, so it could be index.db if it's available, or it would be local storage otherwise. It's still a bit clunky right now to access those files from Python, so you can do it. You can actually read from index.db, but we are going to make that a bit easier so it's a bit more seamless and easier to do real work with files that are also on the server. The files on the server are just static files, just like everything else from the Jupyter Lite website. One thing you can do with files is also share them. Let's say you have this Remy, this JavaScript, You can right-click on that, copy shareable link, and then you can send it to someone and they just paste the link in the browser and it's going to open in a couple of seconds with the two files that you send them. That's quite useful if you want to quickly share something around. Another thing that we've been working on for a couple of days with Martin and Renaud is this new JupyterLab extension. So again, it's a JupyterLab extension, but it works with JupyterLite, actually the main motivation was to make it to work with this, so that we can demo it today. So here you have another file browser, but it asks you to open the folder, so what happens here, so I'm going to show you, yeah, a repo called PyTools, so it's like, maybe you know it, it's like a set of notebooks and explorations in Python, pretty nice, and let's say you want to use it in light. This extension is using an experimental non-standard browser API called file system access API. It's only available in Chromium-based browsers. It's not working in Firefox yet. Maybe it will never work. Who knows? So what happens here is that it asks for permission to open your files. So remember here we are on GitHub pages but we access content from my machine using this API, and now we can explore this. We can, for example, open this TSV file which opens like, you know, almost like Excel. And we can also open other notebooks if we want, and you could, for example, pick up something that you have on your machine using a Jupyter web site that someone else deployed for you. could be one of the use cases for this. So, yeah. What else do we have? Yeah, we have also real-time collaboration. So, this is, again, one thing that Jupyterite is just reusing from all of the work done upstream in JupyterLab. So, if you're interested by this, you can check the talk by Kevin Jens, PyData Global 2021. He goes, you know, explains how it works and how it landed in the JupyterLab, and it also works in JupyterLite, but since there is no server, the approach is a bit different, so JupyterLite is using peer-to-peer via WebRTC to sync the changes between peers. So, yeah, that is also available, and I wanted to just show you a quick look at what it looks like under the hood. So there is no server, everything just static, but still there is a server running somewhere, so it's running in a browser, of course, and the interesting thing is that it's built almost the same way as JupyterLab, which is great, because then we use also a plug-in system, so it means that you can use different plug-ins for the server part, let's say you want to upload your content somewhere else on your private network in the company, then you could just swap that for something else and use private APIs, for example, you could have many kernels or none. You could also have this kind of customization is really just available. Yeah. So this brings us to kind of where we've seen this going like the past weeks. So we went a little bit further so we tried to also try to think of how can we make that even simpler. So there is now a new Ripple application that is also shipped by default in Jupyter Lite. So if you're interested, you can check that blog post on the Jupyter blog. We talk about it a bit more with more details. And what it means is that you just copy-paste this iframe code, and you put it in your website, and let's say here you have a Jcode website, then you have your code console in your blog, so just for the sake of it, I did this on my own website, where I used to post some stuff there, but here you see that if you scroll down, you get the console, and you can also control the theme, so here I put in dark, and you get the Python running on the Jcode website, which is nice, but once we started to explore this, other people started to say they wanted the same on their website, so we had NumPy to also add this to NumPy.org, so if you go to NumPy.org, you scroll down a little bit, there is this Try NumPy section, so you can go here, and the idea is we made it so you can copy and paste from the left to the right and you get NumPy in your browser. Another example is try Jupyter because Jupyter.org is still using Binder to let you try Jupyter in your browser without installing anything locally, but recently there have been some issues with the funding because Vendor requires a lot of resources, especially on Google Cloud or OVH, and these resources started to become a bit scarce. So, JupyterLite here came somewhat to the rescue, if I can say. So, here, if you click on the Jupyter Lab icon, it's going to launch a Jupyter Lite instead of a full-blown Jupyter, but we thought that it would be good enough because people who want to try Jupyter mostly want to try the UI aspect of it, so here you have an introduction to notebooks on try.jupyter.org, and, yeah, it really helped reduce the load on the binder. And here we have a quick tweet by Chris Holgraf who kind of said that this had a big impact. I think it kind of reduced by 30% or maybe more, the load, which is great. So we pretty much just traded compute resources for just static assets. So that was a big win. There is also now JupyterLite Sphinx, which is a synced extension to also let you use JupyterLite in your docs. So here we have an example with IPI leaflet. So IPI leaflet is like IPI widgets with interactive maps. So if I go here to the docs, you actually have a notebook. So we saw the repo application, but you can also embed a notebook if you prefer. And here it's really nice because users landing on your docs, they are really just able to try it from the start. So there's nothing to do, no install, yeah, nothing to install, so that's great. So there is more to come. Pandas is looking into adding that to their docs as well. SymPy, I think it's, let me check, yeah, it's still open, so it's almost there. But they will be adding this repo as well. And then we can start thinking about, yeah, why not just Python? We could also have this for SQL, for example. So if you are more into SQL, you can also use a SQLite kernel, for example, and embed that on your website if you want. So of course, JupyterLite has some limitations. For now, it's a bit more suited for lighter workloads. run in the browser still, so you cannot do intensive computations, at least not yet, and you still need to install packages with micropip and pip-like that come from Pyodide. This is going to be improved very soon, because there is ongoing work to leverage the whole Condor Forge infrastructure. Accessing files from the Python kernel is a little bit clunky for now, but this is going to be hopefully addressed at some point, and another aspect of it is that you need to download quite a bit of things if you want to for the initial load, but the good news is that it is then cached by the browser, so if you reload the page afterwards, your browser should be able to cache most of it, so that's nice. And to finish, what is coming next is a better way to expose files, like I mentioned, there is improved package management for WebAssembly and Connaforge, so there's been a lot of work going on in a repo called Python Wasm, and it was started by Ethan Smith, and now there are also CPython core developers, Christian and Brett Cannon, working on it, and there There is a keynote tomorrow on that, so if you're interested. And there is also the future of Pyedide. So Pyedide was started by Michael Drotboom, and there is also Hoode and Roman working on it, and now Thorsten is working on making that even better. So there is a lot of things happening on WebAssembly, and that JupyterLive will be able to use all of this out of the box. And we are working on making better code completion with maybe true work in browser, LSP at some point and dashboards also. We want them to work in the browser so you can publish dashboards without having to insert anything on your machine. And with this, I would like to thank you for coming and also a special thanks to all of the contributors to JupyterLite.

Speaker 2 [29:49]

Thank you for the amazing talk. We have a lot of questions on online, and I guess we have a lot of questions here as well. Do you have any questions? Can I see how many people have questions? Okay, good. Then I will ask only the online ones. Are there any suggestions work being done on getting the initial size of payload lower? Jupyter Lite may not work instantly when loading it with slow internet.

Speaker 1 [30:16]

Can you repeat it? Yes, sure.

Speaker 2 [30:18]

any suggestions or work being done on getting the initial size of payload lower. Juviter Lite may not work instantly when loading it with slow internet.

Speaker 1 [30:26]

That's true, that's very true, but there is, like I mentioned at the very end, I think a lot of work is going on now in actually CPython itself, which is awesome, because this is where everything comes from, and they are really making really amazing progress there, because it also has the side effect of reducing the binary size, and I think Pyodide also over the different releases they managed to reduce the size to download like at least the initial one yeah so there is it's you know progressive but we are getting there so yeah thank

Speaker 2 [31:04]

What are the performance differences for libraries like NumPy that would normally make use of accelerations like BLAS? about pytorch tf with gpu

Speaker 1 [31:16]

I don't know if anyone tried it yet, but it's interesting because we were just talking about it with Torsten just before, with the ongoing work trying to reuse the CondaForge infrastructure. Maybe PyTorch will be able to also run in a browser. So I think it's a big maybe for now, but I mean, there is...

Speaker 2 [31:39]

Thank you. Can dependencies be installed at runtime, or does every dependency need to be statically compiled?

Speaker 1 [31:45]

No, they can be installed at runtime, so if we go back to some examples, you need to install them on the fly using this micropip, and the pip-light is a wrapper around micropip for JupyterLite, so you can do this, but you can also, if you want, at least for now, you can also rebuild Pyodide and include packages if you want, but again, in the future, this This should be much easier once we have all of the building boxes in place, especially to reuse things from Condor.

Speaker 2 [32:23]

to light interact with kids

Speaker 1 [32:25]

Can you be the right interact?

Speaker 2 [32:27]

interact with Git.

Speaker 1 [32:28]

with Git. We haven't tried, but I think it should. So maybe it will have to use something a different approach. So one thing that could be interesting is to take inspiration from another project called VS code.dev. And it's like VS code but running in a browser. So it's kind of similar but not exactly. And there is also GitHub.dev. And they have support forget, so I would say it should be possible also, but we haven't looked into it yet.

Speaker 2 [33:00]

How do you ensure the iFrame embedding option is safe?

Speaker 1 [33:04]

In the end, with Jupyter, you execute code, that's the main feature, but it always depends as usual. You can use sandboxing or other restrictions for iframes, depending on what you want to allow. alone.

Speaker 2 [33:24]

Do packages on Condor Forge need to be modified in order to be installable by JupyterLite?

Speaker 1 [33:29]

When we don't have it, you know, it's still very early stages, so now the idea would be to just use the set of recipes to produce the packages, but ideally with almost no medication at all. But, I mean, that's the ongoing work.

Speaker 2 [33:51]

Thank you. One last question on the online questions because we don't have enough time. How are shareable files shared?

Speaker 1 [33:59]

How our shape

Speaker 2 [34:00]

shareable files

Speaker 1 [34:02]

shared, shareable files. So for now, they are just links to the files. So the thing I showed with this is that if you go back here, it just creates a link like this. So I mean, they are not sent to other people. It's just redirecting you to an existing deployment, to an existing website. So this is like the easiest way to share files. But you can also, if you want, use the upload feature here and upload a file that would then be stored in the browser local storage.

Speaker 2 [34:44]

questions on the audience here okay thank you for joining and thank you for the talk