OpenTUI: بناء تطبيقات الطرفية باستخدام React و Bun و Zig
BBetter Stack
Computing/SoftwareInternet Technology
Transcript
00:00:00هذا هو OpenTui، مكتبة مدعومة بلغة Zig لبناء واجهات طرفية مع روابط
00:00:04لـ React و Solid و FreeJS حتى تتمكن من بناء واجهات طرفية (Tuis) ذات أداء عالٍ بنفس طريقة بناء تطبيقات الويب
00:00:09تم إنشاؤها بواسطة Anomaly، الفريق الذي يقف خلف OpenCode، وهو مشروع مفتوح المصدر شهير
00:00:14وكيل برمجي، لتشغيل واجهة المستخدم الفعلية خلف OpenCode، المستخدم من قبل الملايين من
00:00:19الأشخاص بشكل منتظم. لكن كيف تقارن هذه المكتبة الجديدة بأدوات واجهة React الطرفية
00:00:24الأخرى الشهيرة التي كانت موجودة لفترة أطول وتُستخدم لتشغيل العديد من
00:00:29وكلاء البرمجة المشهورين؟ اضغط على اشتراك ولنكتشف ذلك!
00:00:35تُعد Ink المكتبة المفضلة لبناء واجهات طرفية باستخدام React. لقد قمت بالفعل بعمل
00:00:40فيديو عنها يمكنك مشاهدته من هنا. لكنها تعاني من بعض المشاكل. أولاً
00:00:44وقبل كل شيء، التطبيقات البسيطة تستهلك أكثر من 50 ميجابايت من الذاكرة ولديها حد أقصى ثابت للإطارات قدره 30 إطاراً في الثانية، وهو
00:00:51أمر مقبول لمعظم التطبيقات. ولكن إذا كنت تبني تطبيقاً يقوم ببث الكثير من النصوص،
00:00:56مثل وكيل برمجة، فإن تحديد الإطارات يجعل النظام يبدو بطيئاً. لذا، فإن الفريق
00:01:00في Anomaly، الذين استخدموا في الأصل لغة Golang مع Bubble Tea لبناء OpenCode، أرادوا إعادة كتابته
00:01:06بلغة TypeScript دون استخدام Ink. لذا فقد أنشأوا OpenTui. أعني، لقد اشتروا OpenTui. لم يقوموا
00:01:13بالضبط ببنائه من الصفر لأن Commander FX كان يبني بالفعل مكتبة طرفية تعتمد على Zig.
00:01:18لذا قامت Anomaly برعايته وبناء OpenTui فوق عمله. لذا فإن نواة Zig تقوم بكل
00:01:24عمليات العرض الثقيلة، وتسمح لك روابط TypeScript بكتابة مكونات واجهة المستخدم في React أو Solid. لكن الجزء
00:01:30الذكي حقاً هو واجهة برمجة تطبيقات BUN (FFI)، التي تسمح لك بالتحدث مباشرة
00:01:36من TypeScript إلى كود Zig الأصلي دون تأخير كبير، وهذا ما يجعل OpenTui فائقة
00:01:42الأداء. فهي تستخدم Yoga لتخطيطات Flexbox، وتأتي مع مكونات مدمجة مثل المدخلات والقوائم المختارة،
00:01:47وهناك حتى حزمة 3.js التي تتيح لك عرض رسومات ثلاثية الأبعاد عبر Web GPU داخل الطرفية،
00:01:54وهو أمر جنوني نوعاً ما. في الواقع، دعونا نرى OpenTui أثناء العمل من خلال تجربتها في عرض توضيحي بسيط جداً. هناك
00:01:59طرق عديدة يمكنك من خلالها إعداد مشروع OpenTui أساسي. شخصياً، أحب استخدام BUN CreateTui
00:02:04لأنه يمنحك هذا المعالج المفيد جداً الذي يمكنك استخدامه لإعطاء اسم لمشروعك واختيار
00:02:09القالب الذي تريد استخدامه. الآن سأستخدم React، لكنني سأشرح لاحقاً في الفيديو
00:02:13الاختلافات بين هذه القوالب الثلاثة. بمجرد الانتهاء، ستحصل على بعض الملفات القياسية
00:02:17مع ملف index الذي يشغل مشروعاً أساسياً بملء الشاشة. وإذا نظرنا إلى الكود،
00:02:21يمكننا أن نرى هنا في السطر 15 أنه يستخدم CreateCLI renderer للاستفادة من محرك عرض OpenTui.
00:02:27وتحته يوجد CreateRoot، الذي يقوم بعرض مكون التطبيق. وإذا كنت معتاداً
00:02:32على React، فهذا هو الكود الذي يقوم بتثبيته في ملف HTML. لكن لأننا نقوم بالعرض على طرفية،
00:02:37هذا المشروع لا يحتوي على ملف index.html، بل يستخدم بدلاً من ذلك موازن React مخصص يستخدم
00:02:42مربعات طرفية ونصوص بدلاً من مكونات HTML. فوق ذلك، لدينا JSX الذي يستخدم مكون المربع
00:02:49وبعض خصائص Yoga Flexbox لمحاذاة النص الموجود بداخله والذي يعرض خط ASCII وبعض النصوص الأساسية.
00:02:55الآن، إذا كنت لا تريد أن يكون هذا تطبيقاً بملء الشاشة، فإن OpenTui يدعم أوضاع شاشة متعددة.
00:03:00ويمكننا تغيير هذا إلى وضع split footer مع ارتفاع تذييل، والذي يثبت العرض في منطقة محجوزة
00:03:05في أسفل الطرفية. لكن دعونا نحاول القيام بشيء أكثر إثارة من مجرد تغيير
00:03:10وضع الشاشة. هنا واجهة طرفية أساسية مع نص عنوان وإدخال اسم. الآن، تحقق من هذا. مع OpenTui، ستحصل
00:03:17على استجابة فورية. لذلك بغض النظر عن عرض طرفيتي، لا يزال كل شيء يبدو جيداً. وإذا
00:03:21نظرنا إلى الكود، فهو يستخدم بعض صيغ React المألوفة جداً. لذا هنا، لدينا use
00:03:26state التي تضبط الاسم. وفي المدخل، نقوم بتحديث الاسم في خاصية on input. وذلك
00:03:32يتم تغييره في النص. الآن، أحد الأشياء الرائعة حقاً في OpenTui هو نوع من إعادة التحميل المباشر دون
00:03:37الحاجة لـ HMR. لذا يمكننا أن نرى هنا، إذا قمت بتغيير النص إلى “وداعاً” ثم حفظت الملف، فإنه يتم تحديثه تلقائياً.
00:03:43ومن الجيد أن يكون لديك مدخل سريع الاستجابة، لكن أحياناً لا يظهر النص. يمكن إصلاح ذلك
00:03:48بإضافة عرض، مما يجعل الأمور أسهل بكثير. ومع مكون المربع، لدينا
00:03:52بعض الخصائص الرائعة جداً مثل الحدود ولون الخلفية، والتي تعطي مظهراً عصرياً لتطبيق الطرفية هذا.
00:03:56مرة أخرى، يمكننا استخدام خط ASCII بدلاً من هذا النص، مما يجعل العنوان يبرز أكثر قليلاً.
00:04:01وبالطبع، هناك العديد من خطوط ASCII التي يمكنك الاختيار من بينها. تذكر، لأن هذا تطبيق
00:04:05طرفية، وليس صفحة ويب، فهو لا يعرض كل الخطوط الموجودة على نظامك، فقط الأشياء التي تدعم
00:04:10الطرفية. يمكننا أيضاً القيام بأشياء مثل تغيير العرض عند الإرسال بنفس الطريقة التي تفعلها مع تطبيق React
00:04:15عادي عن طريق تغيير الحالة عند الإرسال وعرض JSX مختلف بناءً على هذا الشرط. لكن إليك
00:04:20شيء واحد لن تتوقع أن تكون الطرفية قادرة على القيام به. إذا قمت بإرسال اسمي، تتلاشى الحالة الأخرى الآن
00:04:25في مكانها. ويتم ذلك باستخدام خطاف use timeline من OpenTui، والذي يُستخدم لضبط مدة
00:04:30الرسوم المتحركة، وتحديد هدف. لذا في هذه الحالة، يكون للمكون عتامة صفر وإزاحة ثمانية،
00:04:36بمعنى أن له هامش علوي أسفل المركز. وهنا تنتهي الرسوم المتحركة بإزاحة صفر
00:04:40وعتامة واحد عن طريق تحديث حالات الإزاحة والعتامة التي تم إعدادها هنا. وهذه
00:04:45القيم يتم تحديثها في خصائص المربع. الآن تبدو متقطعة قليلاً لأن الرسوم المتحركة في الطرفية تحتاج
00:04:50إلى التحرك صفاً بصف. لذا فهي تشبه الشبكة، ولكن من الرائع جداً أن OpenTui يسمح لك بالقيام بذلك
00:04:55بسهولة. ما هو رائع حقاً هو أننا نستطيع الجمع بين كل ما تعلمناه حتى الآن باستخدام تخطيط flexbox
00:05:00لوضع الصناديق بجانب بعضها البعض. لذا لدينا مدخل على جانب ومربع آخر على الجانب الآخر.
00:05:05وإذا قمنا بالكتابة في المدخل عند الإرسال، يمكننا تحريك القيمة لتنتقل إلى المربع الآخر،
00:05:10وهي لمسة لطيفة جداً. ومن هنا، يمكننا القيام بالعديد من الأشياء باستخدام OpenTui،
00:05:14مثل تمكين التنقل بلوحة المفاتيح باستخدام خطاف use keyboard، وعرض بيانات النظام باستخدام node OS،
00:05:19وتمكين دعم الفأرة والقوائم الافتراضية. ولأن كل هذا يعمل فوق BUN،
00:05:24يمكنك استخدام أشياء مثل BUN SQLite، أو BUN Postgres، أو جلب معلومات خارجية بنفس
00:05:28الطريقة التي تفعلها على أي موقع ويب. والشيء الرائع في هذا هو بعد أن قمت بتجميع تطبيقي، نعم، حجمه 71
00:05:34ميجابايت لأنه يتضمن وقت تشغيل BUN وموازن React. ولكن عندما أقوم بتشغيله،
00:05:39يمكنك أن ترى أنه يستخدم أقل من 50 ميجابايت من الذاكرة. ولأن React تحظى بشعبية كبيرة،
00:05:43فإن النماذج اللغوية الكبيرة (LLMs) تعرفها جيداً. وبالتالي فإن بناء التطبيقات في OpenTui يمكن أن يكون بسيطاً جداً
00:05:49دون الحاجة للذهاب ذهاباً وإياباً والبحث في الوثائق. إذاً هذا شرح بسيط جداً
00:05:53لـ OpenTui. لكن دعونا نعود إلى وقت سابق في الفيديو، حيث وعدت بشرح
00:05:58الفرق بين React و Solid و Core. الأمر بسيط جداً إذا كنت تعرف عن تطوير واجهة الويب
00:06:02الأمامية. في الأساس، جميعها يتم عرضها من خلال نفس نواة Zig. لذا فإن الرسم الفعلي على
00:06:07طرفيتك متطابق تماماً. الفرق الوحيد هو كيفية كتابة مكوناتك
00:06:11وكيفية تطبيق التحديثات. لذا فإن React تعيد تشغيل مكوناتك وتقارن شجرة افتراضية في كل
00:06:17تغيير، وهو أمر مشابه جداً لكيفية عمل الـ DOM الافتراضي. بينما تستخدم Solid تحديثات دقيقة،
00:06:22لذا فهي تحدث فقط الشيء الذي تغير. وCore تتخطى كل ذلك، مما يعني أنك تقوم بتعديل
00:06:27الكائنات مباشرة. لذا من الناحية النظرية، React هي الأثقل وCore هي الأخف. ولكن في الواقع،
00:06:33بالنسبة لمعظم تطبيقات الطرفية، الفجوة صغيرة لأن كل العمل الشاق تقوم به نواة Zig،
00:06:38مما يعني في هذه الحالة، أن الأطر مجرد تفضيل شخصي. ولكن حتى لو كان تطبيق OpenTui
00:06:44يأتي مع وقت تشغيل BUN بالكامل وموازن خاص بإطار العمل، إذا كان لديه واحد،
00:06:50فإن الأداء وحجم التطبيق لا يزال أصغر بكثير من Ink، ولكن بالطبع ليس بنفس
00:06:56أداء شيء أصلي مثل Ratatouille أو Bubble Tea. لكن في رأيي، JSX هي أفضل
00:07:02وأكثر الطرق بديهية لتكوين أي واجهة مستخدم. وأفضل قبول استهلاك بسيط في الذاكرة والحجم مقابل
00:07:09تجربة تطوير أفضل بكثير في بناء واجهة طرفية بدلاً من الحصول على شيء خفيف في الحجم
00:07:15وخفيف في استخدام الذاكرة، ولكنه مؤلم في الكتابة والتحديث. لذا مع وضع ذلك في الاعتبار، سأختار OpenTui
00:07:20على Ink في كل مرة، إذا تمكنت من بناء تطبيق طرفي،
00:07:25وهو ما أعدك بأنني سأفعله قريباً.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video