Sebuah tool baru bernama tsbro berjanji untuk menjalankan TypeScript langsung di browser tanpa langkah build, namun developer mempertanyakan pendekatan teknis dan implikasi performanya. Tool ini bertujuan untuk menyelesaikan masalah TypeScript yang menjadi warga kelas dua di browser dengan melewati sistem import tradisional.
Spesifikasi Teknis:
- Menggunakan SWC WebAssembly untuk kompilasi TypeScript (ukuran unduhan 5MB+)
- Menggunakan XHR sinkron untuk pengambilan file
- Mengonversi modul ES ke format CommonJS
- Mendukung JSX dengan pragma yang dapat dikonfigurasi
- Memerlukan importmap untuk manajemen paket
Masalah Performa dengan Pendekatan Synchronous XHR
Kontroversi utama berpusat pada penggunaan synchronous XMLHttpRequest (XHR) oleh tsbro untuk mengambil dan mengkompilasi file TypeScript. Pendekatan ini telah menarik kritik dari developer berpengalaman yang memperingatkan tentang masalah performa yang parah. Sifat synchronous berarti browser harus menunggu setiap file untuk diunduh dan dikompilasi sebelum pindah ke file berikutnya, menciptakan bottleneck yang dapat membuat proyek yang lebih besar menjadi tidak dapat digunakan.
Tool ini bekerja dengan mengambil kode TypeScript secara synchronous, mentranspilasi dengan SWC WebAssembly, mengkonversi ES modules ke format CommonJS, dan kemudian mengevaluasi hasilnya. Meskipun ini menciptakan pengalaman pengembangan yang mulus, hal ini datang dengan trade-off yang signifikan.
Catatan: Synchronous XHR memblokir main thread browser, mencegah operasi lain berjalan sampai request selesai.
Masalah Performa:
- XHR sinkron memblokir thread utama browser
- Performa buruk untuk grafik modul yang besar
- Download WebAssembly awal berukuran 5MB+
- Stack trace menjadi sulit dibaca karena transpilasi
- Saat ini belum tersedia dukungan source map
Solusi Alternatif dan Tantangan Teknis
Diskusi komunitas mengungkapkan beberapa pendekatan alternatif yang dapat mengatasi kekhawatiran performa ini. Beberapa developer menyarankan menggunakan service workers untuk mencegat request TypeScript dan mengkompilasinya secara asynchronous di background. Metode ini akan menghindari pemblokiran main thread browser sambil tetap menyediakan fungsionalitas yang diinginkan.
Solusi lain yang diusulkan melibatkan berjalan secara asynchronous melalui import graph untuk mengumpulkan semua file terlebih dahulu, kemudian melewatkannya melalui compiler dalam batch. Pendekatan ini sudah digunakan dengan sukses oleh proyek Playground Elements Google untuk sampel kode interaktif.
Namun, alternatif ini menghadapi tantangan mereka sendiri. Package SWC WebAssembly yang digunakan tsbro berukuran lebih dari 5MB, yang harus diunduh sebelum kompilasi apa pun dapat dimulai. Ini menciptakan penalti loading awal yang signifikan yang mempengaruhi pengalaman pengguna.
Pendekatan Alternatif:
- Kompilasi berbasis service worker (digunakan oleh sucrase-build-iife)
- Asynchronous import graph walking ( Google Playground Elements )
- Kompilasi sisi server dengan endpoint khusus
- Solusi yang berfokus pada WebAssembly untuk dukungan lintas bahasa
Implikasi yang Lebih Luas untuk Web Development
Diskusi seputar tsbro mencerminkan perdebatan yang lebih besar tentang kompleksitas browser dan workflow pengembangan. Beberapa developer berargumen bahwa menambahkan lebih banyak fitur ke browser meningkatkan kompleksitas dan menciptakan beban maintenance jangka panjang karena persyaratan backward compatibility. Mereka menyarankan untuk fokus pada peningkatan dukungan WebAssembly sebagai gantinya, yang akan memungkinkan developer menggunakan bahasa apa pun sambil menjaga API browser tetap sederhana.
Yang lain menunjukkan bahwa developer menginginkan akses first-class ke API browser seperti DOM tanpa penalti performa, membuat tool seperti tsbro berharga meskipun ada keterbatasannya. Tantangannya terletak pada menyeimbangkan kemudahan developer dengan performa teknis dan keberlanjutan jangka panjang.
Kesimpulan
Meskipun tsbro mengatasi kebutuhan nyata untuk workflow pengembangan TypeScript yang lebih sederhana, implementasi saat ini menimbulkan kekhawatiran yang valid tentang performa dan skalabilitas. Diskusi komunitas menyoroti ketegangan yang sedang berlangsung antara pengalaman developer dan optimisasi teknis dalam tool pengembangan web. Saat proyek berkembang, mengatasi kekhawatiran performa ini melalui arsitektur alternatif seperti service workers atau kompilasi asynchronous dapat membantu mewujudkan potensinya sambil menghindari jebakan operasi synchronous.
Referensi: tsbro