The world’s leading publication for data science, AI, and ML professionals.

Run Python Code on Websites: Exploring Brython

JavaScript Equivalent Scripting in Python

Being a follower of Python for a long time, I never stop exploring this language to one level and kept searching for its implementation every day. One fine day I got to know about Brython, which aims to replace Javascript for web scripting. It allows you to directly use Python Scripts on a webpage to handle DOM (Document Object Model) elements and events, all using our favorite language Python. Let’s dive into how to implement such kind of script for your next project and how I won a competition (2nd position) using this technology!

Before that, if you want to explore the android side of Python then make sure to check out my Android App in Python Series on Medium.

Building Android Apps With Python: Part -1

Photo by Luca Bravo on Unsplash
Photo by Luca Bravo on Unsplash

What is Brython?

Javascript is considered as the language of the web which enables interactivity on the webpage. Nobody wants to surf static pages that can be built using HTML and a bit of CSS. Brython offers an intuitive way to interact with web page elements using Python. In the past also, python finds its usage in backend scripting using Django/Flask allowing users to build scalable websites with rapid development. While Bython focuses on applying this on the client-side too. To start with Brython, you have two options:

You download the Brython package locally and then include it in your file. This can be done using pip:

pip install brython

then in an empty folder,

brython-cli --install

or,

Directly use Brython CDN which gets updated as soon as a new update is released that frees you from manual updating the packages.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/brython.min.js"> </script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/brython_stdlib.js"> </script>

Doing Basic Stuff Using Brython

Let’s brush up on some basics to start developing some cool projects. Note that this requires you to have a basic understanding of DOM and familiarity with basic Javascript would be a plus point though not necessary. In your IDE, populate a basic HTML code, place an input field, and a span tag with an id. Also, add the Brython CDN using the script tag. It should probably look like this:

Now bind this input event to the span tag using your Python script. To do this, we will use the document from the browser. Any type of script will be encapsulated in a script tag with the type of text/python and this can be defined under the body tag too. One more change that needs to be done is to include onload="brython()" in the body tag () This is the script which will enable us to display text in realtime:

Here, we have used a document object from the browser module to bind the id of the input (text) to the function show_text(). This function assigns the value of the input tag to the span tag using their ids. Here is a GIF to show what this HTML page does on loading the browser:

GIF by Author
GIF by Author

Another Example!

Let’s look at another example to see how to make API calls using Brython which is the most exciting part about this. Consider a scenario where you want to host a machine learning web-based project. You created a model and now serving it as an API on any cloud platform such as Heroku, GCP, or AWS. Being a python developer, you may not be that much fluent with Web Development and find it difficult to handle the late responses or slow loading of your website. You can easily host your website using GitHub pages but it doesn’t support flask or Django frameworks (for now).

To handle such situations, you can easily create a basic HTML webpage (or take help from bootstrap with a bit of CSS) which asks the user to enter the required parameters, and then your Brython script makes the request to your model hosting and you display the results on the webpage. This will benefit in the way that the website will be hosted on GitHub making it easier to manage the codebase plus it will be up all the time. Let’s see the script to make an API call that returns a random joke:

First, see the output of this file:

GIF by Author
GIF by Author

Here the get joke button is bind to the API call function which makes AJAX calls to the server, returns the result, and then rendered to the display tag.

The Script which Won

I was given the problem statement to fetch music lyrics from the given API ad display them on the web. It takes the music artist author and the title/song name for which we want lyrics. Here is the GIF for the same:

GIF by Author
GIF by Author

If you want to explore the source code of this, then here is the GitHub repository link.

Conclusion

We saw how to implement python based scripts directly into the webpage using Brython. There is no doubt in the fact that currently Javascript can’t be replaced in terms of speed, usability, maintainability of code, and understanding. These python scripts require familiarity with DOM which can be well-practiced and understood more with more clarity with JS only. This is best suited for someone who is looking to showcase their python skills on the web for both back-end and front-end. Many people have built games, graphics using Pygame and turtle library. You can explore more about this over Google.

That’s it from my side, follow me on medium to receive notifications about more interesting articles like these. With that said, Namaste!

Update: Advanced use case of Brython –

Python on Frontend: ML Models Web Interface With Brython

Some links:

GitHub Action That Automates Portfolio Generation

Is Family Group That Bad? Results Will Shock You

Kaustubh Gupta – Machine Learning Writer – upGrad | LinkedIn


Related Articles