It is a well known law of the modern internet: Frontend logic is written in JavaScript.
While this has been served to us well for client-side scripting, JavaScript is not known for it's ease of use.
Fear no more—PyScript is here.
Many kids, learning developers, and a lot of backend engineers learn and use Python as their primary language.
This, coupled with machine learning and datascience being dominated by Python, creates a demand for a Python-like frontend logic alternative, a demand for PyScript.
PyScript is a framework that allows Python code to run in the browser with near-native speed.
This is accomplished with a toolchain of Pyodide-Emscripten-Wasm.
Pyodide takes CPython, adds an interface between Python and Typescript/JavaScript, and using Emscripten compiles it down to Wasm.
Wasm binaries executes at near-native speed and is supported by all major browsers.
With PyScript we can:
run Python in the browser
import stdlib, PyPI, and user-authored dependencies.
interact with JavaScript/DOM and browser APIs
Using PyScript
To use PyScript you just add these lines to your HTML header*:
Yes, numpy, pandas, matplotlib are all pre-compiled for Wasm, so we can circumvent the portability issues often experienced with data libraries implementing a lot of C code. And again, since it compiles to Wasm, these still run at near-native speed.
In addition to targeting your own code, you can import other files too:
importpandasaspddeftransform_data(csv_file_data:pd.DataFrame)->pd.DataFrame:# Transform it to a long formatdf=csv_file_data.unstack().reset_index()df.columns=["X","Y","Z"]
<span class="c1"># And transform the old column name in something numeric</span>
<span class="n">df</span><span class="p">[</span><span class="s1">'X'</span><span class="p">]</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">Categorical</span><span class="p">(</span><span class="n">df</span><span class="p">[</span><span class="s1">'X'</span><span class="p">])</span>
<span class="n">df</span><span class="p">[</span><span class="s1">'X'</span><span class="p">]</span> <span class="o">=</span> <span class="n">df</span><span class="p">[</span><span class="s1">'X'</span><span class="p">]</span><span class="o">.</span><span class="n">cat</span><span class="o">.</span><span class="n">codes</span>
<span class="k">return</span> <span class="n">df</span>
And then use them:
<py-scriptoutput="plot_display">importpandasaspdfrommatplotlibimportpyplotaspltfrommy_codeimporttransform_data# Get the data# data sourced from https://github.com/holtzy/The-Python-Graph-Gallery/blob/master/static/data/volcano.csvdata=pd.read_csv('volcano.csv')# Transform the data using your codedf=transform_data(data)# Create the figure and add the TL logoplt.style.use('dark_background')fig=plt.figure()img=plt.imread("tl_logo_flat.png")imax=fig.add_axes([-.1,-.1,1.2,1.2])imax.axis('off')imax.imshow(img)# Create the plotax=fig.add_axes([0,0,1,1.25],projection='3d',facecolor='none')ax.plot_trisurf(df['Y'],df['X'],df['Z'],cmap=plt.cm.jet,linewidth=0.01,alpha=.4)ax.axis('off')print('Here is your plot:')fig# Like print() this will display the plot.</py-script><divid="plot_display"align="center"></div>
packages = [
"matplotlib",
"pandas",
"requests"
]
paths = [
"volcano.csv",
"my_code.py",
"tl_logo_flat.png",
]
import pandas as pd
from matplotlib import pyplot as plt
from my_code import transform_data
print('Here is your plot:')
fig # Like print() this will display the plot:
Yep, you can pull your own code along for the ride and import it inside your <py-script> tags. You can actually bundle files of any type and use them in your code.
But we aren't limited to server-side code. We can pass on this same power to the client-side user in the browser:
If you type Python code in the repl above, and then hit shift+enter or click the arrow to run it, you can see output as standard output or an error.
There are also the <py-button> and <py-inputbox> widgets that allow you to call Python code from click and keypress events respectively, and <py-box>, a container object that can define how it's elements are arranged and displayed à la CSS Flexbox.
PyScript as Frontend
What does this mean, aside from being able to write Python instead of JavaScript on the frontend?
Despite warnings that PyScript is "very alpha" and changes should be expected, it has the potential to prove one of the most pivotal developments of the decade in frontend development, and web development generally.
Python has always had portability and GUI challenges.
PyScript offers a solution to both, offering a Python-friendly extension of existing web technologies as well as providing Python wherever there is a browser.
Furthermore, PyScript in the browser is a single target platform for Python developers to deliver native cross-platform applications, even offering the prospect of relatively trivial mobile development, by wrapping PyScript based web applications with mobile-native languages.
A mere glance at frameworks like Electron betrays a glimpse of the potential.
For Data Scientists
For datascience and ML, this frees developers to ship their computation-heavy applications off servers and into client devices.
Got an application that runs on sensitive data that clients would rather keep on their machines?
Ship the application with PyScript, and clients can leverage your application without their data ever leaving their machine.
Any code that can run on a client, but struggles because of installation/dependency issues, can be served client-side with PyScript. Numpy is infamous for being difficult to install, but it is now compiled for Wasm everywhere.
Any such tools or code that can be compiled to Wasm can now be leveraged with PyScript, client-side.
Look to Peter Wang's demonstration at PyCon: motion-control married to software emulation married to GUI can be delivered in-browser.
Terminal Labs is ecstatic to have been a part of bringing PyScript to a browser near you already. Please reach out to us; we can help you bring your special sauce to the plate of your clients' browsers.
Disclaimer: instead of the original css pyscript styling this blog post includes a lightly altered version due to css style conflicts with the our website (and we have self-vendored pyscript.js):
This allowed our website to avoid some conflicts with our CSS and present the stark "pyscript style" confined within the bounds of the blog. Additionally, we removed the frozen loading screen and moved it to the wheel in the bottom left corner while this page loads.
css diff
This is the diff of our css from pyscript's, after accounting for inconsequential formatting.
We have intentionally left some of the formatting stark to suit the needs of a tutorial. We can partner with you to integrate pyscript to meet your needs as well.
