Micro frontends یک رویکرد معماری برای توسعه frontend است که به طور فزاینده ای محبوب شده است. این می تواند به راحتی آینده توسعه وب ظاهری را نشان دهد و به همین دلیل است که یادگیری مزایای اصلی که چنین معماری می تواند برای برنامه های کاربردی و تیم توسعه شما به همراه داشته باشد بسیار مهم است.

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

بیایید ابتدا بررسی کنیم که معماری micro frontend چیست و سپس پنج دلیل برای اتخاذ آن را اکنون بررسی کنیم.

معماری Micro Frontend چیست؟

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

این چیزی است که معماری میکروسرویس با توجه به توسعه باطن است. اما همین رویکرد را می توان برای توسعه frontend نیز به کار برد، و نام آن معماری micro frontend است. بر وب سایت رسمی مارتین فاولر، رویکرد micro frontend به صورت زیر تعریف می شود:

یک سبک معماری که در آن برنامه های کاربردی مستقل قابل تحویل در یک کل بزرگتر ترکیب می شوند.

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

از سوی دیگر، micro frontendها به شما این توانایی را می دهند که به معماری کمتر پیچیده و دست و پا گیر دست یابید. به طور خاص، به لطف رویکرد micro frontend، می توانید یک برنامه کامل را به بخش های کوچک و مستقل تقسیم کنید. سپس هر یک از آنها توسط تیم های فرانت اند مختلف و حتی با فناوری های مختلف قابل اجرا خواهند بود. این همان مقیاس‌پذیری، انعطاف‌پذیری و سازگاری را تضمین می‌کند که با معماری microservice backend ارائه می‌شود. علاوه بر این، این رویکرد به شما امکان می‌دهد اجزای micro frontend توسعه‌یافته را با کتابخانه‌ها یا چارچوب‌های مختلف در یک صفحه وب ترکیب کنید.

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

معماری Micro Frontend

5 مزیت امروزه انتخاب Micro Frontends

توسعه با micro frontend به من آموخت که نقاط قوت واقعی این رویکرد برای توسعه frontend چیست.

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

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

افزایش به چند تیم

تیمی که من با آن کار می کنم متشکل از توسعه دهندگان با پیشینه ها و مهارت های مختلف است. برخی در این زمینه متخصص هستند واکنش نشان دهید، دیگر Vue.js، یا زاویه ای. برخی ترجیح می دهند در کدنویسی قرار بگیرند جاوا اسکریپت، دیگران در TypeScript. در ابتدا، این یک مانع بود. تنها راه حل، یافتن زمینه مشترک بود، اگرچه این انتخاب برخی از توسعه دهندگان را مجبور به یادگیری فناوری های جدید و از دست دادن تخصص خود می کرد. بنابراین، ما به دنبال راه حلی بودیم و تصمیم گرفتیم که رویکرد معماری micro frontend را اتخاذ کنیم.

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

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

پذیرش پشته فناوری مختلف

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

علاوه بر این، رویکرد micro frontend عملاً پدیده قفل را برای یک فناوری خاص حذف می کند یا حداقل آن را به میزان قابل توجهی کاهش می دهد. این به این دلیل است که تیم شما همیشه می‌تواند تصمیم بگیرد که پشته فناوری جدید را بدون نیاز به ترجمه آنچه قبلا توسعه داده شده است انتخاب کند. بعلاوه، هر قسمتی که معماری micro frontends از آن تشکیل شده است مطمئناً کوچکتر از یک frontend monolith است و ترجمه آن به یک فناوری جدید زمان کمتری می برد.

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

توسعه و استقرار سریعتر می شود

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

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

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

این برنامه وب شما را قابل نگهداری تر می کند

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

این چیزی است که تیم ما به سرعت یاد گرفت. آزمایش برنامه های بزرگ یکپارچه چالش برانگیز است و زمان زیادی می برد و همه ما این را می دانستیم. اما از زمانی که رویکرد micro frontend را اتخاذ کردیم، همه چیز تغییر کرده است. اکنون هر تیم مسئول آزمایش ویژگی‌هایی است که توسعه می‌دهد، که بسیار کوچک‌تر از یک اپلیکیشن ظاهری کامل هستند. این کار کل فرآیند را سرعت می بخشد و آن را آسان تر می کند. در نتیجه، اکنون هیچ کس از آزمایش نمی ترسد. همچنین، هر تیم جداگانه اکنون آزاد است تا از ابزارها و فناوری‌های آزمایشی که ترجیح می‌دهند استفاده کند.

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

این نشان دهنده آینده توسعه frontend است

بر اساس گزارش وضعیت ریز خدمات 202024 درصد از توسعه دهندگان از micro frontend استفاده کرده اند. این بدان معناست که شرکت‌های بیشتری از قدرت این رویکرد استفاده می‌کنند و انتظار می‌رود چندین برنامه کاربردی محبوب در آینده نزدیک از آن استفاده کنند. به عبارت دیگر، میکرو فرانت‌اندها ممکن است مرحله بعدی را در توسعه فرانت‌اند نشان دهند.

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

همزمان، اپلیکیشن‌های وب در حال تکامل هستند، و من و تیمم نمی‌ترسیم بگوییم که micro frontend تکامل طبیعی توسعه frontend است.

نتیجه

در این مقاله، ما به پنج دلیل مهم برای اتخاذ رویکرد معماری micro frontend بر اساس تجربه ای که تیم من و من به مدت دو سال کار روزانه با آن را توسعه داده ایم، بررسی کردیم. رویکرد micro frontend به شما این امکان را می دهد که یک برنامه frontend را به قطعات کوچک مستقل از یکدیگر تقسیم کنید.

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

اگر می‌خواهید درباره نحوه شروع کار با یک فریم ورک micro frontend اطلاعات بیشتری کسب کنید، لطفاً به راهنمای مبتدیان ما در مورد معماری micro frontend مراجعه کنید، جایی که یک برنامه کاربردی را ایجاد خواهید کرد.

با تشکر برای خواندن! امیدوارم که این مقاله برای شما مفید بوده باشد. در صورت تمایل به به من برس با هر گونه سوال، نظر یا پیشنهاد