Here's my source file and here's my configuration.
configuration.
So this is like a JavaScript script tag
but in this case we say the type is
Python and then it just bootstraps on
top. So this is one example. The other
example is using a Python library called
Folium and this is often used in Jupyter
notebooks for rendering the result of
geographical information system related data.
data.
So in this case we have the map of the
US and we overlay it with some data. Uh
so this is this whole script here but
this one doesn't go to JavaScript but it
keeps talking to Python libraries. So I
installed another package in my
piscripttoml. You can see that one of
the packages I
install is called Folium and the other
one is pandas because those are the two
packages that my code needs and my code
imports pandas and it imports volume and
it basically downloads this data from
this location turns it into a pandas
data frame and then it gives that to
folium to render a map and it basically
extracts the data out. So now when you
look at this normally in Jupyter
notebook what it generates is HTML. When
you say
display this generates HTML gives it
back to the Jupyter notebook and it
renders it in the document in place but
what is rendered there is HTML that is
generated by the Python code that was
executed and this is the same way. So
from inside your web application, you
can run Python code that generates HTML
and then you basically host that back
into the DOM. So when I interact with
it, this is again JavaScript. So this is
not using
Python event handling and Python isn't
drawing these these rectangles whatever
at at this moment it's all done by
JavaScript the same way that you would
have in a Jupyter notebook.
So you can combine these things. You can
write pure Python. You can
write Python that uses packages that
generates JavaScript code. Or you can
directly go to JavaScript and you can
mix and match at any point which you like.
Yes, a question. Jun has a question.
Wait a second for the microphone, please.
Yes. Could you please go back to the
previous Yeah,
Yes. JavaScript. Oh yes. Yes. At the
top. Um that's a good question. At the
top there's some initialization
happening. So you need to
install uh PIScript and that is done
with this URL and this registers itself
as a content handler for the page. So it
gets notified when a script tag is in
included in the page. So that JavaScript
code then takes out that main.py and it
starts up the VM and bootstraps the VM
with that. Yeah. So there's a little bit
of setup at the top here.
Yep. If you're interested in doing this
yourself, you just go to
piscript.com. So this is running on
here and this is from the from the
examples folder but you can also create
your own examples very easily. So you
just press the new button and it will
create a new example and so you don't
have to know how to get strap
Another example is um so I showed you a
screenshot of this but this is actually
my homepage and this is also written as
a pi script application. So there's some
animation that is happening here. Um
when you move the mouse it's uh allowing
you to yeah click on
things. So why would you write this in
Python? Because I could. I thought it
was really cool. And um you could have
done this in JavaScript of course but
hey come on. Uh if you look at inspect
and then at the source uh maybe I should
show the page for source. Uh you can see
that I use some JavaScript and then I
use main.py. So this is my code for my personal
personal
awesome. Another example is based on
work I did at JP Morgan when I was
employed there. We had uh I mentioned
these large trading platforms and these
large applications and we start millions
of them every
day and they take a long time to start
up and I wanted to save money with the
bank money and I thought like how can I
make this faster so I wrote a profiler
uh it's a sampling profiler that runs in
production on these on these apps and it
records whatever is happening and then
there was a UI written in Typescript
that renders
it and then pycript came out. I left JP
Morgan and I thought like hm I want to
do that thing again but not use
TypeScript but I want to do it in
Python. So this was my first experiment
that I wrote with
PIScript. So you run the sampler and
that's already installed actually on my
platform on my laptop here. So anytime
Python runs on my laptop, it rec it
creates a recording of that execution
and they automatically show up in this
table on the left and then I can
basically browse them back. So this
whole thing is written in Python. So
there's no JavaScript here. This is all
real Python. So this is an example of
the other extreme. I'm not leveraging
any JavaScript libraries because I
wanted to see how far can I push it and
this was horribly slow. Because I
mentioned before like whenever you have
a dot you go from the Python VM to the
JavaScript VM you have to create a proxy
to so that they can talk with each other
in the future but I also have to
marshall all the arguments like if you
send a string from here to there uh we
have to encode it in a format that both
understand and JSON is the best one. So
there's a lot of conversions happening.
So if you imagine you draw this whole
diagram, there's a lot of draw line
instructions, a fill box, draw text, and
each single one is not that expensive to
go across, maybe 50
nconds. But if you have a thousand of
them or
10,000, it adds up and it's more than a
second. So this thing was horribly slow,
like boom boom boom. So I had to make
this faster. So the current speed is
it's actually I cannot like disconnect
it from the mouse. This is how fast it
renders and every time I move the mouse
it rerenders the whole page. So this is
u and you zoom in it does the same
thing. So this is more than acceptable
for the performance that I was aiming
for. So the way this works it collects
all the draws. It collects all the draw
strings and all the draw lines and it
basically wraps those as one
instruction. And I say, I want you to
draw purple boxes in these locations.
integers. So now I need only maybe like
five or six round trips between these
two VMs to render it fast. So I'm
cheating. I have a little bit of
JavaScript in the back end. So it's like
my native code, right? In in languages
like Java, you write C code. In Python,
you write C code to make that little bit
faster. In Pycript or Podite in the
browser, you would use JavaScript as
your native code to make it
faster. Now, what can you do in this
thing? Like, yeah, it records
everything. It also records the logs.
So, this is interesting. You can combine
the two. So, you can look at the
timeline. What happened here? So, this
is like a log entry. You can screw. So
this is all Java. This is not
JavaScript. This is Python. So this UI
is drawn by Python and it's at this
moment this is all in the Python memory
whether I'm like looking over this this historical
historical
data and you can do things like what
this what does this program do if I ask
you right you don't know. Uh it's called
images. So maybe it does something with
images. You don't know. Um but it it
runs for a while. You can see here it
does pipot for a while and then it runs
process image for 5 seconds. So this is
coming back to that example that I
mentioned earlier at JP Morgan where we
have startup took so long and I didn't
know why. In Python uh we pay the price
for imports and they're often hidden. So
if you look at this example dataf
frames, this is an example where I
wanted to do something with pandas dataf
frames and it took like 15 seconds to
just import
pandas. At the top you can see CPU was
zero. So this is just waiting for IO. Um
the yellow line shows you the number of
packages loaded so far. So it goes
eventually to something like
626. So in order to do one thing with
pandas, you need to load 600 modules and
each one is a Python file and each one
has to come from the file system. And
this is all IO. I'm just waiting for the
bytes to come in. Now why it was so slow
this time, I have no idea. It's not
normal to take 15 seconds, but at least
I know now that it comes from IO and I
need to have better caching on my local
file system or
something. But if you want to know what
this thing does like the images example,
um I can look at the design and this is
quite interesting. So what I do here is
this is drawn with D3JS. So I'm
cheating. I'm using JavaScript but this
is this is the possibility right I can
switch between Python code and
JavaScript whatever is the most
practical at that moment like Python
doesn't try to solve solved problems uh
we leverage what is available anywhere
but from this I can now very easy yeah I
I can sort of get an an idea what this
program is
doing and if I don't then I can always
ask the AI so open AI what is this thing
doing and it looked at that trace of the
execution and it just gave me a
does. So this was my first experiment.
Um I did a tutorial in uh December on
PIScript online and there I wanted to
also use AI. So you always you have to
use AI right? So this UI is is written
in Python and it goes out to OpenAI to
basically yeah help me with setting my goals.
goals.
So it says here PI data London but let's
So, it's trying to find a a picture for
trying to get promoted. Takes a little
longer. It's like 15 seconds on average.
The text is easy to generate
apparently. So, it gives me some idea of
what I can do to get promoted. I have to
understand the expectations,
requirements. Oh, yeah. That makes
sense. Uh have to research. Yeah. Yeah.
Yeah. This all makes sense. And then [Music]
[Music]
uh yeah the picture uh still has to be
worked on but your goal has to be
achievable and
renovate and miserable but anyway you
get the feeling. Uh so how do you do
this? This is like 30 lines of Python
this whole app. So it's very easy to construct
construct
um because you don't have to learn any
JavaScript. This is if you know Python,
this will feel like very familiar
territory. So to build that last app, I
wrote a UI toolkit because it's really
hard to write UIs in a very low level on
the DOM level like create DOM entries
and whatever. I wanted to have a higher
level abstractions. I wanted to have
reactivity. Uh I want to have a model
and then have widgets update
automatically when the model changes.
And because we're writing Python code,
this is actually not that not that hard.
Um, so on the right here, you see I
introduce a class. It's a Python class.
And then I basically write a UI. So it's
it says like I need a vertical box.
Inside I have a label and then I have an
input which refers to the name of the
product. So this is the first line and
you can sort of see the structure of the
code already. It's a vertical box with
little things in there. And now when I
make changes in this model, so if the
name changes, all the UI elements are
dependent like ReactJS um and then this
string updates. You can also do this
from code. So you can like make some
changes in the model and then directly
and then the UI gets updated. Now this
is easy to write was very easy to do.
This library is called LTK. It's the
little toolkit. So if you go here, it
shows you
the repository. So you can you can
actually look at the code and it's not
that hard. It's
u this is the biggest file. This has a
definition of all the widgets in LTK and it's
it's
like let me see 1700 lines and this is
the most complex one. The rest are much
lines. So that allows me now to build up
more interesting
abstractions in Python to build yeah bigger
bigger
applications. I also mentioned that we
have MicroPython and we have Piodite and
this is an example where you can do
that. So here I'm running with Piodite.
Now I'm switching to Piodite and you see
it takes a little longer. So it has to
construct the Python VM, bring in more stuff.
stuff.
trade-off. I've also built uh Python
visualization in the past. This was like
2015. I did it on
pspot and this is a version that runs
entirely in the browser. So, you can
also do set cis set trace on your
application. So, anything you can do in
Python, you can actually do within the
browser. So, then you can build very
interesting visualizations like this one.
And this one is calculating the golden
ratio. And it sets a break point on this
line. And each time the break point is
hit, we run the visualization script at the
the
bottom. And this is yeah updating the
view on the top. So I can go back in time
time
and basically see the picture. So if you
ever want to know what the difference is
between breath first search and depth
first search. So this is breath first
search. So you can see it right? It's
it. So think about how this here like
sounds. And now I'm going to switch to
So this helps me understand how the program
program
works. And again, this is a little bit
more useful way of running Python in the
browser. Uh because I don't need a
server to run the algorithms and
visualize them. Um it would have been
quite hard to do all of that in
JavaScript. So this is a very good
example of why you want to do it there.
Okay, I want to get promoted.
Uh this is another example of an
application that I thought like I was
going to get really rich with. Nobody
bought it. Uh it's called
lifesaver.coach. So if you're
interested, go there, buy a
subscription. Um to get promoted, it
gives you advice here and so on. Um I
can click this thing like and this will
make a a task out of it. So now I know I
have to work on this and then I'm done
with it. Yay. Um, next slide is I
already got the notification of the
time. So, the next one is um, Jupyter
notebooks allow you to write Python code
and run it sort of in the browser but it
runs in a kernel. So, this is uh, if
you've heard of Python for Excel, Python
in Excel, this is like Python in Excel
but this is Excel in Python. So I've
written a sheet a spreadsheet here in
Python using LTK and it's basically
building the dependency graph of
execution but all the Python code runs
in the browser in web assembly
here. Um why would you do that? Because
I wanted to prove that I could. And it's
using two VMs. It has MicroPython for
the UI and it has Pyodite for the
worker. And it can do anything you can
do with pandas, polars, whatever. So
here I'm loading uh URL. So if I go here
and basically grab that one
one
quickly. So if I have this
URL and I go to a new file for instance,
let's start with an empty
sheet. I can say import and then pass in
that URL.
and it will do a preview of that and
then I can import it into the sheet. I
can do a pandas or polars. So we got the
po polar guide book authors here sitting
in the first row. So this is for you
guys. This is polars. Here we go.
Um you can also use um duct db data
frames and here I experimented with some
interesting filtering. So here we have
like the coordinates are filtered by
14,000. So let's change that. So I say
instead of 14 I want to have
15,000. So when I say enter it actually
updated the source code
here and then redrrew the map. So now I
have fewer
ones. So
um that is all cool but it it gets even
better. So I I gave a demo of this to
Guido and then he said like uh yeah it
would be really cool if you can actually
interact with the sheet from the cell
right and he said like I I tried to like
negotiate that in in Microsoft but they
wouldn't let me do this in Excel. Um so
I said oh yeah that's possible let's do
that. So what we have here is a cell
function and here's the code and what it
can do it can escape its sandbox and it
can talk to the sheet and it can update
DOM entries in the sheet. So this is
what I'm doing here. Can also set event
handlers. So I can say move the piece
from here to there and then move from
here to there and then move my queen
here. And this thing is really dumb
because it moves randomly. So, it's easy
to win, but
uh try and do this in Excel, right? Try
to do this in I try to actually um hook
up a Python engine as well, a game
engine, but those are mostly written in
C. And they're not pure Python, so
they're hard to import. So here you can
see I import chess as a module and there
are chess engines that are compatible
with chess the the Python
module but they wouldn't run in web
assembly. So I'd have to compile the C
code to web assembly first and that that
was a little bit too much work. Now so
that is some of the things that are
possible but people were complaining to
me like oh that looked like Excel. This
is can you do all the key bindings for
Excel? No no please not. uh do you have
all the imported uh default functions in
X? No, let's let's remove the sheet.
Right? So this is an experiment that I
did is similar. So this is again micro
Python for the UI. It's using piodite to
run the code and it's using another
piodite for finding out all these
components. So this pallet is done by
one VM and then it runs and why you have
to talk to me afterwards. We can talk
about that. So what I want to do is I
want to draw a picture. So I want to
draw a candlestick of some historical
data. So what I need is a data frame. So
I click on data frame. I want to connect
it to something. And there are two
potential candidates. So history is one.
So I create history. So now I can
connect up my history to my data
frame. And this history object needs a
symbol and from date and to date. So I
luckily have components hanging around
that match those things. So I can
connect them. So Tesla symbol from date
and then to date. And when I click it
now has all the three inputs and it can
actually run. So you will see it
run that cell. So it ran the pandas data
frame creation code for that and then
then it gave the output to the input of
the candlestick and it could draw could
draw itself again. This runs up to
March. So let's fix March and make it a
little bit later. Select today is 06
06
07 and when I change the input changed
and then the data frame will be run
again and then it's updated again. So
there was some recovery and now we're
Um so this is what is possible uh with
Python in the browser. These are some
examples that I gave you. If you're
interested in trying them out yourself,
uh, this is all open source. Py Sheets
is open source. The flow example is open
source. So, just head down to the GitHub
logo and you'll see the repositories there.
there.
And my plan was to or my goal for today
was to get you excited about running
Python in the browser um in a in a like
as a replacement for JavaScript because
I think Python is a much nicer language.
We all agree,
right? So with that, I want to thank you
and if you have any more questions, we I
guess we almost ran out of time or we
ran out of time. So come after me, come
to me in the in the hallway and we have
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.
Chrome Extension