Pyscript arrived just in time when I gave up on learning JS ... Seriously I can't think of anything I can do with JS except run my python code in the browser... I can't wait for Pyscript to become fully functional! What I really want to build with pyscript; is a simple Quiz app ..... It's a fill-in-the-blank quiz .. it should be case insensitive; Normal python would do that in a couple of lines; assuming .. the questions and answers are stored in a simple pandas dataframe!
It should be pretty possible with pyscript. I do think it has some maturing before it’s ready for prime time. But this little app does show what might be possible soon.
One big advantage of Webassembly is that it runs in its own process separate from browser's page. I can see this as a performant way to listen to DOM changes on other people's websites (thru Mutationobserver), and with python - as a convenient way to do complex logic on it or integrate some unique python libraries to enhance functionality of web pages.
Hi mike, great video. Thanks very much. Can we make it work in react for example ? My concern is the DOM interactions. If i want to add a callback to an element. Pyscript requires grabbing it from the DOM with query selector and id which is something that is a big no no in react
7:04 my question is: if my logic doesn't require fetching any data from the server, can i make it so that all the logic processing happens only client side but written in python? 14:23 it seems yes, ... i.e. it seems that here the server side is only used to fetch those data... the processing is still happening client side. which is what i am looking for :)
Yes, you can get the data only on the client. IIRC the Python backend is just to have something to call as an example API and keep the API key save there.
I’ve been trying to figure out how to install modules and add them to my website projects that can be used and referenced by pyscript but I haven’t found a solution. Is there anyway I could reference these custom modules for my web application? Any help would be much appreciated!
I’m still an amateur at programming and IT, but what about storing the modules on a server and requesting them as needed from the program? I’m assuming the request module would function just fine considering it comes with the python installation.
Hey Jim. Because I really wanted to show how to use pyscript with a JSON API. My experience using public free APIs is that they are fine for awhile then either go offline, change their schema in a breaking way, etc. Using Flask (or any dynamic server app) let's me ship something to people as part of the project to demo how to client/server comms without worrying about it only working for 6 months. But if you had another API already running somewhere, it's definitely not needed, right? :)
@@mikeckennedy Using Flask here is missing the point altogether. If you control the server runtime, you don't need pyscript. Pyscript is for when you want to use static hosting.
@@vcool What? It doesn't miss the point *at all*. Here is the point. I want to create a client-side pyscript app. I want that app to consume an API. I want that API to be stable. Hence, I shipped the app with a stable API in the form of the Flask app. In a "real" version, it would point at openweathermap.org or something like that. But this requires people playing with the app to register, create an account, enter API keys, etc. etc. That's useless, so why don't I make that simple. In a real app, you would use a real API like this. But in a demo app on a UA-cam video that cannot be edited or changed even if the API changes, you might choose something simpler.
What was the icon you clicked in the finder to create a virtual environment in mac os? ... There should be a way to use py-script for server-side rendering, just like the svelte kit, which takes a ton of load from the browser and instantly deliver the content.
Hey. I clicked my Go2Shell button (an add on) in Finder. But then just ran a virtual environment command like any other after it opened. As for running server-side, interesting yes. But AFAIK not something they are working on.
Hey Michael, nice tutorial, do you know if there is a way of getting frames from the webcam using pyscript? Using opencv and calling cv2.VideoCapture(0) as I usually do in Python doesn't seem to work. I am surprised I haven't been able to find any documentation on how to do it.
Thanks! It's likely possible. There is deep integration with JavaScript and PyScript. And JavaScript can do webcam stuff. So I'd see how to do it in JavaScript and then tie it in there.
Does pyscript require python3.10 . I've been trying to point to a third party app installed locally on my machine using the 'paths' directive in the html code but pyscript seems to ignore it. Do you know how this should work?
QUESTION First of all, thank you for your awesome tutorial! I have a question how to make at least some functions work offline. Otherwise I don't get why to download compiled Web Assebly and python wheels if I can't use them without connection to the server
Thanks! In a more full-featured app, you would sync the remote data to local storage then process that data and show it with pyscript if you're offline and use the api when you are online. But that wasn't the point of this video so I didn't make it that complex.
Thank you, I was looking for this video since pyscript was released
You're most welcome! :)
7:52 "Add a flask run server" configuration
30:59 _" things like vue.js & reach front ends wrapping up some python code "_
haha
What a deadly combo
Great video Michael, thanks for sharing it!
Thank you Daniel. :)
11:40 haha, we got footer inside the body lol 😉
Pyscript arrived just in time when I gave up on learning JS ... Seriously I can't think of anything I can do with JS except run my python code in the browser... I can't wait for Pyscript to become fully functional!
What I really want to build with pyscript; is a simple Quiz app ..... It's a fill-in-the-blank quiz .. it should be case insensitive; Normal python would do that in a couple of lines; assuming .. the questions and answers are stored in a simple pandas dataframe!
It should be pretty possible with pyscript. I do think it has some maturing before it’s ready for prime time. But this little app does show what might be possible soon.
One big advantage of Webassembly is that it runs in its own process separate from browser's page. I can see this as a performant way to listen to DOM changes on other people's websites (thru Mutationobserver), and with python - as a convenient way to do complex logic on it or integrate some unique python libraries to enhance functionality of web pages.
I don't think one tab's webassembly has access to another does it? Do you have a link with details on that?
You can't access other sites unless they're on the same domain and were created within the existing tab (like with window.open)
Hi mike, great video. Thanks very much. Can we make it work in react for example ?
My concern is the DOM interactions. If i want to add a callback to an element. Pyscript requires grabbing it from the DOM with query selector and id which is something that is a big no no in react
Nice explanation! Thanks Michael.
Glad it was helpful!
7:04 my question is: if my logic doesn't require fetching any data from the server, can i make it so that all the logic processing happens only client side but written in python?
14:23 it seems yes, ... i.e. it seems that here the server side is only used to fetch those data... the processing is still happening client side. which is what i am looking for :)
Yes, you can get the data only on the client. IIRC the Python backend is just to have something to call as an example API and keep the API key save there.
22:09 this vid is over 27 months old, is there any update video to this?
I’ve been trying to figure out how to install modules and add them to my website projects that can be used and referenced by pyscript but I haven’t found a solution. Is there anyway I could reference these custom modules for my web application? Any help would be much appreciated!
I’m still an amateur at programming and IT, but what about storing the modules on a server and requesting them as needed from the program? I’m assuming the request module would function just fine considering it comes with the python installation.
Very nice! Totally unrelated question sorry, could you share how you got that button in Finder to open the terminal?
Thanks Maxime! That is a glorious bit of software. Get it at zipzapmac.com/Go2Shell
I don't understand. it didn't work for at all its like html didn't recognize it ....help me.
Great work! One question: why not do this without Flask?
Hey Jim. Because I really wanted to show how to use pyscript with a JSON API. My experience using public free APIs is that they are fine for awhile then either go offline, change their schema in a breaking way, etc. Using Flask (or any dynamic server app) let's me ship something to people as part of the project to demo how to client/server comms without worrying about it only working for 6 months. But if you had another API already running somewhere, it's definitely not needed, right? :)
@@mikeckennedy Using Flask here is missing the point altogether. If you control the server runtime, you don't need pyscript. Pyscript is for when you want to use static hosting.
@@vcool What? It doesn't miss the point *at all*. Here is the point. I want to create a client-side pyscript app. I want that app to consume an API. I want that API to be stable. Hence, I shipped the app with a stable API in the form of the Flask app.
In a "real" version, it would point at openweathermap.org or something like that. But this requires people playing with the app to register, create an account, enter API keys, etc. etc. That's useless, so why don't I make that simple. In a real app, you would use a real API like this. But in a demo app on a UA-cam video that cannot be edited or changed even if the API changes, you might choose something simpler.
What was the icon you clicked in the finder to create a virtual environment in mac os? ... There should be a way to use py-script for server-side rendering, just like the svelte kit, which takes a ton of load from the browser and instantly deliver the content.
Hey. I clicked my Go2Shell button (an add on) in Finder. But then just ran a virtual environment command like any other after it opened. As for running server-side, interesting yes. But AFAIK not something they are working on.
Thanks for the tutorial. is this possible with nicegui?
Hey Michael, nice tutorial, do you know if there is a way of getting frames from the webcam using pyscript? Using opencv and calling cv2.VideoCapture(0) as I usually do in Python doesn't seem to work. I am surprised I haven't been able to find any documentation on how to do it.
Thanks! It's likely possible. There is deep integration with JavaScript and PyScript. And JavaScript can do webcam stuff. So I'd see how to do it in JavaScript and then tie it in there.
Hi! I was making a personal project using openCV (and mediapipe) and had the same question. Did you ever figure out what to do? Thanks!
Does pyscript require python3.10 . I've been trying to point to a third party app installed locally on my machine using the 'paths' directive in the html code but pyscript seems to ignore it. Do you know how this should work?
No, it runs out of the browser. To use a library, you have to link to the 2heel on the internet or your static files folder.
Hi Michael,
How I can convert python file into .wasm binary?
Is there any advantage to just using JavaScript? In which situation one should prefer python?
JS is way faster since python is an interpreted language. BUT IMO, python is way easier to learn and its more intuitive
when you need python modules. I think it is data science / math domain
Is Blazor WASM more performant than this ?
How we can use opencv in pyscript?
QUESTION
First of all, thank you for your awesome tutorial! I have a question how to make at least some functions work offline. Otherwise I don't get why to download compiled Web Assebly and python wheels if I can't use them without connection to the server
Thanks! In a more full-featured app, you would sync the remote data to local storage then process that data and show it with pyscript if you're offline and use the api when you are online. But that wasn't the point of this video so I didn't make it that complex.
Hey can pyscript use the DOM. Also can develop a website with pyscript
Yep! There is even a chapter in the video exactly about that:
14:58 DOM manipulation and driving the UI with client-side Python
Please do it again.... I need a clearer view
Is this full stack in a way?
Ha, it is in a sense.
Can pyscript work with other browser apis?
Yeah, I think it has full interop between JavaScript, so it should be able to be used at least in that style.
@@mikeckennedy Typescript already won me, but i don't see harm in trying this out for fun, thanks