لرنا (Lerna) یکی از ابزارهاییه که برای مدیریت پروژه‌های مونوریپو جاوااسکریپتی استفاده میشه.

توی این ویدیو درباره این صحبت کردم که Lerna چیه و چطوری می‌تونیم ازش توی یه پروژه مونوریپو جاوااسکریپتی استفاده کنیم. لرنا رو راه‌اندازی می‌کنیم، اسکریپت‌ها رو کش می‌کنیم، پکیج‌ها رو ورژن می‌زنیم و پابلیش‌شون می‌کنیم.

لینک ویدئو:
https://www.youtube.com/watch?v=LoFhDi5dbIg&list=PL1bBcWODwsLMYe8Gor4PDwT5U5CK_S36x&index=3

@techstuff100

کتاب Building Micro-Frontends فصل ۳

مطالبی که توی فصل سوم صحبت شده:
- معماری‌ها و چالش‌های Micro-Frontend
- چارچوب تصمیم‌گیری برای معماری Micro-Frontend
- مشخص کردن Micro-Frontend ها
- میکروفرانت‌اند‌ها و DDD
- ترکیب Micro-Frontend‌ها
- مسیریابی Micro-Frontend‌ها (routing)
- ارتباط بین مایکروفرانت‌اندها

پ.ن: خلاصه فصل‌‌های قبل رو با این هشتگ می‌تونین پیدا کنین:
#Building_Micro_Frontends

@techstuff100

آشنایی با SystemJS و importmap در جاوااسکریپت

توی این ویدیو درباره این صحبت کردم که SystemJS چیه و چطوری می‌تونه به ما کمک کنه که ماژول‌های جاوااسکریپتی رو توی مرورگر لود کنیم. با ایمپورت داینامیک شروع می‌کنیم، بعد می‌ریم سراغ importmap و پروژه رو با SystemJS تغییر می‌دیم. SystemJS اینجا به‌کار میاد چون حتی وقتی مرورگر از importmap پشتیبانی نکنه هم ماژول‌ها رو لود می‌کنه و با همه مرورگرهای مدرن سازگاره. تفاوت بین UMD و ESM رو بررسی می‌کنیم و در آخر babel رو به پروژه اضافه می‌کنیم.

ویدئو یوتوب:
https://www.youtube.com/watch?v=jPcTelWAO8Q&list=PL1bBcWODwsLMYe8Gor4PDwT5U5CK_S36x

@techstuff100

ویژگی sandbox در iframe

گاهی وقتا موقع نمایش یه صفحه‌ خارجی با iframe توی سایت خودمون، نمی‌خوایم اون صفحه هر کاری دلش خواست بکنه؛ مثلا اسکریپت اجرا کنه، فرم بفرسته یا به کوکی‌ها و localStorage دسترسی داشته باشه. با sandbox می‌تونیم روی iframe محدودیت بذاریم.

وقتی از sandbox استفاده می‌کنیم، مرورگر به‌صورت پیش‌فرض همه قابلیت‌های حساس صفحه داخل iframe رو غیرفعال می‌کنه. اما می‌تونیم با اضافه کردن چندتا مقدار خاص، اجازه بدیم فقط بعضی چیزا فعال باشن. توی این مثال، فقط اجازه اجرای اسکریپت‌ها و ارسال فرم داده شده. بقیه چیزا مثل باز کردن popup یا دسترسی به storage غیرفعال هستن.

@techstuff100

ساخت پروژه میکروفرانت‌اند با فریم‌ورک Single-Spa

توی این ویدیو درباره این صحبت کردم که فریم‌ورک single-spa چیه و چطوری به کمکش می‌تونیم یه پروژه فروشگاهی میکروفرانت‌اند از صفر بسازیم. با استفاده از create-single-spa کار رو شروع می‌کنیم، میکروفرانت‌اندهایی مثل auth، home، navbar، و products رو به همراه root config قدم‌به‌قدم پیاده‌سازی و به هم وصل می‌کنیم. در آخر هم import map overrides رو یاد می‌گیریم که چطوری می‌تونیم فقط یه بخش از پروژه رو لوکال اجرا کنیم و تو محیط واقعی تست کنیم.

ویدئو یوتوب:
https://www.youtube.com/watch?v=Pe69hfq1IPA&list=PL1bBcWODwsLMYe8Gor4PDwT5U5CK_S36x&index=1

@techstuff100

کتاب Building Micro-Frontends فصل ۴

مطالبی که توی فصل چهارم صحبت شده:
— اعمال چارچوب تصمیم‌گیری
— تحلیل معماری‌ها
— معماری Vertical-Split شامل:
-ا App Shell
- چالش‌ها
- پیاده‌سازی Design System
- تجربه توسعه‌دهنده (DX)
-ا SEO
- پرفورمنس
- فریم‌ورک‌ها
— معماری Horizontal-Split شامل:
- پیاده‌سازی Client Side
- چالش‌ها
-ا SEO
- تجربه توسعه‌دهنده (DX)
- پلاگین Module Federation
- تگ‌های Iframe
- وب کامپوننت‌ها
- پیاده‌سازی Server Side
- پیاده‌سازی Edge Side

این فصل بنظرم یکی از مهم‌ترین فصلای کتابه. موارد زیر رو برای درک بهتر این فصل پیشنهاد می‌کنم:
- پلاگین Module Federation (لینک)
- آشنایی با SystemJS (لینک)
- ویژگی sandbox در iframe (لینک)
- فریم‌ورک Single-Spa (لینک)

پ.ن: خلاصه فصل‌‌های قبل رو با این هشتگ می‌تونین پیدا کنین:
#Building_Micro_Frontends

@techstuff100

کتاب Building Micro-Frontends فصل ۵

مطالبی که توی فصل پنجم صحبت شده:
- توضیح پروژه
- پلاگین Module Federation
- پیاده‌سازی فنی
- تکامل پروژه

پ.ن ۱: سورس پروژه‌ای که توی کتاب گفته شده رو بررسی کردم و توی یوتوب گذاشتم:
https://www.youtube.com/watch?v=HdpFvw_B5R0&list=PL1bBcWODwsLMYe8Gor4PDwT5U5CK_S36x&index=5&pp=gAQBiAQB

پ.ن ۲: از Module Federation توی بخش بزرگی از این فصل استفاده میشه. برای آشنایی با این پلاگین webpack این ویدئو رو پیشنهاد می‌کنم:
https://www.youtube.com/watch?v=uvzu54M8ef8&list=PL1bBcWODwsLMYe8Gor4PDwT5U5CK_S36x&index=3

پ.ن ۳: خلاصه فصل‌‌های قبل رو با این هشتگ می‌تونین پیدا کنین:
#Building_Micro_Frontends

@techstuff100

توی این ویدیو، پروژه‌ای که توی فصل ۵ کتاب Building Micro-Frontends گفته شده رو بررسی کردم؛ می‌بینیم که چطور میکرو‌فرانت‌اندهای مختلف توی app shell با Module Federation لود و نمایش داده میشن.

ویدئو یوتوب:
‌https://www.youtube.com/watch?v=HdpFvw_B5R0&list=PL1bBcWODwsLMYe8Gor4PDwT5U5CK_S36x&index=5&pp=gAQBiAQB

@techstuff100

سری ۴ قسمتی Inside the Browser یه مرور فنی روی معماری مرورگر Chrome داره. از multi-process architecture و فرایند navigation گرفته تا renderer process و نقش compositor توی تعامل کاربر بررسی می‌شن. این مقاله به درک عمیق‌تر از پشت‌صحنه مرورگر کمک می‌کنه.

@techstuff100

توی این مقاله به این موضوع پرداخته شده که چرا Interaction to Next Paint (INP) یکی از دقیق‌ترین معیارهای Core Web Vitals برای سنجش responsiveness حساب می‌شه. INP طولانی‌ترین تأخیر بین تعامل کاربر (مثل کلیک، تاچ یا فشار دادن دکمه) تا لحظه‌ای که مرورگر اولین فریم واکنش رو رندر می‌کنه اندازه‌گیری می‌کنه. نکته مهم اینجاست که حتی اگه عملیات پشت صحنه طول بکشه، اون چیزی که کاربر می‌بینه و براش مهمه، سرعت اولین بازخورد بصریه. این متریک کمک می‌کنه تا مشکلات واقعی تجربه کاربر شناسایی و بهینه‌سازی بشن.

@techstuff100

کتاب Building Micro-Frontends فصل ۶

مطالبی که توی فصل ششم صحبت شده:
- اتومات‌سازی
- تجربه توسعه‌دهنده (DX)
- ورژن کنترل (Version Control)
- استراتژی‌های CI
- استراتژی‌های دیپلوی

توی این فصل به Lerna، ابزار مدیریت پروژه‌های Monorepo اشاره شده. از این ویدئو می‌تونین برای آشنایی بیشتر استفاده کنین.

پ.ن: خلاصه فصل‌‌های قبل رو با این هشتگ می‌تونین پیدا کنین:
#Building_Micro_Frontends

@techstuff100

کشینگ حرفه‌ای؛ PWA حالت آفلاین

توی این ویدیو یه پروژه PWA رو با Next.js پیاده‌سازی می‌کنیم و می‌بینیم چطور میشه با تکنیک‌های کشینگ سرعت لود صفحات رو بالا برد و اپلیکیشن رو توی حالت آفلاین هم قابل استفاده کرد. از مفاهیم اولیه Service Worker و Life Cycle شروع می‌کنیم، معماری App Shell رو بررسی می‌کنیم، assetهای استاتیک و APIها رو کش می‌کنیم و در نهایت Background Sync رو به پروژه اضافه می‌کنیم.

ویدئو یوتوب:
https://www.youtube.com/watch?v=p7CCPI8phWs&list=PL1bBcWODwsLMUPOu1Vz7orH2brAgKlWAU

@techstuff100

سابسکرایبرای کانال یوتیوب ۳ رقمی شد. شاید عدد کوچیکی باشه؛ ولی برای من کلی انگیزه‌ست ❤️

https://www.youtube.com/@SeyedTechStuff

@techstuff100

کتاب Building Micro-Frontends فصل ۷: Automation Pipeline برای میکرو‌فرانت‌اند‌ها

مطالبی که توی فصل هفتم صحبت شده:
- Version Control
- Pipeline Initialization
- Code-Quality Review
- Build
- Post-Build Review
- Deployment

توی این فصل به Lerna، ابزار مدیریت پروژه‌های Monorepo اشاره شده. از این ویدئو می‌تونین برای آشنایی بیشتر استفاده کنین.

پ.ن: خلاصه فصل‌‌های قبل رو با این هشتگ می‌تونین پیدا کنین:
#Building_Micro_Frontends

@techstuff100

کتاب Building Micro-Frontends فصل ۸: Backend Patterns برای میکرو‌فرانت‌اند

مطالبی که توی فصل هشتم صحبت شده:
- کار با Service Dictionary
- کار با API Gateway
- کار با BFF
- کار با GraphQL
- تعدادی از Best Practices

پ.ن: خلاصه فصل‌‌های قبل رو با این هشتگ می‌تونین پیدا کنین:
#Building_Micro_Frontends

@techstuff100

ویژگی Navigation Preload در Service Worker

وقتی کاربر به صفحه‌ای میره که از service worker استفاده میکنه، مرورگر باید اول این worker رو راه‌اندازی کنه. Navigation Preload به مرورگر میگه که همزمان با راه‌اندازی worker، شروع کن به دانلود کردن صفحه. توی این ویدئو Navigation Preload رو پیاده‌سازی و ریکوئست‌های preload رو توی مرورگر بررسی می‌کنیم.

ویدئوی یوتوب:
https://www.youtube.com/watch?v=6Z2uqN-vGA0&list=PL1bBcWODwsLMUPOu1Vz7orH2brAgKlWAU

@techstuff100