مدونة web.dev الهندسية رقم 1: كيفية إنشاء الموقع واستخدام مكونات الويب

هذه هي المشاركة الأولى في مدونة فريق المهندسين في web.dev. نأمل خلال الأشهر المقبلة مشاركة إحصاءات قابلة للتنفيذ من عملنا، لذا ننصحك بمتابعتنا بحثًا عن المشاركات التي تحمل علامة مدوّنة الفريق الهندسي. سنتناول هنا عملية إنشاء موقعنا الإلكتروني الثابت و (اختياريًا) JavaScript وراء مكوّنات الويب

يوفّر web.dev محتوى حول إنشاء تجارب ويب حديثة ويسمح لك بقياس أداء موقعك الإلكتروني. قد يدرك المستخدمون الملمّون أنّ صفحة "القياس" هي مجرد واجهة لتطبيق Lighthouse، وهو متاح أيضًا في "أدوات مطوّري البرامج" في Chrome. يتيح لك تسجيل الدخول إلى web.dev إجراء عمليات تدقيق عادية في Lighthouse على موقعك الإلكتروني حتى تتمكّن من معرفة كيفية تغيُّر نتيجته بمرور الوقت. سأعود إلى صفحة "القياس" بعد قليل، لأنّنا نعتقد أنّها مهمة جدًا. 🎊

مقدمة

في الأساس، web.dev هو موقع إلكتروني ثابت يتم إنشاؤه من مجموعة من ملفات Markdown. لقد اخترنا استخدام Eleventy لأنّها أداة مصقولة وقابلة للتوسيع تسهّل تحويل Markdown إلى HTML.

نستخدم أيضًا حِزم JavaScript حديثة لا نعرضها إلا للمتصفحات المتوافقة مع type="module"، بما في ذلك async وawait. ونستخدم أيضًا الميزات المتوافقة مع المتصفّحات الحديثة ولكن لا تتوافق مع عدد قليل من الإصدارات القديمة. بما أنّنا موقع إلكتروني ثابت، ليس من الضروري استخدام JavaScript لقراءة المحتوى.

بعد اكتمال عملية الإنشاء التي تتضمّن إنشاء صفحات HTML ثابتة وتجميع JavaScript باستخدام Rollup، يمكن استضافة 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، نستخدم هذه الميزة لعرض أنواع مختلفة من المحتوى بشكل صحيح (مثل المشاركات وCodelabs) مع مواصلة مشاركة تنسيق 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 للجميع.

ومع ذلك، يتألف الرمز البرمجي للمتصفّحات الحديثة من جزأين رئيسيين:

  1. رمز Bootstrap الذي يتضمّن رمزًا للحالة الشاملة و"إحصاءات Google" وتوجيه التطبيقات المُنشِئة لصفحات ويب ديناميكية
  2. الرموز البرمجية وCSS لمكونات الويب التي تحسّن الموقع الإلكتروني تدريجيًا

رمز التشغيل المبدئي بسيط إلى حدٍ ما: يمكن لخدمة web.dev تحميل صفحات جديدة كتطبيق صفحة واحدة (SPA)، لذلك نثبّت مستمعًا عامًا يستمع إلى النقرات على عناصر <a href="..."> المحلية. يساعدنا نموذج التطبيقات المُدمجة في الحفاظ على الحالة الشاملة لجلسة المستخدم الحالية، وإلا سيؤدي كل تحميل صفحة جديدة إلى إرسال طلبات إلى Firebase للوصول إلى حالة تسجيل دخول المستخدم.

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

مكوّنات الويب

مكونات الويب هي عناصر مخصّصة تُحاط بوظيفة وقت التشغيل المقدّمة في JavaScript، ويتم تحديدها بأسماء مخصّصة مثل <web-codelab>. يناسب التصميم المواقع الإلكترونية الثابتة إلى حدٍ كبير، مثل web.dev: يدير المتصفّح دورة حياة العنصر عند تعديل ملف HTML للموقع الإلكتروني، ويُعلم أي عناصر بشكل صحيح عند إرفاقها بالصفحة أو فصلها عنها. وتتجاهل المتصفّحات القديمة مكوّنات الويب تمامًا وتعرض ما تبقى في DOM.

كلّ مكوّن ويب هو فئة تتضمّن طُرقًا تشمل connectedCallback() وdisconnectedCallback() وattributeChangedCallback(). ترث العناصر المخصّصة في web.dev في الغالب من LitElement، الذي يقدّم قاعدة بسيطة للمكونات المعقدة.

على الرغم من أنّ web.dev يستخدم Web Components في العديد من الصفحات، إلا أنّه لا يُستخدَم في أي مكان أكثر من صفحة القياس. هناك عنصران يقدّمان معظم الوظائف التي تظهر لك في هذه الصفحة:

<web-url-chooser-container></web-url-chooser-container>
<web-lighthouse-scores-container></web-lighthouse-scores-container>

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

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

مخطّط بياني يعرض العلاقة بين الحالة الشاملة وعناصر HTML التي تستخدمها
الحالة الشاملة وعنصر الويب

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

تعمل مكوّناتنا البسيطة على تحسين المحتوى الثابت أو إنشاء عروض مرئية مذهلة (على سبيل المثال، كل رسم بياني خطي هو <web-sparkline-chart> خاص به)، ولا علاقة له بالحالة الشاملة.

لنتحدث

سيتابع فريق المهندسين في web.dev (Rob وEwa ومايكل وسام) هذا الموضوع من خلال تقديم المزيد من التحليلات الفنية التفصيلية قريبًا.

نأمل أن تكون هذه المعلومات قد ساعدتك في الحصول على بعض الأفكار لمشاريعك. يُرجى التواصل معنا على Twitter إذا كانت لديك أسئلة أو طلبات مواضيع لهذه المدوّنة.