PyScript: Python nel browser
Sei un appassionato di Python e non conosci linguaggi client-side in modo avanzato? Hai sempre avuto il rammarico di non poter usare Python come linguaggio di scripting client-side? Non hai piacere di sviluppare con Javascript?
Da oggi non devi più preoccuparti perché potrai usare PyScript! Come annunciato da Peter Wang, CEO e co-founder di Anaconda, nel suo speech al PyCon US 2022, il team di Anaconda sta lavorando su un nuovo progetto Open Source, denominato PyScript che consente di eseguire codice Python all'interno del browser.
Il progetto PyScript, al momento della scrittura dell'articolo, è in fase alpha quindi è un progetto ancora in stato embrionale, da utilizzare per eseguire test in locale ma non da utilizzare in ambiente di produzione.
L'idea di fondo del progetto è quella di utilizzare il Python come linguaggio
di scripting lato client in modalità nativa. Lo sviluppatore può aprire un
elemento HTML speciale, denominato py-script, ed al suo interno scrivere
codice Python così come avrebbe fatto in un qualsiasi file .py.
A questo punto immagino che sarai impaziente di capire bene quali sono le potenzialità offerte da PyScript e come utilizzarlo.
Cos'è PyScript?
PyScript è un framework lato client che consente di implementare applicazioni
Python direttamente all'interno del browser utilizzando il linguaggio HTML.
Le principali caratteristiche di PyScript sono:
- Eseguire Python nel browser: esecuzione di Python senza dover configurare nulla lato server
- Ecosistema Python: esecuzione delle più comuni librerie Python importandole come si fa normalmente sugli script
- Python e Javascript: possibilità di far coesistere e collaborare i due linguaggi
- Gestione dipendenze: selezione dei pacchetti da utilizzare su ogni singola pagina
- Componenti HTML pre-implementati: utilizzo di componenti
HTMLgià configurati per l'utilizzo, comebottoni,containers.
L'idea esposta con forza da Peter Wang nel suo speech è anche quella di avere un software che
consenta la portabilità del progetto. Si vuole dare a Python un ambiente per
creare applicativi che abbiano la loro interfaccia in HTML visualizzabile sul
browser. Uno sviluppatore può quindi copiare la cartella di progetto su una
penna USB e incollarla su un altro PC, ed il tutto funzionerà senza la necessità
di installare e/o configurare nulla.
Installare PyScript
Per installare PyScript all'interno dei propri file html utilizzando le
librerie online, puoi inserire nell'elemento HEAD di una pagina HTML, le seguenti istruzioni:
<link
rel="stylesheet"
href="https://pyscript.net/alpha/pyscript.css"
/>
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
Eseguire codice Python nelle pagine HTML
Eccoti qui, finalmente ci siamo, sei pronto ad eseguire Python dentro l'HTML?
Bene allora copia ed incolla il seguente codice all'interno di un file helloworld.html:
<html>
<head>
<link
rel="stylesheet"
href="https://pyscript.net/alpha/pyscript.css"
/>
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<py-script> print('Hello, World!') </py-script>
</body>
</html>
e lancia la pagina all'interno del browser. Vedi Hello, World! stampato sulla
pagina? Bene quel testo lo hai scritto con Python!
Avrai notato che il codice Python è inserito all'interno di un tag HTML
speciale denominato py-script. Nel tag puoi scrivere codice Python come se
stessi lavorando su un file .py.
Nota bene
Se usi come IDE VSCode, puoi installare la Live Server extension per lanciare un live server sul quale eseguire il file appena salvato e ricaricare le modifiche al volo mentre modifichi la pagina.
Output su HTML
Nel precedente esempio ho usato la funzione print per stampare sull'HTML.
Tuttavia non sempre vogliamo eseguire la stampa proprio nel punto in cui
eseguiamo il codice, ma piuttosto vogliamo stampare all'interno di un titolo
h1, di un div, o di un paragrafo p. PyScript consente la stampa
all'interno di elementi HTML utilizzando la funzione write del modulo
pyscript.
Il seguente HTML stampa il risultato della somma all'interno del titolo h1
denominato somma:
<html>
<head>
<link
rel="stylesheet"
href="https://pyscript.net/alpha/pyscript.css"
/>
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<h1 id="somma" style="background-color: red;"></h1>
<py-script>
def somma(numero1: int, numero2: int) -> int:
return numero1 + numero2
pyscript.write('somma', somma(7, 3))
</py-script>
</body>
</html>
Caricando il precedente HTML vedremo scritto nel titolo h1 il numero 10.
La funzione write richiamata nel codice Python, consente di definire come
primo argomento l'id dell'elemento nel quale scrivere e come secondo
argomento il valora da scrivere.
Importare dipendenza interne
Nell'esempio precedente tutto il codice Python è stato inserito all'interno
della pagina HTML. PyScript consente di importare codice Python scritto su
script esterni ed utilizzarlo all'interno delle pagine HTML. Il tag HTML da
utilizzare per importare le librerie è py-env.
Supponi di avere all'interno della cartella dove hai il tuo file html un file
denominato somma.py che definisce la funzione somma, come segue:
# somma.py
def somma(numero1: int, numero2: int) -> int:
return numero1 + numero2
Possiamo a questo punto utilizzare questa implementazione all'interno del file html:
<html>
<head>
<link
rel="stylesheet"
href="https://pyscript.net/alpha/pyscript.css"
/>
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- paths:
- ./somma.py
</py-env>
</head>
<body>
<h1 id="somma" style="background-color: red;"></h1>
<py-script>
from somma import somma
pyscript.write('somma', somma(7, 3))
</py-script>
</body>
</html>
Come si evince dall'esempio, il collegamento tra la pagina html e lo script
Python è eseguito all'interno del tag py-env. I collegamenti interni devono
essere inseriti all'interno dell'elemento py-env ed, in particolare,
all'interno della voce paths indicando il path che conduce al file partendo
dal file nel quale si sta lavorando.
Una volta collegato il file, nell'elemento py-script si esegue
l'importazione della funzione e si utilizza come avviene in qualsiasi script
Python.
Importare dipendenze esterne
Per importare dipendenze esterne, si identifica il pacchetto da importare e si
inserisce il nome all'interno dell'elenco delle dipendenze in py-env.
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- numpy
- matplotlib
</py-env>
</head>
<body>
...
</body>
</html>
Una volta inserita la dipendenza, puoi utilizzarla come faresti su un normale script Python.
Conclusioni
In questo articolo hai visto come cominciare ad utilizzare il progetto PyScript per iniziare a scrivere codice Python all'interno dei file HTML.
Questa caratteristica mancava al Python che grazie ai benefici apportati al progetto può veramente diventare un linguaggio perfetto per qualsiasi scopo.
Il progetto PyScript è ancora in versione alpha ma ha tutte le caratteristiche per diventare un progetto di riferimento per tutta la community Python.
