فنی و مهندسی

معماری جزیره را درک کنید و چگونه مشتری JS دریافت نمی کند

 

الگوی "جزایر اجزا" توسط کتی سیلور میلر، معمار جلویی برای Etsy ایجاد شده است. هنگامی که آخرین برنامه خود را که با استفاده از فریمورک های مورد علاقه خود ساخته شده است، مانند React، Vue یا Angular ارسال می کنید، هر جزء حاوی جاوا اسکریپت است. اینجا جایی است که معماری جزیره وارد تصویر می شود، حتی اگر یک فایل ثابت مانند یک پیوند ناوبری یا فقط یک تصویر با متن باشد. از طریق Island Architecture، می‌توانید تمام جاوا اسکریپت‌های همراه پروژه و نحوه تعامل آن با کاربران را کنترل کنید. معماری جزیره به عنوان هیدراتاسیون جزئی نیز شناخته می شود.

معماری جزیره (هیدراتاسیون جزئی) چیست؟

انجام پروژه در فریلنس پروژه

عبارت "معماری جزیره" به یک جزء رابط کاربری تعاملی در یک وب سایت HTML ایستا اشاره دارد. یک جزیره همیشه به تنهایی رندر می شود و ممکن است چندین جزیره در یک صفحه وجود داشته باشد. آنها را به عنوان جزایری در دریایی از HTML ایستا و غیر فعال تصور کنید.

 

مفهوم مرکزی معماری «جزیره» ساده است: صفحات HTML را بر روی سرور رندر کنید و مکان‌ها یا اسلات‌ها را در اطراف مناطق بسیار پویا درج کنید. این مکان‌ها/شاخه‌ها خروجی HTML تولید شده توسط ویجت مناسب روی سرور را نگه می‌دارند. آنها مناطقی را تعیین می‌کنند که بعداً می‌توانند روی کلاینت «هیدراته» شوند و به ویجت‌های کوچک مستقل تبدیل شوند و از HTML اولیه خود که توسط سرور تولید شده است استفاده مجدد کنند.

 

در نگاه اول، این ممکن است مانند "میکرو فرانتند" باشد. هر دو روش مبتنی بر ایده تقسیم برنامه‌ها به واحدهای مجزا هستند، اگرچه «micro-frontends» اغلب به این معنی نیست که ترکیب آن واحدها با استفاده از HTML به دست می‌آید.

چگونه کار می کند؟

 

در بیشتر موارد، صفحات دارای محتوای ثابت و پویا هستند. یک صفحه معمولاً از اطلاعات ثابت با چند بخش تعاملی جدا شده تشکیل شده است. مثلا:

 

    پست‌های وبلاگ، مقالات خبری و سایت‌های اصلی سازمان شامل متن و تصاویر و همچنین عناصر تعاملی مانند جاسازی‌های رسانه‌های اجتماعی و چت هستند.

    صفحات محصول در وب‌سایت‌های تجارت الکترونیک به سایر صفحات داخل برنامه پیوند دارند و شامل توضیحات ثابت محصول می‌شوند. مناطق مختلف صفحه عناصر تعاملی مانند جستجو و چرخ فلک های تصویر را ارائه می دهند.

سفارش ساخت سایت با بهترین متخصصان

محتوای استاتیک پس از رندر نیازی به آبرسانی مجدد ندارد و رویدادها را تحریک نمی کند. محتوای پویا (دکمه‌ها، فیلترها و نوار جستجو) باید پس از رندر به رویدادهای خود متصل شوند. در سمت مشتری، DOM باید دوباره تولید شود (DOM مجازی). جاوا اسکریپتی که به مشتری ارائه می شود شامل این روال ها برای بازسازی، آبرسانی مجدد و مدیریت رویداد می باشد.

 

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

اجرای جزیره

 

امروزه فریمورک های مختلفی می توانند از معماری جزیره پشتیبانی کنند. از جمله آنها عبارتند از:

تازه

 

در Fresh، جزیره ها تعامل سمت مشتری را فعال می کنند. جزایر اجزای Preact هستند که جدا شده و بر روی مشتری ارائه می شوند. این با سایر کامپوننت های Fresh که اغلب در سرور ارائه می شوند متفاوت است. در یک پروژه Fresh، جزیره ها با ایجاد یک فایل در پوشه islands/ تعریف می شوند.

Astro

 

Astro یک سازنده سایت استاتیک است که قادر است صفحات HTML ایستا سبک وزن را با استفاده از اجزای UI ساخته شده در چارچوب های دیگر مانند React، Preact، Svelte، Vue و غیره ایجاد کند. کامپوننت هایی که به جاوا اسکریپت سمت کلاینت نیاز دارند، به همراه وابستگی هایشان به طور جداگانه بارگذاری می شوند. در نتیجه، هیدراتاسیون جزئی داخلی دارد. Astro همچنین می‌تواند اجزای سازنده را بر اساس میزان دید آن‌ها بارگذاری کند. بخش زیر شامل یک نمونه پیاده سازی با استفاده از Astro است.

 

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

مارکو

انجام پروژه های متلب با متلب دانان

Marko یک چارچوب متن باز است که توسط eBay برای افزایش عملکرد رندر سرور ساخته و نگهداری می شود. از معماری جزیره با ادغام رندر جریان با هیدراتاسیون جزئی خودکار پشتیبانی می کند. هنگامی که HTML و سایر مواد استاتیک آماده هستند، برای مشتری پخش می شوند. هیدراتاسیون جزئی خودکار اجزای تعاملی را قادر می سازد تا خود هیدراته شوند.

مزایا و معایب

مزایای

کارایی

 

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

بارگذاری موازی یا همزمان

طراحی لوگو با بهترین طراحان لوگو

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

محتوای مهم را اولویت بندی می کند

 

حتی بهتر از آن، می‌توانید به Astro در مورد زمان و نحوه رندر کردن هر مؤلفه دستور دهید. اگر آن چرخ فلک تصویر برای بارگیری خیلی گران است، می توانید یک مشتری خاص را اضافه کنید

rective که به Astro دستور می دهد که فقط زمانی که چرخ فلک در صفحه ظاهر می شود بارگیری کند. اگر کاربر هرگز آن را نبیند هرگز بارگذاری نمی شود.

سئو

 

صفحات سئو پسند هستند زیرا تمام اطلاعات ثابت بر روی سرور ارائه می شود.

معایب

برای صفحات بسیار تعاملی بی اثر است

 

این معماری برای صفحات بسیار تعاملی، مانند برنامه های رسانه های اجتماعی، که تقریباً به هزاران جزیره نیاز دارند، ناکارآمد است.

چارچوب های محدود

 

تنها گزینه‌های جایگزین برای توسعه‌دهندگان برای پیاده‌سازی جزیره‌ها، استفاده از یکی از معدود چارچوب‌های موجود یا توسعه معماری است. انتقال سایت های موجود به Astro یا Marko به وظایف دیگری نیاز دارد.

نتیجه

مجری ذیصلاح لیست مجریان نظام مهندسی اراک مجری ساختمان

مفهوم معماری جزیره جدید است، اما انتظار می رود به دلیل مزایای عملکردی آن سرعت بیشتری به دست آورد. بر استفاده از SSR برای رندر محتوای ایستا تاکید می کند و در عین حال تعاملی را از طریق اجزای پویا با حداقل تأثیر بر عملکرد صفحه ارائه می دهد. امیدواریم در آینده شاهد شرکت های بیشتری در این زمینه و همچنین طیف وسیع تری از راه حل های اجرایی باشیم.

 

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