- Vercel, perusahaan yang berfokus pada web, bereksperimen dengan berbagai tech stack dan pola UI dengan target pengalaman native setara Apple Design Award, lalu akhirnya merampungkannya dengan kombinasi React Native + Expo
- Intinya adalah pengalaman pembuatan berbasis chat AI di mana ide ditulis seperti memo lalu dibuat di latar belakang; detail seperti animasi pesan, scroll, keyboard, hingga composer Liquid Glass dirancang dengan cermat untuk mewujudkan interaksi chat setingkat native iOS
- Pada implementasi chat, Vercel mengandalkan kombinasi context dan hook berbasis LegendList, Reanimated, react-native-keyboard-controller, serta perhitungan
blankSize dan contentInset, sinkronisasi tinggi composer, dan lain-lain untuk menangani tinggi dinamis dan perubahan keyboard secara mulus
- Struktur kode dirancang agar type, business logic, dan layer API dibagikan antara web dan native; dengan alur skema OpenAPI berbasis Zod → Hey API → Tanstack Query, baik web v0 maupun pelanggan v0 Platform API menggunakan endpoint yang sama
Gambaran umum dan tujuan aplikasi v0 iOS
- Vercel merilis v0 for iOS, aplikasi mobile pertamanya, dan meski merupakan perusahaan yang berpusat pada web, mereka menetapkan target untuk menghadirkan pengalaman native berkualitas tinggi dengan standar Apple Design Award
- Sampai sebelum peluncuran aplikasi iOS, mereka berfokus pada web, sehingga pengembangan aplikasi native sepenuhnya merupakan wilayah baru
- Untuk itu, sebelum beta publik mereka menguji puluhan versi dengan berbagai tech stack dan pola UI yang berbeda
- Sebagai referensi, mereka mengambil inspirasi dari Apple Notes dan iMessage, yakni aplikasi yang sangat fasih memakai bahasa iPhone, dan menuntut tingkat penyelesaian yang layak berada berdampingan dengan aplikasi lain di layar utama
- Mereka menjelaskan bahwa keputusan akhir tidak diambil dengan terpaku pada framework tertentu, melainkan setelah mengimplementasikan dan membandingkan berbagai stack secara nyata
- Setelah berbagai eksperimen, mereka akhirnya memilih React Native + Expo, dan banyak developer memberi umpan balik bahwa hasilnya terasa seperti aplikasi native, yang kemudian mendorong mereka membagikan struktur teknisnya secara rinci
Arah pengalaman chat v0
- v0 iOS ditujukan sebagai alat untuk mengubah ide yang muncul saat jauh dari komputer menjadi sesuatu yang langsung bisa diwujudkan, dan diposisikan sebagai generasi berikutnya dari aplikasi memo
- Alih-alih memindahkan mobile IDE atau seluruh fitur seperti di web, mereka memprioritaskan pengalaman sederhana dan menyenangkan untuk membuat sesuatu dengan AI saat bepergian
- Pusat dari pengalaman ini adalah antarmuka chat, dengan kebutuhan yang dirangkum sebagai berikut
- Pesan baru harus muncul dengan animasi yang halus
- Pesan pengguna yang baru harus discroll hingga terlihat di bagian atas layar
- Pesan asisten harus ditampilkan sambil streaming dengan fade-in bertahap (streaming + delay)
- Kolom input (composer) harus melayang dengan gaya Liquid Glass, di atas konten yang bisa discroll
- Saat membuka chat yang sudah ada, tampilan harus dimulai dalam keadaan sudah tergulir sampai pesan terakhir
- Perilaku keyboard harus terasa alami dan mendekati native
- Input teks harus mendukung paste gambar dan file serta focus/blur dengan gesture pan
- Rendering Markdown harus cepat sekaligus mendukung komponen dinamis
- Meski pola UI chat AI di mobile sudah banyak, pola mobile untuk AI code generation belum tersedia, sehingga mereka harus merancang pola baru sendiri, dan dibutuhkan banyak pekerjaan, pengujian, serta penyesuaian untuk memenuhi standar tersebut
Merancang arsitektur chat yang composable
- Untuk memenuhi kebutuhan chat, kode chat dirancang agar bisa dikombinasikan (composable) berdasarkan fungsi
- Untuk itu, mereka membuat beberapa Context Provider yang membungkus keseluruhan chat, lalu menempatkan daftar pesan di dalamnya
- Implementasi chat menggunakan library open source berikut
- LegendList: rendering daftar berperforma tinggi
- React Native Reanimated: animasi dan shared value
- react-native-keyboard-controller: kontrol status keyboard dan penanganan event
- Rendering tiap pesan bercabang berdasarkan
item.role menjadi user / assistant / optimistic-placeholder, sehingga tiap peran memakai komponen yang berbeda
Implementasi animasi pesan
- Pesan pengguna pertama dibuat fade-in secara halus dengan shared value Reanimated
- Hook
useFirstMessageAnimation menghitung tinggi pesan, tinggi layar, dan tinggi keyboard untuk mengontrol translateY dan opacity
- Pesan asisten pertama melakukan fade-in tertunda setelah animasi pesan pengguna selesai
- Pada chat yang sudah ada,
scrollToEnd() dan penyesuaian contentInset digunakan untuk menempatkan pesan baru secara natural di bagian atas layar
Kontrol scroll dan keyboard
- Kualitas pengalaman chat sangat bergantung pada kealamian perilaku keyboard, dan menghadirkan nuansa keyboard yang mendekati native di React Native ternyata cukup menantang
- Karena adanya perbedaan antarversi iOS, muncul masalah ketidakstabilan perilaku keyboard,
dan mereka bekerja sama dengan maintainer react-native-keyboard-controller untuk memperbaiki bug dan meningkatkan performa
- Melalui hook
useKeyboardAwareMessageList, mereka mengontrol secara rinci event keyboard saat terbuka, tertutup, dan diseret
- Saat membuka chat yang sudah ada, untuk menyesuaikan posisi auto-scroll mereka memanggil
scrollToEnd beberapa kali guna mengatasi masalah tinggi dinamis
Liquid Glass Floating Composer dan peningkatan kolom input
- Dengan menerapkan efek Liquid Glass ala iMessage, mereka membuat kolom input semi-transparan yang melayang
KeyboardStickyView dan shared value composerHeight dipakai untuk menyesuaikan contentInset pada scroll view secara real time
- Untuk mempertahankan auto-scroll saat tinggi kolom input berubah, mereka menggunakan hook
useScrollWhenComposerSizeUpdates
- Untuk mengatasi masalah bounce scroll dan tampilnya indikator pada
TextInput bawaan, mereka menerapkan patch native RCTUITextView
- Juga ditingkatkan agar fokus keyboard bisa dilakukan lewat gesture swipe
Paste gambar dan fade-in konten streaming
- Melalui modul Expo, mereka mendeteksi event
UIPasteboard untuk mendukung paste teks, gambar, dan file
- Komponen FadeInStaggeredIfStreaming digunakan untuk mewujudkan fade-in per kata pada teks respons AI
- Dengan pengelolaan pool animasi, mereka membatasi jumlah animasi simultan dan mengoptimalkan performa
- Konten yang sudah pernah dilihat tidak dianimasikan ulang berkat
DisableFadeProvider
Berbagi kode antara web dan native serta Platform API
- Type dan helper function dibagikan antara web dan mobile, sementara UI dan state management dipisahkan
- Mereka membangun framework API type-safe berbasis Zod yang secara otomatis menghasilkan spesifikasi OpenAPI
- Aplikasi mobile melakukan panggilan API melalui Hey API + Tanstack Query
- Berdasarkan struktur ini, mereka merilis v0 Platform API, dan endpoint yang sama juga disediakan untuk developer eksternal
Styling dan komponen native
- react-native-unistyles digunakan untuk pengelolaan tema dan mendukung styling cepat tanpa akses Context
- Melalui Zeego, mereka mengimplementasikan menu berbasis
UIMenu native iOS
- Mereka memperbaiki bug posisi Alert yang muncul di iOS 26 dan juga mengirim kontribusi patch upstream ke React Native
- Masalah drag dan flickering terkait modal (formSheet) juga diperbaiki, bekerja sama dengan Callstack, Meta, dan Expo hingga masuk ke React Native 0.82
Rencana ke depan dan kolaborasi komunitas
- Setelah menyelesaikan aplikasi pertama dengan kombinasi React Native + Expo, mereka berencana tetap memakai stack yang sama untuk proyek berikutnya dan menyatakan puas dengan stack saat ini
- Vercel berfokus untuk mewujudkan produk ambisius dengan kualitas tinggi,
- dan menyatakan akan membuka pengetahuan internal yang mereka bangun sebagai open source agar developer web dan native dapat membuat produk dengan standar yang sama
- Secara khusus, mereka sedang merekrut komunitas untuk beta test library open source untuk aplikasi chat AI, dan akan terus berkontribusi pada peningkatan React Native
Belum ada komentar.