Hello. So yeah, I'm talking about PyScrip. So I'm trying to get a catchy title, so it's
kind of like a clickbait. So with PyScrip, we replace Django. So maybe a lot of people
will be like really, you know, sparking their interest because I mentioned Django, which
is a very popular framework for web. But today, I'm not going to talk too much about Django,
but I'm mainly going to talk about PyScrip. And I would have some crazy demo at the end,
which is very interesting. So you may not want to miss it. But the most important thing
is that this is the link to the slides. I should have used some QR code, but kind of lazy. So
it's just the link that you could, you know, find the slide deck. It is also uploaded to the
FOSTA website. You can find it to follow along if you can't see it very well or anything happened,
then you can look at the slides. And all the links are there as well. So I hope that since you're
here, you have heard of PyScrip, but who, how much do you know about PyScrip? Like, except that it's
something to do with Python? So, yeah, silence. So, yeah. So I think most people that match,
I've talked about PyScrip, and then they said that they have heard about PyScrip. They may have
read a block or two about PyScrip. It's something that's relatively new. So that's why I think it's
important to kind of, you know, to put information together so people have something to, you know,
look at when they want to know more about PyScrip. So, by the way, I'm checked. Why am I talking
about PyScrip? Why sounds like I know a lot about PyScrip? Because I work in Alaconda. So PyScrip
is developed by a team in Alaconda. So I work with them a lot. So I have, you know, kind of,
you know, very close to the source. So I kind of have some like information about what's the
newest thing about PyScrip. And I love open source project. I have been involved in open source
project in the past. I just want to put more pictures there. So that's why I put it here. And
I organize a lot of events. So let's jump into it. What is PyScrip? PyScrip is actually a framework.
Some people think that PyScrip is a new language, but it's not. It's actually Python. But this,
you know, you can write Python in your HTML file. That's what it is. And also, like, it's, or it's
a framework. Why? Because later you'll see why. We say PyScrip is a framework because of how you
can change the backend and other stuff. So it lets you run Python application in the browser.
Basically, it just means that you can, well, you can run, you know, you can write Python script
as just like you run, like you write JavaScript in the HTML file. And then the browser would
understand what you want it to do, and they would do something. So, but it's not trying to repage
JavaScript. You can actually use it with JavaScript. For example, I'm using it with the D3 library,
which is crazy. Who knows about D3? Yes. Okay, good. Okay. I'm not, like, speaking to other
people. Yeah, it's good. So I will show something more like later. So basically, you can actually
parse the objects back and forth. So you can change a Python object into JavaScript object,
and then your JavaScript library, like D3, will understand it or the other way around. So it
is something that is quite new. So also, so all these things that I talk about that you can,
like, change the Python object into JavaScript object, all these stuff won't be happening
if we don't have the PyLDI project, which they is, by the way, for those of you who haven't heard,
it's kind of, it started as a monselors project called iLDI. They try to, like, have a lot of
things that is, like, run, you know, in a WESM, WebAssembly, so the browser can run it. And then
there's a, so within that, all those projects, there's a Python, you know, project that is actually,
like, converting Python into WebAssembly. So that's the PyLDI project. So that's actually
allowed you to run the Python. So without it, like, actually, PyScript won't work. So, well,
PyScript will still work. You can change the backend, but, like, it started with PyLDI. Sorry,
I'm, like, kind of, I'm trying to be correct in what I'm saying. But the main thing is that
you need to, kind of, compile Python into a WebAssembly. So PyLDI is, like, the kind of one
of the most popular one that is, like, having the whole, more or less, the whole thing that
your standard Python offer is actually compiled into WebAssembly, so you can run Python on the
browser. But there's also other things that we are trying, the team is trying now. For example,
they are trying to compile MicroPython, which is a lighter version of Python, into WebAssembly. So
it more or less works the same, but you have some kind of Python functionality that is not
available on MicroPython. So you can actually choose which one you want to use. And also,
because one thing about the PyLDI project that is, that is, why it, why it is the first one
that PyScript adopts and why is the first one that is, like, why is it so popular? Because
the project itself also provides a lot of Python packages. For example, those that we use a lot,
for example, NumPy, like, scientists and data scientists use a lot, it's like, like, some of
NumPy, SciPy, Cyclo and all those actually are quite difficult to run on the browser because
they are not pure Python. So for pure Python, if you have a Python interpreter that actually is
compiling to Wasm, of course you can do it because they are just Python, but something like NumPy,
SciPy, Cyclo and they are not pure Python, then it's a bit tricky, but PyLDI project also provides
that. So now we can also run those very complicated Python packages on the browser, which is cool.
So I will show you a little bit of the PyScript basic and then I'll show you the demo and then,
like, all the questions will come at the end. Is it too small? I don't know how to zoom in though.
That's why the link is important at the beginning. So I can explain, but the content of this code
is not the most important thing. It's just like how a typical PyScript will look like. So I'm just
talking about this section here. So for the first two lines here, you don't need to see it, but I'm
telling you what it is. It's just like when you have a JavaScript code, you would actually have a,
probably you have a CSS, which is like the style of how your website would look like, the style
sheet, and then you have a JavaScript that you kind of put in and then you can run all these,
like, JavaScript functions that you have. So this is actually something like a path to a
PyScript.js that's hosted on the PyScript.net. This is actually what allows you to write Python
on the websites, on your HTML file. Well, you may ask, like, why is it.js? This is just how
awesome work. So we have to follow the standard. So yeah, that's.js, but that's not important.
You're not writing JavaScript, so don't worry about it. Next is there is a section that you can
actually write Python code. So here is just some NumPy code that is plotting some NumPy
random numbers. Okay. So here, like, if it's, sorry, I'm not expecting the room to be this big.
So if you can see it, so the first line is basically a HTML tag and it's PyScript, and then
it also has a little bit of settings, like output equals to plot and stuff like that. And it is
just a Python script. It's just like input NumPy, input Mapolyb, and all that stuff.
And then it's, you know, it's Python code. It's just like, you know, you can copy and paste your
Python code there. It's more or less the same thing. And the other thing that you may have
when you are using PyScript is a PyConfig file. So this PyConfig file is actually,
there's multiple format that is supported in this example. It's in JSON format. It's just a
JSON file with, like, saying packages is NumPy and Mapolyb, because we are using it in the code,
in the Python code. That's why we have to, like, put it there to say that we are using those packages,
kind of like your PIP install. It's like putting it in your, in the environment,
within your browser. So that's what it does. So this is the code. That's typically how it looks
like. One catch is that it's using the latest version in the first two lines there. So if you
don't want to, you know, break your code, you can pin a version. Now you can also pin a specific
version with the releases and then the version number. Now we are named. We are, we are, we are
tacking it as, like, the year, month, date, year month, probably, and then the versions. So,
so yeah, you, if, for example, you don't want it to, because now PyScript is still changing a lot.
So if you don't want your code to be not working next month, so you may want to pin the version
until you want to update it manually when you look at the code again and update it.
You can do it. So don't worry about it. I know people will have questions about it.
Or you may think that, oh, like, you know, you're a web developer and, like, you, you don't like
the CDN, like, calling in from another website that you have no control of, you know, if that
website got attacked or something that won't work, it may be very dangerous. You can host it yourself.
You can download that two things, you know, the, the, the style sheet and the JavaScript code yourself
and, you know, and, and the other things with it as well. There's, there's also a few other things,
but they're all downloadable. You can download it and host it yourself if you want to.
So, uh, it's getting more complicated because, you know, now we're, like, the PyScript is
getting, like, more developed and now there's more things you can config about how PyScript works.
So the PyConfig tag is where you can change all those. So first of all, the tag itself,
so we're, within inside, there's multiple format you can use. There's the Tomo format,
which is the default. So if you don't tell this tag what format you're writing, so it would just
assume you're using a Tomo format. So in this demo here, it says, like, packages and, and paths,
so it's just, like, you know, what package you're putting in just, like, again, like the pigment
store thing you have to, there's an environment within the browser that's running the other
PyScript code. So you have to first say what packages you are using, so, uh, to allow it to be
usable. Um, the JSON format, again, it's just different format. It's more or less the same thing.
Or you can actually have another source. You can write your file in another, for example, either,
either JSON file or Tomo file. You can also put it in because, well, you know, you don't want
everything to be in your HTML file, right? So you can actually put in other source as well.
And also, um, yeah, the PyConfig tag is, uh, it's not just used for putting all your packages
and other stuff. There's also other things that you could, uh, you could set in a PyConfig tag.
So, you know, you can also host the wheel of the, of the packages. It doesn't need to be
using the one that's provided by PyOdi. Um, you can also, if you have your, like, for example,
in Python, you can actually import your local script as well. You can also do that. Uh, you can,
uh, you can do it by the fetch tag. Uh, but, uh, I'm not showing it here. You can, if you're
interested, you can look at the documentation of PyScript. It will show you how to use the
fetch tag to actually load in, uh, your other Python script. You can do it as well. Um, you
can change the runtime setting, like I said before, uh, because PyOdi is the default one
at the, when we first started having PyScript. Now, uh, is, is, I think it's like in development
that, like, you can actually change the backend, like, which one time you want to use. If you,
like, for example, just want to do some demonstration with Python or you are using, it's a tool to
teach, uh, kids how to code in this. You may not want to use PyOdi because it's slow, it's heavy,
it's, like, powerful, and it's useful, useful for other things. You can use MicroPython, which
take no time to load, um, but it provides some other basic Python, um, code that you could write,
uh, in the HTML file. So you can quickly teach someone Python without installing Python and just,
like, running, running it on the HTML file. Um, you can also add some metadata. For example,
you know, you want to add the author who write this script and the license. You can also do that.
No problem. So, uh, another thing that, uh, you may put in your HTML file while you are using
PyScript is the PyRepoll, uh, is something that's just like Jupyter Notebook. If you have
Jupyter Notebook, you know, it's, like, very nice, um, repo that you can, like, put in the Python code,
shift, enter, and then it will execute and give you the result. Um, you can also embed that in your
HTML page when you are using PyScript. So you just need to do the same thing, you know,
having those two lines of the style sheet and the, um, PyScript.js. And then you can just put the
PyRepoll tag and then you will have a Jupyter-like repo that you could use in your site.
So why is it so useful, right? Like, uh, it's a new thing, it's exciting, but
can I really use it? Um, or is it just a fun thing to do? Um, why doing it on the front-end, right?
Like, now you can have, like, application, like Django, like I said, it's a kind of people love
Django. And like, I, you know, uh, why do we want PyScript? Um, because sometimes, like, things just
need to be run on the front-end. Sometimes, like, we can't really, um, rely on, you know, uh, an
application like Django or other Python application to handle all this Python code. Um, for example,
if you don't want to use up all your resources, right? Like, if you have a back-end and then the
back-end is actually hosted by you or the cloud service that you pay for, if there's a lot of
user and like the, if every single user had a very, like, um, heavy use of your resources,
then the bills can be expensive. And then you may not want that. You want to maybe, um, you know,
give, give back the low into the, the users who is using it, right? So you could, you could maybe
push things to the front-end. Um, on all, if I've heard, like, maintainers said that, like, they
may want people to try out their code, you know, you can build a sandbox that let people to, um,
to run it. Like, for example, a lot of the data science stuff, you know, uh, for example,
the NumPy, SciPy, they, they will have, before they will have the binder thing that actually load
in, you know, another application, you know, that have the, have the back-end and then they
could run some code there to do it as an example. But for these services, uh, they're provided,
if they're provided for free, usually they're quite slow or, you know, they have limits. So, um,
if you want to provide a, uh, a sandbox for, for users, if it can run on their machine,
you don't have to worry about people abusing it as well. Like, for example, some people, if you,
that whoever run whatever on your sandbox, they could do crypto mining and then it's not a good
thing. So if it's on the front-end, it's, it's using the user's resources, not your resources,
which if they want to mine Bitcoin, it's fine. It's on their machine or on your machine, you don't
have to pay the bill. Um, also, uh, sometimes, uh, we have applications that, for example,
it's some, uh, research data, some medical data, very sensitive. Uh, so you, you can't really,
you know, it's like the rules that you, the, the, the data can't leave the machine. So
you can't send it to a back-end somewhere to do it. Then, you know, um, maybe you can provide that,
you know, provide the code that, um, you know, someone can use it to run on the browser. So
it's run on their machine. So instead of, you know, you have, you have built the application
and they have to send the data over to your app or whatever the back-end is and then, uh,
to run the application. So it's also easier to set up as well. Otherwise, you may have to
provide a separate secure environment with the whole kind of, uh, set up of the back-end and
the front-end together and stuff. You know, uh, if you just have the front-end, it's much easier.
You don't have to worry about it. So, uh, with high script, with page Django, I know that you
already know the answer is no, but, uh, actually it's very fun if you use them together. Um,
I will show you a few things that I like, uh, that is done by either me or some of my friends.
There's actually quite cool things that we have used, like both Django and high script. So, uh,
for example, this is what I have done with, um, can I just pass away? Yeah, okay. So this is something
that I've done. It's like, uh, using high script with, uh, with Django that I've, so this is what
I, I will show you what it is first and then I would explain. So here, this is the thing. I
think this one, this one I can assume is cool. So this is a recommender system, right? So I have
all these movies that I download from the movie dataset on, uh, cargo and then, um, is there,
there are a bunch of ratings. So this recommender, if you put in a movie that you like, if you try
to find all the potential movie that you like after, for example, I always like putting Iron Man
because I know it works. And then give me five recommendations. If I like Iron Man, what else
would you recommend me? And then if I click recommend, and I've got five of them, right? So
most of them sci-fi, sci-fi movie, which is quite cool. Um, there's also the Dark Knight, which is,
I think it's the, the movie about the Batman, which is also, I like it. Um, so yeah, that's nice. Um,
so, but this thing, right? This thing, usually you think of, oh, it's like a machine learning thing,
right? It's a, uh, it's a recommend, recommender system. You know, can I run it on the front end?
Yes, you can. As long as you have your model already trained, then, um, for example, in my example
here, actually you have a link to see the, the, uh, the, how it's set up. If you click on this link,
uh, it will show you how I set it up. So you can play around yourself as well. So, um, what I did
is just like, I, of course, I download the data as a gif, and you have to have the data to make
it work, right? Um, and then after that, you just, uh, you know, run, run some of this script. You
can actually do, do it in a more beautiful way. I'm just using some command line to run all this
script to load in the data to, uh, to train your model and stuff. You can do it with other ways.
For example, you have a user, uh, a mean user interface, right? They upload a new data and
other stuff. Then, uh, it will automatically retrain the model when there's new data.
You can set that up as well, but it's just a demo. So this is like this. But after that,
there will be a model that's already, um, trained. It will deploy to the front end. And then in the
front end, that's how this come in. That's like, that's how it works. So this is just a trained
model. It's very lightweight. Um, and then you don't have to host all the data. It could be done
somewhere else. But, uh, for the user, they, you know, they have a trained model and then they
just need to put in the input and it will give you some results. So if a machine learning model
deployed on the front end, another thing that my friend has done, which is quite cool, is
front end as a back end. So it's, it's running Django on the browser. So
yes, this is so small, but yeah, someone has done it. Um, this is not my doing. So I, I, I don't
like, uh, you know, I don't have any responsibility, but you know, have a look. So this is actually
like you have, so you have two, basically you have two browser, two, uh, browser, like HTML page.
One page is the server. One page is the front end. So this is what it is. So you have a back end
and a front end on the same page. Yay. Um, so yeah, you can do that. So I, I was like, oh, this is
a bit fun, but is it useful? But my friend here, Hugo told me that you can actually use it to test
things because you now can run an application on the browser. So everybody have a browser. So you
can, you can run an application on it, which is very cool. So, um, yeah, check that out. Um,
other things that I use pie square four is not, uh, with Django is, uh, with, uh, other things,
for example, use it together with D3. I have this example here. I already preload them because I,
I'm not going to like fool you. It's actually take quite a while to load. So that's why I preload
them. Um, but yeah, but because I'm using the whole kind of package, right? Here I'm using
network X. I have put in a network graph. I have all these network analysis, which is super cool.
But, you know, I don't like the network X, uh, visualization because it's kind of basic. So
that's why I use D3 for the visualization. I can do this, right? Very cool animation. I can click
on things and things change. You know, now I see all the neighbors are colored coded. Um, so yeah,
like, uh, you can combine the cool stuff that JavaScript provide, for example, D3 and the
cool stuff that Python provide, which is all these like data science stuff, which is cool. Um,
also there are other plots as well. You know, um, before, you know, it's, you know, you can't have
these interactive, um, things that you could, you know, interactive graph done easily on your
website. Um, so yeah, and also a map as well. This is not again, not my demo, but, you know,
you can now have this map thingy where you can use folium, which is a, again, Python library. Now
you can use it on the browser. Super cool. Um, yeah. And also I have actually a, start building a
Pyscript tutorial. Again, this is working progress because things keep changing. I can't keep it
up, but, um, if you're interested, if you want to try it, that may be a place you want to have a
look at. Um, so yeah, all of these slides, again, is this on the slide. So, uh, yeah, so download
my slides if you need to. So, uh, I think I don't, don't have too much, um, time left. I would, uh,
I would like to answer your questions, but there are these common questions that I would also
ask and answer myself. So, for example, people ask me, can you pull in a Python script? Yes,
you can. You can use the fashion now, look at the documentation if you want to. Um, what Python
version you're using, it depends on the runtime, which is the, again, PyConfig settings that you
could, um, you know, uh, that you can look at it and see which one you want to use, you know,
PyOdi version, which version you want to use, you can choose it yourself. And, uh, you know, why we
can't do it like JavaScript, having script tag equals to Python, because, uh, this is so new,
all the, uh, browsers, they don't support it yet, so we have to make a custom tag, which is PyScript.
Okay. Uh, why don't you just use PyOdi? I think PyScript is just easier to use. PyOdi is very
nice, um, but, you know, uh, sometimes get quite complicated for beginners, especially, um, also
you can change the runtime with PyScript. So it's not just PyOdi, you can, again, you know, there's,
my colleague is now working on a compiled version of Michael Python. It would be much faster, much,
much more lightweight. So try that. Um, a bunch more other things. So, uh, can you pin a version
of the light, of the packages that you use? If you want, well, if you want, then you better
host the wheel yourself than, you know, which version you're using, and it's there frozen and
changed forever. Um, so also some, do you know Brighton? Maybe some of you have heard about
Brighton. So Brighton is a project that tried to, uh, translate Python into JavaScript and then run
it in the browser. Um, the difference is that PyScript actually is not using JavaScript, it's
actually using Wasm. So, uh, Python is compiled to Wasm, so, uh, more packages is available. Um,
so yeah, also you can, again, change the runtime, the backend, which one you want to use. Beware,
as someone mentioned, Beware in my previous talk. Uh, so yes, I would love to, I would love to see
more support for Beware, but I can't say for the company, so I'm not saying that. Um, yeah, so, uh,
that's the end of my talk. I know I have a few minutes left for Q and A, so, or if you didn't
get the sticker at the beginning, come to talk to me, I'll give you a sticker.
Thank you. Uh, we have a few minutes for questions and, uh, before the questions, I want to thank
everyone for joining the Python Dev Room. And I want to thank also Eric Gasoni, uh, my friend who
organized, uh, all of the planning of the day and, um, everything upstream. Um, and he made a great
worry for the, yeah, all the selection of the speakers are planning everything. He couldn't
make it here today, but, um, I really want to, to thank him as well. Thanks everybody.
And thanks to Arnaud also for joining me today, uh, to help the Dev Room. Uh, questions, yeah.
Hi, uh, thank you for the wonderful talk. Uh, PyScript is, uh, very exciting. Uh, I know people
are using WebAssembly to run untrusted code in the browser. You can use it like a sandbox. So,
uh, it's very exciting. But my question is, so you are importing packages. Is that easy to do? Do
the packages have to be on the machine already? Yeah. So, uh, if you have internet connection,
so the, uh, package, if you just simply put in like, you know, in the PyConfig, you put in package
equals to something. So those will be actually proved from whatever PyAlgize provided. So it
needs to be loaded from online. So you'll see if you have a web page, it will take quite a while
to load. But you also have an alternative that you can download the will of the package. As long
as that will is purely written in Python. So something like, uh, NumPy, SciPy, those, because
they have extension, they are not purely written in Python. Those, you don't have an option. You
have to use the one that PyAlgize provided. But otherwise, if it's in other library, for example,
first you will see, you know, it's purely written in Python. You can download the will and it can
run locally. Yeah. Yeah. My question is about mudplotlib. It's okay. But, um, how is this
base map or cartoply? Can it be used also? Uh, mudplotlib, sorry. Mudplotlib is for graphics,
but if you have cards, maps, base map, can such a tool also be used then in the browser?
Yeah. Most of the library that if it's available in Python, it will also be available. So,
it must be pure Python or it's, uh, I'm not sure. I don't know. I try. Yeah. So you have,
you have to check like the library that you want to import. Is it purely in Python or not? So, yeah.
I'm a bit confused because, uh, the, what we loaded in the browser is a JavaScript module. So
is there some WebAssembly somewhere? Yeah. So you see the script that was import is.js, right?
But actually that's a WebAssembly. It's just that the standard, the WebAssembly standard is like,
when my team provided, like, when they released the thing, which is in WebAssembly, but it's,
the extension is.js. It's a bit confusing, but actually it's in WebAssembly. It's not in JavaScript.
It's just how the WebAssembly kind of standard work. You have a JS file somehow after you have,
will, you know, then the release, the build, and the source. It become, I thought you guessed.
We have time for one more question. If you have one. Yeah, there.
Thanks for your talk. Um, does PyScript use any web workers? And if so, how do, can you control them?
There's the web. Sorry. Does PyScript use any web workers? Like, does your code run parallel?
It's purely in the browser. So, um, if you host everything locally, actually, is, is,
is just on the browser. So there's no web worker that communicate with other applications.
Yeah.
How does it, does it all came in with different browsers or Firefox,
Chrome? Because I guess it depends on your, your browser supporting that.
Yeah. Now definitely work on Chrome. Uh, Firefox, maybe others. I can't guarantee you.
Yeah. Yeah. Yeah. But it's very young, the project. So later it will be more support.