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

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

Thomas Steiner

ملاحظة: Excalidraw هو لوح معلومات افتراضي تعاوني يتيح لك بسهولة رسم مخطّطات بيانية تبدو مرسومة يدويًا. تم نشر هذه المقالة على مدوّنة Exacalidraw، وهي أول مكان نشر لها.

في ما يتعلّق بمشروع 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. يكون شكل التطبيق وأسلوبه مطابقَين تقريبًا لإصدار الويب.

لا يختلف تطبيق Excalibur Desktop كثيرًا عن إصدار الويب

قائمة لمحة عن Excalibur التي تقدّم إحصاءات عن الإصدارات

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

شريط قائمة 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 ذات الصلة بالخطوط والآخر لحفظ كل العناصر الأخرى.

محتوى ذاكرة التخزين المؤقت في تطبيق Excalidraw

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

مربّع حوار تثبيت Excalidraw في Chrome

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

تطبيق الويب التقدمي Excalidraw في نافذة مستقلة

رمز 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 التي تقدّم إجراءات الحافظة

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

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

تسجيل الروابط التعريفية

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

الخاتمة

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

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

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

تمت مراجعة هذه المقالة من قِبل ‎@lipis و ‎@dwelle و Joe Medley.