قد يكون الحفاظ على بساطة تطبيق الويب معقدًا بشكل مدهش. في هذه الوحدة، ستتعرف على طريقة عمل واجهات برمجة تطبيقات الويب مع سلاسل المحادثات وكيفية استخدام هذه الواجهة لأنماط تطبيق الويب التقدّمية (PWA) الشائعة مثل إدارة الحالة.
البساطة والتعقيد
في حديثه بعنوان Simple Made Easy، يناقش "ريتش هيكي" خصائص الأمور البسيطة مقابل الأشياء المعقدة. ويصف هذا الفيديو الأمور البسيطة بأنها تركّز على ما يلي:
"دور واحد أو مهمة واحدة أو مفهوم واحد أو سمة واحدة".
لكنه يؤكد على أن البساطة لا تتعلق:
"توفُّر مثيل واحد أو إجراء عملية واحدة."
سواء كان الشيء بسيطًا أم لا، يتعلق بمدى ترابطه.
تأتي التعقيد من التجليد أو النسج أو استخدام مصطلح ريتش الذي يكمّل الأشياء معًا. يمكنك حساب مدى التعقيد من خلال حساب عدد الأدوار أو المهام أو المفاهيم أو الأبعاد التي يديرها شيء ما.
البساطة ضرورية في تطوير البرمجيات لأن التعليمات البرمجية البسيطة أسهل في الفهم والصيانة. البساطة ضرورية أيضًا لتطبيقات الويب لأنها قد تساعد في جعل التطبيق سريعًا وسهل الوصول إليه في كل سياق ممكن.
إدارة تعقيد تطبيق الويب التقدّمي (PWA)
ترتبط جميع رموز JavaScript التي نكتبها للويب في سلسلة التعليمات الرئيسية. مع ذلك، تنطوي سلسلة التعليمات الرئيسية على الكثير من التعقيدات الخارجة عن المألوف التي لا يمكنك، بصفتك مطوِّرًا، التحكّم فيها.
سلسلة التعليمات الرئيسية هي:
- المختصين برسم الصفحة، وهي في حد ذاتها عملية معقدة متعددة الخطوات تتضمن حساب الأنماط، وتحديث الطبقات وتكوينها، والرسم على الشاشة.
- مسؤولة عن الاستماع إلى الأحداث والتفاعل معها، بما في ذلك أحداث مثل تصفُّح المحتوى
- تكون مسؤولة عن تحميل الصفحة وإلغاء تحميلها.
- إدارة الوسائط والأمان والهوية هذا كل شيء قبل أن تتمكن حتى من تنفيذ أي تعليمة برمجية تكتبها في سلسلة التعليمات هذه، مثل:
- معالجة DOM.
- الوصول إلى واجهات برمجة التطبيقات الحساسة، مثل إمكانات الجهاز أو الوسائط/الأمان/الهوية
وفقًا لما قاله "سورما" في محاضرته في مؤتمر Chrome Dev Summit لعام 2019، إنّ سلسلة التعليمات الرئيسية مرهقة وغير متكلفة جدًا.
ومع ذلك، تبقى معظم رموز التطبيق في سلسلة التعليمات الرئيسية أيضًا.
وتزيد كل هذه الرموز من مدى تعقيد سلسلة التعليمات الرئيسية. سلسلة التعليمات الرئيسية هي السلسلة الوحيدة التي يمكن للمتصفح استخدامها لوضع المحتوى وعرضه على الشاشة. لذلك، عندما يتطلب الرمز المزيد والمزيد من إمكانيات المعالجة لإكمال المعالجة، نحتاج إلى تشغيله سريعًا، لأن كل ثانية يستغرقها تنفيذ منطق التطبيق هي ثانية لا يستطيع المتصفّح الاستجابة فيها لإدخال المستخدم أو إعادة رسم الصفحة.
عندما لا تتصل التفاعلات بالمدخلات أو عند انخفاض الإطارات أو عندما يستغرق استخدام أحد المواقع وقتًا طويلاً جدًا، يصاب المستخدمون بالإحباط ويشعرون بأن التطبيق معطّل، وبالتالي تقل ثقتهم فيه.
هل لديك أخبار سيئة؟ تعد إضافة تعقيد إلى سلسلة التعليمات الرئيسية طريقة مؤكدة تقريبًا لجعل تحقيق هذه الأهداف صعبًا. هل نحمل لك أخبارًا سارّة؟ نظرًا لأن ما يجب أن تقوم به سلسلة التعليمات الرئيسية واضح: يمكن استخدامها كدليل للمساعدة في تقليل الاعتماد عليها لبقية تطبيقك.
فصل المخاوف
هناك الكثير من أنواع العمل المختلفة التي تقوم بها تطبيقات الويب، ولكن بشكل عام، يمكنك تقسيمها إلى عمل يرتبط مباشرةً بواجهة المستخدم ولا يعمل. عمل واجهة المستخدم هو عمل:
- لمس DOM مباشرةً
- استخدام واجهات برمجة التطبيقات التي تلمس إمكانات الجهاز، مثل الإشعارات أو الوصول إلى نظام الملفات
- لمس الهوية، على سبيل المثال، ملفات تعريف الارتباط للمستخدم، أو التخزين المحلي أو مساحة التخزين للجلسة.
- يدير الوسائط، مثل الصور أو الصوت أو الفيديو.
- تتضمّن تداعيات أمنية قد تتطلب تدخل المستخدم للموافقة عليها، مثل واجهة برمجة التطبيقات (API) التسلسلي على الويب.
يمكن أن يتضمن العمل الذي لا يتبع واجهة المستخدم عناصر مثل:
- عمليات حسابية خالصة.
- الوصول إلى البيانات (جلب وقاعدة بيانات مفهرسة وما إلى ذلك).
- التشفير.
- المراسلة
- إنشاء بث غير مباشر أو بث مباشر أو التلاعب به
غالبًا ما يتم حجز العمل الذي لا يستند إلى واجهة المستخدم، وذلك من خلال عمل واجهة المستخدم: ينقر المستخدم على زر يؤدي إلى تنفيذ طلب شبكي لواجهة برمجة تطبيقات تعرض نتائج تحليل يتم استخدامها بعد ذلك لتعديل نموذج العناصر في المستند (DOM). عند كتابة التعليمات البرمجية، غالبًا ما يتم أخذ هذه التجربة الشاملة في الاعتبار، ولكن عندما لا يعيش كل جزء من هذا التدفق عادةً. إنّ الحدود بين عمل واجهة المستخدم والعمل خارج واجهة المستخدم مهمة تمامًا كالتجارب الشاملة، لأنّها هي أول ما يمكنك استخدامه لتقليل تعقيد سلسلة التعليمات الرئيسية.
التركيز على مهمة واحدة
من أبسط الطرق لتبسيط التعليمات البرمجية هو فصل الدوال بحيث تركز كل منها على مهمة واحدة. يمكن تحديد المهام من خلال الحدود المحددة من خلال خوض التجربة الشاملة:
- أولاً، استجب لإدخال المستخدم. هذا هو عمل واجهة المستخدم.
- بعد ذلك، يمكنك تقديم طلب بيانات من واجهة برمجة التطبيقات. وهذا العمل لا يعتمد على واجهة المستخدم.
- بعد ذلك، حلِّل طلب البيانات من واجهة برمجة التطبيقات. هذا مرة أخرى لا يعتمد على واجهة المستخدم.
- بعد ذلك، حدِّد التغييرات في DOM. قد يكون هذا من عمل واجهة المستخدم، أو إذا كنت تستخدم شيئًا مثل تنفيذ DOM الافتراضي، فقد لا يكون عمل واجهة المستخدم.
- وأخيرًا، أجرِ التغييرات على DOM. هذا هو عمل واجهة المستخدم.
تكون الحدود الواضحة الأولى بين عمل واجهة المستخدم والعمل خارج واجهة المستخدم. بعد ذلك، هناك قرارات حكم يجب اتخاذها: هل إجراء طلب البيانات من واجهة برمجة التطبيقات وتحليله مهمة أو اثنتين؟ إذا كانت تغييرات DOM لا تعمل بدون واجهة المستخدم، هل يتم إرفاقها مع عمل واجهة برمجة التطبيقات؟ في سلسلة المحادثات نفسها؟ في سلسلة محادثات أخرى؟ المستوى الصحيح للفصل هنا هو الأساس لكل من تبسيط قاعدة التعليمات البرمجية والقدرة على نقل أجزاء منها بنجاح خارج سلسلة التعليمات الرئيسية.
قابلية الدمج
لتقسيم عمليات سير العمل الكبيرة من البداية إلى النهاية إلى أجزاء أصغر، عليك التفكير في قابلية إنشاء قاعدة الرموز البرمجية. الحصول على إشارات من البرمجة الوظيفية، ضع في اعتبارك ما يلي:
- تصنيف أنواع العمل الذي يقوم به تطبيقك.
- إنشاء واجهات إدخال ومخرجات مشتركة لهم.
على سبيل المثال، تأخذ جميع مهام استرداد واجهة برمجة التطبيقات في نقطة نهاية واجهة برمجة التطبيقات وتعرض مجموعة من العناصر العادية، وتستقبل جميع وظائف معالجة البيانات مصفوفة من العناصر العادية وتعرضها.
تتضمّن JavaScript خوارزمية استنساخ منظَّمة تهدف إلى نسخ كائنات JavaScript المعقدة. ويستخدم عمال الويب هذه الدالة عند إرسال الرسائل وتستخدمها IndexedDB لتخزين العناصر. كما أن اختيار الواجهات التي يمكنك استخدامها مع خوارزمية الاستنساخ المركبة سيجعلها أكثر مرونة في التشغيل.
مع وضع ذلك في الاعتبار، يمكنك إنشاء مكتبة من الوظائف القابلة للإنشاء عن طريق تصنيف التعليمات البرمجية وإنشاء واجهات I/O شائعة لتلك الفئات. التعليمة البرمجية القابلة للإنشاء هي علامة مميزة لقواعد الترميز البسيطة: وهي قطع غير متصلة غير قابلة للتغيير وقابلة للتبادل ويمكن وضعها "بجوار" بعضها البعض وتستند إلى بعضها البعض، على عكس التعليمة البرمجية المعقدة المرتبطة ببعضها البعض وبالتالي لا يمكن فصلها بسهولة. وعلى الويب، يمكن أن تعني الكود القابل للإنشاء الفرق بين إرهاق سلسلة التعليمات الرئيسية أم لا.
ومع توفُّر رمز قابل للإنشاء، حان الوقت لإزالة بعض هذه الرموز من سلسلة التعليمات الرئيسية.
استخدام عمال الويب لتقليل التعقيد
موظفو الويب، الذين غالبًا ما لا يتم استخدامهم على نطاق واسع، يتيحون لك استبعاد سلسلة التعليمات الرئيسية.
يسمح موظفو الويب لتطبيق PWA بتشغيل (بعضها) JavaScript خارج سلسلة التعليمات الرئيسية.
هناك ثلاثة أنواع من العمال.
العاملون المكرسون، ما يكون أكثر شيوعًا عند وصف العاملين على الويب، يمكن استخدامه بواسطة نص برمجي واحد في مثيل واحد قيد التشغيل لتطبيق الويب التقدّمي (PWA). كلما أمكن، يجب نقل العمل الذي لا يتفاعل مباشرةً مع DOM إلى مشغّل ويب لتحسين الأداء.
العاملون المشتركون يشبهون العاملين المكرسين، باستثناء أن هناك نصوصًا برمجية متعددة يمكن مشاركتها عبر نوافذ متعددة مفتوحة. يوفّر ذلك مزايا العامل المتخصّص ولكن مع حالة مشتركة وسياق داخلي بين النوافذ والنصوص البرمجية.
ويمكن للعامل المشترَك مثلاً إدارة أذونات الوصول والمعاملات لقاعدة البيانات المفهرَسة في تطبيق PWA وبث نتائج المعاملات على جميع نصوص الاتصالات للسماح له بالتفاعل مع التغييرات.
يتم تناول عامل تشغيل الويب النهائي ضمن هذه الدورة التدريبية بشكل موسّع: مشغِّلو الخدمات الذين يعملون كخادم وكيل لطلبات الشبكة وتتم مشاركته بين جميع مثيلات تطبيق الويب التقدّمي (PWA).
جربه بنفسك
حان وقت الترميز يمكنك إنشاء تطبيق ويب تقدّمي (PWA) من نقطة الصفر استنادًا إلى كل ما تعلمته في هذه الوحدة.