اجزای وب: عنصر مخفی که به قدرت وب کمک می کند

اجزای وب در I/O 2019

منتشر شده: ۱۸ ژوئن ۲۰۱۹

در کنفرانس Google I/O 2019، کوین شاف از پروژه پلیمر و کاریدی پاتینو از Salesforce در مورد وضعیت اجزای وب صحبت کردند.

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

اگر امروزه از وب استفاده کرده‌اید، احتمالاً از کامپوننت‌های وب نیز استفاده کرده‌اید. طبق محاسبه ما، امروزه چیزی بین ۵ تا ۸ درصد از کل بارگذاری صفحات از یک یا چند کامپوننت وب استفاده می‌کنند. این امر کامپوننت‌های وب را به یکی از موفق‌ترین ویژگی‌های جدید پلتفرم وب که در پنج سال گذشته عرضه شده‌اند، تبدیل می‌کند.

شما می‌توانید کامپوننت‌های وب را در سایت‌هایی که احتمالاً هر روز از آنها استفاده می‌کنید، مانند YouTube و GitHub، پیدا کنید. آنها همچنین در بسیاری از سایت‌های خبری و انتشاراتی ساخته شده با AMP استفاده می‌شوند - کامپوننت‌های AMP نیز کامپوننت‌های وب هستند. و بسیاری از شرکت‌ها نیز در حال پذیرش کامپوننت‌های وب هستند.

اجزای وب چیستند؟

خب، اجزای وب چیستند؟ مشخصات اجزای وب مجموعه‌ای از APIهای سطح پایین را ارائه می‌دهند که به شما امکان می‌دهند مجموعه تگ‌های HTML داخلی مرورگر را گسترش دهید. اجزای وب موارد زیر را ارائه می‌دهند:

• یک روش رایج برای ایجاد یک کامپوننت (با استفاده از APIهای استاندارد DOM).
• یک روش رایج برای دریافت و ارسال داده‌ها (با استفاده از ویژگی‌ها/رویدادها).

خارج از آن رابط استاندارد، استانداردها چیزی در مورد نحوه پیاده‌سازی واقعی یک جزء نمی‌گویند:

• از چه موتور رندری برای ایجاد DOM خود استفاده می‌کند؟
• چگونه خود را بر اساس تغییرات در ویژگی‌ها یا صفاتش به‌روزرسانی می‌کند.

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

نویسندگان می‌توانند الگوهای رندر تابعی را درست مانند React برای ساخت اجزای وب خود انتخاب کنند، یا می‌توانند از قالب‌های اعلانی مانند آنچه در Angular یا Vue پیدا می‌کنید، استفاده کنند. به عنوان یک نویسنده، شما آزادی کامل در انتخاب فناوری مورد استفاده در داخل مؤلفه را دارید، در حالی که همچنان قابلیت همکاری را حفظ می‌کنید.

اجزای وب برای چه مواردی مفید هستند؟

تفاوت کلیدی بین اجزای وب و سیستم‌های اجزای اختصاصی، قابلیت همکاری است. به دلیل رابط استاندارد آنها، می‌توانید از اجزای وب در هر جایی که از یک عنصر داخلی مانند <input> یا <video> استفاده می‌کنید، استفاده کنید.

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

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

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

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

سایت‌های محتوایی

اجزای وب، فناوری بی‌نظیری برای بهبود تدریجی محتوا هستند، زیرا می‌توانند توسط تعداد بی‌شماری از سیستم‌های مدیریت محتوا (CMS) به صورت HTML استاندارد تولید شوند.

AMP نمونه‌ی بسیار خوبی از این است که چگونه کامپوننت‌های وب به سرعت و به راحتی در زیرساخت‌های صنعت نشر برای ارائه محتوا جای گرفتند.

سیستم‌های طراحی

شرکت‌های بیشتری در حال یکپارچه‌سازی نحوه‌ی ارائه‌ی خود با استفاده از یک سیستم طراحی هستند - مجموعه‌ای از اجزا و دستورالعمل‌ها که ظاهر و حس مشترک سایت‌ها و برنامه‌های یک سازمان را تعریف می‌کنند. اجزای وب نیز در اینجا بسیار مناسب هستند.

اغلب، طراحان مجبورند با تیم‌های زیادی که نسخه‌های خودشان از اجزای سیستم طراحی را بر روی React، Angular و سایر فریم‌ورک‌ها می‌سازند، به جای داشتن یک مجموعه واحد از اجزای استاندارد، رقابت کنند.

کامپوننت‌های وب راه‌حل هستند—یک سیستم کامپوننت واقعاً یک بار بنویسید، همه جا اجرا کنید که همچنان به تیم‌های برنامه‌نویس آزادی استفاده از چارچوب انتخابی خود را می‌دهد.

شرکت‌هایی مانند ING، EA و گوگل در حال پیاده‌سازی زبان طراحی شرکت خود در اجزای وب هستند.

سازمانی: اجزای وب در Salesforce

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

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

Salesforce مجموعه‌ای از نیازهای مشتریان پلتفرم خود را شناسایی کرد:

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

آنها همچنین مواردی را که مشتریان نمی‌خواستند شناسایی کردند:

• ایجاد تغییرات اساسی در اجزا و برنامه‌هایشان. به عبارت دیگر، سازگاری با نسخه‌های قبلی یک ضرورت بود.
• گیر افتادن در فناوری قدیمی و ناتوانی در تکامل.
• گیر افتادن در یک باغ محصور.

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

شروع کار با اجزای وب

راه‌های عالی زیادی برای شروع کار با کامپوننت‌های وب وجود دارد.

اگر در حال ساخت یک برنامه وب هستید، استفاده از برخی از اجزای استاندارد وب موجود را در نظر بگیرید. در اینجا فقط چند مثال آورده شده است:

• گوگل سیستم طراحی متریال خود را به عنوان کامپوننت‌های وب به فروش می‌رساند: کامپوننت‌های وب متریال .
• عناصر سیمی مجموعه‌ای جذاب از اجزای وب هستند که ظاهری طرح‌وار و دست‌ساز دارند.
• کامپوننت‌های وب تک‌منظوره فوق‌العاده‌ای مانند <model-viewer> وجود دارند که می‌توانید برای افزودن محتوای سه‌بعدی در هر برنامه‌ای از آنها استفاده کنید.

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

برای شروع ساخت کامپوننت‌های خودتان، می‌توانید LitElement را بررسی کنید، یک کلاس پایه کامپوننت وب که توسط گوگل توسعه داده شده و تجربه رندرینگ عملکردی عالی مشابه React دارد.

ابزارها و کتابخانه‌های دیگری که باید در نظر بگیرید:

• Stencil یک فریم‌ورک مبتنی بر اجزای وب است که شامل چندین ویژگی فریم‌ورک محبوب مانند JSX و TypeScript می‌شود.
• Angular Elements راهی برای پوشش دادن کامپوننت‌های Angular به عنوان کامپوننت‌های وب فراهم می‌کند.
• بسته‌بندی کامپوننت وب Vue.js راهی برای بسته‌بندی کامپوننت‌های Vue به عنوان کامپوننت‌های وب فراهم می‌کند.

منابع بیشتر:

• open-wc.org اطلاعات عالی برای شروع کار و همچنین نکات و تنظیمات پیش‌فرض برای ابزارهای ساخت و توسعه ارائه می‌دهد.
• مبانی وب، مقدمات اولیه‌ای در مورد APIهای اجزای وب پایه و بهترین شیوه‌ها برای طراحی اجزای وب ارائه می‌دهد.
• MDN اسناد مرجع برای APIهای اجزای وب، به علاوه برخی آموزش‌ها را ارائه می‌دهد.