إيقاف إصدار Excalidraw Electron لصالح إصدار الويب

تعرَّف على سبب قرار مشروع Excalidraw إيقاف استخدام حزمة Electron المُغلفة لصالح استخدام الإصدار المتوافق مع الويب.

في ما يتعلّق بمشروع Excalidraw، قرّرنا إيقاف Excalidraw Desktop نهائيًا، وهو ملف Electron لتطبيق Excalidraw، وذلك لصالح إصدار الويب الذي يمكنك العثور عليه على excalidraw.com في أي وقت. بعد إجراء تحليل دقيق، قرّرنا أنّ تطبيق الويب التقدّمي هو المستقبل الذي نريد الاعتماد عليه. اطّلِع على المزيد من المعلومات لمعرفة السبب.

كيفية إنشاء Excalidraw Desktop

بعد فترة قصيرة من إنشاء @vjeux للإصدار الأول من Excalidraw في كانون الثاني (يناير) 2020 ونشر مدوّنة عنه، اقترح ما يلي في الطلب رقم 561:

سيكون من الرائع تضمين Excalidraw في Electron (أو ما يعادله) ونشره كتطبيق [خاص بالمنصة] في متاجر التطبيقات المختلفة.

كان ردّ ‎@voluntadpear الفوري هو اقتراح ما يلي:

ماذا عن تحويله إلى تطبيق ويب تقدّمي بدلاً من ذلك؟ يتيح نظام Android حاليًا إضافة هذه الأنشطة إلى "متجر Play" على أنّها "أنشطة ويب موثوق بها"، ونأمل أن يتيح نظام التشغيل iOS إجراء ذلك قريبًا. على أجهزة الكمبيوتر المكتبي، يتيح لك Chrome تنزيل اختصار لتطبيق ويب تقدّمي على الكمبيوتر المكتبي.

كان القرار الذي اتّخذه @vjeux في النهاية بسيطًا:

علينا تنفيذ كلتا الخطوتَين :)

بدأ العضو @voluntadpear العمل على تحويل إصدار Excalidraw إلى تطبيق ويب تقدّمي (PWA)، ثم بدأ آخرون العمل على ذلك، بينما بدأ العضو @lipis العمل بشكل مستقل وأنشأ مستودعًا منفصلاً لتطبيق Excalidraw Desktop.

حتى يومنا هذا، لم يتمّ تحقيق الهدف الأوّلي الذي حدّده @vjeux، وهو إرسال Excalidraw إلى متاجر التطبيقات المختلفة. بصراحة، لم يبدأ أحد حتى عملية الإرسال إلى أي من المتاجر. ما سبب ذلك؟ قبل الإجابة، لنطّلِع على IDE، المنصة.

ما هو Electron؟

تتمثل الميزة الفريدة لإطار عمل Electron في أنّه يسمح لك "بإنشاء تطبيقات متوافقة مع جميع الأنظمة الأساسية على أجهزة الكمبيوتر المكتبي باستخدام JavaScript وHTML وCSS". التطبيقات التي تم إنشاؤها باستخدام Electron هي "متوافقة مع Mac وWindows وLinux"، أي "يتم إنشاء تطبيقات Electron وتشغيلها على ثلاثة أنظمة أساسية". وفقًا للصفحة الرئيسية، فإنّ الأجزاء الصعبة التي يسهّلها Electron هي التحديثات التلقائية، القوائم والإشعارات على مستوى النظام، الإبلاغ عن الأعطال، تصحيح الأخطاء وإنشاء الملفات الشخصية، أدوات تثبيت Windows. تبيّن أنّ بعض الميزات المُعلَن عنها تتطلّب إلقاء نظرة تفصيلية على التفاصيل الصغيرة.

  • على سبيل المثال، "لا تتوفّر [حاليًا] [التحديثات التلقائية] إلّا على نظامَي التشغيل macOS وWindows. "لا يتوفّر دعم مضمّن لميزة التحديث التلقائي على نظام التشغيل Linux، لذا ننصحك باستخدام مدير الحِزم في التوزيع لتحديث تطبيقك".

  • يمكن للمطوّرين إنشاء قوائم على مستوى النظام من خلال استدعاء Menu.setApplicationMenu(menu). على نظامَي التشغيل Windows و Linux، سيتم ضبط القائمة على أنّها القائمة العلوية لكل نافذة، في حين أنّه على نظام التشغيل macOS، تتوفّر العديد من القوائم العادية التي يحدّدها النظام، مثل قائمة الخدمات. لجعل القوائم قائمة عادية، على المطوّرين ضبط role للقائمة وفقًا لذلك، وسيتم التعرّف عليها من خلال Electron وتحويلها إلى قوائم عادية. وهذا يعني أنّ الكثير من الرمز المرتبط بالملف الشخصي سيستخدم عملية التحقّق من المنصة التالية: const isMac = process.platform === 'darwin'.

  • يمكن إنشاء أدوات تثبيت Windows باستخدام windows-installer. يُبرز ملف README الخاص بالمشروع أنّه "بالنسبة إلى التطبيق المخصّص للإصدار العلني، عليك توقيع تطبيقك. سيحظر فلتر SmartScreen في Internet Explorer تنزيل تطبيقك، وسيعتبر العديد من مورّدي برامج مكافحة الفيروسات تطبيقك برنامجًا ضارًا ما لم تحصل على شهادة صالحة" [sic].

عند الاطّلاع على هذه الأمثلة الثلاثة فقط، يتضح أنّ Electron بعيد كل البعد عن ميزة "الكتابة مرة واحدة والتشغيل في كل مكان". يتطلب توزيع التطبيق على متاجر التطبيقات استخدام توقيع الرمز البرمجي، وهي تقنية أمان لشهادة ملكية التطبيق. تتطلّب تعبئة التطبيق استخدام أدوات مثل electron-forge والتفكير في مكان استضافة الحِزم لتحديثات التطبيق. ويصبح الأمر معقّدًا بسرعة نسبية، خاصةً عندما يكون الهدف هو إتاحة التطبيق على جميع المنصات. أريد أن أشير إلى أنّه من الممكن تمامًا إنشاء تطبيقات ملفتة باستخدام Electron من خلال بذل الجهد اللازم وتفانيًا كافيًا. بالنسبة إلى Excalidraw Desktop، لم نتمكّن من حلّ المشكلة.

مواصلة العمل من حيث توقفت في Excalidraw Desktop

يُعدّ تطبيق Excalidraw Desktop حتى الآن تطبيق ويب Excalidraw مجمّعًا كملف .asar مع إضافة نافذة لمحة عن Excalidraw. يكون شكل التطبيق وأسلوبه مطابقَين تقريبًا لإصدار الويب.

تطبيق Excalidraw Desktop الذي يعمل في حزمة Electron
لا يختلف تطبيق Excalibur Desktop تقريبًا عن إصدار الويب
نافذة "لمحة" في Excalidraw Desktop تعرِض إصدار حزمة Electron وتطبيق الويب
قائمة لمحة عن Excalibur التي تقدّم إحصاءات عن الإصدارات

على نظام التشغيل macOS، تتوفّر الآن قائمة على مستوى النظام في أعلى التطبيق، ولكن بما أنّه لا يمكن ربط أي من إجراءات القائمة، باستثناء إغلاق النافذة ولمحة عن Excalidraw، بأي شيء، فإنّ القائمة في حالتها الحالية غير مفيدة على الإطلاق. في الوقت نفسه، يمكن تنفيذ جميع الإجراءات من خلال أشرطة أدوات Excalidraw العادية وقائمة السياق.

شريط قوائم Excalidraw Desktop على نظام التشغيل macOS مع تحديد عنصر القائمة "ملف"، "إغلاق النافذة"
شريط قوائم Excalidraw Desktop على نظام التشغيل macOS

نستخدم electron-builder الذي يتيح ربط أنواع الملفات. من المفترض أن يؤدي النقر مرّتين على ملف .excalidraw إلى فتح تطبيق Excalidraw Desktop. يظهر مقتطف electron-builder.json المعنيّ على النحو التالي:

{
 
"fileAssociations": [
   
{
     
"ext": "excalidraw",
     
"name": "Excalidraw",
     
"description": "Excalidraw file",
     
"role": "Editor",
     
"mimeType": "application/json"
   
}
 
]
}

في الواقع، لا يعمل هذا الإجراء دائمًا على النحو المطلوب، لأنّ التطبيقات على نظام التشغيل Windows 10 لا تملك الحقوق اللازمة لربط نوع ملف بها، وذلك استنادًا إلى نوع التثبيت (للمستخدم الحالي أو لجميع المستخدمين).

وقد كانت هذه العيوب والعمل غير المكتمل لجعل التجربة شبيهة بالتطبيق على جميع المنصات (وهو أمر يمكن تحقيقه من خلال بذل الجهد الكافي) سببًا قويًا لإعادة النظر في استثمارنا في Excalidraw Desktop. ومع ذلك، كان لدينا سبب أكبر يدفعنا إلى ذلك، وهو أنّنا نتوقّع أنّه لن نحتاج في حالة الاستخدام التي نتعامل معها إلى جميع الميزات التي يوفّرها Electron. إنّ مجموعة قدرات الويب المتزايدة والمستمرة النمو تخدمنا بشكلٍ جيد بالقدر نفسه، إن لم يكن أفضل.

كيفية استفادة المستخدمين من الويب في الوقت الحالي وفي المستقبل

حتى في عام 2020، لا يزال jQuery رائجًا بشكلٍ كبير. وقد أصبح استخدام jQuery عادةً لدى العديد من المطوّرين، على الرغم من أنّه قد لا يحتاجون إلى jQuery اليوم. يتوفّر مرجع مشابه لتطبيق Electron، وهو بعنوان قد لا تحتاج إلى Electron. سأوضّح سبب اعتقادنا بأنّنا لا نحتاج إلى Electron.

تطبيق ويب تقدّمي قابل للتثبيت

أصبح Excalidraw اليوم تطبيق ويب تقدّميًا قابلاً للتثبيت يتضمّن مشغّل خدمات و بيان تطبيق ويب. وتخزِّن هذه الميزة جميع مواردها في مخزّنين، أحدهما للخطوط وCSS المرتبط بالخطوط، والآخر لكل العناصر الأخرى.

علامة التبويب "التطبيق" في "أدوات مطوّري البرامج في Chrome" تعرض ذاكرتَي التخزين المؤقت Excalidraw
محتوى ذاكرة التخزين المؤقت في تطبيق Excalidraw

يعني ذلك أنّ التطبيق متوافق تمامًا مع وضع عدم الاتّصال بالإنترنت ويمكن تشغيله بدون اتصال بالشبكة. تطلب المتصفّحات المستندة إلى Chromium على كلٍّ من أجهزة الكمبيوتر المكتبي والأجهزة الجوّالة من المستخدم تثبيت التطبيق. يمكنك الاطّلاع على طلب التثبيت في لقطة الشاشة أدناه.

تطلب أداة Excalidraw من المستخدم تثبيت التطبيق في Chrome على نظام التشغيل macOS.
مربّع حوار تثبيت Excalidraw في Chrome

تم ضبط Excalidraw ليعمل كتطبيق مستقل، لذا عند تثبيته، ستحصل على تطبيق يعمل في نافذته الخاصة. ويتم دمجها بالكامل في واجهة مستخدم المهام المتعددة في نظام التشغيل، ويظهر رمز التطبيق الخاص بها على الشاشة الرئيسية أو شريط التطبيقات أو شريط المهام، وذلك حسب النظام الأساسي الذي يتم تثبيتها عليه.

تشغيل Excalidraw في نافذته الخاصة
تطبيق الويب التقدمي Excalidraw في نافذة مستقلة
رمز Excalidraw على شريط Dock في نظام التشغيل macOS
رمز Excalidraw على شريط Dock في نظام التشغيل macOS

الوصول إلى نظام الملفات

يستخدم Excalidraw browser-fs-access ل الوصول إلى نظام ملفات نظام التشغيل. في المتصفّحات المتوافقة، يتيح ذلك تنفيذ سير عمل حقيقي يتضمن الخطوات التالية: فتح→تعديل→حفظ، وعمليات حفظ إضافية و "حفظ باسم"، مع توفير بديل شفاف للمتصفّحات الأخرى. يمكنك الاطّلاع على مزيد من المعلومات حول هذه الميزة في مشاركة المدوّنة التي نشرتها بعنوان: قراءة الملفات والأدلة وكتابتها باستخدام مكتبة browser-fs-access.

إتاحة السحب والإفلات

يمكن سحب الملفات وإفلاتها في نافذة Excalidraw تمامًا كما هو الحال في التطبيقات المخصّصة للمنصة. في متصفح يتوافق مع واجهة برمجة التطبيقات File System Access API، يمكن تعديل ملف تم إسقاطه على الفور وحفظ التعديلات في الملف الأصلي. إنّ هذه العملية سهلة جدًا بحيث تنسَ أحيانًا أنّك تتعامل مع تطبيق ويب.

الوصول إلى الحافظة

يعمل تطبيق Excalidraw بشكل جيد مع حافظة نظام التشغيل. يمكن نسخ رسومات Excalidraw بالكامل أو العناصر الفردية فقط ولصقها بتنسيقَي image/png وimage/svg+xml، ما يتيح دمجها بسهولة مع أدوات أخرى خاصة بالمنصة، مثل Inkscape أو الأدوات المستندة إلى الويب، مثل SVGOMG.

قائمة سياق Excalidraw تعرِض عنصرَي القائمة "النسخ إلى الحافظة بتنسيق SVG" و"النسخ إلى الحافظة بتنسيق PNG"
قائمة سياق Excalidraw التي تقدّم إجراءات الحافظة

معالجة الملفات

يتيح تطبيق Excalidraw حاليًا استخدام واجهة برمجة التطبيقات التجريبية File Handling API، ما يعني أنّه يمكن النقر مرّتين على ملفات .excalidraw في مدير ملفات نظام التشغيل وفتحها مباشرةً في تطبيق Excalidraw، لأنّ Excalidraw يتم تسجيله كمعالج ملفات لملفات .excalidraw في نظام التشغيل.

يمكن مشاركة رسومات Excalidraw باستخدام رابط. في ما يلي مثال على ذلك. في المستقبل، إذا كان المستخدمون قد ثبَّتوا Excalidraw كتطبيق ويب تقدّمي، لن يتم فتح هذه الروابط في علامة تبويب متصفّح، بل سيتم تشغيل نافذة مستقلة جديدة. في انتظار التنفيذ، سيعمل هذا الإجراء بفضل التقاط الروابط التعريفية، وهو اقتراح رائج في الوقت الحالي لاستخدام ميزة جديدة في منصة الويب.

الخاتمة

لقد قطعت الويب شوطًا طويلاً، حيث تم طرح المزيد والمزيد من الميزات في المتصفّحات التي لم يكن من الممكن توفّرها على الويب قبل بضع سنوات أو حتى أشهر، وكانت حصرية للتطبيقات المخصّصة للنظام الأساسي. يُعدّ Excalidraw في طليعة الميزات المتاحة في المتصفّح، مع الاعتراف بأنّه ليس كل المتصفّحات على جميع المنصات تتيح كل ميزة نستخدمها. من خلال الاعتماد على استراتيجية تحسين تدريجي، نتمكّن من الاستفادة من أحدث الميزات وأفضلها كلما أمكن ذلك، ولكن بدون ترك أي مستخدم بدون ميزات. يُفضَّل مشاهدتها في أي متصفّح.

لقد ساعدنا Electron كثيرًا، ولكن في العام 2020 وما بعده، يمكننا الاستغناء عنه. بالنسبة إلى هدف @vjeux: بما أنّ "متجر Google Play" لأجهزة Android يقبل الآن التطبيقات المتوافقة مع الأجهزة الجوّالة التي تعمل على الويب في تنسيق حاوية يُعرف باسم نشاط الويب الموثوق به، ولأنّ متجر Microsoft يتيح التطبيقات المتوافقة مع الأجهزة الجوّالة التي تعمل على الويب، يمكنك أيضًا توقّع توفّر Excalidraw في هذه المتاجر في المستقبل القريب. في هذه الأثناء، يمكنك استخدام Excalidraw وتثبيته في المتصفّح ومنه في أي وقت.

الشكر والتقدير

راجع هذه المقالة كلّ من ‎@lipis و ‎@dwelle و Joe Medley.