These course notes define the lecture I give introducing people to Python in the Browser.
- Server API
- Web Applications
Use Pyodide when:
- Your compute server is overloaded.
- Your compute server is in the cloud and costs real money.
- Privacy regulations prevent your clients from uploading data.
- You want real time responsiveness to your user input.
- The data takes longer to upload than the software takes to download.
- Reduce the server compute requirements of Jupyter Notebooks.
Here are the 37 packages which have been compiled to Pyodide.
Plus all of the pure python packages on PyPi. Not including networking.
There are many different ways to run Python in the browser.
Skulpt, Brython, Transcrypt, CoffeeScript, RustPython, Batavia.
Here is tree of Links if you want more information on Pyodide.
Here is the workspace for this class. It is the official Django server for Pyodide.
So let us get started. First I review the django server functionality.
On the left hand side, with have this text called JSMD. I will say a few words about it.
Fetch the data and graph it.
raw cells - make notes, add comments
fetch cells - grab libraries, external stylesheets, and data sets
md cells - write your report, add DOM elements, etc.
css cells - style your report
Markdown cells support the full range of normal markdown formatting, like _multiple_ **levels** of ***emphasis***,
### of different
Make the Console larger. Select Py not JS.
The markdown and CSS is run automatically. The other cells we need to run as needed.
1. Which Python Version.
Let us see which version pf Python we have. Hint *sys.version'
2. Let us see which Iodide version.
from js import iodide
#and examine it.
from js import document
from js import window
You may need them for the next exercises.
3, Hello World in Python
And now we will do hello world in Python
The first unlabelled cell is an introduction.
The first markdown cell creates an output div.
The first css cell defines the css.
But we can do it in Python too!
Remember than you can click on report view in the upper right to see what is displayed.
Go ahead and write "hello world" Python. You have all the information which you need to do this.
Here is a hint...
Maybe it is two or three of the above things?
How can you check if it exists?
from js import window
5. Simple Python examples.
Run the foo cell.
Create a foo object.
show the value of the foo object.
6. Now let us fire up numpy.
import numpy as np
7. What packages do you have?
(Sadly this exercise is not working today.
from js import pyodide
8. Create x and y
x = np.linspace(0, 2.0 * np.pi, 100)
y = np.sin(x)
take a look at the x and y variables
9. And then plot them up with MatPlotLib. There is a cell for this. Run it.
10. And now plot them with plotly. The browser does not have plotly nstalled. So you have to run the fetch cell to fetch plotly. Then run the plotly cell.
Python Conclusion. We have read a remote file, loaded a library, calculated some numbers, and displayed the results.
Look what happens when converting large arrays. (Botton of the page)
Watch out for memory leaks. Use foo.destroy()
var foo = pyodide.pyimport("foo")
2. Get the string representation of foo.
Instead of pyimport, let us use pyodide.globals.
get the value of the bar object.
So use that to create a biz object from Foo.
pyodide.globals to access them.
6. This time we will plot them from plotly. Please let me know when you reach this far and I will start up a docker container for you for the next part of the class. It takes a few minutes to issue the lets encrypt certificate.
7. Finally use the jsmd to load some data.
and plot it with plotly.
8. Next up we read a data file and plot the results
Use the cell for loading data.
JSON.stringify() gives you a string.
9. JSON.stringify (jsonData)
to convert it to a string and push it to python.
pyodide.globals["jsonData"] = newString
in Python json.loads() to convert it to Python data structures
Extract the x and y and plot it up again.
I am not a big fan of relational databases, so I will not say much about their server implmentation. But I do need to point out that they have a file api, so that you can save files to a particular notebook on the Django Iodide server.
When I first started using Iodide, I decided that it was great for a tutorial, b ut not ready for prime time. I have watched them diligently fixing bus for months, now I think it is much more solid. But Pyodide looks even more interesting.
So there are three examples here.
1. First let us take a look at the simpler Pyodide Only Web Page, and then at the MicroPip demo.
Pyodide only. Fire up your browser console, and confirm that pyodide is loaded.
MicroPip, send the output to the screen using document.body.innerHTML =
Then back to the Pyodide only, let us start bulding an application with the following commands.
So here are some critical commands
globals = pyodide.runPython("globals()");
globals.window = window;
globals.document = document;
Here are the EXTRA CREDIT exercises for advanced students.
- Define the globals.
- Add a CSS object.
- Add an output div.
- Write to the output div.
2, MicroPip example
Open the console.
3. Python Syntax Checker in the Browser Application
Take your time to read the source code.
The hot item is running your Jupiter Kernels in the web browser. For this a number of things have to be done.
1. Get iPython running on Pyodide using zipimporter.
2. Get it all working using Jyve. Maybe starting with the Brython kernel.
If you liked this class please upvote my Awesome Python pull request.
And is your company on the map of Python companies in Europe?
Child Web Pages
Python in the Browser tutorial (PyOdide)
PyOdide, From Mozilla, is cPython compiled to WebAssembly and running in the browser. It includes over 37 of the best Data Science libraries.
Publish Your Jupyter Notebooks Tutorial
In this tutorial you will learn how to convert your completed Jupyter Notebook into a web page with NbConvert, and customize the menu bar with Bootstrap and Pug.