wterm: Terminal Web Bertenaga Ghostty dari Vercel

Bahasa IndonesiaالعربيةDeutschEnglishEspañolFrançaisहिन्दी日本語한국어PortuguêsРусский中文
BBetter Stack
Computing/SoftwareInternet Technology

Transcript

00:00:00Ini adalah Wterm, emulator terminal berbasis web oleh Vasell
00:00:03yang melakukan render langsung ke DOM, bukan ke canvas.
00:00:06Jadi seleksi teks, fitur cari di peramban,
00:00:08dan pembaca layar semua langsung berfungsi.
00:00:10Ditulis dalam Zig, dikompilasi menjadi biner WASM 12 kilobyte,
00:00:14dan ada juga backend opsional yang ditenagai LibGhosty,
00:00:17mesin yang sama yang menggerakkan terminal Ghosty,
00:00:19yang memberi Anda kompatibilitas terminal penuh di peramban.
00:00:22Tapi apakah biner WASM 12 kilobyte
00:00:24benar-benar cukup untuk menggantikan emulator terminal asli?
00:00:28Mungkin tidak, tapi klik subscribe dan mari kita cari tahu.
00:00:33Jadi, terminal web sudah ada di mana-mana.
00:00:36Di IDE cloud seperti GitHub Codespaces,
00:00:39alat infrastruktur seperti Portainer atau Qualify,
00:00:41dan bahkan IDE desktop seperti VS Code atau Cursor.
00:00:44Tapi semuanya menggunakan Xterm.js untuk melakukannya
00:00:47karena sudah ada sejak lama
00:00:49dan pada dasarnya menjadi standar.
00:00:51Namun, Xterm punya masalah besar.
00:00:52Ia melakukan render ke elemen canvas.
00:00:54Jadi melakukan hal seperti memilih teks
00:00:56atau mencari kata di halaman
00:00:58semuanya harus diimplementasikan ulang dari awal,
00:01:00yang tidak selalu berhasil dengan baik.
00:01:02Wterm mengambil pendekatan yang sepenuhnya berbeda
00:01:04dengan melakukan render ke DOM,
00:01:05yang berarti output terminal hanyalah HTML,
00:01:08dan peramban pada dasarnya menangani itu secara gratis.
00:01:10Tapi Wterm juga bisa melakukan beberapa hal keren
00:01:13dengan rendering HTML ini,
00:01:14seperti hanya melakukan render ulang pada baris yang diperbarui,
00:01:17alih-alih melakukan render ulang seluruh terminal pada setiap bingkai.
00:01:20Ini juga bisa ditulis dalam kerangka kerja berbeda
00:01:22seperti React atau Vue.
00:01:23Anda bisa mengubah tema.
00:01:24Dan ada juga paket Wterm ghosty terpisah,
00:01:27yang menukar panggilan zig dengan lib ghosty
00:01:29dan bekerja jauh lebih baik
00:01:31daripada proyek web ghosty lainnya,
00:01:33yang akan kita bahas lebih lanjut nanti di video ini.
00:01:35Tapi untuk saat ini, mari kita coba Wterm
00:01:37dengan proyek demo sederhana.
00:01:38Jadi setelah menginstal Wterm dengan React,
00:01:40Saya telah mengimpor komponen serta CSS-nya,
00:01:43dan saya sedang me-render komponen itu di sini.
00:01:45Jadi sekarang jika saya menjalankan aplikasinya dan pergi ke peramban,
00:01:48saya bisa melihat ada terminal.
00:01:49Tapi jika saya menekan perintah seperti ls,
00:01:51kita bisa melihat tidak ada yang terjadi.
00:01:52Dan ini karena tidak terhubung
00:01:53ke komputer lain untuk membaca informasi darinya.
00:01:56Biar saya jelaskan.
00:01:57Jadi saat ini klien tidak terhubung ke backend,
00:01:59jadi tidak ada tempat untuk mendapatkan informasi.
00:02:01Tapi yang harus kita lakukan adalah menghubungkannya ke mesin lain.
00:02:04Jadi itu bisa jadi mesin lokal saya
00:02:06atau mesin di cloud,
00:02:07lalu me-render terminal palsu atau pseudo terminal
00:02:10di dalam mesin itu dengan dimensi yang sama
00:02:13seperti yang ada di klien.
00:02:14Jadi jika kita melakukan pengetikan,
00:02:16informasi pengetikan itu dikirim
00:02:18ke mesin lain,
00:02:20yang mengeksekusi pengetikan tersebut,
00:02:22me-render hasilnya,
00:02:23dan mengirim semua informasi itu kembali ke klien.
00:02:25Dan bolak-balik itu harus terjadi
00:02:26dengan sangat cepat dengan penundaan minimal.
00:02:28Jadi cara terbaik untuk menghubungkan klien
00:02:30dan mesin lain bersama-sama
00:02:31adalah menggunakan WebSocket.
00:02:32Jadi mari kita lakukan itu.
00:02:34Jadi kita bisa menggunakan HETS di server
00:02:35dengan Ubuntu yang sudah saya siapkan
00:02:37dengan Node terinstal.
00:02:38Dan saya juga sudah memiliki server Wterm
00:02:40dengan skrip server.
00:02:42Jadi jika kita melihat ke dalamnya,
00:02:43kita bisa melihat kita membuat server WebSocket
00:02:45pada path /api/terminal.
00:02:48Ini akan lebih masuk akal nanti.
00:02:49Dan di bawah sini,
00:02:49kita membuat pseudo terminal
00:02:51dengan nama yang cocok dengan tipe terminal kita.
00:02:53Begini cara Anda bisa menemukan milik Anda jika penasaran.
00:02:55Dan di bawah sini,
00:02:56kita mendapatkan pengetikan apa pun dari klien,
00:02:58memprosesnya di server,
00:02:59jadi di dalam terminal palsu kita,
00:03:01lalu mengembalikan informasi itu
00:03:02ke klien di sini.
00:03:03Jadi server mengembalikan semuanya
00:03:05dan bukan hanya baris tertentu yang telah diperbarui.
00:03:07Sekarang di klien dalam file app.tsx,
00:03:10kita membuat koneksi WebSocket
00:03:11ke server kita pada port /api/terminal.
00:03:14Kemudian kita menggunakan transformasi WebSocket
00:03:16dari Wterm untuk terhubung ke URL tersebut
00:03:19dengan penyambungan ulang otomatis.
00:03:21Lalu ini yang mengirim informasi pengetikan
00:03:23dari sini ke server.
00:03:24Kita menangani pengubahan ukuran peramban di sini,
00:03:26lalu di bawah sini,
00:03:27dan fungsi handle data
00:03:28menangani semua informasi
00:03:30yang datang dari server.
00:03:31Dan hal keren tentang inti ZIG
00:03:33adalah ia akan melewati informasi ini,
00:03:35mencari tahu apa yang telah diubah,
00:03:36dan hanya melakukan render ulang bagian HTML tersebut.
00:03:39Di bawah sini, ukuran kolom dan baris
00:03:41harus sesuai dengan apa yang kita miliki di server,
00:03:42dan selebihnya cukup mudah dipahami.
00:03:45Jadi sekarang dengan klien dan server berjalan,
00:03:47kembali ke peramban, jika saya menekan LS,
00:03:49kita bisa melihatnya mendaftarkan file yang kita miliki.
00:03:52Jadi saya bisa menekan LS dengan flag L
00:03:53untuk melihat informasi lebih lanjut tentang file tersebut.
00:03:55Saya bisa CD ke dalam file,
00:03:57melihat informasi di dalamnya,
00:03:59dan juga melakukan hal-hal seperti melihat daftar
00:04:01kontainer yang sedang berjalan.
00:04:02Saya bahkan bisa membuka file dengan Vim
00:04:03dan menavigasinya.
00:04:04Tapi meskipun semua itu berhasil,
00:04:06itu tidak melakukannya dengan sangat baik.
00:04:07Maksud saya, jika kita mencoba menyorot teks,
00:04:09kita bisa melihat beberapa karakter
00:04:10sama sekali tidak terbaca.
00:04:12Jadi untuk memperbaikinya,
00:04:13kita bisa mengatur Wterm dengan Ghosty
00:04:15dengan memuat inti Ghosty
00:04:16dan menambahkannya sebagai prop di React.
00:04:18Anda bisa melihat sekarang jika kita membuka file server
00:04:20dan menyorot teks,
00:04:22semuanya jauh lebih terbaca.
00:04:23Itu bahkan bisa melakukan hal seperti
00:04:24me-render open code dengan benar,
00:04:26memungkinkan kita mengubah model,
00:04:27dan memberikannya prompt dengan dukungan emoji.
00:04:29Kita bahkan bisa melihat bahwa Ghosty me-render warna
00:04:31sedikit lebih baik
00:04:31daripada dengan perender inti Wterm default.
00:04:34Tapi inti Zig hanya 12 kilobyte
00:04:36dibandingkan dengan 400 kilobyte dari Ghosty.
00:04:39Jadi jika Anda peduli dengan ukuran,
00:04:40maka mungkin tetap gunakan inti Zig.
00:04:43Bagaimanapun, itu adalah gambaran singkat tentang Wterm dari Vercel.
00:04:46Tentu saja, ada begitu banyak fitur lain
00:04:48yang tidak saya bahas,
00:04:49seperti bisa mengonversi Markdown
00:04:51menjadi output terminal yang bagus,
00:04:52menggunakan Bash saja untuk menavigasi file palsu
00:04:55jika Anda tidak memiliki akses ke backend.
00:04:57Dan bahkan ada contoh
00:04:58tentang cara mengatur klien SSH
00:05:00melalui terminal di peramban.
00:05:02Tapi saya rasa Wterm tidak sempurna.
00:05:05Ada beberapa masalah rendering
00:05:06saat menggunakan versi Ghosty,
00:05:08bolak-balik antara NeoVim
00:05:10atau bahkan OpenCode.
00:05:11Dan untuk membuat perender Ghosty bekerja
00:05:13dengan frontend BUN saya,
00:05:15saya harus mengimpor file WASM
00:05:17karena BUN tidak akan menyalin file non-JS
00:05:19dari folder Node modules.
00:05:21Tapi saya menyukai pendekatan rendering DOM,
00:05:23yang berarti Anda mendapatkan aksesibilitas
00:05:25dan fitur peramban asli
00:05:27tanpa melakukan pekerjaan tambahan,
00:05:29yang selama ini sulit dilakukan Xterm,
00:05:31meskipun sudah ada lebih dari 10 tahun.
00:05:33Tapi Xterm.js memiliki ekosistem yang sangat besar
00:05:35dan merupakan solusi yang teruji,
00:05:38jadi Anda tidak akan salah jika akhirnya memilihnya.
00:05:40Ada juga GhostyWeb oleh Coda,
00:05:42yang mengambil pendekatan berbeda.
00:05:43Ini menggunakan mesin libGhosty yang sama
00:05:45yang digunakan oleh terminal Ghosty yang asli,
00:05:48tapi ini adalah pengganti drop-in untuk Xterm,
00:05:50jadi tetap menggunakan pendekatan rendering canvas
00:05:52dan menggunakan API yang sama,
00:05:54tetapi Anda mendapatkan terminal yang lebih baik.

Key Takeaway

Wterm menawarkan alternatif terminal web yang lebih aksesibel dengan melakukan rendering ke DOM, sekaligus menyediakan opsi fleksibilitas antara ukuran biner WASM 12 KB yang ringan atau performa tinggi melalui integrasi LibGhostty.

Highlights

  • Wterm merender output terminal langsung ke DOM sebagai HTML, berbeda dengan Xterm.js yang menggunakan elemen canvas.

  • Biner WASM inti Zig pada Wterm hanya berukuran 12 kilobyte, jauh lebih ringan dibandingkan inti Ghostty sebesar 400 kilobyte.

  • Integrasi LibGhostty pada Wterm meningkatkan keterbacaan teks dan rendering warna dibandingkan penggunaan inti Zig default.

  • Rendering berbasis DOM memungkinkan fungsionalitas asli peramban seperti seleksi teks, fitur pencarian halaman, dan pembaca layar bekerja tanpa implementasi ulang.

  • Wterm melakukan efisiensi render dengan hanya memperbarui baris HTML yang berubah, alih-alih merender ulang seluruh bingkai terminal.

Timeline

Pendekatan Rendering Wterm

  • Wterm menggunakan rendering DOM sebagai pengganti metode canvas tradisional pada Xterm.js.
  • Output terminal berupa elemen HTML memungkinkan integrasi fitur asli peramban seperti pencarian teks dan pembaca layar secara otomatis.
  • Arsitektur ini mendukung pembaruan parsial pada baris yang berubah, meningkatkan efisiensi dibandingkan rendering ulang penuh.

Terminal web saat ini didominasi oleh Xterm.js yang berbasis canvas, sehingga menghambat aksesibilitas dan fitur pencarian halaman. Wterm mengatasi kendala ini dengan merender output sebagai elemen DOM. Pendekatan ini memungkinkan fleksibilitas framework seperti React atau Vue dan mendukung integrasi opsional dengan LibGhostty untuk kompatibilitas terminal yang lebih luas.

Implementasi Klien dan Server

  • Koneksi antara klien dan mesin remote dilakukan melalui protokol WebSocket.
  • Server menjalankan pseudo terminal yang mengeksekusi perintah dan mengirimkan data hasil kembali ke klien.
  • Integrasi Wterm pada aplikasi React memerlukan konfigurasi WebSocket untuk menangani komunikasi dua arah secara real-time.

Klien Wterm tidak menyimpan informasi lokal melainkan terhubung ke mesin lokal atau cloud. Server menangani eksekusi perintah di dalam pseudo terminal dan mengirimkan data kembali melalui WebSocket untuk dirender oleh klien. Data yang diterima diproses oleh inti Zig untuk menentukan bagian HTML mana yang perlu diperbarui pada tampilan terminal.

Perbandingan Performa dan Ekosistem

  • Penggunaan inti Ghostty memperbaiki masalah karakter yang tidak terbaca pada perender Zig default.
  • Inti Zig unggul dalam ukuran biner yang sangat kecil (12 KB) dibandingkan inti Ghostty (400 KB).
  • Xterm.js tetap menjadi solusi yang lebih teruji karena ekosistemnya yang luas selama lebih dari satu dekade.

Meskipun inti Zig menawarkan ukuran yang sangat efisien, integrasi LibGhostty terbukti lebih baik dalam merender warna dan menangani aplikasi interaktif seperti Vim. Terdapat alternatif lain seperti GhosttyWeb yang berfungsi sebagai pengganti drop-in untuk Xterm.js dengan tetap menggunakan rendering canvas, namun Wterm tetap menjadi pilihan unggul untuk kebutuhan aksesibilitas berbasis DOM.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video