Browsing the Python Browser: Brython!

Browsing the Python Browser: Brython!

“Simplicity is the soul of efficiency.” – Austin Freeman

Brython official website:- Brython

Although we all know that Python is a great server-side language, it can also be utilised as a client-side language. Honestly, I prefer Python over JavaScript. So, whether you're a web developer who favours Python over JavaScript, Brython, a Python version that executes in the browser, could be an inspired choice.

image.png

Introduction continues...

The standard language for front-end web development is JavaScript. Today's Internet browsers all offer features with robust JavaScript engines, which inherently encourages programmers to develop front-end web apps in JavaScript. Browser's Python is alluded to as Brython.

image.png

Some features:-

  • Brython is a new way of doing JavaScript.

  • Brython is easy to understand and use.

  • You easily interact with DOM (Document Object Model) and change DOM with the help of Python.

  • It is a browser-based adaptation of Python 3.

  • It is claimed that Brython's purpose is to supersede JavaScript as a browser scripting language.

  • Most popular browsers, particularly those for mobile devices, support Brython.

Discovering several Brython installation methods!

1. npm installation

image.png

  • The JavaScript Brython modules will just become accessible in your program just like every other JavaScript modules after activation with npm.

  • The Brython interpreter and libraries could then be checked, bundled, and deployed employing your desired JavaScript tools.

  • Unless you already have JavaScript libraries installed via npm, this setup is great.

When can we use the npm method?

thinking-icegif-1.gif

It's JavaScript that you're used to. Notably, Node.js and npm, two JavaScript development tools, are tools you are familiar with. There could be specific adjustments essential for your project that you intend to keep in your source code repository or in a local environment. The packages you'll publish should be more in your control. The deployment must start happening in a secure setting without an Internet connection.

Installing Brython via npm:-

Make a default package on your computer assuming that npm is already pre configured there, using npm init --yes in an empty directory to generate a json file:

Shell:

$ npm init --yes

Use the following command to incorporate Brython into your project:

$ npm install brython

Users can skip the alerts and see that Brython has been included in your project. Open package.json and ensure that the dependencies field corresponds to an object that has a brython component to confirm:

 {
  "name": "npm_install",
  "version": "7.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "brython": "^3.10.6"
  }
}

Users may build the subsequent index.html and go to it employing your browser, just like the earlier examples. This sample doesn't involve a web server since the browser can locally fetch the JavaScript file node modules/brython/brython.js:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script
    type="text/javascript"
    src="node_modules/brython/brython.js" defer>
  </script>
</head>
<body onload="brython()">
<script type="text/python">
from browser import document
document <= "Hello"
</script>
</body>
</html>

2. CDN installation

Using CDN's assistance from Brython (Contact delivery network). On the main Brython website, CDN URLs can be copied. The URLs should then be inserted into our HTML page.

<script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"> </script> <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"> </script>

3. No installation!

Utilizing the online distribution made accessible by jsDelivr is the simplest route to get going without installing additional anything.

<script type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/brython@3.10.6/brython.min.js">
</script>
<script type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/brython@3.10.6/brython_stdlib.js">
</script>

If you want the most recent 3.10.x version, use jsDelivr, which supports version ranges.

<script type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/brython@3.10/brython.min.js">
</script>
<script type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/brython@3.10/brython_stdlib.js">
</script>
<script type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/brython@3/brython.min.js">
</script>
<script type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/brython@3/brython_stdlib.js">
</script>

You can execute these scripts in their place to obtain the most recent development version:

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

4. PyPI Installation

Users don't really have to install anything at all in your local environment up until this point. Rather than, you've outlined where the browser may locate the Brython package in the HTML code.

image.png

The Brython JavaScript file is downloaded when the browser displays the page from the proper location, that's either a CDN or GitHub. Brython cli, a command-line tool which you may use to automate tasks like creating a detailed template or packaging and bundling modules to improve installation of a Brython project, is deployed once you install Brython from PyPI.

User must build a Python virtual environment for this project prior installing Brython.

  • Linux or macOS:
$ python3 -m venv .venv --prompt brython
$ source .venv/bin/activate
  • Windows:
    python3 -m venv .venv --prompt brython
    
    .venv\Scripts\activate
    
    User recently updated pip with the most recent edition and established an unique Python environment for your project. Installing Brython and creating a default project are the basic factors. On Linux, macOS, and Windows, the following commands are equivalent:
(brython) $ python -m pip install brython
(brython) $ mkdir web
(brython) $ cd web
(brython) $ brython-cli --install

The default project skeleton was constructed by invoking the brython-cli that has been copied onto your virtual environment after the installation of Brython, which you installed from PyPI, and establishing the empty folder named web.

User may run a local Python web server that use the following instructions to test this recently developed web project:

(brython) runs a web server on port 8000 when you type python -m http.server. Index.html is the anticipated default page. To view a page containing the text Hello, point your web browser to localhost:8000.

image.png

Online Testing methods

1. Using Console

2. Using Editor

Brython validation and bug fixing

For unit verifying Brython code, there are still no accessible libraries at the moment. More techniques for testing and debugging Python programmes in the browser will become ready as Brython develops. For a standalone Python module for use outside of the browser, it is feasible to profit from the Python unit test framework.

Unit tests for JavaScript

Numerous testing frameworks with a JavaScript focus, such as Mocha, Jasmine, and QUnit, function well throughout the whole JavaScript ecosystem. Nevertheless, they may not have been the best choice for unit testing Python code that is still being run in the browser. One choice necessitates exposing the Brython functions to JavaScript universally, which is not recommended.

Selenium

A toolkit for managing browsers is called Selenium. Since it employs the WebDriver notion to function as a user interacting with the browser, it is independent of the browser's language, be it JavaScript, Elm, Wasm, or Brython. For complete info on this framework, see Modern Web Automation With Python and Selenium.

So how would you utilise Brython?

Brython may be easily integrated into your project. Follow the given steps:-

  • Initially, download Brython with the aid of CDN and npm.

  • Secondly, Call the function brython() on page load, like <body onload="brython()">.

  • Write down the Python code inside script tags. <script type="text/python">.

<body onload="brython()" >
   <script type="text/python"> # write python code here </script>
</body>

To show the straightforward usage of Brython, I will create an alert in the browser

Try this example to get a better understanding of Brython!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython.min.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.0/brython_stdlib.min.js">
    </script>
</head>
<body  onload="brython()" >
    <script type="text/python">

        from browser import document, alert

        def hello(ev):
            alert(" Open Alert")

        document["button-click"].bind("click", hello)

    </script>    
    <button id="button-click"> Open Alert </button>
</body>
</html>

Investigating Alternatives to Brython

PyScript was released at PyCon US 2022 as a new feature. The First Glance at PyScript: Python in the Web Browser is a primer to this new technology.

image.png

Every approach takes a unique stance on the issue. With offering access to the same online API and DOM manipulation as JavaScript, although with the attraction of the Python syntax and idioms, Brython aims to be a substitute for JavaScript. In contradiction to numerous options that can have different objectives, it is offered as a modest download.

Let us look at some alternatives of Brython one by one:-

1. PyPy.js

image.png

In order to run in a browser, PyPy.js employs the PyPy Python interpreter that has been converted to JavaScript with emscripten. Emscripten uses PyPy.js to compile it to JavaScript. By using emscripten and Wasm in particular to convert Python C extensions like NumPy to WebAssembly, Pyodide goes a step further.

2. Skulpt

image.png

Python code is converted to JavaScript in the browser via Skulpt. With contrast to Brython, where compilation occurs as the page loads, in HTML the compilation happens after the page has loaded. Skulpt is extremely similar to Brython in its applications even though it lacks built-in capabilities to alter the DOM. This involves teaching applications and full-fledged Python programmes, as seen by Anvil.

3. Transcrypt

image.png

A command-line utility for converting Python code to JavaScript code is included with Transcrypt. It's said that the compilation is done beforehand (AOT). The browser may then be loaded with the generated code. Transcrypt only takes up roughly 100KB of space. It supports DOM manipulation and is quick.

Conclusion

One of the finest applications of Brython is as a teaching and learning tool, in addition to accessing functionality often reserved for JavaScript. To begin investigating the numerous applications of Brython right now, you may visit a Python editor and terminal that run in your browser.

Thank you for reading my article. I hope you must have understood Brython. Happy Hunting!

639940fe7080ecda28c24f3268016dbc.gif

Did you find this article valuable?

Support Ninad Ingale by becoming a sponsor. Any amount is appreciated!