Desain Sekali, Jalankan Di Mana Saja: Satu File UI di Web, iOS, dan Android
Apa yang benar-benar diperlukan untuk mendesain sekali dan menjalankan UI di web, iOS, dan Android: tata letak dan gerakan bersama, bagian spesifik platform, pengujian, dan kesesuaian ExodeUI.
Pengambilan Inti
Desain sekali, dijalankan di mana saja berarti satu file sumber mendeskripsikan komponen UI dan setiap platform memainkannya dengan runtime, alih-alih membuat ulang gerakan yang sama di React, SwiftUI, dan Flutter. Ini berfungsi ketika tata letak, status, gerakan, dan input ada di file bersama, dan tetap jujur saat navigasi, aksesibilitas, dan gerakan sistem tetap spesifik pada platform. ExodeUI mendukung model ini dengan paket runtime untuk React, Vue, Svelte, Angular, Solid, React Native, SwiftUI dan Flutter.
Apa yang sebenarnya dibutuhkan oleh "desain sekali, dijalankan di mana saja".
Ini membutuhkan lebih dari sekedar tombol ekspor. File yang dibagikan harus menjelaskan bagaimana komponen ditata dalam berbagai ukuran, seperti apa tampilannya di setiap negara bagian, bagaimana komponen tersebut berpindah antar negara bagian, dan bagaimana aplikasi menggerakkannya dengan input. Setiap platform juga memerlukan runtime yang dapat memutar file dan menghubungkan input tersebut dengan kejadian nyata. Jika salah satu dari bagian tersebut hilang, janji tersebut berubah menjadi penyerahan yang lain.
File bersama vs pembangunan kembali per platform
Cara tradisionalnya adalah mendesain sekali dan membangun kembali tiga kali: web di CSS dan JavaScript, iOS di SwiftUI, dan Android di Kotlin atau Flutter. Setiap pembangunan kembali menimbulkan perbedaan kecil dalam waktu, jarak, dan penanganan gerakan. Rute file bersama menyimpan definisi komponen di satu tempat dan memungkinkan setiap platform memainkannya. Kerugiannya adalah runtime berada di antara file dan platform, jadi Anda menyerahkan kendali langsung atas rendering khusus platform.
Apa yang harus tetap spesifik pada platform
Komponen bersama tidak boleh berpura-pura bahwa setiap platform adalah sama. Pola navigasi, gerakan mundur, dialog sistem, izin, dan API aksesibilitas berbeda-beda. File yang dibagikan harus memiliki komponen visual interaktif; aplikasi host harus memiliki platform chrome dan kontrol semantik di sekitarnya. Misalnya, tombol animasi bersama dapat ditempatkan di dalam elemen tombol asli yang memperlihatkan peran dan label yang tepat.
Cara kerja runtime
Runtime membaca file, membuat pohon visual, dan memperbaruinya saat input berubah. Kode aplikasi Anda mengatur input seperti ditekan, dinonaktifkan, atau dimuat, dan mendengarkan kejadian seperti konfirmasi atau penolakan. Karena definisi visualnya adalah data, bukan kode tulisan tangan per platform, runtime-lah yang menjadikan file yang sama dapat dibawa-bawa. Runtime juga merupakan ketergantungan, jadi ukurlah pengaruhnya pada build Anda sendiri daripada berasumsi bahwa itu gratis.
Menguji file yang sama di setiap lingkungan
Uji file di mana ia akan dijalankan, tidak hanya di editor. Periksa tata letak pada ukuran terkecil dan terbesar yang didukung, verifikasi setiap keadaan dengan konten nyata, dan uji input sentuh, mouse, dan keyboard secara terpisah. Kemudian periksa aksesibilitas: urutan fokus, label, pengurangan gerakan, dan perilaku pembaca layar. File bersama mengurangi penyimpangan visual, namun tidak menghilangkan kebutuhan untuk menguji setiap platform.
Dimana ExodeUI cocok
ExodeUI menyimpan komponen dalam file .exode yang terbuka dan menyediakan paket runtime untuk React, Vue, Svelte, Angular, Solid, React Native, SwiftUI dan Flutter. File tersebut dapat mencakup tata letak dan titik henti sementara, garis waktu, mesin status, fisika pegas, masukan, dan peristiwa. File yang sama dapat diedit di browser atau editor desktop, dan alat pengkodean AI dapat mengerjakannya melalui server MCP.
Kapan tidak menggunakan satu file bersama
File bersama tidak cocok jika antarmuka sangat bergantung pada API khusus platform, saat Anda memerlukan kontrol tingkat piksel atas rendering asli, atau saat komponennya sebagian besar berupa video atau adegan 3D. Ini juga tidak cocok jika tim Anda tidak dapat menguji setiap target. Dalam kasus tersebut, kode khusus platform adalah pilihan yang tepat, dan file yang dibagikan hanya boleh mencakup bagian yang benar-benar mendapat manfaat darinya.
Cuplikan Implementasi Produksi
import { ExodeUICanvas } from 'exodeui';
// The same component file can be played by the runtime your app already uses.
// Web, React Native, SwiftUI and Flutter packages read the same .exode source.
export function ShareSheet({ open, progress, onClose }) {
return (
<ExodeUICanvas
src="/share_sheet.exode"
inputs={{ open, progress }}
onTrigger={(name) => name === 'close' && onClose()}
/>
);
}Kunci Principles untuk Diingat
- Desain sekali dan dijalankan di mana saja memerlukan tata letak, status, gerakan, dan masukan bersama, ditambah waktu proses per platform
- API navigasi, izin, dan aksesibilitas harus tetap spesifik pada platform
- Runtime adalah ketergantungan; ukur pengaruhnya terhadap bangunan Anda
- Uji setiap target untuk tata letak, masukan, gerakan, dan aksesibilitas
- ExodeUI menyediakan runtime untuk React, Vue, Svelte, Angular, Solid, React Native, SwiftUI dan Flutter