وبلاگ مهندسی web.dev شماره 1: چگونه سایت را می سازیم و از اجزای وب استفاده می کنیم

Sam Thorogood

این اولین پست در وبلاگ مهندسی web.dev است. در ماه‌های آینده، امیدواریم بینش‌های عملی را از کار خود به اشتراک بگذاریم—بنابراین مراقب پست‌ها با برچسب وبلاگ مهندسی باشید! در اینجا ما فرآیند ساخت سایت استاتیک و جاوا اسکریپت (اختیاری!) پشت اجزای وب خود را پوشش خواهیم داد.

web.dev محتوایی در مورد ایجاد تجربیات وب مدرن ارائه می دهد و به شما امکان می دهد عملکرد سایت خود را اندازه گیری کنید . کاربران باهوش ممکن است متوجه شده باشند که صفحه Measure ما فقط یک رابط برای Lighthouse است که در DevTools کروم نیز موجود است. ورود به web.dev به شما این امکان را می‌دهد تا ممیزی‌های منظم Lighthouse را در سایت خود انجام دهید تا بتوانید ببینید امتیاز آن در طول زمان چگونه تغییر می‌کند. کمی بعداً صفحه Measure را مجدداً مشاهده خواهم کرد، زیرا فکر می کنیم نسبتاً خاص است. 🎊

مقدمه

اساساً، web.dev یک سایت ثابت است که از مجموعه ای از فایل های Markdown تولید می شود. ما استفاده از Eleventy را انتخاب کرده‌ایم، زیرا این ابزار صیقلی و قابل توسعه است که تبدیل Markdown به HTML را آسان می‌کند.

ما همچنین از بسته‌های جاوا اسکریپت مدرن استفاده می‌کنیم که فقط به مرورگرهایی ارائه می‌کنیم که از type="module" پشتیبانی می‌کنند، که شامل async و await است. ما همچنین با خوشحالی از ویژگی‌هایی استفاده می‌کنیم که توسط مرورگرهای همیشه سبز پشتیبانی می‌شوند اما توسط تعداد کمی از نسخه‌های قدیمی‌تر پشتیبانی نمی‌شوند. از آنجایی که ما یک سایت ثابت هستیم، جاوا اسکریپت برای خواندن محتوای ما لازم نیست .

هنگامی که فرآیند ساخت - که شامل تولید HTML ایستا و بسته‌بندی جاوا اسکریپت ما با 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، ما از این ویژگی برای قاب بندی صحیح انواع مختلف محتوا (مانند پست‌ها و لبه‌های کد) استفاده می‌کنیم و در عین حال یک طرح‌بندی HTML سطح بالا را به اشتراک می‌گذاریم.

مجموعه ها

Eleventy یک راه برنامه ریزی شده برای ساخت مجموعه های دلخواه از محتوا ارائه می دهد. این به ما اجازه می‌دهد تا از صفحه‌بندی پشتیبانی کرده و صفحات مجازی (صفحاتی که فایل Markdown منطبق بر روی دیسک ندارند) برای نویسندگان پست ایجاد کنیم. به عنوان مثال، ما صفحات نویسندگان خود را با استفاده از یک الگوی حاوی یک عبارت برای پیوند دائمی خود می سازیم (بنابراین الگو برای هر نویسنده دوباره ارائه می شود) و یک مجموعه پشتیبان.

این باعث می شود، برای مثال، یک صفحه ساده حاوی تمام پست های ادی باشد!

محدودیت ها

در حال حاضر ما نمی‌توانیم به آسانی به فرآیند ساخت Eleventy متصل شویم، زیرا به‌جای امری ضروری است: شما آنچه را که می‌خواهید توصیف می‌کنید، نه اینکه چگونه می‌خواهید. اجرای Eleventy به عنوان بخشی از یک ابزار ساخت بزرگتر دشوار است، زیرا فقط می توان از طریق رابط خط فرمان آن را فراخوانی کرد.

الگوسازی

web.dev از سیستم قالب بندی Nunjucks استفاده می کند که در اصل توسط موزیلا توسعه یافته است. 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 یک سایت ثابت است، می توان آن را بدون جاوا اسکریپت و توسط مرورگرهای قدیمی که type="module" یا دیگر کدهای مدرن ما پشتیبانی نمی کنند، سرویس و استفاده کرد. این بخش بسیار مهمی از رویکرد ما برای دسترسی به web.dev برای همه است.

با این حال، کد ما برای مرورگرهای مدرن از دو بخش اصلی تشکیل شده است:

1. کد بوت استرپ، که شامل کدهایی برای مسیریابی وضعیت جهانی، آنالیتیکس و SPA است
2. کد و CSS برای اجزای وب که به تدریج سایت را بهبود می بخشد

کد بوت استرپ نسبتاً ساده است: web.dev می تواند صفحات جدید را به عنوان یک برنامه تک صفحه ای (SPA) بارگیری کند، بنابراین ما یک شنونده سراسری نصب می کنیم که به کلیک روی عناصر <a href="..."> محلی گوش می دهد. مدل SPA به ما کمک می‌کند تا وضعیت کلی جلسه فعلی کاربر را حفظ کنیم، زیرا در غیر این صورت هر صفحه جدید بارگیری می‌شود، تماس‌هایی با Firebase برای دسترسی به وضعیت ورود کاربر ایجاد می‌کند.

ما همچنین چند نقطه ورودی مختلف را بر اساس آدرس اینترنتی که وارد کرده‌اید به سایت خود مشخص می‌کنیم و با استفاده از dynamic import() آدرس صحیح را بارگذاری می‌کنیم. این باعث کاهش تعداد بایت‌هایی می‌شود که کاربران ما قبل از اینکه سایت با کد تقویت شود، نیاز دارند.

اجزای وب

اجزای وب عناصر سفارشی هستند که عملکرد زمان اجرا ارائه شده در جاوا اسکریپت را محصور می کنند و با نام های سفارشی مانند <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 معمولی ما هستند - و تیم محتوای ما می‌تواند عملکردهای گسترده‌تری را به هر صفحه اضافه کند، نه فقط به گره اندازه‌گیری.

Web Component های ما معمولاً از مدل Container Component استفاده می کنند که توسط React محبوب شده است، اگرچه این مدل در حال حاضر کمی گذرا است . هر عنصر -container به حالت جهانی ما (ارائه شده توسط unistore ) متصل می‌شود، و سپس یک عنصر بصری را ارائه می‌کند، که به نوبه خود گره‌های DOM واقعی را ارائه می‌کند که دارای یک استایل یا سایر عملکردهای داخلی هستند.

پیچیده ترین اجزای وب ما برای تجسم اقدامات و وضعیت جهانی وجود دارد. به عنوان مثال، web.dev به شما امکان می دهد تا سایت مورد علاقه خود را بررسی کنید و سپس از صفحه Measure دور شوید. اگر برگردید، خواهید دید که کار هنوز ادامه دارد.

مؤلفه‌های ساده ما صرفاً محتوای ثابت را افزایش می‌دهند یا تجسم‌های شگفت‌انگیزی ایجاد می‌کنند (به عنوان مثال، هر نمودار خطی <web-sparkline-chart> خود است)، که هیچ ارتباطی با وضعیت جهانی ندارد.

بیا چت کنیم

تیم مهندسی web.dev ( راب ، اوا ، مایکل و سم ) به زودی غواصی های عمیق فنی بیشتری را دنبال خواهند کرد.

امیدواریم شنیدن نحوه انجام کارها به شما ایده هایی برای پروژه های خودتان داده باشد. اگر سؤال یا درخواست موضوعی برای این وبلاگ دارید، در توییتر با ما تماس بگیرید!