What is PyScript - Python's Javascript Friend PyScript Deployment on Github Pages #1

Key Takeaways

hey prince welcome to one little coded today we are going to talk about pi script i script has taken the web development world into storm since the announcement was made in the recent python so today we are going to learn what is spy script is it really a javascript killer so is spyscript going to replace javascript in this entire web development ecosystem how data scientists machine learning engineers are people who love data apps can take advantage of pyscript and of course we're going to see how you can simply deploy pyscript on google pages uh sorry github github pages of course uh on any static page um hosting website so we're going to see all these things in this video so if you have got any questions that is not covered in this video please let me know in the comment section so i can i can try to address it later on but pyscript is really really amazing i'm really so happy like as you know i am somebody who has made a lot of videos about uh streamlit and python web development ecosystem so to see something like pi script i was like mind blown so this is totally amazing totally unexpected i really really love pyscript so i want to share my learning with you what what do i know about pyscript and how do i see pi script and those questions that we discussed at the start of the video this is something that interests you let's get started first of all what is pi script i script is a new version um i mean like like uh not necessarily like a new programming language but a new way for you to write python code inside your html so now how do how is it possible you might be wondering is there any dependency do i have to install something no no no no nothing so this ideally uses something called wasm its web assembly so pyodide pyrodite is a project that has ported python for web assembly so webassembly lets you execute run anything on web browser just like how your javascript code is so biodiet has taken python and then ported it to web assembly which means if you build anything on top of pyrotite you would be able to run that on a web browser now you might be wondering like why do i care about running something on web browser like i do have i have my um terminal i have got my shell um i can simply run python on it so what what is the point of doing this on web browser the simplest answer is web browser is a compiler that is available on almost every single device on this planet you want to run something on raspberry pi you would have a web browser you want something on apple watch you would have a web browser so you almost see web browser everywhere so which means you don't need an external dependency or a compiler or an installer for you to run a code if you can develop something for a web browser and that is exactly why all these companies are making web application and javascript developers exist so this is something that python developers are missing and that is the gap that pi script is trying to fill pi script is taking advantage of pyro died and it is trying to bring that that feature which is you can run python within your browser using pirate and pi script is like the syntax or the language or installation um like whatever you would like to call a domain based language like a dsl um that is going to help you do this thing so as you can see um on the screen right now so in short our mission is to bring programming to for the 99 percent so they what they are talking about is 99 is the crowd or your total addressable market that uses browser and pi script will let you create products create tools date scripts create automation for that 99 and that is why pi script is really exciting so now what is python in the browser so you can see that it uses made possible by pyrite project thank you so much that application hosting without reliance on server side configuration which means any static web page hosting site can host your web application that has python inside it and we're going to do it as part of a demo in this video so now um what are the other advantages you've got it is based on python ecosystem so you can run many popular packages already like out of box by script will help you run packages like numpy panda scikit learn you know the scientific stack makes python ecosystem really really rich and you would be able to use the scientific stack using pyscript again within your browser so python also can communicate with javascript so now now the question is is spyscript really a javascript killer if you ask in my opinion i i would say that pi script still has a longer way to go uh when we create the pi script web application you will see that how long it takes javascript applications to not take that much time so if you want to build an enterprise application if you want to build a sas product a cloud-based product you want to build an ml product um you want anything to be fast people like fast things people don't like slow things if you're going to take two minutes to make a simple um plot people don't wait that much um you know you have a lot of different options like d3 all those things um so the the point is at this point like as we are talking today i script is not going to replace javascript but what it can do is if you know javascript if you know pyscript you have a lethal combination like you have really a powerful maybe like you know something like avengers you have real super power that can take the best of the web world that can take python which is almost the best in the machine learning ecosystem python ported with pyscript with javascript you are in for a treat and python with javascript it means bi-directional communication bit between python and javascript options also objects and namespaces that makes it easy for you to develop really good web application using iphone by script of course um environment management you get to use packages different packages and again you have already some visual application components like ua components like buttons containers boxes and all these things you can you can straight away use it just like how you do it on your html css and it's a flexible uh framework which means um more people could be building things on top of it and more people would be developing it it's just like probably one week since the development and already you would see a lot of projects like yesterday i came across a very interesting project where somebody has managed to use or put python code inside their wordpress website can you even believe it there is wordpress which is a very popular cms content management system that's highly used for blogs websites ecommerce and all these things wordpress is php based but somebody had managed to take python and put it inside wordpress and this is amazing and that is possible only because of pi script and that is exactly why we are talking about pi script in this video so at the end of the day pi script is just html right it's just html and uh thanks to thanks to the rich ecosystem of python that makes this html really sophisticated and something that everybody would uh would envy um especially if you're a web developer and if you do not know by script i think you would want to now learn by script because you can you can do more than what you can do with simple html css javascript and again if you're a python programmer you would be missing out a huge ecosystem where you don't have to send a compiler you don't have to send an execution file all you need is a web browser to run something so you would want to use pi script so in both the worlds either whether you know python whether you do not know python i think python is going to be really interesting everybody seems to be really excited about pyscript so i would encourage like if if you are like me i would encourage you to spend more time in the upcoming days to learn and use pyscript i'm going to do the same thing you might start seeing more more tutorials in this channel um on pi script but but yeah that's me um and i would recommend the same thing to you so that's that's basically about pi script so i think um i think i've i've spoken enough now i think it's time for us to do some action oh there is there is an installation let's do some installation and once i click this it's going to troll me why because it says hey just kidding you don't need to install anything because all you have to do is you have to refer these two files in your html html code and then you have got pi script ready for you to use you don't have to literally install anything unless you are going to deploy it on a server you don't want to rely on a third-party um you know like the pi script css in javascript you can manually download it and keep it on yours like host it on your own server but but i mean like if you have used google font if you have used any javascript library you would of course do this thing so i wouldn't mind doing this thing so now that we know how to use pyscript um all you have to do is refer these two in your head on html so now we're going to actually look at some sample projects so now where do i go for sample projects you can come here you can see here and then you would see sample projects let me look at sample projects here and you click this click here that will take you to the sample project let me open it in a new tab and you can see the sample project get it started with pi script so now all i'm going to do is i'm going to create a github repository and i'm going to show you how you can host this pie script this html file that can run python code on that github repository and i'm also going to show you how you can enable github pages which means this is hosted just like that you don't need server everything is happening okay so first um let me go and create a new github repository okay so the first code that we're going to look at is let me zoom in so the first code that we're going to look at is we have uh sorry html html open and close we have head head um close where is head close yeah hit close here so here we are referring these two files and the one that we saw the dependency for pi script one is the css one is the javascript then inside the body you have pi script open by script close and you are just simply using print hello world that's the first code that we're going to run um so let's let's see the first thing that i'm going to do is i'm going to open my new tab i'm going to say git up dot my data profile amrs and i'm going to click a new repository and i'm going to say i i i script demos and i'm going to say code repo to post by script based page it will actually create an html file and then we're going to enable getter pages that's right i want to i don't i don't know maybe i can i can keep it i don't want to read me that's fine create repository after that you would not see anything of course and you see an empty file so create a new file okay i'm going to copy everything from here copy this come back here paste it and i'm going to call it index.html i'll tell you the reason why i'm calling it index.html if you have already dealt with data pages you would know this but just if you do not know very shortly i'm going to say why i'm calling it index.html then next thing is i'm going to commit the file at this point we have the file okay so we have index.html so if you have open nothing is happening because you are actually looking at the code you are not looking at the page so what i'm going to also do now is i'm going to duplicate this tab okay to duplicate this tab and instead of github.com i'm going to say github.dev and then i'm going to open this repository at this point so you can see at a new repo opening let's see yeah the repo is being open so the repo it is five script demos um i script demos let me show you here i script demos and it's going to show you the index.html file so it's it's currently connecting and then you can see yeah you can see index.html and you can see the code here so this is i'm doing something so that we can make changes and we can see so at this point our repo is ready right our coding environment is ready which is again on the cloud using vs code dev now what we want to do is we want to host this page we want to render and serve this page so what i'm going to do is i'm going to go to the settings of this page sorry settings of this repo click pages here say that i want to take the main branch i want to take the root folder and i want to save which means i'm going to enable pages at this point and you know once you do that it is saying that your site is ready to be published at this place right now don't click this right click it copy the link go back to your repo it did about and then add the website here okay and save it at this point you have you have successfully copied and pasted the page here and as you can see there is a github action every small github action that is currently running you click action you can see that it is building and deploying your page whatever the page that you have got it is being built and deployed at this point the moment it becomes green you're going to click the ripple link and let's see what's happening it's it's it's it's still running once it ideally by this time it should have finished because i think it's running for um close to one minute yeah it's finished now what happens is i go back to the repository i click this link okay and it's taking me to this page and it's loading it's i i don't look this white because of the white screen i look white you can see it is loading and it's going to print hello world and as you can see it is taking a bit of time and that is that is exactly what i highlighted i script is not as fast as javascript at this point but um but i would still recommend pi script at this point let's say you want to develop um developer an internal um you know project um intranet localhosted it should be really fine and as you can see you've got hello world as we do so now i'm going to quickly show you one more thing i'm going to right click this inspect and after i do inspect let me show you i'm going to click network right so you so that you get to see the kind of speed it takes on network so you can see right now there is nothing i'm going to just refresh this right after i refresh this you can see what all components are being loaded my script is js then you know iodide so bio data is what exactly i said makes this python to wasp um web assembly port and you can see asm and assembly code wasp code and and still you can you you can see that it is not printed uh hello world so it is still still running so it was loading all the dependencies it is still working out and it has still not reached our python code part as you can see and then you can you can see at this point this successfully um successfully happened so it has taken close to what about six six thousand microseconds maybe so now we know how we have managed to build a very simple pi script application as you can see the code let me quickly yeah so let let me tell you the reason why i am um why did i call it index.html the reason why i called it index.html is because if you see this url part i'm not referring to the actual url like the file name link i'm just referring to the report name and that renders this and for that to happen you have to call the file index.html if i if you don't do that then you have to you have to always do you know like whatever the page name is the repo name is slash slash index. whatever that file name is let's say i'm calling it home.html so i have to call it home.html to avoid that unnecessary thing it doesn't look good usually i don't prefer it even if i'm going to put it on my resume send it to my brains i i don't i don't giving the actual the file link uh so this this looks more professional and that's why we called it index.html which gets rendered when you call the repo itself the ripple link the this link rather than the actual file link that's why we call it index.html so to quickly have a take a look at the code so what do we see we see i think i should zoom it at this point how is this [Music] okay let me oh in the size this is a bit of a stretch i think i should reduce it a little bit more more okay so right now we have an html tag open and close we have head open and close um we have body open and close everything goes inside the body we have we have said we have said print hello world maybe we can try this i'm not sure if it's going to work but i'm going to try my luck i'm going to try pies print level and into so i would ideally expect it to print 10 times so when i save this i have to commit it back i'm going to say updated the code type the commit message and after i do that i'm going to go back i'm going to go back and see the github action so i'm going to click the action you can see the action is being the pages like because we made a change to the code the page is being built and it's going to be deployed once we see this thing whatever happens whether it works whether it doesn't work the next thing that we're going to do is we're going to we are going to directly jump into the last section of this code which helps us print a matplotlib chart so we're going to write a scientific stacks and there's a python scientific stack code which includes importing matplotlib importing numpy generating two random numbers making us beautiful scatter plot and displaying whether it is beautiful or not it is it doesn't matter um but that's what we're going to do so our code if you see it looks the same except one changes you have no environment where you're defining the libraries that you want numpy and matlab about the two libraries that you want which is again inside your head like if you're familiar um with javascript sorry html then inside the body you have h1 tag which in it which is an html tag you define a div like a placeholder you define a div and keep it and the div id is plot so this is like a placeholder that you have defined and now you're defining pi script and you're saying the output should be placed inside plot so you have defined a div id plot and whatever the output of this right it's a plot at the end of the day you have a figure here that figure should be written inside the divided plot that's what you're saying then you're closing all the tags and you're good to go so i'm going to copy this code okay i'm going to go back to my demo i really should have finished let me refresh this then see it's going to run again i'm i'm not editing this video my apologies f um this running part takes a little bit of time but i want you to have the real the real time how much it takes so that you know you can do that mental calculation to see okay where is pi script today whereas javascript i mean because i've seen a lot of a lot of a lot of comparison between pi script and javascript i i don't think it is fair at this point you're talking about a newly launched framework order for a dslr whatever um something that is launched a week back and then you are talking about a very measured programming language that's been existing for a while um so it it i don't think it's fair and i don't i don't think pisces javascript killer either so i think i think i think they're going to work hand in hand are they going to bring the best of both the worlds and um and i am i am really happy to be like that i don't want to take away the jobs of javascript developers neither i don't i want to give away my job which is you know coding in python so so we have successfully managed to print by um level 10 time so yes our python skills are good and we have successfully managed to use it on the web so now that our first demo worked fine so we have already copied the code i want to come back here to my editor i'm going to paste it just to quickly again take you through the code so we have got the html tag opening we have got the headtag opening we have got the dependencies called and we are seeing the python environment requirements which in this case numpy and matplotlib2 libraries we want how the head tag gets closed next we are opening the body tag and then we have h1 we are saying it's plot some random numbers and if you want if you want another h2 you can simply you can you can say strong something i'm going to say thanks to one little coder i love it because it's all narcissistic i'm not sure i love [Music] okay there's a type of love that's fine so that you know that i'm not a bot what you don't make typo do they so we have strong and then we have the div id lot so this is like the placeholder where you want actual plot to be rendered and then finally you have the pi script output and you're saying that the output should go inside the plot and then you have got the actual python code which is input matplotlib um as plt import uh material matte plot lip dot pi plot as plt and the import numpy s and np and then you are defining two random numbers um and um it it that that's why it might take a little bit of time to have to change this 100 i'm going to change this 100 uh you've got x and y and then you have got the plus of plots defined and then you're going to make a nice scatter plot and then you're going to display the chart that's it now i'm going to save this i want to go back here and say submit this what is the commit message matt plot lib code commit the message and i'm going to go back to my i'm going to go back to my github action to see now that it is um building rebuilding the page you can see so i think it would take at least a minute um but but you can see so a couple of nice examples that i've seen with um with pi script show for the one that i talked about the word processing like actually putting python code inside wordpress and i also saw people started already developing a slightly like dashboards like you know sophisticated interactive visualization using panel um that is something that i started seeing and i'm really excited to try it out um i actually wanted to eat uh to build a dashboard using um by script but i thought it's been so long since i got sick and then i made a video so i thought i should i should i should at least you know share my feeling about this thing um okay so now this deployment is successfully done so i'm going to go back to my link which is of course the link and i'm going to reload it i'm still keeping this here so that you see what are the components getting loaded and how long it is taking so that's only intention not to scare you out i'm refreshing this page ideally because our data action deployment has been successful which means now we should have the latest feature um like like you can see it says let's plot the random number thanks to one little coder i love my script strong i think i didn't close it properly so what a terrible mistake i've made um but that's okay i'm i'm not an html developer so i i have an excuse to see so now it is getting loaded so what ideally now it's going to happen is it's going to happen um it's it's going to it is going to generate random numbers and it's going to make a nice little lot using matplotlib and as you can see that it is in it is downloading all these um wheels so one thing that you need to notice um you can also define the file as an external dependency to quickly show you so right now we have done like if you're familiar with css it's like in light css we have done a very inline code but if you don't want that you can keep the random number generating all these things as a separate code and then you can you know define the code as a dependency as well just like how you would simply use like a source code and then import that source code in python you can do almost anything here as well but i don't want to deal with the pain of you know referring to the relative path and all those things that's the only reason i hard coded it so you can either do like this like this just called local module if you want to do so now going back to our code it is it is still renting the plot is still not visible so um let's let's um let us wait and see i think it has downloaded almost necessary items already so you can you can see all the required libraries here and here you go the plot is available so we have successfully managed to create our pi script using also using python scientific ecosystem scientific stack but the main thing that you have to remember is this is not hosted on a server this is just html each posted on github pages very similar to um you know your simple html css um that that is the biggest thing so you there is no server-side interaction by phone is actually executed on the browser like using iodide i would recommend you to read more about 500 it is quite interesting um but but at this point my script is more interesting than that because somebody has built it on top of it and i would recommend strongly recommend you to go try out pi script just one last information because before we um sign off they have got a twitter handle so if you are developing anything using five script at this point please tag this twitter handle you have a higher chance of getting retweeted and getting more eyeballs um but other than that i am really super bullish about pi script at this point um but if you ask me the question is spicer the javascript killer i don't think my script is a javascript killer and i don't want vice grip to be the javascript killer i expect it to coexist and whenever i used to use r shiny um a lot i used to use r shiny a lot i would say the same thing you can develop dashboards data applications um ml applications using our shiny or python streamlit even if you do not know html css javascript but if you know simulator are shiny along with html css javascript like then then you are in english you're like you're special and i think the same thing is going to happen here as well if you know bygone if you know by script if you know javascript then i think um you have you have got a really super super power and that that that is how i would uh i would see the ecosystem to grow but but yeah this is this is really an exciting spot if you build anything using pi script let me know in the comment section if you have any more questions about by script that i have not covered let me know in the comment section otherwise i hope you stay safe i hope you take care happy coding peace