PyScript — Python for the Web Browser

The icing on the cake for software developers!

ByHabileLabs

July 5th . 5 min read

In today’s technology-driven world, more and more developers are turning to JavaScript and python to advance their careers, as it’s evident that the opportunities in this arena are quite wide and at their peak.

These languages are known for their flexibility, and they have become the go-to choices for developing web applications, though they also carry the drawback of having older formats.

However, there is a newer development in the coding world — “PyScript”.

Have you ever heard of it?

No? Well then, let us introduce you to this amazing scripting language, which is a combination of “Python & JavaScript” -

Overview about PyScript

You might be thinking of it as a replacement for JavaScript, but delve further, and you’ll have a bird-eye view as to how PyScript is the icing on the cake for coders.

Peter Wang, the CEO, and co-founder of Anaconda, Inc., revealed it during his keynote speech at PyCon US 2022 that — It is Python inside HTML, a whole-new framework that will enable the users to create Python applications using an in-browser HTML interface.

It is a better alternative to Emscripten, Pyodide, WASM, and other cutting-edge web technologies which were used earlier in development.

Following are the objectives-

To offer simple, streamlined APIs.
Create a system with expandable and pluggable components.
To fulfill the goals of “Programming for the 99 Percent” and also to use standard HTML which must be supported and extended to read reliable, opinionated bespoke components.

What PyScript have to offer?

PyScript intends to provide developers, particularly data scientists, additional freedom and power in terms of coding standards rather than replacing JavaScript’s function in the browser.

Contemporary issues with web application development like packaging, distribution, and deployment are all resolved by allowing Python to use HTML, CSS, and JavaScript standards all at once.

Along with helping in specific genres, PyScript helps data scientists in various conditions. For example, Data scientists frequently create models but are unable to make them representable to stakeholders.

With this scripting language, they will be able to make the most of their talents and cognitive processes and because most models and charts lack an appropriate user interface, it will give targeted audiences a window to consume them.

Key Features of PyScript-

PyScript provides standardized style rules, increased expressiveness, and simplicity of learning. Besides that, let’s take a look at what else this language explores-

Hosting and support for Python in the browser without the need for servers or settings.
Programs may communicate back and forth between JavaScript and Python objects and namespaces thanks to interoperability.
Support for the ecosystem: Enables the usage of several well-known Python packages, including Pandas, NumPy, and many more.
Flexibility of the framework: It is a versatile framework that programmers may build upon to construct extendable components in Python quickly.
Environment Management: Enables programmers to specify which files and packages should be used while writing page code.
UI Development: Help in quick creation by using a variety of UI elements, including buttons, containers, and more.

WebAssembly in PyScript-

pyscript-python-for-the-web-browser – 1.jpg

Writing websites with Python is now feasible thanks to a technique called Web Assembly.

WebAssembly is the core technology that enables the creation of webpages in Python. Web browsers could only handle JavaScript when WebAssembly was first created.

After its initial release in 2017, WebAssembly swiftly attained official status with the World Wide Web Consortium (W3C) by 2019. It contains a.wat text format language that can be read by humans, which is then translated into a binary.wasm format that browsers can read.

We can now create code in any language, compile it to WebAssembly, and then run it in a web browser thanks to this.

Pyodide

A WebAssembly-based Python distribution for the browser and Node.js is called Pyodide. With this, we can use micropip to install and run Python packages in the browser. For usage with Pyodide, several programs with C extensions have also been migrated. Numerous general-purpose Python packages, such as NumPy, pandas, SciPy, Matplotlib, and Scikit-learn, as well as RegEx, PyYAML, and lxml are included.

Emscripten

Emscripten is a full-featured WebAssembly compiler tool-chain that uses LLVM, with an emphasis on performance, size, and the Web platform.

How to Use PyScript?

Pyodide is the base of PyScript, and it is a WebAssembly/Emscripten version of CPython.

Micropip-based Python packages may be installed and used in browsers thanks to Pyodide. It employs a binary.wasm format that can be read by browsers after being converted from a human-readable .wat text format language.

You can download the alpha release of PyScript on pyscript.net.

For reference, all HTML files that use PyScript must have a link to these:

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

<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

PyScript allows you to write Python in HTML using the following components:

py-env – Defines the Python packages needed to run your Python code.
py-script – Part of the HTML file where you write your Python code.
py-repl – Creates a REPL component that evaluates the code user enters and displays the result.

Advantages of PyScript -

The most obvious benefit is that we can now create online apps and write Python (and maybe other languages) in HTML thanks to PyScript. A far larger group of front-end developers and designers may now benefit from Python’s capability, thanks to PyScript.
The world’s most widely used andportable computing environment is the web browser. Web browsers are available to everyone, whether they are on a computer or a mobile device. This implies that there are no infrastructural restrictions on who may access and begin programming.
We no longer have to be concerned about deployment thanks to PyScript because of the “architectural shift beyond the cloud”
Your web browser will be the center of everything. As data scientists, we may distribute our models and dashboards via HTML files that, when opened in a web browser by others, will execute code.

“JavaScript” in accordance with “PyScript”

The JavaScript engine and the collection of APIs made available by your execution environment are two different components that are equally important in traditional front-end development.

While the API landscape might vary greatly depending on the target platform, the core of JavaScript is quite tiny and acts rather reliably across different retailers.

JavaScript may be used for client-side code that runs in the web browser, server-side code that runs in Node.js, and even code that powers mobile apps. By the way, using certain of Node.js’ unique APIs, it is potentially feasible to run PyScript on the back end.

You will, however, concentrate on the browser APIs in this section.

The following tech stack diagram shows Emscripten, an open-source compiler toolchain that makes it possible to generate WebAssembly from any portable C/C++ source.

The only limitation at this point is that we can only use libraries that Pyodide supports now while using PyScript.

How to build a webpage with PyScript?

To build a webpage, we need to know about HTML and CSS.

Let’s start with a basic example of printing “Hello world” by defining the HTML structure for a webpage-

Fortunately, end users don’t have to fully grasp what’s going on in the background, other than for some security reasons. However, more languages will eventually be supported, according to the contemporary advancements in the technology world.

Conclusion -

Before PyScript, running and carrying out Python operations on the web wasn’t simple. Anyone interested in utilizing Python on the web will find this to be a fantastic tool, despite being still in its infancy.

PyScript will indeed prove to be a head-turning evolution in the world of scripting languages.

Thanks for reading the blog!

Hoping you find it insightful! 😊