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

Sam Thorogood

هذه هي المشاركة الأولى في مدوّنة فريق المهندسين في 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 الفعلية التي تتضمّن أنماطًا أو وظائف أخرى مضمَّنة.

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

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

لنتحدث

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

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