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

تعرف على السبب الذي جعل مشروع ExcaliDraw قرر إيقاف برنامج Electron الخاص به نهائيًا لصالح إصدار الويب.

Thomas Steiner

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

في مشروع ExcaliDraw، قرّرنا إيقاف برنامج ExcaliDraw Desktop نهائيًا، وهو برنامج تضمين Electron لـ ExcaliDraw، لصالح إصدار الويب الذي يمكنك العثور عليه دائمًا على excalidraw.com. وبعد إجراء تحليل دقيق، قررنا أن يكون المستقبل الذي نرغب في تطوير تطبيق الويب التقدّمي (PWA) هو تطبيق الويب التقدّمي (PWA). تابع القراءة لمعرفة السبب.

كيفية ظهور ExcaliDraw Desktop

بعد وقت قصير من إنشاء @vjeux للنسخة الأولية من ExcaliDraw في كانون الثاني (يناير) 2020 ونشر مشاركة حول هذا الموضوع، اقترح ما يلي في المشكلة رقم 561:

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

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

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

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

يجب علينا تنفيذ الإجراءين :)

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

وحتى يومنا هذا، لم يتم بعد تحقيق الهدف الأولي الذي وضعته @vjeux، وهو إرسال تطبيق ExcaliDraw إلى متاجر التطبيقات المختلفة. بصراحة، لم يبدأ أحد حتى في عملية الإرسال إلى أي من المتاجر. ولكن ما سبب ذلك؟ قبل الإجابة، لنلقي نظرة على Electron، النظام الأساسي.

ما هي 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. يسلط دليل المشروع الضوء على ذلك "بالنسبة إلى تطبيق الإنتاج، تحتاج إلى توقيع تطبيقك. سيحظر فلتر الشاشة الذكية في Internet Explorer تنزيل تطبيقك، وسيعتبر العديد من مورّدي مكافحة الفيروسات تطبيقك برامج ضارة ما لم تحصل على شهادة صالحة" [sic].

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

من حيث توقّف ExcaliDraw Desktop

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

لا يمكن تقريبًا تمييز Excalibur Desktop عن إصدار الويب.

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

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

شريط القوائم في ExcaliDraw Desktop على نظام التشغيل macOS

نستخدم Electronic-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 يُسمى You قد لا تحتاج Electron اسمح لي أن أوضح سبب اعتقادنا أننا لسنا بحاجة إلى Electron.

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

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

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

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

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

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

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

رمز ExcaliDraw على قاعدة الإرساء في نظام التشغيل macOS

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

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

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

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

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

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

قائمة سياق ExcaliDraw التي تعرض إجراءات الحافظة

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

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

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

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

الخلاصة

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

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

شكر وتقدير

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