Valdi – Framework UI lintas platform dengan performa native

 (github.com/Snapchat)
9 poin oleh GN⁺ 2025-11-09 | 2 komentar | Bagikan ke WhatsApp
  • Valdi buatan Snap adalah framework UI lintas platform yang menghadirkan performa native di iOS, Android, dan macOS, dengan langsung mengompilasi UI yang ditulis secara deklaratif dalam TypeScript menjadi view native di tiap platform
  • Berjalan tanpa WebView atau JavaScript bridge, serta mempertahankan performa tinggi lewat daur ulang view otomatis, mesin layout yang dioptimalkan, dan rendering berbasis viewport
  • Mempercepat pengembangan dengan hot reload instan, debugging VSCode, dan dukungan sintaks TSX, sekaligus mendukung integrasi dengan aplikasi native yang sudah ada secara fleksibel
  • Menyediakan struktur integrasi native yang mendalam melalui binding aman tipe antara TypeScript dan kode native, dukungan protobuf, serta interoperabilitas C++·Swift·Kotlin
  • Merupakan teknologi yang telah teruji selama 8 tahun di aplikasi produksi Snap, dan menjadi fondasi pengembangan UI yang skalabel dengan fitur lanjutan seperti animasi skala besar, gesture, dan pemrosesan multithread

Ikhtisar Valdi

  • Valdi adalah framework UI lintas platform yang telah digunakan Snap selama 8 tahun di aplikasi produksinya
    • Saat UI ditulis secara deklaratif dalam TypeScript, hasilnya langsung dikompilasi menjadi view native di iOS, Android, dan macOS
    • Menghadirkan performa native tanpa WebView atau JavaScript bridge
  • Saat ini masih dalam tahap beta, dan direncanakan beralih ke versi resmi setelah alat dan dokumentasinya di lingkungan open source stabil

Fitur utama dan contoh

  • Contoh komponen dasar memperlihatkan penyusunan UI sederhana di kelas HelloWorld menggunakan dan
  • Menggunakan struktur komponen deklaratif berbasis TypeScript, dan dapat dijalankan dengan kode yang sama di tiap platform
  • Menyediakan materi pengembang seperti dokumentasi resmi, panduan instalasi, referensi API, dan Codelab
Iklan

Optimasi performa

  • Untuk memastikan performa native, Valdi mengadopsi struktur berikut
    • Daur ulang view otomatis: sistem pooling view global untuk memakai ulang view antar layar dan meminimalkan penundaan inflasi
    • Rendering komponen independen: hanya komponen individual yang diperbarui tanpa memengaruhi rendering induk
    • Mesin layout berbasis C++: berjalan dengan overhead minimal di thread utama
    • Rendering sadar viewport: hanya meng-inflate view yang terlihat di layar sehingga meningkatkan performa infinite scroll
  • Dokumen terkait Performance Optimization Guide juga tersedia

Pengalaman pengembang

  • Fitur hot reload memungkinkan perubahan kode langsung diterapkan
  • Dukungan debugging VSCode: dapat menetapkan breakpoint, memeriksa variabel, melakukan profiling performa, dan menangkap heap dump
  • Menyediakan lingkungan pengembangan yang familier lewat sintaks TSX dan keamanan tipe
Iklan

Struktur integrasi yang fleksibel

  • Dapat menyisipkan Valdi ke aplikasi native yang sudah ada (Embed Valdi in native)
  • Dapat menggunakan view native di dalam Valdi (Embed native in Valdi)
  • Melalui modul Polyglot, dapat terhubung secara aman tipe dengan kode C++, Swift, Kotlin, dan Objective-C
  • Dengan arsitektur full-stack, seluruh fungsi dapat diimplementasikan memakai background worker thread

Integrasi native

  • Generasi kode otomatis mengubah antarmuka TypeScript menjadi binding Kotlin, Objective-C, dan Swift
  • Melalui modul Polyglot, dapat langsung mengakses API platform dan library native pihak ketiga
  • Komunikasi dua arah memungkinkan pertukaran struktur data kompleks dan callback dengan aman
  • Mendukung protobuf untuk serialisasi data yang efisien

Stabilitas dan fitur yang telah terbukti

  • Teknologi inti yang menjalankan fitur-fitur produksi utama Snap
  • Mendukung animasi lanjutan, rendering real-time, dan sistem gesture kompleks
  • Mencakup beragam fitur seperti layout Flexbox, worker multithread, animasi native, pengenalan gesture lanjutan, framework pengujian bawaan, dan build terintegrasi Bazel

Dukungan dan lisensi

  • Menyediakan dukungan melalui komunitas Discord
  • Dirilis di bawah lisensi MIT, sehingga bebas digunakan dan dikontribusikan

Bacaan terkait

2 komentar

 
GN⁺ 2025-11-09
Komentar Hacker News

  • Perusahaan kami menggunakan React Native, dan kami sangat berharap bisa lepas dari perbedaan bahasa antara app store dan tiap platform.
    Tahun depan kami mempertimbangkan untuk berbasis situs web saja, lalu aplikasi mobile cukup dibungkus dengan WebView, sementara fitur seperti notifikasi, GPS, dan HealthKit ditangani dengan kode native.
    Belakangan ini saya juga merasa, berkat AI, mungkin justru lebih baik membuat UI terpisah untuk tiap platform.

    • Saya juga pernah melakukan itu, dan tidak menyesal. Ini yang biasa disebut “aplikasi WebView”, tetapi tetap bisa memberi pengalaman yang cukup baik di tiap platform.
      Kuncinya adalah jangan membuat komponen UI terlalu unik, dan cukup sesuaikan sedikit hal-hal seperti gaya tombol atau back stack di masing-masing platform.
      Kami juga menambahkan fungsi offline dengan Service Worker, dan menjalankan alat diagnostik jaringan saat aplikasi dimulai agar masalah bisa cepat terdeteksi.
      Tapi aplikasi saya memang untuk B2B, jadi pendekatan seperti ini memungkinkan.
    • Namun kalau pada akhirnya WebView tetap harus dibungkus dalam kontainer native, pada titik itu Anda sebenarnya sudah masuk ke neraka code signing iOS.
      Saya menganggap web pada dasarnya adalah jalan untuk menghindari app store dan code signing.
      Sebagian besar fitur tetap bisa dibuat di web, dan HealthKit saja yang ditangani lewat aplikasi pendamping terpisah.
      Menggunakan anggaran pemasaran untuk mempromosikan QR code atau tautan mungkin jauh lebih efisien daripada bersaing di app store.
    • Saya juga mencoba hal seperti ini tiap 10 tahun sekali. Awalnya saya selalu terpikat oleh kecepatan pengembangan, tetapi pada akhirnya harus membayar mahal saat ingin mengintegrasikan fitur OS baru atau menangani gesture.
      Khususnya di iOS, begitu tidak ada ‘swipe back’, kita langsung tahu itu WebView.
    • AI tidak akan mengubah pedoman Apple.
      Saya menulis UI bisnis sekali lalu memakai LLM untuk mengonversinya antara React Native dan React.
      Tapi Apple tetap mempertahankan aturan 4.2 tentang fungsionalitas minimum yang menyatakan “aplikasi yang sekadar membungkus situs web akan ditolak”.
    • Menulis aplikasi yang kompleks dan berumur panjang tiga kali untuk tiap platform itu nyaris seperti mimpi buruk.
      Fitur dan pengujian harus disinkronkan di tiga platform, dan pengembang juga harus menguasai beberapa stack.
      Sebagian besar pengguna hampir tidak merasakan perbedaan antara implementasi WebView yang bagus dan aplikasi native, tetapi biayanya terlalu besar.

  • Secara konsep Valdi tampak mirip dengan React Native.
    Sekarang sudah ada tiga framework lintas platform berbasis React: React Native, Lynx.js(ByteDance/TikTok), dan Valdi.
    Persaingan itu bagus, tetapi saya ragu apakah Valdi bisa cepat membangun ekosistem sebesar RN.
    RN tahun ini sudah banyak berkembang dengan peningkatan engine Hermes, generator binding native, animasi multi-thread, dan dukungan Tailwind.
    Lynx.js mungkin bahkan lebih diuntungkan karena mencoba mendukung framework selain React.

    • Setelah saya cari sedikit, ternyata Valdi mendukung debugging VSCode secara penuh.
      Radon IDE milik RN berbayar, sedangkan Valdi open source.
      Menarik juga bahwa Valdi menggunakan engine Hermes milik RN.
      Dari dokumentasi terkait, saya jadi penasaran bagaimana AOT/JIT diimplementasikan.

  • Dulu saya pernah ikut melakukan debugging pada versi awal proyek ini di Snap (Screenshop!).
    Simon adalah engineer yang hebat, dan saya sangat senang proyek ini akhirnya dipublikasikan.
    Selamat untuk tim Snap.

    • Saya justru terkejut Snap, yang aplikasinya tampak sederhana, berinvestasi pada framework UI lintas platform.
      Itu lebih mengejutkan lagi karena ini aplikasi yang sangat bergantung pada integrasi native seperti kamera, AR, notifikasi, dan deteksi screenshot.
    • Bahkan saat itu pun ini proyek yang sangat keren, dan saya ingat targetnya memang untuk dibuka sebagai open source.
      Senang melihat itu akhirnya jadi kenyataan.
    • Saya juga pernah bekerja dengan Simon dan mencoba melakukan porting ke web, tetapi gagal.
      Dia memang sangat pintar, dan selamat untuk seluruh tim.
    • Saya penasaran apakah sekarang framework ini akan benar-benar dipakai di proyek nyata.
    • Nama “Composer” teringat lagi.

  • Framework UI buatan Snapchat dengan komunitas Discord? Secara pribadi sama sekali tidak menarik bagi saya.

    • Belakangan ini banyak proyek memindahkan komunitasnya ke Discord.
      Memang tidak sempurna, tetapi bisa jadi kita justru menyingkirkan diri sendiri dari arus masa depan.
    • Saya juga sering memakai Discord, tetapi sebagai komunitas untuk kerja tetap terasa tidak nyaman.

  • Di dokumentasi tertulis “jika objek C++, Objective-C, Kotlin diekspos ke TypeScript maka itu Native Reference, sebaliknya itu JS Value Reference”, tetapi
    tidak adanya penyebutan Swift atau SwiftUI agak membuat khawatir.

  • Sejujurnya sulit bagi saya mempercayai framework buatan Snap.
    Soalnya kualitas aplikasi Android mereka dulu sangat buruk.

    • Saya kaget waktu tahu dulu itu bukan benar-benar mengambil foto, melainkan mengambil screenshot dari tampilan kamera.

  • Valdi diperkenalkan sebagai “framework UI yang ditulis sekali dalam TypeScript lalu berjalan dengan performa native di iOS, Android, dan macOS”.
    Mereka menekankan bahwa tidak ada webview maupun JS bridge.

    • Dia bercanda dengan kalimat, “Kami punya keduanya. Country dan western!”

  • Menurut saya, cukup menulis UI dua kali dalam bahasa native masing-masing platform, lalu berbagi logika umum lewat FFI keluarga C.
    Memangnya sesulit apa?

    • Kami juga sedang menuju ke arah itu. Saat ini baru mendukung iOS, tetapi setelah mendapat masukan pengguna kami berencana memperluas ke Android.
      Sebagian besar tim kami pengguna Android, tetapi pelanggan kami lebih berpusat di iOS, jadi prioritasnya seperti itu.
      Saya pernah membuat aplikasi RN, tetapi masih berharap ada solusi lintas platform yang benar-benar terasa seperti sihir.
    • Saya juga setuju. Kuncinya adalah merancang arsitektur yang memisahkan logika bisnis dari UI.
      Dengan begitu, beragam antarmuka seperti web, mobile, desktop, dan CLI hanya menjadi lapisan tipis yang memanggil core.
      Mungkin sulit mendapatkan UX yang sepenuhnya konsisten, tetapi dalam jangka panjang ini bisa mengurangi ketergantungan pada framework pihak ketiga.

  • Jika penasaran dengan cara Valdi mengelola state, pendekatannya memakai gaya class component React apa adanya.
    Dari contoh dokumentasi resmi, strukturnya adalah mewarisi StatefulComponent lalu mengimplementasikan onCreate, onDestroy, dan onRender.

    • Saya juga merindukan React class component.
      Cara sekarang yang memakai puluhan useFunction terasa lebih mudah salah dan lebih rumit.

  • Sayangnya target Linux, Windows, dan HTML tidak didukung.
 
clastneo 2025-11-10

Di RN, untuk sebagian besar aplikasi, logika bisnis aplikasi biasanya bisa berjalan cukup cepat hanya dengan JS saja.
Saat masuk tahap polishing, menurut saya masalahnya jadi sangat sulit diselesaikan karena "sering ada perbedaan perilaku di tiap platform".