Bir Kez Tasarlayın, Her Yerde Çalıştırın: Web, iOS ve Android Genelinde Tek Bir Kullanıcı Arayüzü Dosyası
Web, iOS ve Android'de bir kullanıcı arayüzünü bir kez tasarlamak ve çalıştırmak için gerçekten gerekenler: paylaşılan düzen ve hareket, platforma özgü parçalar, testler ve ExodeUI'in sığacağı yer.
Ana nokta
Bir kez tasarla, her yerde çalıştır, React, SwiftUI ve Flutter'te aynı hareketi yeniden oluşturmak yerine, tek bir kaynak dosyasının bir UI bileşenini tanımlaması ve her platformun onu bir çalışma zamanı ile oynatması anlamına gelir. Düzen, durumlar, hareket ve girişler paylaşılan dosyada bulunduğunda çalışır ve gezinme, erişilebilirlik ve sistem hareketleri platforma özel kaldığında dürüst kalır. ExodeUI, bu modeli React, Vue, Svelte, Angular, Solid, React Native, SwiftUI ve Flutter çalışma zamanı paketleriyle destekler.
"Bir kez tasarla, her yerde çalıştır" aslında neyi gerektirir?
Bir dışa aktarma düğmesinden daha fazlasını gerektirir. Paylaşılan dosya, bileşenin farklı boyutlarda nasıl düzenlendiğini, her durumda nasıl göründüğünü, durumlar arasında nasıl hareket ettiğini ve uygulamanın onu girdilerle nasıl yönlendirdiğini açıklamalıdır. Her platformun ayrıca dosyayı oynatabilen ve bu girdileri gerçek olaylara bağlayabilen bir çalışma zamanına ihtiyacı vardır. Bu parçalardan herhangi biri eksikse, söz başka bir el değiştirmeye dönüşür.
Paylaşılan dosya ve platform başına yeniden oluşturma karşılaştırması
Geleneksel rota bir kez tasarlamak ve üç kez yeniden inşa etmektir: CSS ve JavaScript'te web, SwiftUI'te iOS ve Kotlin veya Flutter'te Android. Her yeniden oluşturma, zamanlama, aralık ve hareket kullanımında küçük farklılıklar ortaya çıkarır. Paylaşılan bir dosya yolu, bileşen tanımını tek bir yerde tutar ve her platformun onu oynatmasına olanak tanır. Buradaki takas, dosya ile platform arasında bir çalışma zamanının bulunmasıdır, dolayısıyla platforma özgü oluşturma üzerinde bazı doğrudan kontrollerden vazgeçersiniz.
Neler platforma özgü kalmalı?
Paylaşılan bir bileşen, her platformun aynı olduğunu iddia etmemelidir. Gezinme kalıpları, geri hareketler, sistem diyalogları, izinler ve erişilebilirlik API'leri farklılık gösterir. Paylaşılan dosya etkileşimli görsel bileşene sahip olmalıdır; ana bilgisayar uygulaması, platform kromuna ve etrafındaki anlamsal kontrollere sahip olmalıdır. Örneğin, paylaşılan bir animasyonlu düğme, doğru rolü ve etiketi ortaya çıkaran yerel bir düğme öğesinin içine yerleştirilebilir.
Çalışma zamanları nasıl çalışır?
Bir çalışma zamanı dosyayı okur, görsel ağacı oluşturur ve girişler değiştikçe onu günceller. Uygulama kodunuz, basıldı, devre dışı bırakıldı veya yükleniyor gibi girişleri ayarlar ve onaylama veya reddetme gibi olayları dinler. Görsel tanım, platform başına elle yazılan kod yerine veri olduğundan, aynı dosyayı taşınabilir kılan şey çalışma zamanıdır. Çalışma zamanı da bir bağımlılıktır, bu nedenle ücretsiz olduğunu varsaymak yerine kendi yapınız üzerindeki etkisini ölçün.
Aynı dosyayı her ortamda test etme
Dosyayı yalnızca düzenleyicide değil, çalışacağı yerde test edin. Düzeni desteklenen en küçük ve en büyük boyutlarda kontrol edin, her durumu gerçek içerikle doğrulayın ve dokunma, fare ve klavye girişini ayrı ayrı test edin. Ardından erişilebilirliği kontrol edin: odak sırası, etiketler, azaltılmış hareket ve ekran okuyucu davranışı. Paylaşılan bir dosya görsel kaymayı azaltır ancak her platformun test edilmesi ihtiyacını ortadan kaldırmaz.
ExodeUI'in sığdığı yer
ExodeUI, bir bileşeni açık bir .exode dosyasında saklar ve React, Vue, Svelte, Angular, Solid, React Native, SwiftUI ve Flutter için çalışma zamanı paketleri sağlar. Dosya düzen ve kesme noktalarını, zaman çizelgelerini, durum makinelerini, yay fiziğini, girdileri ve olayları içerebilir. Aynı dosya tarayıcıda veya masaüstü düzenleyicide düzenlenebilir ve MCP sunucusu aracılığıyla AI kodlama araçları üzerinde çalışabilir.
Paylaşılan bir dosya ne zaman kullanılmamalıdır?
Arayüz büyük ölçüde yalnızca platform API'lerine bağlı olduğunda, yerel işleme üzerinde piksel düzeyinde kontrole ihtiyaç duyduğunuzda veya bileşen çoğunlukla bir video veya 3D sahne olduğunda, paylaşılan bir dosya uygun değildir. Ayrıca ekibinizin her hedefi test edememesi de kötü bir uyumdur. Bu durumlarda, platforma özgü kod dürüst bir seçimdir ve paylaşılan bir dosya yalnızca ondan gerçekten yararlanan kısımları kapsamalıdır.
Üretim için uygulama örneği
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()}
/>
);
}Hatırlanacak temel ilkeler
- Bir kez tasarlayın ve her yerde çalıştırın; paylaşılan düzen, durumlar, hareket ve girişlerin yanı sıra platform başına bir çalışma süresi gerektirir
- Gezinme, izinler ve erişilebilirlik API'leri platforma özel kalmalıdır
- Çalışma zamanı bir bağımlılıktır; yapınız üzerindeki etkisini ölçün
- Her hedefi düzen, giriş, hareket ve erişilebilirlik açısından test edin
- ExodeUI, React, Vue, Svelte, Angular, Solid, React Native, SwiftUI ve Flutter için çalışma zamanları sağlar