برنامه نویسی

AMA – Manfred Steyer در Import Maps برای Micro Frontends

مدتی پیش ما اولین “کنفرانس Micro Frontends” را برگزار کردیم – یک رویداد کاملاً از راه دور رایگان برای جامعه میکرو فرانت‌اند. تقریباً همه سخنرانان می‌توانستند آن را به طور زنده به رویداد برسانند، که سؤالات زیادی از طریق YouTube یا چت انجمن Discord پرسیده شد. با این حال، یکی از سخنرانان در آن روز در سفر بود و خوشبختانه تصمیم گرفت با ارائه پیش ضبط سخنرانی خود همچنان شرکت کند.

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

فهرست مطالب

سوالات

بنابراین به نظر می رسد این روش دیگری برای کشف خدمات باشد، درست است؟

مانفرد: خوب، اگر manifest.json فقط یک json ایستا نباشد، بلکه نتیجه یک API “REST” باشد، می توان از آن به عنوان نوعی کشف سرویس استفاده کرد. با این حال، شخصی باید بخش مدیریت را در سمت سرور پیاده سازی کند.

جایگزین‌های جایگزین برای وارد کردن ماژول در زمان اجرا چگونه تعریف می‌شوند، مثلاً اگر سرور میزبان ماژول راه دور پاسخگو نباشد، با استفاده از کد جدا شده از منبع؟

مانفرد: فقط می توانید از یک بند catch هنگام بارگیری Micro Frontend استفاده کنید.

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

مانفرد: به همین صورت عمل می کند. چند نمونه را در صفحه npm پیدا می کنید. چالش فعلی React این است که بسته‌های ESM را ارسال نمی‌کند. تبدیل از CommonJS امکان پذیر است، اما تنها راهی وجود ندارد که همیشه برای این کار کار کند. این می تواند کمی چالش برانگیز باشد.

پیاده سازی فعلی با React آزمایش شد و ما حتی راه حل هایی را برای تبدیل به ESM اضافه کردیم. اگر با مشکلاتی مواجه شدید، به عنوان مثال با برخی از اسناد فروشنده شخص ثالث، لطفاً به من اطلاع دهید.

بزرگترین چالش ایجاد «فدراسیون بومی» چه بود؟

مانفرد: راستش رو به جلو بود. من یک POC کار در چند ساعت داشتم، با این حال، به نظر می رسید که فدراسیون ماژول 2-3 هفته دیگر طول کشیده است.

به غیر از اندازه بسته نرم افزاری – دلایل دیگری برای اشتراک گذاری وابستگی ها وجود دارد؟

مانفرد: همچنین می توانید از لبه های به اشتراک گذاشته شده برای داده های به اشتراک گذاشته شده استفاده کنید. در این مورد، lib به عنوان یک میانجی یا یک mini-service-bus عمل می کند.

چرا ما MFE را اینقدر پیچیده می‌کنیم، آیا نمی‌توانیم با پنهان کردن تمام جزئیات Impl و Frameworks/Agnostic فروشنده، یک روش استاندارد/مشخصات کار داشته باشیم؟

مانفرد: عالی میشه متأسفانه در حال حاضر چیزی در چشم نیست.

به نظر شما بهتر است lib agnostic برویم یا با ابزارهای پشتیبانی شده مانند Piral یا MFE ادامه دهیم؟

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

سخنرانی قبلی شما (کنگره JS) را به خاطر می آورم که با استفاده از کامپوننت های وب، از بخش های کوچک پشتیبانی می کرد. آیا رویکردی که امروز پیشنهاد می‌کنید بهتر از رویکرد قبلی است؟

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

بنابراین، اگر 5 بسته داشته باشید، ممکن است فریمورک خود را 5 بار دریافت کنید. فدراسیون بومی/ فدراسیون ماژول این را جبران می کند. برای سناریوی چند فریمورک/چند نسخه، می‌توانید از Web Components همراه با Module Federation/Native Federation استفاده کنید. در این مورد، وابستگی زمانی به اشتراک گذاشته می شود که سازگار باشد. در غیر این صورت نسخه دیگری بارگذاری می شود.

آیا هیچ چالشی با فدراسیون بومی در برنامه های ترکیبی یا نمایش وب مشاهده می کنید؟

مانفرد: برنامه های ترکیبی تمرکز من نیستند، اما من مشتریانی دارم که از فدراسیون ماژول با برنامه های ترکیبی استفاده می کنند و به من گفتند که خوب کار می کند.

برای وارد کردن ماژول‌های آینده و پیاده‌سازی یک استراتژی کش مؤثر، می‌توانیم از نسخه‌سازی / معنایی یا هش کردن استفاده کنیم؟

مانفرد: برای کش بله. برای متا داده های استفاده شده توسط فدراسیون ماژول / فدراسیون بومی باید با semver استفاده کنیم.

آیا ماژول ها می توانند “وابستگی های همتا” را برای میزبان تعریف کنند؟

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

قالب های بارگیری قطعات مختلف برنامه چگونه به نظر می رسند؟

مانفرد: به طور معمول، قالب ها به EcmaScript کامپایل می شوند. حداقل، این مورد در مورد تمام چارچوب های SPA فعلی است. از این رو، نیازی به اشتراک گذاری چنین قالب هایی جداگانه نیست.

آیا قالب ها بر اساس هر درخواست قابل کنترل هستند؟ – هنگام کار بر روی پوسته — چگونه می‌توانیم برای چیزهایی که ریموت‌ها در معرض نمایش قرار می‌دهند، IDE تکمیل خودکار دریافت کنیم؟

مانفرد: می توانید یک رابط را به اشتراک بگذارید. اما به طور معمول، قرارداد بین Micro Frontend های مختلف باید بسیار کوچک باشد.

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

آیا اعلان ها در زمان بسته تجزیه می شوند؟

مانفرد: در زمان بسته نرم افزاری Native Federation یک بسته نرم افزاری در هر ماژول lib مشترک و در معرض نمایش موجود در پیکربندی فدراسیون ایجاد می کند.

بنابراین، خداحافظ iframes؟

مانفرد: خوب، iframe ها هنوز موارد استفاده خود را دارند. اگر به یک جداسازی بسیار خوب نیاز دارید یا اگر نیاز به ادغام برنامه های وب سنتی (JSP، JSF، ASP.NET، PHP، …) دارید، می توان از آنها استفاده کرد. حتی SAP از iframes در چارچوب لوئیجی خود استفاده می کند.

آیا فدراسیون بومی می خواهد جایگزین فدراسیون ماژول شود؟

مانفرد: برای من این بیمه ای است که مدل ذهنی فدراسیون ماژول ها زنده خواهد ماند حتی اگر از وب پک دور شویم. به عنوان مثال، Angular به آرامی به سمت esbuild می رود.

چرا فدراسیون ماژول را به جای اجرای استاندارد/lib دیگر، نقشه های وارداتی را در آغوش نگیرد؟

مانفرد: برای اینکه مدل ذهنی Module Federation tooling agnostic باشد، برداشت من این بود که آن را بیشتر خارج از باندلر اجرا کنم. در نتیجه، می‌توانید همراه با باندلرهای دیگر مانند esbuild استفاده کنید.

single-spa به شدت به نقشه های وارداتی وابسته است. آیا تا به حال حرفه ای ها را مقایسه کرده اید. و معایب مقایسه اجرای آنها با فدراسیون بومی؟

مانفرد: بله، آنها از آنها استفاده می کنند و رایج ترین روش استفاده از نقشه های وارداتی در آنجا SystemJS است. در حالی که Single-SPA یک متا فریمورک است، استفاده از فدراسیون ماژول/ فدراسیون بومی به شما امکان می دهد از چارچوب پیشرو خود برای هماهنگی بخش های کوچک مختلف استفاده کنید. هیچ چارچوب اضافی مورد نیاز نیست.

همچنین با ارائه انتزاع، نیازی به پرداخت دستی به Import Maps ندارید. مانند Module Federation، Native Federation از پیکربندی شما استفاده می کند و از همه چیز مراقبت می کند (قرار دادن لبه های مشترک در بسته های جداگانه، استفاده از استراتژی هایی برای دور زدن تضادهای نسخه).

چگونه می توان وابستگی های مشترک را در ماژول های فدرال مدیریت کرد؟ برای پروژه های بزرگ

مانفرد: اگر مونورپو دارید، می‌توانید مطمئن شوید که در یک زمان معین، فقط یک نسخه موجود است.

اگر چندین مخزن دارید، در مورد حاکمیت است. با این حال، در اینجا، همیشه می‌توانید نسخه‌های مختلفی را دریافت کنید، بنابراین انتزاع کردن Micro Frontends با Web Components می‌تواند ایده خوبی در اینجا باشد.

چه زمانی استفاده از microfrontends منطقی است؟

مانفرد: به طور کلی، اگر چندین تیم دارید که نمی توانند در یک مونورپو با هم کار کنند. برای من این دلیل اصلی است. در سطح فنی، Micro Frontends نیز کم کم به مهاجرت از یک پشته فناوری به پشته دیگر کمک می کند.

نتیجه

با تشکر از @manfredsteyer برای شرکت در این رویداد بزرگ و همچنین برای پاسخ سریع به سوالات. بسیار قدردانی می شود!

شما می توانید مانفرد را دنبال کنید توییتر یا در مورد کارگاه های Angular تماس بگیرید.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا