آموزش معماری میکرونی فرانت-اند (Micro Front-End) با React - آخرین آپدیت

سرفصل ها و درس ها

مقدمه Introduction

• استفاده از GitHub Codespaces Using GitHub Codespaces

• پیش‌نیازهای مورد نیاز What you should know

• شکستن معماری یکپارچه (Monolithic) با میکرونی فرانت-اندها Breaking monolithic architecture with micro frontends

1. مفاهیم بنیادی معماری میکرونی فرانت-اند 1. Core Concepts of Micro-Frontend Architecture

• ارتباط بین لایه‌های میکرونی فرانت-اند Communication between micro-frontend layers

• مروری کلی بر میکرونی فرانت-اندها Overview of micro frontends

• یکپارچه‌سازی در سمت سرور (SSI) و سمت کلاینت Server Side Includes (SSI)/Client-side integration

• مقایسه معماری میکرونی فرانت-اند با معماری یکپارچه Comparing micro frontend with monolithic architecture

• معماری دامنه-محور (Domain Driven) Domain-driven architecture

• معماری ویژگی-محور (Feature Based) Feature-based architecture

2. الگوهای معماری برای میکرونی فرانت-اندها 2. Architectural Patterns for Micro Frontends

• پیکربندی Webpack برای اپلیکیشن‌های میکرونی فرانت-اند Configuring Webpack for micro-frontend applications

• مروری بر فریم‌ورک‌های میکرونی فرانت-اند Overview of micro-frontend frameworks

• مسیریابی (Routing) در اپلیکیشن میکرونی فرانت-اند Routing in a micro-frontend application

• فدراسیون ماژول‌ها (Module Federation) Module federation

• مروری بر Webpack Webpack overview

3. مدیریت یک اپلیکیشن میکرونی فرانت-اند 3. Managing a Micro-Frontend Application

• مدیریت استیت‌های مشترک و کتابخانه‌ها Managing shared state and library

• راه‌اندازی پروژه و ساختار تیم Project setup and team structure

• ارتباطات بین تیمی Communication among teams

• راه‌اندازی اپلیکیشن مستقل برای هر تیم Independent team app setup

• سیستم طراحی (Design System) Design system

4. بهینه‌سازی عملکرد (Performance) 4. Performance

• تست اپلیکیشن میکرونی فرانت-اند Testing a micro-frontend application

• مکانیسم‌های Lazy loading و کشینگ (Caching) Lazy loading and caching mechanism

5. پروژه عملی: اپلیکیشن کتاب‌فروشی 5. Hands-On Project: Bookstore App

• توسعه بخش سبد خرید (Cart Team) Cart team development

• راه‌اندازی محیط و مخزن کد (Repository) Repository and environment setup

• تعیین محدوده پروژه و ساختار تیم Project scope and team setup

• توسعه بخش تسویه حساب (Checkout Team) Checkout team development

• توسعه بخش لیست کتاب‌ها (Book Listing Team) Book-listing team development

• اتصال و استقرار (Deploy) اپلیکیشن کامل Coupling and deploying the complete app

• نهایی‌سازی مسیریابی اپلیکیشن Finalizing the app routing

جمع‌بندی Conclusion

• گام‌های بعدی Next steps