PyScript-Use Python Code in HTML
<py-script>-<py-env>-<py-repl>
Introduction
How cool it will be if a data scientist can develop a web application just using python and no need to know javascript. At the PyconUS 2022, Anaconda unveiled a new framework called PyScript which uses python in HTML code to build applications. You can use python in your HTML code. You don’t need to know javascript. PyScript is not just HTML only, it is more powerful, because of the rich and accessible ecosystem of Python libraries.
Let's see how to use PyScript and a few examples of PyScript in this article.
1. What is PyScript?
According to Anaconda's blog, PyScript is a framework that allows users to create rich Python applications in the browser using a mix of Python with standard HTML. PyScript aims to give users a first-class programming language that has consistent styling rules, is more expressive, and is easier to learn.
PyScript is developed by a team from Anaconda.
2. What are PyScript Core Components?
- PyScript is simple to use.
- PyScript is easy to learn compared to Javascript.
- PyScript offers a simple and clean API.
- It supports standard HTML.
- You can call Javascript libraries in PyScript.
- You can develop web applications using python.
- You just need a web browser to start using PyScript.
- It offers an easy way for users to define their own new components.
- It supports python code to be run in the browser. Later more languages will be supported.
- With PyScript, you no longer need to worry about deployment. Everything happens in the web browser.
- As a data scientist, you can share your dashboards and models in an HTML file, which will run code whenever others open the file in a web browser.
PyScript is built on
WebAssembly:
According to Anaconda's press release, the fundamental technology that makes it possible to write websites in Python is WebAssembly. When WebAssembly was originally developed, web browsers only supported Javascript.
First released in 2017, WebAssembly quickly became the official World Wide Web Consortium (W3C) standard by 2019. It includes a human-readable .wat text format language, which then gets converted to a binary .wasm format that browsers can run. This allows us to write code in any language, compile it to WebAssembly, and then run it in a web browser.
According to webassembly documentation-
- WebAssembly is a type of code that can be run in modern web browsers.
- It is a low-level assembly-like language with a compact binary format that runs with near-native performance.
- It provides languages such as C/C++, C#, Python and Rust with a compilation target so that they can run on the web.
- In a nutshell, it provides a way to run code written in multiple languages on the web at near-native speed, with client apps running on the web.
Please check the documentation to learn more about WebAssembly.
Emscripten:
Emscripten is an Open Source compiler toolchain to WebAssmbly, practically allowing any portable C/C++ codebase to be compiled into WebAssembly. Please check the documentation for more info.
Pyodide:
- Pyodide is a port of CPython to WebAssembly.
- Pyodide makes it possible to install and run Python packages in the browser with micropip.
- Python package with a wheel available on PyPI is supported.
- Many packages with C extensions have also been ported for use with Pyodide.
- Many general-purpose packages such as regex, pyyaml, lxml, and scientific Python packages including NumPy, pandas, scipy, matplotlib, and sci-kit-learn.
Check the pyodide documentation for more information.
Check the pyodide github for more information.
3. How to install PyScript?
Method: I
- Download from https://pyscript.net/
- Unzip the downloaded file.
- Then use the below lines in your code.
Method: II
- You don’t need to download it. Just use the css and js files below
- HTML: a language that determines how documents and web pages are displayed in a web browser, the language for the building blocks of any website.
- CSS (Cascading Style Sheets): or CSS for short. CSS specifically deals with the layout and customization of HTML elements.
- Javascript: this allows you to change CSS and HTML elements on your website after the site has been loaded.
4. How to use PyScript?
- Just use the
<py-script>tag and write Python code inside the tag itself like below
- Also, you can pass the python file directly like below
- If you need to use additional packages and modules, then please use the use the
<py-env>tag to specify my environment requirements like below
- If you want to use REPL then use the
<py-repl>tag
and it’ll create a widget.
5. PyScript Examples:
- Create an HTML file.
- Open it in a browser. I did it in chrome.
Let's see some examples:
Make sure you use the 2 files.
Example:1-Hello World
Code:
Hello World HTML Code:
Hello World PyScript Code:
- add the code between the <py-script> tags.
Output:
Example: 2-Matplotlib
Code:
Output:
Example: 3-KMeans Clustering Demo:
Code:
The output
Example:4-REPL
Code:
Output:
- a widget appears.
- You can write the code and then press the green play button.
Example:5-Altair Visualization
Code:
Output:
Check out the following for more info in the PyScript
Conclusion
How nice is it to develop web applications using python in HTML? Pyscript is just getting started. Again it is very simple and easy to learn. I think it's going to be a big one like jupyter notebook. Hope you enjoyed reading this article.
Please free to get connected on Linkedin. If interested please check out my other article in Analytics Vidhya
