بعض الكراهية بشدة تطبيقات
الإلكترون . يبدو أن التطبيق يتضمن متصفح Chromium ، بعبارة ملطفة وغريبة. يتم تعزيز هذا الشعور أثناء العمل مع هذه التطبيقات. فهي تستهلك الكثير من الذاكرة ، وتحمل ببطء وليس لديها معدل رد فعل مرتفع بشكل خاص على تفاعلات المستخدم. ليس من السهل تطوير تطبيق ويب جيد. لماذا يتم جر تقنيات الويب إلى بيئة سطح المكتب؟ بعد كل شيء ، هناك شعور في هذه البيئة أنها تخلق مجموعة من المشاكل؟
يقول مؤلف المادة ، التي ننشرها اليوم ، إنه لن يلعب دور المدافع عن الإلكترون ، على الرغم من أن كل شيء يتحدث عن نجاح هذه المنصة. صحيح أن أحدا لن يقوم بخصم التجاوزات المتأصلة في تطبيقات الإلكترون. هل من الممكن ، أثناء تطوير هذه التطبيقات ، قتل عصفورين بحجر واحد في طلقة واحدة؟
بعض مشاكل Electron (أحجام الملفات الكبيرة ، التحميل البطيء) هي إرث من التقنيات التي يعتمد عليها هذا النظام الأساسي. يجب معالجتها على مستوى منخفض. يمكن حل المشكلات الأكثر خطورة (استهلاك الذاكرة ، وبطء الواجهات) عند المستوى الذي يتم فيه تطوير التطبيقات الإلكترونية. ومع ذلك ، فإن حل هذه المشكلات ليس بالأمر السهل. ماذا لو كان هناك سر ، مع العلم أنه يمكنك ، في الوضع التلقائي ، تقليل هذه العيوب؟
إذا كنت ترغب في قراءة رمز البرنامج ، يمكنك البحث في
هذا المستودع على الفور. هنا هو المشروع الذي سيتم النظر فيه في هذه المواد.
جوهر السر
يكمن سر تطوير تطبيقات الإلكترون عالية الجودة في إجراء الجزء الأكبر من الحسابات على النظام المحلي ، في عمليات الخلفية. كلما قلت درجة اعتمادك على الخدمات السحابية ، وكلما زاد العمل الذي تقوم به في عمليات الخلفية ، يمكنك تجربة التأثيرات الإيجابية التالية:
- تحميل البيانات الفورية. لن يضطر مستخدمو التطبيق أبدًا إلى انتظار تنزيل البيانات عبر الشبكة. يتم تنزيل البيانات من التخزين المحلي. هذا يعطي التطبيق على الفور دفعة أداء ملموسة.
- متطلبات التخزين المؤقت منخفضة. لا يحتاج تطبيق العميل إلى القلق خاصة حول التخزين المؤقت. ذلك لأن جميع البيانات التي يحتاجها متوفرة محليًا. لكي يصل تطبيق الويب إلى مستوى مناسب من الأداء ، فإنه يحتاج عادةً إلى تحميل كمية هائلة من البيانات في حالته المحلية. هذا أحد أسباب ارتفاع استهلاك ذاكرة تطبيقات الإلكترون.
أنا هنا لا أتحدث عن مزايا أخرى لتخزين البيانات المحلية ، على سبيل المثال ، حول إمكانية العمل دون الاتصال بشبكة.
ألقِ نظرة على مقدار الذاكرة التي يستهلكها تطبيق Electron - مدير التمويل الشخصي
في Actual . هذا البرنامج يخزن جميع بياناته محليا. تعد مزامنة البيانات بين الأجهزة المختلفة ميزة اختيارية ، ولا تؤثر على الوظيفة الرئيسية. أفترض ، نظرًا لأن هذا التطبيق مصمم للعمل مع كميات كبيرة من البيانات ، فإن أرقام استهلاك الذاكرة الخاصة به تتحدث عن نفسها.
استهلاك الذاكرة الفعلييشغل التطبيق الذي لا يقوم بأي إجراءات نشطة ما مجموعه 239.1 ميغابايت من الذاكرة. قد يكون هذا المؤشر أكثر من ذلك ، يعتمد على ما يحدث بالضبط في التطبيق ، ولكن من الممكن أن تأخذ فقط العدد المحدد كقاعدة. هذا ليس مثاليًا ، لكنه ليس سيئًا للغاية. على الأقل - أفضل من 1371 ميغابايت من الذاكرة المطلوبة على جهاز الكمبيوتر الخاص بي سلاك. يجب أن أقول أن سلاك هو مثال غير عادي لتطبيق إلكترون ، يتميز بمشاكل محددة. كان هناك بعض الإحساس حول الإلكترون بسبب سلاك. تستهلك التطبيقات الأخرى ، مثل Notion أو Airtable ، حوالي 400-600 ميغابايت من الذاكرة. وهذا يعني أن طلبي يفوز جيدًا في هذا الصدد ولديه.
يجب أن أقول أنه تم الحصول على الرقم 239.1 ميغابايت من قبلي قبل أي تحسين. أخطط لإعادة كتابة بعض الأجزاء البالغة الأهمية والذاكرة المكثفة للتطبيق في Rust. هذا يجب أن يقلل بشكل كبير من متطلبات الذاكرة للتطبيق.
يمكن لخادم الخلفية تحسين استهلاك الذاكرة الخاصة به عن طريق تحميل البيانات المطلوبة فقط في وقت معين في الذاكرة. من الأفضل استخدام شيء مثل SQLite لتخزين البيانات. تم بالفعل تحسين نظام إدارة قواعد البيانات (DBMS) على نحو خطير لحل هذه المشكلات (بجدية - استخدم سكليتي فقط). بالإضافة إلى ذلك ، تجدر الإشارة إلى أن نقل الحسابات المختلفة إلى عمليات الخلفية يسمح لواجهة مستخدم التطبيق بالاستجابة لتأثيرات المستخدم في أسرع وقت ممكن.
اتضح أن استخدام خادم الخلفية في تطبيق Electron يتيح للمطور فرصًا مثيرة للاهتمام. في القسم التالي ، سنتحدث عن كل تلك الأشياء الرائعة التي يمكن القيام بها باستخدامه.
حتى إذا كان التطبيق مرتبطًا بشكل خطير بالبيانات السحابية ، فقد تحتاج إلى عملية خلفية إذا كنت تنوي العمل مع Node.js API. التفاعل مع واجهات برمجة التطبيقات هذه ممكن فقط من عمليات الخلفية. في الواقع ، أيا كان تطبيق الإلكترون الخاص بك ، أعتقد أن التعرف على المشروع الذي سنبحثه الآن يمكن أن يوفر لك بعض الأفكار المفيدة.
تطبيق مثال على الخادم الإلكتروني
لقد أنشأت تطبيق
مثال الإلكترون مع الخادم من أجل إظهار كل ما يلزم تكوينه لتطوير تطبيقات إلكترون محلية حقيقية باستخدام مثاله. لقد فعلت ذلك في محاولة للقبض على المبرمجين من خلال إنشاء مشاريع مماثلة. أرغب في مقابلة مشروع مماثل في وقت بدأت فيه العمل مع Electron.
يمكن العثور على معلومات فنية حول التطبيق في
README . هنا لمحة عامة عن المشروع:
- يقوم بإنشاء عملية Node.js المعتادة ، المستخدمة لتنفيذ رمز الخادم في الخلفية.
- فيه ، باستخدام node-ipc ، يتم إنشاء قناة IPC ، والتي تم تصميمها لتنظيم التفاعل المباشر بين الواجهة الخلفية وواجهة مستخدم التطبيق.
- إذا تم إطلاق المشروع في وضع التطوير ، فلن يبدأ الخادم كعملية خلفية. يمكنك التفاعل معها من خلال نافذة متصفح منفصلة. هذا لأغراض التصحيح.
الآن دعنا نتباطأ قليلاً ونلقي نظرة فاحصة على العنصر الأخير في هذه القائمة. في وضع التطوير ، هل يمكنك التفاعل مع الخادم من خلال نافذة متصفح منفصلة؟
أجزاء العميل والخادم من التطبيقنعم هو كذلك. بعد أن تعلمت كيفية بدء عمليات الخلفية ، أدركت أولاً أن لديّ أدوات مطور Chromium تحت تصرفي. وثانياً - أدركت أنه لأغراض تصحيح الأخطاء ، يمكنني استخدامها لتصحيح رمز Node.js. نتيجة لذلك ، أتحدث عن حقيقة أنه يمكنك التفاعل مع Node.js من خلال متصفح. يتيح لك ذلك استخدام مجموعة أدوات مطور برامج المستعرض الغنية التي تستند إلى Chromium لتصحيح رمز الخادم.
الآن دعونا نلقي نظرة على جميع الأشياء المثيرة للاهتمام التي يمكننا القيام بها بفضل تطبيق نظام تشغيل التطبيق المذكور أعلاه.
باستخدام وحدة التحكم
أضفت أوامر لتسجيل الطلبات والردود على ملف
server-ipc.js . يمكنني استكشافها باستخدام وحدة تحكم المتصفح.
تصحيح تطبيقات Node.js في وحدة تحكم المستعرضتنفيذ التعليمات البرمجية خطوة بخطوة
عند تصحيح جانب الخادم من التطبيق باستخدام مستعرض ، يمكنك استخدام تنفيذ التعليمات البرمجية خطوة بخطوة. هذا لا يعني أنه شيء رائع للغاية. لكن من السهل جدًا أن تكون هذه الميزة متاحة دائمًا ولا تتطلب استخدام برامج إضافية.
تنفيذ التعليمات البرمجية خطوة بخطوةجانبي
ربما هذه هي أداتي المفضلة. هذه أداة قياسية رائعة للبحث عن أداء التعليمات البرمجية ، والتي تسمح لك بملف تعريف جانب الخادم للتطبيق.
بحث خادم كود الأداءباستخدام أدوات مطور المتصفح ، يمكنك حتى استكشاف ما يحدث عند بدء عملية الخلفية (هذا على الأرجح الجزء الأصعب من بدء التطبيق).
للقيام بذلك ، ما عليك سوى بدء عملية تسجيل المؤشرات وإعادة تحميل النافذة. سيؤدي إعادة التشغيل إلى إعادة تشغيل الخادم. هذا يقودنا إلى الخطوة التالية.
إعادة تشغيل الخادم باستخدام مجموعة المفاتيح Cmd + R أو Ctrl + R
من الخيارات الأخرى لتصحيح أخطاء رمز الخادم في المستعرض أنه نظرًا لإجراء تصحيح أخطاء الخادم في إطار مستعرض ، فإن إعادة تحميل محتويات الإطار يؤدي ببساطة إلى إعادة تشغيل الخادم! يكفي استخدام تركيبة المفاتيح
Cmd+R (أو ، لنظام Windows ،
Ctrl+R ) ، وهي تحت تصرفك أحدث التغييرات التي تم إجراؤها على رمز الخادم. في هذه الحالة ، يتم حفظ بيانات الواجهة الأمامية. هذا يعني أنه يمكنك متابعة العمل مع جزء العميل من التطبيق ، ولكن بعد إعادة تشغيل الخادم ، سيعمل جزء العميل بالفعل مع الإصدار الجديد من رمز الخادم. هذا يذكرنا بشيء مثل تبادل الكود "الساخن" على خادم يعمل.
يوضح الشكل التالي كيف ، بتغيير رمز الخادم ، قمت بإعادة تحميل الصفحة بالضغط على
Cmd+R بعد ذلك ، واصلت العمل مع العميل ، والذي يتفاعل الآن مع الإصدار الجديد من الخادم.
إعادة تشغيل الخادمالبحث في جانب الخادم قيد التشغيل من التطبيق ورمز المبادلة السريعة
عادةً ، عند تصحيح أخطاء الخادم ، أود ببساطة إضافة الأمر
console.log() إلى الأماكن الصحيحة في الكود وإعادة تشغيله. لكن في بعض الأحيان ، في الحالات الصعبة بشكل خاص ، قد يكون من المفيد للغاية النظر إلى ما يحدث في الخادم قيد التشغيل ، بدلاً من إعادة تشغيله. من الممكن أن "لا تنظر" فقط داخل الخادم ، ولكن يمكنك أيضًا تغيير شيء ما فيه من أجل النظر في كيفية تأثير ذلك على المشكلة.
في وحدة التحكم ، يمكنك استخدام الأمر Node.js
require . هذا يعني أنه بمساعدتها يمكنك توصيل أي وحدات خادم والعمل معها في وحدة التحكم.
لنفترض أننا بحاجة إلى العمل مع
server-handler.js . للقيام بذلك ، ما عليك سوى تشغيل الأمر الذي
let handlers = require('./server-handlers') في وحدة التحكم.
لنقم بإنشاء نظام لتخزين حالة الخادم. في حالتنا ، ستكون هذه قائمة بجميع البيانات التي تم تمريرها إلى وظيفة
make-factorial (ستكون حالة خادم التطبيق الحقيقي أكثر تعقيدًا):
handlers._history = [] handlers['make-factorial'] = async ({ num }) => { handlers._history.push(num) }
يمكنك
handlers._history حالة الخادم من وحدة التحكم عن طريق توصيل الوحدة النمطية المناسبة والنظر في
handlers._history . إذا رغبت في ذلك ، أثناء تنفيذ البرنامج ، يمكننا حتى استبدال التطبيق
make-factorial !
خادم حالة البحثالنتائج
ألقِ نظرة على مستودع
مثال خادم الإلكترون من أجل قراءة تفاصيل تنفيذ المشروع ومشاهدة رمز جانب الخادم من تطبيق Electron.
إذا كنت تستخدم Visual Studio Code ، فيمكنك استخدام تكامل عالي الجودة لأدوات المطور مع خادم Node.js. باستخدام هذا النهج ، يمكنك بدء تشغيل الخادم بنفسك ، بشكل منفصل عن تطبيق Electron. بعد ذلك ، يمكنك إخبار Electron أنك بحاجة إلى الاتصال بالعملية التي يملكها VS Code. ومع ذلك ، أفضل استخدام أدوات تطوير Electron الحالية.
هذا يعني أن للمبرمج فرصة استخدام أي أدوات تحرير التعليمات البرمجية لجهة خارجية ولديه في الوقت نفسه حق الوصول الكامل إلى جميع أدوات مطور المتصفح.
خلال السنوات القليلة الماضية ، قمت بتطوير التطبيق
الفعلي واستخدم باستمرار ما تحدثت عنه للتو. وأريد أن أقول إنني حقاً أحب كل هذا. ربما أصبح العمل على جزء Node.js من هذا التطبيق مصدر تجربة البرمجة الأكثر متعة التي مررت بها على الإطلاق.
بالإضافة إلى ذلك ، من المهم جدًا أن تساعدنا المبادئ الموضحة أعلاه على تطوير تطبيقات محلية حقيقية. لدينا بالفعل جميع التقنيات اللازمة لهذا الغرض. الشيء الرئيسي هو استخدامها بشكل صحيح.
أعزائي القراء! ما هو شعورك تجاه التطبيقات القائمة على الإلكترون؟
