ساختار دایرکتوری یک وب اپلیکیشن مدرن باید چگونه باشد؟

ساختار پوشه‌ها و دایرکتوری‌های یک وب اپلیکیشن در زمان ساخت آن بسیار مهم است. شما باید بتوانید پوشه‌ها و دایرکتوری‌های خود را به بهترین شکل ممکن دسته‌بندی کرده و در یک شرایط مرتب آن‌ها را نگه دارید. این کار باعث می‌شود تا توسعه دهنده بتواند بهتر اپلیکیشن خود را درک کند و همچنین زمانی که آن‌ را به صورت متن باز منتشر کرد و یا برای هم تیمی‌های خود ارسال کرد، بدون نیاز به توضیح بتواند معماری اپلیکیشن خود را از طریق پوشه‌ها و دایرکتوری‌ها نشان دهد.

هدفی که در این مقاله دنبال می‌کنیم این است که برای پروژه‌های مدرن توسعه وب اپلیکیشن، ما نیاز داریم تا از یک ساختار درست استفاده کنیم و براساس این موضوع ما ساختار مناسبی برای پوشه‌ها و دایرکتوری‌ها به شما ارائه خواهیم داد. البته این نکته را اضافه کنم که ما همیشه نمی توانیم در فرایند توسعه یک وب اپلیکیشن این موضوع را اولویت قرار دهیم اما با تبدیل کردن این موضوع به صورت یک عادت باید تا جایی که می‌توانیم ساختار را حفظ کرده و بهترین شکل اپلیکیشن خود را مرتب کنیم. همچنین اگر پروژه حاضری داشته و قصد دارید آن را مرتب کنید باز هم می‌توانید از این مقاله استفاده کرده و ساختار پوشه‌ها را براساس این مقاله مرتب کنید. در ادامه ما در ارتباط با دایرکتوری و پوشه‌هایی صحبت می‌کنیم که هر کدام در اپلیکیشن‌های مختلف وجود داشته و کارکرد هر کدام را بررسی می‌کنیم.

دایرکتوری Assets

دایرکتوری Assets حاوی تمام تصاویر، آیکون‌ها، فایل‌های CSS، فونت‌ها و دیگر فایل‌های جانبی‌ست که در فرایند توسعه رابط کاربری وبسایت مورد استفاده قرار می‌گیرد. اگر المان سفارشی نیز دارید در این مکان می‌توانید آن را قرار دهید. در واقع این بخش هر آنچه که در ارتباط با لایه User Interface استفاده می‌شود را در خود قرار می‌دهد.

دایرکتوری Context

زمانی که از کتابخانه React و یا موارد مشابه استفاده می‌کنید برای قرار دادن تمام فایل‌های React Context می‌توانید از این پوشه استفاده کنید. در واقع هر کتابخانه یا فریمورکی که Context Based باشد می‌تواند از این الگو استفاده کرده و آن را در پروژه های خود بوجود بیاورد.

دایرکتوری Components

مطمئنا هر رابط کاربری شامل یکسری کامپوننت است که المان‌های مختلف رابط کاربری را ایجاد می‌کند. فوتر، هدر، نوار منو، کاردها و... جزو این دسته از المان‌های رابط کاربری هستند. پوشه Components در این حالت بسیار کاربردی بوده و یک تعریف استاندارد را نیز با خود حمل می‌کند.

دایرکتوری Composable

در ساختار فریمورک Vue.js یک کارکرد جدید با نام Composable وجود دارد که از API مربوط به Composition قدرت گرفته و کمک می‌کند تا Stateful logic را مجددا استفاده کرده و آن را کپسوله سازی کنید. بنابراین اگر از فریمورک ویوجی‌اس استفاده می‌کنید به کارگیری این دایرکتوری بسیار مهم است.

دایرکتوری Data

پوشه Data برای زمانی استفاده می‌شود که شما متن‌های مختلفی در اختیار دارید که قرار است در رابط کاربری خود از آن‌ها استفاده کنید. عمده این متن‌ها به صورت فایل json وجود دارند. وجود این دایرکتوری باعث می‌‌شود تا بتوانید اطلاعات اپلیکیشن خود را آسان‌تر مدیریت کرده و آن‌ها را به صورت ساده‌تری تغییر دهید.

دایرکتوری Features

این دایرکتوری شامل ویژگی‌های منحصر به فرد مربوط به هر صفحه است. برای مثال صفحه احراز هویت، کاردها، مُدال‌ها و... . در این صورت اگر هر کدام از این موارد دارای ویژگی خاصی باشند که ضرورتا باید به آن‌ها این ویژگی را نسبت بدهید از این قسمت استفاده می‌کنید.

دایرکتوری Hooks

Hooks توابعی هستند که در فریمورک‌های مختلف مخصوصا React.js مورد استفاده قرار می‌گیرند. اگر قصد استفاده و پیاده‌سازی این دسته از توابع را دارید باید این موارد را در پوشه مربوط به Hookها قرار دهید. همچنین به عنوان یک نکته اضافی اگر قصد ایجاد هوک‌های سفارشی را دارید باید نام آن‌ها با use شروع شود تا نشان دهید که قرار است از این هوک به سمت یک هوک دیگر بروید. در تصویر زیر می‌توانید مثالی از این حالت را مشاهده کنید.

دایرکتوری Layouts

زمانی که کُلیت صفحات یک وبسایت یا اپلیکیشن را طراحی کردید به وجود آوردن پوشه Layout می‌تواند بسیار مفید باشد. در این جا شما می‌توانید کامپوننت‌های Layout-Based را قرار دهید. اگر پروژه شما لایه‌بندی‌های متفاوتی دارد، بهترین پوشه‌ای خواهد بود که خواهید داشت.

دایرکتوری Modules

ماژول‌های مختلفی که به اپلیکیشن اضافه می‌کنید و این موارد به لحاظ کارکردی به صورت متفاوتی تعریف شده و حاوی حالت‌های سفارشی شده‌ای هستند می‌توانند در پوشه Modules قرار بگیرند.

دایرکتوری Pages

این دایرکتوری شامل تمام Viewهای مربوط به وب اپلیکیشن شما خواهد بود. در فریمورک‌هایی مانند Next.js و Nuxt.js تمام فایل‌های مربوط به این قسمت مطالعه شده و برای هر کدام یکسری مسیر یا Route ایجاد می‌شود. بنابراین حتی اگر از این فریمورک‌ها استفاده نمی‌کنید حتما برگه‌ها و آدرس‌های مختلف خود را در این دایرکتوری قرار دهید.

دایرکتوری Public

پوشه Public شامل تمام فایل‌هایی می‌شوند که شامل فایل‌های عمومی بوده و قرار نیست تغییر بکنند. برای مثال Favicon.ico در این دایرکتوری قرار می‌گیرد.

دایرکتوری Routes

دایرکتوری Routes جایی‌ست که تمام مسیرهای مربوط به اپلیکیشن شما در آن قرار می‌گیرند. وجود این دایرکتوری بسیار ضروری‌ست چرا که شما محلی برای مدیریت و ذخیره درست مسیرها را خواهید داشت.

دایرکتوری Utility

در این دایرکتوری تمام توابع و موارد کمکی مانند قالب یا handleApiError و... قرار گرفته و در آن ذخیره می‌شوند.

دایرکتوری View

این دایرکتوری در اپلیکیشن‌هایی که براساس ساختار MVC پیش می‌روند شامل تمام مواردی می‌شود که در برگه‌های شما نمایش داده می‌شوند. در واقع یک جایگزین برای دایرکتوری Pages خواهد بود.

در پایان

داشتن یک ساختار درست از پوشه‌ها و دایرکتوری‌ها به شما این امکان را می‌دهد تا در درست‌ترین حالت ممکن اپلیکیشن خود را توسعه و مدیریت کنید. این موارد تنها برای دیگران مهم نیست بلکه خودتان اگر بخواهید بعد از یک مدت وارد پروژه خود شوید و تغییراتی در آن ایجاد نمایید با دید بهتری این کار را انجام داده و دقیقا می‌دانید که چه مواردی را باید درست کنید.

جدای از آن زمانی که شما در جامعه متن باز یک پروژه با چنین ساختاری را ارائه کنید نشان می‌دهید که چقدر در کار خود جدی هستید و تا به چه حدی می‌توانید حرفه‌ای عمل کنید.