PyScript adalah teknologi baru yang dibuat oleh Anaconda dan diluncurkan pada bulan April 2022. Ini adalah eksperimen yang menjanjikan karena membuat runtime Python tersedia sebagai bahasa skrip di browser yang mendukung WebAssembly.
Setiap browser modern saat ini mendukung WebAssembly, yang merupakan runtime berkecepatan tinggi yang dapat dikompilasi seperti C, C ++, dan Rust. Sebelumnya, ada proyek bernama Pyodide yang menyediakan port WebAssembly untuk runtime Python, tetapi PyScript berbeda karena menyediakan lingkungan dalam browser secara keseluruhan untuk menjalankan Python sebagai bahasa skrip web.
PyScript dibangun berdasarkan pada Pyodide dan menawarkan fitur-fitur baru seperti kemampuan untuk mengimpor modul dari standart library, menggunakan impor pihak ketiga, mengonfigurasi interaksi dua arah dengan DOM, dan masih banyak lagi. Bermanfaat buat pengembang yang ingin menggunakan Python dan JavaScript dalam pengembangan web.
Saat ini, PyScript masih dalam bentuk prototipe dan proyek eksperimental. Anaconda tidak menyarankan untuk menggunakannya dalam produksi. Tetapi bagi kalian yang penasaran dapat mencobanya di situsnya langsung dan menggunakan komponen-komponen yang tersedia untuk membuat aplikasi Python-plus-JavaScript eksperimental di browser.
Dalam artikel ini, kita akan berkenalan dengan PyScript, dan melihat bagaimana interaksi Python dan JavaScript dalam aplikasi web.
Daftar Isi
Programming Dengan PyScript
Inti dari PyScript adalah menyertakan satu file JavaScript, yang terintegrasi dengan mulus ke dalam halaman web. Penyertaan ini tidak hanya untuk memuat runtime PyScript, tetapi juga secara otomatis meload dukungan untuk tag khusus yang digunakan.
Contoh langsungnya seperti ini:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://pyscript.net/releases/2023.11.2/core.css" />
<script type="module"
src="https://pyscript.net/releases/2023.11.2/core.js">
</script>
</head>
<body>
<script type="py" terminal>
from pyscript import display
display("Hello World!")
print("Hello terminal!")
</script>
</body>
</html>Di bagian head, tag script menginisialisasi fungsionalitas inti PyScript. Meskipun stylesheet .css bersifat opsional, namun tetap berguna. Tidak hanya meningkatkan estetika, tetapi juga memberikan pemberitahuan penting kepada kita selama pemuatan halaman-memberitahukan proses pemuatan runtime Python, inisialisasi, dan banyak lagi.
Di dalam tag script, enkapsulasi kode Python-mu dengan atribut type=”py”. Penulisan kodenya juga harus mengikuti penulisan kode python, jika tidak, maka kode itu mungkin tidak bisa berjalan. Waspadai potensi masalah jika editor HTML yang kamu gunakan memformat ulang secara otomatis, karena hal ini dapat mengubah bentuk konten blok script. Sebagai gantinya, kita bisa “mengimpor” file .py seperti file javascript.
Setelah komponen PyScript selesai dimuat, setiap kode Python di dalam tag skrip akan dievaluasi. Kita juga harus menyesuaikan dimana kode ini berinteraksi, apakah itu dengan DOM atau console. Kita bisa mengatur keluaran dari pyscript.display, apakah ingin ditampilkan di DOM atau terminal, jika terminal (yang sudah di include), maka tambahkan atribut “terminal” di tag script-nya.
Impor Standart Library
Menggunakan apa yang tersedia di python mungkin ada yang kurang. Oleh karena itu, standart library juga tersedia. Kita bisa menggunakannya seperti saat impor di file python, seperti berikut:
import datetime
print ("Current date and time:",
datetime.datetime.now().strftime("%Y/%m/%d %H:%M:%S"))Menggunakan Library dari PyPI
Bagaimana jika kita ingin menggunakan paket dari PyPI? Pyscript memberikan ruang untuk kita menyesuaikan apa yang kita butuhkan, kita bisa menggunakan paket dari PyPI menggunakan .toml atau .json format di root direktori kita, yuk lihat gimana caranya menggunakannya dengan .toml.
Kita harus memasukkan atribut config ke tag script seperti berikut:
<script type="py" src="main.py" config="pyscript.toml">Kemudian file pyscript.toml berisi paket yang ingin kita pakai:
packages = ["paket","paket-lainnya"]Tapi, kalian harus tahu bahwa tidak semua paket dari PyPI bisa digunakan. Fungsi yang “murni” dari python seharusnya bisa berjalan normal. Dan juga paket yang disediakan oleh Anaconda juga akan berjalan sepertinumpy, pandas, bokeh, atau matplotlib. Tapi kebanyakan paket yang membutuhkan akses internet dan bekerja di platform native seperti GUI kemungkinan besar tidak akan berjalan.
Impor File Lokal
Ada kalanya kita tidak ingin menuliskan kode secara inline di halaman web kita. Karena akan lebih sulit mengatur dan juga kemungkinan akan ada masalah lainnya. Menggunakan impor file .py langsung bisa membantu untuk memudahkan kita mengaturnya.
Normalnya saat menggunakan python kita hanya butuh file .py di direktori proyek kita. Namun, pyscript tidak bisa seperti itu. Jadi, kita harus secara spesifik menuliskan file mana yang bisa diimpor.
Untuk melakukannya, Kita bisa membuat list dari url yang bisa digunakan oleh pyscript di dalam file config seperti bagian sebelumnya, namun kali ini list tersebut harus ada di bagian [files]. Contohnya adalah sebagai berikut:
[files]
"/module.py" = "./libs/module.py"
"https://mydata.com/data.csv" = "./data.csv"Apapun file yang tersedia di bagian kiri, juga akan tersedia buat interpreter python yang men-“emulasi”-kan sistem file seperti di bagian kanan. Contohnya, file /module.py, jika dibuka di browser maka urlnya adalah http://localhost:8000/module.py. Begitu juga file csv di atas.
Terminal di Browser
Jika kalian sudah terbiasa menggunakan python, pasti kalian juga sudah terbiasa dengan REPL, yaitu sebuah antarmuka konsol bagi runtime python. Di dalam pyscript, kalian bisa “embed” terminal tersebut secara langsung dan menggunakan REPL secara live, atau hanya untuk sekedar menampilkan hasilnya saja.
Untuk menggunakannya, tambahkan atribut terminaldi tag script seperti berikut:
<script type="py" terminal>print("hello world")</script>Tapi, kalian tidak akan bisa berinteraksi dengan terminal tersebut, jika ingin berinteraksi, maka kalian harus menambahkan atribut worker :
<script type="py" terminal worker>
name = input("What is your name? ")
print(f"Hello, {name}")
</script>worker tersebut akan menjalankan program kalian di web worker, yaitu sub proses. Kalian tidak bisa menggunakan web worker yang langsung berada di file HTML yang di load secara lokal, wajib untuk menggunakan server yang memberikan header tertentu. Jika ingin tahu lebih lanjut, kalian bisa kunjungi halaman dokumentasinya.
Berinteraksi Dengan DOM dan JavaScript
Karena PyScript itu berdasar dari teknologi browser, dia memiliki cara atau mekanisme untuk berinteraksi dengan DOM (Document Object Model). Sebagai contoh, jika kalian ingin mendapatkan value dari elemen input, kalian bisa menggunakan kode python seperti berikut:
from pyscript import window, document
inputbox = document.querySelector("#my-input")
print("Value of input:", inputbox.value)PyScript juga menyertakan module pydom yang bisa membuat element di DOM secara dinamis:
from pyweb import pydom
new_div = pydom.create("div")
new_div.content = "Hello World"Hampir semua manipulasi DOM yang ada di JavaScript, seperti mengubah atribut atau menambahkan elemen sekarang bisa dilakukan dengan librari pydom ini.
Begitu dulu untuk pengenalannya, jika ada yang ingin ditambahkan atau ada kesalahan, silahkan tuliskan di kolom komentar. Selamat mencoba!
Kredit: Image by storyset
