چه اتفاقی برای کامپوننت های وب افتاده است؟

کامپوننت مجموعه‌ای از فناوری‌های وب است که به ما امکان می‌دهد عناصر HTML قابل استفاده مجدد ایجاد کنیم. آنها امکان ایجاد بخش‌های سفارشی یک فریمورک را فراهم کرده که از سینتکس HTML استفاده می‌کنند. مرورگرها هم می‌توانند بدون کتابخانه شخص ثالث مانند React یا Vue.js آنها را به صورت بومی تفسیر کنند. این روزها کامپوننت های وب موضوعی تفرقه انگیز هستند. از آنها انتظار می‌رفت که در روند توسعه انقلابی ایجاد کنند، اما آنها هنوز در تلاشند تا در صنعت به تصویب برسند. برخی از توسعه دهندگان می‌گویند که کامپوننت های وب دیگر منسوخ شده‌اند، در حالی که برخی دیگر فکر می‌کنند اینها آینده توسعه وب هستند.

بیایید دقیق‌تر به این موضوع بپردازیم و بررسی کنیم که کامپوننت های وب چه هستند، چرا برنامه نویسان تمایلی به استفاده از آنها ندارند و در آینده چه چیزی انتظار می‌رود.

از کجا می‌توان کامپوننت های وب را پیدا کرد؟

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

در اصل کامپوننت‌های وب دارای مشخصات W3C مستقل به نام Custom Elements بودند. عناصر سفارشی در سال 2018 منسوخ شد و بخش‌های آن به ترتیب به استانداردهای HTML و DOM منتقل شدند:

• عناصر سفارشی (تعریف شده در مشخصات استاندارد HTML Living)
• الگوهای HTML (نشان داده شده توسط عناصر <template> و <slot>، همچنین در مشخصات HTML Living Standard تعریف شده است)
• Shadow DOM (در استاندارد DOM Living به عنوان shadow tree تعریف شده است)

از فناوری وب کامپوننت برای ایمپورت‌های HTML استفاده می‌شد. هدف از آن بسته بندی ماژول‌های HTML به عنوان فایل‌های html. بود تا بتوانند به راحتی و بدون کدزنی جاوااسکریپت ایمپورت شوند. این نوع ایمپورت توسط مرورگرها رها شد، بنابراین با وجود اینکه آن‌ها هنوز هم با یک polyfill کار می‌کنند، توصیه نمی‌شود که از آن‌ها در کاربردهای جدید استفاده کنید.

درست مثل اینکه هیچ منبع یا کتابخانه مرکزی مشخصی وجود ندارد که بتوانید کامپوننت های وب متن باز را پیدا و بارگیری کنید. حتی اگر پروژه‌‌ای مناسب هم وجود داشته باشد (برخی از آنها را در زیر بررسی خواهیم کرد)، باید آنها را به صورت جداگانه پیدا کنید.

کامپوننت های وب چگونه کار می‌کنند؟

قبل از بررسی بیشتر این کامپوننت‌ها، بیایید به طور مختصر عملکرد آنها را ببینیم.

در زیر فرآیند اصلی راه اندازی یک کامپوننت وب شرح داده شده:

1. یک کلاس MyElement ایجاد کنید که از کلاس HTMLElement ارث می‌برد (با استفاده از سینتکس ES6 زیرا نسخه‌های قدیمی جاوااسکریپت دارای سینتکس کلاس نیستند)
2. تگ <my-element></my-element> را که نمایانگر کلاس MyElement در سند HTML است، تعریف کنید. در اینجا می‌توانید از متد ()CustomElementRegistry.define یا از ()document.createElement استفاده کنید.
3. با استفاده از متد ()Element.attachShadow یک درخت سایه DOM به سازنده عنصر سفارشی وصل کنید. این مرحله اختیاری است و فقط هنگامی قابل استفاده است که کامپوننت وب دارای عناصر فرزند باشد.
4. با استفاده از تگ <template> یک الگوی HTML ایجاد کنید. محتوای قابل استفاده مجدد از کامپوننت وب MyElement سفارشی را در الگو قرار دهید و یک کلون از آن را به DOM سایه اضافه کنید. همچنین می‌توانید تگ <style> و <slot> (مورد دوم برای محتوای پویا در قالب است) را به الگو اضافه کنید. این مرحله نیز اختیاری است، شما فقط باید در صورت نیاز از آن استفاده کنید.
5. MyElement را به عنوان یک ماژول ES6 ایمپورت کنید.
6. می‌توانید از کامپوننت <my-element> </my-element> در صفحه خود به همان روش عناصر استاندارد HTML استفاده کنید.

چرا مردم از کامپوننت های وب استفاده نمی‌کنند؟

کامپوننت های وب بسیاری از موارد عالی را برای ما به ارمغان می‌آورند. اما چرا توسعه دهندگان بیشتر از آنها استفاده نمی‌کنند؟

این به دلیل عدم علاقه به یک فناوری بومی مرورگر است و توسعه ماژولار فرانت-اند را آسان و سریع می‌کند. یکی از مشکلات کامپوننت های وب این است که حجم ورودی بیش از حد زیاد است. کامپوننت های وب موجود در بیشتر موارد چندان کاربر پسند نیستند و برخی مشکلات فنی نیز مشخصه آنها وجود دارد.

به عبارت دیگر، کامپوننت های وب از نظر تئوری ایده خوبی هستند، اما در عمل نقص‌هایی دارند.

بیایید به برخی دیگر از مشکلات استفاده از کامپوننت‌های وب بپردازیم.

کامپوننت های وب از رفتار HTML بومی پیروی نمی‌کنند

هدف از ایجاد کامپوننت های وب رفتاری مشابه عناصر HTML بومی بود. این بدان معنی است که توسعه دهندگان باید بتوانند با استفاده از نشانه گذاری HTML مانند تگ‌ها، ارتباطی بین عناصر والد و فرزند (به عنوان مثال <select> و <option>) و خصوصیت‌ها بدون نیاز به نوشتن جاوااسکریپت ایجاد کنند.

اما این موضوع در مورد اکثر کامپوننت های وب موجود، امکان پذیر نیست. برای تنظیم و پیکربندی کامپوننت های وب از طریق API و افزودن تمام وابستگی‌های مورد نیاز، باید دانش بالایی از جاوااسکریپت داشته باشید.

از نظر تئوری، ایجاد عناصر سفارشی کاملا متناسب با رفتار HTML بومی امکان پذیر است. اما به سادگی در عمل اتفاق نمی‌افتد.

مشکلات مربوط به سازگاری و سئو

بدیهی است اگر یک کامپوننت وب از اصول طراحی HTML پیروی نکند، نمی‌توانید محتوایی را برای مرورگرهای قدیمی ایجاد کنید. بنابراین افرادی که از این مرورگرها استفاده می‌کنند، چیزی روی صفحه نمی‌بینند.

در حالت ایده آل، عناصر HTML سفارشی و استاندارد باید با هم استفاده شوند و مکمل یکدیگر باشند. عناصر سفارشی فقط در مواردی ضروری هستند که عنصر استاندارد مربوطه وجود نداشته باشد.

فرض کنید می‌خواهید یک عنصر horizontal tab ایجاد کنید. اگر آن را با مرورگرهای بدون پشتیبانی سازگار کنید، می‌توانید بسته به نوع محتوا آن را طوری طراحی کنید که با یک عنصر استاندارد HTML مانند <p>، <section> و یا <div> کار کند:

<horizontal-tab>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
</horizontal-tab>

همچنین می‌توانید یک عنصر سفارشی دیگر برای آیتم‌های تب ایجاد کرده اما همچنان محتوا را از طریق HTML اضافه کنید. معرفی <tab-item> ضروری نیست زیرا شما می‌توانید محتوای داخلی را در یک تگ استاندارد HTML ذخیره کنید. در زیر مثالی از این راه حل در دنیای واقعی آورده شده است:

<horizontal-tab>
  <tab-item>CONTENT</tab-item>
  <tab-item>CONTENT</tab-item>
  <tab-item>CONTENT</tab-item>
</horizontal-tab>

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

<horizontal-tab></horizontal-tab>

علاوه بر این، کامپوننت های های وب که از طریق جاوااسکریپت محتوا اضافه می‌کنند، همیشه توسط موتورهای جستجو ایندکس نمی‌شوند. این نوع طراحی بر سئو تأثیر منفی می‌گذارد.

حذف خصوصیات HTML

حذف خصوصیات نحوه ایمپورت در HTML دلیل دیگری است که توسعه دهندگان به استفاده از کامپوننت های وب تمایلی ندارند. ایمپورت در HTML این امکان را برای شما فراهم می‌کند که ماژول‌ها را بدون دخالت جاوااسکریپت با استفاده از سینتکس ساده و مبتنی بر دستورالعمل زیر وارد کنید:

<link rel="import" href="module.html">

از آنجا که مرورگرها انتظار داشتند که ماژول‌های ES6 جایگزین ایمپورت‌های HTML شود، تصمیم گرفتند این ویژگی را پیاده سازی نکنند. Mozilla ، Webkit و Chrome همه افزودن ایمپورت‌های HTML را متوقف کردند.

در حال حاضر توسعه دهندگان وب از ماژول‌های ES6 به جای ایمپورت‌های HTML برای بسته بندی کامپوننت های وب استفاده می‌کنند. این امر به پیچیدگی فرایندی که برای مبتدیان آسان و مناسب در نظر گرفته شد، می‌افزاید.

محدودیت‌های فنی کامپوننت های وب

همانطور که قبلا اشاره کردیم، مشخصات مربوط به کامپوننت های وب را می‌توان در سه چیز یافت:

• عناصر سفارشی
• الگوهای HTML
• Shadow DOM

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

نگران کننده ترین مسائل شامل موارد زیر است:

• عناصر شبه CSS مانند :checked که با عناصر سفارشی کار نمی‌کند.
• عناصر استاندارد HTML اگر رفتار آنها با یکدیگر مرتبط باشد عناصر سفارشی را نادیده می‌گیرند. به عنوان مثال عنصر form که یک عنصر ورودی سفارشی را نادیده می‌گیرد.
• عناصر سفارشی نمی‌توانند از عناصر استاندارد سطح بالاتر مانند HTMLButtonElement ارث ببرند، اما لازم است HTMLElement را extend کنند.
• رول‌های aria باید دوباره به عناصر سفارشی و همچنین به عناصر فرزندشان اضافه شوند، حتی اگر اینها تگ‌های استاندارد HTML با رول‌های پیش فرض aria باشند.

این مشکلات فنی از محدودیت‌های کامپوننت‌های وب ناشی می‌شود و باید با استفاده از ابزارهای مختلف یا کد اضافی (که پیچیدگی را بیشتر می‌کند) رفع شود.

وجود نداشتن یک دایرکتوری مرکزی

یافتن اینگونه کامپوننت‌ها کار راحتی نیست و هیچ مسیر یا دایرکتوری مرکزی برای آنها وجود ندارد. بنابراین شما باید در وب جستجو کنید تا آنچه را که نیاز دارید پیدا کنید.

اگر بیش از یک نوع کامپوننت برای بخش مربوط به پروژه پیدا کنید، دشوار است که بفهمید کدام یک با پروژه شما سازگارتر است. دلیل اصلی آن این است که بسیاری از کامپوننت های وب فاقد مستندات مناسب هستند.

کتابخانه‌های رابط کاربری در مقابل کامپوننت های وب

کتابخانه‌های رابط کاربری مانند React ، Vue و Angular همان هدفی را دارند که کامپوننت های وب دارند. آنها توسعه پیش فرض مبتنی بر کامپوننت‌ها را امکان پذیر می‌کنند، حتی اگر برای مرورگرهای وب بومی نباشند (شما مجبورید کتابخانه‌ها را جداگانه اضافه کنید در حالی که کامپوننت های وب از APIهای وب درون مرورگر مانند DOM و CustomElementRegistry استفاده می‌کنند)، همچنین دارای یک اکوسیستم بزرگ، مستندات خوب و پشتیبانی توسط بسیاری از توسعه دهندگان هستند.

بنابراین طبیعی است که بسیاری از شرکت‌ها به جای کار با کامپوننت های وب، این کتابخانه‌های رابط کاربری محبوب را انتخاب کنند، به ویژه اینکه یافتن توسعه دهندگان با این نوع دانش در بازار کار نیز آسان‌تر است.

آینده کامپوننت های وب

حتی اگر فناوری کامپوننت‌های وب با مشکلات زیادی روبه رو باشد، استفاده از آنها هنوز هم دارای مزایایی است.

مهمتر از همه، با اینکه فریمورک‌ها در حال آمدن و رفتن هستند (مانند Backbone.js که تقریبا به طور کامل از بین رفته است)، کامپوننت های وب فناوری‌های بومی مرورگر محسوب می‌شوند. این بدان معناست که اگر برای بلند مدت برنامه ریزی می‌کنید، می‌توانید با انتخاب کامپوننت های وب سفارشی، پروژه خود را در آینده تثبیت کنید.

بسیاری از کتابخانه‌های رابط کاربری محبوب نیز عناصر خود را به عنوان کامپوننت‌وب منتشر می‌کنند. بنابراین می‌توانید از آنها در پروژه‌های خود به روش فریمورک - اگنوستیک استفاده کنید. به عنوان مثال، در اینجا کامپوننت های انگولار به عنوان عناصر سفارشی بسته بندی شده‌اند. این همچنین نشان می‌دهد که سازندگان این فریمورک‌ها در طولانی مدت روی کامپوننت های وب حساب می‌کنند.

برخی از پروژه‌های امیدوار کننده وجود دارد که همه آنها توسط نام‌های بزرگ صنعت با استفاده از کامپوننت های وب ساخته شده‌اند، از جمله کامپوننت های FAST مایکروسافت و کامپوننت های وب Lightning سیلزفورس. علاوه بر این، گوگل هنوز پروژه Polymer را حفظ می‌کند، البته با کلاس جدید مبتنی بر کامپوننت‌ها.

اگر نمی‌خواهید از کامپوننت‌های وب شخص دیگری استفاده کنید و ترجیح می‌دهید خودتان آنها را ایجاد کنید، ابزارها و منابع متن باز زیادی وجود دارد مانند کامپوننت وب Stencil.js که توسط Ionic ایجاد شده (توسط اپل نیز استفاده می‌شود)، جعبه ابزار Open Web Components و Gold Standard Checklist for Web Components که می‌تواند به شما کمک کند بهترین نمونه‌ها را دنبال کنید.

با توجه به این پیشرفت‌ها، هنوز امیدواری وجود دارد که کامپوننت های وب در آینده به طور گسترده‌تری تصویب شوند.

جمع بندی

به طور کلی دسترسی به کامپوننت‌های وب قابل دسترسی و با کاربرد آسان که به عناصر HTML بومی بیشتری شباهت دارند، پیشرفت بزرگی برای توسعه فرانت-اند خواهد بود.

برای دستیابی به این هدف، توسعه دهندگان کامپوننت های وب باید بهترین روش‌ها را دنبال کنند، به اصول HTML احترام بیشتری بگذارند، مستندات بهتری ایجاد کنند و درباره ساختار عقب مانده راهکارهایی را در نظر بگیرند.

در نهایت استاندارد کامپوننت‌های وب برای رفع هر دو محدودیت فنی که استفاده از عناصر سفارشی با HTML، CSS و JavaScript را دشوار کرده و مشکلات دسترسی و بهینه سازی موتور جستجو را دچار مشکل می‌کند، به پیشرفت بیشتری نیاز دارد.

اگر در این مورد نظر سازنده‌ای دارید، خوشحال می‌شویم در بخش زیر با ما در میان بگذارید.

منبع