1. چگونه یک سیستم فرانتاند برای یک پلتفرم تجارت الکترونیک با ترافیک بالا و میلیونها کاربر همزمان طراحی میکنید؟
استراتژیهای کلیدی :
رندر سمت سرور (SSR) یا تولید سایت استاتیک (SSG) با Next.js برای صفحات محصول/دستهبندی به منظور کاهش TTFB.کش CDN برای داراییهای استاتیک و پاسخهای SSR.استفاده از تقسیم کد و بارگذاری تنبل برای جزئیات محصول، نظرات و غیره.
واگذاری رابط کاربری سنگین (مثل جستجو، فیلترها) به رندر سمت کلاینت با APIهای غیرهمزمان.
const Product = React . lazy (() => import ( " ./Product " ));
2. رویکرد شما برای طراحی یک معماری فرانتاند که بهروزرسانیهای بلادرنگ را در چندین کلاینت پشتیبانی کند (مثل اپلیکیشن چت یا داشبورد زنده) چیست؟
رویکرد :
استفاده از WebSockets (مثل Socket.IO یا بومی) یا رویدادهای ارسالی سرور برای دادههای بلادرنگ.
استفاده از مدیریت وضعیت با صفهای رویداد برای محدود کردن بهروزرسانیها و اطمینان از ثبات رابط کاربری.
socket . on ( " newMessage " , ( msg ) => {
dispatch ( addMessage ( msg ));
});
پیادهسازی حضور ، شاخصهای تایپ و صفهای پیام در کلاینت برای مقاومت.
3. چگونه یک سیستم فرانتاند طراحی میکنید که بتواند بین حالتهای آنلاین و آفلاین بهصورت یکپارچه جابهجا شود؟
تکنیکها :
استفاده از Service Workers برای کش آفلاین (از طریق Workbox).
کش کردن اقدامات کاربر در IndexedDB با استفاده از کتابخانههایی مثل idb.
همگامسازی اقدامات صفشده هنگام بازیابی شبکه (از طریق رویدادهای navigator.onLine).
window . addEventListener ( " online " , syncQueuedRequests );
استفاده از بهروزرسانیهای رابط کاربری خوشبینانه با بازگشت در صورت شکست همگامسازی.
4. چگونه یک سیستم فرانتاند را برای پشتیبانی از بینالمللیسازی (i18n) و محلیسازی (L10n) برای مخاطبان جهانی طراحی میکنید؟
معماری :
انتزاع تمام رشتهها و قالبها با استفاده از ابزارهایی مثل react-i18next یا vue-i18n.
استفاده از مسیریابی مبتنی بر محل (/en/، /fr/) برای سئو.
بارگذاری دینامیک فایلهای محل برای جلوگیری از بستههای بزرگ.
i18n . changeLanguage ( " fr " ); // تغییر دینامیک زبان
5. استراتژی شما برای طراحی یک سیستم فرانتاند که با یک بکاند میکروسرویس ادغام شود چیست؟
استراتژی :
استفاده از دروازه API در بکاند برای انتزاع میکروسرویسها از فرانتاند.
نرمالسازی و تبدیل پاسخهای میکروسرویس در یک لایه API سمت کلاینت .
مدیریت نسخهبندی، تلاشهای مجدد و فالبکها بهصورت مرکزی.
6. چگونه یک برنامه React را طراحی میکنید تا حجم بسته را به حداقل برساند و زمان بارگذاری اولیه را برای یک اپلیکیشن بزرگمقیاس بهینه کند؟
تاکتیکها :
تقسیم کد با React.lazy + Suspense.استفاده از کتابخانههای پشتیبانیکننده از tree-shaking .
بارگذاری JS غیربحرانی با async/defer.
استفاده از واردات دینامیک و پیشبارگذاری داراییهای بحرانی.
فشردهسازی با Brotli و ارائه از طریق CDN.
7. چگونه یک سیستم فرانتاند را برای مدیریت صفحهبندی، اسکرول بینهایت و مجموعه دادههای بزرگ (مثل بیش از 100,000 رکورد) طراحی میکنید؟
بهترین روشها :
استفاده از صفحهبندی مبتنی بر مکاننما از بکاند.
برای اسکرول بینهایت، استفاده از IntersectionObserver و رندر پنجرهای (مثل react-window، vue-virtual-scroll-list).
< FixedSizeList height = { 600 } itemSize = { 35 } itemCount = { items . length } >
{ Row }
</ FixedSizeList >
اجتناب از بارگذاری 100k رکورد در حافظه.
8. رویکرد شما برای طراحی یک استراتژی کش فرانتاند برای کاهش فراخوانیهای API اضافی در یک برنامه React چیست؟
لایههای کش :
در حافظه با React Query / SWR (الگوی stale-while-revalidate).کش دائمی از طریق IndexedDB یا localStorage برای دادههای استاتیک.استفاده از کلیدهای کش + ابطال در زمان جهش.
9. چگونه یک سیستم فرانتاند را برای مدیریت اوج ترافیک (مثل فروشهای بلک فرایدی) بدون کاهش عملکرد طراحی میکنید؟
SSR با کش کامل صفحه CDN.
کاهش JS دینامیک — استفاده از معماری جزیرهای یا هیدراتاسیون جزئی .
نمایش حالتهای بارگذاری زیبا، استفاده از رابط کاربری فالبک برای APIهای محدود شده.
استفاده از پرچمهای ویژگی برای غیرفعال کردن ویژگیهای غیربحرانی در زمان اوج بار.
10. چگونه یک برنامه React را برای پشتیبانی از ویژگیهای برنامه وب پیشرونده (PWA) مثل اعلانهای فشاری و کش آفلاین طراحی میکنید؟
معماری :
استفاده از create-react-app یا پلاگین PWA Next.js با Service Workers .
اعلانهای فشاری از طریق Web Push API + سرور با VAPID.
کش مسیرها/داراییها از طریق استراتژیهای Workbox (cacheFirst، networkFirst).
self . addEventListener ( ' push ' , event => {
self . registration . showNotification ( ' New Offer! ' , {...});
});
11. چگونه یک سیستم مدیریت وضعیت را برای یک برنامه React با کامپوننتهای رابط کاربری پیچیده و وابسته به هم طراحی میکنید؟
رویکرد :
استفاده از Zustand ، Redux Toolkit یا Pinia (Vue).
تقسیم وضعیت جهانی و محلی.
نرمالسازی دادههای رابطهای برای جلوگیری از تودرتو شدن و وابستگیهای دایرهای.
استفاده از انتخابگرهای مشتقشده و مموایزیشن برای عملکرد.
12. رویکرد شما برای طراحی یک سیستم فرانتاند که دادهها را بهصورت دوطرفه و بلادرنگ با بکاند همگامسازی کند (مثل ویرایش همکاری) چیست؟
الگو :
استفاده از WebSockets + OT (تبدیل عملیاتی) یا CRDT (مثل Yjs).
تغییرات محلی بهصورت خوشبینانه اعمال میشوند.
سرور تعارضها را حل کرده و بهروزرسانیها را پخش میکند.
editor . onChange = ( change ) => socket . emit ( ' doc:update ' , change );
حفظ نسخهبندی یا برچسبهای زمانی برای جلوگیری از برخورد.
13. چگونه یک سیستم فرانتاند را برای مدیریت تداوم دادههای سمت کلاینت در refresh صفحات و جلسات طراحی میکنید؟
ابزارها :
استفاده از localStorage/sessionStorage برای دادههای سبک (مثل تم، توکنها).
استفاده از IndexedDB برای دادههای پیچیده یا ساختاریافته (مثل سفارشات آفلاین).
همگامسازی به کش حافظه در زمان بارگذاری.
localStorage . setItem ( ' theme ' , ' dark ' );
14. چگونه یک سیستم فرانتاند را برای مدیریت APIهای محدود شده یا غیرقابل اعتماد بدون به خطر انداختن تجربه کاربری طراحی میکنید؟
استراتژیها :
صفبندی درخواستها و تلاش مجدد با بازگشت .
استفاده از الگوی قطعکننده مدار —ویژگیهای مشکلدار را موقتاً غیرفعال کنید.
فالبکهای زیبا: دادههای کششده، رابط کاربری اسکلتی، حالت آفلاین.
axiosRetry ( api , { retries : 3 , retryDelay : exponentialDelay });
15. رویکرد شما برای طراحی یک سیستم فرانتاند که از بهروزرسانیهای خوشبینانه رابط کاربری پشتیبانی کند و در عین حال یکپارچگی دادهها با بکاند را تضمین کند چیست؟
جریان :
فوراً وضعیت رابط کاربری را بهروزرسانی کنید (مثل لایک کردن یک پست).درخواست غیرهمزمان را به بکاند ارسال کنید.
در صورت خطا، به وضعیت قبلی بازگردید.
mutation . mutate ( updateItem , {
onMutate : () => updateCacheLocally (),
onError : () => rollback (),
});
از react-query یا مدیر جهش سفارشی برای ردیابی استفاده کنید.
16. چگونه یک سیستم فرانتاند را برای کار با یک بکاند GraphQL در مقابل یک بکاند RESTful طراحی میکنید؟
تفاوتهای کلیدی :
GraphQL پرسوجوهای انعطافپذیر و دورهای کمتری ارائه میدهد.REST به چندین نقطه پایانی نیاز دارد و اغلب بیشازحد دریافت میکند.
استراتژی GraphQL :
استفاده از کلاینت GraphQL مثل Apollo Client یا urql .
تعریف پرسوجوها در کنار کامپوننتها.
استفاده از کش داخلی و قطعات برای مدولاریتی.
const { data , loading } = useQuery ( GET_PRODUCT , { variables : { id } });
استراتژی REST :
استفاده از یک لایه API متمرکز با Axios یا fetch .
نرمالسازی پاسخها با ابزارهایی مثل normalizr .
مدیریت دستی صفحهبندی/نسخهبندی.
17. چگونه یک سیستم فرانتاند را برای ادغام با یک بکاند قدیمی با APIهای ناسازگار و زمان پاسخدهی کند طراحی میکنید؟
رویکرد :
معرفی یک لایه آداپتور سمت کلاینت برای نرمالسازی دادهها و انتزاع ناهنجاریها.
استفاده از دروازههای API یا BFF (Backend-for-Frontend) در صورت امکان برای جدا کردن فرانتاند از ناسازگاریهای بکاند.
پیادهسازی تایماوتها ، کشینگ ، اسکلتهای بارگذاری و مدیریت خطای زیبا برای APIهای کند.
async function getNormalizedUser ( id ) {
const raw = await legacyAPI . get ( `/user/ ${ id } ` );
return { name : raw . username , age : raw . details ?. age ?? null };
}
18. رویکرد شما برای طراحی یک سیستم فرانتاند که از تست A/B و سوئیچهای ویژگی در مقیاس پشتیبانی کند چیست؟
طراحی سیستم :
استفاده از یک ارائهدهنده پرچم ویژگی (مثل LaunchDarkly، Unleash یا خانگی).
پرچمها باید قبل از رندر حل شوند تا از چشمک زدن جلوگیری شود (SSR یا دریافت زودهنگام).
برای تستهای A/B، تحلیلها را برای ثبت رفتار گونهها ادغام کنید.
{
featureFlags . newCheckout ? < NewCheckout /> : < LegacyCheckout />;
}
پرچمها باید تایپشده، محدود و پس از آزمایشها بهصورت تمیز حذف شوند.
19. چگونه یک سیستم فرانتاند را برای همکاری با تیم بکاند با رویکرد قراردادمحور (مثل OpenAPI، طرحهای GraphQL) طراحی میکنید؟
بهترین روشها :
استفاده از تایپهای تولیدشده خودکار از قراردادها (مثل graphql-codegen، openapi-typescript).
اعتبارسنجی درخواستها/پاسخها از طریق طرحها (مثل Zod یا Yup).
به اشتراک گذاشتن سرورهای مدلسازی یا استفاده از MSW برای تست قرارداد.
// تایپهای تولیدشده از طرح GraphQL
type GetUserQuery = {
user : { id : string , name : string },
};
اعمال قوانین تکامل قرارداد (مثل فقط تغییرات افزایشی) برای جلوگیری از شکست مصرفکنندگان.
20. چگونه یک سیستم فرانتاند را برای پشتیبانی از چندین محیط استقرار (مثل توسعه، استیجینگ، تولید) با پیکربندیهای مختلف طراحی میکنید؟
رویکرد :
خارجی کردن پیکربندی با استفاده از متغیرهای محیطی (مثل .env.*).
استفاده از process.env (React) یا import.meta.env (Vite) برای تزریق در زمان ساخت.
const apiBase = process . env . REACT_APP_API_URL ;
اطمینان از اینکه مقادیر حساس فقط در زمان ساخت تزریق شده و به کلاینت نشت نمیکنند.
خودکارسازی استقرارها با خطوط لوله CI/CD برای هر محیط.
21. چگونه یک سیستم فرانتاند را برای مدیریت زیبا مسائل سازگاری مرورگر در طیف گستردهای از دستگاهها و نسخهها طراحی میکنید؟
تکنیکها :
استفاده از autoprefixer + پلیفیلهای Babel (از طریق @babel/preset-env).
تشخیص ویژگیها با Modernizr یا از طریق بررسیهای زمان اجرا ('IntersectionObserver' in window).
ارائه بستههای مختلف با استفاده از بارگذاری تفاضلی یا polyfill.io
if ( ! window . fetch ) {
loadPolyfill (). then ( initApp );
}
تست با ابزارهایی مثل BrowserStack یا Playwright.
22. رویکرد شما برای طراحی یک سیستم فرانتاند با استقرارهای بدون توقف چیست؟
روشها :
استفاده از ساختهای تغییرناپذیر با هش محتوا (مثل main.abc123.js) و استقرارهای اتمی .
اجتناب از تغییرات شکستدهنده در APIها یا ذخیرهسازی بین نسخهها.
استفاده از پرچمهای ویژگی برای جدا کردن استقرار از انتشار.
<script src= "/static/js/main.[hash].js" defer ></script>
استفاده محتاطانه از Service Workers (PWA) برای جلوگیری از کشهای قدیمی (آنها را بهصورت صریح نسخهبندی کنید).
23. چگونه یک سیستم نظارت فرانتاند را برای ردیابی عملکرد، خطاها و رفتار کاربر در تولید طراحی میکنید؟
ابزارها :
خطاها: Sentry ، Rollbar برای استثناهای JS و ردیابی پشته.
عملکرد: Web Vitals ، معیارهای سفارشی از طریق Google Analytics ، Datadog RUM یا New Relic .
رفتار: FullStory ، PostHog یا ردیابی رویداد سفارشی.
reportWebVitals (( metric ) => sendToAnalytics ( metric ));
گروهبندی و هشدار خطاها بر اساس کامپوننت/نسخه، و استفاده از نقشههای منبع در تولید.
24. چگونه یک سیستم فرانتاند را برای نگهداری بلندمدت توسط تیمی با سطوح مهارتی مختلف طراحی میکنید؟
استراتژیها :
اعمال استانداردهای کدنویسی با ESLint، Prettier و TypeScript سختگیرانه.
استفاده از سیستمهای طراحی و کتابخانههای کامپوننت (مثل Storybook).
ارائه ساختار پوشه واضح، مستندات README و هوکهای کامیت لینتشده.
"scripts" : {
"lint" : "eslint src --ext .js,.ts,.tsx" ,
"typecheck" : "tsc --noEmit"
}
تأکید بر بررسیهای کد ، مربیگری و نوشتن تستها (واحد + E2E).
25. رویکرد شما برای طراحی یک سیستم فرانتاند که بتواند از خرابیهای فاجعهبار (مثل وضعیت خراب، قطعی شبکه) بازیابی کند چیست؟
استراتژی دفاعی :
پیچیدن منطق دارای وضعیت در مرزهای خطا برای ایزوله کردن خرابیها.
< ErrorFboundary fallback = { < Fallback /> } >
< Dashboard />
</ ErrorBoundary >
ذخیره وضعیت بحرانی در ذخیرهسازی مقاوم (مثل IndexedDB با اعتبارسنجی طرح).
صفبندی اقدامات آفلاین و تلاش مجدد با بازگشت نمایی.
بازگشت به رابط کاربری کششده در صورت امکان (Service Worker، تصویر localStorage).