Melirik Brython Sebagai Pengganti JavaScript
Beberapa tahun yang lalu dunia pemrograman dikejutkan dengan transformasi yang dilakukan oleh JavaScript karena sebagai bahasa pemrograman scripting, sekarang sangat memungkinkan untuk menjalankan JavaScript di server menggunakan Node.Js dan menggunakannya sebagai sebuah bahasa bahasa pemrograman server-side. JavaScript telah melanggar aturan yang selama ini ada di kepala para programmer bahwa JavaScript hanya bisa berjalan sebagai bahasa pemrograman client-side. JavaScript keluar dari jeruji besi yang selama ini membelenggunya.
Hal sama dilakukan oleh Python kali ini, ia keluar dari zona nyaman sebagai bahasa pemrograman server-side berkembang menjadi bahasa pemrograman client-side melalui Brython. Kata Brython merupakan singkatan dari Browser Python, yang artinya memungkinkan para programmer untuk menggunakan dan menjalankan kode Python di browser.
Pengenalan Brython
Brython adalah implementasi dari Python 3 untuk pemrograman web client-side. Yeah, seperti yang dijelaskan sebelumnya, hari ini Python tidak hanya bekerja di sisi server, sekarang para programmer web bisa menggunakan Python sebagai bahasa pemrograman web client-side.
Apa tujuan dari Brython?
Sebagian orang membenturkan kepala mereka selagi menulis kode JavaScript. Tidak mudah bagi para programmer pemula untuk menulis kode dalam bahasa pemrograman JavaScript, bahkan sebagian orang mengatakan bahwa JavaScript merupakan bahasa pemrograman yang buruk, seperti meme ini
Meme penggunaan operator double equals pada JavaScript
https://www.freecodecamp.org/news/explaining-the-best-javascript-meme-i-have-ever-seen
Sesuatu yang lucu memang, tapi disisi lain bisa terlihat bahwa bagaimana berbahaya dan buruknya penggunaan operator double equals pada JavaScript bagi para programmer baru yang akan terjun ke dunia pemrograman. Jadi disini Python sebagai bahasa pemrograman yang lebih ramah terhadap para developer baru dan juga populer di kalangan para programmer, ia menawarkan sebuah solusi agar programmer baru tetap bisa melakukan pengembangan web dengan baik serta berbagai tujuan mulia tersebut maka diciptakanlah Brython.
Client-Side Programming
Client-side programming adalah program yang berjalan di browser, berinteraksi dengan user events, berkaitan juga dengan user interface atau tampilan, dan semua proses lain yang dapat terjadi pada mesin klien. Sebagai contoh, ketika user menekan sebuah tombol, membuat request ke server dan menerima data darinya, semua hal itu ditangani oleh client-side programming.
Bagaimana Cara Kerja Brython
Mempelajari dan mengetahui bagaimana cara Brython bekerja adalah suatu hal yang penting, dari sini dapat diketahui bagaimana proses yang dilakukan oleh Brython sehingga ia dapat bekerja di sisi klien.
Brython mengubah kode Python menjadi JavaScript, dengan kata lain Brython menerjemahkan semua script kode Python yang terdapat pada tag <script type=”text/python”> menjadi JavaScript. Begini urutannya:
Kita menjalankan fungsi brython() ketika halaman HTML mulai di load (menggunakan atribut onload yang dimiliki oleh tag <body>).
Fungsi brython() tadi akan mengubah semua kode Python yang terdapat dalam tag script menjadi JavaScript.
Setelah itu dia akan menjalankan script yang telah dirubah menggunakan fungsi eval() yang dimiliki oleh JavaScript.
Let’s Code
Hal pertama yang perlu kita lakukan adalah menambahkan 2 file JavaScript, yang pertama adalah brython.js dan yang kedua adalah brython_stdlib.js. Kamu bisa menambahkan nya menggunakan cdnjs atau kamu bisa download langsung di website dokumentasi nya untuk mendapatkan versi terakhir dari Brython dan juga bisa digunakan secara offline.
Yang perlu kamu ketahui juga bahwa sudah terdapat beberapa modul bawaan Brython yang akan membantu kamu untuk melakukan hal-hal yang kamu butuhkan seperti saat load file HTML bisa menggunakan browser.load, memberikan sebuah alert menggunakan browser.alert, melakukan binding antara sebuah elemen HTML dan sebuah method menggunakan browser.bind, dll. Jadi pada bagian berikutnya saya akan menunjukkan bagaimana konsep dan cara menggunakan modul bawaan Brython dengan cara yang mudah dimengerti.
Manipulasi DOM
Bagian paling dasar dari client-side programming adalah memanipulasi DOM yang artinya melakukan perubahan terhadap elemen HTML . Dalam bagian ini kita akan mengubah text/nilai dari elemen tag <h2> pada saat menekan sebuah tombol.
Yang pertama kita buat adalah sebuah elemen tag <h2> dengan id “hello” sebagai elemen yang kita ubah nilai/text nya dan sebuah tombol dengan id “alert-btn” sebagai pemicu nya.
Setelah itu, kita perlu mendeklarasikan script dengan tipe text/python seperti ini
Penjelasan kode:
Yang pertama kita lakukan pada baris 115 dari script Python di atas adalah melakukan import modul document dan alert.
Setelah itu, pada baris 117 kita mendefinisikan sebuah method dengan nama “show” yang digunakan untuk menangani aksi apa yang dilakukan dan variabel “e” sebagai parameter. Variabel “e” yang menjadi parameter adalah sebuah nilai objek dari event yang terjadi, dan untuk penjelasan detail mengenai hal ini kalian bisa melihatnya di artikel ini (atau mungkin tidak perlu).
Aksi pertama dilakukan dalam method ini adalah memunculkan sebuah alert/pemberitahuan dengan pesan “Hello World” (baris 118). Kalian bisa mengganti isi dari alert nya sesuai dengan kebutuhan.
Pada baris berikutnya yaitu baris 119, aksi yang dilakukan adalah mengubah text dari elemen tag <h2> menjadi “Hello World”.
Lalu di bagian akhir yaitu baris 121 kita melakukan binding antara elemen yang memiliki id “alert-btn” dan method show yang telah kita buat ketika event “click” terjadi. Dengan kata lain, ketika kita menekan tombol dengan id ”alert-btn” maka method “show” dijalankan.
Text Bind
Pada bagian ini yang akan dilakukan adalah menampilkan sebuah text yang bergantung pada masukan yang diketik oleh user pada sebuah text field, atau proses ini biasa disebut dengan text binding.
Buat 2 elemen terlebih dahulu, yang pertama adalah elemen input bertipe “text” dengan id “input”, dan yang kedua adalah elemen tag <span> dengan id “output”.
Selanjutnya deklarasikan script untuk kode Python nya seperti ini
Penjelasan kode:
Deklarasikan modul yang dibutuhkan seperti terlihat pada baris 127. Kali ini modul yang perlu di import hanyalah modul “document”.
Selanjutnya kita definisikan sebuah method baru dengan nama “show_text” dan variabel “e” sebagai parameter pada baris 129.
Isi dari blok method ini hanya satu baris yaitu baris 130 yaitu untuk mengambil nilai dari masukan yang diketik oleh user pada text field melalui event objek yang menjadi parameter dan melakukan assignment terhadap elemen yang memiliki id “output” yaitu tag <span>.
Dan pada bagian akhir dilakukan binding antara elemen yang memiliki id “input” dengan method “show_text” yang telah dibuat ketika terjadi event input.
Template dan Variabel
Akan ada saatnya kita akan membutuhkan rendering data pada elemen HTML dengan nilai yang dinamis atau berubah-ubah bergantung pada nilai dari sebuah variabel. Contoh jika ingin memunculkan nilai dari variabel “nama” yang ada pada kode Python, maka bisa ditambahkan kode Python variabel nama tersebut di dalam kode HTML nya langsung dan lakukan rendering menggunakan modul template.
Ok, sekarang buat elemen tag <h2> dengan id “greet” dan isi dari tag nya yaitu “Hello, {name}!”. Penggunaan tanda kurung kurawal tersebut merupakan penanda bahwa text yang ada di dalamnya merupakan kode Python yang akan dirender dan yang dirender kali ini adalah variabel “name”.
Selanjutnya deklarasikan script untuk kode Python nya dengan isi seperti ini
Penjelasan kode:
Hal yang pertama dilakukan seperti sebelum-sebelumnya yaitu melakukan import untuk modul yang dibutuhkan, tetapi pada baris 138 hanya melakukan import modul “template” saja agar kita bisa langsung menggunakan nama modul tersebut.
Pada baris 140 merupakan pendeklarasian dari sebuah variabel dengan nilai “Agung Sepruloh”, tentu saja untuk nilai dari variabel nya kalian bisa sesuaikan.
Lalu pada baris 141 kita gunakan modul “Template” untuk melakukan rendering terhadap elemen yang memiliki id “greet” dengan nilai dari variabel name.
Manipulasi Tampilan
Ini merupakan bagian terakhir dari tutorial penggunaan Brython artikel kali ini. Pada bagian ini saya akan jelaskan bagaimana melakukan manipulasi terhadap style/css menggunakan Brython.
Buat sebuah elemen tag <div> dengan nama class “card”, kemudian di dalam tag tersebut kita deklarasikan 2 buah elemen, yang pertama adalah tombol dengan id “box-btn” dan value “Change color button”. Kemudian elemen kedua yang kita buat adalah div dengan d “box” dan class “box”.
Jika kamu ingin menambahkan styling pada box yang sudah kita buat agar nanti hasil dari perubahannya lebih terlihat, kamu bisa menambahkan beberapa baris kode ini
Selanjutnya deklarasikan script untuk kode Python nya seperti ini
Penjelasan kode:
Untuk kali ini modul yang digunakan adalah modul “document” saja karena untuk melakukan perubahan css dari elemen HTML cukup sederhana.
Pada baris 169 pendeklarasian sebuah variabel “box” dengan value sebuah elemen HTML yang memiliki id “box”. Sama seperti sebelumnya, hanya saja kali ini kita melakukan assignment sebuah elemen terhadap sebuah variabel agar kode yang dibuat lebih mudah dibaca.
Berikutnya deklarasikan sebuah method dengan nama “change_color” yang memiliki nilai objek dari event yang terjadi ke dalam sebuah variabel “e”.
Dalam kode blok tersebut yaitu baris 172 kita melakukan assignment nilai warna “yellow” terhadap background dari variabel box yang telah kita deklarasikan sebelumnya.
Dan... yang terakhir kita lakukan adalah binding antara elemen yang memiliki id “box-btn” dengan method “change_color” ketika terjadi event klik.
Full Source Code
Kamu bisa langsung download atau clone seluruh contoh kode program yang sudah dijelaskan tadi untuk memudahkan pemahaman ke repository github. Ada beberapa tambahan contoh juga seperti bagaimana cara melakukan Ajax Call/Http Request yang di bagian sebelumnya belum saya jelaskan dan juga cara bekerja dengan local storage menggunakan modul yang sudah tersedia pada Brython.
