سؤالات مصاحبه الگوهای طراحی سطح سینیور (50 سؤال)

Question 1

Dependency Injection در فرانت عمدتاً چه می‌دهد؟

Accepted Answer

تست‌پذیری و تعویض پیاده‌سازی (mock/real)

Answer

حذف کامل TypeScript

Answer

افزایش اجباری coupling

Answer

فقط انیمیشن

Question 2

Feature-Sliced Design روی چه تمرکز دارد؟

Accepted Answer

سازمان‌دهی حول featureها و لایه‌ها با قانون وابستگی

Answer

یک پوشهٔ تخت برای همه چیز

Answer

حذف کامپوننت‌ها

Answer

فقط بک‌اند

Question 3

جدا کردن read/write model در UI یعنی چه؟

Accepted Answer

فرم ویرایش و نمایش لیست می‌توانند shape/cache جدا داشته باشند

Answer

یک مدل اجباری برای همه کارها

Answer

حذف فرم‌ها

Answer

فقط مربوط به رنگ تم است

Question 4

کامپوننت headless (مثل Radix یا TanStack Table) چیست؟

Accepted Answer

منطق، state و a11y را بدون استایل یا markup ثابت فراهم می‌کند

Answer

کامپوننتی که فقط روی سرور رندر می‌شود

Answer

کامپوننت بدون props

Answer

کامپوننتی که فقط `<head>` را تغییر می‌دهد

Question 5

الگوی Command برای پیاده‌سازی چه قابلیتی عالی است؟

Accepted Answer

Undo/Redo و صف عملیات

Answer

استایل‌دهی responsive

Answer

مسیریابی

Answer

فشرده‌سازی تصویر

Question 6

Open/Closed Principle چه می‌گوید؟

Accepted Answer

برای توسعه باز و برای تغییر بسته: رفتار جدید بدون تغییر کد موجود

Answer

کد باید open-source باشد

Answer

فایل‌ها نباید بسته شوند

Answer

هیچ کلاسی نباید ارث‌بری کند

Question 7

Inversion of Control در طراحی کامپوننت یعنی چه؟

Accepted Answer

کنترل رندر یا رفتار به مصرف‌کننده داده می‌شود (slots، render props، state reducer)

Answer

کامپوننت همه تصمیم‌ها را داخلی می‌گیرد

Answer

معکوس کردن ترتیب رندر

Answer

حذف props

Question 8

Anti-Corruption Layer در فرانت چه نقشی دارد؟

Accepted Answer

جدا کردن مدل داخلی اپ از مدل‌ها و ناهماهنگی‌های API خارجی

Answer

آنتی‌ویروس مرورگر

Answer

فشرده‌سازی bundle

Answer

لایه CSS reset

Question 9

مزیت معماری plugin (مثل Vite یا ESLint) چیست؟

Accepted Answer

هسته کوچک می‌ماند و قابلیت‌ها از طریق hookهای مشخص اضافه می‌شوند

Answer

همه قابلیت‌ها در هسته hard-code می‌شوند

Answer

نیازی به API ندارد

Answer

فقط برای بک‌اند است

Question 10

اعمال معماری Hexagonal (Ports & Adapters) در یک اپ frontend پیچیده چه شکلی دارد؟

Accepted Answer

منطق دامنه interfaceهایی (port) تعریف می‌کند و HTTP، storage و UI به‌عنوان adapter آن‌ها را پیاده یا مصرف می‌کنند

Answer

همه کامپوننت‌ها به شکل شش‌ضلعی چیده می‌شوند

Answer

هر کامپوننت مستقیماً به شش سرویس backend وصل می‌شود

Answer

منطق دامنه داخل کامپوننت‌های UI قرار می‌گیرد تا لایه‌ها کم شوند

Question 11

Dependency Rule در Clean Architecture چه می‌گوید؟

Accepted Answer

وابستگی‌های کد فقط به سمت داخل (به سمت entities و use caseها) اشاره می‌کنند

Answer

لایه‌های داخلی باید فریم‌ورک UI را import کنند

Answer

هر لایه فقط به لایه بیرونی خود وابسته است

Answer

وابستگی‌ها باید در runtime و با reflection حل شوند

Question 12

قوی‌ترین دلیل برای انتخاب micro-frontends چیست؟

Accepted Answer

چند تیم مستقل که باید بخش‌های خود را جداگانه و با چرخه انتشار مستقل deploy کنند

Answer

کاهش حجم bundle در یک اپ کوچک با یک تیم

Answer

چون micro-frontends همیشه performance بهتری دارند

Answer

برای اینکه نیاز به design system از بین برود

Question 13

در Module Federation، چرا React معمولاً با `singleton: true` به‌عنوان shared dependency تنظیم می‌شود؟

Accepted Answer

وجود دو نسخه React باعث شکستن hookها و Context بین remoteها می‌شود

Answer

چون React بدون آن قابل import نیست

Answer

برای اینکه هر remote نسخه React مخصوص خودش را داشته باشد

Answer

چون singleton باعث SSR خودکار می‌شود

Question 14

در یک monorepo بزرگ، مؤثرترین راه برای جلوگیری از import شدن کد داخلی یک feature توسط feature دیگر چیست؟

Accepted Answer

تعریف public API (entry point) برای هر ماژول و اعمال مرزها با lint rule یا tagهای Nx در CI

Answer

نوشتن یک صفحه wiki و امید به رعایت آن

Answer

قرار دادن همه کد در یک پوشه `shared`

Answer

ممنوع کردن کامل import بین پکیج‌ها

Question 15

الگوی Backend for Frontend (BFF) چه زمانی ارزشمند است؟

Accepted Answer

وقتی کلاینت‌های مختلف (وب، موبایل) نیازهای داده متفاوت دارند و باید چند سرویس را aggregate کرد

Answer

وقتی فقط یک API ساده و یک کلاینت وجود دارد

Answer

برای حذف کامل احراز هویت

Answer

برای اجرای CSS در سرور

Question 16

برای مهاجرت یک اپ بزرگ AngularJS به React بدون توقف توسعه، کدام الگو مناسب است؟

Accepted Answer

Strangler Fig: جایگزینی تدریجی route به route یا بخش به بخش تا حذف کامل سیستم قدیمی

Answer

بازنویسی کامل در یک branch جدا و merge یکجا پس از یک سال

Answer

متوقف کردن همه قابلیت‌های جدید تا پایان مهاجرت

Answer

اجرای هر دو فریم‌ورک برای همیشه بدون برنامه حذف

Question 17

برای undo/redo در یک ویرایشگر گرافیکی با state بسیار بزرگ، چرا ذخیره snapshot کامل در هر تغییر مشکل‌ساز است و جایگزین چیست؟

Accepted Answer

مصرف حافظه بالا؛ ذخیره patchها/عملیات معکوس (مثل Immer patches) یا structural sharing

Answer

snapshotها در JavaScript ممکن نیستند؛ باید از سرور خواند

Answer

undo همیشه باید با reload صفحه انجام شود

Answer

مشکلی نیست؛ snapshot کامل همیشه بهترین راه است

Question 18

الگوی Functional Core, Imperative Shell چه مزیتی برای منطق پیچیده frontend دارد؟

Accepted Answer

تصمیم‌گیری‌ها در توابع pure قابل تست انجام می‌شود و side effectها (fetch، DOM، storage) در لایه نازک بیرونی

Answer

همه کد باید داخل `useEffect` نوشته شود

Answer

فقط از class استفاده می‌شود و تابع ممنوع است

Answer

side effectها در هسته و منطق pure در لایه بیرونی قرار می‌گیرند

Question 19

یک کامپوننت مشترک با گذشت زمان ۱۵ prop boolean برای حالت‌های خاص هر صفحه پیدا کرده است. توصیه Sandi Metz درباره «wrong abstraction» چیست؟

Accepted Answer

abstraction را inline کنید، کد را در محل‌های استفاده تکثیر کنید و سپس abstraction درست را دوباره کشف کنید

Answer

پارامترهای بیشتری اضافه کنید تا همه حالت‌ها پوشش داده شوند

Answer

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

Answer

همه propها را در یک object به نام `config` ادغام کنید

Question 20

مشکل fragile base class که یکی از دلایل ترجیح composition بر inheritance است، چیست؟

Accepted Answer

تغییرات به‌ظاهر بی‌خطر در کلاس پایه، زیرکلاس‌هایی را که به جزئیات پیاده‌سازی آن وابسته‌اند می‌شکند

Answer

کلاس پایه در runtime به‌طور تصادفی حذف می‌شود

Answer

کلاس پایه نمی‌تواند متد داشته باشد

Answer

زیرکلاس‌ها نمی‌توانند constructor داشته باشند

Question 21

یک SDK نیاز دارد `init()` قبل از `track()` صدا زده شود و در غیر این صورت بی‌صدا خراب می‌شود. این چه مشکلی است و راه‌حل بهتر چیست؟

Accepted Answer

Temporal coupling؛ factoryای مثل `createTracker(config)` که فقط شیء آماده برمی‌گرداند ترتیب را اجباری می‌کند

Answer

Feature envy؛ متدها را به کلاس دیگری منتقل کنید

Answer

مشکلی نیست؛ کافی است در README مستند شود

Answer

Dead code؛ `init()` را حذف کنید

Question 22

چرا جدا کردن server state (با React Query/SWR) از client state یک تصمیم معماری مهم است؟

Accepted Answer

server state مسائلی مثل cache، invalidation، dedupe و stale بودن دارد که store عمومی برای آن طراحی نشده است

Answer

چون Redux نمی‌تواند داده API را نگه دارد

Answer

چون client state همیشه باید در URL باشد

Answer

چون React Query جایگزین همه انواع state می‌شود

Question 23

اصل colocation در یک کدبیس بزرگ React چه توصیه‌ای دارد؟

Accepted Answer

کد (state، استایل، تست، query) را تا حد ممکن نزدیک جایی که استفاده می‌شود نگه دارید و فقط در صورت نیاز بالا ببرید

Answer

همه state را از ابتدا در store سراسری قرار دهید

Answer

همه تست‌ها را در یک پوشه ریشه جدا نگه دارید

Answer

همه hookها را در یک فایل `hooks.ts` بزرگ قرار دهید

Question 24

در طراحی API یک کامپوننت `DataTable` برای design system، چه زمانی composition (اجزای فرزند) بر configuration (یک prop بزرگ `columns`) ترجیح دارد؟

Accepted Answer

وقتی مصرف‌کنندگان نیاز به سفارشی‌سازی متنوع رندر دارند و نمی‌توان همه حالت‌ها را از قبل پیش‌بینی کرد

Answer

همیشه؛ configuration هرگز مناسب نیست

Answer

وقتی جدول فقط داده ساده و یکنواخت نمایش می‌دهد و باید serializable باشد

Answer

وقتی هدف کمترین تعداد خط کد برای مصرف‌کننده در هر حالتی است

Question 25

در یک design system که ده‌ها تیم از آن استفاده می‌کنند، بهترین روش برای تغییر نام یک prop چیست؟

Accepted Answer

پشتیبانی از هر دو نام با هشدار deprecation، ارائه codemod و حذف در major بعدی طبق semver

Answer

تغییر نام در یک patch release بدون اطلاع‌رسانی

Answer

نگه‌داشتن نام قدیمی برای همیشه و هرگز تغییر ندادن

Answer

fork کردن کتابخانه برای هر تیم

Question 26

Testing Trophy (Kent C. Dodds) چه تفاوتی در تأکید نسبت به test pyramid کلاسیک دارد؟

Accepted Answer

بیشترین سرمایه‌گذاری روی integration testها، با پایه static analysis (TypeScript، ESLint)

Answer

فقط E2E test و حذف کامل unit test

Answer

تأکید بر snapshot testها به‌عنوان بخش اصلی

Answer

حذف static analysis چون تست‌ها کافی هستند

Question 27

Contract testing (مثل Pact) بین frontend و backend چه مشکلی را حل می‌کند که mockهای MSW حل نمی‌کنند؟

Accepted Answer

تضمین اینکه mockهای frontend با رفتار واقعی API سازگار بمانند؛ backend در CI در برابر قرارداد verify می‌شود

Answer

جایگزین کامل unit testهای frontend می‌شود

Answer

تست‌های visual regression را اجرا می‌کند

Answer

سرعت شبکه production را اندازه‌گیری می‌کند

Question 28

رایج‌ترین ریشه flaky بودن تست‌های UI چیست؟

Accepted Answer

وابستگی به زمان‌بندی (sleepهای ثابت، انیمیشن، race در async) و state مشترک بین تست‌ها

Answer

استفاده از TypeScript

Answer

تعداد زیاد assertion در هر تست

Answer

نام‌گذاری طولانی تست‌ها

Question 29

تیمی می‌گوید «هر refactor صدها تست را می‌شکند، در حالی که رفتار تغییری نکرده». ریشه احتمالی چیست؟

Accepted Answer

تست‌ها جزئیات پیاده‌سازی (state داخلی، نام متدها، ساختار کامپوننت) را بررسی می‌کنند نه رفتار قابل مشاهده

Answer

تعداد تست‌ها بیش از حد کم است

Answer

تست‌ها با TypeScript نوشته شده‌اند

Answer

CI بیش از حد سریع اجرا می‌شود

Question 30

چه زمانی استفاده از statechart (مثلاً XState) نسبت به `useReducer` ساده توجیه دارد؟

Accepted Answer

وقتی جریان دارای حالت‌های تودرتو، موازی، timeout و transitionهای محافظت‌شده زیادی است

Answer

برای هر فرم با یک فیلد

Answer

وقتی فقط یک toggle ساده boolean وجود دارد

Answer

چون XState همیشه سریع‌تر از React است

Question 31

مزیت اصلی مدل reactivity مبتنی بر signals (Solid، Preact Signals، Angular) نسبت به re-render کامپوننت در React چیست؟

Accepted Answer

به‌روزرسانی fine-grained؛ فقط وابستگان یک signal به‌روز می‌شوند، نه کل زیردرخت کامپوننت

Answer

حذف کامل نیاز به JavaScript در مرورگر

Answer

عدم نیاز به مدیریت state

Answer

تضمین عدم وجود باگ در کد

Question 32

معماری Islands (مثل Astro) برای چه نوع سایتی مناسب‌تر است؟

Accepted Answer

سایت‌های عمدتاً محتوایی با چند بخش تعاملی جدا که فقط آن بخش‌ها hydrate می‌شوند

Answer

اپ‌های بسیار تعاملی مثل ویرایشگر طراحی با state مشترک گسترده

Answer

اپ‌هایی که هیچ HTML سمت سرور ندارند

Answer

فقط برنامه‌های دسکتاپ Electron

Question 33

در یک جستجوی typeahead، پاسخ درخواست قدیمی دیرتر از درخواست جدید می‌رسد و نتایج اشتباه نمایش داده می‌شود. راه‌حل مناسب چیست؟

Accepted Answer

الگوی latest-wins: لغو درخواست قبلی با `AbortController` یا نادیده گرفتن پاسخ‌های کهنه

Answer

افزایش debounce به ۵ ثانیه

Answer

ارسال همه درخواست‌ها به‌صورت synchronous

Answer

مرتب کردن نتایج بر اساس حروف الفبا

Question 34

الگوی Circuit Breaker در یک کلاینت frontend که یک سرویس ناپایدار را صدا می‌زند چه فایده‌ای دارد؟

Accepted Answer

پس از چند شکست متوالی، درخواست‌ها را برای مدتی فوراً fail می‌کند تا سرویس بار اضافه نگیرد و UI fallback نشان دهد

Answer

درخواست‌ها را بی‌نهایت retry می‌کند تا موفق شوند

Answer

برق سرور را قطع می‌کند

Answer

همه خطاها را از کاربر پنهان می‌کند و داده خالی برمی‌گرداند

Question 35

در یک اپ offline-first، طراحی صف mutationها (outbox) برای همگام‌سازی بعدی چه نیازمندی کلیدی دارد؟

Accepted Answer

mutationها idempotent باشند (مثلاً با client-generated ID) و استراتژی حل تعارض مشخص باشد

Answer

صف فقط در حافظه RAM نگهداری شود

Answer

mutationها به ترتیب تصادفی ارسال شوند

Answer

همه تعارض‌ها همیشه با حذف داده کاربر حل شوند

Question 36

برای ویرایش هم‌زمان چندکاربره با پشتیبانی offline و peer-to-peer، چرا CRDT (مثل Yjs) اغلب بر OT ترجیح داده می‌شود؟

Accepted Answer

CRDT بدون سرور مرکزی هماهنگ‌کننده، به همگرایی تضمین‌شده می‌رسد

Answer

CRDT هیچ سرباری در حافظه ندارد

Answer

OT فقط برای اعداد کار می‌کند

Answer

CRDT نیازی به شبکه ندارد چون داده را به اشتراک نمی‌گذارد

Question 37

استفاده از یک DI container کامل (مثل InversifyJS) در یک اپ React معمولی چه trade-offی دارد؟

Accepted Answer

انعطاف تعویض پیاده‌سازی در برابر پیچیدگی، decoratorها و وابستگی‌های پنهان؛ اغلب ES modules و Context کافی‌اند

Answer

هیچ هزینه‌ای ندارد و همیشه باید استفاده شود

Answer

React بدون DI container اجرا نمی‌شود

Answer

DI container باعث حذف کامل نیاز به تست می‌شود

Question 38

در SSR (مثلاً Next.js)، چرا یک store ماژول-سطح (singleton) که داده کاربر را نگه می‌دارد خطرناک است؟

Accepted Answer

ماژول بین درخواست‌های کاربران مختلف در سرور مشترک است و داده یک کاربر به کاربر دیگر نشت می‌کند

Answer

چون singleton در Node.js پشتیبانی نمی‌شود

Answer

چون باعث می‌شود صفحه رندر نشود

Answer

چون حجم bundle را دو برابر می‌کند

Question 39

چرا یک event bus سراسری که همه بخش‌های اپ از طریق آن با هم صحبت می‌کنند در درازمدت مشکل‌ساز می‌شود؟

Accepted Answer

جریان داده ضمنی و غیرقابل ردیابی می‌شود؛ معلوم نیست چه کسی منتشر یا گوش می‌کند و ترتیب مبهم است

Answer

چون eventها در JavaScript کند هستند

Answer

چون مرورگرها بیش از ۱۰ event را پشتیبانی نمی‌کنند

Answer

چون TypeScript نمی‌تواند event تعریف کند

Question 40

چرا Context برای تزریق وابستگی‌های پایدار (API client، logger) عالی است اما برای state پرتغییر (مثل موقعیت ماوس) ضعیف است؟

Accepted Answer

هر تغییر value همه مصرف‌کنندگان را re-render می‌کند و Context مکانیزم selector داخلی ندارد

Answer

چون Context فقط رشته نگه می‌دارد

Answer

چون Context در هر render پاک می‌شود

Answer

چون Context فقط در class component کار می‌کند

Question 41

در یک اپ frontend با قوانین کسب‌وکار پیچیده (مثلاً قیمت‌گذاری)، قرار دادن این قوانین مستقیماً در کامپوننت‌ها و handlerها چه مشکلی ایجاد می‌کند؟

Accepted Answer

قوانین پراکنده و تکراری می‌شوند و تست آن‌ها بدون رندر UI سخت است؛ بهتر است در ماژول‌های دامنه pure متمرکز شوند

Answer

هیچ مشکلی ندارد چون کامپوننت‌ها جای اصلی منطق هستند

Answer

کامپوننت‌ها نمی‌توانند عملیات ریاضی انجام دهند

Answer

این کار حجم bundle را صفر می‌کند

Question 42

مفهوم Bounded Context از DDD در تقسیم‌بندی یک frontend بزرگ چه کمکی می‌کند؟

Accepted Answer

هر ماژول مدل و زبان مخصوص خود را دارد؛ مثلاً `Product` در کاتالوگ و انبار می‌تواند مدل متفاوتی داشته باشد

Answer

یک مدل `Product` واحد و جامع باید در کل اپ استفاده شود

Answer

همه ماژول‌ها باید یک دیتابیس مشترک در مرورگر داشته باشند

Answer

فقط برای backend معنا دارد و در frontend کاربردی ندارد

Question 43

Architecture Decision Record (ADR) چیست و چرا ارزشمند است؟

Accepted Answer

سند کوتاهی از یک تصمیم معماری با context، گزینه‌ها و پیامدها؛ دلیل تصمیم را برای آینده حفظ می‌کند

Answer

فایل پیکربندی webpack

Answer

یک ابزار خودکار تولید نمودار کلاس

Answer

لیست باگ‌های باز پروژه

Question 44

قانون Conway در معماری frontend چه پیامدی دارد؟

Accepted Answer

ساختار سیستم ساختار ارتباطی سازمان را منعکس می‌کند؛ مرزهای ماژول باید با مرزهای تیم هم‌راستا باشند

Answer

هر سال تعداد ترانزیستورها دو برابر می‌شود

Answer

کد همیشه بیشتر از زمان تخمینی طول می‌کشد

Answer

کامپوننت‌ها باید حداکثر ۱۰۰ خط باشند

Question 45

در کدبیسی با صدها feature flag، بزرگ‌ترین ریسک بلندمدت چیست و چگونه مدیریت می‌شود؟

Accepted Answer

انفجار ترکیبی مسیرهای کد و flagهای مرده؛ با مالک، تاریخ انقضا و پاک‌سازی منظم مدیریت می‌شود

Answer

flagها باعث می‌شوند TypeScript کار نکند

Answer

flagها حجم دیتابیس را پر می‌کنند

Answer

هیچ ریسکی ندارد؛ flagها باید برای همیشه بمانند

Question 46

یک wrapper روی fetch به نام `apiClient` ساخته‌اید اما توسعه‌دهندگان مدام باید بدانند زیر آن axios است تا خطاها را handle کنند. این نمونه چیست؟

Accepted Answer

Leaky abstraction؛ abstraction باید خطاها را به نوع خطای دامنه‌ای خودش نگاشت کند

Answer

Perfect encapsulation

Answer

Open/Closed Principle به‌درستی اعمال شده

Answer

الگوی Flyweight

Question 47

دو ماژول `orders` و `customers` یکدیگر را import می‌کنند و باعث باگ‌های `undefined` در زمان load شده‌اند. راه‌حل معماری مناسب چیست؟

Accepted Answer

استخراج بخش مشترک به ماژول سوم پایین‌تر یا معکوس کردن وابستگی با interface/event

Answer

تغییر ترتیب importها تا موقتاً کار کند

Answer

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

Answer

استفاده از `require` به‌جای `import` در همه جا

Question 48

در RxJS، برای ذخیره خودکار فرم که هر درخواست باید به ترتیب و بدون لغو انجام شود، کدام operator مناسب است؟

Accepted Answer

`concatMap`

Answer

`switchMap`

Answer

`exhaustMap`

Answer

`mergeMap` با concurrency نامحدود

Question 49

برای یک جریان checkout چندمرحله‌ای با رزرو موجودی، پرداخت و نیاز به جبران (compensation) در صورت شکست، کدام الگو مناسب‌تر است؟

Accepted Answer

Saga/Process Manager که مراحل را هماهنگ و در صورت شکست، عملیات جبرانی را اجرا می‌کند

Answer

زنجیره‌ای از `useEffect`ها که هر کدام با تغییر state بعدی را trigger می‌کنند

Answer

یک Singleton که همه مراحل را هم‌زمان و موازی اجرا می‌کند

Answer

بدون مدیریت شکست؛ کاربر صفحه را refresh می‌کند

Question 50

در یک کتابخانه کامپوننت، کدام تغییر در props طبق semver یک breaking change است؟

Accepted Answer

محدود کردن نوع یک prop موجود، مثلاً از `string` به `"sm" | "md"`

Answer

افزودن یک prop اختیاری جدید با مقدار پیش‌فرض

Answer

گسترش نوع یک prop، مثلاً از `"sm" | "md"` به `"sm" | "md" | "lg"`

Answer

بهبود مستندات JSDoc یک prop

الگوهای طراحی · سینیور · 50

Dependency Injection در فرانت عمدتاً چه می‌دهد؟