Tired of JavaScript – use browser Python

My experience developing the Snake game in Brython

image

“Wait what?” – I think most readers will react to the headline in that way.

In the sense of “just use Python in a browser”?

Everyone knows that only JavaScript works in browsers.

Well, the above is a screenshot with the source code of my personal site. Take a look, maybe you will see something new for yourself.

Yes, this is Python!

Now, let’s talk about how and how well this works, and also discuss a number of other JavaScript alternatives.

Introducing Brython

Brython Is a JavaScript3 implementation of Python3 that allows you to write Python code for the web.

Essentially, it is a JavaScript library that converts your Python code into equivalent JS and executes it in runtime.

Since writing browser code in Python sounds cool, I decided to give it a try.

Development of “Snake” on Brython

Here link to my sitewhere you can try Snake versions in JavaScript and Brython. But withGitHub source code link.

In order to try out Brython, I decided to write the classic Snake.

Since I’m not a Canvas HTML expert or game developer, I decided to use this JavaScript implementation as a starting point. Once I already created my “Snake” based on Canvas, but this implementation is more neat and compact.

And also author wrote it in less than 5 minutes. We must pay tribute to Chris Deleon, it is very impressive.

So, I added to Chris’ implementation scoring and saving the best result, as well as slightly improved the interface (added a pause button and a button with instructions). Then I ported the game to Brython.

I also modified his code so that it works in mode strict, since Chris’s implementation uses things like implicit global variables, which, in my opinion, do not reflect how most of the code in JS looks like (I do not criticize the author – he programmed for a while). I wanted to get a good comparison of Brython and JS code.

JavaScript turned out to be that way, and I will not post this code here, so our goal is to focus on Brython.

Although most of the Brython code was a “literal translation” with JS, some parts (for example, scoring functionality) were written directly in Brython and then implemented in JS to look at the differences.

The final result is as follows:





    
    
    Brython snake
    
    
    




    

Snake built with Python!


Score: 0


High Score: 0

So, based on this snippet, let’s look at the basic concepts of Brython

Brython.js connection

No installation is required to use Brython. Just import the script inside head :

Launch brython

In order for Brython to translate and execute Python code as if it were JS code, we need to call Brython just when the document body loads. For example, like this:

This tag will search for tags. script with type "text/python" and run their code.

Web API

JavaScript by default gives access to objects like document and windowrequired in any JS project. Accordingly, Brython should also be able to work with them.

To solve this problem, the creators of Brython could simply give developers the ability to access these objects from Python code, but this would lead to debugger cries about undefined variable and reduced productivity.

Thus, to use these APIs, we must import them in the same way as we import any other module in Python:

from browser import document, html, window

And you do not need to execute the command pip install. In the end, you embed it all in HTML! Just add the required imports, Brython will deal with the rest.

To see how well this works, I tried using several different methods from the Web API: alert, setInterval, addEventListener etc. They all worked as they should.

Built-in JavaScript Objects and Methods

In Snake, as soon as the snake eats an apple, we need to generate a new apple in a random place.

However, I cannot use the random module from the Python * library. So how can I generate a random number (without writing my own library)?

It turned out that Brython had more JavaScript support than I thought. See:

from javascript import Math
random_num = Math.floor(Math.random()*10)

Thanks to the module javascriptif there is an object that I can access using JS, then I can access it using Brython.

If I import a JavaScript library (jQuery, Bootstrap) and want to use its methods, I can do this with from javascript import . And, of course, I can also use built-in JS objects, for example, Date or String.

* Apparently, Brython comes with a number of standard Python libraries implemented directly in JavaScript, and if some module does not have a JS version, you can still import it. Brython will receive a pure Python version and the imported module code will work along with the Brython code. However, the random module did not work for me - but I can understand why.

Specific designs

In Python, if I want to unzip a list, I can write list2 = [*list1]. Also, if I want to assign values ​​to a variable based on some condition, I can write foo = 10 if condition else 20.

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

But does Brython support them?

I tried them and they worked great. You can see that list unpacking from Python and conditional assignment are used in my code.

Debugging

Honestly, I thought that debugging in Brython would be awful.

In fact, everything is not so bad.

Of course, I wrote a very small and not very complicated project, but the errors thrown by Brython were mostly accurate and quite understandable.

This is true, at least with regard to syntax errors. Importing modules from the Python library is a completely different story.

Performance

Javascript snake

Brython snake

As expected, Brython code is slower than JavaScript. In my case, it was about 1.7 times slower.

I suspect that in more complex projects, Brython will be several times slower than pure JS.

However, you can transpose your Brython code in advance and use only JavaScript on the page, which should work better.

I really tried to use Brython Editor to convert my Brython code to JS and run the resulting code on a web page, but because of the huge number of errors I have so far refused it. However, I did not put too much effort into this.

Final thoughts on Brython

Honestly, I was very impressed with Brython. Here are a few pros and cons of my own experience work with language:

pros

  • I managed to write "Snake" without unnecessary trouble, and the debugging experience was surprisingly positive.
  • In my simple project, Brython interacted seamlessly with native JavaScript objects available on the page.
  • I appreciate the fact that my code looks cleaner in Python, and I also like that I can use useful Python constructs to write browser code.
  • In the case of my game, although Brython loads slower than JavaScript, the user does not notice this difference.
  • I am pleased to see Python in the source code of my site.

Minuses

  • Brighton is significantly slower than pure JS.
  • To use Brython, a developer needs to have experience with JavaScript.
  • You will inevitably encounter a lot of mistakes.
  • Brython Documentation and his site there is room to grow in terms of ease of navigation and training opportunities
  • Brython lacks a strong ecosystem and development tools.

In general, having completed my first project on Brython, I can confidently say that someday I will try again.

However, I believe that at present, Brython is more suitable for JavaScript developers who are familiar with Python and tired of JS, rather than for Python developers who want to do web development without learning JavaScript.

I think that understanding JavaScript is necessary in order to work well with Brython. And if you decide to spend time learning JavaScript to make it easier to write in Brython, then you can just use JavaScript.

Other JS alternatives in browser

The reason I chose Brython was because of the majority of the transitions from Python to JS that I first learned about, it was the only one who has been actively developing on GitHub. Most of the Python / JavaScript transpilers I have looked at have not had commits for several years.

However, there are other alternatives.

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

WebAssembly, as the name implies, is an assembler for the web. Just as the assembler on our computers can act as an intermediary between high-level languages ​​and machine code, WebAssembly does the same on the web.

Thus, you can write a compiler that will translate Python (or any other language) into WebAssembly, which will allow it to work in the browser.

This is an ambitious and promising project, which is likely to lead to the fact that we will see more and more web development without JavaScript.

However, it is still in its infancy (~ 3 years), so it will probably take some time before we see that JavaScript is regularly replaced with other languages.

And while we're waiting for this, you'll have to use tools like Brython if you really can't deal with JavaScript.

But honestly, this is a good start!

Learn the details of how to get a sought-after profession from scratch or Level Up in skills and salary by completing SkillFactory paid online courses:


Read more

  • Trends in Data Scenсe 2020
  • Data Science is dead. Long live Business Science
  • The coolest Data Scientist does not waste time on statistics
  • How to Become a Data Scientist Without Online Courses
  • 450 free courses from the Ivy League
  • Data Science for the Humanities: What is Data
  • Steroid Data Scenario: Introducing Decision Intelligence

Similar Posts

Leave a Reply Cancel reply