Open In App

Introduction to Brython

Last Updated : 19 Aug, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

We all know that Python serves excellent as a server side language, it can be also used as a client-side language. We can use Brython on client-side instead of Javascript. 

Brython stands for Browser’s Python. It is an implementation of Python3 running in the browser. It is believed that Brython’s goal is to replace javascript as a scripting language for browser. Most of all modern browsers support Brython, even smartphones also support Brython. 

Main features : Brython supports most of the syntax of Python3, including comprehensions, generators, metaclasses, imports, etc. and many modules of the CPython distribution.

It includes libraries to interact with DOM elements and events, and with existing Javascript libraries such as jQuery, 3D, Highcharts, Raphael etc. It supports lastest specs of HTML5/CSS3, and can use CSS Frameworks like Bootstrap3, LESS, SASS etc.

Installation :

You can install Brython  locally by running the following pip command in the terminal :

pip install brython

You can also use Brython without having to install anything, just by including the Brython scripts from a CDN :

To use Brython, all there is to do is:

  1. Load the script brython.js.
  2. Run the function brython() on page load, like <body onload=brython()>.
  3. Write Python code inside tags <script type=”text/python”> or linking it.

Example 1 : “Hello World !” using Brython”

HTML




<!Doctype html>
<html>
<head>
    <meta charset = "utf-8">
    <script type = "text/javascript"
    </script>
</head>
  
<body onload = "brython()">
<script type = "text/python">
from browser import document
  
document <= "Hello World!"
</script>
</body>
</html>


Output :

Example 2 : Create an HTML table using Brython

To create a table, we use the HTML tags : TABLE (the table), TR (a table row), TH (a header cell) and TD (a cell). The table is made of rows, each row is made of cells, the first row is generally made of “header cells” describing the value in the matching column

HTML




<!Doctype html>
<html>
  
<head>
    <meta charset = "utf-8">
    <script type = "text/javascript"
    </script>
</head>
  
<body onload="brython()">
  
    <p id='zone'> </p>
    <script type="text/python">
    from browser import document
    from browser.html import TABLE, TR, TH, TD
    table = TABLE()
  
    # create a row
    row = TR() 
  
    # add header cells
    row <= TH("Country")
    row <= TH("Capital city")
  
    # add the row to the table
    table <= row 
      
    # add a row 1
    row = TR()
    row <= TD("United States") + TD("Washington")
    table <= row
       
    # add a row 2
    row = TR()
    row <= TD("India") + TD("Delhi")
    table <= row
  
      
    # erase initial content
    document['zone'].clear()
      
    # insert table in the element
    document['zone'] <= table
    </script>
</body>
</html>


Output :  

Example 3 : We can build a table from a list of lists. In this example, we will only show the Python script, the surrounding HTML code will remain the same as in the previous example

HTML




<script type="text/python">
    from browser import document
    from browser.html import TABLE, TR, TH, TD
      
    lines = [ ['Morrissey', 'vocals'],
        ['Kijibasu', 'guitar'],
        ['Rajpal', 'the drums'],
        ['Aayush', 'the bass guitar']
        ]
    t = TABLE()
    for line in lines:
        t <= TR(TD(line[0])+TD(line[1]))
    document['zone'].text = ''
    document['zone']<= t
</script>



Output :

Future of Brython : 

Many Python developers are working on it to make it better, but it may be difficult that it can replace Javascript. There is no framework available in Brython. It may take many years for Brython to be used on client-side. There is a lack of resources to learn Brython, so people are choosing Javascript over Brython. But using Brython would be a great advantage for those developer who want to use one language for server side and client side. 



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads