JavaScript Runtime Environment

Tidak bisa dimungkiri bahwa setiap aplikasi untuk platform berbeda biasanya menggunakan bahasa pemrograman yang berbeda pula. Katakanlah aplikasi web menggunakan JavaScript, aplikasi Android menggunakan Kotlin, aplikasi iOS menggunakan Swift, aplikasi Windows mayoritas menggunakan C#, dan sebagainya. Kini, ternyata JavaScript dapat dimanfaatkan untuk berbagai platform berkat runtime environment di luar browser. Apa itu runtime environment?

Runtime environment adalah tempat sebuah program akan dieksekusi. Ia akan menentukan global object yang dapat diakses oleh program JavaScript. Lalu, apa yang dimaksud dengan global object? Nah, kita akan memahaminya ketika mempelajari masing-masing runtime environment.

Ada tiga macam yang akan kita bahas dalam materi ini, yaitu Browser, Node.js, dan Bun.

Browser

Kebanyakan program JavaScript dijalankan melalui lingkungan browser untuk membuat aplikasi browser interaktif dan dapat menampilkan data yang dinamis. Contohnya, kita memiliki satu buah proyek aplikasi web yang berisi berkas index.html dan index.js dengan isi berikut.

index.html

<!DOCTYPE html>
<html>
  <body>
    <h1>My Website</h1>
 
    <script>
      window.alert('Hello, world!');
    </script>
  </body>
</html>

Berkas di atas adalah index.html yang dibutuhkan untuk menampilkan konten dan struktur halaman web. Jika dilihat, ada program JavaScript di dalamnya yang dibungkus oleh elemen <script>. Jika dijalankan, hasilnya akan seperti berikut.

Sebagian besar dari Anda mungkin bingung asal mula kode window.alert('Hello, world!'). Mengapa alert dapat menampilkan browser alert? Inilah yang dimaksud dari global object yang disinggung sebelumnya. Program JavaScript yang dijalankan dalam lingkungan browser memiliki akses terhadap global object window. Selain menampilkan alert saja, ia juga memberikan akses developer untuk memanipulasi seluruh konten yang tampil di browser. Caranya adalah mengakses properti window.document. Program apa pun yang dijalankan dalam runtime ini dapat mengakses objek tersebut. Keren, ya?

Jika mau, Anda dapat bermain program JavaScript dalam runtime browser dengan interactive code berikut.

Cara di atas adalah embedded JavaScript. Ada cara lain untuk menjalankan kode pada browser, yaitu berkas eksternal JavaScript dan Read-Eval-Print-Loop (REPL) versi browser.

External JavaScript

Kode program dalam cara ini ditulis secara terpisah dari berkas HTML. Berkas JavaScript ditulis dengan berkas berekstensi “js”. Kita pindah contoh kode di atas dalam berkas index.js berikut.

<!DOCTYPE html>
<html>
  <body>
    <h1>My Website</h1>
 
    <script src="index.js"></script>
  </body>
</html>

Pemisahan ini membuat program JavaScript tidak lagi terhubung dengan HTML. Oleh karena itu, kita gunakan <script> untuk mengimpornya.

REPL versi Browser

Cara ketiga adalah menjalankannya secara langsung melalui browser atau REPL. Read-Eval-Print-Loop atau disingkat REPL dimiliki juga oleh browser. Caranya sangatlah mudah.

Buka browser kesukaan Anda dan Developer Tools di dalamnya. Developer Tools adalah fitur browser untuk mendukung proses pengembangan aplikasi web. Salah satu fitur yang dimiliki adalah REPL. Ini dapat kita akses dengan membuka tab Console dan mulai menuliskan kode JavaScript.

Lebih jelasnya, silakan perhatikan gambar bergerak berikut.

Program yang dibuat dan dieksekusi di lingkungan browser biasanya dikenal dengan aplikasi front-end atau aplikasi client. Jika ingin menjalankan program JavaScript dalam sistem komputer atau membangun aplikasi back-end, kita memerlukan runtime environment lain, seperti Node.js dan Bun.

Catatan:
Anda tidak perlu khawatir jika kesulitan dalam memahami contoh kode di atas. Dalam kelas ini, kita akan belajar dari nol hingga mahir menuliskan kode JavaScript.

Node.js

Node.js adalah runtime environment untuk JavaScript yang berbeda dari browser. Meskipun berbeda, seluruh fitur dari bahasa pemrograman JavaScript, yakni membuat variabel, melakukan operasi aritmetika, dsb. dapat dilakukan juga di sana. Hanya saja kita tidak memiliki akses lagi terhadap global object milik browser, seperti alert. Sebagai gantinya, Node.js memberikan akses kepada developer untuk mengakses file system, mengatur database, dan lainnya.

Misalnya, kita dapat mengetahui sistem operasi yang digunakan oleh komputer dengan kode berikut.

console.log(process.platform);

Untuk menjalankan kode di atas, kita perlu memasang Node.js sebagai runtime environment dalam komputer. Anda dapat mengunjungi alamat nodejs.org untuk mendapatkan panduan pemasangan. Jika telah terpasang, Anda akan memiliki akses ke aplikasi yang bernama node di terminal.

Contoh kode di atas mengakses global object bernama process. Objek ini berisi data-data yang berelasi dengan berkas JavaScript yang sedang dieksekusi. Lalu, properti platform dipanggil untuk mengembalikan jenis sistem operasi yang dipakai dalam menjalankan program ini. Ini sama halnya dengan window dalam runtime browser.

Katakanlah kode tersebut kita simpan dalam berkas app.js. Untuk menjalankannya, kita dapat menggunakan perintah berikut.

node app.js

Perintah node di atas memberi tahu komputer untuk menjalankan berkas JavaScript dalam Node.js environment. Berikut hasil eksekusinya.

Node.js memiliki alternatif lain untuk menjalankan program tanpa mengeksekusi berkas JavaScript, yaitu memanfaatkan Read-Eval-Print-Loop (REPL). Caranya sangat mudah:

buka terminal;
jalankan perintah node;
tulis kode programnya; dan
tekan tombol Enter.

Silakan perhatikan gambar bergerak berikut untuk lebih jelasnya.

Bun

Ada alternatif yang dapat digunakan untuk menjalankan program dalam sistem komputer selain Node.js, yaitu Bun. Ia adalah JavaScript runtime baru yang menyajikan ekosistem JavaScript terkini dan berbagai fitur yang mengedepankan kecepatan. Jika mengacu ke halaman resminya, ia dibangun agar tetap kompatibel dengan berbagai fitur dari Node.js.

Sama seperti Node.js, Bun mendukung berbagai sistem operasi, seperti Linux, MacOS, dan Windows. Untuk menjalankan program dengan Bun, kita perlu memasangnya terlebih dahulu dan kita dapatkan perintah bun di terminal setelahnya.

Ada dua cara untuk menjalankan programnya, yaitu mengeksekusi berkas dan REPL. Kita akan gunakan kembali contoh kode sebelumnya sebagai contoh, yaitu app.js.

Untuk menjalankan berkas JavaScript, kita dapat gunakan perintah berikut.

bun run app.js

Wah, ternyata butuh tambahan perintah lagi, yaitu run, ya? Betul, tetapi kita juga dapat menghilangkan perintah itu alias hanya mengetikkan bun app.js. Jangan khawatir karena dua cara ini sebetulnya masih identik (tidak ada perbedaan).

Bagaimana dengan cara REPL? Mudah saja, cukup jalankan perintah berikut.

bun repl

Bagi Anda yang baru pertama kali menjalankan perintah di atas, biasanya Bun akan melakukan beberapa proses sebelum REPL siap digunakan. Jika sudah muncul, jangan ragu untuk menulis kode program apa pun di sana.

Itu dia beberapa runtime environment untuk bahasa pemrograman JavaScript. Ternyata ada beberapa runtime, ya. Meskipun demikian, JavaScript memiliki fitur yang seragam dengan beberapa platform atau runtime lainnya. Ya, hal ini karena mereka tetap patuh terhadap standar ECMAScript.

Kami yakin Anda sudah tidak sabar belajar membuat program dengan JavaScript, kan? Ini adalah rasa pada diri kita yang perlu dipertahankan agar dapat menjadi JavaScript developer yang andal. Pada beberapa modul berikutnya, kita akan mulai berkarya dengan JavaScript. Fighting!

Search This Blog

Transformasi Digital