ออกแบบครั้งเดียว รันได้ทุกที่: ไฟล์ UI ไฟล์เดียวทั่วทั้งเว็บ, iOS และ Android
สิ่งที่ต้องใช้ในการออกแบบเพียงครั้งเดียวและเรียกใช้ UI บนเว็บ, iOS และ Android: เค้าโครงและการเคลื่อนไหวที่ใช้ร่วมกัน ชิ้นส่วนเฉพาะแพลตฟอร์ม การทดสอบ และตำแหน่งที่ ExodeUI เหมาะกับ
หลัก Takeaway
ออกแบบครั้งเดียว รันทุกที่หมายความว่าไฟล์ต้นฉบับไฟล์เดียวจะอธิบายองค์ประกอบ UI และแต่ละแพลตฟอร์มจะเล่นองค์ประกอบนั้นพร้อมกับรันไทม์ แทนที่จะสร้างการเคลื่อนไหวแบบเดียวกันขึ้นมาใหม่ใน React, SwiftUI และ Flutter โดยจะทำงานเมื่อเค้าโครง สถานะ การเคลื่อนไหว และอินพุตอยู่ในไฟล์ที่แชร์ และจะยังคงมีความเที่ยงตรงเมื่อการนำทาง การเข้าถึง และท่าทางของระบบยังคงเป็นแบบเฉพาะแพลตฟอร์ม ExodeUI รองรับโมเดลนี้ด้วยแพ็กเกจรันไทม์สำหรับ React, Vue, Svelte, Angular, Solid, React Native, SwiftUI และ Flutter
สิ่งที่ "การออกแบบครั้งเดียว ใช้งานได้ทุกที่" ต้องการอย่างแท้จริงคืออะไร
มันต้องการมากกว่าปุ่มส่งออก ไฟล์ที่แชร์จะต้องอธิบายว่าส่วนประกอบมีขนาดต่างกันอย่างไร ลักษณะที่ปรากฏในแต่ละสถานะ การเคลื่อนที่ระหว่างสถานะอย่างไร และแอปขับเคลื่อนด้วยอินพุตอย่างไร แต่ละแพลตฟอร์มยังต้องการรันไทม์ที่สามารถเล่นไฟล์และเชื่อมต่ออินพุตเหล่านั้นกับเหตุการณ์จริงได้ หากมีชิ้นส่วนใดหายไป คำมั่นสัญญาก็จะกลายเป็นการส่งมอบอีกครั้ง
ไฟล์ที่แชร์เทียบกับการสร้างใหม่ต่อแพลตฟอร์ม
เส้นทางดั้งเดิมคือการออกแบบครั้งเดียวและสร้างใหม่สามครั้ง: เว็บใน CSS และ JavaScript, iOS ใน SwiftUI และ Android ใน Kotlin หรือ Flutter การสร้างใหม่แต่ละครั้งจะมีความแตกต่างเล็กน้อยในด้านเวลา ระยะห่าง และการจัดการท่าทาง เส้นทางไฟล์ที่แชร์จะเก็บคำจำกัดความของส่วนประกอบไว้ในที่เดียว และให้แต่ละแพลตฟอร์มเล่นได้ ข้อดีข้อเสียคือรันไทม์อยู่ระหว่างไฟล์และแพลตฟอร์ม ดังนั้นคุณจึงสูญเสียการควบคุมการเรนเดอร์เฉพาะแพลตฟอร์มได้โดยตรง
สิ่งที่ควรคงไว้เฉพาะแพลตฟอร์ม
องค์ประกอบที่ใช้ร่วมกันไม่ควรแสร้งทำเป็นว่าทุกแพลตฟอร์มเหมือนกัน รูปแบบการนำทาง ท่าทางย้อนกลับ กล่องโต้ตอบของระบบ การอนุญาต และ API การเข้าถึงจะแตกต่างกัน ไฟล์ที่แชร์ควรเป็นเจ้าขององค์ประกอบภาพเชิงโต้ตอบ แอปโฮสต์ควรเป็นเจ้าของแพลตฟอร์ม Chrome และส่วนควบคุมความหมายที่อยู่รอบๆ ตัวอย่างเช่น ปุ่มภาพเคลื่อนไหวที่แชร์สามารถอยู่ภายในองค์ประกอบปุ่มดั้งเดิมที่แสดงบทบาทและป้ายกำกับที่ถูกต้อง
รันไทม์ทำงานอย่างไร
รันไทม์จะอ่านไฟล์ สร้างแผนผังภาพ และอัปเดตเมื่ออินพุตเปลี่ยนแปลง รหัสแอปพลิเคชันของคุณตั้งค่าอินพุต เช่น กด ปิดใช้งาน หรือโหลด และรอรับเหตุการณ์ เช่น ยืนยันหรือยกเลิก เนื่องจากคำจำกัดความของภาพคือข้อมูลแทนที่จะเป็นโค้ดที่เขียนด้วยมือต่อแพลตฟอร์ม รันไทม์จึงเป็นสิ่งที่ทำให้ไฟล์เดียวกันสามารถพกพาได้ รันไทม์ยังขึ้นอยู่กับการขึ้นต่อกัน ดังนั้นให้วัดผลกระทบที่มีต่อบิวด์ของคุณเอง แทนที่จะคิดว่ามันว่าง
ทดสอบไฟล์เดียวกันในทุกสภาพแวดล้อม
ทดสอบไฟล์ที่จะรัน ไม่ใช่แค่ในตัวแก้ไขเท่านั้น ตรวจสอบเค้าโครงในขนาดที่รองรับที่เล็กที่สุดและใหญ่ที่สุด ตรวจสอบทุกสถานะด้วยเนื้อหาจริง และทดสอบอินพุตการสัมผัส เมาส์ และคีย์บอร์ดแยกกัน จากนั้นตรวจสอบการช่วยสำหรับการเข้าถึง: ลำดับโฟกัส ป้ายกำกับ การเคลื่อนไหวที่ลดลง และพฤติกรรมของโปรแกรมอ่านหน้าจอ ไฟล์ที่แชร์ช่วยลดการเบี่ยงเบนของภาพ แต่ไม่ได้ขจัดความจำเป็นในการทดสอบแต่ละแพลตฟอร์ม
ExodeUI เหมาะกับตรงไหน
ExodeUI เก็บส่วนประกอบไว้ในไฟล์ .exode ที่เปิดอยู่ และจัดเตรียมแพ็คเกจรันไทม์สำหรับ React, Vue, Svelte, Angular, Solid, React Native, SwiftUI และ Flutter ไฟล์อาจรวมถึงโครงร่างและเบรกพอยต์ ไทม์ไลน์ สเตทแมชชีน ฟิสิกส์ของสปริง อินพุตและเหตุการณ์ ไฟล์เดียวกันสามารถแก้ไขได้ในเบราว์เซอร์หรือโปรแกรมแก้ไขเดสก์ท็อป และเครื่องมือการเข้ารหัส AI สามารถทำงานได้ผ่านเซิร์ฟเวอร์ MCP
เมื่อใดที่จะไม่ใช้ไฟล์แชร์เพียงไฟล์เดียว
ไฟล์ที่แชร์ไม่เหมาะสมเมื่ออินเทอร์เฟซขึ้นอยู่กับ API เฉพาะแพลตฟอร์มอย่างมาก เมื่อคุณต้องการการควบคุมระดับพิกเซลสำหรับการเรนเดอร์เนทีฟ หรือเมื่อส่วนประกอบส่วนใหญ่เป็นวิดีโอหรือฉาก 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()}
/>
);
}คีย์ Principles ที่ต้องจำ
- ออกแบบเพียงครั้งเดียวและเรียกใช้ได้ทุกที่ซึ่งต้องใช้เลย์เอาต์ สถานะ การเคลื่อนไหว และอินพุตที่ใช้ร่วมกัน รวมถึงรันไทม์ต่อแพลตฟอร์ม
- API การนำทาง การอนุญาต และการเข้าถึงควรคงไว้เฉพาะแพลตฟอร์ม
- รันไทม์คือการพึ่งพา วัดผลกระทบต่องานสร้างของคุณ
- ทดสอบทุกเป้าหมายสำหรับเลย์เอาต์ อินพุต การเคลื่อนไหว และการเข้าถึง
- ExodeUI จัดเตรียมรันไทม์สำหรับ React, Vue, Svelte, Angular, Solid, React Native, SwiftUI และ Flutter