OpenTUI: Membangun Aplikasi Terminal dengan React, Bun, dan Zig

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

Transcript

00:00:00Ini adalah OpenTui, pustaka bertenaga Zig untuk membangun antarmuka terminal dengan binding
00:00:04untuk React, Solid, dan FreeJS sehingga Anda bisa membuat TUI berperforma tinggi seperti membangun aplikasi
00:00:09web. Pustaka ini dibuat oleh Anomaly, tim di balik OpenCode, yang merupakan open source populer
00:00:14untuk agen pengodean, untuk benar-benar menggerakkan antarmuka pengguna di balik OpenCode, yang digunakan oleh jutaan
00:00:19orang secara rutin. Tapi bagaimana pustaka baru ini bersaing dengan alat antarmuka terminal React
00:00:24populer lainnya yang sudah ada jauh lebih lama dan digunakan untuk menggerakkan banyak
00:00:29agen pengodean populer? Klik subscribe dan mari kita cari tahu!
00:00:35Jadi, Ink adalah pustaka andalan untuk membangun antarmuka terminal dengan React. Saya sebenarnya sudah membuat
00:00:40video tentang hal itu yang bisa Anda lihat di sini. Tapi ada beberapa masalah. Pertama-tama,
00:00:44aplikasi sederhana menggunakan lebih dari 50MB memori dan memiliki batas 30fps yang dikodekan secara keras, yang
00:00:51sebenarnya baik-baik saja untuk sebagian besar aplikasi. Namun jika Anda membangun aplikasi yang melakukan streaming banyak teks,
00:00:56seperti agen pengodean, maka batas bingkai tersebut membuat semuanya terasa lambat. Jadi tim
00:01:00di Anomaly, yang awalnya menggunakan Golang dengan Bubble Tea untuk membangun OpenCode, ingin menulis ulang
00:01:06dalam TypeScript tanpa menggunakan Ink. Jadi mereka membuat OpenTui. Maksud saya, mereka membeli OpenTui. Mereka tidak
00:01:13benar-benar membuatnya dari nol karena Commander FX sudah membangun pustaka terminal
00:01:18berbasis Zig. Jadi Anomaly mensponsorinya dan membangun OpenTui di atas karyanya. Jadi inti Zig melakukan semua
00:01:24rendering berat dan binding TypeScript memungkinkan Anda menulis komponen UI di React atau Solid. Tapi bagian
00:01:30yang sangat cerdas adalah foreign function interface BUN, yang memungkinkan Anda berbicara langsung
00:01:36dari TypeScript ke kode asli Zig tanpa banyak penundaan, itulah yang membuat OpenTui sangat
00:01:42berperforma. Ia menggunakan Yoga untuk tata letak Flexbox, hadir dengan komponen bawaan seperti input dan select,
00:01:47dan bahkan ada paket 3.js yang memungkinkan Anda merender grafik 3D WebGPU di dalam terminal,
00:01:54yang terasa agak gila. Faktanya, mari kita lihat OpenTui beraksi dengan mencobanya pada demo yang sangat sederhana. Ada
00:01:59banyak cara untuk menyiapkan proyek OpenTui dasar. Secara pribadi, saya suka menggunakan BUN CreateTui
00:02:04karena memberi Anda wizard yang sangat berguna untuk memberi nama proyek dan memilih
00:02:09template yang ingin digunakan. Sekarang saya akan memilih React, tapi nanti di video akan saya jelaskan,
00:02:13perbedaan antara ketiga template tersebut. Jadi setelah selesai, Anda mendapatkan beberapa file standar
00:02:17dengan indeks yang menjalankan proyek layar penuh dasar. Dan jika kita melihat kodenya,
00:02:21kita bisa melihat di sini bahwa ia menggunakan renderer CreateCLI untuk memanfaatkan mesin rendering OpenTui.
00:02:27Dan di bawahnya terdapat CreateRoot, yang merender komponen aplikasi. Dan jika Anda familiar
00:02:32dengan React, ini adalah kode yang me-mount-nya ke file HTML. Tapi karena kita merender ke terminal,
00:02:37proyek ini tidak memiliki index.html, melainkan menggunakan reconciler React kustom yang menggunakan
00:02:42kotak terminal dan teks alih-alih komponen HTML. Di atasnya, kita memiliki JSX yang menggunakan komponen kotak
00:02:49dan beberapa prop Yoga flexbox untuk menyelaraskan kotak di dalamnya yang merender font ASCII dan beberapa teks dasar.
00:02:55Sekarang, jika Anda tidak ingin ini menjadi aplikasi layar penuh, OpenTui mendukung beberapa mode layar.
00:03:00Dan kita bisa mengubahnya menjadi split footer dengan tinggi footer, yang menyematkan render ke wilayah
00:03:05yang dicadangkan di bagian bawah terminal. Tapi mari coba lakukan sesuatu yang sedikit lebih menarik daripada sekadar mengubah
00:03:10mode layar. Ini adalah TUI dasar dengan beberapa teks judul dan input nama. Sekarang, coba lihat ini. Dengan OpenTui, Anda mendapatkan
00:03:17responsivitas ini secara gratis. Jadi tidak peduli lebar terminal saya, semuanya tetap terlihat bagus. Dan jika
00:03:21kita melihat kodenya, ia menggunakan sintaks React yang sangat familier. Jadi di sini, kita memiliki useState
00:03:26yang mengatur nama. Dan pada input, kita memperbarui nama pada prop on input. Dan itu
00:03:32berubah dalam teks. Sekarang, satu hal yang sangat keren yang dilakukan OpenTui adalah semacam live reloading tanpa
00:03:37HMR. Jadi kita bisa melihat di sini, jika saya mengubah teks menjadi goodbye dan menyimpannya, teks itu secara otomatis
00:03:43diperbarui. Dan menyenangkan memiliki input responsif, tetapi terkadang teksnya tidak muncul. Hal ini bisa
00:03:48diperbaiki dengan menambahkan lebar, yang membuat segalanya jauh lebih mudah. Dan dengan komponen kotak, kita memiliki
00:03:52beberapa prop yang sangat keren seperti border dan background color, yang segera mempercantik aplikasi terminal ini.
00:03:56Sekali lagi, kita bisa menggunakan font ASCII alih-alih teks ini, yang membuat judul lebih menonjol.
00:04:01Dan tentu saja, ada banyak font ASCII yang bisa Anda pilih. Ingat, karena ini adalah aplikasi
00:04:05terminal, bukan halaman web, ia tidak merender semua font yang ada di sistem Anda, hanya yang mendukung
00:04:10terminal. Kita juga bisa melakukan hal-hal seperti mengubah tampilan saat submit dengan cara yang sama seperti aplikasi
00:04:15React biasa dengan mengubah state saat submit dan menampilkan JSX berbeda berdasarkan kondisi ini. Tapi inilah
00:04:20satu hal yang tidak Anda duga bisa dilakukan terminal. Jika saya mengirimkan nama saya, state lainnya sekarang memudar
00:04:25ke tempatnya. Dan ini dilakukan dengan hook use timeline dari OpenTui, yang digunakan untuk mengatur durasi animasi,
00:04:30mengatur target. Jadi dalam kasus ini, komponen memiliki opasitas nol dan offset delapan,
00:04:36artinya ia memiliki margin top di bawah tengah. Dan di sini animasi berakhir dengan offset nol
00:04:40dan opasitas satu dengan memperbarui state offset dan opasitas yang diatur di sini. Dan nilai-nilai ini
00:04:45diperbarui dalam prop kotak. Sekarang memang terlihat sedikit tersendat karena animasi terminal perlu
00:04:50bergerak baris demi baris. Jadi semacam di atas kisi, tapi sangat keren bahwa OpenTui memungkinkan Anda melakukan ini
00:04:55dengan begitu mudah. Yang lebih keren adalah kita bisa menggabungkan semua yang telah kita pelajari sejauh ini menggunakan tata letak flexbox
00:05:00untuk meletakkan kotak di samping satu sama lain. Jadi kita punya input di satu sisi dan kotak lain di sisi lainnya.
00:05:05Dan jika kita mengetik ke dalam input saat submit, kita bisa menganimasikan nilai yang masuk ke dalam kotak lain,
00:05:10yang merupakan sentuhan yang sangat manis. Dan dari sini, kita bisa melakukan banyak hal dengan OpenTui,
00:05:14seperti mengaktifkan navigasi keyboard dengan hook use keyboard, menampilkan data sistem menggunakan node OS,
00:05:19mengaktifkan dukungan mouse, daftar virtual. Dan karena semuanya berjalan di atas BUN,
00:05:24Anda bisa menggunakan hal-hal seperti BUN SQLite, BUN Postgres, atau mengambil informasi eksternal dengan cara
00:05:28yang sama dengan yang Anda lakukan di situs web mana pun. Dan hal keren tentang ini adalah setelah saya mengompilasi aplikasi saya, ya, ukurannya 71
00:05:34megabyte karena menyertakan runtime BUN dan rekonsiliasi React. Tapi saat saya menjalankannya,
00:05:39Anda bisa melihat ia menggunakan kurang dari 50 megabyte memori. Dan karena React sangat populer,
00:05:43LLM mengetahuinya luar dalam. Jadi membangun aplikasi di OpenTui bisa sangat sederhana
00:05:49tanpa perlu bolak-balik melihat dokumentasi. Jadi itu adalah panduan yang sangat, sangat sederhana
00:05:53tentang OpenTui. Tapi mari kita kembali ke awal video, di mana saya berjanji akan menjelaskan
00:05:58perbedaan antara React, Solid, dan Core. Jadi cukup sederhana jika Anda tahu tentang pengembangan web front-end.
00:06:02Pada dasarnya, mereka semua merender melalui Inti ZIC yang sama. Jadi penggambaran aktual ke
00:06:07terminal Anda cukup identik. Satu-satunya perbedaan adalah bagaimana Anda menulis komponen
00:06:11dan bagaimana pembaruan diterapkan. Jadi React menjalankan ulang komponen Anda dan melakukan diff pada pohon virtual pada setiap
00:06:17perubahan, yang cukup mirip dengan cara kerja DOM virtual. Solid menggunakan pembaruan yang lebih halus,
00:06:22sehingga ia hanya memperbarui hal yang berubah. Dan Core melewati semua itu, artinya Anda hanya melakukan mutasi
00:06:27objek secara langsung. Jadi di atas kertas, React adalah yang terberat dan Core adalah yang teringan. Namun dalam praktiknya,
00:06:33untuk sebagian besar aplikasi terminal, kesenjangannya kecil karena semua beban berat dilakukan oleh Inti ZIC,
00:06:38yang berarti dalam kasus ini, kerangka kerja hanyalah preferensi pribadi. Tapi meskipun aplikasi OpenTui
00:06:44dikirimkan dengan seluruh runtime BUN dan rekonsiliasi spesifik kerangka kerja, jika ada,
00:06:50performa dan ukuran aplikasi masih jauh lebih kecil daripada Ink, tapi tentu saja tidak se-
00:06:56performa sesuatu yang asli seperti Ratatouille atau Bubble Tea. Namun menurut pendapat saya, JSX adalah cara terbaik
00:07:02dan paling intuitif untuk menyusun UI apa pun. Dan saya lebih suka mengambil sedikit beban memori dan ukuran serta mendapatkan
00:07:09pengalaman pengembang yang jauh lebih baik dalam membangun TUI daripada memiliki sesuatu yang ringan dalam ukuran dan ringan
00:07:15dalam penggunaan memori, tetapi sulit untuk ditulis dan diperbarui. Jadi dengan pemikiran itu, saya akan memilih OpenTui
00:07:20daripada Ink setiap saat, jika saya sempat membangun aplikasi terminal,
00:07:25yang saya janji akan saya lakukan segera.

Key Takeaway

OpenTUI menyediakan alternatif performa tinggi untuk membangun antarmuka terminal berbasis React dengan memanfaatkan mesin rendering Zig dan runtime BUN guna mengatasi keterbatasan memori dan kecepatan frame pada pustaka tradisional seperti Ink.

Highlights

  • OpenTUI menggunakan mesin rendering berbasis Zig untuk performa tinggi, melampaui batasan 30fps pada pustaka Ink tradisional.

  • Penggunaan Foreign Function Interface (FFI) milik BUN memungkinkan komunikasi langsung dari TypeScript ke kode asli Zig dengan latensi rendah.

  • Aplikasi yang dikompilasi menggunakan OpenTUI memakan memori kurang dari 50MB, lebih ringan dibandingkan Ink.

  • Tata letak antarmuka menggunakan sistem Flexbox Yoga untuk memastikan responsivitas terminal di berbagai ukuran layar.

  • Pustaka ini mendukung integrasi langsung dengan ekosistem BUN, termasuk SQLite, Postgres, dan pengambilan data eksternal.

  • Pengembang dapat memilih framework React, Solid, atau Core untuk menulis komponen UI, dengan performa yang tetap didorong oleh inti Zig yang sama.

Timeline

Motivasi dan Arsitektur OpenTUI

  • OpenTUI memecahkan masalah batasan 30fps dan konsumsi memori tinggi yang ditemukan pada pustaka Ink.
  • Arsitektur menggabungkan mesin rendering Zig untuk kinerja berat dengan binding TypeScript untuk pengalaman pengembangan web.
  • Komunikasi efisien antara TypeScript dan Zig dimungkinkan oleh FFI BUN.

Tim di balik OpenCode membutuhkan solusi antarmuka terminal yang lebih cepat untuk menangani streaming teks intensif pada agen pengodean. Pustaka ini dikembangkan dengan membangun di atas proyek terminal berbasis Zig dari Commander FX. Dengan menggunakan Yoga untuk layout Flexbox, OpenTUI mampu menangani tugas visual kompleks, bahkan mendukung rendering grafik 3D WebGPU di dalam terminal.

Implementasi dan Fitur UI

  • Proyek OpenTUI menggunakan template seperti React yang memanfaatkan reconciler khusus alih-alih DOM tradisional.
  • Sistem mendukung mode layar penuh dan split footer untuk penempatan antarmuka yang fleksibel.
  • Fitur seperti live reloading dan hook animasi memudahkan pembuatan antarmuka responsif tanpa harus menulis ulang kode secara manual.

Pembuatan proyek dapat dilakukan melalui wizard BUN, yang memberikan struktur file dasar untuk aplikasi layar penuh. Pengembang dapat menggunakan komponen kotak dengan properti border dan background, serta font ASCII untuk kustomisasi visual. Hook seperti useTimeline memungkinkan transisi animasi yang halus, meski pergerakan pada terminal terbatas pada kisi karakter.

Pilihan Framework dan Perbandingan Performa

  • React, Solid, dan Core merender melalui inti Zig yang sama, sehingga perbedaan performa di antara ketiganya minimal bagi kebanyakan aplikasi.
  • React menggunakan virtual tree diffing, Solid menerapkan pembaruan halus, dan Core melakukan mutasi objek langsung.
  • Pemilihan framework lebih didasarkan pada preferensi pengalaman pengembang daripada perbedaan performa yang signifikan.

Aplikasi yang dikompilasi memiliki ukuran sekitar 71MB karena menyertakan runtime BUN, namun penggunaan memorinya tetap efisien di bawah 50MB. Meskipun bukan yang paling ringan di industri, kemudahan penggunaan JSX dan produktivitas pengembang menjadi keunggulan utama OpenTUI dibandingkan pustaka lain yang mungkin lebih ringan namun sulit untuk dikelola.

Community Posts

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

Write about this video