الگوهای معماری فرانت‌اند، راهنماهای قابل استفاده مجددی هستند که نحوه پیاده‌سازی یک محصول نرم‌افزاری را در بخش فرانت‌اند ساختاردهی می‌کنند. تیم‌های توسعه نرم‌افزار مدرن از انواع مختلفی از الگوهای معماری فرانت‌اند استفاده می‌کنند (مانند معماری یکپارچه، ماژولار و مبتنی بر کامپوننت). انتخاب الگوی مناسب به عواملی مثل پیچیدگی پروژه، مقیاس‌پذیری، قابلیت نگه‌داری، زمان تحویل محصول و ترجیحات توسعه‌دهندگان بستگی دارد.
معماری فرانت‌اند ما پایه و اساس کدبیس فرانت‌اندی است که در طول چرخه عمر محصول از آن نگه‌داری خواهیم کرد، بنابراین انتخاب معماری بهینه امری ضروری است.
در این مقاله، به بررسی تمام الگوهای محبوب معماری فرانت‌اند، مزایا، معایب و مثال‌هایی از کاربرد آن‌ها خواهیم پرداخت.
از نظر تئوری، می‌توان هر محصول نرم‌افزاری را با هر یک از الگوهای معماری فرانت‌اند موجود ساخت. دلیل این موضوع این است که یک الگوی معماری، یک روش کلی و قابل استفاده مجدد برای ساختاردهی رابط کاربری ارائه می‌دهد، نه مجموعه‌ای از قوانین سختگیرانه توسعه.
با این حال، در عمل، همه الگوهای معماری بهره‌وری یکسانی برای توسعه‌دهندگان ندارند. این الگوها به ما کمک می‌کنند تا اهداف توسعه را بر اساس نیازهای تجاری برآورده کنیم.
پس همیشه باید بر اساس عواملی مانند پیچیدگی پروژه، مقیاس‌پذیری، قابلیت نگه‌داری، هزینه و زمان تحویل محصول و ترجیحات توسعه‌دهندگان، معماری بهینه را انتخاب نماییم.
انتخاب معماری بهینه به ما کمک می‌کند تا:
در این مقاله، به بررسی الگوهای معماری مدرن و پرکاربردی که برای ساخت نرم‌افزارهای وب، موبایل یا دسکتاپ استفاده می‌شوند، خواهیم پرداخت:
در ادامه هر یک از این معماری‌ها را باهم بررسی خواهیم کرد.
در معماری یکپارچه، تمام رابط‌های کاربری، منابع و ماژول‌های وابسته به فرانت‌اند در یک کدبیس واحد قرار دارند. معمولاً در این نوع معماری، از الگوی MVC (model-view-controller) در کنار کامپوننت‌ها، ویجت‌ها، بخش‌های مختلف رابط کاربری و سایر روش‌های تفکیک کد برای سازمان‌دهی بهتر استفاده می‌شود. به بیان ساده، تمام فایل‌های کد فرانت‌اند در یک مخزن کد یکپارچه نگه‌داری می‌شوند.
این معماری برای پروژه‌های ساده و تیم‌های کوچک تا متوسط مناسب است. معمولاً در مواردی که سرعت تحویل اولیه پروژه مهم‌تر از مقیاس‌پذیری و نگه‌داری بلندمدت کدبیس است، از این الگو استفاده می‌شود.
به عنوان مثال، یک تیم کوچک توسعه ممکن است برای ساخت بخش فرانت‌اند یک اپلیکیشن سازمانی متوسط از معماری یکپارچه استفاده کند.
بیشتر SPAها (اپلیکیشن‌های تک‌صفحه‌ای)، اپلیکیشن‌های چندصفحه‌ای و سایر پروژه‌های فرانت‌اند که در یک مخزن GitHub قرار دارند، معمولاً از معماری یکپارچه همراه با الگوهای MVC یا صفحه‌بندی سنتی استفاده می‌کنند. به عنوان مثال، سورس کد یک اپلیکیشن To-Do List از معماری یکپارچه همراه با الگوی MVC بهره می‌برد.
در معماری ماژولار، کدبیس به ماژول‌های جداگانه، قابل نگه‌داری و قابل نصب تقسیم می‌شود. توسعه‌دهندگان بخش‌های اصلی برنامه را بر اساس عملکرد آن‌ها به ماژول‌های مختلف تفکیک می‌کنند، بنابراین می‌توانند هر بخش را به طور مستقل توسعه، تست و استقرار دهند، بدون این‌که مشکلاتی در همکاری تیمی ایجاد شود.
این الگو، یک مخزن کد یکپارچه را به چندین مخزن کوچک‌تر تبدیل می‌کند، اما خروجی نهایی همچنان یک نرم‌افزار یکپارچه محسوب می‌شود، چون این ماژول‌ها در نهایت با یکدیگر ادغام می‌شوند.
الگوی ماژولار، روشی برای افزایش قابلیت نگه‌داری و همکاری در پروژه‌های بزرگ با کدبیس یکپارچه است، بدون آن‌که نیاز به بازنویسی‌های پرهزینه باشد. توسعه‌دهندگانی که می‌توانند زمان اولیه توسعه را برای بهره‌مندی از مزایای همکاری و نگه‌داری آینده سرمایه‌گذاری کنند، معماری ماژولار را انتخاب می‌کنند.
به عنوان مثال، یک تیم نرم‌افزاری با اندازه متوسط ممکن است برای توسعه یک اپلیکیشن ecommerce در مقیاس متوسط، از معماری ماژولار استفاده کند. در این حالت، ماژول‌های مجزایی برای بخش‌های خرید، پرداخت، مدیریت محصولات و مالی ایجاد و نگه‌داری می‌شوند.
توسعه‌دهندگان وب از ابزارهای مدیریت monorepo مشابه Lerna برای پیاده‌سازی فرانت‌اندهای ماژولار و کارآمد استفاده می‌کنند. این نمونه پروژه Lerna راهنمایی برای پیاده‌سازی الگوی معماری ماژولار در یک اپلیکیشن وب ساده ارائه می‌دهد.
معماری مبتنی بر کامپوننت توصیه می‌کند که برای ساخت رابط کاربری نرم‌افزار از کامپوننت‌های قابل استفاده مجدد استفاده شود. کامپوننت‌ها شامل یک Template، منطق UI و استایل‌ها هستند و توسعه‌دهندگان معمولاً UIهای بزرگ را بر اساس عملکرد و ارتباط منطقی آن‌ها به کامپوننت‌های کوچک‌تر تقسیم می‌کنند. در یک برنامه مبتنی بر کامپوننت، صفحه با ساخت یک درخت کامپوننت‌ها رندر شده، و پیام‌ها بین آن‌ها برای پیاده‌سازی تعاملات رد و بدل می‌شوند. این معماری اساس اصلی کتابخانه‌های محبوب فرانت‌اند مانند React، Vue، Angular و Svelte است.
معماری مبتنی بر کامپوننت اساس اصلی کتابخانه‌های محبوب فرانت‌اند است، بنابراین توسعه‌دهندگان برای ساخت رابط‌های کاربری با این کتابخانه‌ها باید از آن پیروی کنند. توسعه‌دهندگانی که به دنبال قابلیت استفاده مجدد کد، ساختار درخت رندر و تست‌های واحد مبتنی بر کامپوننت هستند، این معماری را انتخاب می‌کنند.
به عنوان مثال، یک توسعه‌دهنده اپلیکیشن موبایل ممکن است از معماری مبتنی بر کامپوننت همراه با فریمورک React Native برای ساخت یک اپلیکیشن شبکه اجتماعی استفاده کند.
تمامی کتابخانه‌های مدرن فرانت‌اند توصیه می‌کنند که برنامه‌ها بر اساس معماری مبتنی بر کامپوننت ساخته شوند. با بررسی هر پروژه‌ای در React، Angular، Vue یا Svelte می‌توان الگوی این معماری را مشاهده کرد. برای مثال، سورس یک اپلیکیشن چت ساده React Native از این معماری استفاده می‌کند.
معماری میکروفرانت‌اند توسعه‌دهندگان را تشویق می‌کند تا بخش فرانت‌اند یک اپلیکیشن را به پروژه‌های ایزوله و قابل نگه‌داری، معروف به میکروفرانت‌اندها تقسیم کنند. توسعه‌دهندگان می‌توانند میکروفرانت‌اندها را به عنوان بخش‌هایی از UI، کامپوننت‌ها، ماژول‌ها یا حتی کل فرانت‌اند یک اپلیکیشن بر اساس پیچیدگی محصول و ترجیحات توسعه ایجاد کنند.
یک سیستم نرم‌افزاری که از الگوی میکروفرانت‌اند پیروی می‌کند، شامل دو نوع پروژه جداگانه است:
معماری میکروفرانت‌اند راه‌حل‌هایی برای مسائل نگه‌داری، مقیاس‌پذیری و استقرار در پروژه‌های پیچیده و بزرگ ارائه می‌دهد. همچنین، این معماری در مواقعی که نیاز به استفاده مجدد از کدهای مختلف برای نمونه‌های جداگانه‌ای از فرانت‌اند وجود دارد، مزایای چشمگیری دارد.
این معماری برای پروژه‌های پیچیده که توسط تیم‌های توسعه بزرگی نگه‌داری می‌شوند، توصیه می‌شود. به عنوان مثال، یک شرکت ممکن است یک اپلیکیشن ERP (برنامه‌ریزی منابع سازمانی) را با ایجاد میکروفرانت‌اندهایی برای ماژول‌های مختلف آن توسعه دهد.
به دلیل استفاده از معماری میکروفرانت‌اند در سیستم‌های سازمانی بزرگ و بسته، community متن‌باز نمونه‌های کامل و به‌روزی از این الگو ندارد. با این حال، می‌توان نمونه‌ای از یک اپلیکیشن ساده میکروفرانت‌اند مبتنی بر React را در یک مخزن GitHub مشاهده کرد.
شرکت Meta معماری Flux را برای توسعه اپلیکیشن‌های وب سمت کلاینت معرفی کرد. این معماری راهکاری بهینه برای مدیریت state و جریان داده در اپلیکیشن‌های مبتنی بر کامپوننت ارائه می‌دهد. Flux با ایجاد استورهای مرکزی و معرفی جریان داده یک‌طرفه، پیچیدگی‌های مدیریت state و جریان داده را کاهش می‌دهد.
Flux دارای سه عنصر اساسی برای ساخت فرانت‌اند اپلیکیشن است:
Flux یک مفهوم متفاوت برای مدیریت state برنامه و کنترل جریان داده ارائه می‌دهد که در رقابت با الگوهای مشابه MVC قرار می‌گیرد. با این‌که Flux یک لایه انتزاعی دیگر به منطق برنامه اضافه کرده و کد boilerplate را ایجاد می‌کند، اما به طور قابل‌توجهی پیچیدگی مدیریت state و جریان داده را در برنامه‌های مبتنی بر کامپوننت کاهش می‌دهد. در مجموع، معماری Flux برای اپلیکیشن‌های مبتنی بر کامپوننت که دارای state پیچیده و به‌روزرسانی‌های مداوم هستند، مناسب است.
توسعه‌دهندگان ممکن است از Flux (از طریق Redux یا کتابخانه‌های مشابه) برای توسعه یک فرانت‌اند مبتنی بر کامپوننت در یک اپلیکیشن چت زنده یا یک شبکه اجتماعی استفاده کنند.
دایرکتوری مثال‌ها در مخزن رسمی مستندات معماری Flux شامل چندین مثال از نحوه عملکرد این معماری است. از طرف دیگر، تیم Meta توصیه می‌کند که از کتابخانه‌های مشابه Redux استفاده شود که پیاده‌سازی ساده‌تری از معماری Flux ارائه می‌دهند. برای درک بهتر معماری Flux در قالب Redux API، می‌توانیم به سورس کد نمونه اپلیکیشن To-Do مراجعه کنیم.
الگوهای معماری فرانت‌اند که تاکنون بررسی کردیم، هرکدام رویکرد خاصی برای ساختاردهی کدبیس ارائه می‌دهند تا نیازهای توسعه‌دهندگان و اهداف سازمانی را برآورده کنند. این الگوها بر نحوه سازمان‌دهی و ساختار کد تأثیر می‌گذارند، اما ما را از ترکیب چندین معماری منع نمی‌کنند.
بیشتر توسعه‌دهندگان از الگوهای ترکیبی یا مختلط استفاده می‌کنند و به چندین معماری مختلف پایبند هستند. برخی از مثال‌ها عبارت‌اند از:
پیروی دقیق از یک معماری واحد ضروری نیست، بنابراین می‌توانیم بر اساس ترجیحات توسعه و اهداف سازمانی، از چندین معماری به صورت ترکیبی استفاده کنیم.
در این مقاله، الگوهای محبوب معماری فرانت‌اند را بررسی کردیم و به نکات کلیدی، مزایا، معایب، موارد استفاده و نمونه پروژه‌های هر یک پرداختیم.
معماری‌ای که انتخاب می‌کنیم، پایه و اساس کل سورس کد فرانت‌اند ما را شکل می‌دهد. بنابراین، باید معماری مناسبی را انتخاب کنیم تا از بازنویسی‌ها و تغییرات پرهزینه در آینده جلوگیری شود. هیچ قانون سخت‌گیرانه‌ای برای پایبندی به یک معماری خاص وجود ندارد؛ ما می‌توانیم از چندین معماری استفاده کنیم و ساختار کدبیس خود را مطابق با نیازهای تجاری و توسعه‌ای تنظیم نماییم.
معماری‌های یکپارچه، ماژولار، مبتنی بر کامپوننت، میکروفرانت‌اند و Flux از جمله الگوهای پرکاربردی هستند که اکثر تیم‌های توسعه نرم‌افزار از آن‌ها استفاده می‌کنند. با این حال، همیشه امکان نوآوری و ایجاد الگوی معماری جدید نیز وجود دارد، همان‌طور که توسعه‌دهندگان Meta معماری Flux را بر اساس نیازهای خود طراحی کردند.