As a Python programmer, I find venturing into JavaScript something akin to hiking across Dartmoor in a snow storm, or taking a swim in the Louisiana Swamps. I know there are dangers and kinda know where I’m going, but bogs, quicksand, Alligators, and the Dartmoor monster in out there somewhere and maps are useless. So I started to use Bython. Python in the Browser
It’s been a dream of many Python programmers to use Python instead of JavaScript for front-end coding, but there is a simple but unmovable obstacle. Browsers all support JavaScript, but not Python. Brython has a simple solution to this. It transpiles into JavaScript, so what is actually run is JavaScript.
This does not make everything simple though. You can code in, what is effectively a subset of python standard libraries, but you still need to work with the browser. This is where, I feel, that Brython comes in. It gives you access to those objects, and others, but wrapped in a very nice set of python modules.
What I’m going to go through in this set of documents, are a few of those items, viewed from a practical point of view. In that, I mean, describing how I used Brython and its modules for front end work, but not in a step by step guide, in the hope you will get answers to some of the questions you have not found answers to in the documentation.
Assumptions
I’m just going to assume that you know python and have some experience with front end JavaScript programming. I’m not going to go into depth on using the DOM and stuff, but an idea of what it is, is kinda essential for any browser scripting
With that said, onto the first subject.
Talking to the DOM
All front end code will require, at some point, grabbing html elements, or reacting to events such as mouse and keyboard clicks. This means your code needs to access the DOM and the underlying objects the browser knows about.
Brython has a simple class *document* that represents the HTML page. You can use this to find items on your page then perform read, add, update, and delete actions on them. You can also bind to the item, listening for an event, such as a click. Here is an example for getting an element from the page.
from browser import document
el = document["myelement1"]This example gets a single element, where the html element has an id of myelement1. This command will raise an exception if the element doesn’t exist though. I think that fairly obvious since it’s coded like getting an item from a dictionary, which will raise an exception if the key doesn’t exist.
We can get multiple elements using the select() method. This returns a list of elements, and will of course return an empty list if no elements are found. Selecting by id would be a little silly in this case, since id’s should be unique in a page, thus we have the ability to search for elements based on different attributes.
from browser import document
els1 = document.select(".myspecialclass")This example grabs all elements that have a class of “myspecialclass”
Practical HINT
With most html pages, the elements you are interested in, are not all in the same place, so you need a way to tag all of these, so that you can grab them all in one command. Here are two easy ways you can do this.
- Add dummy CSS classes. A class does not need to exist in the CSS, or have any effect on the html element. It will be ignored if not found. However you can use them to tag the elements your interested in.
- You can add custom attributes to the html statement. These can be very useful, as you can, not only find the elements using them, but pass values to your script.
<p class="mypage-record-display" record-id="5">my record 5</p>
<p class="mypage-record-display" record-id="6">my record 6</p>from browser import document
# get by class
elements_by_class = document.select(".mypage-record-display")
# get p tags with attributes record-id
elements_by_attr = document.select("p[record-id]")
for el in elements_by_class:
print(el.attrs["record-id"])Brython Documentation goes into more details on how to search and find elements, but I have found setting classes and attributes work much better than trying to find elements via xpath type searches.
Events
In JavaScript, we can add scripts to be run on an event in two ways.
- Add a special attribute in the html that will trigger a function when the said event happens. i.e., onclick=’runthis()’
- Add an event listener to the code.
Brython, doesn’t allow for the first type. You CANNOT trigger a Brython script from the html. Setting up event listeners in Brython is very easy though.
from browser import document, bind
# get the element from the document
el = document["mybutton"]
#setup a function to be called
def button_clicked(evt):
print("mybutton clicked")
#bind the element to the function so its run when the event occurs
el.bind("click", button_clicked)So with Brython, we “bind” and event from an element to a function. We can also bind using a decorator
from browser import document, bind
@bind("button", "click")
def button_clicked(evt):
print("a button was clicked")Both of these examples are using id’s, but you can bind by class, tag and attributes as well.
Practical HINT
Bindings that are not inside a function, such as the decorator example above, are run when the code is initialized. If you add html elements to your document, they will not be scanned or added to any existing binding. Thus, if you have binding on a set of buttons with a class of “mybuttons”, and then add new html with new buttons, they will not be bound to the listener. You need to create the binding as you add the html.
Up Next
In my next document, I’m going to go through the different Ajax/API call libraries Brython has, and why they look a little odd.