WEBVTT

00:00.000 --> 00:13.000
Hello, everybody. My name is Chris. I'm going to talk to you about running Python in the browser.

00:13.000 --> 00:20.000
There has been a couple of talks at Phosem in the past about this topic and since about

00:20.000 --> 00:27.000
two and a half years, there's a new technology available co-pi scripts and I've invested a lot of my personal

00:27.000 --> 00:33.000
time in this in building an application on top of it. I'm also contributed to PiScript.

00:33.000 --> 00:40.000
So I want to share my experience and get you excited on this project. That's my goal.

00:40.000 --> 00:51.000
So first of all, I'll look at myself, so who am I? So this is my website. This one is written in PiScript.

00:51.000 --> 00:58.000
So this is a website written in Python because I wanted to show that it's possible to write a website in Python.

00:58.000 --> 01:05.000
And I'll refresh it so you get an idea of there's some animation in there and things moving.

01:05.000 --> 01:12.000
And all the logic behind that is a written in Python. Now this is not so exciting. Of course you see a page.

01:13.000 --> 01:23.000
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.

01:23.000 --> 01:30.000
And my latest project is called LifeSaver. So you should definitely check that out, but that's nothing to do with Python.

01:30.000 --> 01:33.000
Although the server is written in Python, but yeah.

01:34.000 --> 01:40.000
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.

01:40.000 --> 01:49.000
And it basically isn't that a coach that teaches you how to become a better software developer or an engineer, software engineer.

01:49.000 --> 01:56.000
So it helps you with becoming more productive, more effective, more recognized, more impactful, get more money, get promoted and all of that.

01:56.000 --> 02:00.000
Make you happy. That's my goal.

02:00.000 --> 02:09.000
So some real PiScript now, so I'll close the extension here. So this is one example of what is PiScript.

02:09.000 --> 02:21.000
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.

02:21.000 --> 02:30.000
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.

02:30.000 --> 02:35.000
And if you're interested in seeing like what does this thing actually do, you can view the code.

02:35.000 --> 02:42.000
And this opens a link into PiScript.com. So this is a source code for that app that we just looked at.

02:42.000 --> 02:50.000
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.

02:50.000 --> 03:00.000
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.

03:00.000 --> 03:08.000
This is done from 3JS. And from here on, I can actually call JavaScript APIs in Python.

03:08.000 --> 03:17.000
So whenever you reach out to anything that is in the window or in the document, you can call JavaScript functions on that moment.

03:17.000 --> 03:26.000
So there's a foreign function interface between Python and JavaScript, which is essential in that in the concept of PiScript.

03:26.000 --> 03:32.000
So this is the basic thing that you can do. You can call any APIs.

03:32.000 --> 03:41.000
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.

03:41.000 --> 03:49.000
And the scale of like the traces that we made for the profiles were really long. So the examples you see here are tiny.

03:49.000 --> 03:52.000
These are just hell of world examples that are written here.

03:52.000 --> 04:00.000
But the original UI I wrote in TypeScript because it had to be fast and scale. And we're drawing things in campus here.

04:00.000 --> 04:06.000
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.

04:06.000 --> 04:15.000
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.

04:15.000 --> 04:22.000
I was at Europe Python two years ago and I run into who's sitting here. He's the main contributor to Piadite.

04:22.000 --> 04:27.000
And I showed in my app I said like this is slow, this is slow. Can you make it faster?

04:27.000 --> 04:36.000
So every time I meet him, it's 10% faster, 20% faster. So it will be again faster today, right?

04:36.000 --> 04:43.000
So to give you an idea, this is all written in Python. So the Python code draws the entire graph here, the heat map.

04:43.000 --> 04:54.000
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.

04:54.000 --> 05:02.000
And it does that through JavaScript of course. So you write Python code that runs on top of WebAssembly.

05:02.000 --> 05:10.000
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.

05:10.000 --> 05:18.000
But it calls out to foreign function interfaces to JavaScript code that emanipulates them and does the drawing in the campus.

05:18.000 --> 05:21.000
So beneath it as an HTML canvas here.

05:21.000 --> 05:29.000
So there's no server. The code doesn't run somewhere else and then produces HTML or JavaScript. This is a single page application.

05:29.000 --> 05:37.000
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.

05:37.000 --> 05:42.000
So when you, you can see I do a couple of times here.

05:42.000 --> 05:47.000
At each time it brings up the website in the HTML.

05:47.000 --> 05:52.000
And it says I'd like to run WebAssembly here and load the Python VM.

05:52.000 --> 05:57.000
And then the Python VM loads the standard library. And then the standard library is done.

05:57.000 --> 06:03.000
And then it loads my main API. It starts running my main API on the Python VM.

06:03.000 --> 06:08.000
It calls out to JavaScript and does all the rendering in that time.

06:08.000 --> 06:15.000
So this is how fast you can run Python on the web these days.

06:15.000 --> 06:19.000
Sorry, this is not Python. This is actually a micro Python.

06:19.000 --> 06:23.000
So there are multiple Python VMs that you can run on top.

06:23.000 --> 06:29.000
And that's what separates Python and we're going to talk about it a little bit later.

06:29.000 --> 06:38.000
So this is to give you an idea of the kind of performance that I was going after as a user of Python.

06:38.000 --> 06:47.000
Another example, this is also using existing JavaScript technologies, but also Python abstractions on top.

06:47.000 --> 06:51.000
So this is a package called Pholium that allows you to draw maps.

06:51.000 --> 06:54.000
And this is specifically designed for Jupyter notebooks.

06:54.000 --> 06:59.000
Jupyter notebooks are also running Python sort of in the browser.

06:59.000 --> 07:04.000
But there you code really runs on a kernel and it comes back with something that can be rendered in your notebook.

07:04.000 --> 07:08.000
And that has to be HTML. So Pholium is one of that.

07:08.000 --> 07:10.000
It's not a picture. It's actually interactive.

07:10.000 --> 07:15.000
So the interactions here are all done at this moment in JavaScript.

07:15.000 --> 07:23.000
But the logic behind selecting the colors and feeding the data to produce this map is all done in Python.

07:23.000 --> 07:26.000
As you would normally do in the Jupyter notebook.

07:26.000 --> 07:29.000
And I'll show you the source again.

07:29.000 --> 07:37.000
But then the source for this particular one is all written in Python and advances a single page application again without a server.

07:37.000 --> 07:40.000
This is just a static HTML file.

07:40.000 --> 07:43.000
So here the code looks like this.

07:43.000 --> 07:45.000
You can see we import.

07:45.000 --> 07:50.000
But by script display whatever pandas you can import any

07:50.000 --> 07:56.000
Any data science module that you need.

07:56.000 --> 07:59.000
They need to be pre-compiled if they have native code.

07:59.000 --> 08:01.000
They need to be pre-compiled to WebAssembly.

08:01.000 --> 08:04.000
So this is all packaged up by the Python team.

08:04.000 --> 08:14.000
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.

08:15.000 --> 08:18.000
And then from that on you can just create a volume.

08:18.000 --> 08:23.000
This is like logic that you would normally have in a Jupyter notebook and it will produce the HTML.

08:23.000 --> 08:29.000
But in Python script slash Python this runs really well as well.

08:29.000 --> 08:32.000
Okay that's another example.

08:32.000 --> 08:38.000
Oh yeah in this one you can see that this is a flaw of many projections that we have.

08:38.000 --> 08:43.000
So I don't want to talk too much about politics but this is too much of an open door here.

08:43.000 --> 08:46.000
So you can see how big Greenland is right.

08:46.000 --> 08:51.000
So it's it's like bigger than the US.

08:51.000 --> 08:56.000
And this is why you would want Greenland.

08:56.000 --> 09:01.000
If you're an American but if you look at the real map so this is like a better projection at the

09:01.000 --> 09:04.000
The Mercator but this is like on the feeding map.

09:04.000 --> 09:10.000
So Brussels is right here where my mouse is and if you fly to San Francisco you actually fly over

09:11.000 --> 09:13.000
Iceland and Greenland in here.

09:13.000 --> 09:18.000
But you can see how big Greenland is compared to the US.

09:18.000 --> 09:25.000
Which is like five times bigger than Greenland so your perspective really matters.

09:25.000 --> 09:31.000
Another example that I wrote which because I wanted to write a more sizable application and

09:31.000 --> 09:35.000
Microlock which was the profile that I showed you before.

09:35.000 --> 09:41.000
I wrote something called Pisheets which is a big spreadsheet that runs in the browser.

09:41.000 --> 09:45.000
And for that I had to write a UI toolkit.

09:45.000 --> 09:51.000
So this is like yeah something you would run normally on a desktop machine and you produce UI

09:51.000 --> 09:52.000
widgets.

09:52.000 --> 09:56.000
This is all done in Python running in the browser.

09:56.000 --> 09:58.000
So you have some logic on the right you can see here.

09:58.000 --> 10:00.000
This is just a normal Python code.

10:00.000 --> 10:02.000
You say I have a container in there.

10:02.000 --> 10:08.000
I have a table and table row and you draw things in it.

10:08.000 --> 10:15.000
Behind the scenes when that code runs it creates the dumb elements and it attaches all your values to it and runs.

10:15.000 --> 10:17.000
So this is interactive.

10:17.000 --> 10:23.000
Again we care a lot about the time so this is implied that it takes like one and a half seconds to run.

10:23.000 --> 10:26.000
I'll run it again.

10:26.000 --> 10:28.000
You can see it's like around the second.

10:28.000 --> 10:31.000
So for Pisheets it takes like around by that as much bigger.

10:31.000 --> 10:35.000
It's a C Python VM so it the standard library is a little bit bigger.

10:35.000 --> 10:40.000
And in WebAssembly you have to create everything from the empty sandbox up.

10:40.000 --> 10:42.000
So that takes more time.

10:42.000 --> 10:48.000
But if you use Microlock Python you can see that it starts up pretty fast.

10:48.000 --> 10:52.000
So this is less than a hundred milliseconds to build up this entire application.

10:52.000 --> 10:56.000
Run it download it install the VM and all blah blah blah.

10:56.000 --> 10:57.000
To get to this.

10:57.000 --> 10:59.000
So this is a hundred milliseconds.

10:59.000 --> 11:04.000
Now what less Pisheets look like so it's hosted on a certain website but it's an open source project.

11:04.000 --> 11:07.000
You can install locally and just run on your own machine.

11:07.000 --> 11:10.000
This is just to make it easy for people to try it out.

11:10.000 --> 11:14.000
You don't have to run it on Pisheets and that but it makes it very easy.

11:14.000 --> 11:17.000
There are some examples in there so I'll run one of them.

11:17.000 --> 11:19.000
So this is one of the examples.

11:20.000 --> 11:23.000
You have a sheet. It looks like a spreadsheet.

11:23.000 --> 11:25.000
It is what you would do in a notebook.

11:25.000 --> 11:27.000
So the cells are Python code.

11:27.000 --> 11:30.000
So you can see here it says just random Python code.

11:30.000 --> 11:34.000
Here it says like do something with C10.

11:34.000 --> 11:36.000
But it also is a dependency graph.

11:36.000 --> 11:41.000
So you can see where the data comes from in the sheet and then where it goes.

11:41.000 --> 11:46.000
So the logic is written in Python but this entire sheet is also written in Python.

11:46.000 --> 11:50.000
So from the sheet from the cell functions you can actually escape to the sheet.

11:50.000 --> 11:54.000
And you can like redraw the whole thing as well if you want it.

11:54.000 --> 11:58.000
There's an example on the website that does chess in my way.

11:58.000 --> 12:00.000
So if you're interested in that look at that.

12:00.000 --> 12:03.000
But not all Python code is easy to write.

12:03.000 --> 12:05.000
So we have a eyes of course.

12:05.000 --> 12:07.000
Yeah this is like how can you avoid that.

12:07.000 --> 12:09.000
So I say do something with it.

12:09.000 --> 12:10.000
So I write that prompt.

12:10.000 --> 12:15.000
It says like visualize this thing and even before I can finish the sentence the code is written.

12:15.000 --> 12:19.000
And now I have a different way of rendering this particular thing.

12:19.000 --> 12:21.000
And I can try it again.

12:21.000 --> 12:24.000
Try another one and give me the same one.

12:24.000 --> 12:26.000
So maybe I want a pie chart.

12:26.000 --> 12:29.000
So I say pie chart.

12:29.000 --> 12:33.000
And I don't know how to do that but I can write English.

12:33.000 --> 12:35.000
Hey I got a pie chart.

12:35.000 --> 12:36.000
That's good.

12:36.000 --> 12:39.000
Now this code is all Python and runs in here.

12:39.000 --> 12:41.000
It has two VMs running.

12:41.000 --> 12:45.000
So it has micro Python to make the UI start up really fast.

12:45.000 --> 12:49.000
So if I refresh here.

12:49.000 --> 12:53.000
This is basically refreshing the entire application.

12:53.000 --> 12:57.000
And my goal was to be faster than Google sheets.

12:57.000 --> 12:59.000
I'm almost there.

12:59.000 --> 13:01.000
This one is a little bit more interesting.

13:01.000 --> 13:03.000
This loads a really huge dataset.

13:03.000 --> 13:05.000
You can see 82,000 rows.

13:05.000 --> 13:10.000
There's some Python code to filter and then select only two rows.

13:10.000 --> 13:13.000
And again, use folium for rendering.

13:13.000 --> 13:16.000
This is an example that uses duckDB.

13:16.000 --> 13:19.000
So duckDB is an alternative way.

13:19.000 --> 13:23.000
So not using pandas for you and your tabular data analysis.

13:23.000 --> 13:27.000
But you can use a SQL logic around it.

13:27.000 --> 13:35.000
So here we select all the rows and all the cells from that big CSV that we saw before.

13:36.000 --> 13:40.000
And the final example of pie sheets takes us a little bit further,

13:40.000 --> 13:43.000
because it does a special select.

13:43.000 --> 13:45.000
So it says, well don't just select everything,

13:45.000 --> 13:48.000
but select only the identifier and the coordinates.

13:48.000 --> 13:52.000
And then where the elevation is bigger than 14,000.

13:52.000 --> 13:58.000
And that is interesting.

13:58.000 --> 14:01.000
Okay.

14:02.000 --> 14:06.000
And it produces the same map, amazing, right?

14:06.000 --> 14:08.000
So that rules are the examples.

14:08.000 --> 14:11.000
So now you know what the goal is that we want to write.

14:11.000 --> 14:13.000
So how do we do this?

14:13.000 --> 14:15.000
Why do we want to do this?

14:15.000 --> 14:18.000
Why not just just JS and JavaScript, right?

14:18.000 --> 14:21.000
JavaScript is a steep learning curve.

14:21.000 --> 14:24.000
For most Python programmers, it's a weird environment.

14:24.000 --> 14:25.000
It's almost like an uncanny valley.

14:25.000 --> 14:27.000
It looks like Python a little bit.

14:27.000 --> 14:31.000
But when I switch between Python and JavaScript all the time,

14:31.000 --> 14:34.000
it's like try catch, get so confused.

14:34.000 --> 14:36.000
So Python is much better.

14:36.000 --> 14:37.000
It's much nicer.

14:37.000 --> 14:39.000
It's very popular.

14:39.000 --> 14:41.000
The most jobs on LinkedIn.

14:41.000 --> 14:44.000
The most batteries.

14:44.000 --> 14:49.000
And there are like millions of packages on Python, on pie pie pie pie.

14:49.000 --> 14:53.000
And that's why you should go for Python.

14:53.000 --> 14:54.000
But it's not easy, right?

14:54.000 --> 14:58.000
How do you write your web application in Python?

14:58.000 --> 15:04.000
So this is a reason why you wouldn't use Python for your web application.

15:04.000 --> 15:08.000
Because just creating this environment on your desktop is really hard.

15:08.000 --> 15:10.000
If you want to share your code with somebody else,

15:10.000 --> 15:13.000
and they have to run all this like same environment.

15:13.000 --> 15:18.000
This morning we had two talks about packaging in Python and how hard it is.

15:18.000 --> 15:22.000
We had to talk about how hard it is to do Django and how big it is and whatever.

15:22.000 --> 15:24.000
So those are all things that we want to solve.

15:24.000 --> 15:30.000
So in pie script we want to be able to run Python anywhere without installers.

15:30.000 --> 15:34.000
So the examples are all the examples I gave you is just clicking on the link.

15:34.000 --> 15:38.000
And it constructs this entire environment that you need on the fly.

15:38.000 --> 15:43.000
So you don't have to worry about packaging and getting everything installed.

15:43.000 --> 15:49.000
You don't have to tell people you have to install a UV before you can get started with Python, right?

15:49.000 --> 15:51.000
It's just clicking on the link.

15:51.000 --> 15:53.000
So this virtualization is very important.

15:53.000 --> 15:55.000
So what does the architecture look like?

15:55.000 --> 15:59.000
So these days you have to use, of course, Dali to create the architecture.

15:59.000 --> 16:04.000
This rabbit is the icon for pie script.

16:04.000 --> 16:06.000
You can see it on my laptop as well.

16:06.000 --> 16:08.000
So he is the bunny.

16:08.000 --> 16:10.000
So you're interested in that.

16:10.000 --> 16:16.000
So the snake is not yet eating the bunny, but he's got really interested in it.

16:16.000 --> 16:20.000
So this is the real architecture.

16:20.000 --> 16:24.000
I try to make it as simple as possible because there's so many moving parts.

16:24.000 --> 16:26.000
So you write your Python code in an editor.

16:26.000 --> 16:28.000
It doesn't matter which one.

16:28.000 --> 16:31.000
And it basically runs identical on the top.

16:31.000 --> 16:34.000
So that is enabled by pie guide, which has been compiled.

16:34.000 --> 16:36.000
The C-Python Compile.

16:36.000 --> 16:41.000
The C-Python VM is compiled into web assembly by the pie guide team.

16:41.000 --> 16:46.000
And micro Python, which is an embedded VM, which is compiled into web assembly.

16:46.000 --> 16:49.000
And they run your Python code unchanged.

16:49.000 --> 16:50.000
So that's important aspect.

16:50.000 --> 16:54.000
So you don't have to compile your code or something to JavaScript.

16:54.000 --> 16:57.000
That is an alternative from the past.

16:57.000 --> 17:04.000
With pie script, you just couldn't run your code like that.

17:04.000 --> 17:08.000
So if you want to get more interested in pie script, go to the community.

17:08.000 --> 17:09.000
And that is your starting point.

17:09.000 --> 17:14.000
They get you to discord where you can interact with people contributing to the project.

17:14.000 --> 17:17.000
Coding can be done in VS code for instance.

17:17.000 --> 17:19.000
And you have a static HTML file.

17:19.000 --> 17:23.000
You can do rendering of that file inside of VS code.

17:23.000 --> 17:25.000
And this is really efficient.

17:25.000 --> 17:28.000
But you make it change and the renders immediately.

17:28.000 --> 17:31.000
If you want to get a demo, I can show you here on my laptop.

17:31.000 --> 17:32.000
The other one you can use.

17:32.000 --> 17:33.000
Get up code spaces.

17:33.000 --> 17:35.000
Doesn't matter.

17:35.000 --> 17:39.000
Before you go to pyscript.com, which is a commercial offering by an account

17:39.000 --> 17:41.000
to run pie script in that environment.

17:41.000 --> 17:45.000
But it's not necessary to run your pie script code that way.

17:45.000 --> 17:49.000
Or you can use any editor.

17:49.000 --> 17:54.000
So this morning, we talked about micro-fort sadly passing as a way.

17:54.000 --> 17:56.000
Bramolina left us last year.

17:56.000 --> 17:58.000
He's one of my big heroes.

17:58.000 --> 18:05.000
I've been a VIM user for 42 years now or something.

18:05.000 --> 18:08.000
Big loss to the Netherlands.

18:08.000 --> 18:23.000
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,

18:23.000 --> 18:26.000
pyscript is an easy way to do that.

18:26.000 --> 18:27.000
There's no install.

18:27.000 --> 18:29.000
They just click on a link.

18:29.000 --> 18:37.000
It runs in the browser and you can have a much wider audience for your data analytics or your applications that you've written.

18:37.000 --> 18:43.000
If you go to a route, I would definitely check out LTK, which is the library that I showed you before.

18:43.000 --> 18:52.000
It makes it a lot easier to construct your layout and basically set up your event ladders or do a reactive-based model-based

18:52.000 --> 18:55.000
UI and then look at Pyscript.

18:55.000 --> 18:56.000
Pysheets.

18:56.000 --> 18:57.000
It's an open source project.

18:57.000 --> 19:00.000
Both LTK and Pysheets are open source.

19:00.000 --> 19:05.000
So you can look at the source and get a lot of inspirations on how to do things.

19:05.000 --> 19:07.000
You probably don't want to build Pysheets.

19:07.000 --> 19:08.000
This has taken me 10 months to write.

19:08.000 --> 19:11.000
So this is a big investment of your time.

19:11.000 --> 19:13.000
But I made it open source.

19:13.000 --> 19:18.000
It can be an inspiration to you all to actually explore.

19:18.000 --> 19:21.000
With that, I want to thank you.

19:21.000 --> 19:32.000
And see if there are any questions.

19:32.000 --> 19:33.000
Any question?

19:33.000 --> 19:39.000
Yes.

19:39.000 --> 19:40.000
Thanks for the talk.

19:40.000 --> 19:45.000
I wanted to ask if I'm going to be deploying an app using Pyscript.

19:45.000 --> 19:49.000
Does it get hindered or does it get hindered performance?

19:49.000 --> 19:56.000
Does it scale well if I want to even up and push it to several users online or is it fast?

19:56.000 --> 20:01.000
So the question is about performance and then distribution of application to multiple users.

20:01.000 --> 20:07.000
So it will scale a lot better than traditional applications because there is no server component.

20:07.000 --> 20:13.000
It's a static file that you, it's an index that HTML and maybe some assets that you have to deliver.

20:13.000 --> 20:17.000
Once they're in their browser cache, there's no interaction with you anymore.

20:17.000 --> 20:23.000
And it becomes a server page application, a single page application.

20:23.000 --> 20:25.000
So it will scale a lot better.

20:25.000 --> 20:31.000
Like Pyscript.com for instance, which is a hosted application for Pyscript running Pyscript.

20:31.000 --> 20:34.000
Their server bill has been $100 for last year.

20:34.000 --> 20:35.000
That's it.

20:35.000 --> 20:37.000
Pyscript buys sheets itself.

20:37.000 --> 20:40.000
My server bill is $12 for whole year.

20:40.000 --> 20:42.000
So that's it.

20:42.000 --> 20:43.000
So it will scale a lot better.

20:43.000 --> 20:46.000
It's a lot cheaper because everything runs on the machine.

20:46.000 --> 20:49.000
And that was a great question for you deserve a book.

20:49.000 --> 20:53.000
So come here and you will get a copy of the book that I've written in.

20:53.000 --> 20:55.000
Next question.

20:55.000 --> 20:58.000
Hello.

20:58.000 --> 21:00.000
Thank you so much for the talk.

21:00.000 --> 21:01.000
It was really insightful.

21:01.000 --> 21:05.000
How limiting is the environment available?

21:05.000 --> 21:12.000
So how soon after a new release of Python are the web assembly versions of Python available?

21:12.000 --> 21:16.000
And also do all the third party packages you want to use.

21:16.000 --> 21:22.000
Have to be pre-compiled to run on that VM or can you just kind of use any Python package?

21:22.000 --> 21:23.000
Those are great questions.

21:23.000 --> 21:25.000
You also deserve a book come here.

21:25.000 --> 21:28.000
But that's true.

21:28.000 --> 21:30.000
So it's an independent, this a pipeline.

21:30.000 --> 21:35.000
When a new version comes out of Python, then the Python team has to catch up.

21:35.000 --> 21:39.000
And the Python team is usually like a little bit behind.

21:39.000 --> 21:43.000
But they try to be up to date and like talk to who it here.

21:43.000 --> 21:44.000
He's waving.

21:44.000 --> 21:45.000
Yeah.

21:45.000 --> 21:52.000
They try to be as close as that to the pipeline because people want to adopt very quickly.

21:52.000 --> 21:54.000
The embedded version is a little bit slower.

21:54.000 --> 21:56.000
Micro Python that I mentioned before.

21:56.000 --> 22:00.000
So if you come up here, I can show you the versions that we're running right now.

22:00.000 --> 22:01.000
But you can also freeze.

22:01.000 --> 22:04.000
So you can choose which version you want to adopt.

22:04.000 --> 22:10.000
If you want to contribute to projects like Python, you can accelerate the adoption process, of course.

22:10.000 --> 22:11.000
Yes.

22:11.000 --> 22:13.000
Great question.

22:13.000 --> 22:14.000
Yeah.

22:14.000 --> 22:15.000
That question here.

22:15.000 --> 22:16.000
You want to book too.

22:16.000 --> 22:18.000
Oh, just a question.

22:18.000 --> 22:20.000
I have a question on there.

22:20.000 --> 22:26.000
What is the bridge about the bridge between JavaScript and the browser?

22:26.000 --> 22:29.000
Because we can use by script.

22:29.000 --> 22:32.000
You did a very big demo, very beautiful demo.

22:32.000 --> 22:37.000
But if we want to integrate it with existing libraries from JavaScript world.

22:37.000 --> 22:45.000
So PiScript is an environment that exposes the DOM window object, basically.

22:45.000 --> 22:50.000
So from that, you can get anything that is in the global namespace of JavaScript.

22:50.000 --> 22:52.000
You can get access to by name.

22:52.000 --> 22:59.000
So if you import 3.js and import 3 in capitals, then that is window.3.

22:59.000 --> 23:03.000
Then from Python, you can retrieve that value.

23:03.000 --> 23:08.000
And then from that moment on, when you call a Python function on it, it doesn't exist, of course.

23:08.000 --> 23:14.000
But then the foreign function interface will look that up in the Python in the JavaScript version.

23:14.000 --> 23:17.000
And it will say, like, do you have that key on you?

23:17.000 --> 23:19.000
And then if so, you have to call it.

23:19.000 --> 23:21.000
And it creates a proxy between the two.

23:21.000 --> 23:22.000
So it passes around.

23:22.000 --> 23:26.000
So between Python and JavaScript, the integration is just seamless.

23:26.000 --> 23:28.000
You don't notice it when it's happening.

23:28.000 --> 23:34.000
There's a cost involved, because between any two languages interaction takes time.

23:34.000 --> 23:36.000
And this conversion of different.

23:36.000 --> 23:41.000
So a Python int is different than a JavaScript int number, whatever.

23:41.000 --> 23:47.000
So these are conversions happen when you do this foreign function in call.

23:47.000 --> 23:55.000
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.

23:55.000 --> 23:58.000
So you want to basically bundle your operations.

23:58.000 --> 24:02.000
You're drawing operations in one collection and then send the collection over.

24:02.000 --> 24:05.000
So you pay that cross barrier penalty once.

24:05.000 --> 24:09.000
This is the same thing between Java and C when you have J and I calls, for instance.

24:09.000 --> 24:11.000
You have the same consideration.

24:11.000 --> 24:14.000
So how do I send my Java objects to C and back, right?

24:14.000 --> 24:16.000
You don't have access to shared memory.

24:16.000 --> 24:19.000
So this is, we have to do marshalling.

24:19.000 --> 24:22.000
So it's a good question to you.

24:23.000 --> 24:26.000
And just a quick question.

24:26.000 --> 24:28.000
Just a quick question.

24:28.000 --> 24:32.000
How hard is it to bootstrap Python script applications?

24:32.000 --> 24:33.000
Like, is it one command?

24:33.000 --> 24:35.000
This is two commands.

24:35.000 --> 24:39.000
So the bootstrap applications.

24:39.000 --> 24:42.000
So you have an index.html file.

24:42.000 --> 24:50.000
And in that it says, I know if I have a very quickly bring it up like that one example that I had here.

24:50.000 --> 24:53.000
So this is the index that HTML.

24:53.000 --> 24:56.000
And here it says, there's a script in there.

24:56.000 --> 24:58.000
So this is Java script.

24:58.000 --> 24:59.000
And then a little bit lower.

24:59.000 --> 25:03.000
There will be a reference to a Python file here.

25:03.000 --> 25:04.000
Please find it.

25:04.000 --> 25:05.000
Yeah, here.

25:05.000 --> 25:08.000
So this is what you need to do to run your Python code.

25:08.000 --> 25:10.000
So it's just one tag in the index of HTML.

25:10.000 --> 25:13.000
And in this case, it says, it's not just script.

25:13.000 --> 25:15.000
It's a Pi script.

25:15.000 --> 25:18.000
And then you can also do micro Python and Pi.

25:18.000 --> 25:25.000
And Pi script will parse the HTML at low time and detect that tag.

25:25.000 --> 25:29.000
And then instantiate the C Python VM or the micro Python VM.

25:29.000 --> 25:31.000
And then start the bootstrap for you.

25:31.000 --> 25:34.000
So it's just a little less one tag there.

25:34.000 --> 25:38.000
If you want to get started and try it out, I would try Pi script.com.

25:38.000 --> 25:40.000
And just create a sample project.

25:40.000 --> 25:41.000
And it's very easy.

25:41.000 --> 25:44.000
Like in one minute, you get your app running.

25:44.000 --> 25:46.000
And we have to ask.

25:46.000 --> 25:47.000
What about the security?

25:47.000 --> 25:51.000
For instance, in JS, we have a lot of security issues.

25:51.000 --> 25:54.000
It could be like cross-excripting.

25:54.000 --> 25:57.000
So we have to avoid to use HTML for instance.

25:57.000 --> 26:03.000
And thus, by script, protect us in this kind.

26:03.000 --> 26:04.000
Yes.

26:04.000 --> 26:06.000
So the question is focused on security.

26:06.000 --> 26:08.000
Can you do cross-site scripting?

26:08.000 --> 26:09.000
Things like that.

26:09.000 --> 26:14.000
So you're limited to whatever limitations there exist for JavaScript.

26:15.000 --> 26:22.000
It's probably even stronger because all the code runs inside of the web-assembly sandbox,

26:22.000 --> 26:30.000
which is even more relative and worried about access from other applications to it.

26:30.000 --> 26:38.000
But if you cannot access across domain from your web app,

26:38.000 --> 26:41.000
it will not be able to do that from Python either.

26:42.000 --> 26:44.000
So for instance, Pi sheets that you see.

26:44.000 --> 26:47.000
It calls out and retrieves files from somewhere else.

26:47.000 --> 26:52.000
This has to go through a trampoline server to actually do that for you on your behalf.

26:52.000 --> 26:54.000
Because I can't like blank it.

26:54.000 --> 26:57.000
It'll allow you to call everything, right?

26:57.000 --> 26:58.000
So this is it.

26:58.000 --> 27:01.000
So the same security rules apply.

27:01.000 --> 27:02.000
Yeah.

27:04.000 --> 27:05.000
So thank you, Chris.

27:05.000 --> 27:06.000
Do you have any?

27:06.000 --> 27:07.000
No.

27:07.000 --> 27:08.000
It's finished for the question.

27:08.000 --> 27:09.000
One more question.

27:09.000 --> 27:10.000
Okay.

27:10.000 --> 27:12.000
So whoever asked the question come here, you get a book.

27:12.000 --> 27:15.000
If anybody else wants a book, come here too.

