PROGRAMMING TUTORIAL

Sick of Using Javascript for the Web? Use Browser Python Instead

My experience building a Snake game with Brython

Yakko Majuri
Jul 5 · 7 min read
Image for post
Image for post
Shoutout to David Clode

“Wait, what?” is how I expect most people to react to the title of this article.

What do you mean by “Just Use Browser Python”?

Everybody knows browsers can only run JavaScript.

Well, below is a screenshot of my personal website’s source code, see if you notice something different:

Image for post
Image for post

Yes, it’s Python!

And now, let’s talk about how that works, how well it works, and what other alternatives to browser JS exist out there.

Introducing Brython

Brython is a Python3 implementation written in JavaScript, which allows you to write Python code for the web.

Effectively, it’s a JavaScript library that converts your Python code into equivalent JS and evaluates it at runtime.

And since writing Python for the browser sounds pretty cool, I decided to give it a shot.

Building Snake with Brython

Here’s the link to my website where you can try out both JavaScript and Brython Snake. And here’s the link to all the code on GitHub.

In order to give Brython a test run, I decided to build the classic snake game.

As I’m not an HTML Canvas specialist nor a game developer, I decided to use this JavaScript implementation as my starting point. I’ve built my own canvas snake game before, but this is just much neater and more compact.

Oh yeah, and the guy built that in less than 5 minutes. Props to Chris DeLeon, that’s extra impressive.

So, on top of Chris’ implementation, I added a score and high score functionality, a little bit of a better interface, a pause button, and an instructions button. Then, I ported it to Brython.

Actually, I also modified his code to something that runs in JS strict mode, since he was using things like implicit globals, which I don’t think are representative of what most JavaScript looks like (not criticizing him— he was speed coding), and I wanted to get a good comparison of the Brython vs JS code.

The JavaScript ended up like this, and I won’t post the snippet here because the goal is to focus on Brython.

While most of the Brython code was a “direct translation” of the JS, some parts, like the score functionality, I built directly in Brython and then implemented in JS, to see how it felt.

The final result is this:

So, based on that snippet, let’s break down some of the key concepts about Brython:

No installation is required for Brython. Just import the script inside <head> :

In order for Brython to convert and evaluate the Python code as if it were normal JS, we need to call brython right when the document’s body loads, like so:

This will search for script tags of type text/python and evaluate the code inside.

By default, JavaScript gives you access to things like the document and window objects, which are essential in any JS project. As such, Brython must have a way to incorporate these as well.

To solve this, the creators of Brython could simply have allowed developers to immediately access document and window by default in their Python code, but that would cause Python debuggers to scream undefined variable all the time and would be worse for performance.

Thus, to make use of these Web APIs, we have to import them just like we would do with any Python module:

Now, you don’t actually have to pip install these. After all, we’re writing this into our HTML! Just include the import statements and you’re good — Brython will know what to do.

To see how well this works, I made a point out of trying a few different methods from the Web APIs, such as alert , setInterval , addEventListener , etc. Everything worked as expected.

In Snake, once the snake eats the apple, we need to generate a new apple at a random location.

However, when I started off with Brython, I didn’t know I could use Python’s random module (you can!). So how could I generate a random number (without building my own library)?

Well, turns out we actually can access more of JavaScript than I thought. Check this out:

With the javascript module, if there’s an object I could access with JS, I can access it with Brython.

If I import a JavaScript library (jQuery, Bootstrap), for example, and want to use its methods — I can do so with from javascript import <library> . And, naturally, I can also make use of built-in JS objects the same way, such as Date or String .

In Python, if I want to unpack a list, I can do list2 = [*list1] . Also, if I want to set a variable’s value based on a condition, I use foo = 10 if condition else 20 .

These do have JavaScript equivalents: the spread operator( [...arr] ) and the ternary operator ( let foo = condition ? 10 : 20 ).

But does Brython support them?

I tried them out and it worked just fine. You’ll see that Python list unpacking and conditional assignment are included in my final source code.

Honestly, I thought debugging Brython was going to be horrible.

However, it’s actually not that bad.

Granted, what I built is a small project which isn’t very complicated, but the errors thrown by Brython were mostly accurate and rather descriptive.

That is true with regards to syntax issues, at least. Importing Python modules is a different ball game.

Image for post
Image for post
Image for post
Image for post
JavaScript Snake (Left) and Brython Snake (Right)

As expected, evaluating Brython code at runtime is slower than JavaScript. In my case, it was about 1.7x slower.

For more complex projects, I suspect Brython will be multiple times slower than pure JS.

However, you could transpile your Brython code beforehand and only include the JavaScript on the webpage, which should perform better.

I did try to use the Brython Editor to convert my Brython code into JS and run the actual JS on the webpage, but that was throwing so many errors that I decided to put it aside for now. I didn’t put much effort into it though.

Final Thoughts on Brython

Honestly, I was quite impressed with Brython. Here are some pros and cons from my own experience with the language:

  • I managed to build a snake game without too much hassle and a surprisingly positive debugging experience
  • In my simple project, Brython interacted seamlessly with native JavaScript objects accessible on the page
  • I appreciate the fact that my code looks cleaner in Python, and the fact that I can make use of helpful Python syntax to write code for the browser
  • For my Snake game, while Brython is slower to load up than pure JavaScript, the user can’t even notice the difference
  • Seeing Python in my website’s source code made me happy
  • Runtime Brython is significantly slower that pure JS
  • The developer should actually know some JavaScript to have a good experience using Brython
  • You will inevitably run into more errors
  • The Brython Docs and website are not the nicest to navigate and learn from
  • Brython lacks a strong ecosystem and development tools

Overall, having finished my first project with Brython, I can confidently say I will try it again at some point.

However, I believe that, as it currently stands, Brython is more suitable for JavaScript devs who know Python and have become sick of JavaScript, rather than Python developers who want to do web development without having to learn JavaScript.

To work well with Brython, I think you need to understand some JavaScript. And if you decide to put in the time to learn enough JavaScript to write Brython with ease, then you might as well just use JavaScript.

Other Alternatives to Browser JS

Image for post
Image for post

The reason I picked Brython was that out of the Python to JS alternatives that I first became aware of, it was the only one that still had some active development on GitHub. Most Python → JavaScript transpilers I came accross have seen no commits at all in the past few years.

However, there are other alternatives out there.

Pyodide seems like an interesting one, for example. It compiles Python (along with its scientific libraries) to WebAssembly, which allows it to run in the browser.

WebAssembly, as the name suggests, is an assembly language for the web. Just as Assembly in our computers can work as an intermediary between high-level languages and machine code, WebAssembly can allow the same thing to happen on the web.

Thus, one can write a compiler for Python, or any other language, to WebAssembly, which would allow it to run in the browser.

It is an ambitious and promising project which will likely lead to us seeing more and more web development without JavaScript.

However, it is still in its infancy (~3 years old), so it will probably take some time before we actually see JavaScript being substituted by other languages on a regular basis.

And while that doesn’t happen, you’ll have to resort to tools like Brython if you really cannot deal with JavaScript.

But honestly, that’s not a bad start!

Author’s Note ✍️

Thanks for reading! If you believe this article was useful, feel free to support me with some claps 👏👏.

This article is part of my series of Programming Tutorials. Here are some of the other tutorials on the list:

The Startup

Medium's largest active publication, followed by +721K people. Follow to join our community.

Yakko Majuri

Written by

Writing code and writing about writing code. Exploring the underrated topics in Software Development. I speak for myself only.

The Startup

Medium's largest active publication, followed by +721K people. Follow to join our community.

Yakko Majuri

Written by

Writing code and writing about writing code. Exploring the underrated topics in Software Development. I speak for myself only.

The Startup

Medium's largest active publication, followed by +721K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store