الأشياء التي أتمنى أن أعرفها قبل العمل مع Electron.js

في هذه المقالة ، سأشارك كيف يمكنك تجنب بعض الأخطاء التي ارتكبتها عند التعرف على Electron.js؟ ‍♂️. اتمني ان يكون مفيدا!

ملاحظة : لن يكون هذا درسًا تعليميًا عن الترميز ، بل مناقشة حول الوجبات السريعة الشخصية الخاصة بي.

قبل شهرين ، قررت التركيز أكثر على بناء منتجي الجانبي ، تاجر . لقد ألهمني تصميمه بسبب عدد الصور التي لدي على جهاز الكمبيوتر الخاص بي.

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

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

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

أنا أقوم بإنشاء taggr كتطبيق سطح مكتب متعدد الأنظمة الأساسية. سأشارك هنا بعض الأشياء التي تعلمتها حول تطوير التطبيقات عبر الأنظمة الأساسية مع Electron.js والتي كنت أتمنى أن أعرفها منذ البداية. هيا بنا نبدأ!

خلفية

قبل تقديم الوجبات السريعة في هذه الرحلة المستمرة مع Electron ، أود أن أعطي المزيد من المعلومات الأساسية عن نفسي ومتطلبات taggr .

يأتي كل مطور من خلفية مختلفة ، وكذلك متطلبات التطبيقات التي يطورونها.

قد يساعد تحديد سياق الخيارات التي قمت بها لهذا المشروع المطورين المستقبليين على تحديد الأدوات المناسبة بناءً على احتياجاتهم وخبراتهم (بدلاً من ما يتم الترويج له هناك - GitHub؟ ، أنا أنظر إليك).

كما ذكرنا سابقًا ، منذ البداية تصورت taggr كتطبيق متعدد المنصات. سيقوم التطبيق بتنفيذ جميع عمليات المعالجة المسبقة وحسابات التعلم الآلي المطلوبة من جانب العميل نظرًا للتركيز على الخصوصية.

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

من جانبي ، أنا مهندس واجهة أمامية أحب الويب وجافا سكريبت. لقد عملت سابقًا مع Java و C # ، لكنني أستمتع بالمرونة التي يوفرها الويب ونظامه البيئي النابض بالحياة.

بعد أن عانيت بشكل مباشر من ألم استخدام أدوات مثل Eclipse RCP لإنشاء تطبيقات جانب العميل من قبل ، كنت أعرف أنني لا أريد العمل مع هذه التقنية مرة أخرى.

باختصار ، فإن متطلبات المكدس الخاصة بي لـ taggr تتلخص في ما يلي:

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

كما ترى ، فإن المتطلبات لا تُقرأ على النحو التالي: يجب أن أستخدم React مع Redux ، و Observables و WebSockets . هذه تفاصيل تنفيذ منخفضة المستوى ، ويجب تحديدها متى وإذا دعت الحاجة.

اختر الأداة المناسبة للمهمة بدلاً من اختيار مجموعة من البداية ، متجاهلاً المشاكل المطروحة.

لذلك ، بعد بحث غوغل غاضب ، قررت أن أجرب Electron. لم أستخدم إطار العمل هذا من قبل ، لكنني علمت أن العديد من الشركات تستخدمه بنجاح في منتجات مثل Atom و VS Code و Discord و Signal و Slack والمزيد.

المصدر المفتوح والتوافق خارج الصندوق مع كل من أنظمة JS و Node (يتم إنشاء Electron باستخدام Chromium و Node) ، كان Electron.js أداة جذابة للعمل في متناول اليد.

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

ومع ذلك ، أود أن أذكر Tensorflow.js ، الذي يتيح تشغيل التدريب ونشر نماذج ML مباشرة في المتصفح (مع WebGL) والعقدة (مع روابط C) ، دون تثبيت أوقات تشغيل محددة لـ ML في المضيف.

لذا بالعودة إلى Electron - معتقدًا أنها كانت مثالية ، بدأت المتعة. ؟؟

يكفي الحديث عن الخلفية. دعنا نتعمق في الوجبات السريعة.

1. تبدأ صغيرة (وبطيئة)؟

هذا ليس مفهومًا جديدًا ، لكن الأمر يستحق طرحه بشكل دوري. لمجرد وجود عدد كبير من المشاريع المبتدئة الرائعة مع توفر Electron ، فهذا لا يعني أنه يجب عليك اختيار واحد على الفور.

انتظر. ماذا؟

البطيء سلس ، والسلس سريع. - قول البحرية

مع الراحة يأتي التعقيد

في حين أن تلك المبتدئين تتضمن العديد من عمليات الدمج المفيدة (Webpack و Babel و Vue و React و Angular و Express و Jest و Redux) ، إلا أن لديهم أيضًا مشكلاتهم.

بصفتي مبتدئًا في Electron ، قررت أن أختار نموذجًا بسيطًا يتضمن أساسيات "إنشاء ونشر وتثبيت تطبيقات Electron" بدون الأجراس والصفارات الإضافية. ولا حتى Webpack في البداية.

أوصي بالبدء بشيء مشابه لـ Electron-Forge للنهوض والعمل بسرعة ، يمكنك ذلكقم بإعداد مخطط التبعية والهيكل الخاص بك في الأعلى لتعلم حبال الإلكترون.

عندما تأتي المشكلات (وستحدث) ، ستكون أفضل حالًا إذا أنشأت مشروعك المبدئي المخصص بدلاً من اختيار واحد به نصوص برمجية +30 نانومتر في الدقيقة و +180 تبعيات لتبدأ به.

ومع ذلك ، بمجرد أن تشعر بالراحة مع أساس Electron ، لا تتردد في تصعيد اللعبة باستخدام Webpack / React / Redux / TheNextHotFramework. لقد فعلت ذلك بشكل تدريجي وعند الحاجة. لا تقم بإضافة قاعدة بيانات في الوقت الفعلي إلى تطبيق todo لمجرد أنك قرأت مقالة رائعة عنها في مكان ما.

2. هيكلة تطبيقك بعناية؟ ‍♂️

استغرق هذا الأمر وقتًا أطول قليلاً مما يسعدني الاعتراف به. ؟

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

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

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

3. التصميم مع وضع نموذج الخيوط في الاعتبار؟

لن أخوض كثيرًا في التفاصيل هنا - أنا فقط أضاعف بشكل أساسي ما تم شرحه بذهول في المستندات الرسمية.

في حالة taggr المحددة ، هناك العديد من العمليات المكثفة لوحدة المعالجة المركزية (CPU) و GPU و IO. عند تنفيذ هذه العمليات في مؤشر ترابط العارض الرئيسي أو الرئيسي لـ Electron ، ينخفض ​​عدد FPS من 60 ، مما يجعل واجهة المستخدم بطيئة.

تقدم Electron عدة بدائل لإلغاء تحميل هذه العمليات من سلاسل العمليات الرئيسية وعارض ، مثل WebWorkers أو Node Worker Threads أو حالات BrowserWindow. لكل منها مزاياها ومحاذيرها ، وستحدد حالة الاستخدام التي تواجهها أيهما هو الأنسب.

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

على سبيل المثال ، إذا كنت تعتقد أن واجهة تمرير رسائل WebWorkers قد لا تكون الأسهل في تصحيح الأخطاء ، فجرب comlink.

4. اختبار ❌ ، والاختبار ❌ ، والاختبار ✔️

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

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

استخراج موقع GPS؟ ️

قبل يومين ، أثناء تنفيذ ميزة استخراج موقع GPS لـ taggr ، بمجرد أن أصبحت اختبارات الوحدة خضراء وعملت الميزة في التطوير (مع Webpack) ، قررت تجربتها في بيئة الإنتاج.

بينما تعمل الميزة بشكل جيد في التطوير ، إلا أنها فشلت فشلاً ذريعًا في الإنتاج. تمت قراءة معلومات EXIF ​​من الصور على أنها ثنائية وتمت معالجتها بواسطة مكتبة تابعة لجهة خارجية. بينما تم تحميل المعلومات الثنائية بشكل صحيح في كلتا البيئتين (تم التحقق من اختلافهما) ، فشلت مكتبة الطرف الثالث عند تحليل هذه البيانات في بنية الإنتاج. عفوا، ؟؟

الحل : اكتشفت أن إعدادات الترميز في بيئات التطوير والإنتاج التي حددتها Webpack لم تكن هي نفسها. تسبب هذا في تحليل البيانات الثنائية كـ UTF-8 قيد التطوير ولكن ليس في الإنتاج. تم إصلاح المشكلة من خلال إعداد رؤوس التشفير المناسبة في ملفات HTML التي تم تحميلها بواسطة Electron.

صور غير تقليدية؟

عند التعامل مع الصور والعمل معها ، قد تعتقد أنه إذا كان تنسيق JPEG "يعمل فقط" على جهاز الكمبيوتر الخاص بك ، فهو JPEG صالح. خطأ .

أثناء العمل مع مكتبة معالجة صور Node بشكل حاد ، أدى تغيير حجم بعض صور JPEG إلى تعطل التطبيق. بعد البحث عن كثب ، كان السبب هو صور JPEG غير الصحيحة التي تم إنشاؤها بواسطة البرامج الثابتة من Samsung. ؟ ‍♂️

الحل : إعداد حدود خطأ محسّنة في التطبيق (مثل كتل try-catch) ، وتعديل وحدة تحليل JPEG ، والشك في كل شيء ؟ ️

ملخص

تزدهر أنظمة Node و JavaScripts ، مع إنشاء العديد من الأدوات القوية ومشاركتها كل يوم.

يجعل مقدار الخيارات من الصعب اختيار مسار واضح لبدء إنشاء تطبيق Electron الرائع الجديد. بغض النظر عن الأطر التي تختارها ، أوصي بالتركيز على ما يلي:

  1. ابدأ بخطوات صغيرة وأضف التعقيد بشكل تدريجي.
  2. قم ببناء تطبيقك بعناية ، واحتفظ بالخلفية ، وواجهة المستخدم بشكل نمطي .
  3. صمم مع وضع نموذج الترابط في الاعتبار ، حتى عند إنشاء تطبيقات صغيرة.
  4. قم بإجراء الاختبار والاختبار مرة أخرى ، للقبض على معظم الأخطاء في وقت مبكر وحفظ الصداع.

شكرا للبقاء حولك حتى النهاية! ؟

taggr هو تطبيق سطح مكتب متعدد الأنظمة يتيح للمستخدمين إعادة اكتشاف ذكرياتهم الرقمية مع الحفاظ على خصوصيتهم . يتوفر Open-alpha قريبًا على أنظمة Linux و Windows و Mac OS. لذا تابع Twitter و Instagram ، حيث أنشر تحديثات التطوير والميزات القادمة والأخبار.