چگونه میکرو فرانت-اند بسازیم – بخش اول

آفلاین
user-avatar
عرفان حشمتی
13 مهر 1400, خواندن در 12 دقیقه

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

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

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

میکرو فرانت-اند معمولا به عنوان ترکیبی از فرانت-اندهای مستقل در نظر گرفته می‌شود که در زمان اجرا (Run-Time) اتفاق می‌افتد، چه در سمت سرور و چه در سمت کلاینت.

با اینکه ادغام زمان اجرا مزایای خود را دارد (مثلا بار کمتر)، اما به هیچ وجه تنها راه دستیابی به ترکیبی از برنامه‌های قابل تحویل مستقل نیست.

به نظر من به کارگیری این روش نوین برای ایجاد و همکاری در برنامه‌ها، عنصر اصلی میکرو فرانت-اند است.

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

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

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

اول از همه، یک مثال واقعی با هم ببینیم. اگر به صفحه اصلی Bit.dev بروید، هر زمان که روی یک کامپوننت کلیک کنید، متوجه اتفاق عجیبی می‌شوید.

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

آنچه در آنجا مشاهده می‌کنید، نمایشی واقعی از نحوه استفاده تیم‌ها از فناوری‌های مدرن مبتنی بر کامپوننت مانند React و Bit برای ساختن میکرو فرانت-اند است.

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

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

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

یک محدوده از کامپوننت‌ها "base-ui" نامیده می‌شود که اساسی‌ترین سیستم طراحی کامپوننت Bit.dev به شمار می‌رود و به عنوان مثال شامل عناصر اساسی مانند "پاراگراف" است. این متعلق به تیم زیرساخت‌های فرانت-اند است و در پایگاه کد جدا شده خود توسعه یافته است. همه این کامپوننت‌ها در Bit.dev منتشر و به اشتراک گذاشته می‌شوند. سپس در آنجا توسط هر تیم دیگری که به آنها نیاز دارد، می‌توان آنها را به راحتی در پروژه‌های جدید ادغام کرد. همچنین تیم سازنده base-ui می‌تواند به طور مکرر بروزرسانی کامپوننت‌های خاص را اعمال کند.

محدوده دوم "evangelist" نامیده می‌شود. این سیستم کامپوننت‌های مبتنی بر بازاریابی را شامل می‌شود که برای ایجاد صفحات بازاریابی در برنامه‌ها مورد استفاده قرار می‌گیرد و متعلق به تیم بازاریابی است و در یک پایگاه کد جدا توسعه یافته است. همه این کامپوننت‌ها در Bit.dev منتشر و به اشتراک گذاشته و توسط تیم بازاریابی نگهداری می‌شوند.

Evangelist - سیستم کامپوننت‌های بازاریابی Bit.dev

در این مثال، تیم بازاریابی از تیم ایجاد کننده پلتفرم وب Bit.dev جدا شده است. این تیم در یک پایگاه کد متفاوت کار می‌کند، تغییرات را از طریق خط لوله جداگانه منتشر می‌کند و می‌تواند به طور مداوم سیستم را ارتقا دهد.

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

هر تیمی در Bit از گردش کاری خود لذت می‌برد. همه تیم‌ها برای به اشتراک گذاشتن و ادغام کامپوننت‌ها با یکدیگر بدون دخالت در کار دیگری همکاری می‌کنند. نزدیک به 100 مورد از کامپوننت‌های نوشته شده در پایگاه کد آنها به اشتراک گذاشته می‌شوند و مجددا مورد استفاده قرار می‌گیرند. نه تنها کامپوننت‌های اصلی، بلکه بسیاری از ویژگی‌های دیگر سیستم مانند Search، Playground و حتی برخی از ویژگی‌های کامل فرانت-اند و بک-اند را نیز شامل می‌شود. به نظر من این کار ارزش بسیار بالایی دارد.

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

میکرو فرانت-اند چیست؟

در سال‌های اخیر، میکروسرویس‌ها به معماری بک-اند اجازه داده‌اند تا از طریق پایگاه‌های کد به هم پیوسته هر کدام مسئول منطق تجاری خود باشند و یک API را در نظر گرفته که برای هر مورد به طور مستقل قابل استفاده بوده و تحت مالکیت و نگهداری تیم‌های مختلف باشد.

این پارادایم مزایای زیادی را برای کمک به سرعت، مقیاس‌بندی و کارآمدتر ساختن فرآیند ارائه می‌دهد.

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

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

چرا این امر قبلا ممکن نبود، اما در حال حاضر امکان‌پذیر است؟

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

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

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

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

در Bit از همان روز اول با میکرو فرانت-اند کار می‌کردند. به این ترتیب ابزارهای خود را طراحی و تست کردند، به طوری که بتوانند به تیم‌های دیگر کمک کنند تا با کامپوننت‌ها بهتر کار کنند. امروزه ابزارهای آن‌ها به بیش از 100000 توسعه‌دهنده کمک می‌کند تا از مزایای مشابه برخوردار شوند.

زیرساخت کامپوننت‌های به اشتراک گذاشته شده:

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

بدین منظور برای توسعه برنامه‌های وب، ری‌اکت را انتخاب کردند. با انتشار ویژگی‌هایی مانند Hooks و Context-API ، ری‌اکت به یک انتخاب عالی برای توسعه برنامه های کاربردی مدرن تبدیل شد.

برای زیرساخت‌ها هم از کامپوننت‌های میکرو فرانت-اند بهره گرفتند، همچنین از ابزارهای متن باز و پلتفرم ابری هم پشتیبانی می‌کنند.

به غیر از تست روزانه محصول، Bit چند ویژگی لازم را برای اتخاذ معماری پیش ساخته در اختیار آن‌ها قرار می‌دهد:

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

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

2. پلتفرم ابری آنها برای تیم‌ها یک مرکز همکاری فراهم آورده که در آن همه می‌توانند کامپوننت‌ها را منتشر کنند، به راحتی آنها را مستندسازی کرده (بیت این روند را خودکار می‌کند) و سپس هر یک را نصب کنند. این قابلیت به تیم‌ها اجازه می‌دهد نزدیک به 100 درصد از کامپوننت‌های ساخته شده را به اشتراک بگذارند و از آنها استفاده مجدد کنند.

برای اطمینان از اینکه هر یک از خطوط، فرایند ساخت مستقل و سریع خود را دریافت می‌کند، Bit همچنین یک فرایند CI/CD منحصر به فرد را ارائه می‌دهد که 100 درصد کامپوننت محور است. به این معنی که تیم‌های مختلف می‌توانند با خیال راحت تغییرات را بدون نیاز به انتظار و دردسرهای فراوان به طور مستمر در کامپوننت‌های مختلف برنامه اعمال کنند.

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

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

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

ادامه مقاله را در بخش دوم دنبال کنید.

منبع

 

چه امتیازی به این مقاله می دید؟
خیلی بد
بد
متوسط
خوب
عالی

دیدگاه‌ها و پرسش‌ها

برای ارسال دیدگاه لازم است، ابتدا وارد سایت شوید.

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

آفلاین
user-avatar
عرفان حشمتی @heshmati74
مهندس معماری سیستم های کامپیوتری، طراح و توسعه دهنده وب سایت
دنبال کردن

گفتگو‌ برنامه نویسان

بخشی برای حل مشکلات برنامه‌نویسی و مباحث پیرامون آن وارد شو