Brython, Python but on your Browser

in STEMGeeks4 years ago (edited)

sketch15746947535507113640783183722075.png

To make a long story short, I was disallowed to use Python (and Java) at work.

But that's only limited to major OS, right?

So, I searched for Python for browser and found Brython and it looked promising, I immediately used it.

Source

Brython (Browser Python) is an implementation of Python 3 running in the browser

GitHub/Brython

Brython is under a BSD-3-Clause License and as of the time of writing, ot has 3.6k stars and 334 forks on GitHub.

Alternative to JavaScript

It is used as an alternative to JavaScript on front-end web-development, and although I have a different reason, it still falls to using it as an alternative to JS.

Why? Because my exisiting codes are in Python and re-writing and refactoring the code from zero to JavaScript will cost me time.

Yestderday, I jump into writing my first Brython project and skimmed through its demos and tutorials.

View all Brython>Demos
View all Brython>Tutorials

Setup

Note: Full setup found on GitHub/Brython>ReadMe.md

I already have an existing, working code, but I still need to check if it works on a browser, specifically Google Chrome.

Because, I'm not allowed to use an IDE, why not use the handy Notepad, eh?

1. Just ready the standard HTML5 elements.

Other HTML features such as CSS still applies, everything HTML is still the same, only the things inside the Python script will be different than the usual web-development.

2. Set the Brython CDN links inside the head element, I prefer to use the development version:

<script type="text/javascript" src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js"></script>
<script type="text/javascript" src="https://raw.githack.com/brython-dev/brython/master/www/src/brython_stdlib.js"></script>

# Of course, skip adding `brython_stdlib.js` if you will not use its standard libraries.

3. Run Brython on page load:

<body onload="brython()"></body>

4. Inside the body, add a script tag with:

<script type="text/python"></script>

5. That's it! Put your Python codes in the script element. Or, call a separate Python file:

<script type="text/python" src="script.py"></script>

Imports

Brython supports the syntax of Python 3, including comprehensions, generators, metaclasses, imports, etc. and many modules of the CPython distribution.

GitHub/Brython>Main features

You may check the standard library of Brython and what to do to use a currently unsupported library at Brython/stdlib.

Take note, there are limitations and you may consider it a stripped-down or lite version of Python/CPython, even some functions behaves like a wrapper instead of the real deal. (Correct me if I'm wrong.)

Basics

There's an in-browser interpreter, but I'll focus on the web-ui, DOM manipulation.

Required: For DOM maniopulation, inside the script tag for Python, do import:

from browser import document

Call the element using its ID

  • document["popup"]
  • document["label"]
  • document["username"]

Get / Set

content = document["title"].html
document["label"].text = "Input your username"
document["username"].value = "@oniemaniego"

Create HTML elements

from broswer import html


html.DIV()
html.SPAN("This is a text.")

Setting attributes

from browser import document, html


label = html.DIV(id="lbl")
label.style = dict(color="#fff", fonSize="12px")
label.style.backgroundColor = "#202020"
label.classList.add("custom-lbl")
# label.classList.remove("error-lbl")

Add new Element

from browser import html


box = html.DIV(id="box")

label = html.SPAN("This is a text.")
label.classList.add("custom-lbl")
label.classList.remove("error-lbl")

Appending Elements

from browser import document, html

# note, elemwnt must exist before accessing
main = document.getElementById("main-content")
box = html.DIV(id="box")
main.appendChild(box)

# or Brython-style
menu_item = html.DIV(id="item")
document["main-content"] <= menu_item
document.["item"] <= html.SPAN("This is a text.")

Takaways

Brython is a good option if you can't/won't download the actual Python/IDEs on your PC. I find it easy to learn, especially that I already have a background in web development (PHP/Python-Flask,HTML/JS/CSS) and in Python.

JavaScript is the standard for a reason, it is widely used and has other technologies/frameworks/software built on top of it, such as JQuery, Type/Coffee, NodeJS, and many others.

Brython is a good alternative to JS, although I will still have a lot to learn about Brython before recommending it in production, you may check it yourself and decide.

It has also an extensive documentation and learning resources, checkout Brython website for more information.

If find, CORS (Cross-origin resource sharing) a big roadblock to Brython, since most of my automations access multiple IP addresses. Though it uses "urllib.request" module, but major browsers block certain HTTP requests over cross-origin resources (had one that returns pure text that worked, but others that return XML show errors). A workaround might work, but isn't the optimal solution in the long run.

Do tell me if you find something inaccurate statements or wrong/mistyped code snippets so I can correct it.

How about you, what do you think of Brython?


Curious about Crypto?
Buy and Sell on Coinbase
Get Started


About Me

@oniemaniego is a test engineer, but outside work, he experiments in the kitchen, writes poetry and fiction, paints his heart out, or toils under the hot sun.

Onie Maniego was born in Leyte, PH. He grew up in a rural area with a close-knit community and a simple lifestyle, he is often visiting his father's orchards during summer and weekends, which has a great impact on his works.

Don't forget to vote, comment, and follow me.


Not yet on Hive? Earn while blogging.
Sign Up

Sort:  

Thanks for sharing insight about brython browser and its capability to run python. We are looking for people like you in our community.

Your post has been submitted to be curated with @gitplait community account because this is the kind of publications we like to see in our community.

Join our Community on Hive

You're welcome!

that's interesting! Will try it !

Tell what you think afterward 😁