Kullanıcı Arayüzü Tasarımı için Tek Dosya: Tek Bir Açık Dosya Aktarımın Yerini Nasıl Alır?
Tek dosyalı bir kullanıcı arayüzü tasarımı iş akışı, düzeni, durumları, hareketi, mantığı ve veri bağlamalarını tek bir açık dosyada tutar. Neyi değiştirir, neyi çözmez ve ExodeUI'in bunu nasıl kullandığı.
Ana nokta
Tek dosyalı bir kullanıcı arayüzü tasarımı iş akışı, bir bileşenin düzenini, etkileşim durumlarını, hareketini, mantığını ve veri bağlantılarını bir tasarım dosyasına, bir prototipe ve bir kod tabanına yaymak yerine tek bir açık dosyada tutar. Dosya, tasarımcıların düzenlediği, geliştiricilerin incelediği ve yapay zeka temsilcilerinin okuyabildiği bir şey haline gelir. ExodeUI bu modeli kullanır: .exode dosyası bir bileşeni tanımlar ve çalışma zamanı paketleri onu uygulamada oynatır.
Kullanıcı arayüzü tasarımında "tek dosya" ne anlama geliyor?
Bu, bileşenin tek bir yetkili kaynağa sahip olduğu anlamına gelir. Çalışma yüzeyleri, fareyle üzerine gelme ve basılma durumları, yay değerleri, bir sonraki durumun hangi duruma geleceğini belirleyen koşullar ve uygulamanızın ayarlayabileceği girişlerin tümü aynı belgede yayınlanır. Ayrı bir devir notunda önemli hiçbir şey bırakılmaz. Dosya değiştiğinde bileşen de değişir.
Bir dosyanın ortadan kaldırdığı aktarım sorunu
Tipik bir aktarımda tasarımcı, statik bir dosyanın yanı sıra bir prototip ve hareketin yazılı bir tanımını sunar. Bir geliştirici koddaki bu hareketi yeniden oluşturur ve iki versiyon hemen değişir. Tek dosyalı iş akışı, dosyanın kapsadığı parçalar için yeniden oluşturma adımını kaldırır. İnceleme ihtiyacını ortadan kaldırmaz, ancak inceleyenlere iki açıklama yerine aynı yapıyı verir.
Açık bir kullanıcı arayüzü tasarım dosyasında neler bulunur?
Tam yapı araca bağlıdır, ancak kullanışlı bir dosya aynı işleri kapsar:
- Kesme noktaları ve bileşenin nasıl yeniden aktığı dahil düzen
- Boşta kalma, fareyle üzerine gelme, basılma, yükleme, başarı ve hata gibi etkileşim durumları
- Zaman çizelgeleri, bahar fiziği ve durumlar arasındaki geçişler dahil olmak üzere hareket
- Hangi durumun aktif olduğuna karar veren mantık ve koşullar
- Uygulama kodunun bileşeni yönlendirebilmesi ve ona tepki verebilmesi için girdiler ve olaylar
- Çalışma zamanında uygulamadan gelen değerler için veri bağlamaları
Dosyanın dışında kalanlar
Bir bileşen dosyası uygulamanın tamamı değildir. Yönlendirme, kimlik doğrulama, veri getirme, izinler, analizler ve etkileşimli bir kontrolün etrafındaki erişilebilirlik sarmalayıcısı kod tabanınızda kalır. Platform navigasyonu ve sistem hareketleri de genellikle platforma özel kalır. Bu sınır konusunda net olmak önemlidir: Tek dosyalı bir iş akışının benimsenmesi, etkileşimli bileşeni işlediğinde ve uygulamayla ilgili endişeleri uygulamaya bıraktığında daha kolaydır.
Bir ekip bir dosyayı inceleyebilir mi?
Evet, format açık ve okunabilirse. ExodeUI, bir bileşeni açık bir .exode JSON dosyasında saklar, böylece değişiklikler farklılaştırılabilir, incelenebilir ve sürüm kontrolünde tutulabilir. Bu, ikili tasarım dosyalarına göre pratik bir avantajdır: Gözden geçiren kişi dosyada neyin değiştiğini görebilir ve bir AI kodlama aracı, özel bir kod çözücü olmadan dosyayı okuyabilir. Açıklık her yönetişim sorusunu yanıtlamaz ancak incelemeyi mümkün kılar.
ExodeUI tek dosyayı nasıl kullanır?
ExodeUI'te bir .exode dosyası düzeni, kesme noktalarını, zaman çizelgelerini, durum makinelerini, bahar fiziğini, mantığı, girişleri ve veri bağlamalarını tutabilir. Çalışma zamanı paketleri dosyayı React, Vue, Svelte, Angular, Solid, React Native, SwiftUI ve Flutter'te oynatır. Kodunuz, hareketi yeniden düzenlemek yerine girdileri iletir ve olayları geri alır. Aynı dosya tarayıcıda veya masaüstü düzenleyicide açılabilir ve AI kodlama araçları, MCP sunucusu aracılığıyla dosyayı düzenleyebilir.
Bir dosya yanlış seçim olduğunda
Tek bir dosya, etkileşimli bir bileşen olmayan iş için pek uygun değildir: uzun biçimli video, ağır 3B sahneler veya erken fikir için serbest biçimli bir beyaz tahta. Ayrıca ekibin inceleme süreci olmadığı ve standartları tek başına uygulamak için tek bir dosyaya ihtiyaç duyduğu durumlarda bu durum uygun değildir. Format iyi uygulamaları kolaylaştırabilir. Pratiğin yerini alamaz.
Üretim için uygulama örneği
import { ExodeUICanvas } from 'exodeui';
// One component, one file. Layout, states, motion and logic stay in the
// .exode file; the app only supplies inputs and handles events.
export function CheckoutButton({ loading, disabled, onComplete }) {
return (
<ExodeUICanvas
src="/checkout_button.exode"
inputs={{ loading, disabled }}
onTrigger={(name) => name === 'complete' && onComplete()}
/>
);
}Hatırlanacak temel ilkeler
- Tek dosyalı iş akışı düzeni, durumları, hareketi, mantığı ve girişleri tek bir yetkili belgede tutar
- Etkileşimli bileşen için yeniden oluşturma adımını ortadan kaldırır, inceleme ihtiyacını ortadan kaldırır
- Yönlendirme, kimlik doğrulama ve veri getirme gibi uygulama endişeleri kod tabanınızda kalır
- Açık bir JSON kaynak dosyasının farklılaştırması yapılabilir, sürümü belirlenebilir ve yapay zeka araçları tarafından okunabilir
- ExodeUI, web, mobil ve masaüstü çerçevelerindeki çalışma zamanları aracılığıyla aynı .exode dosyasını oynatır