Will PyScript replace Django?
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Subtitle |
| |
| Title of Series | ||
| Number of Parts | 542 | |
| Author | ||
| License | CC Attribution 2.0 Belgium: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/62034 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
00:00
Slide ruleSoftware frameworkWeb browserLibrary (computing)Revision controlFront and back endsEvent horizonLine (geometry)Random number generationWebsiteOpen sourceGoodness of fitCodeComputer fileSet (mathematics)Cartesian coordinate systemFile formatWritingSheaf (mathematics)Standard deviationFunctional (mathematics)Link (knot theory)Projective planeBitLibrary (computing)InformationObject (grammar)Slide ruleScripting languageBlock (periodic table)Content (media)Web browserInstallation artIntegrated development environmentMultiplicationDemo (music)Web 2.0Interpreter (computing)Software frameworkFunction (mathematics)NumberComputer animation
09:42
Arithmetic meanQuantumContent delivery networkFile formatDefault (computer science)Source codeLocal ringEncryptionModul <Datentyp>Run time (program lifecycle phase)LaptopInterface (computing)Interactive televisionData miningCryptographyVirtual machineMaxima and minimaMenu (computing)NumberVirtual machineFront and back endsDemo (music)Cartesian coordinate systemCodeMultiplicationCloud computingMehrplatzsystemWeb-DesignerBit rateDebuggerData storage deviceIntegrated development environmentRun time (program lifecycle phase)Shift operatorResultantDefault (computer science)WebsiteWeb browserSoftware repositoryLine (geometry)Data miningScripting languageWeb pageLaptopFile formatComputer fileLink (knot theory)Source codeRight angleAuthorizationEndliche ModelltheorieMetadataRule of inferenceSoftware developerRevision controlContent delivery networkLimit (category theory)Software maintenanceSet (mathematics)Multiplication signPhysical lawComputer animation
19:18
Graphical user interfaceEmpfehlungssystemGamma functionMaxima and minimaEmpennageData managementDatabaseWave packetCommon Language InfrastructureMenu (computing)Scripting languageStructural loadRight angleArithmetic meanDebuggerEndliche ModelltheorieComputer animation
20:05
NumberMenu (computing)Scripting languageEndliche ModelltheorieCursor (computers)IntegerRandom numberContext awarenessTemplate (C++)Object (grammar)Meta elementPlot (narrative)Interactive televisionVertex (graph theory)Connectivity (graph theory)RadiusGraph (mathematics)SoftwareFront and back endsGraph (mathematics)Cartesian coordinate systemVirtual machineServer (computing)DebuggerWeb pageEndliche ModelltheorieVisualization (computer graphics)Web browserComputer animation
22:25
Plot (narrative)Interactive televisionExecution unitScripting languageRevision controlWeb browserDataflowTensorMenu (computing)Translation (relic)Selectivity (electronic)Scripting languageProjective planeRevision controlSlide ruleDifferent (Kate Ryan album)MathematicsPlanningWeb browserLibrary (computing)Graph (mathematics)Run time (program lifecycle phase)CodeInteractive televisionSet (mathematics)Computer animation
26:36
Exterior algebraStandard deviationComputer fileDifferent (Kate Ryan album)Library (computing)Multiplication signVirtual machineWeb browserBitWeb 2.0Extension (kinesiology)Cartesian coordinate systemLevel (video gaming)CodeInternetworkingFuzzy logicScripting languageComputer animation
30:05
Program flowchart
Transcript: English(auto-generated)
00:10
Hello, so yeah, I'm talking about PyScript. So I'm trying to get a catchy title, so it's kind of like a clickbait. So with PyScript, we placed Django.
00:20
So maybe a lot of people will be really 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 PyScript. And I would have some crazy demo at the end, which is a very interesting demo,
00:42
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 this is just a link that you could find the slide deck. It is also uploaded to the ForStamp website. You can find it to follow along.
01:02
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 PyScript. But how much do you know about PyScript, except that it's something to do with Python?
01:24
So yeah, silence. So yeah, so I think most people that I met, I've talked about PyScript. And then they said that they have heard about PyScript. They may have read a block or two about PyScript. It's something that's relatively new, so that's why I think it's important
01:40
to kind of put information together so people have something to look at when they want to know more about PyScript. So by the way, I'm Czech. Why am I talking about PyScript? Why sounds like I know a lot about PyScript? Because I work in Anaconda. So PyScript is developed by a team in Anaconda, so I work with them a lot.
02:01
So I have kind of very close to the source, and I also have some information about what's the newest thing about PyScript. 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.
02:21
What is PyScript? PyScript is actually a framework. Some people think that PyScript is a new language, but it's not. It's actually Python, but you can write Python in your HTML file, that's what it is. And also, it's a framework.
02:40
Why? Because later you'll see why. We say PyScript 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 can write Python script as just like you write JavaScript in the HTML file.
03:03
And then the browser would understand what you want it to do and it would do something. But it's not trying to replace JavaScript. You can actually use it with JavaScript. For example, I'm using it with the D3 library, which is crazy.
03:20
Who knows about D3? Yes, okay, good. Okay, I'm not speaking to other people. Yeah, it's good. So I will show some demo later. Basically, you can actually pass the objects back and forth. So you can change your Python object into JavaScript object and then your JavaScript library like D3 will understand it all the other way around.
03:44
So it is something that is quite new. So all these things I talk about that you can change the Python object into JavaScript object, all this stuff, won't be happening if we don't have the PyIodide project, which is,
04:03
by the way, for those of you who haven't heard, it started as a moncilas project called Iodide. They tried to have a lot of things that is run as a WESM, WebAssembly, so the browser can run it. So within all those projects, there's a Python project
04:24
that is actually converting Python into WebAssembly. So that's the Pyodide project. So that's actually allow you to run Python. So without it, actually PySquared won't work.
04:42
Well, PySquared will still work. You can change the backend, but it started with Pyodide. Sorry, I'm trying to be correct in what I'm saying. But the main thing is that you need to compile Python into a WebAssembly. So Pyodide is kind of one of the most popular one
05:03
that is 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 a browser. But there's also other things that we are trying, the team is trying now, for example, they are trying to compile MicroPython,
05:22
which is a lighter version of Python, into WebAssembly. So it more or less work 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 Pyodide project
05:42
that is, why is this the first one that PyScript adopt, and why is the first one that is like, why is it so popular? Because the project itself also provide a lot of Python packages. For example, those that we use a lot, for example, like scientists and data scientists
06:01
use a lot, it's like, for example, NumPy, SciPy, secular, and all those, actually, are quite difficult to run on a 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,
06:20
but something like NumPy, SciPy, secular, and they are not pure Python, then it's a bit tricky, but Pyodide project also provide 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,
06:41
and then all the questions will come at the end. Is it too small? I don't know how it's doing, 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.
07:00
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 line 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
07:20
would look like, the style sheet, and then you have a JavaScript that you kind of pull it in, and then you can run all these like JavaScript function that you have. So this is actually something like a PyScript path to a PyScript JS that's hosted on the pyscript.net. This is actually what allows you to write Python
07:40
on the website, on your HTML file. You may ask, why is it .js? This is just how wasm works, so we have to follow the standard. So yeah, that's .js, but that's not important. We are not writing JavaScript, so don't worry about it. Next is there is a section
08:00
that you can actually write Python code. So here is just some NumPy code that is plotting some NumPy random numbers. So here, 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,
08:22
and then it also have a little bit of settings like output equals to plot and stuff like that. And inside, it's just a Python script. It's just like import NumPy, import matplotlib, and all that stuff, and then it's Python code. It's just like you can copy and paste your Python code there. It's more or less the same thing.
08:41
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 matplotlib because we are using it in the code, in the Python code.
09:02
That's why we have to like put it there to say that we are using those packages, kind of like a pip install. It's like putting it 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
09:20
in the first two line there. So if you don't want to 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 name, we are tacking it as like the year, month, days, year, month probably,
09:41
and then the versions. So yeah, 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 who have questions about it.
10:04
Or you may think that, oh, like, you know, you're a web developer and like 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 it won't work, it may be very dangerous. You can host it yourself. You can download that two things,
10:21
you know, the style sheet and the JavaScript code yourself. And the other things with it as well, 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 it's getting more complicated because, you know, now we're, like the PyScript is getting like more developed
10:40
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 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
11:01
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 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 is running all the PyScript code. So you have to first say what packages you are using.
11:23
So that allowed it to be usable. 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 JSON file or Tomo file, you can also put it in, because, well, you don't want everything
11:42
to be in your HTML file, right? So you can actually put in other source as well. And also, yeah, the pyconfig tag is not just used for putting all your packages and other stuff. There's also other things that you could set in a pyconfig tag.
12:02
So you can also host a wheel of the package. It doesn't need to be using the one that's provided by PyOdie. 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. You can do it by the fetch tag,
12:22
but I'm not showing it here. If you are interested, you can look at the documentation of PyScript. It will show you how to use the fetch tag to actually load in your other Python script. You can do it as well. You can change the runtime setting, like I said before, because PyOdie's the default one when we first started having PyScript.
12:43
Now, I think it's like in development that you can actually change the backend, like which runtime you want to use. If you, for example, just want to do some demonstration with Python or you are using it as a tool to teach kids how to code, you may not want to use PyOdie because it's slow,
13:01
it's heavy, it's, like, powerful, and it's useful for other things. You can use MicroPython, which take no time to load, but it provides them all the basic Python code that you could write in the HTML file. So you can quickly teach someone Python without installing Python and just, like, running it on the HTML file.
13:24
You can also add some metadata. For example, you know, add the author who write the script and the license. You can also do that, no problem. So, another thing that you may put in your HTML file while you are using PyScript is the PyRipple.
13:40
It's something that's just like Jupyter Notebook. If you have Jupyter Notebook, you know, it's, like, very nice repo that you can, like, put in the Python code, shift enter, and then it will execute and give you the result. You can also embed that in your HTML page when you are using PyScript. So, you just need to do the same thing,
14:01
you know, having those two lines of the stylesheet and the PyScript.js, and then you can just put the PyRipple tag and then you will have a Jupyter Lite repo that you could use in your site. So why is it so useful, right? Like, it's a new thing, it's exciting, but can I really use it,
14:21
or is it just a fun thing to do? Why doing it on the front end, right? Now you can have, like, application like Django, like I said, it's a kind of, people love Django, and, like, I, you know, why do we want PyScript? Because sometimes, like, things just need to be run on the front end.
14:41
Sometimes, like, we can't really rely on an application like Django or other Python application to handle all this Python code. For example, if you, you don't want to use up all your resources, right? Like, if you have a backend, and then the backend is actually hosted
15:01
by you or the cloud service that you pay for, if there's a lot of user, and, like, if every single user had a very, like, heavy use of your resources, then the bills can be expensive, and then you may not want that. You want to maybe, you know, give back the law into the users who is using it, right?
15:22
So you could maybe push things to the front end. 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 run it. Like, for example, a lot of the data science stuff, you know, for example, the NumPy, SciPy,
15:43
they would have, before they would have the binder thing that actually load in, you know, another application, that have the backend, and then they could run some code there to do it as an example. But for these services, if they're provided for free, usually they're quite slow or, you know, they have limit
16:01
so if you want to provide a sandbox 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, whoever run whatever on your sandbox, they could do crypto mining and it's not a good thing. So, if it's on the front end, it's using the user's resources, not your resources.
16:23
Which, if they want to mine Bitcoin as fine, it's on their machine, not on your machine, you don't have to pay the bill. Also, sometimes we have applications that, for example, is some research data, some medical data, very sensitive, so you can't really, you know, it's like the rules that the data can't leave the machine
16:43
so you can't send it to a backend somewhere to do it. Then, you know, maybe you can provide the app, you know, provide the code that, 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 built the application and they have to send the data over to your,
17:02
whatever the backend is, and then 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 set up of the backend and the frontend together and stuff. You know, if you just have the frontend, it's much easier, you don't have to worry about it.
17:22
So, with PyScript, we face Django. I know that you already know the answer is no, but actually it's very fun if you use them together. I will show you a few things that I, like, that is done by either me or some of my friends
17:40
that is actually quite cool, things that we have used, like both Django and PyScript. So, for example, this is what I have done with, can I just, can I zoom in here, okay. So, this is something that I've done, it's like using PyScript with Django, that I've, so this is what I,
18:01
I will show you what it is first, and then I will explain. So, here, this is the thing, I think this one, this one I can zoom in, cool. So, this is a recommender system, right. So, I have all this movie that I download from the movie data set on CODO, and then there are a bunch of ratings. So, this recommender, if you put in a movie that you like,
18:21
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 movie, which is quite cool.
18:42
There's also The Dark Knight, which is, I think it's the movie about the Batman, which is also, I like it. So, yeah, that's nice. So, but this thing, right, this thing, usually you think of, oh, it's like a machine learning thing, right. It's a recommender system, you know. Can I run it on the front end?
19:02
Yes, you can, as long as you have, your model already trained, then, for example, in my example here, actually you have a link to see how it's set up. If you click on this link, it will show you how I set it up. So, you can play around with yourself as well.
19:22
So, what I did is just like, of course, I download the data as a given. You have to have the data to make it work, right. And then, after that, you just, you know, run some of the script. You can actually 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 train your model and stuff.
19:42
You can do it with other ways, right. For example, you have a user, a mean user interface, right, they upload a new data and other stuff. Then, 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 trained.
20:00
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. And then, you don't have to host all the data. It could be done somewhere else. But, 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.
20:22
So, it's 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 running Django on the browser. So, yes.
20:40
Well, this is, oh, this is so small. But, yeah, someone has done it. This is not my doing, so I don't like, you know, I don't need responsibility. But, you know, have a look. So, this is actually like, you have, so you have two, basically you have two browser, two browser, like, HTML page. One page is the server.
21:01
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. So, yeah, you can do that. So, I was like, oh, this is a bit fun, but is it useful? But, my friend, here you go, told me that you can actually use it to test things, because you now can run an application on the browser.
21:21
So, everybody have a browser. So, you can run an application on it, which is pretty cool. So, yeah, check that out. Other things that I use PySquared 4 is not with Django. It's with other things. For example, use it together with D3. I have this example here. I already pre-load them, because I, I'm not going to like, fool you.
21:42
It's actually take quite a while to load. So, that's why I pre-load them. But, yeah, because I'm using the whole kind of package, right, here I'm using NetworkX. I have put in a network graph. I have all this network analysis, which is super cool. But, you know, I don't like the NetworkX visualization,
22:00
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. So, yeah, like, you can combine the cool stuff that JavaScript provides, for example, D3, and the cool stuff that Python provides, which is all these, like, data science stuff,
22:20
which is cool. Also, there are other plots as well. Before, you know, you can't have these interactive things. Interactive graph done easily on your website. So, yeah, and also map as well. This is not, again, not my demo,
22:40
but you can now have these map thingy. You can use folium, which is, again, Python library. Now you can use it on the browser. Super cool. Yeah, and also, I have actually start building a PyScript tutorial. Again, this is work in progress, because things keep changing. I can't keep it up, but if you're interested, if you want to try it, that may be a place you want to have a look at.
23:03
So, yeah, all of these slides. Again, this is on the slide, so, yeah. So, download my slides if you need to. So, I think I don't have too much time left. I would like to answer your questions, but there are these common questions that I would also ask and answer myself.
23:21
So, for example, people ask me, can you put in a Python script? Yes, you can. You can use the Fetch now. Look at the documentation if you want to. What Python version you're using, it depends on the runtime, which is, again, PyConfig settings that you can look at it and see which one you want to use. Pyowdiversion, which version you want to use.
23:41
You can choose it yourself. And why we can't do it like JavaScript, having script tag equals to Python? Because this is so new. All the browsers, they don't support it yet, so we have to make a custom tag, which is pyscript. Okay, why don't you just use Pyowdy?
24:02
I think Pyscript is just easier to use. Pyowdy is very nice, but, you know, sometimes get quite complicated for beginners, especially. Also, you can change the runtime with Pyscript, so it's not just Pyowdy. You can, again, you know, there's, my colleague's now working on a compiled version of microPython. It would be much faster and much more lightweight,
24:23
so try that. A bunch more other things, so can you pin a version of the packages that you use? If you want, then you better host the wheel yourself, then you know which version you're using, and it's there, frozen and changed forever. So also, do you know Bryton?
24:42
Maybe some of you have heard about Bryton. So Bryton is a project that tried to translate Python into JavaScript and then run it in a browser. The difference is that Pyscript actually is not using JavaScript, it's actually using Wasm. So Python is compiled to Wasm, so more packages is available.
25:00
So yeah, also you can, again, change the runtime, the backend, which one you want to use. Bware, someone mentioned Bware in my previous talk, so yes, I would love to see more support for Bware, but I can't say for the company, so I'm not saying that. Yeah, so that's the end of my talk. I know I have a few minutes left for Q&A, or if you didn't get the sticker at the beginning,
25:23
come to talk to me, I'll give you a sticker. Thank you. We have a few minutes for questions, and before the questions, I want to thank everyone
25:43
for joining the Python Dev Room, and I want to thank also Eric Gazzoni, my friend who organized all of the planning of the day and everything upstream, and he made a great work for all the selection of the speakers, the planning, everything.
26:01
He couldn't make it here today, but I really want to thank him as well. Thanks everybody, and thanks to Arnaud also for joining me today to help with Dev Room. Questions, yeah?
26:23
Hi, thank you for the wonderful talk. PyScript is very exciting. I know people are using WebAssembly to run untrusted code in the browser. You can use it like a sandbox, so it's very exciting, but my question is, so you were importing packages.
26:42
Is that easy to do? Do the packages have to be on the machine already? Yeah, so if you have internet connection, so the package, if you just simply put in, like in the pyconfig, you put in package equals to something, so those will be actually pulled from whatever Pyoutdise provided,
27:02
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 NumPy, SciPy, those, because they have extension, they're not purely written in Python,
27:21
those, you don't have an option. You have to use the one that Pyoutdise provided, but otherwise, if it's in other library, for example, Fuzzy Wuzzy, it's purely written in Python, you can download the will and it can run locally, yeah. Yeah, my question is about Matplotlib is okay, but how is this base map or carto.py,
27:41
can it be used also? Matplotlib, sorry. Matplotlib is for graphics, but if you have cards, maps, base map, can such a tool also be used in the browser? Yeah, most of the library that, if it's available in Python, it will also be available, so.
28:00
It must be pure Python, or it's, if it's? Oh, Matplotlib, I'm not sure Matplotlib is pure Python. I don't know Matplotlib enough to answer the question. I try. Yeah, but, yeah, so you have to check, like the library that you want to import, is it purely in Python or not, so, yeah.
28:23
I'm a bit confused, because 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, but actually that's a WebAssembly, it's just that the standard, the WebAssembly standard,
28:41
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, you know, done the release,
29:01
the build and the source, it become .js. We have time for one more question, if you have one. Yep, there. Thanks for your talk. Does PyScript use any web workers, and if so, how do, can you control them?
29:21
There's the website. Does PyScript use any web workers? Does your code run parallel? It's purely in the browser, so if you host everything locally, actually it's just on the browser, so there's no web worker that communicate with other applications.
29:42
One tiny question, how does it, does it okay with different browsers, so Firefox, Chrome, because I guess it depends on your browser supporting that. Now, definitely work on Chrome, Firefox maybe, others, I can't guarantee you.
30:01
But it's very young, the project, so later it will be more support.