Python in Front End Web Development

On Saturday, I was scrolling through Twitter and saw this tweet:

Apparently, the Python Conference was being held and the CEO of Anaconda, Peter Wang, announced Pyscript.

Of course I became very excited. Python in HTML?! The possibilities!

I quickly headed to pyscript.net/, then to the PyScript project hosted on Github and immersed myself in everything. There are a lot of cool features and it's still a work in progress but I'll share what I found.

What is PyScript?

PyScript is a Python framework that allows users create Python applications in the browser using a mix of Python with standard HTML.

How to use Pyscript

PyScript demonstration

To see a demonstration of PyScript: -1. Go to pyscript.net/ to download Pyscript. The file downloaded is a zip file so you have to extract the files from the zip file

If you don't have Node.js installed, install it
Navigate into the pyscriptjs folder in the terminal
If you don't have Rollup installed, install it. You can install it as a global resource

$ npm install --global rollup
Install all the dependencies needed to run the demo apps

$ npm install
Start the server on which the demo apps will use

$ npm run dev
If successful, you should see your localhost address

- Local: http://localhost:8080
When you click on the localhost address, you will be directed to a page that lists all the demo apps you can view. You can click on any of your choice to see how the app works.

Developing with PyScript

PyScript development environment only requires your code editor.

In your favourite editor, create a HTML file.

In the <head> section, include these two links:

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css"/>
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

This will enable you to use PyScript in the HTML file.

In the <body> section, you can start using PyScript components like the <py-script>

  <body>
      <py-script> print("Hello World") </py-script>
  </body>

View the file in Chrome or if you're using VScode, in its Live Server extension

Voila! You have written your first Python code in HTML! 😃

Note: For now, PyScript is supported only on Chrome.

Tags in PyScript

Currently, I only know of these three tags used in PyScript

<py-script>: this tag enables you write Python code which is executed in HTML. It can range from one line of code to multiple lines of code like in functions. Within the <py-script> module, you have access to the .write() method that allows you write into labelled elements in the HTML file

   <html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css"/>
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    </head>

    <body>
      <p>My number is <label id='guess'></label></p>
      <py-script>
  import random
  pyscript.write('guess', random.random())
      </py-script>
    </body>
   </html>

<py-repl>: this tag creates a code editor and enables users write code which can be run. Cool right? I know!
<py-env>: in the example files on Github, I saw this tag used in the <head> section. It is used to import Python packages and modules like bumpy, matplotlib etc

Cool features of PyScript

You can now write Python code in HTML
You can visualise data and visualisations can be interactive
You can include code editors in your web page
A Python ecosystem, sort of, has been created so you can import Python packages and modules to use in your web page

I'm sure I've covered most features.

Conclusion

PyScript can be used for a data scientist's portfolio site or for tutors that teach data science or machine learning.

PyScript is still a work in progress so more cool features are still on the way and I can't wait 😋. You can go to PyScript on Github to contribute or see what's going on. Don't forget to read the Contribution guidelines first if you want to contribute.

What is your favourite PyScript feature?

Python in the front end?!

Table of contents