Tuvix.js क्या है?

Tuvix.js एक हल्का, फ्रेमवर्क-अज्ञेयवादी माइक्रोफ्रंटएंड ऑर्केस्ट्रेटर है जो स्वतंत्र रूप से तैनात करने योग्य भागों से बनी स्केलेबल फ्रंटएंड एप्लिकेशन बनाने के लिए है।

समस्या

जैसे-जैसे फ्रंटएंड बढ़ते हैं, मोनोलिथिक सिंगल-पेज एप्लिकेशन ये हो जाते हैं:

• कई टीमों में स्केल करना कठिन
• बिल्ड और डिप्लॉय में धीमे - एक बदलाव सब कुछ फिर से बनाता है
• एक ही फ्रेमवर्क या संस्करण में बंद
• अलग-अलग परीक्षण और समझना कठिन

समाधान: माइक्रोफ्रंटएंड

माइक्रोफ्रंटएंड माइक्रोसर्विस सिद्धांतों को फ्रंटएंड पर लागू करते हैं। प्रत्येक माइक्रो ऐप:

• स्वतंत्र रूप से विकसित - अलग कोडबेस, अलग टीम
• स्वतंत्र रूप से तैनात - अपनी CI/CD पाइपलाइन
• फ्रेमवर्क-अज्ञेयवादी - एक टीम React, दूसरी Vue, तीसरी Svelte उपयोग करती है

Tuvix.js शेल प्रदान करता है - पतली ऑर्केस्ट्रेशन परत जो रनटाइम पर सभी माइक्रो ऐप्स को लोड, माउंट और समन्वयित करती है।

आर्किटेक्चर

┌─────────────────────────────────────────────┐
│                Tuvix.js Shell               │
│                                             │
│  ┌────────────┐  ┌──────────┐  ┌────────┐  │
│  │ Orchestrator│  │  Router  │  │ Loader │  │
│  └────────────┘  └──────────┘  └────────┘  │
│                                             │
│  ┌─────────┐  ┌────────┐  ┌──────────────┐ │
│  │  React  │  │  Vue   │  │   Angular    │ │
│  │ माइक्रो │  │ माइक्रो│  │   माइक्रो   │ │
│  │   ऐप    │  │   ऐप   │  │     ऐप      │ │
│  └─────────┘  └────────┘  └──────────────┘ │
└─────────────────────────────────────────────┘

मुख्य अवधारणाएं

अवधारणा	विवरण
Shell	होस्ट एप्लिकेशन - माइक्रो ऐप्स को लोड और समन्वयित करता है
Orchestrator	कोर इंजन जो माइक्रो ऐप पंजीकरण और जीवनचक्र का प्रबंधन करता है
Micro App	एक स्वतंत्र रूप से तैनात फ्रंटएंड एप्लिकेशन
Entry	माइक्रो ऐप का JavaScript बंडल URL
Lifecycle	mount, unmount, update हुक जो प्रत्येक माइक्रो ऐप लागू करता है
Event Bus	माइक्रो ऐप्स के बीच टाइप्ड pub/sub ब्रिज
Sandbox	टकराव रोकने के लिए CSS + JS आइसोलेशन

तुलना

विशेषता	Tuvix.js	single-spa	Module Federation
शून्य रनटाइम निर्भरता	✅	❌	✅
बिल्ट-इन Event Bus	✅	❌	❌
CSS Sandbox	✅	❌	❌
SSR सपोर्ट	✅	आंशिक	✅
TypeScript-first	✅	आंशिक	✅
फ्रेमवर्क बाइंडिंग	React, Vue, Svelte, Angular	React, Vue	कोई भी

अगला कदम

→ शुरू करें