Reihaneh dastres
Reihaneh dastres
خواندن ۴ دقیقه·۱۹ روز پیش

مونوریپو یا میکروفرانت؟کدومش بهتره؟!

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

میکروفرانت اند (Micro Frontend) چیه؟

هر بخش از اپلیکیشن فرانت اند به صورت یک اپ مستقل ساخته میشه که میتونه با فریمورک یا فناوری مختلف توسعه داده بشه و این اپلیکیشنهای کوچک در یک صفحه واحد ترکیب میشن

فرض کن میخوایم یک فروشگاه اینترنتی بسازیم و هر بخش از فروشگاه میتونه یک میکروفرانت مجزا باشه(عکس بالا):

  • صفحه اصلی: یک React اپلیکیشن
  • صفحه محصولات: یک Vue اپلیکیشن
  • سبد خرید: یک Angular اپلیکیشن

مثال کد (ساختار پایه):

HTML

<div id=&quotheader&quot></div> <div id=&quotproducts&quot></div> <div id=&quotcart&quot></div> <script src=&quotheader.js&quot> <script src=&quotproducts.js&quot> <script src=&quotcart.js&quot>

هر فایل *.js یک میکروفرانت اند مجزا را بارگذاری میکند. این میکروفرانت اندها میتونن به صورت مجزا توسعه داده شده و مستقر شوند.

حالا مزایای این کار چیه؟!

  • مقیاسپذیری بالا:هر میکروفرانت اند میتونه به صورت مستقل مقیاس پذیر بشه،یعنی چی؟ به این معناست که میتونیم منابع بیشتری بهش اختصاص بدیم تا بتونه بار کاری بیشتری رو مدیریت کنه.و این باعث میشه تا بدون نیاز به تغییرات بزرگ در کل سیستم، فقط بخشهای خاصی را که نیاز به افزایش ظرفیت دارند، ارتقاء بدیم.
  • توسعه مستقل:هر تیم میتونه روی بخش خاصی از پروژه تمرکز کنه و تغییرات رو بدون تأثیر بر سایر قسمت ها اعمال کنه و این باعث افزایش سرعت توسعه و کاهش وابستگیها بین تیمها میشه.
  • فناوریهای مختلف: در هر میکروفرانت اند میشه از فناوریهای مختلفی استفاده کرد و این به تیمها اجازه میده تا از ابزارها و حتی زبانهای برنامه نویسی مختلفی که برای نیازهای خاص آنها مناسب تر است، استفاده کنند. به عنوان مثال، یک میکروفرانت اند میتواند با React ساخته بشه در حالی که دیگری از Angular استفاده میکند.
  • قابلیت اطمینان بالاتر:خرابی یک میکروفرانت تأثیر کمی بر روی سایر میکروفرانت اندها داره این به این معناست که اگر یک بخش از سیستم دچار مشکل بشه، سایر بخشها همچنان به درستی کار میکنند. این ویژگی باعث افزایش قابلیت اطمینان و پایداری کلی سیستم میشود.

معایب:

  • پیچیدگی بیشتر: مدیریت چندین میکروفرانتاند پیچیده تر از مدیریت یک اپلیکیشن فرانت اند یکپارچه است.
  • ارتباطات بین میکروفرانت ها: ارتباطات بین میکروفرانتاندها نیاز به دقت بیشتری دارد.
  • همچنین میکروفرانت ممکنه کانفیگ اولیه دشوار و پیچیده ای داشته باشه

مونوریپو (Monorepo)

فرض کنید یک شرکت نرم افزاری دارای یک وبسایت، یک اپلیکیشن موبایل،یک اپلیکیشن تجاری و کامپوننتهای UI مشترک است. در روش Monorepo، میخوایم یک کتابخانه UI بسازیم که بتونیم در هر پروژه استفاده کنیم و از تکرار کد جلوگیری کنیم. در این حالت، همه کامپوننتهای UI در یک مونوریپو قرار میگیرند.

my-ui-library/ ├── package.json ├── components/ │ ├── Button.js │ ├── Input.js │ └── ... ├── utils/ │ ├── formatDate.js │ └── ... └── ...

مثال کد (package.json):

JSON

{ &quotname&quot: &quotmy-ui-library&quot, &quotversion&quot: &quot1.0.0&quot, &quotprivate&quot: true, &quotworkspaces&quot: [ &quotcomponents/*&quot, &quotutils/*&quot ] }

در این مثال، workspaces به Yarn یا npm میگه که این پروژه چندتا پکیج داخلی داره که هرکدوم میتونه وابستگی خودش رو داشته باشه( هر workspace باید فایل package.json داشته باشه تا اطلاعات مربوط به پکیج را دارا باشه)

مزایا:

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

معایب:

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

نتیجه گیری

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

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

فرانت دولوپر(ری اکت)
شاید از این پست‌ها خوشتان بیاید