एक बार डिजाइन करें, हर जगह चलाएं: वेब, आईओएस और एंड्रॉइड पर एक यूआई फ़ाइल
एक बार डिज़ाइन करने और वेब, आईओएस और एंड्रॉइड पर यूआई चलाने में वास्तव में क्या लगता है: साझा लेआउट और गति, प्लेटफ़ॉर्म-विशिष्ट भाग, परीक्षण, और जहां ExodeUI फिट बैठता है।
कोर टेकअवे
एक बार डिज़ाइन करें, हर जगह चलाएं इसका मतलब है कि एक स्रोत फ़ाइल एक यूआई घटक का वर्णन करती है और प्रत्येक प्लेटफ़ॉर्म इसे React, SwiftUI और Flutter में समान गति के पुनर्निर्माण के बजाय रनटाइम के साथ चलाता है। यह तब काम करता है जब लेआउट, स्थिति, गति और इनपुट साझा फ़ाइल में रहते हैं, और यह तब ईमानदार रहता है जब नेविगेशन, एक्सेसिबिलिटी और सिस्टम जेस्चर प्लेटफ़ॉर्म-विशिष्ट बने रहते हैं। ExodeUI इस मॉडल को React, Vue, Svelte, Angular, Solid, React Native, SwiftUI और Flutter के लिए रनटाइम पैकेज के साथ सपोर्ट करता है।
वास्तव में "एक बार डिज़ाइन करें, हर जगह चलाएं" की आवश्यकता है
इसके लिए एक निर्यात बटन से अधिक की आवश्यकता होती है। साझा फ़ाइल में यह वर्णन करना होगा कि घटक विभिन्न आकारों में कैसे दिखता है, यह प्रत्येक राज्य में कैसा दिखता है, यह राज्यों के बीच कैसे चलता है, और ऐप इसे इनपुट के साथ कैसे चलाता है। प्रत्येक प्लेटफ़ॉर्म को एक रनटाइम की भी आवश्यकता होती है जो फ़ाइल चला सके और उन इनपुटों को वास्तविक घटनाओं से जोड़ सके। यदि उनमें से कोई भी टुकड़ा गायब है, तो वादा एक और हैंडऑफ़ में बदल जाता है।
साझा फ़ाइल बनाम प्रति-प्लेटफ़ॉर्म पुनर्निर्माण
पारंपरिक मार्ग एक बार डिज़ाइन करना और तीन बार पुनर्निर्माण करना है: CSS और JavaScript में वेब, SwiftUI में iOS और Kotlin या Flutter में Android। प्रत्येक पुनर्निर्माण समय, रिक्ति और हावभाव प्रबंधन में छोटे अंतर पेश करता है। एक साझा फ़ाइल रूट घटक परिभाषा को एक स्थान पर रखता है और प्रत्येक प्लेटफ़ॉर्म को इसे चलाने देता है। ट्रेड-ऑफ़ यह है कि रनटाइम फ़ाइल और प्लेटफ़ॉर्म के बीच बैठता है, इसलिए आप प्लेटफ़ॉर्म-विशिष्ट रेंडरिंग पर कुछ सीधा नियंत्रण छोड़ देते हैं।
प्लेटफ़ॉर्म-विशिष्ट क्या रहना चाहिए
एक साझा घटक को यह दिखावा नहीं करना चाहिए कि हर प्लेटफ़ॉर्म एक जैसा है। नेविगेशन पैटर्न, बैक जेस्चर, सिस्टम डायलॉग, अनुमतियाँ और एक्सेसिबिलिटी एपीआई अलग-अलग हैं। साझा की गई फ़ाइल में इंटरैक्टिव विज़ुअल घटक होना चाहिए; होस्ट ऐप के पास प्लेटफ़ॉर्म क्रोम और उसके चारों ओर सिमेंटिक नियंत्रण होना चाहिए। उदाहरण के लिए, एक साझा एनिमेटेड बटन एक मूल बटन तत्व के अंदर बैठ सकता है जो सही भूमिका और लेबल को उजागर करता है।
रनटाइम कैसे काम करता है
रनटाइम फ़ाइल को पढ़ता है, विज़ुअल ट्री बनाता है और इनपुट बदलते ही इसे अपडेट करता है। आपका एप्लिकेशन कोड दबाए गए, अक्षम किए गए या लोड हो रहे जैसे इनपुट सेट करता है, और पुष्टि या खारिज करने जैसी घटनाओं को सुनता है। चूँकि विज़ुअल परिभाषा प्रत्येक प्लेटफ़ॉर्म पर हाथ से लिखे गए कोड के बजाय डेटा है, रनटाइम ही उसी फ़ाइल को पोर्टेबल बनाता है। रनटाइम भी एक निर्भरता है, इसलिए इसे मुफ़्त मानने के बजाय अपने स्वयं के निर्माण पर इसके प्रभाव को मापें।
प्रत्येक परिवेश पर एक ही फ़ाइल का परीक्षण
फ़ाइल का परीक्षण करें जहां वह चलेगी, न कि केवल संपादक में। सबसे छोटे और सबसे बड़े समर्थित आकारों पर लेआउट की जाँच करें, प्रत्येक स्थिति को वास्तविक सामग्री के साथ सत्यापित करें, और स्पर्श, माउस और कीबोर्ड इनपुट का अलग से परीक्षण करें। फिर पहुंच की जांच करें: फोकस ऑर्डर, लेबल, कम गति और स्क्रीन रीडर व्यवहार। एक साझा फ़ाइल दृश्य बहाव को कम करती है, लेकिन यह प्रत्येक प्लेटफ़ॉर्म का परीक्षण करने की आवश्यकता को दूर नहीं करती है।
जहां ExodeUI फिट बैठता है
ExodeUI एक खुली .exode फ़ाइल में एक घटक संग्रहीत करता है और React, Vue, Svelte, Angular, Solid, React Native, SwiftUI और Flutter के लिए रनटाइम पैकेज प्रदान करता है। फ़ाइल में लेआउट और ब्रेकप्वाइंट, टाइमलाइन, स्टेट मशीन, स्प्रिंग फिजिक्स, इनपुट और इवेंट शामिल हो सकते हैं। उसी फ़ाइल को ब्राउज़र या डेस्कटॉप संपादक में संपादित किया जा सकता है, और AI कोडिंग उपकरण MCP सर्वर के माध्यम से उस पर काम कर सकते हैं।
एक साझा फ़ाइल का उपयोग कब नहीं करना चाहिए
जब इंटरफ़ेस प्लेटफ़ॉर्म-केवल एपीआई पर बहुत अधिक निर्भर करता है, जब आपको मूल रेंडरिंग पर पिक्सेल-स्तरीय नियंत्रण की आवश्यकता होती है, या जब घटक ज्यादातर वीडियो या 3 डी दृश्य होता है, तो एक साझा फ़ाइल खराब फिट होती है। यदि आपकी टीम प्रत्येक लक्ष्य का परीक्षण नहीं कर सकती तो यह भी एक ख़राब स्थिति है। उन मामलों में, प्लेटफ़ॉर्म-विशिष्ट कोड ईमानदार विकल्प है, और एक साझा फ़ाइल में केवल उन हिस्सों को शामिल किया जाना चाहिए जो वास्तव में इससे लाभान्वित होते हैं।
उत्पादन कार्यान्वयन स्निपेट
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 के लिए रनटाइम प्रदान करता है