Online Code Editor dan Playground Javascript

Dalam belajar membuat website, sering kita menggunakan local server seperti Live Server, XAMPP, Nodejs dan local server lainnya. Hal ini tentu dianjurkan karena kita bisa men-simulasi-kan hasil pembelajaran secara real-time dan juga tidak menggunakan internet. Namun terdapat juga kekurangan ketika menggunakan local server, seperti kebutuhan memori yang besar, komputer yang bekerja keras, dan sulitnya mengatur local server pada kasus bahasa pemrograman tertentu.

Pengaturan local server untuk library dan framework javascript yang menggunakan Nodejs cukup mengambil banyak waktu, ini dikarenakan Nodejs perlu mendownload dependencies dan modul dari internet. Pembuatan project baru juga akan mengambil banyak resource atau memori komputer karena modul javascript yang telah didownload akan diextract ke dalam folder kerja. Bayangkan jika kita membuat 100 project Nodejs, maka akan ada 100 folder kerja yang berisi folder node_modules. Masalah seperti ini tidak hanya terjadi pada project javascript, namun juga terjadi pada project php seperti laravel yang mengunakan folder vendor untuk menyimpan dependencies-nya.

Cara mengatasi masalah waktu yang lama untuk mengunduh dependecies dan storage komputer yang digunakan sebagai penyimpanan, maka kita bisa menggunakan online code playground dan environment. Cukup banyak penyedia layanan code playground di internet, namun kami hanya akan memberikan beberapa code playground yang mudah digunakan dan beberapa playground yang dapat menyimpan project.

HTML TryIt Editor W3Schools

HTML TryIt Editor adalah code playground untuk pemrograman website dasar seperti HTML, CSS, dan Javascript, keunggulannya adalah kita hanya perlu menulis kode pada editor yang tersedia, kemudian klik tombol run dan hasilnya akan muncul segera pada tab output, Keuntungan lain yakni kita bisa mensimulasikan ukuran layar. HTML TryIt Editor bisa menjadi pilihan cepat dan mudah untuk belajar dasar tampilan website.

Berikut tautannya : HTML TryIt Editor W3Schools

Glot.io

Glot.io adalah code playground yang berfokus input - kode - output, tidak ada fitur berupa tampilan hasil dalam HTML seperti pada TryOut HTML W3Schools di atas. Glot.io biasanya dipakai untuk belajar bahasa pemrograman, data struktur, dan logika.

Penggunaan glot.io tidak harus login, kita bisa menikmati fitur berbagi kode snippet dengan orang lain. Terdapat 2 cara untuk berbagi, yakni secara publik dan secara privat, jika kita berbagi secara publik maka kode bisa ditemukan oleh mesin pencari, sedangkan jika terbagi secara privat maka hanya orang yang memiliki url-share-nya saja yang bisa mengakses kode snippetnya.

Fitur utama yang membedakan antara pengguna biasa dengan pengguna yang terdaftar dan telah masuk ke akun Glot.io adalah fitur My Snippets, fitur ini memungkinkan kita untuk menyimpan setiap kode snippet yang telah kita buat. Sehingga kita tidak akan kehilangan kode-kode tersebut.

Berikut ini tampilan dari IDE di Glot.io Javascript:

Glot.io User Interface Javascript
Glot.io: User Interface Javascript

CodeSandbox

CodeSandbox.io adalah code playground untuk pemrograman website yang memiliki banyak environment, seperti React, Vuejs, Svelte, Angular, bahkan Node HTTP Server. Kemudahan dalam membuat environment menjadi alasan utama kami menggunakan CodeSandbox pada tutorial front-end website di situs ini. Selain itu, adanya fitur untuk menyimpan project sangatlah membantu kita dalam belajar pemrograman front-end website.

Fitur penyimpanan project hanya bisa digunakan jika kita login terlebih dahulu, disarankan login dengan akun Github agar mudah dalam pendaftarannya.

Langkah-langkah untuk memulai project React di CodeSandbox adalah sebagai berikut:

  1. Buka codesandbox.io/signin
  2. Klik Sign in with Github
  3. Klik Authorize CodeSandbox
  4. Setelah berhasil Sign in, klik tombol Create Sandbox di sebelah kanan atas.
  5. Pilih template yang sesuai dengan project, semisal React.
  6. Mulai gunakan Online Editor pada CodeSandbox.io
Tampilan UI CodeSandbox
CodeSanbox.io: Tampilan User Interface

Tampilan user interface-nya cukup lengkap, terdiri dari explorer file, editor, dan output seperti browser beserta console-nya. Kode pada editor akan otomatis dirapikan ketika file disimpan. Terdapat fitur share yang bisa digunakan untuk membagikan project kita ke orang lain.

Repl.it

Repl.it adalah code playground mirip seperti CodeSandbox.io namun dengan environment yang lebih lengkap lagi, tidak hanya mendukung environment untuk pemrograman website, namun juga mendukung pemrograman lain seperti Golang, Python, C, dan banyak lainnya. Karena memiliki fitur yang hampir sama dengan CodeSandbox, kami sarankan Anda juga mencoba menggunakan Repl.it

Langkah-langkah untuk memulai project React di Repl.it:

  1. Buka replit.com/login
  2. Klik Continue with Github
  3. Klik Authorize Replit
  4. Setelah berhasil Sign in, klik tombol Create Repl di sebelah kiri atas
  5. Ketik React di kolom search template, pilih React.js
  6. Masukkan nama project di bagian title
  7. Klik tombol Create Repl.
  8. Mulai gunakan Online Editor pada Repl.it
  9. Jalankan kode dengan klik tombol Run
Tampilan User Interface Repl.it
Repl.it: Tampilan User Interface

Tampilan user interface Repl.it juga lengkap, terdiri dari explorer file, editor, dan output seperti browser beserta console-nya.

Pada artikel selanjutnya kita akan membahas tentang cara mengatur project React secara lokal.

©2021, All Rights Reserved

Privacy Policy | DMCA | Telegram