Jeden plik do projektowania interfejsu użytkownika: jak pojedynczy otwarty plik zastępuje przekazanie
Jednoplikowy proces projektowania interfejsu użytkownika pozwala zachować układ, stany, ruch, logikę i powiązania danych w jednym otwartym pliku. Co zmienia, czego nie rozwiązuje i jak ExodeUI to wykorzystuje.
Rdzeń na wynos
Jednoplikowy proces projektowania interfejsu użytkownika utrzymuje układ, stany interakcji, ruch, logikę i powiązania danych komponentu w jednym otwartym pliku, zamiast rozkładać je w pliku projektu, prototypie i bazie kodu. Plik staje się tym, co edytują projektanci, przeglądają programiści, a agenci AI mogą czytać. ExodeUI wykorzystuje ten model: plik .exode opisuje komponent, a pakiety wykonawcze odtwarzają go w aplikacji.
Co oznacza „jeden plik” w projektowaniu interfejsu użytkownika?
Oznacza to, że komponent ma jedno wiarygodne źródło. Obszary robocze, stany najechania i naciśnięcia, wartości sprężyn, warunki decydujące o tym, który stan będzie następny, a także dane wejściowe, które aplikacja może ustawić, wszystkie znajdują się w tym samym dokumencie. Nic ważnego nie zostaje pozostawione w osobnej notatce o przekazaniu. Gdy plik się zmienia, komponent się zmienia.
Problem przekazywania został usunięty przez jeden plik
W typowym przekazaniu projektant dostarcza plik statyczny, prototyp i pisemny opis ruchu. Programista odbudowuje ten ruch w kodzie, a obie wersje natychmiast dryfują. Przepływ pracy z jednym plikiem eliminuje etap przebudowy dla części objętych plikiem. Nie eliminuje to potrzeby recenzowania, ale daje recenzentom ten sam artefakt zamiast dwóch jego opisów.
Co trafia do otwartego pliku projektu interfejsu użytkownika
Dokładna struktura zależy od narzędzia, ale przydatny plik obejmuje te same zadania:
- Układ, w tym punkty przerwania i sposób ponownego przepływu komponentu
- Stany interakcji, takie jak bezczynność, najechanie myszką, naciśnięcie, ładowanie, sukces i błąd
- Ruch, w tym osie czasu, fizyka sprężyn i przejścia między stanami
- Logika i warunki decydujące o tym, który stan jest aktywny
- Dane wejściowe i zdarzenia, dzięki którym kod aplikacji może sterować komponentem i reagować na niego
- Powiązania danych dla wartości pochodzących z aplikacji w czasie wykonywania
Co pozostaje poza plikiem
Plik komponentowy nie jest całą aplikacją. Routing, uwierzytelnianie, pobieranie danych, uprawnienia, analityka i opakowanie dotyczące dostępności wokół interaktywnej kontroli pozostają w Twojej bazie kodu. Nawigacja po platformie i gesty systemowe zwykle również są specyficzne dla platformy. Jasność co do tej granicy ma znaczenie: łatwiej jest przyjąć jednoplikowy przepływ pracy, który obsługuje komponent interaktywny i pozostawia aplikacji problemy związane z aplikacją.
Czy zespół może przejrzeć jeden plik?
Tak, jeśli format jest otwarty i czytelny. ExodeUI przechowuje komponent w otwartym pliku .exode JSON, dzięki czemu zmiany można różnicować, przeglądać i przechowywać w kontroli wersji. Jest to praktyczna przewaga nad plikami projektów binarnych: recenzent może zobaczyć, co zmieniło się w pliku, a narzędzie do kodowania AI może to odczytać bez zastrzeżonego dekodera. Otwartość nie odpowiada na wszystkie pytania związane z zarządzaniem, ale umożliwia przegląd.
Jak ExodeUI wykorzystuje jeden plik
W ExodeUI plik .exode może przechowywać układ, punkty przerwania, osie czasu, maszyny stanowe, fizykę sprężyn, logikę, dane wejściowe i powiązania danych. Pakiety wykonawcze odtwarzają plik w formatach React, Vue, Svelte, Angular, Solid, React Native, SwiftUI i Flutter. Twój kod przekazuje dane wejściowe i odbiera zdarzenia z powrotem, zamiast ponownie formułować ruch. Ten sam plik można otworzyć w przeglądarce lub edytorze na komputerze, a narzędzia do kodowania AI mogą go edytować za pośrednictwem serwera MCP.
Kiedy jeden plik to zły wybór
Jeden plik nie nadaje się do pracy, która nie jest komponentem interaktywnym: długie wideo, ciężkie sceny 3D lub tablica o dowolnym kształcie do wczesnego tworzenia pomysłów. Nie jest to również odpowiednie rozwiązanie, gdy zespół nie ma procesu przeglądu i potrzebuje jednego pliku, aby samodzielnie egzekwować standardy. Format może ułatwić stosowanie dobrych praktyk. Nie może zastąpić praktyki.
Fragment wdrożenia produkcyjnego
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()}
/>
);
}Klucz Principles do zapamiętania
- Jednoplikowy przepływ pracy pozwala zachować układ, stany, ruch, logikę i dane wejściowe w jednym wiarygodnym dokumencie
- Eliminuje to etap przebudowy komponentu interaktywnego, a nie potrzebę przeglądania
- Problemy z aplikacjami, takie jak routing, uwierzytelnianie i pobieranie danych, pozostają w bazie kodu
- Otwarty plik źródłowy JSON można różnicować, wersjonować i odczytywać za pomocą narzędzi AI
- ExodeUI odtwarza ten sam plik .exode w środowiskach wykonawczych w środowiskach internetowych, mobilnych i stacjonarnych