PyScript is officially here!🚀 Build web apps with Python & HTML

PyScript is officially here! Build web apps with Python & HTML. In this Crash Course we take a look at the new PyScript platform, I show you all important features, and some example websites you can build with it.
Get started here: bit.ly/40de9vS *
Try Anaconda's other offerings and sign up for the Starter Tier level: bit.ly/3ULu8jA *
Demos:
- Code from video: adec3dd4-c366-46d3-9d45-84d3b...
- ML & matplotlib demo: adec3dd4-c366-46d3-9d45-84d3b...
- ChatGPT demo: adec3dd4-c366-46d3-9d45-84d3b...
- 2D game: 8c8116d9-b305-4142-a0de-50165...
Resources:
- pyscript.net/
- docs.pyscript.net/latest/
Get my Free NumPy Handbook:
www.python-engineer.com/numpy...
⭐ Join Our Discord : / discord
📓 ML Notebooks available on Patreon:
/ patrickloeber
If you enjoyed this video, please subscribe to the channel:
▶️ : / @patloeber
~~~~~~~~~~~~~~~ CONNECT ~~~~~~~~~~~~~~~
🖥️ Website: www.python-engineer.com
🐦 Twitter - / patloeber
✉️ Newsletter - www.python-engineer.com/newsl...
📸 Instagram - / patloeber
🦾 Discord: / discord
▶️ Subscribe: / @patloeber
~~~~~~~~~~~~~~ SUPPORT ME ~~~~~~~~~~~~~~
🅿 Patreon - / patrickloeber
#Python
Timeline:
00:00 - Introduction
00:50 - pyscript features
01:46 - pyscript.com platform
04:08 - how to use pyscript & main features
12:42 - example apps
----------------------------------------------------------------------------------------------------------
* This is a sponsored link. By clicking on it you will not have any additional costs, instead you will support me and my project. Thank you so much for the support! 🙏

[@patloeber]

What do you think about Pyscript? You can get started for free here: bit.ly/40de9vS You can also try Anaconda's other offerings and sign up for the Starter Tier level: bit.ly/3ULu8jA ----- Note: These are sponsored links. By clicking on it you will not have any additional costs, instead you will support me and my project. Thank you!🙏

[@katrinabryce]

It seems to be really slow compared to JavaScript, or even Brython. I think for now I will stick with JavaScript for the front end and Python for the back end, much as I hate JavaScript.

[@bujitself]

This was a mistake

[@raise-project]

I tried to avoid Javascript as much as possible. I really waited for this and this will enable some real cool projects while it improves over time.

[@sonicjoy2002]

nobody asked for that. it's hard enough for front end developers to stuck in javascript that doesn't tell you things going wrong until you put it in production, I think we really need to move away from dynamic typed languages or any languages that don't tell you to fxxk off when you use a function like a variable. Data types, data structures and algorithms are the basics of computer science, learn a little before you call yourself a software engineer, we dont need code monkeys any more we have AI that can write code now!

[@jamiecropley]

I use flask and jinja a lot, can using pyscript add any benefit to my web apps like this?

[@bxlbjorn]

I love it how the web development industry keeps on inventing new ways to render the exact same thing; just to keep us busy...

[@user-uo1bm4se5z]

It allows you to have a python runtime in a browser🥶, it is not meant to compute UI

[@jandrorojas6714]

That’s exactly my point. Thank you

[@nakedGamer332]

with python comes datascience libraries in your web dev ... wich is huge

[@flannn6]

well at least it is not javascript

[@thatguynar]

@@flannn6 within the span of time that you have typed that comment 2 new javascript frameworks just got idealized by someone.

[@e995a1ad]

- "WASM is great because it allows near-native performance by skipping the js interpreter" - "Let's use it to run a python interpreter!"

[@MutasimIssa]

yessss finally someone said it

[@SirPlotsalot]

It doesn't make sense from a performance standpoint at first. It's really useful for the litany of libraries for data-science in specific, for example, lots of deep-learning code is written in Python and becomes "instantly-embeddable" in the same manner that JS is for modern web-applications. Doubly exciting since it connects to JS as well! I'm looking forward to what people make with this tech!

[@xxlarrytfvwxx9531]

​@@SirPlotsalot I use python for pygame, on that note I'm going to have to wait for pygbag to release.

[@roccociccone597]

I don't know why python is so hyped to be honest. It's fine but nothing special

[@heroe1486]

​@@roccociccone597 Gazillion of useful and high quality librairies, backed by trillion dollar companies, rules data science, ML, scripting, neat web frameworks etc. It's not a "hype" at all, it doesn't take you to think "it's special" to be used.

[@pengain4]

Finally JS is becoming quite fast but to balance that humanity decided to run python in the browser. 😂

[@kom_senapati]

New py versions will be faster

[@nitsanbh]

The Python interpreter isn’t in JS, it’s (probably Rust/C++ that was compiled to) WebAssembly

[@leosmi1]

I think we can use python as a complemente to javascript

[@NicoFye]

JavaScript sucks, I hope it dies sooner the better. Python is much more elegant /sarcasm, but kinda isn't?

[@DMSBrian24]

speed isn't the main issue with JS

[@CaptainCsaba]

As much as this is unique and welcome, I can't imagine Pyscript becoming big among the other 100 web frameworks that get released each month.

[@anthonyrussano]

you're missing the point

[@Louisianish]

I don’t think it’s meant to compete with popular JavaScript frameworks. I have more experience with JavaScript than I do with Python, but I work in data analysis, and I definitely see how PyScript can benefit data scientists and analysts.

[@marcod6653]

This is exactly what Matlab guys said when Python started to come out 20 years ago ahahah

[@parlor3115]

@@Louisianish You don't want to do your data analysis in the frontend though

[@angelodou]

This is competing with python notebooks, not with web frameworks. You can finally build nicely organized and user friendly python scripts.

[@gardnmi]

This is an incredible project. Just look at the popularity of streamlit. There is a giant demand to quickly standup python applications with a web front end.

[@darsh_shukla]

Yes correct. Streamlit, Gradio, Pywebio are some of the popular frameworks.

[@Eltrissi]

Really excited from the video. Thanks Patrick for the great intro. Looking forward for more tutorials about pyscript🎉

[@giannisnik5295]

Crazy Stuff!!!Unbelievable!!!!Next level Python!!!Thank you so much!!!

[@CodingGlass]

Awesome video! The 2D game was one of my proof-of-concept apps. The game itself is one of the demos that's bundled with the Pyxel engine, with a few modifications like adding a mute button. For what it's worth, experimental support for Pyxel is built into the current release of the Pyodide runtime (0.23), but I'd be a little cautious deploying with that at scale - because of how simulated infinite loops work in Emscripten (i.e. doing while(True) without locking everything up), some dead Python frames are left on the stack, leading to a slow memory leak. It's definitely stable enough to play around with an have a good time - but watch PyScript and Pyodide for stability updates.

[@pietraderdetective8953]

if you are into gamedev, check out Lua game engines. My 8years old daughter started with Python but I have redirected her to other language like Lua...due to Python's speed limitation for something as complex as a game engine. Lua has > 90% similar syntax as Python so the learning curve is rather low.

[@cyberhard]

Great demo! Thanks Patrick.

[@pedroserra4625]

WOW... Im new to this and this video gave me more clues to add to the scrypt and site im trying to build by self educating me... More videos like this please using PyScript and how to incorporate images on background, images on buttons, boxes that show images, calculators... that would be awesome for me to learn and get knowledge faster while listening to the videos and understanding the mechanics of this new world to me... Thank you so much Patrick cheers

[@SreevathsaBV]

Awesome video! thanks. So, we can't currently deploy this in our custom domains? or can we?

[@____2080_____]

This is exciting. May have to use this as well as your next to last video with LangChain

[@HyperFocusMarshmallow]

I’m not sure I’d use this very often. But, suppose you do data analysis or machine learning in python. With this you could just call the models directly. That seems nice. And 100 million other applications. If you have other better tools you can use those, but it’s nice if people can use what they’re familiar with. Then again, it would have been nice if many of us happened to be familiar with the same stuff instead of having 50 choices. Maybe I can scribble together a new language and make everyone adopt that…

[@SteveMcKeon]

@PatrickLoeber Lovely video and cool showcase, I look forward to exploring. *Important note:* I'd recommend reuploading with your ChatGPT API key blurred.

[@BmxAddict08]

i want to cry this is much soo much easier and understandable then sometimes javascript with their frameworks

[@Skaffa]

finally someone covering pyscript!

[@stevehageman6785]

Excellent, thanks for explaining this so well.

[@JustFuguFish]

Such a great video ❤

[@bigjamar]

Excelente, muchas gracias

[@obecellcivilbuet2215]

Thanks for your wonderful video sir. Please create a video on how to connect Pyscript with Database and make input output web apps

[@JohnMitchellCalif]

super useful! Subscribed.

[@caiopjv]

Very nice! Thank you!

[@lancemarchetti8673]

This is awesome!

[@norndev]

A few concerns: Loading time, downloading dependencies every time instead of caching them. Security: For example you showed it using open ai, surely anybody could view the source of the page and steal your api key. I'm not sure I see the point just yet, though capable it's still using js and there's no way around that I guess.

[@tidy5156]

loadingtime: browser cache security: wtf? no! can you steal api keys right now in js browsers? oc he hardcoded for simplicity, but no one ever hardcodes api keys in production code

[@xdarrenx]

@@tidy5156 If the code to call the api is in the frontend, then the key variables is there, and thus the key is also in the source code. The only other scenario, is getting a key through a request after user auth. The way applications can secure a frontend API key somewhat (Which google's api does) is to whitelist your domain as the only one that can be called from with a particular apikey

[@GoldenretriverYT]

@@tidy5156 loadingtime: Most user don't care if their 2nd time is fast but if their 1st time is fast. If your page loads for like 60s on a slow 3G connection, good luck getting any users at all.

[@heroe1486]

​​@@GoldenretriverYT Of course the subsequent times matter and people care about it, otherwise nobody would use a CDN, would do server side caching and would make sure to prevent browser caching.

[@GoldenretriverYT]

@@heroe1486 Of course people care, but the most important one is the first visit. This is proven by many studies and even small increases in load time can reduce the rate of users that stay on your site dramatically (cant link those studies because of youtubes filters). Also, your CDN wont make your python runtime suddenly load in 3s instead of 60s. Slow connections are still widespread issue and CDNs cant make the throughput rate increase from 400kb/s to 100mb/s

[@waytospergtherebro]

If it doesn't have 12 billion dependencies that all break with every single update then it's never going to be able to compete with TypeScript.

[@johnadriandodge]

Shalom evening howdy how. GOSH, thank you so much for sharing.

[@Godrose]

Looks interesting. What's its usefulness given the plethora of already existing frameworks that do this better faster easier?

[@Godrose]

@@anthonyrussano What problem does it solve then?

[@encapsulatio]

@@Godrose you get a whole data science ecosystem to run in your browser...something Javascript can't...that's the point, this is not some web framework, that is not the point of Pyscript.

[@Godrose]

@@encapsulatio I was referring to the clickbait title.

[@DilwarHossainNoorChandan]

Oh what a great work! I have two questions. Can we access the gpu by this? And can we use it in reactjs?

[@biscotty6669]

The GPU question is in my mind too. I don't see any reason this wouldn't work in any app since you just need to add the library link to any page head. For me that's Svelte.

[@user-ie5hx5mu6c]

It's an amazing tutorial, so thank you for that Sir. Can I host my html with Py-Script at a none Python web hosting company?

[@helidrones]

What about breaking changes? Browser based Python seems pointless until its guaranteed that the code will run properly on future versions.

[@whiskeyfur]

About the only real use I see for this right now is to take RenPY games and host them on the web. Most all the things you would want to use python for, aren't really intended for use on the front end but instead in standalone applications and on servers for heavy data processing.

[@1234minecraft5678]

This is 🔥

[@maximk7816]

how to take values from inputs / forms?

[@wahyujus]

woah really helpfull mr patrick im student from indonesia

[@JaredDeBlander]

Is the python code / OpenAI API key visible to a user? Wouldn't think leak your credentials?

[@magedsaeed1710]

Thank @Patrick for this video. I am not sure if this project, at this current stage, is production read?

[@patloeber]

According to the docs it's still in alpha and under heavy development, so it will take some more time. But for fun demo apps it's already pretty cool

[@DekritGampamole]

I think until we see frameworks build on top of it we won't see it in production level.

[@aditimahabole1761]

this is so damnnn awesomeeee

[@vonchilliman]

One thing I don't understand ids why PyScript is enclosed bewteen tags instead of

[@triangle7105]

Maybe technical not allow to do that 🧐

[@NicoFye]

Should one consider using this instead of Flask?

[@flor.7797]

How was is it? Because everytime I finish coding something in python I want to rebuild it in nextjs immediately 😅

[@avivlevy1546]

Did you intend to publish your OpenAI API key?

[@sheikhakbar2067]

Thanks Patrick... Does pyscript support events listening and handling?

[@guruware8612]

nope, but it has robust whitespace support, and is "self"-aware

[@KatoSpiegel_neuron]

Great! Thank you a lot. If I publish the page with my openAI token, will this one be public?

[@tamles937]

I guess so, you can maybe great a page with a fake token and see if it's exposed. But since pyscript is a frontend framework, it seems logical that the API key will be visible. A workaround would be to ask the user to enter their key in a textbox and then use it on their behalf. Since it's frontend, their API key will never reach your own server, so it's kind of safe

[@s.i.m.c.a]

ofc, it would be safe - if all the logic would be on BE (server). FE client implements only user logic, business login shouldn't be implemented in browser

[@quachkhoaduy7565]

Tks so much

[@walangpart2]

Can you work with this offline? I want to integrate pyscript on my offline wifi projects in rasbery pi

[@alfathmuqoddas6986]

Im expecting a compiled language instead python to run in wasm as an alternative to js, because it will be must faster than, pyscript is a nice idea as an alternative but they're still running on python interpreter, just like js with js engine, i hope there will more and more language as an alternative to js for web development

[@halcyonramirez6469]

Kotlin will definitely be that language hopefully. It's compiled and has a lot of cool syntactical sugar and is easy to read and use

[@davidk7212]

So basically they're using WebAssembly to run a Python interpreter... Isn't that kinda like putting a diesel generator inside the trunk of Tesla to generate its electricity, and then saying "Now you can run Tesla's without electricity! What a breakthrough!"

[@latlov]

Will it be possible to include python in Laravel blade?

[@martinmuriithi9087]

Great! I made similar for php.

[@RegisdoPython]

Very awesome.

[@8koi245]

Ohhh another shiny tool! gotta learn

[@igiveupfine]

so we have to be online to use this, right? i can't go out in a field with 0 internet and be using this to control some embedded raspberry pi device with no internet access, right? darn.

[@nitsanbh]

Do the ML packages leverage the GPU?

[@serychristianrenaud]

thanks

[@mehediazad1780]

please make a playlist on pyscript machine learning apps

[@RamKumar-zn6vj]

Awesome project. But the big question is, what python running on a browser environment can bring new to the table that the Javascript cannot.

[@s.i.m.c.a]

I would like if javascript would disappear

[@biscotty6669]

The data science ecosystem which Python provides and JS doesn't . Personally I see myself using it in Svelte apps.

[@moodmaker2796]

I'm the kind of person who started with python. If I see { } for anything other than a json, a dict, an f-string or templating language all I want to do is puke. JS is the king of web dev, yes. But If I have the option to build a web app with html, css, django and pure python... I will choose python any day of the week.

[@guruware8612]

@@moodmaker2796 good luck with that when a single whitespace breaks your code you don't like curly brackets, but you like "self" everywhere in your code ?

[@moodmaker2796]

@@guruware8612 I love self. It's pink and cute and it's always where it's supposed to be. Curly brackets are messy, they get lost and you never quite see which one belongs where! I HATE THEM! :D

[@Sinned1208]

Great tutorials! However I'm not sure if its a good idea to publicly share your ChatGPT API Key!!

[@kingstalker]

yep probably a bad idea but its free and even if it wasn't he probably changed it already

[@mjs28s]

The problem that I have with pyscript is that from the beginning, the majority of the code that I try doesn't work even when I copy, verbatim, from youtube videos. Even before pyscript website was updated to having you login to see anything, I had literally copy and pasted right from their own sample code and.....didn't work most the time. I keep wanting to love it but it has barely worked for me and when it did work or didn't work I had no idea why, especially when I was using their sample code. Was there a typo I couldn't find? Was there some update to their JS scripts that we link to that impacted the code in their samples? I only hope that they can get it working! I just tried it again now with some pretty simple code and it didn't work.

[@sheriffasasi354]

Maybe u're using the wrong version. I don't use pyScript though

[@guruware8612]

@@sheriffasasi354 if its already a problem of version in the very beginning, then dump it, but fast what "real" programing language is version dependent ? new features ok, but old stuff needs to work as it was, or are you willing to rewrite your whole codebase every month ?

[@saitaro]

Thanks, Patrick! But how do you deploy this thing? Or is it possible?

[@katrinabryce]

In theory, any web server than can serve html files would work. My go to choice would be nginx, but other options are available.

[@phoenicianathletix2866]

Can the banner ads/managers that are normally written in JavaScript be replaced with Pyscript? can this be a faster/efficient alternative to php?

[@RedStone576]

probably, and no

[@VaibhavShewale]

damn this looks interesting

[@ihateidiots9484]

Why ? Why not ?

[@guruware8612]

because of "standards", standards can be ignored if because someone thinks he had a good idea, rfc's are always followed to the point, that's why ftp works, its not a standard

[@fafaratze]

can we make mobile app with this?

[@jonimatix]

How is pyscript essentially different to say, streamlit?

[@pacersgo]

I am curious how new frameworks based on pyscript look like

[@leptopython]

it costs notable time do download and load pyodide, which the bigger drawback now

[@vectoralphaAI]

So if I use this for the front end and Django for the backend. Does that mean I still have to use Javascript? Or can I just use ONLY python for future web apps?

[@praveshmaharaj4387]

you dont have to use this, no need. Javascript is as easy as python anyway id rate it on the same level of difficulty, JS has maybe a little bit more syntax but thats it both are EZ.

[@gabopython]

amazing, what about pygame

[@phat80]

I can’t get it. Why do I need Python in the frontend? Which problems it may solve?

[@IronMechanic7110]

Amazing'

[@guaplei1]

is there a way to install module?

[@Hvantmiki]

Is the python code running client side?

[@Dummy226]

is this gonna replace js?

[@shakilahmed6870]

I have a question. Do we even need it? If yes, then why?

[@tokeivo]

How does this compare to Brython?

[@radeksedlar5508]

Yes!!! lets finally grap JS and put it in the garbage bin. And then reach to another garbage bin and use python.

[@cristioancea3708]

Finally python in HTML, the end is near for javascript.

[@thecoolnewsguy]

Lmao this project among other projects have been around a long time ago and still JS is so popular especially that we've got TS now

[@cookiteatit1197]

This is huge

[@mycelia_ow]

How does this compare to using FastAPI or Django/Flask?

[@katrinabryce]

Those are back-end. This is front-end. So you would likely use both in your project.

[@marcus_programmer]

Cool feature I've noticed, the onclick event with py-click its super cool, way more easier than Javascript

[@curiousape001]

Is it safe to show your OpenAI API key here?

[@jefftong642]

Was looking for away to PM, but cats out the bag.

[@virkony]

Not a user of OpenAI API. But they should have menas to re-generate token invalidating old ones.

[@scott_itall8638]

What about Streamlit?

[@parihar-shashwat]

looks kind of like good old java days 😅

[@guruware8612]

people complain about the story of babylon, the story to explain the existence of many languages but now we invent a new language every day, or combinations of them - the future looks much brighter now don't we have already enough 'frameworks', why now add python to the mix there was a time, i was writing webpages with notepad, they worked and did their job --> providing information now we get scroll effects, fancy animated buttons, adverts, annoying cookie-popups - where is the info hidden i was searching for ? now we need responsive design, because people stare into their smartphones 16 hours a day but python is here, jay ! that's what i think about PyScript, you asked...

[@sammyay-man2754]

I don't understand. it didn't work for at all its like html didn't recognize it ....help me.

[@bulaloitech]

Alot of people already built frameworks like this in Python and other languanges. At this point they should just make a framework that can transpile their code into javascript. So they can use the JavaScript libraries, etc. But this would be alot slower and tedious. Like everytime you save your Python file it will automatically update the JavaScript file.

[@nitsanbh]

9:35 hurts my eyes to see a non-async get request in the browser

[@jacobdebrone]

soon python will take over every tech space

[@sebastiandevelops]

Jquery for python?

[@TheShaichanel]

So it's like GWT, only with Python instead of Java?

[@s.i.m.c.a]

not even close

[@rinzu22]

First thing to come to mind: Easier deployment of pre-trained machine learning models

[@AhmedAl-Kurdi]

why it is slow to load ?

[@londelidess]

Soooooo cooooool

[@lucascheney7055]

This just looks like a new vector for adversary attack on applications...

[@softtrouble8217]

I cant stop myself from asking this question: What problem does it solve?

[@jbgheel5028]

Why do their cookies even have an option for “sale of information” in todays day?

[@vincentpelletier1246]

Played with it for 2 days and even though I was hyped, I got bored really fast by the lack of clarity. The fact you only have to know 2 languages (Python and HTML) sure is "nice", but you kind of lose that edge as you try to figure out how its all glued together since the tutorials are limited as of now. If you follow the small examples, its OK, but as soon as you have a project that requires a tiny bit of structure, you go mad trying to get it all to fit. Its also missing something really important that will surely annoy anyone coding with an IDE: the shortcuts to find your functions (ctrl + click) and the autocomplete. If you've done python in PyCharm or visual studio, you're likely to curse as you try to separate your html from your python functions. But hey, maybe it'll get better. However for now, I'll stick to learning React as it makes much better looking apps and the learning curve is really just as steep as it is for PyScript.

[@gobyg-major2057]

7:02 Actually it’s showing the date not time…..

[@sanjaybhatikar]

Another Python solution in search of a problem :))