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

مطالبی که توی فصل اول صحبت شده:
- چشم‌انداز فرانت‌اند
- اپلیکیشن‌های Micro-Frontend
- اپلیکیشن‌های SPA
- اپلیکیشن‌های isomorphic
- وب‌سایت‌های استاتیک
- معماری Jamstack

#Building_Micro_Frontends

@techstuff100

یکی از پلاگین‌های کاربردی Webpack بدون شک Module Federation هست که از نسخه ۵ به Webpack اضافه شده. این پلاگین امکان اشتراک‌گذاری و بارگذاری ماژول‌ها بین چند پروژه یا چند بخش از یک پروژه رو فراهم می‌کنه و یکی از مهم‌ترین کاربردهاش در معماری Micro Frontend هست.

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

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

@techstuff100

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

مطالبی که توی فصل دوم صحبت شده:
- مشکل اپلیکیشن‌های Monolith
- حرکت به سمت Microservices
- از Monolith تا Microservices
- معرفی Micro-Frontendها
- اصول Microservices و کاربردشون توی Micro-Frontends

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

@techstuff100

موس‌پوینتر لحظه‌ای در Canva؛ از WebSocket تا WebRTC

توی Canva برای پیاده‌سازی قابلیت نمایش لحظه‌ای موس کاربران روی وایت‌برد، چالش اصلی scalability و پایداری زیرساخت بود؛ چون همه کاربران باید موقعیت موس خودشون رو هم‌زمان ارسال کنن. توی فاز اول، با ترکیب WebSocket و Redis یه معماری backend-centric ساختن که از طریق PubSub و Streams داده‌ها رو بین سرورها جابجا می‌کرد.

اما برای کاهش latency و بار روی سرورها، تو فاز دوم رفتن سراغ WebRTC تا کلاینت‌ها مستقیما با هم ارتباط بگیرن. با استفاده از mesh topology، هر کلاینت به بقیه وصل می‌شه و موقعیت موس‌ها از طریق DataChannel رد و بدل می‌شه. در نهایت با یه لایه abstraction تونستن به‌صورت تدریجی از WebSocket به WebRTC مهاجرت کنن.

مقاله

پ.ن: آرزوی سلامتی و امنیت برای همه ❤️

@techstuff100

لرنا (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