ساختارهای مختلف پروژه برای React Apps.

ساختار یک پروژه نرم افزاری یکی از عوامل کلیدی در تصمیم گیری موفقیت یا شکست است. این شامل معماری اپلیکیشن و همچنین فرآیند توسعه و کل سازمان پروژه می شود. هر چه پروژه بزرگتر باشد، توسعه دهندگان بیشتری روی پروژه کار می کنند و هر چه پروژه طولانی تر باشد، داشتن یک پروژه خوب اهمیت بیشتری دارد. ساختار اما پروژه های کوچک نیز می توانند به دلیل ساختار بد شکست بخورند.
قبل از ارائه یک ساختار پروژه پیشنهادی، اجازه دهید به اجزای معمولی یک پروژه پیشانی مدرن نگاه کنیم. درک این مولفه ها، پایه ای برای طراحی یک ساختار پروژه موثر فراهم می کند.
1. کد منبع: این قلب برنامه شما است و حاوی فایلهای جاوا اسکریپت/تایپ اسکریپت است که شامل منطق برنامه شما، فایلهای HTML برای ساختار، و فایلهای سبک برای ظاهر است. هر چیزی که عملکرد و رابط کاربری برنامه شما را تعریف می کند در اینجا یافت می شود.
2. دارایی ها: این دسته همه فایلهای ثابت مانند تصاویر، فیلمها و فونتهایی را که برنامه شما از آنها استفاده میکند، در خود جای میدهد.
3. پیکربندی: این فایل ها دارای پارامترهای مهمی هستند که جنبه های مختلف برنامه شما را کنترل می کنند. به عنوان مثال: package.json، .env
4. تست ها: این دسته به اطمینان از صحت و ثبات برنامه شما اختصاص داده شده است. تمام واحدها، یکپارچهسازیها و تستهای سرتاسری را که رفتار کاربر را شبیهسازی میکنند، تعاملات را تایید میکنند، و عملکرد برنامه شما را بررسی میکنند و به شناسایی و جلوگیری از باگهای احتمالی کمک میکند را در خود جای داده است.
5. مستندات: تمام اسناد اطلاعاتی درخواست شما در اینجا قرار دارد. از فایل README که نمای کلی پروژه را ارائه می کند تا اسناد API و راهنمای سبک برای کدنویسی، این اسناد به حفظ ثبات، درک و سهولت استفاده برای هر کسی که با پروژه تعامل دارد کمک می کند.
6. ساخت مصنوعات: اینها خروجیهای فرآیند ساخت هستند، از جمله فایلهای جاوا اسکریپت، CSS و HTML بهینهسازیشده و آماده برای استقرار، و سایر فایلهای موقت یا تشخیصی که به اشکالزدایی مشکلات ساخت کمک میکنند. آنها کلید توزیع برنامه شما برای کاربران نهایی هستند.
در مجموع، این مؤلفههای متنوع پایه و اساس یک پایه کد React معمولی را تشکیل میدهند و پیچیدگی و وسعت ملاحظات مربوط به پروژههای فرانتاند را برجسته میکنند.
اکنون زمان آن رسیده است که برخی از رویکردهای آزموده شده برای ساختار کد خود را بررسی کنیم. هدف این استراتژیها سادهسازی فرآیند توسعه و آسانتر کردن زندگی برای توسعهدهندگان است.
ساختار مبتنی بر ویژگی
برنامه بر اساس ویژگی ها یا ماژول ها سازماندهی شده است. هر ویژگی شامل مجموعه ای از مؤلفه ها، نماها، فراخوانی های API و مدیریت حالت است که امکان جداسازی واضح و محصورسازی عملکردها را فراهم می کند.
با معماری مبتنی بر ویژگی در زمینه خرید آنلاین، می توانید فایل ها و پوشه های خود را به صورت زیر سازماندهی کنید:
-
ویژگی ها/: نمایانگر ویژگی های مختلف برنامه، مانند صفحه اصلی، سبد خرید، جزئیات محصول، پرداخت، نمایه و غیره است. هر ویژگی دارای یک پوشه حاوی اجزاء، کانتینرها، صفحات، خدمات، انواع و ابزارهای مرتبط با آن ویژگی است.
-
به اشتراک گذاشته شده/: شامل اجزای قابل استفاده مجدد، ظروف، خدمات، انواع و ابزارهایی است که می توانند در چندین ویژگی به اشتراک گذاشته شوند.
-
api/: شامل ماژول هایی برای برقراری تماس های API است
-
فروشگاه/: دایرکتوری شامل ماژول هایی برای مدیریت حالت است (به عنوان مثال Redux)
-
روتر/: دایرکتوری شامل پیکربندی مسیریابی و اجزای مرتبط است
-
App.tsx: فایل به عنوان نقطه ورود برنامه عمل می کند
ساختار مبتنی بر مولفه
برنامه حول اجزای قابل استفاده مجدد سازماندهی شده است. کامپوننت ها بر اساس عملکردشان دسته بندی می شوند و می توانند برای ایجاد نماهای بزرگتر با هم ترکیب شوند.
با معماری مبتنی بر کامپوننت در زمینه خرید آنلاین، می توانید فایل ها و پوشه های خود را به صورت زیر سازماندهی کنید:
- اجزاء/: پوشه شامل اجزای جداگانه مربوط به ویژگی های مختلف برنامه خرید آنلاین است. هر مؤلفه در یک پوشه سازماندهی شده است که در صورت لزوم ممکن است حاوی مؤلفه های فرزند باشد.
- مسیرها/: پوشه مسیریابی frontend در برنامه را کنترل می کند. این شامل فایل اصلی AppRouter.tsx است که منطق مسیریابی را پیکربندی می کند و فایل routes.tsx که مسیرهای جداگانه و اجزای مربوط به آنها را تعریف می کند.
- api/: پوشه حاوی فایل های جداگانه برای دامنه های API یا قابلیت های مختلف است. این فایلها، مانند products.ts، cart.ts، auth.ts، و payment.ts، تماسهای API مربوط به دامنه مربوطه خود را مدیریت میکنند.
ساختار طراحی اتمی
ایده کلیدی پشت طراحی اتمی ایجاد یک رویکرد سیستماتیک برای ساخت اجزای رابط کاربری است که قابلیت استفاده مجدد، مقیاسپذیری و قابلیت نگهداری را تشویق میکند. این ساختار شفافی را برای سازماندهی و نامگذاری مؤلفه ها فراهم می کند و درک و پیمایش پایه کد UI را آسان تر می کند.
روش طراحی اتمی چگونه اجزای UI را دسته بندی می کند:
-
اتم ها: اتم ها کوچک ترین بلوک های سازنده یک رابط کاربری هستند و عناصر فردی مانند دکمه ها، ورودی ها، نمادها یا برچسب ها را نشان می دهند. آنها معمولاً ساده و مستقل هستند.
-
مولکول ها: مولکول ها ترکیبی از اتم ها هستند و اجزای رابط کاربری پیچیده تری را نشان می دهند. آنها گروهی از اتمها را کپسوله میکنند که با هم کار میکنند تا یک واحد عملکردی مانند یک فیلد فرم یا یک نوار ناوبری را تشکیل دهند.
-
ارگانیسمها: ارگانیسمها اجزای بزرگتری هستند که مولکولها و/یا اتمها را برای ایجاد بخشهای مهمتری از یک رابط کاربری ترکیب میکنند. آنها بخش های متمایز یک رابط کاربری مانند هدر، نوار کناری یا جزء کارت را نشان می دهند.
-
الگوها: الگوها ساختاری برای چیدمان ارگانیسم ها و/یا مولکول ها ارائه می دهند. آنها اسکلت کلی یک صفحه یا بخش خاصی از یک رابط کاربری را تعریف می کنند.
-
صفحات: صفحات نمایانگر صفحههای رابط کاربری کاملی هستند که از الگوها، موجودات، مولکولها و اتمها تشکیل شدهاند. آنها
خروجی نهایی قابل مشاهده برای کاربر را نشان می دهد.
با معماری طراحی اتمی در زمینه خرید آنلاین، می توانید فایل ها و پوشه های خود را به صورت زیر سازماندهی کنید:
- اتم ها/، مولکول ها/، ارگانیسم ها/، الگوها/، و صفحات/: دایرکتوری ها سطوح مختلف ترکیب و انتزاع اجزا را نشان می دهند.
- api/: دایرکتوری حاوی فایل های مربوط به API برای برقراری تماس های API است.
- دیدگاه ها/: دایرکتوری شامل نماهای جداگانه ای است که مؤلفه ها را ارائه می کنند.
- مسیرها/: دایرکتوری پیکربندی مسیریابی را کنترل می کند
ساختار MVVM
ساختار MVVM یک الگوی معماری نرم افزاری است که عمدتاً در ساخت رابط های کاربری استفاده می شود:
مدل نشان دهنده داده ها و/یا اطلاعات واقعی است که ما با آن سروکار داریم. این می تواند یک پایگاه داده، یک فایل، یک وب سرویس یا حتی یک شی ساده باشد.
View همان چیزی است که کاربر می بیند و با آن تعامل دارد. این رابط کاربری است که مدل را به کاربر ارائه می دهد.
ViewModel جایی است که بیشتر منطق در این الگو قرار دارد. این یک انتزاع از View است که ویژگی ها و دستورات عمومی را نشان می دهد، شکاف بین View و Model را پر می کند و داده های مدل را به قالبی پردازش می کند که برای View آسان است. می تواند عملیات روی داده ها را انجام دهد و تصمیم بگیرد که چگونه باید به View ارائه شود.
برای ساختار یک برنامه React با معماری MVVM در زمینه خرید آنلاین، می توانید فایل ها و پوشه های خود را به صورت زیر سازماندهی کنید:
-
اجزاء/: دایرکتوری حاوی اجزای رابط کاربری قابل استفاده مجدد است که بر اساس ویژگی های مربوطه سازماندهی شده اند
-
مدل ها/: دایرکتوری شامل مدل های داده یا موجودیت هایی است که اشیاء دامنه برنامه را نشان می دهند، مانند CartItemModel و ProductModel
-
مدل های نما/: دایرکتوری Hooks را مسئول مدیریت وضعیت، منطق و تعامل نماها میداند.
-
خدمات/: دایرکتوری شامل ماژول هایی برای رسیدگی به تماس های API و سایر خدمات خارجی است
-
دیدگاه ها/: دایرکتوری شامل اجزای view است که UI را بر اساس حالت ViewModel نمایش می دهد
-
روترها/: دایرکتوری پیکربندی و اجزای مسیریابی را در خود جای داده است
-
App.tsx: فایل به عنوان نقطه ورود برنامه عمل می کند
خلاصه
ما در مورد سبکهای مختلف ساختار یک برنامه React، از جمله طراحی مبتنی بر ویژگی، مبتنی بر مؤلفه، MVVM و طراحی اتمی بحث کردیم. هر رویکرد مزایا و ملاحظات خود را ارائه می دهد و به توسعه دهندگان این امکان را می دهد که مناسب ترین ساختار را برای نیازهای پروژه خاص خود انتخاب کنند. با فعال ماندن در شکل دادن به ساختار پوشه، توسعه دهندگان می توانند چالش های مدیریت یک برنامه بزرگ React را کاهش دهند و از قابلیت نگهداری و مقیاس پذیری در دراز مدت اطمینان حاصل کنند.