1. Introduction
2.  JSMD
3.  Python
4. Intermission
5. Javascript
6. Server API
7. Web Applications
8. Conclusion

 

Introduction

PyOdide, from Mozilla, is cPython ported to Web Assembly and running in the browser.  It includes over 37 data science libraries. Micropip can download any pure Python package.  Of course networking applicatins do not run.   For networking use the Javascript libraries. 

Use Pyodide when:

1. Your compute server is overloaded.
2. Your compute server is in the cloud and costs real money. 
3. Privacy regulations prevent your clients from uploading data. 
4.  You want real time responsiveness to your user input. 
5. The data takes longer to upload than the software takes to download. 
6. Reduce the server compute requirements of Jupyter Notebooks. 

And yet it has its limitations.  It is big, so the first download takes time.   The second download is  cached.  Not good for a web app.   No debugger. Maybe iPython works.  Not so good for development.  But there are wonderful libraries.    So develop on the server, and develop a GUI in Javascript, but use the wonderful Python libraries.  

Here are the 37 packages which have been compiled to Pyodide. 

https://github.com/iodide-project/pyodide/tree/master/packages

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. 

JSMD

On the left hand side, with have this text called JSMD.  I will say a few words about it. 

%% fetch

Fetch the data and graph it. 

raw cells - make notes, add comments

js cells - run javascript code

fetch cells - grab libraries, external stylesheets, and data sets

md cells - write your report, add DOM elements, etc.

css cells - style your report

 

Markdown

Markdown cells support the full range of normal markdown formatting, like _multiple_ **levels** of ***emphasis***,
## headings 
### of different
#### sizes

Python 

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

    iodide

    #and examine it.

   You can also access the Javascript document and window object from Python. 

    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.

The first Javascript Cell  shows how to write to output in Javascript. 

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...

document.getElement....

Is document an Python Object? A Javascript Object?  A python proxy to a javascript object?  

Maybe it is two or three of the above things?

4.  Now let us call the Javascript function.  Make sure you have  run that cell which defines the javascript. 

How can you check if it exists?

     from js import window

     window.setTextOutput(...)

5. Simple Python examples.

    Run the foo cell. 

    Create a foo object. 

    show the value of the foo object.  

   Later we will access this foo object from Javascript. 

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

   pyodide.loadedPackages

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.  

Intemission

    Introduce myself. 

JAVASCRIPT

Okay, now let us do all of that from Javascript. 

Under the hood type conversions happen.  Basically you get proxy objects between Python and Javascript. 

Look what happens when converting large arrays. (Botton of the page)

Watch out for memory leaks.  Use foo.destroy()

1. Access a Python object from Javascript.  

var foo = pyodide.pyimport("foo")
foo.val

2. Get the string representation of foo. 

pyodide.repr(obj)

3. Access a Python class from Javascript.

Instead of pyimport, let us use pyodide.globals. 

Access the Foo class.  Do it both using . and ["Foo"] Notation.  (Yes Javascript is weird.)

create a Foo object called bar from Javascript. 

get the value of the bar object. 

4. Run some Python code from Javascript. 

pyodide.runPython(code)

So use that to create a biz object from Foo. 

5.  Access the x and y arrays from Javascript using the 

     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.

10.  Pull the data from Javascript 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. 

 

Server API

  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. 

Web Applicatons

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. 

• Now create a Javascript object, and put the functions in there. 
• 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. 

 

Any quesions?

Conclusion

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?

 

 Built using the  Forest Map Wiki