Zero Native: قاتل Electron الذي لم يتوقعه أحد من Vercel
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00هذا هو Xero Native، وهو أداة لبناء التطبيقات الأصلية تعتمد على لغة Zig من تطوير Vercel، ويمكنه استخدام عرض الويب الخاص بالنظام
00:00:05أو حزم محرك Chromium بالكامل تمامًا مثل Electron لتطبيقات سطح المكتب أو الهاتف المحمول، مما يوفر ملفات ثنائية صغيرة جدًا
00:00:12وإعادة بناء فورية أثناء عملية التطوير.
00:00:14ولكن هل ستؤدي ضرورة معرفة القليل عن لغة Zig لاستخدامه بشكل صحيح إلى إبعاد مطوري JavaScript؟
00:00:18اشترك في القناة دعونا نكتشف ذلك.
00:00:20على الرغم من أن فريق BUN يبتعد عن Zig وينتقل إلى Rust، إلا أنها لا تزال لغة رائعة جدًا
00:00:28بدون مدقق ملكية (borrow checker) ولا فترات حياة (lifetimes)، ويمكنها استدعاء لغة C مباشرة، مما يعني أن أي مكتبة C تبعد عنك استيرادًا واحدًا فقط
00:00:35دون الحاجة إلى أي كود وسيط (glue code).
00:00:37وهي مقروءة بما يكفي ليتعلمها مطورو JavaScript.
00:00:39في الواقع، إذا أردتم مشاهدتي وأنا أتعلم البرمجة بلغة Zig من الصفر، فأخبروني في التعليقات.
00:00:44أعتقد أن ذلك سيكون أمرًا ممتعًا للغاية.
00:00:46ولكن في الأساس، Xero Native هو غلاف رفيع بلغة Zig يستضيف عرض ويب (web view) يعرض واجهة أمامية
00:00:51تستخدم جسور JSON لكي تتمكن لغة JavaScript في عرض الويب من التواصل مع طبقة Zig الأصلية والعكس صحيح،
00:00:58وهذه هي الطريقة التي تمكنه من الوصول إلى واجهات برمجة تطبيقات مستوى نظام التشغيل.
00:01:01وإذا كنتم تعتقدون أن هذا يبدو مثل ElectroBUN، حسنًا، هو كذلك نوعًا ما.
00:01:04ولكن مع فارق كبير واحد، سنتحدث عنه لاحقًا في الفيديو.
00:01:07لكن في الوقت الحالي، دعونا ننتقل إلى عرض تجريبي بسيط للغاية.
00:01:10لبدء الاستخدام، تحتاج أولاً إلى تثبيت Zig، وهو ما فعلته باستخدام Miez.
00:01:13ولكن يمكنك أيضًا استخدام Brew، ثم تثبيت Xero Native.
00:01:16وبعد القيام بهذين الأمرين، يمكنك تشغيل الأمر Xero Native init لإنشاء هيكل مشروع جديد.
00:01:22هذا هو اسم مشروعي، ولكن يمكن أن يكون أي اسم تريده.
00:01:25سأستخدم علامة front end مع React، مما سيؤدي إلى تثبيت مشروع Vite React.
00:01:30ولكن يمكن أن يكون أيضًا Svelte أو Vue أو Nex أو حتى Vite فقط.
00:01:34لذا إذا ضغطت على Enter، سيقوم Xero Native بإضافة بعض المجلدات.
00:01:37إذا انتقلنا إلى مشروع التجريبي، سنرى ملف app zig object notation، والذي سأشرحه لاحقًا.
00:01:43لدينا أصول (assets) لأشياء مثل الأيقونات وغيرها، وملف build zig،
00:01:48وهو مخصص لرسم بياني لبناء Zig، وجسر JS ومحرك الويب ومجلد الواجهة الأمامية الذي يحتوي على الكود الخاص بنا.
00:01:54في الواقع، إذا دخلنا إليه، سنرى أنه يحتوي على ملفات اعتدنا رؤيتها كمطوري JavaScript.
00:01:58الآن، في هذه المرحلة، إذا قمنا بتشغيل zig build run، فسيؤدي ذلك إلى تثبيت جميع التبعيات وفتح تطبيقنا في نافذة جديدة.
00:02:04ملاحظة، إذا كنت ترغب في تثبيت Xero Native على مشروع JavaScript موجود،
00:02:08أوصي باستخدام Vite، وهو إصدار مبسط، ثم تغيير كل شيء في مجلد الواجهة الأمامية ليحتوي على كود تطبيقك.
00:02:15يمتلك Xero Native أيضًا خادم تطوير رائعًا يدير دورة حياة الواجهة الأمامية بالكامل.
00:02:19لذا إذا قمنا بتشغيل zig build dev، فسيقوم ذلك بتجميع الملف الثنائي وتشغيل خادم تطوير Xero Native.
00:02:24لذا إذا قمت بتعديل بعض الكود، سنرى تطبيقنا الأصلي يتحدث في الوقت الفعلي.
00:02:28يمكنني حتى تشغيل zig build package، والذي سيقوم ببناء التطبيق الأصلي بحيث يمكنني توزيعه.
00:02:33ويمكننا رؤيته هنا داخل مجلد zig out package بحجم 2.9 ميجابايت فقط، وهو صغير جدًا.
00:02:39وقد تمكن بعض الأشخاص من تقليص حجمه إلى أقل من 1 ميجابايت.
00:02:43ولكن ماذا لو أردت تغيير أيقونة التطبيق، أو الاسم، أو محرك الويب؟
00:02:46حسنًا، هنا يأتي دور ملف app zon، حيث يمكنني القيام بأشياء مثل تغيير اسم الأيقونة، واسم المشروع، وحتى المحرك الذي يعمل عليه التطبيق، بالإضافة إلى حجم النافذة.
00:02:55وهذه نظرة عامة سريعة جدًا على Xero Native.
00:02:58هناك الكثير من الأشياء التي لم يتسنَّ لي التطرق إليها، مثل أيقونات لوحة النظام، وتوقيع الكود، والتطبيقات المدمجة لنظامي iOS وAndroid.
00:03:05في الواقع، أحتاج لقضاء المزيد من الوقت معه، وهو ما قد يؤدي إلى فيديو آخر.
00:03:09ولكن بقدر روعة Xero Native، كيف يقارن بشيء مثل Electrobun، الذي ينشئ أيضًا تطبيقات صغيرة وسريعة تستخدم عرض الويب الأصلي للنظام؟
00:03:17حسنًا، مع Electrobun، يعتبر bun نفسه هو بيئة التنفيذ لأنه يتعين عليك كتابة TypeScript للعملية الرئيسية.
00:03:24لذا على الرغم من أن ملف Zig ثنائي يبدأ التطبيق، إلا أن الكود يعمل داخل web worker الخاص بـ bun، والذي يتواصل مع واجهات برمجة التطبيقات الأصلية عبر FFI الخاص بـ bun، والذي يمر عبر طبقة C++ وObjective-C.
00:03:37لكن مع Xero Native، كل ما تحتاجه هو ملف Zig الثنائي، لا يوجد JavaScript، ولا bun، فقط Zig، يتواصل مع واجهات برمجة تطبيقات نظام التشغيل وأي مكتبات C من خلال استيراد C بسيط.
00:03:50وهذا يؤدي إلى الحصول على أنحف غلاف أصلي ممكن مقارنة بـ Electrobun.
00:03:54ولكن في الوقت الحالي قد تضطر لكتابة القليل جدًا من Zig للحصول على كل ما تريده من Xero Native أو على الأقل تغيير بعض الإعدادات في ملف zig object notation.
00:04:03أيضًا، Xero Native ليس غنيًا بالميزات مثل Electrobun، الذي سمح لي بتغيير نمط شريط العنوان وحتى إضافة بعض عناصر القائمة المخصصة.
00:04:11وهذه الأشياء، للأسف، غير مدعومة حاليًا في ملف app zon.
00:04:15اضطررت أيضًا لتقديم بلاغ عن مشكلة لأن بناء حزمة على نظام MacOS لم يعمل معي بشكل جيد في المرة الأولى، ولكن قد يكون ذلك نقص خبرة من جانبي.
00:04:22ومع ذلك، أنا متأكد من أن الفريق يعمل بجد لإضافة المزيد من الميزات وإصلاح بعض هذه المشكلات، بالإضافة إلى إضافة دعم رائع للهاتف المحمول.
00:04:29وإذا كنت لا تستطيع انتظار أي من تلك الميزات، حسنًا، إنه مفتوح المصدر.
00:04:32لذا فقط أعطِ الكود لـ Claude، وأخبره بما تريد وأنا متأكد من أنه يمكنه إضافة تلك الميزات لك، أليس كذلك؟
Community Posts
No posts yet. Be the first to write about this video!
Write about this video