سلام دوستان. توی اولین قسمت از مجموعه پستهای سوالات مصاحبه فرانتاند میخوایم ۱۰ تا سوال زیر رو بررسی کنیم:
۱. چه تکنیکهایی برای بهینهسازی یک برنامهٔ فرانتاند میشناسین؟
۲. فایل package-lock.json توی پروژههای فرانتاندی چیه و چه کاربردی داره؟
۳. چطوری میتونیم یک برنامهٔ فرانتاندی Maintainable داشته باشیم؟
۴. کاربرد Generic ها توی تایپاسکرپیت چیه؟
۵. اتریبیوت tabindex توی HTML چیه؟
۶. آیا جاوااسکریپت یک زبان Parallel هست یا Concurrent؟
۷. چه زمانی از Tuple توی تایپاسکریپت استفاده نکنیم؟
۸. توی تایپاسکریپت کلمهکلیدی declare چکار میکنه؟
۹. چند تا از تایپهای پرکاربرد تایپاسکریپت رو نام ببرین
۱۰. دستور Git زیر چکار میکنه؟
ابتدا پیشنهاد میکنم پست مقدمهٔ این مجموعه سوالات رو بخونین:
قبل از ادامه میخوام یادی کنیم از عزیز. امیدوارم روحش شاد و در آرامش باشه ✨💚. همین فونت قشنگی که من با اون این پست رو نوشتم و شما هم با اون مشغول خوندن این پست هستین، حاصل کار صابرِ عزیز هست.
خب، بریم که سوالا رو بررسی کنیم 🔥
۱. چه تکنیکهایی برای بهینهسازی یک برنامهٔ فرانتاند میشناسین؟
برای بهینهسازی یک برنامهٔ فرانتاند تکنیکهای زیادی وجود داره. بعضی از مهمترین اونها مثل:
- بهینهسازی فایلهای برنامه (باندل) با تکنیکهایی مثل Tree shaking و Compression و Minification
- حذف Import های بلااستفاده
- جداسازی کدها و تقسیم اونها به فایلهای کوچیکتر (Code Splitting) با استفاده از تکنیکهایی مثل Dynamic Import
- استفاده از Lazy Loading برای لود کردن محتوا فقط در شرایط نیاز
- استفاده از کامپوننتهای Async هنگام استفاده از فریمورکها
- لود کردن کامپوننتها فقط در شرایط نیاز (Conditional components loading)
- مدیریت کردن درخواستهای API با استفاده تکنیکهایی مثل AbortController
۲. فایل package-lock.json توی پروژههای فرانتاندی چیه و چه کاربردی داره؟
این فایل به صورت خودکار توسط ابزارهای مدیریت پکیج مثل npm و yarn تولید میشه و توی اون، ورژن دقیق پکیجهایی که توی برنامه استفاده شده ذخیره میشه. وقتی پروژهٔ ما توی محیطهای دیگه Deploy میشه یا یک توسعهدهندهٔ جدید قراره روی اون کار کنه، وجود فایل package-lock.json هنگام اجرای دستور npm install این اطمینان رو به ما میده که دقیقاً همون ورژن از پکیجهایی برای ما نصب بشن که انتظار داریم. این کار باعث میشه که برنامهٔ ما توی محیطهای مختلف رفتارهای یکسان و قابل پیشبینی داشته باشه.
برای اطلاعات کاملتر پست زیر رو ببینین:
۳. چطوری میتونیم یک برنامهٔ فرانتاندی Maintainable داشته باشیم؟
برنامهٔ Maintainable برنامهای هست که به راحتی و در هر زمانی میتونیم اون رو ویرایش کنیم، باگهای اون رو برطرف کنیم، توسعه بدیم و به اون توسعهدهندههای دیگهای اضافه کنیم. چنین برنامهای ارزش نگهداری داره یا بهقول معروف Maintainable هست. برنامهای که کمترین هزینه و بیشترین منفعت رو برای کسب و کارها به همراه داره.
موارد زیر کمک میکنن که یک برنامهٔ Maintainable داشته باشیم:
- Best Practice ها و استانداردهای معروف و همگانی رو رعایت کنیم
- از فریمورکها و کتابخونههای معروف استفاده کنیم
- ابزارها و کتابخونهها رو بهطور مرتب بروزرسانی کنیم
- بهصورت ماژولار پروژهمون رو توسعه بدیم
- از ابزارهای تست خودکار (Automated test) استفاده کنیم
- از قسمتهای مختلف برنامه و نحوهٔ کار با اونها مستندات تهیه کنیم
- از قابلیتهای ابزارهای Version Control استفاده کنیم
برای جزییات بیشتر میتونین پست زیر رو ببینین:
۴. کاربرد Generic ها توی تایپاسکرپیت چیه؟
Generic ها کمک میکنن بتونیم توابع، کلاسها و اینترفیسهایی داشته باشیم که Reusability (قابلیت استفاده مجدد) بیشتری دارن. فرض کنیم تابعی داریم که پارامترهای اون محدود به نوع number هستن:
function getLastItem(items: number[]): number { return items[items.length - 1]; }
به این تابع نمیتونیم مقادیر string پاس بدیم که در نتیجه برای حل این مشکل باید اون تابع رو برای نوع string بازنویسی کنیم که این یعنی کدهای تکراری. Generic ها برای حل چنین مشکلاتی معرفی شدن. تابع بالا رو با استفاده از Generic میتونیم به این شکل بنویسیم:
function getLast<T>(items: T[]): T { return items[items.length - 1]; }
حالا این تابع میتونه برای هر نوعی استفاده بشه. کافیه موقع استفاده از اون نوع مد نظرمون رو مشخص کنیم:
getLast<number>([1, 2, 3]); // typeof number getLast<string>(["a", "b", "c"]); // typeof string
برای آشنایی بیشتر با Generic ها میتونین این پست رو ببینین:
۵. اتریبیوت tabindex توی HTML چیه؟
این اتریبیوت برای راحتی جابجایی بین المنتهای توی صفحه با استفاده از دکمهٔ Tab روی کیبورد به کار میره و اگه از اون به درستی استفاده کنیم میتونه باعث بهبود Accessibility و کارایی صفحهٔ ما بشه. بعضی از المنتها مثل input و button بهصورت خودکار این اتریبیوت رو دارن و به قول معروف Focusable هستن و به همین دلیل هست که وقتی توی یک فرم از دکمهٔ Tab استفاده میکنیم، میتونیم به راحتی بین ورودیهای اون فرم جابجا بشیم بدون اینکه بصورت دستی و با ماوس اونها رو Focus کنیم.
نحوهٔ استفاده از این اتریبیوت به صورت زیر هست:
<div tabindex="0">I'm focusable!</div>
المنت div با استفاده از دکمهٔ Tab کیبورد قابل انتخاب شدن هست. البته نحوهٔ استفاده از این اتریبیوت اهمیت زیادی داره که پیشنهاد میکنم پست زیر رو بخونین:
۶. آیا جاوااسکریپت یک زبان Parallel هست یا Concurrent؟
هرچند به جاوااسکریپت مدرن قابلیتهایی مثل Web Workers اضافه شده که توی بعضی از کاربردهای خاص میتونه شبیه به یک زبان Parallel عمل کنه، اما جاوااسکریپت به دلیل اینکه Single Thread هست، یک Call Stack داره و بنابراین ذاتاً یک زبان Concurrent هست.
Parallelism چیه؟
وقتی میگیم یک زبان Parallel هست یعنی این زبان میتونه چندین کار رو به صورت همزمان و مجزا شروع و پردازش کنه. فرض کنیم میخوایم پردازشی روی یک مجموعه اطلاعات عظیم انجام بدیم. با یک زبان Parallel میتونیم این اطلاعات رو به قسمتهای کوچیکتر تقسیم و هر بخش رو به صورت مجزا پردازش کنیم که باعث میشه با سرعت بیشتری به نتیجه برسیم. یک زبان Parallel میتونه چندین تسک رو به صورت کاملاً همزمان شروع و پردازش کنه.
Concurrency چیه؟
وقتی میگیم یک زبان Concurrent هست، یعنی اون زبان میتونه توی یک لحظه چندین تسک رو مدیریت و پردازش کنه. یک نمونهٔ اون میتونه اجرای ۵ درخواست Ajax باشه. از لحاظ فنی، توی زبانی مثل جاوااسکریپت این ۵ درخواست در یک واحد از زمان قابل شروع شدن نیستن. اما بعد از شروع شدن میتونن به صورت همزمان پردازش بشن.
۷. چه زمانی از Tuple توی تایپاسکریپت استفاده نکنیم؟
با Tuple توی تایپاسکریپت میتونیم یک تایپ Array-like (شبه آرایه) داشته باشیم که توی اون طول آرایه و نوع دقیق اعضا مشخص شده. تایپی که توی خط ۱ کد زیر میبینین یک Tuple هست که همونطور که میبینیم سینتکس عجیب غریبی نداره:
type Name = <<[string, string]>>; const john: Name = ["John", "Doe"];
متغیر john که از تایپ Name استفاده کرده، حتماً باید یک آرایه با طول ۲ باشه که عضو اول و دوم اون از نوع string هستن. خاصیت Tuple عدم انعطافپذیری اون هست و استفاده نادرست از اون ممکنه باعث بروز مشکلاتی توی برنامه بشه.
مثال بالا یک نمونهٔ استفاده نادرست از Tuple هست. چون برای مثال از Name برای نام و نام خانوادگیهایی که بیشتر از ۲ کلمه دارن نمیتونیم استفاده کنیم. برای این کار باید تایپ Name رو دستکاری کنیم که ممکنه باعث بروز باگ توی قسمتهای دیگهٔ برنامه بشه. همچنین توی بعضی از فرهنگها ابتدا نام خانوادگی ذکر میشه و بعد نام کوچک. بنابراین اینجا وقتی از Tuple استفاده میکنیم دقیقاً نمیدونیم john[0] نام کوچک شخص هست یا نام خانوادگی.
پس بهطور کلی، بهتره از Tuple زمانی استفاده کنیم که مطمئن هستیم طول و نوع اعضای آرایهٔ ما هیچوقت تغییر نمیکنه. مثلاً ذخیره کردن طول و عرض جغرافیایی:
type Coordinates = [number, number]; const c1: Coordinates = [46.111341, -151.005893]; const c2: Coordinates = [27.092156, 51.302929];
۸. توی تایپاسکریپت کلمهکلیدی declare چکار میکنه؟
اگه توی یک فایل تایپاسکریپتی با یک مقدار مثل یک تایپ، آبجکت و ... سر و کار داریم که برای تایپاسکریپت ناشناخته و غیر قابل دسترس هست، کامپایلر به ما خطا میده که این مقدار تعریف نشده. برای مثال توی برنامه یک متغیر گلوبال داریم و میخوایم از اون توی یک فایل تایپاسکریپتی استفاده کنیم:
// myModule<<.ts>> console.log(myGlobalVariable); // Error: Cannot find name 'myGlobalVariable'.
توی این مثال در شرایطی که ما میدونیم چنین مقداری وجود داره و اگه برنامه باندل بشه اون مقدار قابل دسترس خواهد بود، کامپایلر به ما خطا داد که این مقدار وجود نداره. برای رفع چنین خطاهایی قابلیتی به اسم declare به کارمون میاد.
با استفاده از کلمهکلیدی declare میتونیم به تایپاسکریپت بگیم که: «با اینکه میدونم چنین مقداری برای تو ناشناخته هست، لطفاً طوری رفتار کن که انگار میشناسیش. لطفاً به من اعتماد کن.»
نحوهٔ استفاده از کلمهکلیدی declare به این صورت هست:
declare var myGlobalVariable: string; console.log(myGlobalVariable);
با این کار، دیگه خطایی از سمت کامپایلر تایپاسکریپت نمیگیریم. دقت کنیم declare فقط برای رفع خطاهای هنگام توسعه بهکار میره و زمانی که برنامه بهطور واقعی اجرا میشه اگه مقداری واقعاً وجود نداشته باشه خطا میگیریم. بنابراین declare توی فاز Runtime تأثیری نداره.
۹. چند تا از تایپهای پرکاربرد تایپاسکریپت رو نام ببرین
تایپاسکریپت علاوه بر اینکه اجازه میده تایپهای مد نظر خودمون رو بسازیم، چند تایپ کاربردی رو ارائه میده که با اونها میتونیم تایپهای موجود رو دستکاری و به یک حالت دیگه تبدیلشون کنیم. به این تایپها که بصورت گلوبال در دسترس هستن میگیم Utility Types. موارد زیر چند تا از پرکاربردترین این تایپها هستن:
Partial<Type>Required<Type>Record<Keys, Type>Omit<Type, Keys>ReturnType<Type>
برای آشنایی کامل با این تایپها میتونین پست زیر رو ببینین:
۱۰. دستور Git زیر چکار میکنه؟
git commit --amend
فلگ --amend دو کاربرد داره:
۱. اگه در حال حاضر تغییراتی رو commit کردیم، اما یک سری فایل از این کامیت جا موندن، میتونیم بعد از Stage کردن اونها (دستور git add) از دستور بالا استفاده کنیم تا فایلهای جدید به آخرین کامیت اضافه بشن.
۲. اگه قصد داریم متن پیام آخرین کامیت رو تغییر بدیم، میتونیم از دستور بالا استفاده کنیم. با این کار ادیتور پیشفرض برای ما باز میشه و میتونیم متن قبلی رو اصلاح کنیم.
خب دوستان امیدوارم از سوالات و نکتههایی که بررسی کردیم استفاده کرده باشین. اگه شما هم سوالات جالبی از مصاحبهها میشناسین میتونین توی قسمت کامنتها به اشتراک بذارین تا توی قسمتهای بعدی اونها رو بررسی کنیم. روزتون خوش.