إيقاف إصدار 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 في النهاية بسيطًا:

علينا القيام بالأمرين معًا :)

على الرغم من أنّه تم بدء العمل على تحويل إصدار Excalidraw إلى تطبيق ويب تقدّمي من قِبل ‎@voluntadpear ثم من قِبل آخرين، بدأ ‎@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 بعيد كل البعد عن ميزة "الكتابة مرة واحدة والتشغيل في كل مكان". يتطلب توزيع التطبيق على متاجر التطبيقات استخدام توقيع الرمز البرمجي، وهي تقنية أمان لشهادة ملكية التطبيق. يتطلب إنشاء حزمة من التطبيق استخدام أدوات مثل التمثيل الإلكتروني والتفكير في مكان استضافة الحزم لتحديثات التطبيق. ويصبح الأمر معقّدًا بسرعة نسبية، خاصةً عندما يكون الهدف هو إتاحة التطبيق على جميع المنصات. أريد أن أشير إلى أنّه من الممكن تمامًا إنشاء تطبيقات ملفتة للنظر باستخدام IDE باستخدام الجهد والالتزام الكافيَين. بالنسبة إلى Excalidraw Desktop، لم نتمكّن من حلّ المشكلة.

ميزات Excalidraw Desktop

يُعدّ ExcaliDraw Desktop حتى الآن تطبيق Excali draw للويب ضِمن حزمة .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. يتوفّر مرجع مشابه لتطبيق Electron، وهو بعنوان قد لا تحتاج إلى Electron. اسمحوا لي أن أوضح سبب اعتقادنا بأننا لا نحتاج إلى Electron.

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

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

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

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

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

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

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

رمز Excalidraw على شريط Dock في نظام التشغيل macOS

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

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

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

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

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

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

قائمة سياق Excalidraw التي تقدّم إجراءات الحافظة

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

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

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

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

الخاتمة

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

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

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

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