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

تعرّف على الأسباب التي دفعت مشروع ExcaliDraw لإيقاف برنامج تضمين Electron لصالح الويب .

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

كيف تم إطلاق ExcaliDraw Desktop؟

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

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

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

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

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

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

أثناء العمل على تحويل إصدار ExcaliDraw إلى تطبيق ويب تقدّمي (PWA)، بدأ @voluntadpear وغيرها لاحقًا، @lipis بشكل مستقل تقدمت وأنشأت مستودع منفصل لـ Excali draw Desktop.

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

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

المكان الذي توقّف عنده ExcaliDraw Desktop

يُعدّ تطبيق Excali draw Desktop حتى الآن تطبيقًا أولًا لـ ExcaliDraw ضِمن التطبيق. .asar مع نافذة لمحة عن ExcaliDraw مُضافة. المظهر ومظهر التطبيق متطابقان تقريبًا مع إصدار الويب.

تطبيق ExcaliDraw لسطح المكتب قيد التشغيل في برنامج تضمين Electron.
لا يمكن تمييز تطبيق Excali draw Desktop تقريبًا عن إصدار الويب
.
لمحة عن ألبوم The ExcaliDraw Desktop نافذة تعرض إصدار برنامج تضمين Electron وتطبيق الويب.
قائمة لمحة عن Excalibur التي توفر إحصاءات حول الإصدارات

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

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

ونستخدم أداة إنشاء الإلكترونات، التي تدعم ارتباطات أنواع الملفات. من خلال النقر مرّتين على ملف .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 Might Not need Electron (قد لا تحتاج إلى إلكترون). دعني ونحدد لماذا نعتقد أننا لسنا بحاجة إلى Electron.

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

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

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

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

يطالب تطبيق Excali draw المستخدم بتثبيت التطبيق في متصفّح Chrome على نظام التشغيل macOS.
مربع حوار تثبيت ExcaliDraw في Chrome

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

يعمل تطبيق ExcaliDraw في نافذته الخاصة.
تطبيق الويب التقدّمي ExcaliDraw في نافذة مستقلة
رمز ExcaliDraw على "قاعدة الإرساء" على نظام التشغيل macOS
رمز ExcaliDraw على "قاعدة الإرساء" على نظام التشغيل macOS

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

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

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

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

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

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

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

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

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

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

الخاتمة

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

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

شكر وتقدير

تمت مراجعة هذه المقالة بواسطة @lipis، @dwelle جو ميدلي.