Python In The Browser! PyScript First Look

In this video, we will look at the brand new PyScript framework, which uses Web Assembly and Pyodide to write Python and use Python Packages right in our HTML. And no, it will NOT replace JavaScript.
🐍 PyScript Website & Examples:
pyscript.net
github.com/pyscript/pyscript/...
📘Check out my 300 page Web Dev Guide:
traversy.gumroad.com/l/web-de...
💻 All Courses
traversymedia.com
💖 Show Support
Patreon: / traversymedia
PayPal: paypal.me/traversymedia
👇 Follow Me On Social Media:
Twitter: / traversymedia
Instagram: / traversymedia
Linkedin: / bradtraversy
Timestamps:
0:00 - Intro
1:45 - How it works
4:18 - Getting Started
5:17 - Disable formatOnSave
6:06 - Writing Python in HTML
6:37 - Mixing JavaScript
7:02 - Targeting DOM elements
8:15 - REPL
8:54 - Math module
9:18 - Env & 3rd party packages
11:10 - Using a separate .py file
13:16 - Handling events
14:45 - Shuffle array
16:04 - Using Element()
18:00 - Using multiple files
20:22 - Wrap up

[@TraversyMedia]

Remember, this is in Alpha, so it is very very new. It also will never replace JS. In my humble opinion, It will simply bring some great Python packages and tasks to the browser environment. Which I think is pretty damn cool. Anyone saying it will replace JS is fear-mongering or trying to get clicks.

[@universecode1101]

Totally agree with you Brad, I wrote something like that in the comment. However JavaScript !== Python ✌🏻

[@Joshuahendrix]

Thanks for everything Brad! My life has been impacted for the better because of you!

[@Israeljoelic]

Hey Brad, my fear is actually is thinking of how much I should know to be a complete web developer

[@Israeljoelic]

Am glad to be one of the few ugandan students of brad traversy.... You have impacted my whole Mr Brad

[@NewoneFPV]

Hope this comment will age well

[@ighsight]

console.log from inside a Py script took my breath away. Obviously the the ability to use Py packages in the browser is great but the bi-directional link between Py and JS to me is the most fascinating thing about this innovation.

[@codingwithlu]

Yeah, this is very cool.

[@Hubert4515]

same

[@nalinipathak1035]

The new intro is so modern and fire!!!

[@harmitchhabra989]

It's fine, but the old one carries so much with it that topping it seems impossible

[@hakanaki]

@@harmitchhabra989 I miss the old one 😔.

[@universecode1101]

Finally a video that clarifies pyscript. I think it's just the beginning but it could be bigger later on. But sure it doesn't replace JAVASCRIPT, let's not exaggerate. They are always two different things and I say this from Js-React dev, which is learning Python. They are both extraordinary

[@FlanPoirot]

we'll see compiled languages more and more being adopted for frontend development. but python just isn't one of those. python requires loading a runtime + all your code, which is pretty bad. don't get me wrong there are some applications where having an embedded python runtime might be useful. but for general programming we'll see more and more people using other languages, some open source projects are already taking advantage of this: - Penpot uses Clojure; - Appflowy uses Rust; just to name a few. I'm honestly excited for javascript losing ground on the web space (more creativity and newer more correct and more secure languages on the web will be a huge plus, fragmentation will be a problem but it's something I'm willing to accept and it never bothered me since there has always been a lot of computer languages)

[@liamconverse8950]

But if it compiles to webassembly it should actually be faster than JS no? (Although probably a larger download size) and if it has a fully featured DOM manipulation API then the only thing stopping it from replacing JS would be user adoption I would think. But then again, there are a bunch of JS frameworks that are faster than react and arguably better but that hasn't done too too much to slow down React's popularity.

[@dhkatz_]

@@liamconverse8950 No the only thing stopping it is the fact that every browser has a JS engine built in and it is extremely optimized at what it does for the browser

[@liamconverse8950]

@@dhkatz_ Its optimized as well as is reasonable but same browser is built to run web assembly much faster

[@m.lamintamba7821]

Can't wait to see a full course from you, when Pyscript is ready. Thanks very much

[@kleczekr]

That's wicked, thanks for the small review video, I've got so many tools programmed in Python on so many machines, I already see some potential for moving a few of them online and accessing them via some neat user interface. I had no idea something like that existed, plus it looks super intuitive. So thanks for that :)

[@niluparupasinghe8581]

Just waited for your explanation as usual. It helped to learned a lot from this single video than prevous 2-3 days. Thanks man.

[@theshowman8478]

Brad, this is great ! I'm going to have some fun with this. Great video. You are the best !

[@opopopop6286]

Funny, been learning JS for the past month or so. Just today decided to switch over for a bit to Python for various reasons...then I come across this video. How perfect a timing!

[@akshaypendyala]

I can already see myself invested in this and creating something as I love python. Thanks for the video!

[@codingwithlu]

I work on web app using Python, Django and Flask, I'm loving this a lot. I will must definitely be playing around with this

[@akshaypendyala]

@@codingwithlu yes, I believe compared to Django we are going to get much more flexibility and we can implement complex things with this.

[@petecapecod]

Wow that was incredible! 🤯 The ability to use Python packages in the browser!!! That's huge 💯 Thanks for putting this video together Brad 👍🏻

[@codingwithlu]

Couldn't agree more

[@AzeezGafar]

Thank you as always Brad! 👏🏽👏🏽👏🏽

[@rayankhan12]

Great and concise as always!

[@OneCSeven]

Thats cool I bet you can make python and JS interoperate using the dom as a messaging service

[@firelordkushroll]

very nice. as a web dev and a slytherin, i really love the idea of adding Python to my applications.

[@MrSchattka]

This is great, thanks for posting this video!

[@AndreaManna85]

Finally good video about Pyscript! Thanks 👏👏👏👏

[@TheCodeDealer]

Cant wait to try this out

[@maxfrischdev]

Very interesting video Brad! 👍🏻🤙🏻

[@bootstrapsimplified4698]

I m realy excited to use python on the front end I was struggling with Js for months ,and finally python for the rescue .Thank you for sharing knowledge with the community.You earned +1 subscriber❤❤

[@Gelo2000origami]

Keep practicing, I'm sure you'll get the hang of JS eventually

[@KrzysztofDanielCiba]

This is crazy! Wow! Already love it.

[@aaronhawkins3722]

Thanks for this Brad...How exciting! Plenty to explore. Any suggestions for a proper extension to get rid of all my underlined errors. Everything works great, but I just have these errors due to linting. Thanks again Brad!

[@sqlyoutuber8230]

Thank you so much for making this video. You saved me from getting a low c on my final project.

[@tochukwuokafor1251]

Thanks you sir for good work. It will be a privilege to meet you one on one

[@RickBeacham]

Gota love Web Assembly - Thanks Brad!

[@seanmackenziedataengineering]

Great intro! This is a big step forward imho

[@JM-st1le]

A real "Finally, it's here" video

[@sg8nj]

Great demo❤

[@sabuein]

Thank you, very interesting.

[@wilsonwang8641]

20:35 really hit the frontend developers's thought!

[@xenro77]

This vid is good and very educational for me! thanks.

[@danilotorres2425]

I see this as a huge oportunity to run ai in the browser, like tensor flow, keras. Really looking forward to check this one out

[@pieterdebaere5931]

This is so cool! Wonder if it could also display data visualisations created in Python within the browser, imagine being able to display seaborn graph without having to learn an entirely new data vis. framework like d3.js to display data in front-ends.

[@noiseoid]

very good introduction

[@teodortodorov6729]

This seems great! I have a question, about the practicality of it. Considering that the heavy computational operations that python would be doing, isn't that going to make any large scale website even more ram hungry? React + AI powered by Python sounds amazing, but the end user might disagree. I am just a junior, sorry if I'm missing something obvious.

[@codingwithlu]

I would assume for large dataset that it will utilize a good amount of memory, just like it would if you were running the script locally. As more ppl start testing this we will see what type of limitations there are. But I still think this is a great start for using Python on the front-end

[@eotikurac]

reinventing the wheel in this industry never ends -.-

[@okiroroobrutheanagho8779]

Thanks Brad.

[@briankipkemoikoech8364]

I think you can still use to parse/manipulate the dom tree, using Beatufulsoup

[@seanpe8474]

whats insane to think about is that you could do datascience stuff, and then have javascript frontend to output it. a big problem is trying to find a way to output cool datasci stuff in python to a format where javascript can take over. a lot of websites are gonna come out with some great datascience visualizations soon.

[@clickadelic7681]

Man, you are just insanely fast with new tech, whatever it is. How?

[@CoolPupGaming]

I been waiting for something like py script for years. I love working with numpy and pandas and im very excited to make projects where I easily put that into the browser. Thanks for the awesome video :)

[@RandoTheFandango]

I could see a use for this in basic authentication for new backend developers

[@tristan2338]

I started coding 6 years back had a job for 5 years they getting ready to fire me soon. I written a ton of different things for them and now I understand the true power of these programs after using them in real work examples. Anyways thanks and cheers to the futuree

[@ibrahimshakir1392]

well that would create much of a "new programming language" to me, since like the mix can be soo interesting and all, i would have a copy of the source and modify some things for a new file type (like pjs or pys for example) that would be really cool!! ALSO never forget typescript!!! :O, imagine if we also get a chance for that!!

[@cerealport2726]

seems like a nice shortcut to make a basic user interface in HTML/CSS/JS, and power some underlying processes with Python. certainly seems possible to be less annoying than fighting with Tkinter, Flask, or Django, though I haven't tried using PyScript like this, so I am just speculating.

[@Vrx-yp1eu]

The most beautiful Frankenstein monster I've ever seen! this is awesome though ngl

[@RandhirRawatlal]

This is incredible..! Can you train a model, pickle it and distribute the pickle through the web this way? This facilitates true distributed computing..!

[@thiagosannafreiresilva4366]

I wonder if you could then package it using electron, as an alternative to tkinter and all that faff for simple GUI apps.

[@rocketmailmillonelytworoad]

This is exciting!

[@tonybrutal]

I am doing a project for college right now and I need to apply my dice game that I made with python to a web browser. So far it doesn't work, probably because its a game thats played using the terminal. I was wondering if I could get some pointers about how I could go about it? my game asks for user input which is the main issue im having trying to figure out with pyscript.

[@bboychris168]

Question. Is pyscript able to import any module if as long as i put it in a seperate .py file? For e.g Importing Requests module or importing sockets etc. Keep in mind i am also new to coding and i really like how Pyscript works.

[@jenglinux4948]

I'm no expert in python but can I used Pip packages ? or how will I know the available packages that I can use, example beautifulsoup ?

[@MrKieranthompson]

Now this should be interesting

[@MarkKClotfelter]

What editor are you using?

[@pratikchakravorty983]

Long way from this being actually useful but still a great step

[@NewLondonMarshall]

Ooh I like the new intro! :)

[@ibrahimkhalil6861]

Hello Mr.brad I have a question how i can use the pyscript tag locally?

[@Wallee580]

Me: Starts learning HTML, CSS, and JavaScript so I can make websites Traversy: Hold my PyScript

[@jennitogo]

As a Python developer... this is wild!

[@ccall48]

just working directly with browser, it doesn't like file import - cors error on brave. but never the less thanks lmk how to get around this if you know.

[@champikadilshan3676]

please explanin this..What langauge we learn from today,what is the best javascript or pyscript

[@chenjus]

Very cool!

[@simply-dash]

What VSC theme are you using?

[@909shayan]

Waiting for PyScript frameworks😃

[@codewarriors5716]

Just some more crazy stuff has come. Web-D is becoming more intresting now.

[@fvgoya]

This PyScript will be extremely helpful using with IoT. Simple project: You can have an Arduino/ESP32/Raspberry Pi, Python in the middle and PyScript on the Front-end and create really nice Dashboard, for instance.

[@rlopez6636]

This is next generation. .really cool

[@SpaceJunkie66]

trying to do the same thing you did at 12:07, however i keep getting this error; JsException(TypeError: Failed to fetch). Please help, i'm using a macbook.

[@blackdedo93]

This is thrilling!!!

[@BCTAHbKA]

Kjo është videoja më e mirë ndonjëherë

[@vaidasdatenis376]

Would it work in Angular?

[@mielo9176]

Hi there team Traversy, I've been following your channel and find it very Educational,and honestly tutorials are really helpful-and the tutor too. I'm often see you guys upload alot of new things Which are great and wish I was on your pace. Long story short I need some help with guidance on which route to take in being able to be on par a d be great at it too. Any contact email perhaps I can communicate with?

[@a_maxed_out_handle_of_30_chars]

the project is good but it will take time for it to be as fast and reliant as javascript

[@TraversyMedia]

I don't even think it is comparable for basic front-end stuff. I think it will be used for Python-specific tasks in the browser. Stuff that you would not use JS for (Data Science, ML, etc)

[@ararune3734]

@@TraversyMedia Yeah excellent point, what's the point of creating another JavaScript anyway?

[@gd44481]

It will never be as fast. Only JS can access the dom. This is jet another wrapper around js + wasm modules for the language logic.

[@FlanPoirot]

it will never be as fast as javascript, you're shipping a python wasm interpreter with your code to run python. wasm itself is still slower than javascript for DOM manipulations, even once these have been fixed python will still be slower than javascript and by then most people will be using faster languages with wasm anyway (rust, haskell, c, go, kotlin, nim, etc)

[@softwarelivre2389]

Python is damn slow and has little to no advantages over JS, even more so if it runs on top of WASM instead of running natively. The only thing Python has over JS is operator overloading.

[@prabhup9465]

Is that possible to access the file systems from browser using this? Also all the file operations like create, read, write, delete.

[@tjgdddfcn]

No, websites are run in a virtual machine and dont have acces to local computer’s filesystem

[@hawarhekmat1174]

Can i do image processing? With PIL

[@dmytrob7336]

How does PyScript works with minifying and obfuscation ?

[@hasanrashed537]

Take love from Bangladesh

[@khalilbenmeziane8836]

love your video men good luck

[@JoshPaulie]

7:15 omg finally, something actually useful. you're the only tutorial ive seen so far that has shown something more than describe how cool it is and use print().

[@freedom13245]

A bit confusing that the python print function doesn't output on console imo

[@akshaypendyala]

I see what you did there :)

[@darshandev1754]

@@akshaypendyala ?

[@akshaypendyala]

@@darshandev1754 I honestly forgot why I wrote that 😂😂😂

[@darshandev1754]

@@akshaypendyala 😂

[@brno322]

this is awesome!

[@muhammadmejanulhaque3305]

basically, a Blazor alternative that was created a long time ago.

[@eango]

would love to call python libraries like this on backend node server too

[@repotranstech9614]

Htmx is also so cool and revolutionary.

[@marcolerena456]

Could you do a video on using pyscript with react?

[@luisafonseca6768]

me watching this video: "Oh, that's cool" "Wait, whaaat?" "OMG, that is siiiick"

[@SetoFPV]

This is blow my mind

[@ImmoTheBest]

Hello, thank you for the video. There was some problem with numpy - ModuleNotFoundError: No module named "numpy" even when the module was actually installed.

[@BarcalonaFTW90]

Had the same issue. Try this in the head (note even if it's just one package it needs the square brackets): packages = ['numpy']

[@ImmoTheBest]

​@@BarcalonaFTW90 Thanks man.

[@MouhaTheSecond]

interesting 👍🏻👍🏻

[@iampiyushsingh7544]

Make space for King, his tutorial is here

[@sjorsvanhens]

Loved it

[@shafiemukhre]

This is powerful, I once had to built separate APIs using Flask just so that I can use some of the python packages for ML applications. Tensorflow.js is there but it's not as nice. Great intro video, thank you!

[@yashinshekh802]

are we going to web assembly with this?

[@ahmed-developer]

i want to design Ripl with Css? how can i be?

[@prozacgod]

Need to be able to import pygame :P (I know that would be... 'difficult' lol - would be cool though! )

[@ArquimedesOfficial]

Seems "CGI Scripts" are coming back..."Ah shit, here we go again"...

[@ulekmichel3142]

I just

[@marco201ful]

NumPee!

[@merabc]

As I understand it's interpretation of the phyton language in JS

[@channelm8044]

Thank you, more content on pyscript please.