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

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

Arthur Evans

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

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

اگر امروز از وب استفاده کرده اید، احتمالاً از اجزای وب استفاده کرده اید. بر اساس شمارش ما، امروزه چیزی بین 5 تا 8 درصد از بارگیری‌های صفحه از یک یا چند مؤلفه وب استفاده می‌کنند. این باعث می‌شود اجزای وب یکی از موفق‌ترین ویژگی‌های پلتفرم وب جدید باشد که در پنج سال گذشته ارسال شده است.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

کامپوننت های وب فناوری عالی برای افزایش تدریجی محتوا هستند، زیرا می توانند به عنوان HTML استاندارد توسط تعداد بی شماری از سیستم های CMS خروجی شوند.

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

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

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

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

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

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

Enterprise: اجزای وب در Salesforce

اجزای وب همچنین به عنوان یک فناوری ایمن و مطمئن برای استانداردسازی، پیشرفت قابل توجهی در داخل شرکت ها دارند. Caridy Patiño، معمار پلتفرم UI Salesforce، توضیح داد که چرا پلتفرم UI خود را با استفاده از اجزای وب ساخته اند.

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

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

• راه حل های استاندارد به جای راه حل های اختصاصی—بنابراین یافتن توسعه دهندگان باتجربه ساده تر و افزایش سریع تر توسعه دهندگان جدید است.
• یک مدل مؤلفه مشترک—بنابراین سفارشی کردن هر برنامه Salesforce به همین صورت عمل می کند.

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

• شکستن تغییرات در مؤلفه ها و برنامه های آنها. به عبارت دیگر، سازگاری به عقب یک امر ضروری بود.
• گیر کردن با تکنولوژی قدیمی و ناتوانی در تکامل.
• گیر افتادن در یک باغ دیواری

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

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

راه های بسیار خوبی برای شروع کار با اجزای وب وجود دارد.

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

• Google سیستم طراحی متریال خود را به عنوان اجزای وب عرضه می کند: Material Web Components .
• Wired Elements مجموعه ای جالب از اجزای وب هستند که ظاهری طرح دار و با دست دارند.
• اجزای وب با هدف ویژه مانند <model-viewer> وجود دارد که می توانید آنها را در هر برنامه ای برای افزودن محتوای سه بعدی رها کنید.

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

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

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

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

منابع بیشتر:

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

تصویر قهرمان توسط Jason Tuinstra در Unsplash.

یادداشت ویرایشگر: نمودار استفاده از عناصر سفارشی به‌روزرسانی شده است تا داده‌های استفاده ماهانه کامل را نشان دهد، همانطور که در chromestatus.com گزارش شده است. نسخه قبلی این پست شامل یک نمودار با جزئیات 6 ماهه، بدون ماه های اخیر بود. سری V0 و V1 در نمودار اصلی انباشته شدند. آنها اکنون بدون پشته با یک خط کل نشان داده می شوند تا ابهام برطرف شود. جهش ناگهانی در اواخر سال 2017 به دلیل تغییر در سیستم جمع آوری داده ها برای chromestatus.com است. این تغییر بر آمار تمام ویژگی‌های پلتفرم وب تأثیر گذاشت و منجر به اندازه‌گیری‌های دقیق‌تر در آینده شد.