التصميم مرة واحدة، والتشغيل في كل مكان: ملف واجهة مستخدم واحد عبر الويب وiOS وAndroid
ما يتطلبه الأمر حقًا للتصميم مرة واحدة وتشغيل واجهة مستخدم على الويب وiOS وAndroid: التخطيط المشترك والحركة، والأجزاء الخاصة بالنظام الأساسي، والاختبار، والمكان المناسب لـ ExodeUI.
الوجبات الجاهزة الأساسية
التصميم مرة واحدة، والتشغيل في كل مكان يعني أن ملف مصدر واحد يصف مكون واجهة المستخدم ويقوم كل نظام أساسي بتشغيله في وقت التشغيل، بدلاً من إعادة بناء نفس الحركة في React وSwiftUI وFlutter. إنه يعمل عندما يكون التخطيط والحالات والحركة والمدخلات موجودة في الملف المشترك، ويظل صادقًا عندما يظل التنقل وإمكانية الوصول وإيماءات النظام خاصة بالنظام الأساسي. يدعم ExodeUI هذا النموذج بحزم وقت التشغيل لـ React وVue وSvelte وAngular وSolid وReact Native وSwiftUI وFlutter.
ما يتطلبه "التصميم مرة واحدة، والتشغيل في كل مكان" فعليًا
يتطلب أكثر من زر التصدير. يجب أن يصف الملف المشترك كيفية تخطيط المكون بأحجام مختلفة، وكيف يبدو في كل حالة، وكيف يتحرك بين الحالات، وكيف يدفعه التطبيق بالمدخلات. تحتاج كل منصة أيضًا إلى وقت تشغيل يمكنه تشغيل الملف وربط تلك المدخلات بالأحداث الحقيقية. إذا كان أي من هذه القطع مفقودًا، يتحول الوعد إلى تسليم آخر.
إعادة بناء الملف المشترك مقابل إعادة البناء لكل منصة
الطريق التقليدي هو التصميم مرة واحدة وإعادة البناء ثلاث مرات: الويب في CSS وJavaScript، وiOS في SwiftUI وAndroid في Kotlin أو Flutter. تقدم كل عملية إعادة بناء اختلافات صغيرة في التوقيت والتباعد والتعامل مع الإيماءات. يحافظ مسار الملف المشترك على تعريف المكون في مكان واحد ويتيح لكل منصة تشغيله. والمقايضة هي أن وقت التشغيل يقع بين الملف والنظام الأساسي، لذلك تتخلى عن بعض التحكم المباشر في العرض الخاص بالنظام الأساسي.
ما الذي يجب أن يظل خاصًا بالمنصة
لا ينبغي للمكون المشترك أن يتظاهر بأن كل منصة هي نفسها. تختلف أنماط التنقل وإيماءات الرجوع ومربعات حوار النظام والأذونات وواجهات برمجة تطبيقات إمكانية الوصول. يجب أن يمتلك الملف المشترك المكون المرئي التفاعلي؛ يجب أن يمتلك التطبيق المضيف نظام Chrome الأساسي وعناصر التحكم الدلالية المحيطة به. على سبيل المثال، يمكن أن يوجد زر متحرك مشترك داخل عنصر زر أصلي يكشف عن الدور والتسمية الصحيحين.
كيف تعمل أوقات التشغيل
يقوم وقت التشغيل بقراءة الملف وإنشاء الشجرة المرئية وتحديثها مع تغير المدخلات. يقوم رمز التطبيق الخاص بك بتعيين المدخلات مثل الضغط أو التعطيل أو التحميل، ويستمع إلى الأحداث مثل التأكيد أو الرفض. نظرًا لأن التعريف المرئي عبارة عن بيانات وليس تعليمات برمجية مكتوبة بخط اليد لكل نظام أساسي، فإن وقت التشغيل هو ما يجعل نفس الملف قابلاً للنقل. يعد وقت التشغيل أيضًا تبعية، لذا قم بقياس تأثيره على البنية الخاصة بك بدلاً من افتراض أنه مجاني.
اختبار نفس الملف في كل بيئة
اختبر الملف في المكان الذي سيتم تشغيله فيه، وليس فقط في المحرر. تحقق من التخطيط بأصغر وأكبر الأحجام المدعومة، وتحقق من كل حالة بمحتوى حقيقي، واختبر إدخال اللمس والماوس ولوحة المفاتيح بشكل منفصل. ثم تحقق من إمكانية الوصول: ترتيب التركيز، والتسميات، والحركة المنخفضة، وسلوك قارئ الشاشة. يقلل الملف المشترك من الانحراف البصري، ولكنه لا يلغي الحاجة إلى اختبار كل نظام أساسي.
حيث يناسب ExodeUI
يقوم ExodeUI بتخزين مكون في ملف .exode مفتوح ويوفر حزم وقت التشغيل لـ React وVue وSvelte وAngular وSolid وReact Native وSwiftUI وFlutter. يمكن أن يتضمن الملف التخطيط ونقاط التوقف والجداول الزمنية وأجهزة الحالة وفيزياء الربيع والمدخلات والأحداث. ويمكن تحرير نفس الملف في المتصفح أو محرر سطح المكتب، ويمكن لأدوات الترميز المدعومة بالذكاء الاصطناعي العمل عليه من خلال خادم MCP.
متى لا تستخدم ملف مشترك واحد
يكون الملف المشترك غير مناسب عندما تعتمد الواجهة بشكل كبير على واجهات برمجة التطبيقات الخاصة بالنظام الأساسي فقط، أو عندما تحتاج إلى التحكم على مستوى البكسل في العرض الأصلي، أو عندما يكون المكون في الغالب عبارة عن فيديو أو مشهد ثلاثي الأبعاد. كما أنه من غير المناسب أيضًا أن لا يتمكن فريقك من اختبار كل هدف. في تلك الحالات، يعد الكود الخاص بالمنصة هو الاختيار الصادق، ويجب أن يغطي الملف المشترك فقط الأجزاء التي تستفيد منه حقًا.
مقتطف من تنفيذ الإنتاج
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()}
/>
);
}مفتاح Principle للتذكر
- يحتاج التصميم مرة واحدة والتشغيل في كل مكان إلى تخطيط مشترك وحالات وحركة ومدخلات، بالإضافة إلى وقت تشغيل لكل نظام أساسي
- يجب أن تظل واجهات برمجة التطبيقات الخاصة بالتنقل والأذونات وإمكانية الوصول خاصة بالنظام الأساسي
- وقت التشغيل هو التبعية. قياس تأثيره على البناء الخاص بك
- اختبر كل هدف من حيث التخطيط والإدخال والحركة وإمكانية الوصول
- يوفر ExodeUI أوقات تشغيل لـ React وVue وSvelte وAngular وSolid وReact Native وSwiftUI وFlutter