Introduzione a PyScript: esegui Python nel tuo browser web

PyScript, creato da Anaconda, è una nuova tecnologia sperimentale ma promettente che rende disponibile il runtime Python come linguaggio di scripting nei browser abilitati per WebAssembly.

Ogni browser moderno e comunemente utilizzato ora supporta WebAssembly, lo standard di runtime ad alta velocità in cui molti linguaggi (come C, C++ e Rust) possono compilare. L’implementazione di riferimento di Python è scritta in C e un progetto precedente, Pyodide, ha fornito un port WebAssembly del runtime Python.
[Anche su InfoWorld: L’ascesa di WebAssembly]

PyScript, tuttavia, mira a fornire un intero ambiente nel browser per l’esecuzione di Python come linguaggio di scripting web. Si basa su Pyodide ma aggiunge o migliora funzionalità come la possibilità di importare moduli dalla libreria standard, utilizzare importazioni di terze parti, configurare interazioni bidirezionali con il Document Object Model (DOM) e fare molte altre cose utili in entrambi il mondo Python e JavaScript.

In questo momento, PyScript è ancora un progetto prototipo e sperimentale. Anaconda sconsiglia di utilizzarlo in produzione. Ma gli utenti curiosi possono provare esempi sul sito PyScript e utilizzare i componenti disponibili per creare applicazioni sperimentali Python-plus-JavaScript nel browser.
In questo articolo, faremo un tour delle basi di PyScript e vedremo come consente a Python e JavaScript di interagire.

Programmazione con PyScript

Al suo interno, PyScript consiste in un’unica inclusione JavaScript che puoi aggiungere a una pagina web. Ciò include il caricamento del runtime PyScript di base e aggiunge automaticamente il supporto per i tag personalizzati utilizzati in PyScript.

Il tag script nell’intestazione del documento carica la funzionalità principale di PyScript. Il foglio di stile pyscript.css è opzionale, ma utile. Tra le altre cose, inserisce avvisi per l’utente al momento del caricamento della pagina su ciò che sta facendo la pagina: caricamento del runtime Python, inizializzazione e così via.

Il codice Python è racchiuso nel tag py-script personalizzato. Nota che il codice dovrebbe essere formattato secondo le convenzioni di Python per l’indentazione, altrimenti non funzionerà correttamente. Tienilo presente se utilizzi un editor che riformatta l’HTML automaticamente; potrebbe mancare il contenuto del blocco py-script e renderlo non eseguibile.

Qualsiasi codice Python viene valutato al termine del caricamento dei componenti PyScript. Se lo script nei tag scrive nell’istruzione stdout (come con un’istruzione print), puoi direttamente dove nella pagina mostrare l’output fornendo una proprietà di output. In questo esempio, lo stdout per lo script viene indirizzato nel div con l’ID “out”.

Se lo salvi in ​​un file e lo apri in un browser web, vedrai prima un indicatore di “caricamento” e una pausa, poiché il browser ottiene il runtime PyScript e lo configura. Il runtime dovrebbe rimanere memorizzato nella cache per i carichi futuri, ma ci vorrà ancora un momento per attivarsi. Dopodiché, Hello world dovrebbe apparire sulla pagina.

Importazioni di librerie standard

Gli script che usano solo i built-in di Python sono solo in qualche modo utili. La libreria standard di Python è disponibile in PyScript nello stesso modo in cui la useresti in Python normale: importa semplicemente e mettiti al lavoro. Le importazioni di librerie standard dovrebbero funzionare solo in PyScript.

Se si desidera modificare il blocco di script sopra per visualizzare l’ora corrente, non è necessario farlo in modo diverso da come si farebbe in Python convenzionale:

Utilizzo delle librerie da PyPI

E se volessimo installare un pacchetto da PyPI e usarlo? PyScript ha un altro tag, py-env, che specifica che i pacchetti di terze parti devono essere installati. Sostituiamo il blocco py-script nello script originale con questi due blocchi:

Il blocco py-env ci consente di elencare i pacchetti da aggiungere, nello stesso modo in cui potremmo elencarli in un file Requirements.txt per un progetto Python. Possiamo quindi importarli e usarli come faremmo con qualsiasi altro pacchetto Python. In questo esempio, utilizziamo un pacchetto di terze parti chiamato humanize per semplificare la lettura dell’output numerico.

Nota che non tutti i pacchetti di PyPI verranno installati ed eseguiti come previsto. Ad esempio, le richieste richiedono l’accesso a componenti di rete che non sono ancora supportati. (Una possibile soluzione per questo problema è usare pyodide.http.pyfetch, che è supportato in modo nativo.) Ma i pacchetti Python puri, come Humanize, dovrebbero funzionare correttamente. E funzioneranno anche i pacchetti utilizzati negli esempi forniti da Anaconda, come numpy, pandas, bokeh o matplotlib.

Importazione in locale

Per un altro scenario comune, supponiamo che tu voglia importare da altri script Python nello stesso albero di directory della tua pagina web. L’uso delle importazioni semplifica lo spostamento di una parte maggiore della logica Python fuori dalla pagina Web stessa, dove è mescolata alla presentazione e può diventare difficile lavorarci.

Normalmente, Python utilizza la presenza di altri file .py nel file system come indicazione di ciò che può importare. PyScript non può funzionare in questo modo, quindi dovrai specificare quali file vuoi rendere disponibili come moduli importabili.

Supponiamo che tu abbia una pagina web chiamata index.html in una determinata directory sul tuo server web e desideri posizionare un file Python chiamato main.py accanto ad essa. In questo modo il tuo script in-page può essere solo importato principale e puoi limitare la maggior parte della logica Python ai file .py effettivi.

Specifica i file Python che vuoi rendere importabili nel tuo blocco py-env:

– paths:
– ./main.py

Ciò consentirebbe a main.py, nella stessa directory del server Web della pagina Web stessa, di essere importabile con import main.

Una cosa importante da tenere a mente: non puoi eseguire importazioni come questa su una pagina web che hai lanciato localmente nel browser. Ciò è dovuto alle restrizioni sull’accesso al file system imposte dal runtime WebAssembly e dal browser stesso. Dovresti invece ospitare le pagine su un server web per servire la pagina web e il file .py.

Il tag REPL

Gli utenti Python dovrebbero avere familiarità con Jupyter Notebook, l’ambiente di codifica live all’interno del browser per Python generalmente utilizzato per la matematica e la statistica. PyScript offre un elemento costitutivo primitivo per un tale ambiente, il tag py-repl.

py-repl genera un campo di input su una pagina Web che funziona come una versione molto semplice di un ambiente Jupyter Notebook. Ecco un esempio dalle demo di Anaconda:

Esegui questo codice e ti verrà presentato un campo di input, che funziona come Python REPL.

Attualmente, il tag REPL ha pochissimo in termini di personalizzazione documentata. Ad esempio, se si desidera accedere a livello di codice al contenuto di una cella o ai suoi risultati, non esiste una documentazione chiara su come farlo.
Componente REPL di PyScript.
IDG

Il componente REPL simile a Jupyter di PyScript ti consente di eseguire Python in modo interattivo in una pagina, sebbene non sia ancora molto flessibile o configurabile.

Interazione con listener di eventi JavaScript

Poiché PyScript è basato su pyodide, utilizza i meccanismi di pyodide per interagire con il DOM. Ad esempio, se volessimo ottenere il valore di una casella di input su una pagina Web e utilizzarlo nel nostro codice Python, faremmo questo:

La libreria js fornisce un’interfaccia Python a molte entità JavaScript comuni, come gli oggetti documento e console. Si comportano quasi esattamente allo stesso modo in PyScript di JavaScript. La funzione create_proxy in pyodide ci consente di prendere un oggetto funzione Python e di generare un’interfaccia JavaScript per esso, quindi può essere utilizzato come listener di eventi per la casella di input. Eventuali sequenze di tasti nella casella di input vengono registrate nella console, ma possono anche essere gestite sul lato Python.

Post Correlati