This article was originally posted at
This blog article will:
- give a brief introduction to using Brython, a Python implementation for front-end development on the browser
The entire project is here
Others wanted to learn from history. Just immigrate the entire family. At least, that’s what Pyodide thought of doing. Their strategy was to create an enclave on the side with a full Python Interpreter which can run Python code. Thus you could run any Python code including most of the data science stack which contains C language bindings (e.g. Numpy, Pandas).
This looks very promising too. But on initial lazy tests by this author, the initial page load was a bit slow(The real reason was that the author also could not find an easy way to make this work and was happy to not pursue it any further.)
Let’s code up the customary ‘Hello World’
The Brython paratroopers(compiler) is here.
We activate it on page load
<body onload="brython()"> ... </body>
body tag above, we write the Brython Code:
<script type="text/python"> from browser import document document <= "Hello World" </script>
We just add
Hello World to the document element. Hmmm. That was easy.
In complete form, it’s shown below.
This will simply print “Hello World” to the page.
Let’s now make a calculator(code courtesy: Brython). The full code is here
Yes, you were right. We do need a table. Let’s make one.
from browser import document, html calc = html.TABLE()
Let’s add the first row only. Just the display box(we’ll name it
calc <= html.TR(html.TH(html.DIV("0", id="result"), colspan=3) + html.TD("C"))
Yes, I’m not very sure of this
<= syntax either. But hey, for such a lovely library, I’ll settle for it too :).
Let’s now add the number pad
lines = ["789/", "456*", "123-", "0.=+"] calc <= (html.TR(html.TD(x) for x in line) for line in lines)
Finally, we add
calc to the
document <= calc
Now that’s all good. How do we make it work? First, we need to capture a reference to the
result element to manipulate it when the number pad is pressed.
result = document["result"] # direct access to an element by its id
Next, we need to update the
result whenever any element in the number pad is clicked. Let’s make an event handler. We’ll trust the Brython developers that this code works. Notice the manipulation of
result based on the button you clicked.
def action(event): """Handles the "click" event on a button of the calculator.""" # The element the user clicked on is the attribute "target" of the # event object element = event.target # The text printed on the button is the element's "text" attribute value = element.text if value not in "=C": # update the result zone if result.text in ["0", "error"]: result.text = value else: result.text = result.text + value elif value == "C": # reset result.text = "0" elif value == "=": # execute the formula in result zone try: result.text = eval(result.text) except: result.text = "error"
Finally, we associate the event handler above to the
click event of all buttons.
for button in document.select("td"): button.bind("click", action)
See, how easy it is when someone else writes the code :P. But seriously, Brython is a wonderful work of engineering and perhaps the best display of programmer love for their beloved Python language. Please support the developers, at least with a star on their Github repo!