00:00:00यह ElectroBun है, एक क्रॉस-प्लेटफॉर्म डेस्कटॉप एप्लिकेशन फ्रेमवर्क जो बहुत ही छोटा
00:00:05बंडल साइज बनाता है Electron की तुलना में, और इसमें आपको Tauri की तरह Rust लिखने की जरूरत नहीं है और यह आपको देता है
00:00:11Bun की शक्ति और इसके अपने C++ रैपर्स के माध्यम से नेटिव परफॉर्मेंस। तो कोई Node.js या V8 नहीं।
00:00:18लेकिन क्या यह तथ्य कि यह सभी ऑपरेटिंग सिस्टम के लिए Chromium का उपयोग करने के बजाय आपके सिस्टम के नेटिव WebView का उपयोग करता है,
00:00:22इसे वास्तव में क्रॉस-प्लेटफॉर्म ऐप बनाने के लिए कठिन बनाता है?
00:00:27सब्सक्राइब बटन दबाएं और चलिए इसके बारे में विस्तार से जानते हैं।
00:00:32जब से Bun ने पिछले साल फुल-स्टैक एग्जीक्यूटेबल्स की घोषणा की है,
00:00:36तब से मैं एक अच्छे Electron विकल्प के लिए वास्तव में उत्साहित था।
00:00:40लेकिन Anthropic द्वारा अधिग्रहण के बाद, जिसके बारे में मैं वीडियो में आगे बात करूँगा,
00:00:44इस बात की संभावना कम हो गई है कि Bun टीम उस दिशा में आगे बढ़ेगी।
00:00:49इसलिए Blackboard के Yoav ने ElectroBun बनाया, जो Bun-आधारित Electron के सबसे करीब है,
00:00:55और उन्होंने इसके साथ पहले ही कुछ शानदार चीजें बनाई हैं जैसे Colab नामक एक हाइब्रिड ब्राउज़र, टर्मिनल और कोड एडिटर,
00:01:01Quen द्वारा संचालित एक टेक्स्ट-टू-स्पीच ऐप, और उन्होंने WebGPU की मदद से ElectroBun ऐप पर Doom भी चलाकर दिखाया।
00:01:07चलिए देखते हैं कि इसे एक साधारण प्रोजेक्ट में कैसे उपयोग किया जाए।
00:01:12जब आप पहली बार ElectroBun को इनिशियलाइज़ करते हैं, तो आपको बहुत सारे टेम्प्लेट मिलते हैं,
00:01:17जिनका उपयोग आप यह देखने के लिए कर सकते हैं कि ऐप कैसे काम करता है, जैसे यह बेसिक नोट-टेकिंग ऐप, एक मल्टी-विंडो ऐप,
00:01:22और यहाँ तक कि एक ट्रे ऐप भी जो आपके वेब ब्राउज़र के अंदर डॉक्यूमेंटेशन खोलता है।
00:01:26और चूँकि ElectroBun वेब तकनीक को सपोर्ट करता है, आप अपनी पसंद का कोई भी JS फ्रेमवर्क उपयोग कर सकते हैं,
00:01:31Svelte से लेकर Vue, Solid.js और यहाँ तक कि Angular भी।
00:01:35लेकिन मैं आपको इसे पूरी तरह समझाने के लिए एक बेसिक प्रोजेक्ट शुरू से बनाकर दिखाऊँगा।
00:01:40तो यहाँ मेरे पास एक बेसिक Bun React ऐप है, जिसे हम ElectroBun की मदद से
00:01:45एक नेटिव Mac ऐप में बदलेंगे। और ऐसा करने के लिए, मैंने ElectroBun पहले ही इंस्टॉल कर लिया है,
00:01:49और मेरे पास ElectroBun देव बिल्ड शुरू करने के लिए एक स्क्रिप्ट है,
00:01:53साथ ही ElectroBun ऐप बनाने के लिए भी एक स्क्रिप्ट है।
00:01:55असल में, हमें यहाँ इस टाइप मॉड्यूल की आवश्यकता नहीं है क्योंकि हम इसका उपयोग नहीं करने वाले हैं।
00:01:59प्रोजेक्ट के रूट में, मैंने एक ElectroBun कॉन्फ़िगरेशन फ़ाइल बनाई है,
00:02:03जिसमें अभी मेरे ऐप का नाम, एक आइडेंटिफायर, और एक Bun बिल्ड एंट्री पॉइंट है।
00:02:09मैंने अभी तक यह एंट्री पॉइंट नहीं बनाया है, तो चलिए इसे अभी बनाते हैं।
00:02:12सोर्स डायरेक्टरी के अंदर, मैंने एक Bun फ़ोल्डर बनाया है, और मैं एक index.ts फ़ाइल बनाऊँगा,
00:02:17जो ब्राउज़र विंडो क्लास को इनिशियलाइज़ करती है और तर्क के रूप में एक टाइटल लेती है,
00:02:22जो वह टेक्स्ट है जिसे हम अपने टाइटल बार में दिखाएंगे, और एक URL,
00:02:25जहाँ ऐप पहली बार लोड होने पर नेविगेट करेगा।
00:02:28तो अगर हम Bun start चलाते हैं, तो हमें सही टाइटल के साथ अपना ऐप लोड होता हुआ दिखना चाहिए,
00:02:32लेकिन यहाँ कुछ भी दिखाई नहीं दे रहा है। ऐसा इसलिए है क्योंकि Bun द्वारा ऐप बनाने के बाद,
00:02:36यानी TypeScript को JavaScript में बदलने, ट्री शेकिंग और बाकी सब करने के बाद,
00:02:41यह फ़ाइलों को एक अलग डायरेक्टरी में रख देता है, जिसे हमें अपने एंट्री पॉइंट में संदर्भित करने की आवश्यकता होती है।
00:02:46और हमने यहाँ वह ठीक से नहीं किया है।
00:02:48इसे ठीक करने के लिए, हमें अपनी ElectroBun कॉन्फ़िगरेशन फ़ाइल खोलनी होगी और पहले एक नया views
00:02:53ऑब्जेक्ट जोड़ना होगा, जिसमें वे नए व्यू होंगे जिन्हें आप चाहते हैं कि ElectroBun एक्सेस कर सके।
00:02:57और फिर हम अपने व्यू को 'main' नाम देंगे और इसे index.html का एक एंट्री पॉइंट देंगे,
00:03:02जिसमें फ्रंट एंड JS है जो ऐप को संदर्भित करता है,
00:03:06जिसमें इसे ठीक से चलाने के लिए आवश्यक सभी JavaScript और CSS मौजूद हैं।
00:03:09आप ElectroBun डॉक्स में बिल्ड कॉन्फ़िग के बारे में अधिक जानकारी पा सकते हैं।
00:03:13अब जबकि हमारे पास सोर्स Bun डायरेक्टरी के अंदर अपना मेन व्यू है,
00:03:17हम index.ts फ़ाइल खोल सकते हैं और views और main डायरेक्टरी का उपयोग करने के लिए URL को अपडेट कर सकते हैं।
00:03:23जिसका अर्थ है कि अब जब हम ऐप बनाएंगे, तो हमें सब कुछ उम्मीद के मुताबिक काम करते हुए दिखना चाहिए।
00:03:28हम इस प्रॉपर्टी को जोड़कर इसे और अधिक ऐप जैसा लुक दे सकते हैं, जो टाइटल बार को हटा देगी।
00:03:34और हम अपने ऐप को अपना कस्टम मेनू देने के लिए एप्लिकेशन मेनू ऑब्जेक्ट का भी उपयोग कर सकते हैं।
00:03:39और जब हम तैयार हों, तो हम प्रोडक्शन के लिए ऐप बना सकते हैं, जो 17 मेगाबाइट की
00:03:44DMG फ़ाइल और 65 मेगाबाइट का ऐप बनाता है। और अगर हम इसकी तुलना एक 'hello world' Electron ऐप से करें,
00:03:50तो आप देख सकते हैं कि वह 271 मेगाबाइट का है, जो ElectroBun ऐप के आकार से चार गुना अधिक है।
00:03:56अब, चूंकि ElectroBun ऐप्स OS नेटिव वेब व्यू में बनते हैं, यानी Mac के लिए WebKit,
00:04:01Windows के लिए Edge WebView 2 और Linux के लिए WebKit GTK, तो आपको उन कुछ फीचर्स के बारे में सोचना होगा
00:04:08जो क्रॉस प्लेटफॉर्म ऐप्स विकसित करते समय वेब व्यू सपोर्ट नहीं करते हैं।
00:04:11हालाँकि ElectroBun 'Chromium embedded framework' को सपोर्ट करता है, जो क्रॉस
00:04:16प्लेटफॉर्म स्थिरता की अनुमति देता है, लेकिन यह आपके ऐप में पूरा Chromium ब्राउज़र जोड़ देता है,
00:04:22जिसका अर्थ है साइज और परफॉर्मेंस पर असर, जो इसे Bun का उपयोग करने के अलावा काफी हद तक Electron जैसा ही बना देता है।
00:04:27ElectroBun की कुछ अन्य बेहतरीन विशेषताएं भी हैं जिनके बारे में मैंने बात नहीं की है,
00:04:32जैसे प्रत्येक एम्बेडेड WebView को अपनी अलग प्रोसेस में चलाने के लिए 'आउट ऑफ प्रोसेस iframe' आर्किटेक्चर,
00:04:38सहज इंटरप्रोसेस कम्युनिकेशन के लिए टाइप्ड RPC, ZSTD कम्प्रेशन और छोटे शुरुआती डाउनलोड के लिए
00:04:44एक सेल्फ-एक्सट्रैक्टिंग रैपर, कोड साइनिंग और बहुत कुछ।
00:04:48लेकिन दुर्भाग्य से, मुझे पहले बताए गए डेमो ऐप को बनाते समय कुछ समस्याओं का सामना करना पड़ा,
00:04:54जैसे डॉक्यूमेंटेशन की कमी, खासकर जब बात ElectroBun एंट्री फ़ाइल से जुड़ी चीजों की हो।
00:04:58पूरे पेज के रीलोड पर कभी-कभी पेज फ्लैश होता था और इंस्पेक्टर टूल्स का उपयोग करने से मेरा लेआउट खराब हो गया।
00:05:03अब मुझे पता है कि ElectroBun बहुत नया है। इसका पहला कमिट फरवरी का है और मुझे यकीन है कि
00:05:09उससे पहले भी कुछ रहे होंगे। और यह सिर्फ यह कहने के लिए है कि मुझे पता है कि ये चीजें भविष्य में ठीक हो जाएंगी।
00:05:13वास्तव में, मुझे उम्मीद है कि ये फीचर्स भविष्य में ठीक हो जाएंगे क्योंकि Bun टीम जब से
00:05:19Anthropic द्वारा अधिग्रहित की गई है, तब से उन्होंने Electron विकल्प बनाने की दिशा में जाने के बजाय
00:05:25CLI और एग्जीक्यूटेबल सुधारों पर अधिक ध्यान केंद्रित किया है। तो ऐसा लगता है कि Bun द्वारा संचालित
00:05:31क्रॉस प्लेटफॉर्म डेस्कटॉप टूल पाने के लिए ElectroBun ही हमारी सबसे अच्छी उम्मीद है। और अगर आप
00:05:37Bun/Anthropic अधिग्रहण के बारे में कुछ नहीं जानते या सिर्फ उस नई दिशा के बारे में अधिक जानना चाहते हैं
00:05:42जिसमें अधिग्रहण के बाद Bun टीम जा रही है, तो James का यह वीडियो देखें, जो इस पूरी
00:05:48बात पर चर्चा करता है।