چطوری یه پروژه React ای رو Code Review کنیم؟

اولین code review خودم رو برای آزمون استخدامی در یک پوزیشن React ای واسه یک شرکت نرم افزاری اروپایی انجام دادم، مصاحبه‌های اون ور آبی با این ور آبی خیلی فرق داره، اینجا ازت میپرسن خب نمونه کارات چیه، چند سال کار کردی، چی بلدی و ... ولی اون ور آبی اکثرا ازت تست میگیرن، اونم نه یک سوال در مورد زبون برنامه نویسی موردنظرشون، بلکه بهتون یه مسئله میدن و میگن برو ببینیم چند مرده حلاجی، میخوان ببینن الکی جو خارج و کارخارجی گرفتت یا نه بابا این واقعا بلده!! تستی که از من گرفتن به این صورت بود که بهم گفتن که دسترسی به سورس یکی از پروژه هامون رو بهت میدیم، البته به همین راحتی هم دسترسی ندادن، واسم یک NDA (توافقنامه عدم افشاء) ایمیل کردن تا پاش یه امضای دیجیتال بزنم، بعد هم یه فرم توی google docs باهام share کردن که ساختار code review بود.از اونجایی که من تا حالا توی عمرم یه code review حرفه ای انجام نداده بودم، و مهم تر از همه اینکه ما توی ایران زیاد به چنین کاری اعتقادی نداریم، به همین دلیل کلی توی منابع انگلیسی سرچ کردم تا در نهایت تونستن از چند تا مقاله یه چیزی دستگیرم بشه، من code review خودم رو بخش‌های زیر دسته بندی کردم. GeneralClean CodePerformanceخب با یاد و نام خدا میریم سراغ code review پروژه‌ی ... (شرمنده نمیتونم اسمش رو بیارم، یکم secrete)1. General1.1. Structure easily understand1.1.1. The directory name must represent the files within itسعی کنید نام دایرکتوری رو متناظر با فایل‌هایی که درون اون هستن انتخاب کنید.1.1.2. Insert each item with its style in a separate directoryاستایل هر کامپوننت رو کنار خود فایل تعریف کنید، البته بستگی به scale پروژه داره+ components/Card/Avatar - Avatar.js - Avatar.style.js1.2. Keep components smallبهتره کامپوننت‌هاتون رو کوچولو تعریف کنید. برای مثال یه فایل به اسم Button.js ساخته بودن و درون اون سه تا کامپوننت از انواع button ها تعریف کرده بودن، خب این چه کاریه آخه !2. Clean Code2.1. Add comment2.1.1. Comment rulesسعی کنید قوانین زیر رو در بحث کامنت گذاری دقت کنید تا کد یکدستی داشته باشینOnly comment on things that have business logic complexity.Don't leave commented out code in project codebase.Don't have journal comments, use version control for old code in project historyAvoid positional markers, they usually just add noise. Let the functions and variable names along with the proper indentation and formatting give the visual structure to project code.2.1.2. Comment on PropTypesCallToAction.propTypes = { // This is the button label label: PropTypes.string, // If true, i don't know what it is doing :) alternative: PropTypes.bool };2.2. Using code formatter extensionsاکستنشن Code formatter بهتون کمک میکنه تا با استفاده از یک سری قوانین که واسش تعیین می‌کنید ساختار کدهاتون رو منظم کنه 2.3. ESlint2.3.1. ESLint Git pre-commit hookشما می‌تونید با استفاده از قابلیت pre-commit در GIT جلوی کامیت‌هایی که قوانین ESLint رو زیر پا گذاشتن رو بگیرید، تا developer شما بعد از رعایت قوانین تعیین شده کدش رو commit کنه2.4. Import the desired Action instead of starنام اکشن‌هاتون رو قشنگ ذکر کنید، این باعث خوانایی بیشتر میشه، کد زیر بود کهimport * as actions from '../../actions';تبدیل شد بهimport { saveUser, updateUser } from '../../actions';2.5. Remove duplicate Actionsاکشن‌هایی که یه type و یه payload یکسان دارن رو میتونید به یک فایل common منتقل کنید و از تکرار اونا جلوگیری کنید.2.6. Rename the single file in the directory to index.jsفایل‌های تک و تنهایی که در یک دایرکتوری مشخص هستن رو میتونید به index.js تغییر بدید، این کار کمک میکنه import هاتون ساده تر بشن، البته موقعی که فایل رو در editor باز می‌کنید یکم تعدد فایل‌های index اون بالا بین تب‌ها زیاد میشه !// src/utils/storage/index.js import Storage from '../storage';2.7. Add propTypes and defaultProps for all components2.8. Separate the style from the component in the style.js fileسعی کنید استایل هاتون رو ته فایل component تعریف نکنید، بهتره اونا رو به یه فایل دیگه منتقل کنید و بعد import اش کنید.2.9. No useless import fileایمپورت‌های بدون استفاده رو حذف کنید، این قوانین رو در eslint می‌تونید تعریف کنید.2.10. No useless constructorاگه کامپوننتون class بیس و نیاز به constructor اون کامپوننت ندارید، بهتره پاکش کنید.2.11. Using the React Hooksاستفاده از Hook های جدید و دوست داشتنی React3. Performance3.1. Making async calls for component initialization in the componentDidMountتوابع async ای که نیاز دارین واسه بار اول اجرا بشه رو بهتره توی componentDidMount بجای constructor بنویسید، برای مثال توابعی که نیاز داره یه request به سرور بزنه3.2. Analyzing and optimizing Webpack bundle bloatکتابخونه webpack-bundle-analyzer بهتون کمک میکنه تا باندل پروژتون رو آنالیز کنید و اگه از کتابخونه سنگینی دارید استفاده می‌کنید مطلع بشید.3.3. Code-Splitting3.3.1. Lodash module, one-by-one or ‘modules’ importکتابخونه lodash یکی از سنگین‌ترین کتابخونه‌هاست که باید خیلی حواستون رو بهش بدین، و بهتره تابعی که نیاز دارید رو به طور مستقیم صدا بزنید، مثال زیر رو ببینید.import omitBy from 'lodash/omitBy'; import isUndefined from 'lodash/isUndefined';3.3.2. React.lazy and Suspense3.4. Speed up image loading time3.4.1. Reduce Image size, convert images to WebP format3.4.2. Cache the images locally3.5. Remove all console before deploying the production versionکنسول‌ها جا نمونن، از کتابخونه babel-plugin-transform-remove-console میتونید استفاده کنید، خودش ترتیب حذف کنسول‌هاتون رو میده.3.6. Using PureComponent3.7. Using React.memoامیدوارم واسه code review های اون ور آبی و یا شایدم این ور آبی بدردتون بخوره.