Hi, my name is Kamibayashi, ryo_grid from Ory Lab (http://orylab.com).

Well, everyone! Do you write JavaScript! I also write it. However, I've been writing code in C, Java, Ruby, Python, etc. for a long time, so I'm not familiar with the JavaScript language specification.

So, when I searched for an option to use a language other than JS on the Web front end, I found a Python processing system implemented in the browser JS called Brython (= works in the browser), so I tried it. It was.

Brython - A Python 3 implementation for client-side web programming

Try it anyway

I wrote while wandering the sea of the net. The theme is BMI calculation, which is a common task for programming beginners.

HTML seems to be able to be written like this.

`index.html`


<!DOCTYPE html>
<html>
    <head>
        <title>Calculate BMI with Brython</title>
        <meta charset="utf-8">
        <script src="static/brython.js"></script>
        <script src="static/brython_stdlib.js"></script>	
    </head>
    <body onload="brython()">
　　　　 <script type="text/python" src="static/bmi.py"></script>
        <h1>Calculate BMI with Brython</h1>

        <p>height(Meter)
        <input type="text" id="height" />
        <p>body weight(kilogram)
        <input type="text" id="weight" />
        <br><button id="execute">It's a calculation!</button>

        <div id="result"></div>
    </body>
</html>

Load brython.js corresponding to the processing system and brython_stdlib.js which will correspond to the Python standard library in the head section. Then, let's call the brython () method in onload of the body section. After that, put an input form and a button, and put a div tag with id "result" to display the result by DOM operation.

Write the Python code in a separate file and load it with the type = "text / python" script tag. In addition, although it is a separate file here, it seems that you can also write Python code like writing JS solidly in HTML.

The Python file loaded above looks like this: Grammatically it is Python as it is.

`bmi.py`


#!/usr/bin/env python
# -*- coding: utf-8 -*-

from browser import document

def calc_bmi():
    weight = float(document["weight"].value)
    height = float(document["height"].value)
    
    bmi = str(weight/(height*height))
    rslt = document["result"]
    rslt.text = bmi
    
execute_btn = document["execute"]
execute_btn.bind("click", calc_bmi)

The process we are doing is storing the DOM of the button with the id "execute" in the execute_btn variable, and registering the calc_bmi function as a process to fire at the "click" event via it. It seems that the DOM can be obtained with the document module of the browser package.

The calc_bmi function gets the input value from the form, calculates the BMI and sets the result at the id = "result" div tag.

And if you move this,

I feel like this. It worked!

I've put a set of this code at https://github.com/ryogrid/LearnBrython. I also included app.py, which provides the web server function, so if you have a python environment, you can run it immediately with the following.

git clone https://github.com/ryogrid/LearnBrython.git cd LearnBrython pip install flask python app.py => Let's access http://localhost:5000/

It's not like Python, right?

The code I wrote above isn't very Python-like, but officially it seems that all Python syntax is supported.

https://brython.info/static_doc/en/syntax.html

It seems that the standard library is also supported in a fair amount. It's amazing.

https://brython.info/static_doc/en/stdlib.html

Isn't it a performance?

I hope you take a look at the official Gallery,

Gallery

It seems that the heavy processing is working properly. So, I think it's okay if it's not an application that really cares about performance.

Also, it is mentioned at the beginning of the FAQ, so if you want to know more details, I think you should refer to it.

https://brython.info/static_doc/en/faq.html

What's the implementation

Looking at the implementation of Brython on github, it seems that it is not an interpreter, but JIT compilation (translation) to JS before running. Power technique!

https://github.com/brython-dev/brython/blob/master/www/src/py2js.js

If you compile!

Recently, asm.js and WebAssembly, which can be called assemblers for browsers, have appeared. By generating executable code with these, it seems that the performance is close to that when compiling to native code.

Detailed explanation of low-level language asm.js and WebAssembly

Brython may eventually support such things. Keep an eye on it in the future.

in conclusion

I tried Python (Brython) as a web front-end implementation language instead of JavaScript. I also dig a little deeper into Brython.

It's hard to judge whether it can be used in commercial products, but why not give it a try as a hobby professional? Let's enjoy!

PS: I didn't mention it this time, but there seems to be a Python implementation in the browser JS other than Brython, so if you are interested, please refer to the following.

http://stromberg.dnsalias.org/~strombrg/pybrowser/python-browser.html

Let's throw away JavaScript and write a web front end in Python!