رعایت موارد زیر در پروژه های فرانت میتواند تا حد خوبی به کیفیت کامپوننت ها وکدهای شما را بالا ببرد و از اصول کلین کد پیروی شده باشد، در این مقاله سعی کردم خیلی کوتاه و دم دستی توضیح بدم که قابلیت اجرایی بالایی داشته باشه و از خوندن زیاد مواردی که باید رعایت کنید اجتناب کردم.
ابتدا در نظر داشته باشید که تمام کارهای ما trade off است و برای بدست آوردن چیزی باید چیز دیگری را هزینه کنید. برای بدست آوردن کد باکیفیت و قابل اعتماد و قابل نگهداری که در زمان و انرژی تیم توسعه صرفه جویی شود باید برای رعایت اصول لازم زمان و انرژی بذارید.
1- ساختار فولدر ها
معمولا فولدر های اصلی پروژه شامل components , features , services, hooks , pages , assets , utils ,context ,constatnts میباشد.
Components : شامل کامپوننت هایی که بیشتر resusable هستند مانند button , header ,...
Features : شامل کامپوننت هایی که با استفاده از کامپوننت های بالا ساخته میشوند و شامل بخش های مختلف پروژه میباشد.
Services : شامل بخش های تامین کننده و مدیریت کننده دیتا مثل store redux , api call ها میباشد.
Hooks : شامل هوک ها یا لاجیک های پروژه های ری اکتی است.
Pages : شامل صفحاتی که برای پروژه در نظر گرفته شده و به ازای هر route به کاربر نمایش داده میشود.
Assets : شامل استاتیک فایل هایی مثل فونت ها و تصاویر و … میباشد.
Utils : فولدری شامل فایل های فانکشنالیتی ها یا فایل هایی که فانکشن های مورد نیاز پروژه در آن قرار دارد.
Context : در صورتی که از context ها استفاده میکنید فایل مربوط به آن ها را درین بخش قرار دهید
data : فچ کردن دیتا در این فایل اتفاق میافتد که در کنار فایل page.tsx در نکست قرار میگیرد
2. نامگذاری ها
نام های کوتاه و واضح که گویای عملکرد خودشان باشند انتخاب کنید به عناون مثال calculateAreaOfCircle بهتر از calculate است . اینکار دیباگ و فهم کد را ساده تر میکند.
3.تقسیم کامپوننت به کامپوننت های کوچکتر
* تا حد امکان یک کامپوننت را کوچک و با کمترین حجم و خط کد نگه دارید
این کار در راستای اصل single responsibility میباشد به این صورت که وقتی یک کامپوننت بزرگ میشود یعنی کارهای زیادی انجام میدهد در صورتی که هر بخش را که کار خاصی انجام میدهد و میتواند یک بخش مجزا شود جدا کنید سادگی و قابل فهم بودن کد افزایش میابد و هر کامپوننت دقیقا یک کار مشخصی انجام میدهند.
علاوه براین بر پرفورمنس هم تاثیر مثبتی دارد و حجم کد رندر شده توسط مرورگررا کاهش میدهد.
4.از هوک ها استفاده کنید و بخش لاجیک را از تگ های jsx و html جدا کنید.
این کار به پیروی از دیزاین پترن presentaion , container یا logic , dumb و اصل Seperation of concerns انجام میشود بخش لاجیک و منطق به هوک مجزا منتقل میشود و بخش نمایشی یا jsx بخش مستقلی میباشد که از هوک مدنظر استفاده میکند.
باعث میشود حجم کامپوننت ها کاهش پیدا کند.
جداسازی لایه لاجیک در قالب هوک از فایل tsx باعث کم حجم شدن و خوانایی کدبیس میشود
برای کوچک شدن jsx آنرا به کامپوننت های کوچکتر تقسیم میکنیم
برای کوچک شدن هوک میتوان فانکشن ها را از هوک منتقل کرد به utils که بتوان آن ها را در همه جا او در هوک ایمپورت کرد.
کامپوننت های jsx بتوانند به سادگی لاجیک را با دیگر کامپوننت ها به اشتراک بگذارند.(reusable logic)
تست نویسی بخصوص با react-test-library خیلی ساده تر میشود به این صورت که بخش لاجیک را جدا تست میکنید و بخش presentation را جدا (unit test , testable components)
5.استفاده از Composition در ری اکت
تکنیک wrap کردن کامپوننت های دیگر و گرفتن آنها به شکل {children}
6.استفاده از قابلیت های es6 وبالاتر
مثلا desctructre , spread ,reset , arrow function
این کار باعث میشود ارورهای کد کاهش یابد برای مثال به جای prop.title از const {title} = props استفاده کنید.
به طور کلی از ویژگی های es6 وبالاتر به درستی استفاده کنید.
7.تایپ اسکریپت
8.از inline style استفاده نکیند
9.میزان js بخش jsx را به حداقل برسانید
برای مثال برای فانکشن را ازبیرون از jsx بخوانید و داخل jsx و فانکشن ننویسید.
بر اساس شماره 4
10. استفاده از ارور باندری ری اکت جهت مدیریت ارورهای بخش UI و try catch برای مدیریت خطاهای بخش لاجیک
11. دسته بندی ایمپورت ها : ایمپورت های thirparty را در بالاترین بخش فایل سپس یک enter و بعد ایمپورت های داخلی قرار دهید
12.استرینگ و عدد نباید داخل کدها به صورت هارد کد وجود داشته باشد حتما به یک const یا key بالای صفحه یا در یک فایل دیگر refrence داده شود که محل نگهداری این دیتاهاست.
13.اجتناب از شرط های زیاد و حلقه های تودرتو
14.تبدیل switch case ها به آبجکت
15. اجتناب از هاردکد شدن مقادیر و انتقال آنها به فایل messages مشابه کلمات فارسی موجود در کد
16. شرط های چک برای رندر یک کامپوننت jsx را به داخل همان کامپوننت منتقل کنید(single responsibility)
برای مثال کامپوننتی فقط آرایه میپذیرد شرط چک شدن آرایه بودن ورودی باید در خود کامپوننت صورت بگیرد بجای اینکه در parent انجام شود
17. ایمپورت از یک lib دیگر در NX
ایمپورت از لایببری های دیگر باید از طریق linked library های nx که در tsconfig.base.ts تعریف شده و به فایل index.ts هرلایببری متصل است استفاده شود
مثلا 'project/common@' به libs/common/src/index.ts اشاره میکند که کامپوننت های خاصی را export میکند و لایبرری های دیگر میتوانند ایمپورت کنند. برای ارتباط و ایمپورت های بین کامپوننت های درون یک لایببری نیاز به اینکار نیست
18. از '@' برای تعریف alias path در tsconfig استفاده کنید و از ../../../ پرهیز کنید.
19.استفاده از rule های eslint
20. تایپ any ممنوع
اگرچه راحت ترین کار این است که بگوییم ما تایپ اسکریپت استفاده میکنیم اما any کارمان را راحت میکند، اما واقعا چرا باید با any عملکرد تایپ اسکریپت را خنثی کرده و خودمان را به سخره بگیریم اگرچه زمان بر است که تمام تایپ ها را تعریف کنید اما کدهای شما قابل پیش بینی تر و قابل اعتمادتر میشوند
