Hello, everybody. My name is Chris. I'm going to talk to you about running Python in the browser.
There has been a couple of talks at Phosem in the past about this topic and since about
two and a half years, there's a new technology available co-pi scripts and I've invested a lot of my personal
time in this in building an application on top of it. I'm also contributed to PiScript.
So I want to share my experience and get you excited on this project. That's my goal.
So first of all, I'll look at myself, so who am I? So this is my website. This one is written in PiScript.
So this is a website written in Python because I wanted to show that it's possible to write a website in Python.
And I'll refresh it so you get an idea of there's some animation in there and things moving.
And all the logic behind that is a written in Python. Now this is not so exciting. Of course you see a page.
But one of the things I've been working on, you can see on the right is PiScript, which is Python, which is based on PiScript, which is Python.
And my latest project is called LifeSaver. So you should definitely check that out, but that's nothing to do with Python.
Although the server is written in Python, but yeah.
So if I talk about first them and if you look at the right that's LifeSaver, so this is the last commercial push that I'll do.
And it basically isn't that a coach that teaches you how to become a better software developer or an engineer, software engineer.
So it helps you with becoming more productive, more effective, more recognized, more impactful, get more money, get promoted and all of that.
Make you happy. That's my goal.
So some real PiScript now, so I'll close the extension here. So this is one example of what is PiScript.
So this example shows you WebGL integration. So the point in case here is that we're not going to reinvent when we're writing a web application in Python.
How do you do things in the web? It's just a better way of getting access to the existing APIs. In this case JavaScript APIs.
And if you're interested in seeing like what does this thing actually do, you can view the code.
And this opens a link into PiScript.com. So this is a source code for that app that we just looked at.
And here's the main Python code that runs it. So it's a little hard maybe to see it, but you can see this is Python code.
And it calls like geometry. It says 3. Whatever. And that is imported from, if I scroll to the top, you can see the import savings here.
This is done from 3JS. And from here on, I can actually call JavaScript APIs in Python.
So whenever you reach out to anything that is in the window or in the document, you can call JavaScript functions on that moment.
So there's a foreign function interface between Python and JavaScript, which is essential in that in the concept of PiScript.
So this is the basic thing that you can do. You can call any APIs.
So this is how I got started with PiScript. I was working at JP Morgan and we built a profiler for huge Python programs that we had there.
And the scale of like the traces that we made for the profiles were really long. So the examples you see here are tiny.
These are just hell of world examples that are written here.
But the original UI I wrote in TypeScript because it had to be fast and scale. And we're drawing things in campus here.
So I said like, I want to be able to write that in Python. We're a Python shop. So we have a huge Python investment.
So I want to be able to build my UI in Python as well. So I tried out PiScript. There were a lot of problems, a lot of challenges.
I was at Europe Python two years ago and I run into who's sitting here. He's the main contributor to Piadite.
And I showed in my app I said like this is slow, this is slow. Can you make it faster?
So every time I meet him, it's 10% faster, 20% faster. So it will be again faster today, right?
So to give you an idea, this is all written in Python. So the Python code draws the entire graph here, the heat map.
And when I zoom it in and out, it's actually redrawing it completely within sort of the turnaround that it takes for the event handler to come back.
And it does that through JavaScript of course. So you write Python code that runs on top of WebAssembly.
So the Python VM is compiled into WebAssembly code. The Python code is just original. You don't have to compile your Python code into anything.
But it calls out to foreign function interfaces to JavaScript code that emanipulates them and does the drawing in the campus.
So beneath it as an HTML canvas here.
So there's no server. The code doesn't run somewhere else and then produces HTML or JavaScript. This is a single page application.
So it gets loaded on the top. I'll do a refresh. That's another thing that we care about a lot. It's like startup time.
So when you, you can see I do a couple of times here.
At each time it brings up the website in the HTML.
And it says I'd like to run WebAssembly here and load the Python VM.
And then the Python VM loads the standard library. And then the standard library is done.
And then it loads my main API. It starts running my main API on the Python VM.
It calls out to JavaScript and does all the rendering in that time.
So this is how fast you can run Python on the web these days.
Sorry, this is not Python. This is actually a micro Python.
So there are multiple Python VMs that you can run on top.
And that's what separates Python and we're going to talk about it a little bit later.
So this is to give you an idea of the kind of performance that I was going after as a user of Python.
Another example, this is also using existing JavaScript technologies, but also Python abstractions on top.
So this is a package called Pholium that allows you to draw maps.
And this is specifically designed for Jupyter notebooks.
Jupyter notebooks are also running Python sort of in the browser.
But there you code really runs on a kernel and it comes back with something that can be rendered in your notebook.
And that has to be HTML. So Pholium is one of that.
It's not a picture. It's actually interactive.
So the interactions here are all done at this moment in JavaScript.
But the logic behind selecting the colors and feeding the data to produce this map is all done in Python.
As you would normally do in the Jupyter notebook.
And I'll show you the source again.
But then the source for this particular one is all written in Python and advances a single page application again without a server.
This is just a static HTML file.
So here the code looks like this.
You can see we import.
But by script display whatever pandas you can import any
Any data science module that you need.
They need to be pre-compiled if they have native code.
They need to be pre-compiled to WebAssembly.
So this is all packaged up by the Python team.
They have a long list of standard Python modules that people typically use when they want to run Python in the browser or in this environment.
And then from that on you can just create a volume.
This is like logic that you would normally have in a Jupyter notebook and it will produce the HTML.
But in Python script slash Python this runs really well as well.
Okay that's another example.
Oh yeah in this one you can see that this is a flaw of many projections that we have.
So I don't want to talk too much about politics but this is too much of an open door here.
So you can see how big Greenland is right.
So it's it's like bigger than the US.
And this is why you would want Greenland.
If you're an American but if you look at the real map so this is like a better projection at the
The Mercator but this is like on the feeding map.
So Brussels is right here where my mouse is and if you fly to San Francisco you actually fly over
Iceland and Greenland in here.
But you can see how big Greenland is compared to the US.
Which is like five times bigger than Greenland so your perspective really matters.
Another example that I wrote which because I wanted to write a more sizable application and
Microlock which was the profile that I showed you before.
I wrote something called Pisheets which is a big spreadsheet that runs in the browser.
And for that I had to write a UI toolkit.
So this is like yeah something you would run normally on a desktop machine and you produce UI
widgets.
This is all done in Python running in the browser.
So you have some logic on the right you can see here.
This is just a normal Python code.
You say I have a container in there.
I have a table and table row and you draw things in it.
Behind the scenes when that code runs it creates the dumb elements and it attaches all your values to it and runs.
So this is interactive.
Again we care a lot about the time so this is implied that it takes like one and a half seconds to run.
I'll run it again.
You can see it's like around the second.
So for Pisheets it takes like around by that as much bigger.
It's a C Python VM so it the standard library is a little bit bigger.
And in WebAssembly you have to create everything from the empty sandbox up.
So that takes more time.
But if you use Microlock Python you can see that it starts up pretty fast.
So this is less than a hundred milliseconds to build up this entire application.
Run it download it install the VM and all blah blah blah.
To get to this.
So this is a hundred milliseconds.
Now what less Pisheets look like so it's hosted on a certain website but it's an open source project.
You can install locally and just run on your own machine.
This is just to make it easy for people to try it out.
You don't have to run it on Pisheets and that but it makes it very easy.
There are some examples in there so I'll run one of them.
So this is one of the examples.
You have a sheet. It looks like a spreadsheet.
It is what you would do in a notebook.
So the cells are Python code.
So you can see here it says just random Python code.
Here it says like do something with C10.
But it also is a dependency graph.
So you can see where the data comes from in the sheet and then where it goes.
So the logic is written in Python but this entire sheet is also written in Python.
So from the sheet from the cell functions you can actually escape to the sheet.
And you can like redraw the whole thing as well if you want it.
There's an example on the website that does chess in my way.
So if you're interested in that look at that.
But not all Python code is easy to write.
So we have a eyes of course.
Yeah this is like how can you avoid that.
So I say do something with it.
So I write that prompt.
It says like visualize this thing and even before I can finish the sentence the code is written.
And now I have a different way of rendering this particular thing.
And I can try it again.
Try another one and give me the same one.
So maybe I want a pie chart.
So I say pie chart.
And I don't know how to do that but I can write English.
Hey I got a pie chart.
That's good.
Now this code is all Python and runs in here.
It has two VMs running.
So it has micro Python to make the UI start up really fast.
So if I refresh here.
This is basically refreshing the entire application.
And my goal was to be faster than Google sheets.
I'm almost there.
This one is a little bit more interesting.
This loads a really huge dataset.
You can see 82,000 rows.
There's some Python code to filter and then select only two rows.
And again, use folium for rendering.
This is an example that uses duckDB.
So duckDB is an alternative way.
So not using pandas for you and your tabular data analysis.
But you can use a SQL logic around it.
So here we select all the rows and all the cells from that big CSV that we saw before.
And the final example of pie sheets takes us a little bit further,
because it does a special select.
So it says, well don't just select everything,
but select only the identifier and the coordinates.
And then where the elevation is bigger than 14,000.
And that is interesting.
Okay.
And it produces the same map, amazing, right?
So that rules are the examples.
So now you know what the goal is that we want to write.
So how do we do this?
Why do we want to do this?
Why not just just JS and JavaScript, right?
JavaScript is a steep learning curve.
For most Python programmers, it's a weird environment.
It's almost like an uncanny valley.
It looks like Python a little bit.
But when I switch between Python and JavaScript all the time,
it's like try catch, get so confused.
So Python is much better.
It's much nicer.
It's very popular.
The most jobs on LinkedIn.
The most batteries.
And there are like millions of packages on Python, on pie pie pie pie.
And that's why you should go for Python.
But it's not easy, right?
How do you write your web application in Python?
So this is a reason why you wouldn't use Python for your web application.
Because just creating this environment on your desktop is really hard.
If you want to share your code with somebody else,
and they have to run all this like same environment.
This morning we had two talks about packaging in Python and how hard it is.
We had to talk about how hard it is to do Django and how big it is and whatever.
So those are all things that we want to solve.
So in pie script we want to be able to run Python anywhere without installers.
So the examples are all the examples I gave you is just clicking on the link.
And it constructs this entire environment that you need on the fly.
So you don't have to worry about packaging and getting everything installed.
You don't have to tell people you have to install a UV before you can get started with Python, right?
It's just clicking on the link.
So this virtualization is very important.
So what does the architecture look like?
So these days you have to use, of course, Dali to create the architecture.
This rabbit is the icon for pie script.
You can see it on my laptop as well.
So he is the bunny.
So you're interested in that.
So the snake is not yet eating the bunny, but he's got really interested in it.
So this is the real architecture.
I try to make it as simple as possible because there's so many moving parts.
So you write your Python code in an editor.
It doesn't matter which one.
And it basically runs identical on the top.
So that is enabled by pie guide, which has been compiled.
The C-Python Compile.
The C-Python VM is compiled into web assembly by the pie guide team.
And micro Python, which is an embedded VM, which is compiled into web assembly.
And they run your Python code unchanged.
So that's important aspect.
So you don't have to compile your code or something to JavaScript.
That is an alternative from the past.
With pie script, you just couldn't run your code like that.
So if you want to get more interested in pie script, go to the community.
And that is your starting point.
They get you to discord where you can interact with people contributing to the project.
Coding can be done in VS code for instance.
And you have a static HTML file.
You can do rendering of that file inside of VS code.
And this is really efficient.
But you make it change and the renders immediately.
If you want to get a demo, I can show you here on my laptop.
The other one you can use.
Get up code spaces.
Doesn't matter.
Before you go to pyscript.com, which is a commercial offering by an account
to run pie script in that environment.
But it's not necessary to run your pie script code that way.
Or you can use any editor.
So this morning, we talked about micro-fort sadly passing as a way.
Bramolina left us last year.
He's one of my big heroes.
I've been a VIM user for 42 years now or something.
Big loss to the Netherlands.
So summary, if you want to run a web application on your browser and you want to deliver your code that you've written in Python to multiple uses without having them to install anything,
pyscript is an easy way to do that.
There's no install.
They just click on a link.
It runs in the browser and you can have a much wider audience for your data analytics or your applications that you've written.
If you go to a route, I would definitely check out LTK, which is the library that I showed you before.
It makes it a lot easier to construct your layout and basically set up your event ladders or do a reactive-based model-based
UI and then look at Pyscript.
Pysheets.
It's an open source project.
Both LTK and Pysheets are open source.
So you can look at the source and get a lot of inspirations on how to do things.
You probably don't want to build Pysheets.
This has taken me 10 months to write.
So this is a big investment of your time.
But I made it open source.
It can be an inspiration to you all to actually explore.
With that, I want to thank you.
And see if there are any questions.
Any question?
Yes.
Thanks for the talk.
I wanted to ask if I'm going to be deploying an app using Pyscript.
Does it get hindered or does it get hindered performance?
Does it scale well if I want to even up and push it to several users online or is it fast?
So the question is about performance and then distribution of application to multiple users.
So it will scale a lot better than traditional applications because there is no server component.
It's a static file that you, it's an index that HTML and maybe some assets that you have to deliver.
Once they're in their browser cache, there's no interaction with you anymore.
And it becomes a server page application, a single page application.
So it will scale a lot better.
Like Pyscript.com for instance, which is a hosted application for Pyscript running Pyscript.
Their server bill has been $100 for last year.
That's it.
Pyscript buys sheets itself.
My server bill is $12 for whole year.
So that's it.
So it will scale a lot better.
It's a lot cheaper because everything runs on the machine.
And that was a great question for you deserve a book.
So come here and you will get a copy of the book that I've written in.
Next question.
Hello.
Thank you so much for the talk.
It was really insightful.
How limiting is the environment available?
So how soon after a new release of Python are the web assembly versions of Python available?
And also do all the third party packages you want to use.
Have to be pre-compiled to run on that VM or can you just kind of use any Python package?
Those are great questions.
You also deserve a book come here.
But that's true.
So it's an independent, this a pipeline.
When a new version comes out of Python, then the Python team has to catch up.
And the Python team is usually like a little bit behind.
But they try to be up to date and like talk to who it here.
He's waving.
Yeah.
They try to be as close as that to the pipeline because people want to adopt very quickly.
The embedded version is a little bit slower.
Micro Python that I mentioned before.
So if you come up here, I can show you the versions that we're running right now.
But you can also freeze.
So you can choose which version you want to adopt.
If you want to contribute to projects like Python, you can accelerate the adoption process, of course.
Yes.
Great question.
Yeah.
That question here.
You want to book too.
Oh, just a question.
I have a question on there.
What is the bridge about the bridge between JavaScript and the browser?
Because we can use by script.
You did a very big demo, very beautiful demo.
But if we want to integrate it with existing libraries from JavaScript world.
So PiScript is an environment that exposes the DOM window object, basically.
So from that, you can get anything that is in the global namespace of JavaScript.
You can get access to by name.
So if you import 3.js and import 3 in capitals, then that is window.3.
Then from Python, you can retrieve that value.
And then from that moment on, when you call a Python function on it, it doesn't exist, of course.
But then the foreign function interface will look that up in the Python in the JavaScript version.
And it will say, like, do you have that key on you?
And then if so, you have to call it.
And it creates a proxy between the two.
So it passes around.
So between Python and JavaScript, the integration is just seamless.
You don't notice it when it's happening.
There's a cost involved, because between any two languages interaction takes time.
And this conversion of different.
So a Python int is different than a JavaScript int number, whatever.
So these are conversions happen when you do this foreign function in call.
So for that profile that I showed in the beginning, I spent a lot of time figuring out how not to cross that barrier to often.
So you want to basically bundle your operations.
You're drawing operations in one collection and then send the collection over.
So you pay that cross barrier penalty once.
This is the same thing between Java and C when you have J and I calls, for instance.
You have the same consideration.
So how do I send my Java objects to C and back, right?
You don't have access to shared memory.
So this is, we have to do marshalling.
So it's a good question to you.
And just a quick question.
Just a quick question.
How hard is it to bootstrap Python script applications?
Like, is it one command?
This is two commands.
So the bootstrap applications.
So you have an index.html file.
And in that it says, I know if I have a very quickly bring it up like that one example that I had here.
So this is the index that HTML.
And here it says, there's a script in there.
So this is Java script.
And then a little bit lower.
There will be a reference to a Python file here.
Please find it.
Yeah, here.
So this is what you need to do to run your Python code.
So it's just one tag in the index of HTML.
And in this case, it says, it's not just script.
It's a Pi script.
And then you can also do micro Python and Pi.
And Pi script will parse the HTML at low time and detect that tag.
And then instantiate the C Python VM or the micro Python VM.
And then start the bootstrap for you.
So it's just a little less one tag there.
If you want to get started and try it out, I would try Pi script.com.
And just create a sample project.
And it's very easy.
Like in one minute, you get your app running.
And we have to ask.
What about the security?
For instance, in JS, we have a lot of security issues.
It could be like cross-excripting.
So we have to avoid to use HTML for instance.
And thus, by script, protect us in this kind.
Yes.
So the question is focused on security.
Can you do cross-site scripting?
Things like that.
So you're limited to whatever limitations there exist for JavaScript.
It's probably even stronger because all the code runs inside of the web-assembly sandbox,
which is even more relative and worried about access from other applications to it.
But if you cannot access across domain from your web app,
it will not be able to do that from Python either.
So for instance, Pi sheets that you see.
It calls out and retrieves files from somewhere else.
This has to go through a trampoline server to actually do that for you on your behalf.
Because I can't like blank it.
It'll allow you to call everything, right?
So this is it.
So the same security rules apply.
Yeah.
So thank you, Chris.
Do you have any?
No.
It's finished for the question.
One more question.
Okay.
So whoever asked the question come here, you get a book.
If anybody else wants a book, come here too.