هذه أول مشاركة في مدونة web.dev الهندسية. على مدار الأشهر المقبلة، نأمل أن نشارك إحصاءات قابلة للاستخدام من عملنا، لذا ترقُّب المشاركات التي تتضمن علامة الهندسة البرمجية. سنتناول هنا عملية إنشاء موقعنا الإلكتروني الثابت وعملية إنشاء الموقع الإلكتروني (اختياري!) لغة JavaScript وراء مكوّنات الويب.
يوفّر موقع web.dev محتوًى حول إنشاء تجارب ويب حديثة، كما يتيح لك قياس أداء موقعك الإلكتروني. وقد أدرك المستخدمون المتمرسون أنّ صفحة "القياس" هي مجرد واجهة لأداة Lighthouse، وتتوفّر أيضًا في "أدوات مطوري البرامج" في Chrome. يتيح لك تسجيل الدخول إلى web.dev إجراء عمليات تدقيق Lighthouse منتظمة على موقعك الإلكتروني حتى تتمكّن من معرفة مدى تغيّر نتيجته بمرور الوقت. سأعود مرة أخرى في صفحة "القياس" بعد قليل، لأننا نعتقد أنها خاصة إلى حد ما. 🎊
مقدمة
بشكل أساسي، web.dev هو موقع إلكتروني ثابت يتم إنشاؤه من مجموعة من ملفات Markdown. لقد اخترنا استخدام Eleventy لأنّها أداة مصقولة وقابلة للتوسُّع، تسهِّل تحويل Markdown إلى ترميز HTML.
نستخدم أيضًا حِزم JavaScript الحديثة التي نعرضها فقط للمتصفحات التي تتوافق مع type="module"، والتي تتضمّن async وawait.
نستخدم أيضًا الميزات التي تتوافق مع المتصفحات التي لا يبطُل رواجها، ولكن ليس مع عدد قليل من الإصدارات القديمة.
ولأنّنا موقع إلكتروني ثابت، فإنّ لغة JavaScript ليست مطلوبة لقراءة المحتوى.
بعد اكتمال عملية التصميم - التي تتضمن إنشاء لغة HTML ثابتة ودمج لغة JavaScript مع أداة التجميع، يمكن استضافة موقع web.dev على خادم ثابت بسيط لاختباره. يكون الموقع تقريبًا ثابتًا بالكامل، ولكن لدينا بعض الاحتياجات الخاصة التي لا تزال تستفيد من خادم Node.js مخصّص. ويشمل ذلك عمليات إعادة التوجيه للنطاقات غير الصالحة، بالإضافة إلى رمز لتحليل اللغة المفضّلة للمستخدم من أجل ميزة تدويل قادمة.
الإنتاج الثابت
تتم كتابة كل صفحة على web.dev باستخدام Markdown. تتضمّن جميع الصفحات مسألة قانونية تصف بيانات وصفية حول كل مشاركة. يتم نقل بيانات البيانات الوصفية هذه إلى تنسيق كل صفحة، وإنشاء عناوين وعلامات وما إلى ذلك. وفي ما يلي مثال لذلك:
---
layout: post
title: What is network reliability and how do you measure it?
authors:
- jeffposnick
date: 2018-11-05
description: |
The modern web is enjoyed by a wide swath of people…
---
The modern web is enjoyed by a wide swath of [people](https://www.youtube.com/watch?v=dQw4w9WgXcQ), using a range of different devices and types of network connections.
Your creations can reach users all across the world...
تتيح لنا هذه المسألة الأمامية تحديد الخصائص العشوائية مثل المؤلفين وتاريخ النشر والعلامات. يعرض تطبيق Eleventy الموضوع الأمامي بشكل ملائم على شكل بيانات في كل مكوّن إضافي أو نموذج أو أي سياق آخر تقريبًا نريد من خلاله تنفيذ إجراء ذكي. يحتوي كائن البيانات أيضًا على ما يصفه Eleventy بأنّه تتالي البيانات، وهو مجموعة متنوعة من البيانات التي يتم سحبها من كل صفحة فردية، ومن التنسيق الذي تستخدمه الصفحة، ومن البيانات المتوفّرة في بنية المجلد الهرمي.
يصف كل تنسيق فريد نوعًا مختلفًا من المحتوى ويمكن أن يكتسب من التنسيقات الأخرى. في web.dev، نستخدم هذه الميزة لوضع أنواع مختلفة من المحتوى بشكلٍ صحيح (مثل المشاركات والدروس التطبيقية حول الترميز) مع الاستمرار في مشاركة تنسيق HTML واحد ذي مستوى أعلى.
المجموعات
يوفّر تطبيق Eleventy طريقة آلية لإنشاء مجموعات عشوائية من المحتوى. وقد سمح لنا هذا بتوفير إمكانية التقسيم على صفحات وإنشاء صفحات افتراضية (صفحات لا تحتوي على ملف Markdown مطابق على القرص) لمؤلفي المشاركات. على سبيل المثال، ننشئ صفحات المؤلفين باستخدام نموذج يحتوي على تعبير لرابطه الثابت (وبذلك تتم إعادة عرض النموذج لكل مؤلف) ومجموعة داعمة.
وينتج عن ذلك، على سبيل المثال، صفحة بسيطة تحتوي على جميع مشاركات آدي.
القيود
لا يمكننا في الوقت الحالي التفاعل بسهولة مع عملية تصميم Eleventy، لأنّها توضيحية وليست أساسية، أي لأنّ شرح ما تريد توفيره هو ما تريد توفيره. من الصعب تشغيل تطبيق Eleventy كجزء من أداة تصميم أكبر حجمًا، لأنّه لا يمكن استدعاؤه إلّا من خلال واجهة سطر الأوامر.
النماذج
يستخدم web.dev نظام Nunjucks النموذجي الذي طوّرته Mozilla في الأصل. تضم لعبة Nunjucks ميزات النماذج المعتادة، مثل التكرارات الحلقية والشرطات، ولكنها تتيح لنا أيضًا تحديد الرموز القصيرة التي تُنشئ لغة HTML إضافية أو تستدعي منطقًا آخر.
وكما هي الحال مع معظم الفِرق التي تنشئ مواقع إلكترونية للمحتوى الثابت، بدأنا بإدراج رموز قصيرة صغيرة مع الوقت، أي حوالي 20 رمزًا إلى الآن. يعمل معظم هذه الأشياء على إنشاء المزيد من رموز HTML (بما في ذلك مكونات الويب المخصصة). وفي ما يلي مثال لذلك:
{% Aside %}
See how Asides work in the web.dev codebase
{% endAside %}
سينتهي الأمر أن يظهر على النحو التالي:
لكنها في الواقع تقوم بإنشاء HTML على هذا النحو:
<div class="aside color-state-info-text">
<p>See how Asides work in the web.dev codebase</p>
</div>
خارج نطاق هذا المنشور، يستخدم موقع web.dev أيضًا الرموز القصيرة كنوع من لغة البرمجة الوصفية. تقبل الرموز القصيرة الوسيطات، ويكون أحد وسيطاتها هو المحتوى المتضمّن. ليس من الضروري أن تعرض الرموز القصيرة أي شيء، لذلك يمكن استخدامها لإنشاء حالة أو تشغيل سلوك آخر. 🤔💭
نص الفيديوهات
كما ذكرنا سابقًا، بما أنّ web.dev موقع إلكتروني ثابت، يمكن عرضه واستخدامه بدون JavaScript ومن خلال المتصفّحات القديمة التي لا تتوافق مع type="module" أو غير ذلك من الرموز البرمجية الحديثة التي نوفّرها.
يشكّل ذلك جزءًا مهمًا للغاية من نهجنا لجعل web.dev متاحة للجميع.
ومع ذلك، تتألف الرموز البرمجية للمتصفحات الحديثة من جزأين رئيسيين:
- رمز التمهيد، الذي يتضمَّن رمزًا للحالة العامة و"إحصاءات Google" وتوجيه SPA
- الترميز وCSS لمكونات الويب التي تحسن الموقع تدريجيًا
إنّ رمز التمهيد واضح ومباشر إلى حد ما: يمكن لـ web.dev تحميل صفحات جديدة كتطبيق من صفحة واحدة (SPA)، لذا نثبّت أداة رصد شاملة تستمع إلى النقرات على عناصر <a href="..."> المحلية.
يساعدنا نموذج SPA في الحفاظ على الحالة العامة للجلسة الحالية للمستخدم، وإلا سيؤدي كل تحميل صفحة جديدة إلى تشغيل الطلبات إلى Firebase للوصول إلى حالة تسجيل دخول المستخدم.
نحدّد أيضًا بضع نقاط دخول مختلفة في موقعنا الإلكتروني استنادًا إلى عنوان URL الذي وصلت إليه، ثمّ نحمِّل النقطة الصحيحة باستخدام import() الديناميكي.
ويقلل هذا من عدد وحدات البايت التي يحتاجها المستخدمون قبل تحسين الموقع باستخدام الرمز.
مكوّنات الويب
مكوّنات الويب هي عناصر مخصّصة تتضمن وظائف وقت التشغيل المتوفرة في JavaScript، ويتم تحديدها بأسماء مخصّصة مثل <web-codelab>.
يفسح التصميم جيدًا للمواقع الثابتة إلى حد كبير مثل web.dev: حيث يدير المتصفح دورة حياة العنصر عند تحديث HTML للموقع، ويعلم أي عناصر بشكل صحيح عند إرفاقها أو فصلها عن الصفحة.
وتتجاهل المتصفحات القديمة مكونات الويب تمامًا وتعرض كل ما يتبقى في نموذج العناصر في المستند (DOM).
كل مكوّن ويب هو فئة تحتوي على طرق تشمل connectedCallback() وdisconnectedCallback() وattributeChangedCallback().
تكتسب عناصر web.dev المخصّصة في الغالب من LitElement، والتي توفّر قاعدة بسيطة للمكوّنات المعقّدة.
على الرغم من استخدام web.dev لمكوّنات الويب على العديد من الصفحات، إلا أنّ هذا الإجراء ضروري أكثر من صفحة القياس. يوفّر عنصران الجزء الأكبر من الوظائف التي تراها في هذه الصفحة:
<web-url-chooser-container></web-url-chooser-container>
<web-lighthouse-scores-container></web-lighthouse-scores-container>
تنشئ هذه العناصر المزيد من العناصر التي توفر المزيد من الوظائف. الأهم من ذلك أنّ هذه العناصر هي جزء من رمز مصدر Markdown العادي، ويمكن لفريق المحتوى إضافة وظائف موسّعة إلى أي صفحة، وليس فقط عقدة "القياس".
تستخدم مكوّنات الويب عادةً نموذج مكوِّن الحاوية الذي شاع استخدامه بواسطة React، على الرغم من أنّ هذا النموذج لم يعد ممكنًا الآن.
يتصل كل عنصر -container بحالتنا الشاملة (المتوفّرة من خلال unistore)، ثم يعرض عنصرًا مرئيًا يؤدي بدوره إلى عرض عُقد DOM الفعلية التي لها أنماط أو وظائف مضمَّنة أخرى.
تتواجد مكونات الويب الأكثر تعقيدًا لتصور الإجراءات والحالة العامة. على سبيل المثال، يتيح لك web.dev تدقيق موقعك الإلكتروني المفضّل، ثم الانتقال إلى صفحة "القياس". في حال العودة إلى المنزل، سيظهر لك أنّ المهمة لا تزال مستمرة.
تعمل مكوّناتنا البسيطة على تحسين المحتوى الثابت فقط أو إنشاء عروض مرئية مذهلة (على سبيل المثال، يكون كل رسم بياني خطّي خاص به <web-sparkline-chart>)، ما لا علاقة له بالحالة العالمية.
بدء محادثة
سيتواصل فريق هندسة web.dev (روب وإيوا ومايكل وسام) قريبًا مع المزيد من التفاصيل الفنية حول هذا الموضوع.
نأمل أن نتعرف على كيفية إنجاز الأمور لك من خلال الحصول على بعض الأفكار بشأن مشاريعك الخاصة. إذا كانت لديك أسئلة أو طلبات مواضيع لهذه المدوّنة، يُرجى التواصل معنا على Twitter.