میکرو فرانت اند این روز ها خیلی بحث اش داغ شده و اکثر شرکت های که در بر گیرنده چند تیم مختلف فرانت هستن به سمت معماری میکروفرانت اند میرن در این مقاله سعی میکنم در مورد اینکه میکروفرانت اند چیه صحبت کنیم و سپس در مورد راه های استفاده از میکروفرانت صحبت میکنیم پس با من همراه باشید .
در حال حاضر توسعه اپلیکیشن ها به صورت اپ های یک پارچه صورت میگیره یعنی تمامی کامپوننت ها صفحات و ... داخل یک اپلیکیشن و یک سورس کد قرار داره و کل تیم های مختلف هر بخش بر روی یک سورس کد مشغول به انجام فعالیت هستن و یک جور وابستگی ایجاد میشه بین تیم های مختلف و ریسک تحت تاثیر قرار دادن کد ها در قسمت های مختلف وجود داره .
میکرو فرانت اند اومده میگه هر بخش از اپلیکیشن یک پارچه خودتون رو مشخص کنید و داخل اپلیکیشن های کوچیک تر قرار بدهید خب این یعنی چی ؟ من با یک مثال این بخش توضیح میدم فرض کنید یک اپلیکیشن فروشگاه اینترنتی داریم شامل دو تا بخش هستش لیست محصولات و سبد خرید هر بخش لیست محصولات و سبد خرید میتونه در قسمت جدا توسعه پیدا بکنه یعنی لیست محصولات داخل یک اپلیکیشن جدا SPA باشه و سبد خرید هم همچنین خب گفتم اپلیکیشن جدا SPA یعنی چی این حرف یعنی میتونید لیست محصولات خودتون رو با ری اکت سبد خرید رو با ویو جی اس توسعه بدین یعنی وابستگی زبانی هم اینجا نداریم هر بخش بر حسب نیاز میتونه از یک معماری منحصر به فرد خودش پیروی کنه . خب الان با خودتون میگید برای ارتباط این دو بخش چکار باید بکنیم ؟ فرض کنید من بر روی دکمه اضافه کردن به سبدخرید میزنم باید به بخش سبد خرید من یک ایتم اضافه بشه اما چطوری ؟ میکروفرانت میگه نباید وابستگی مستقیم بین این دو بخش ایجاد بکنید ! و صرفا باید از Api استفاده بکنید و ارتباط داشته باشید اینگونه وابستگی مستقیم بین این دو بخش حذف میکنید .
مزایا میکرو فرانت اند :
خب احتمالا با خودتون بگید چرا یک بخش اضافه شده به اسم Container اصن کار این بخش چیه چکار میکنه .
این بخش کاری میکنه اینه که مشخص میکنه که اپلیکیشن میکروفرانت اندی ما کی و کجا نمایش داده باشه . یک جور نقش مدیریت اپلیکیشن میکروفرانت اندی ما رو خواهد داشت . پس باید به سورس کد این دو اپلیکیشن ما دسترسی باید داشته باشه اما چطوری ؟ اینجا یک مفهوم وجود داره به اسم ادغام یا Integration که به ما کمک میکنه این مورد هندل کنیم .
قبل از توضیحات این بخش بهتون بگم راه های وجود داره بدون نقص و ایراد نیستن و بدین معنی هستش هر کدوم از این راه ها درد سر خاص خودشون دارن و هر کدوم نقاط قوت و منفی دارند و شما باید نگاه کنید نیازمندی موجود شما چیه و به متناسب با نیازمندی خودتون انتخاب کنید کدوم راه حل مشکل شما و نیاز شما رو برطرف میکنه .
نکته : تمامی این مثال ها رو من با اپلیکیشن میکروفرانت اند لیست محصولات میزنم .
ادغام سمت سرور : در حالی که فایل جی اس رو برای لود Container سمت کلاینت میفرستید سرور تصمیم میگیره آیا شامل سورس کد لیست محصولات باشد یا نه
ادغام هنگام اجرا : Container بعد از اینکه توی مرورگر لود شد . به سورس کد لیست محصولات دسترسی پیدا میکنه
ادغام هنگام بیلد : Container قبل از اینکه توی مرورگر لود بشه به سورس کد لیست محصولات دسترسی پیدا میکنه
مراحل ادغام در هنگام بیلد
تیم توسعه لیست محصول رو توسعه میده وقت deploy میرسه لیست محصول را به عنوان یک پکیج داخل NPM انتشار میده و تیم مسئول پروژه Container لیست محصول رو به عنوان یک پکیج نصب میکنه و تیم Container از اپشون بیلد میگیره و خروجی باندل شده تمام کدهای لیست محصول رو به همراه خواهد داشت .
مزیت این بخش :
درک مفهوم آن و راه اندازی اش بسیار آسان است .
عیب این بخش :
با هر تغییری در لیست محصول نیاز است تا Container مجدد deploy شود .
بد عادت شدن و وابستگی زیاد ایجاد کردن بین Container و لیست محصول .
مراحل ادغام در هنگام اجرا
تیم توسعه لیست محصول رو توسعه میدن وقت deploy وقتی رسید کد های لیست محصول در ادرس my-app.com/ProductList.js دپلوی میکنند وقتی کاربر به my-app.com می رود اپ Container لود میشه اپ Container هم لیست محصولات رو Fetch میکنه و سپس اجرا میکنه .
نکته تمامی این کارها در تنظیمات وب پک صورت میگیره پس دانش نسبتا خوبی به وب پک باید داشته باشید یا از ابزار های مثل NX یا Lerna استفاده کنید .
مزایا :
لیست محصول میتونه به صورت مستقل در هر زمان دپلوی بشه
نسخه های مختلف از لیست محصولات میتونه دپلوی بشه و Container میتونه تصمیم بگیره از کدام یک استفاده کنه
معایب
راه اندازی ان دشوار و پچیده می باشد .
سخن اخر
من روشی بهتون پیشنهاد میدم ادغام در زمان اجرا هستش چون خیلی دستمون باز تره و توسعه پذیری بهتره داره درسته پیچیدگی داره و دشواره راه اندازیش وقت زیادی باید صرف بشه نسبت به ادغام در زمان بیلد اما روش قابل اعتماد و خوبی هستش
