Thiết kế một lần, chạy mọi nơi: Một tệp giao diện người dùng trên web, iOS và Android
Những điều thực sự cần thiết để thiết kế một lần và chạy giao diện người dùng trên web, iOS và Android: bố cục và chuyển động được chia sẻ, các bộ phận dành riêng cho nền tảng, thử nghiệm và nơi ExodeUI phù hợp.
Điểm chính
Thiết kế một lần, chạy mọi nơi có nghĩa là một tệp nguồn mô tả một thành phần giao diện người dùng và mỗi nền tảng sẽ phát nó trong thời gian chạy, thay vì xây dựng lại cùng một chuyển động trong React, SwiftUI và Flutter. Nó hoạt động khi bố cục, trạng thái, chuyển động và đầu vào tồn tại trong tệp được chia sẻ và nó vẫn trung thực khi điều hướng, khả năng truy cập và cử chỉ hệ thống vẫn dành riêng cho nền tảng. ExodeUI hỗ trợ mô hình này với các gói thời gian chạy cho React, Vue, Svelte, Angular, Solid, React Native, SwiftUI và Flutter.
"Thiết kế một lần, chạy mọi nơi" thực sự yêu cầu những gì
Nó đòi hỏi nhiều hơn một nút xuất. Tệp được chia sẻ phải mô tả cách thành phần bố trí ở các kích thước khác nhau, nó trông như thế nào ở mỗi trạng thái, cách nó di chuyển giữa các trạng thái và cách ứng dụng điều khiển nó bằng đầu vào. Mỗi nền tảng cũng cần một thời gian chạy có thể phát tệp và kết nối những đầu vào đó với các sự kiện thực. Nếu thiếu bất kỳ phần nào trong số đó, lời hứa sẽ chuyển sang một lần chuyển giao khác.
Tệp được chia sẻ so với việc xây dựng lại trên mỗi nền tảng
Lộ trình truyền thống là thiết kế một lần và xây dựng lại ba lần: web trong CSS và JavaScript, iOS trong SwiftUI và Android trong Kotlin hoặc Flutter. Mỗi lần xây dựng lại đều có những khác biệt nhỏ về thời gian, khoảng cách và cách xử lý cử chỉ. Tuyến tệp được chia sẻ giữ định nghĩa thành phần ở một nơi và cho phép mỗi nền tảng phát nó. Sự đánh đổi là thời gian chạy nằm giữa tệp và nền tảng, do đó bạn từ bỏ một số quyền kiểm soát trực tiếp đối với việc hiển thị dành riêng cho nền tảng.
Những gì nên dành riêng cho nền tảng
Thành phần dùng chung không nên coi như mọi nền tảng đều giống nhau. Các mẫu điều hướng, cử chỉ quay lại, hộp thoại hệ thống, quyền và API trợ năng khác nhau. Tệp được chia sẻ phải sở hữu thành phần trực quan tương tác; ứng dụng máy chủ phải sở hữu nền tảng chrome và các điều khiển ngữ nghĩa xung quanh nó. Ví dụ: nút hoạt ảnh được chia sẻ có thể nằm bên trong thành phần nút gốc hiển thị đúng vai trò và nhãn.
Thời gian chạy hoạt động như thế nào
Thời gian chạy sẽ đọc tệp, xây dựng cây trực quan và cập nhật nó khi đầu vào thay đổi. Mã ứng dụng của bạn đặt các đầu vào như được nhấn, tắt hoặc đang tải và lắng nghe các sự kiện như xác nhận hoặc loại bỏ. Vì định nghĩa trực quan là dữ liệu chứ không phải mã viết tay trên mỗi nền tảng nên thời gian chạy là yếu tố làm cho cùng một tệp có thể di động được. Thời gian chạy cũng là một phần phụ thuộc, vì vậy hãy đo lường tác động của nó đối với bản dựng của riêng bạn thay vì cho rằng nó miễn phí.
Kiểm tra cùng một tệp trên mọi môi trường
Kiểm tra tệp nơi nó sẽ chạy, không chỉ trong trình chỉnh sửa. Kiểm tra bố cục ở kích thước được hỗ trợ nhỏ nhất và lớn nhất, xác minh mọi trạng thái bằng nội dung thực và kiểm tra riêng thao tác nhập bằng cảm ứng, chuột và bàn phím. Sau đó kiểm tra khả năng truy cập: thứ tự lấy nét, nhãn, giảm chuyển động và hoạt động của trình đọc màn hình. Tệp được chia sẻ làm giảm hiện tượng lệch hình ảnh nhưng không loại bỏ nhu cầu kiểm tra từng nền tảng.
Trường hợp ExodeUI phù hợp
ExodeUI lưu trữ một thành phần trong tệp .exode đang mở và cung cấp các gói thời gian chạy cho React, Vue, Svelte, Angular, Solid, React Native, SwiftUI và Flutter. Tệp có thể bao gồm bố cục và điểm dừng, dòng thời gian, máy trạng thái, vật lý lò xo, đầu vào và sự kiện. Tệp tương tự có thể được chỉnh sửa trong trình duyệt hoặc trình chỉnh sửa trên máy tính để bàn và các công cụ mã hóa AI có thể hoạt động trên tệp đó thông qua máy chủ MCP.
Khi không sử dụng một tập tin được chia sẻ
Tệp được chia sẻ không phù hợp khi giao diện phụ thuộc nhiều vào API chỉ dành cho nền tảng, khi bạn cần kiểm soát mức pixel đối với hiển thị gốc hoặc khi thành phần chủ yếu là video hoặc cảnh 3D. Nó cũng không phù hợp nếu nhóm của bạn không thể kiểm tra từng mục tiêu. Trong những trường hợp đó, mã dành riêng cho nền tảng là lựa chọn trung thực và tệp được chia sẻ chỉ nên bao gồm những phần thực sự được hưởng lợi từ nó.
Đoạn mã triển khai thực tế
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()}
/>
);
}Nguyên tắc chính cần nhớ
- Thiết kế một lần và chạy ở mọi nơi cần chia sẻ bố cục, trạng thái, chuyển động và đầu vào, cộng với thời gian chạy trên mỗi nền tảng
- API điều hướng, quyền và khả năng truy cập phải dành riêng cho nền tảng
- Thời gian chạy là một phần phụ thuộc; đo lường tác động của nó đối với bản dựng của bạn
- Kiểm tra mọi mục tiêu về bố cục, đầu vào, chuyển động và khả năng tiếp cận
- ExodeUI cung cấp thời gian chạy cho React, Vue, Svelte, Angular, Solid, React Native, SwiftUI và Flutter