Categories:Viewed: 64 - Published at: 7 months ago

Introduction

When developing web applications - we commonly use several technologies, and languages. A back-end can easily be built in Java (Spring Boot), Python (Django or Flask), or JavaScript (Node.js), though the front-end is more commonly done in JavaScript (React, Angular, etc). Sometimes, we even take the hybrid approach of having server-side rendered pages, with final touchups done in front-end frameworks such as React. Through the years, given its prevalence on the web - the JavaScript community expanded the original functionality to enable JavaScript-powered back-ends, including front-ends. The most common way to code web applications in JavaScript is to use the MEAN stack. A MongoDB database, Node.js with Express.js for the back-end, and Angular (or more recently, React) for the front-end. But what if you really prefer to develop your apps using Python? While being strictly focused on one programming language isn't advisable - languages are tools, and being fixated on one tool makes you less flexible - there is still space for single-language applications. Brython might be the solution! It's a JavaScript library that enables you to run Python code inside your browser.

You probably guessed, Brython stands for Browser Python

As its name suggests, Brython's main goal is to replace JavaScript and push Python as the primary scripting language for web browsers, for your application:

        <script src="/brython.js"></script>


        <script type="text/python">
            import browser
            browser.document <= "Hello world!"
         </script>

The <script> which usually doesn't support the text/python type can interpret the Python code we've wrote. Here, we've printed a Hello World message to the browser.document, which is analogous to JavaScript's document. In this Introductory Guide to Brython - we'll take a look at how to install Brython, how to initialize a Brython project, how to style pages, as well as compare it to some alternatives.

How to Install Brython

Taking Advantage of Content Delivery Networks

Probably the most convenient way of installing Brython is, in fact, not to install it at all. If you don't need to install it locally to your PC, and only need it to load on a static web page to add some dynamic functionality to the page, you should consider simply importing an external resource. The idea is to load the brython.js library in the <head> section of the HTML page. This way, the client will download the library at the same time as the HTML page loads on their PC. To achieve this behavior we will load our library from some of the CDNs (Content Delivery Networks) that are hosting the latest stable version of Brython online.

A Content Delivery Network is, in basic terms, a group of distributed servers that are hosting some data (code, video content, images...). These types of networks are highly reliable and have almost no downtime. That makes them ideal for hosting code libraries.

There are several CDNs available to choose from, though, three popular ones are:

<script src="https://cdn.jsdelivr.net/npm/[email&nbsp;protected]/brython.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email&nbsp;protected]/brython_stdlib.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.1/brython.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.1/brython_stdlib.min.js"></script>



<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>

Installing Brython via Pip

If you want more flexibility with Brython, you can install it locally:

$ pip3 install brython

pip will download and install the package on your local machine without breaking a sweat. Let's verify that Brython has been successfully installed:

$ pip show brython 

This prints out the version, as well as some basic information on the Brython package:

Name: brython
Version: 3.9.2
Summary: Brython is an implementation of Python 3 running in the browser
Home-page: http://brython.info
Author: Pierre Quentel
Author-email: [email&nbsp;protected]
License: BSD

How to Initialize a Brython Project

After installing Brython, the obvious next step is to create a simple project to test its capabilities. To create the project, create a new folder and move into it:

$ mkdir brython-project
$ cd brython-project

Now you can run the following command to initialize a Brython project:

$ brython-cli --install

This creates and initializes a Brython project, including the starting project directory and file hierarchy:

brython-project
    | brython.js
    | brython_stdlib.js
    | demo.html
    | index.html
    | README.md
    | unicode.txt

First, let's explain what all these files are for:

  • brython.js - The Brython core engine, it includes the most commonly used modules such as browser, browser.html, javascript... This file is included in the HTML page using the Reference: stackabuse.com