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

اولین code review خودم رو برای آزمون استخدامی در یک پوزیشن React ای واسه یک شرکت نرم افزاری اروپایی انجام دادم، مصاحبه‌های اون ور آبی با این ور آبی خیلی فرق داره، اینجا ازت میپرسن خب نمونه کارات چیه، چند سال کار کردی، چی بلدی و ... ولی اون ور آبی اکثرا ازت تست میگیرن، اونم نه یک سوال در مورد زبون برنامه نویسی موردنظرشون، بلکه بهتون یه مسئله میدن و میگن برو ببینیم چند مرده حلاجی، میخوان ببینن الکی جو خارج و کارخارجی گرفتت یا نه بابا این واقعا بلده!!

تستی که از من گرفتن به این صورت بود که بهم گفتن که دسترسی به سورس یکی از پروژه هامون رو بهت میدیم، البته به همین راحتی هم دسترسی ندادن، واسم یک NDA (توافقنامه عدم افشاء) ایمیل کردن تا پاش یه امضای دیجیتال بزنم، بعد هم یه فرم توی google docs باهام share کردن که ساختار code review بود.

از اونجایی که من تا حالا توی عمرم یه code review حرفه ای انجام نداده بودم، و مهم تر از همه اینکه ما توی ایران زیاد به چنین کاری اعتقادی نداریم، به همین دلیل کلی توی منابع انگلیسی سرچ کردم تا در نهایت تونستن از چند تا مقاله یه چیزی دستگیرم بشه، من code review خودم رو بخش‌های زیر دسته بندی کردم.

• General
• Clean Code
• Performance

خب با یاد و نام خدا میریم سراغ code review پروژه‌ی ... (شرمنده نمیتونم اسمش رو بیارم، یکم secrete)

1. General

1.1. Structure easily understand

1.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.js

1.2. Keep components small

بهتره کامپوننت‌هاتون رو کوچولو تعریف کنید. برای مثال یه فایل به اسم Button.js ساخته بودن و درون اون سه تا کامپوننت از انواع button ها تعریف کرده بودن، خب این چه کاریه آخه !

2. Clean Code

2.1. Add comment

2.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 history
• Avoid 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 PropTypes

CallToAction.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. ESlint

2.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 components

2.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 های جدید و دوست داشتنی React

3. Performance

3.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-Splitting

3.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 Suspense

3.4. Speed up image loading time

3.4.1. Reduce Image size, convert images to WebP format

3.4.2. Cache the images locally

3.5. Remove all console before deploying the production version

کنسول‌ها جا نمونن، از کتابخونه babel-plugin-transform-remove-console میتونید استفاده کنید، خودش ترتیب حذف کنسول‌هاتون رو میده.

3.6. Using PureComponent

3.7. Using React.memo

امیدوارم واسه code review های اون ور آبی و یا شایدم این ور آبی بدردتون بخوره.