PyScript - Run Python in the Browser! THE END of JavaScript???

last weekend there was a huge announcement for the python and web development world this is pi script which allows you to run python in your html code and this is super simple to set up so this is a super exciting project and today we have a first look at it pi script gets developed by the people from anaconda and now before i show you how to use it let's quickly go over the features that pi script offers first of all it allows us to run python in the browser so it enables drop in content external file hosting and application hosting without the reliance on server side configuration so this is just html in the end then we can use the whole python ecosystem so of course we can use all core modules but we can also run many popular packages of python and the scientific stack such as numpy pandas scikit-learn and more this is super cool for machine learning and data science websites for example we can very easily show matplotlib in the browser then we can combine it with javascript so we have a bi-directional communication between python and javascript objects and with this we can for example very easily run a mario game in the browser which i show you at the end then we get environment management so it allows users to define what packages and files to include we get a visual application development so we can use readily available curated ui components such as buttons containers text boxes and more and we have a very flexible framework so a flexible framework that can be leveraged to create and share new pluggable and extensible components directly in python so this all sounds super exciting and now let's have a look at how to use it so let's have a look at how to get started so we could download it and compile it ourselves so for this we need node.js or we can simply click on install and then we get just kidding you don't need to install anything so we just have to include one css file and one javascript file and this is hosted for us so we can copy this and then here i have a basic html code and in the head section we now paste this in so here we have the link to the style sheet which is a css file and then we include the script so this is pi script dot js and now if we go back to the website we can grab this example script so now in the body here we can start the pi script element and now here we can have any python any python code that we want so for example here we say print now you can and then we have the closing tags and this is all that we need so here i have visual studio code and i have the live server so now i can click on go live and this should start a website and now here we have the pi script tests and now you can so it's printing what i print here so this is how to use it now let's have a look at a few more examples and you also find them on the official github repository so this is open source and there you find a cool getting started markdown file that you can check out so now let's insert another pi script element and here we can define a function for example where we compute pi then we return pi then we call this function and then again we print the result so now let's save this and then go back to the website and if we refresh this then here we see pi is approximately 3.142 so this works as well so here are a few more examples so this is how we can set a html element afterwards so we can give it a id for example today and then in a pi script we say pyscript.write and then we use this id and here we write the date of today so then here we again write the variable of pi which is defined here and for this we use a diff with the id pi and we also give it a class for styling so for this i included another script which is using bootstrap so now this is a class from bootstrap and then let's also see how we can use matplotlib and how we can use a local file so in order to use this in the top we define the pyent and here we define all the libraries we need so the scientific libraries like numpy and matlab clip are already included so we just have to list this here then we can list the paths and here we can list all the files that we want to include so here i created a local file data dot pi that is using numpy and is creating two random arrays so now um let's again create another um pi script and here we have a new div with the id plot and here we say output is plot so this is where the plot will appear then we can import the libraries like in normal code we also import our function from the local data file then we create our data and then we say plt dot subplots and and do what we want with matplotlib and then here we simply list the figure and now if we save this and go back to the file then this might take a few moments so it's still not the fastest but now here it works so here we have again this pie with a different styling and here we have our mud plot lip plot so yeah super cool now i want to show you one more cool feature and this is how easily we can use a rebel on our website so for this we just include this pi rebel element and give it a id and then we can say auto generate equals true and if we refresh the website then here we have a wrapper and here we can run any python code that we want for example again print hello world and then i press shift enter and then it gets evaluated and here we see the output for example i can also import a module and then print um let's say random rand in between 1 and 10 and then again shift enter and then here we have an output so this is super cool how easy we have a dynamic rapple on the website so how does this work for this i recommend to visit the anaconda engineering blog so in this post they go a little bit about what and why and then they go over the stack they use and basically they build on top of an existing ecosystem the main magic behind this is web assembly so if you don't know what web assembly is then i'll have a link below the video so you can learn more about this then they use emscripten which is an open source compiler toolchain to web assembly and pyodide which is python implementations compiled to webassembly this is another cool open source project that makes all of this possible so shout out to them and yeah so this is in a very early stage and so is pi script so this is still in alpha so very early so it's exciting what will come in the next weeks but yeah let me know in the comments what you think about this and now finally let's play mario so yeah mario also is available in the pi script repository under the example so here you can check this out and here you see that it combines the pi script python code with javascript files this is super cool let me know if you also check it out and then i hope to see you in the next video bye

Channel: Patrick Loeber

Views: 363,155

Keywords: PyScript

Id: du8vQC44PC4

Length: 8min 21sec (501 seconds)

Published: Tue May 03 2022