00:00:00هذا هو ElectroBun، وهو إطار عمل لتطبيقات سطح المكتب متعدد الأنظمة ينتج أحجام
00:00:05حزم أصغر بكثير من Electron، ولا يتطلب منك كتابة أي كود بلغة Rust مثل Tauri، ويمنحك
00:00:11أداءً أصلياً بفضل قوة Bun وأغلفة C++ الخاصة به. لذا لا حاجة لـ Node.js أو V8.
00:00:18لكن هل حقيقة أنه يستخدم WebView الأصلي لنظامك بدلاً من استخدام Chromium لجميع
00:00:22أنظمة التشغيل تجعل من الصعب بناء تطبيقات حقيقية متعددة الأنظمة؟
00:00:27اضغط على زر الاشتراك ولندخل في التفاصيل.
00:00:32منذ أن أعلن فريق Bun عن الملفات التنفيذية كاملة المسار (full-stack executables) العام الماضي،
00:00:36جعلني ذلك متحمساً حقاً لوجود بديل جيد لـ Electron.
00:00:40لكن بعد الاستحواذ من قبل Anthropic، والذي سأتحدث عنه لاحقاً في الفيديو،
00:00:44أصبح من المستبعد أن يكون هذا هو التوجه الذي سيسلكه فريق Bun.
00:00:49لذا قام Yoav من Blackboard بإنشاء ElectroBun، وهو أقرب شيء سنحصل عليه لـ Electron مبني على Bun،
00:00:55وقد بنى بالفعل بعض الأشياء الرائعة به مثل أداة هجينة تضم متصفحاً ومحطة طرفية ومحرر أكواد
00:01:01تسمى Colab، وتطبيق لتحويل النص إلى كلام مدعوم بـ Quen، بل إنه جعل لعبة Doom تعمل على
00:01:07تطبيق ElectroBun بقوة WebGPU. دعونا نستعرض كيفية استخدامه في مشروع بسيط.
00:01:12الآن، عند بدء تشغيل ElectroBun لأول مرة، ستحصل على مجموعة من القوالب التي يمكنك
00:01:17استخدامها لرؤية كيفية عمل التطبيق، مثل تطبيق تدوين الملاحظات البسيط هذا، وتطبيق متعدد النوافذ،
00:01:22وحتى تطبيق شريط المهام (tray app) الذي يفتح الوثائق داخل متصفح الويب الخاص بك.
00:01:26ولأن ElectroBun يدعم تقنيات الويب، يمكنك استخدام أي إطار عمل JS تريده
00:01:31من Svelte إلى Vue إلى Solid.js وحتى Angular.
00:01:35لكنني سأقوم بشرح مشروع أساسي من الصفر لمساعدتك على فهمه بالكامل.
00:01:40لدي هنا تطبيق Bun React أساسي، سنقوم بتحويله إلى تطبيق Mac أصلي
00:01:45من خلال قوة ElectroBun. وللقيام بذلك، قمت بالفعل بتثبيت ElectroBun،
00:01:49ولدي بالفعل نص برمجي لبدء بناء نسخة التطوير لـ ElectroBun،
00:01:53بالإضافة إلى نص برمجي لبناء تطبيق ElectroBun النهائي.
00:01:55في الواقع، لا نحتاج إلى “type module” هنا بما أننا لن نستخدمه.
00:01:59داخل المجلد الرئيسي للمشروع، قمت بإنشاء ملف تكوين لـ ElectroBun،
00:02:03والذي يحتوي حالياً على اسم تطبيقي، ومعرف، بالإضافة إلى نقطة دخول لبناء Bun.
00:02:09الآن، لم أقم بإنشاء نقطة الدخول هذه بعد، لذا دعونا نفعل ذلك الآن.
00:02:12داخل مجلد المصدر (source)، قمت بإنشاء مجلد Bun، وسأقوم بإنشاء ملف index.ts،
00:02:17الذي يستدعي فئة نافذة المتصفح ويأخذ العنوان كمعامل (argument)،
00:02:22وهو النص الذي سيظهر في شريط العنوان لدينا، ورابط URL،
00:02:25وهو المكان الذي سيتوجه إليه التطبيق عند تحميله لأول مرة.
00:02:28لذا إذا قمنا بتشغيل Bun start، يجب أن نرى تطبيقنا وهو يفتح ويظهر العنوان الصحيح،
00:02:32لكن لا شيء يظهر هنا. هذا لأنه بعد أن يقوم Bun ببناء التطبيق،
00:02:36أي تحويل TypeScript إلى JavaScript، والقيام بعملية tree shaking وكل شيء آخر،
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 وتحديث الرابط لاستخدام المجلد الرئيسي للواجهات.
00:03:23مما يعني أننا الآن عندما نبني التطبيق، يجب أن نرى كل شيء يعمل كما هو متوقع.
00:03:28يمكننا حتى إعطاء هذا طابع التطبيقات الحقيقية بإضافة هذه الخاصية، والتي ستزيل شريط العنوان.
00:03:34ويمكننا أيضاً استخدام كائن قائمة التطبيق لإعطاء تطبيقنا قائمته المخصصة.
00:03:39وعندما نكون مستعدين، يمكننا بناء التطبيق للإنتاج، مما ينشئ ملف DMG بحجم 17 ميجابايت
00:03:44وينشئ تطبيقاً بحجم 65 ميجابايت. وإذا قارنا ذلك بتطبيق Electron بسيط (Hello World)،
00:03:50يمكنك أن ترى أنه بحجم 271 ميجابايت، أي أكثر من أربعة أضعاف حجم تطبيق ElectroBun.
00:03:56الآن، بما أن تطبيقات ElectroBun تُبنى باستخدام WebView الأصلي للنظام، أي WebKit للماك،
00:04:01و Edge WebView 2 للويندوز و WebKit GTK للينكس، فعليك التفكير في بعض الميزات
00:04:08التي لا تدعمها واجهات الويب عند تطوير تطبيقات متعددة الأنظمة.
00:04:11رغم أن ElectroBun يدعم إطار عمل Chromium المدمج (CEF)، والذي يسمح باتساق
00:04:16عبر الأنظمة، لكن هذا يضيف متصفح Chromium كاملاً إلى تطبيقك، مما يعني تبعات
00:04:22في الحجم والأداء، مما يجعله مماثلاً لـ Electron تقريباً، باستثناء حقيقة أنه يستخدم Bun.
00:04:27هناك أيضاً بعض ميزات ElectroBun الرائعة الأخرى التي لم أتحدث عنها،
00:04:32مثل معمارية iframe خارج العمليات لتشغيل كل WebView مدمج في عمليته المستقلة،
00:04:38ونظام RPC محدد الأنواع لاتصال سلس بين العمليات، وضغط ZSTD وغلاف
00:04:44ذاتي الاستخراج لعمليات تحميل أولية أصغر، وتوقيع الكود، وأكثر من ذلك بكثير.
00:04:48لكن لسوء الحظ، واجهت بعض المشاكل عند بناء التطبيق التجريبي الذي استعرضته سابقاً،
00:04:54مثل نقص الوثائق، خاصة فيما يتعلق بالأمور المحيطة بملف دخول ElectroBun.
00:04:58كانت الصفحة تومض أحياناً عند إعادة التحميل الكامل، واستخدام أدوات الفحص أدى لتخريب
00:05:03تنسيق الصفحة لدي. الآن أعلم أن ElectroBun جديد جداً، فأول مساهمة (commit) تعود لشهر فبراير
00:05:09وبالتأكيد هناك القليل قبل ذلك. وهذا فقط لأقول إنني واثق أن هذه الميزات سيتم إصلاحها
00:05:13في المستقبل. في الواقع، آمل ذلك لأن فريق Bun منذ الاستحواذ عليهم من قبل Anthropic
00:05:19ركزوا أكثر على تحسينات واجهة السطور البرمجية (CLI) والملفات التنفيذية بدلاً من
00:05:25المضي قدماً في بناء بديل لـ Electron. لذا يبدو أن ElectroBun هو أفضل فرصة لنا
00:05:31للحصول على أداة سطح مكتب متعددة الأنظمة مدعومة بـ Bun. وإذا كنت لا تعرف شيئاً عن
00:05:37استحواذ Anthropic على Bun أو تريد فقط معرفة المزيد عن التوجه الجديد لفريق Bun
00:05:42منذ الاستحواذ، شاهد هذا الفيديو من James، الذي يتحدث عن الأمر برمته.
00:05:48انتهى.