قیمت این دوره: رایگانــ
  • مدرس دوره : علیرضا سرآبادانی تفرش
  • تعداد ویدیوها : 60 ویدیو
  • مدت زمان دوره : 4:3:00
  • سطح دوره : متوسط
  • وضعیت دوره : به اتمام رسیده
  • تاریخ آخرین بروزرسانی : 1402/01/14
معماری میکروفرانت اند ها در React

معماری میکروفرانت اند ها در React

میکروفرانت اند ها برای تفکیک کردن یک اپلیکیشن بزرگ به گروهی از اپ های کوچکتر استفاده می شوند. این عملیات دسته ای از فواید خاصی را برای هر فرانت اند کاری فراهم می کند:

1-    دسته کد های کوچک تر و با مفهوم تر

2-    برای هر اپلیکیشن از یه دسته خاصی کتابخانه استفاده کنید بدون دخالت دادن بقیه

به هر کدام از تیم های توسعه ی خود میتوانید دسترسی بدید تا به صورت جداگونه کار بکنند.

 

سرفصل دوره :

1-    میکروفرانت اند چیست
2- بررسی کلی برنامه
3- درک ادغام زمان بیلد
4- ادغام زمان اجرا
5- راه اندازی پروژه اول
6- تولید اپ محصولات
7- خروجی گرفتن از وب پک
8- افزودن برخی کانفیگ های وب پک
9- تکمیل اپ محصولات
10- افزودن container
11- راه اندازی module federation
12- شناخت module federation
13- موارد بیشتر از module federation
14- آشنایی با آپشن های پیکر بندی module federation
15- ایجاد سبد خرید
16- ادغام سبد خرید
17- استفاده از ماژول های مشترک
18- بارگذاری اسکریپت async
19-  مفاد اجرای اپ های فرزند
20- ریفکتور اپ محصولات
21- استفاده از ماژول های ریموت
22-   ریفکتور سبد خرید
23- بررسی کلی برنامه دوم
24- نیازمندی های پروژه دوم
25- نصب دپندنسی ها
26- تنظیمات اولیه وب پک
27- ایجاد کانفیگ های development
28- اجرای marketing به صورت مستقل قسمت اول
29- اجرای marketing به صورت مستقل قسمت دوم
30- افزودن صفحه اصلی و لیست پلن ها
31- اتمام اپ marketing
32- ایجاد container
33- ادغام marketing و container
34- علت استفاده از تابع mount
35- ادغام به صورت generic
36- یادآوری ماژول های اشتراکی
37- راه اندازی وب پک production
38- افزودن هدر
39-  مشکلات css در میکروفرانت اند ها
40- راه حل های css-scoping
41- نیازمندی های مربوط به حرکت در بین پروژه ها و صفحات
42- انواع آبجکت های history
43- استفاده از memory history
44- بررسی مسائل مربوط به مسیر یابی
45- رابطه بین برنامه ها
46- ارتباط از طریق callback ها
47- سینک کردن آبجکت های history
48- اجرای memory history به صورت مستقل
49- ارتباط container با پروژه های فرزند
50- استفاده از BrowserHistory در اجرای مستقل
51- ایجاد برنامه auth
52-  افزودن فرم های ورود و ثبت نام
53- ادغام auth در container
54- بررسی باگ موجود
55- برقراری ارتباطات احراز هویتی
56- افزودن استیت احراز هویت
57- خروج از حساب
58- ایجاد Dashboard
59- ادغام dashboard با container
60- مدیریت دسترسی به داشبورد


پیش نیاز های دوره :

  1. webpack
  2. react
  3. mui
  4. html css
  5. javascript

فهرستـــ ویدیوها

مدت زمان دوره 4:3:00

  • با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.

1

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

00:05:23

توضیح کلی درباره چیستی میکروفرانت اند ها

2

  • بررسی کلی برنامه

00:02:26

بررسی روی اولین پروژه ی تستی که قرار استارتشو بزنیم

3

  • درک ادغام زمان بیلد

00:03:24

درک مفهوم ادغام در هنگام بیلد

4

  • ادغام زمان اجرا

00:02:28

درک مفهوم ادغام در هنگام اجرا

5

  • راه اندازی پروژه اول

00:03:52

استارت زدن پروژه تمرینی اولمون

6

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

00:04:14

به وجود آوردن پروژه محصولات یا cart

7

  • خروجی گرفتن از وب پک

00:02:19

خروجی باندل شده از وب پک میگیریم

8

  • افزودن برخی کانفیگ های وب پک

00:05:04

افزودن یک سری کانفیگ برای وب پک

9

  • تکمیل اپ محصولات

00:01:41

به اتمام رساندن پروژه product

10

  • افزودن container

00:03:59

ایجاد پروژه container

11

  • راه اندازی module federation

00:07:58

راه اندازی پلاگین module webpack federation

12

  • شناخت module federation

00:03:30

بررسی و شناخت module webpack federation

13

  • موارد بیشتر از module federation

00:05:43

بررسی موارد بیشتر از module federation

14

  • آشنایی با آپشن های پیکربندی

00:04:28

شناخت آپشن های موجود برای پیکربندی وب پک

15

  • ایجاد سبد خرید

00:04:24

ایجاد کردن پروژه سبد خرید یا cart

16

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

00:02:30

ادغام پروژه سبد خرید با container

17

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

00:04:15

نحوه استفاده از ماژول های مشترک بین دو اپ

18

  • بارگزاری اسکریپت Async

00:02:23

بارگزاری اسکریپت به صورت Async

19

  • مفاد اجرای اپ های فرزند

00:02:42

قواعد و التزامات اجرا کردن پروژه های فرزند

20

  • ریفکتور محصولات

00:05:22

ریفکتور کردن پروژه products

21

  • استفاده از ماژول ریموت

00:02:15

استفاده از ماژول remote در webpack federation

22

  • ریفکتور سبد خرید

00:04:27

ریفکتور پروژه سبد خرید یا cart

23

  • بررسی کلی برنامه دوم

00:02:47

بررسی کلی برنامه تمرینی دوم که قرار با React بزنیم

24

  • نیازمندی های پروژه دوم

00:02:43

نیازمندی های پروژه دوم

25

  • نصب دپندنسی ها

00:01:43

نصب دپندنسی های لازم برای اپمون

26

  • تنظیمات اولیه وب پک

00:04:19

پیکربندی اولیه برای وب پکمون

27

  • ایجاد کانفیگ های development

00:03:34

نوشتن کانفیگ های مربوط به مد development

28

  • اجرای marketing به صورت مستقل قسمت اول

00:01:55

بالا آوردن پروژه marketing به صورت تنهایی بخش اول

29

  • اجرای marketing به صورت مستقل قسمت دوم

00:05:06

بالا آوردن پروژه marketing به صورت تنهایی بخش دوم

30

  • افزودن صفحه اصلی و لیست پلن ها

00:01:34

افزودن صفحه اصلی و لیست پلن ها به پروژه

31

  • اتمام اپ marketing

00:04:19

به پایان رساندن پروژه marketing

32

  • ایجاد container

00:05:23

ایجاد کردن پروژه container

33

  • ادغام marketing و container

00:04:11

ادغام marketing و container با هم

34

  • علت استفاده از تابع mount

00:03:28

علت استفاده از تابع mount در اپ

35

  • ادغام به صورت generic

00:04:56

ادغام به صورت کاملا generic

36

  • یادآوری ماژول های اشتراکی

00:05:12

یادآوری درباره ماژول های اشتراکی

37

  • راه اندازی وب پک production

00:11:24

پیکربندی وب پک اپ production

38

  • افزودن هدر

00:01:51

افزودن کامپوننت header

39

  • مشکلات css در میکروفرانت اند ها

00:02:28

بررسی مشکلات css در میکروفرانت اند ها

40

  • راه حل های css-scoping

00:07:30

راه حل هایی برای css-scoping

41

  • نیازمندی های مربوط به حرکت در بین پروژه ها و صفحات

00:03:30

الزامات لازم برای حرکت در بین پروژه ها و صفحات

42

  • انواع آبجکت های history

00:04:49

انواع آبجکت های history چیستند

43

  • استفاده از memory history

00:03:01

استفاده از memory history در اپ های فرزند

44

  • بررسی مسائل مربوط به مسیر یابی

00:04:48

بررسی مسائل مربوط به مسیر یابی یا روتینگ

45

  • رابطه بین برنامه ها

00:01:52

رابطه بین برنامه ها به چه صورت هست

46

  • ارتباط از طریق callback ها

00:03:45

ارتباط برقرار کردن از طریق callback ها

47

  • سینک کردن آبجکت های history

00:03:42

سینک کردن آبجکت های history با هم

48

  • اجرای memory history به صورت مستقل

00:03:15

اجرای memory history به صورت مستقل و تنهایی

49

  • ارتباط container با پروژه های فرزند

00:05:22

برقراری ارتباط بین container با پروژه های فرزند

50

  • استفاده از BrowserHistory در اجرای مستقل

00:02:49

استفاده از BrowserHistory در اجرای مستقل و تنهایی

51

  • ایجاد برنامه auth

00:04:18

به وجود آوردن اپ authentication

52

  • افزودن فرم های ورود و ثبت نام

00:05:06

افزودن کامپوننت های فرم ورود و ثبت نام

53

  • ادغام auth در container

00:05:16

ادغام پروژه auth با پروژه container

54

  • بررسی باگ موجود

00:05:44

بررسی باگ جلسه قبل

55

  • برقراری ارتباطات احراز هویتی

00:04:19

برقراری ارتباطات از نوع احراز هویت

56

  • افزودن استیت احراز هویت

00:06:24

افزودن استیت برای احراز هویت

57

  • ایجاد امکان خروج از حساب

00:03:23

ایجاد امکان برای خروج از حساب

58

  • ایجاد Dashboard

00:05:05

ایجاد پروژه Dashboard

59

  • ادغام dashboard با container

00:03:36

ادغام پروژه dashboard با پروژه container

60

  • مدیریت دسترسی به داشبورد

00:04:13

مدیریت دسترسی کاربر به داشبورد

اینستاگرام
تلگرام

نظرات کاربران در رابطه با این دوره

لطفا سوالات خود را راجع به این آموزش در این بخش پرسش و پاسخ مطرح کنید به سوالات در قسمت نظرات پاسخ داده نخواهد شد و آن نظر حذف میشود.
جهت ثبت نظر باید در سایت عضو شوید و یا وارد سایت شده باشید .