آموزش Microfrontends با React: راهنمای کامل توسعه دهندگان

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

مبانی Microfrontends The Basics of Microfrontends

• به انجمن ما بپیوندید! Join Our Community!

• منابع دوره Course Resources

• Microfrontend چیست؟ What is a Microfrontend?

• بررسی اجمالی برنامه Application Overview

• درک یکپارچه سازی زمان ساخت Understanding Build-Time Integration

• یکپارچه سازی زمان اجرا A Run-Time Integration

• Build-Time در مقابل ادغام زمان اجرا Build-Time vs Run-Time Integrations

• نسخه های مهم به روز رسانی/Boilerplate Important Versions Update / Boilerplate

• راه اندازی پروژه Project Setup

• تولید محصولات Generating Products

• برخی از پس زمینه در وب پک Some Background on Webpack

• لمس بیشتر در Webpack A Touch More on Webpack

• تکمیل لیست محصولات Finishing the Product List

• نسخه های مهم به روز رسانی برای Container Important Versions Update for Container

• داربست کانتینر Scaffolding the Container

مبانی فدراسیون ماژول The Basics of Module Federation

• فدراسیون ماژول پیاده سازی Implementing Module Federation

• درک فدراسیون ماژول Understanding Module Federation

• بیشتر در مورد فدراسیون ماژول More on Module Federation

• ماژول اصطلاحات فدراسیون Module Federation Terminology

• آشنایی با گزینه های پیکربندی Understanding Configuration Options

• داربست گاری Scaffolding the Cart

• ادغام سبد خرید Cart Integration

• فرآیند توسعه The Development Process

اشتراک گذاری وابستگی ها بین برنامه ها Sharing Dependencies Between Apps

• استفاده از ماژول های مشترک Using Shared Modules

• در حال بارگیری اسکریپت ناهمگام Async Script Loading

• نسخه ماژول مشترک Shared Module Versioning

• Singleton در حال بارگذاری Singleton Loading

• زمینه اجرای برنامه فرعی Sub-App Execution Context

• فرآورده های بازسازی Refactoring Products

• مصرف ماژول های از راه دور Consuming Remote Modules

• سبد بازسازي Refactoring Cart

• [اختیاری] یک گوچای خنده دار [Optional] A Funny Gotcha

پیوند دادن چندین برنامه با هم Linking Multiple Apps Together

• بررسی اجمالی برنامه Application Overview

• پشته فناوری Tech Stack

• الزاماتی که انتخاب های معماری را هدایت می کند Requirements That Drive Architecture Choices

• فایل های وابستگی Dependency Files

• نصب وابستگی Dependency Installation

• پیکربندی اولیه Webpack Initial Webpack Config

• ایجاد و ادغام پیکربندی توسعه Creating and Merging Development Config

• اجرای بازاریابی به صورت مجزا Running Marketing in Isolation

• سیم کشی واکنش Wiring Up React

• اجزای بازاریابی Marketing Components

• افزودن صفحات قیمت و فرود Adding the Pricing and Landing Pages

پیوندهای عمومی بین پروژه ها Generic Ties Between Projects

• مونتاژ کامپوننت برنامه Assembling the App Component

• مونتاژ کانتینر Assembling the Container

• ادغام کانتینر و بازاریابی Integration of the Container and Marketing

• چرا تابع Mount را وارد کنیم؟ Why Import the Mount Function?

• ادغام عمومی Generic Integration

• یادآوری در ماژول های مشترک Reminder on Shared Modules

• واگذاری انتخاب ماژول مشترک Delegating Shared Module Selection

اجرای خط لوله CI/CD Implementing a CI/CD Pipeline

• الزامات پیرامون استقرار Requirements Around Deployment

• مسیر تولید The Path to Production

• راه اندازی اولیه Git Initial Git Setup

• پیکربندی Webpack تولیدی برای کانتینر Production Webpack Config for Container

• پیکربندی Webpack تولیدی برای بازاریابی Production Webpack Config for Marketing

• آشنایی با خطوط لوله CI:CD Understanding CI:CD Pipelines

• تغییر مورد نیاز در اکشن کانتینر - رد نشوید Required Change in the Container Action - Do not Skip

• ایجاد اکشن Container Creating the Container Action

• آزمایش خط لوله Testing the Pipeline

استقرار در خدمات وب آمازون Deployment to Amazon Web Services

• راه اندازی سطل S3 S3 Bucket Setup

• نوشتن یک خط مشی سطل Authoring a Bucket Policy

• تغییرات جزئی در رابط کاربری AWS CloudFront Minor Changes in AWS CloudFront UI

• راه اندازی Cloudfront Distribution Cloudfront Distribution Setup

• کمی بیشتر پیکربندی Cloudfront A Bit More Cloudfront Configuration

• به‌روزرسانی ایجاد کلید + یادآوری در AWS_DEFAULT_REGION Key Creation Update + Reminder on AWS_DEFAULT_REGION

• ایجاد و اختصاص کلیدهای دسترسی Creating and Assigning Access Keys

• اجرای مجدد بیلد Rerunning the Build

• یک خطای کوچک A Small Error

• تنظیمات Webpacks PublicPath Webpacks PublicPath Setting

پیکربندی AWS خاص Microfrontend Microfrontend-Specific AWS Config

• عدم اعتبار کش دستی Manual Cache Invalidations

• منطقه AWS با عدم اعتبار خودکار AWS Region with Automatic Invalidation

• بی اعتباری خودکار Automated Invalidation

• باطل شدن موفقیت آمیز Successful Invalidation

• راه اندازی استقرار بازاریابی Setting Up the Marketing Deployment

• یادآوری در دامنه تولید Reminder on the Production Domain

• اجرای Deployment Running the Deployment

• تأیید استقرار Verifying Deployment

• [اختیاری] گردش کار به سبک تولید [Optional] A Production-Style Workflow

• صفحه چیت راه اندازی و پیکربندی AWS AWS Setup and Configuration Cheetsheet

مدیریت CSS در Microfrontends Handling CSS in Microfrontends

• کامپوننت هدر Header Component

• اضافه کردن هدر Adding a Header

• مشکلات CSS در Microfrontends Issues with CSS in Microfrontends

• تکنیک های محدوده CSS CSS Scoping Techniques

• درک CSS در کتابخانه های JS Understanding CSS in JS Libraries

• پس اشکال چیست؟ So Whats the Bug?

• رفع برخورد نام کلاس Fixing Class Name Collisions

• بررسی رفع مشکل Verifying the Fix

پیاده سازی مسیریابی چند لایه Implementing Multi-Tier Navigation

• تغییر کوچک مورد نیاز در historyApiFallback Small Required Change to historyApiFallback

• الزامات انعطاف ناپذیر در مورد ناوبری Inflexible Requirements Around Navigation

• چند راه حل A Few Solutions

• اجرای کدام تاریخ؟ Which History Implementation?

• بررسی تنظیمات تاریخچه کنونی ما Surveying Our Current History Setup

• استفاده از تاریخچه حافظه Using Memory History

• چرا نتایج عجیب و غریب؟ Why the Strange Results?

• ارتباط بین برنامه ها Communication Between Apps

• برقراری ارتباط از طریق تماس های تلفنی Communicating Through Callbacks

• همگام سازی اشیاء تاریخ Syncing History Objects

• در حال اجرا تاریخچه حافظه در انزوا Running Memory History in Isolation

• ظرفی برای ارتباط با کودک Container to Child Communication

• استفاده از تاریخچه مرورگر به صورت مجزا Using Browser History in Isolation

ملاحظات عملکرد Performance Considerations

• شروع پروژه Auth Starting the Auth Project

• فایل های کامپوننت Component Files

• افزودن فرم های ثبت نام و ثبت نام Adding Signin and Signup Forms

• شیرجه عمیق تر در PublicPath A Deeper Dive on PublicPath

• آخرین زمان برای PublicPath Last Time for PublicPath

• ادغام Auth در Container Integrating Auth into the Container

• افزودن حالت اولیه به تاریخچه حافظه Adding Initial State to Memory History

• بارگیری برنامه های فرعی با تنبلی Lazily Loading SubApps

• اضافه کردن یک نوار بارگیری Adding a Loading Bar

احراز هویت در Microfrontends Authentication in Microfrontends

• نکات مهم در احراز هویت Important Notes on Authentication

• استراتژی های پیاده سازی Implementation Strategies

• ارتباط با تغییرات احراز هویت Communicating Auth Changes

• برقراری ارتباط با وضعیت احراز هویت Communicating Authentication State

• اجازه خروج از سیستم Allowing Signout

• افزودن یک Auth Deploy Config Adding an Auth Deploy Config

• تأیید استقرار Verifying Deployment

استفاده از سایر فریم ورک های فرانت اند Using Other Frontend Frameworks

• راه اندازی اولیه داشبورد Initial Dashboard Setup

• تنظیمات بیشتر را لمس کنید A Touch More Config

• فایل های کامپوننت Component Files

• نمایش داشبورد Showing the Dashboard

• ادغام با کانتینر Integration with the Container

• حفاظت از دسترسی به داشبورد Protecting Access to the Dashboard

• استقرار داشبورد Deploying the Dashboard

• تأیید استقرار Verifying Deployment

• بسته شدن Wrapup

جایزه! Bonus!

• جایزه! Bonus!