برای ساخت این پست از این مقاله و این ویدئو کمک گرفته شده.

@techstuff100

هدر Content-Disposition

یه فایل داریم و می‌خوایم اون رو از سرور بفرستیم به کلاینت. انتظار داریم وقتی کاربر روی لینک کلیک می‌کنه، فایل با اسم مشخصی دانلود بشه، نه اینکه باز بشه توی مرورگر یا با یه اسم دیگه ذخیره بشه. با هدر Content-Disposition می‌تونیم این رفتار رو تنظیم کنیم.

توی عکس اول، وقتی کاربر بره به /download، فایل با اسم report.pdf دانلود میشه.

مقادیری که می‌تونیم به این هدر بدیم:
یک. inline: فایل رو توی مرورگر نشون میده (پیش‌فرض).
دو. attachment: فایل رو دانلود می‌کنه.

همینطور توی فرم‌هایی که multipart/form-data دارن هم استفاده میشه. برای هر بخش (مثلا فایل)، یه هدر Content-Disposition فرستاده میشه (عکس دوم). این‌جا name اسم فیلد فرم و filename اسم فایلیه که آپلود میشه.

پ.ن: مثال اول مربوط به دانلود فایل از سروره، و مثال دوم مربوط به آپلود فایل از کلاینت توی فرمه. ربطی به هم ندارن ولی جفتشون از Content-Disposition استفاده می‌کنن.


@techstuff100

چند وقتیه کتاب Building Micro-Frontends رو شروع کردم. Luca Mezzalira به نکات خوبی توش اشاره می‌کنه. سعی می‌کنم خلاصه هر فصل رو قرار بدم.

@techstuff100

کتاب 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