Well, there’s a big little Python library called Brython that makes it all possible.
There are two ways to include Brython into your Python project. The first is through
pip install brython
Then in an empty folder, run the following command:
This will give you the following folder structure:
brython_stdlib.js byrthon.js demo.html index.html README.txt unicode.txt
To run a web server locally, you can use the following command:
python -m http.server
python - http.server 8001
Every now and then Brython releases an update. To update your related packages, use the following commands:
pip install brython --upgrade brython-cli --update
You can also add Brython to your HTML page via CDN.
The other perk of using Python for your frontend is that you can unify your project under a Python umbrella, rather than spread it across multiple technologies. The more languages you have to support, the more time you’re going to need for long-term maintenance and upgrades.
Using Brython for Frontend Python
To use Python in your HTML page, you need to load the function
brython() . Here’s an example:
<body onload="brython()" > <script type="text/python"> Your python code here </script> </body>
To link in your python script into the frontend, you can do so like this:
For example, you might have a button that does something when clicked. You want the click event logic to sit inside your
main.py file while the view is your HTML.
<body onload="brython()"> <form class="pure-form" onsubmit="return false;"> <button type="submit" id="submit">Ok</button> </form> </body>
Here is an example of binding your logic to the click event in Python.
from browser import document, prompt, html, alert def clickedOk(_): alert("Hello there!") return document["submit"].bind("click", clickedOk)
The above will run the
alert() function when the button is clicked.
brython() is invoked to compile the Python code contained in the
script tag within
The Frontend Python Browser Module
Brython’s browser module lets you access various browser-related functionalities. It also lets you bind your values to different targets and events, allowing your frontend to be dynamically driven by data and any changes that get detected.
Here is a list of the different browser methods and what they do.
browser.alert(message)— this is a function that prints a message in a pop-up window and returns
browser.bind(target, event)— this function lets you event bind to a decorator
browser.confirm(message)— this function prints a message in a window. It will show two buttons (ok/cancel). It will return true if ok, and false if cancel is selected.
browser.console— the equivalent of
browser.document— this is an object that represents the HTML document that’s currently displayed in the browser window
browser.DOMEvent— Lets you access DOM events
browser.DOMNode— Lets you access DOM nodes
browser.prompt(message[,default])— Lets you create a prompt via a pop up window. If your value is entered, it will return the
browser.run_script(src[, name])— Lets you execute Python code
browser.window— Lets you access the browser window
Here’s an example of how you can use one of the above
<script type="text/python"> import browser browser.alert("Hello Frontend Python!") </script>
Or alternatively, if you want to split out your Python code from the HTML:
<head> http://main.py </head>
import browser browser.alert("Hello Frontend Python!")
Alternatives to Brython for Python Frontend
They all work as Python compilers, meaning that whatever you end up writing as your Python code is still valid. There might be a few differences, but overall, the general concepts introduced here are mostly the same.