ساختار برنامه React - اصول طراحی اتمی

ساختار برنامه React - اصول طراحی اتمی

Structuring your React Application — Atomic Design Principles

توسط : admin
هنگامی که من برای اولین بار برنامه نویسی را شروع کردم ، واقعاً نمی دانستم که مفاهیم انتزاعی برنامه نویسی مانند الگوهای طراحی یا ساختار پرونده ها چیست یا چرا بسیار مهم بودند تا اینکه اولین برنامه خود را برای هتل نوشتم.

 

این برنامه برای کمک به هتل در چاپ رسید برای مشتریان مربوطه بود. یک سال بعد ، از طرف مدیریت هتل از من خواسته شد که برخی از ویژگی های جدید را برای این برنامه پیاده سازی کنم. متأسفانه ، من در نهایت مجبور شدم که کل برنامه را از ابتدا بازنویسی کنم ، زیرا ساختار برنامه در ابتدا خیلی ضعیف پیاده سازی شده و بسیار شبیه بازی windows-mine-sweeper بود که در جوانی بازی کرده بودم. 

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

 

معرفی

ابتدا می خواهم نام Brad Frost  را بخاطر معرفی اصول طراحی اتمی فریاد بزنم. این صادقانه سفر برنامه نویسی من را تغییر داد و باعث شد من حل مسئله را به روشی جامع تر ببینم.

 

هدف مقاله کمک به مردم برای درک و کشف روشی متفاوت برای ساختار برنامه های پیش روی ما است. طراحی اتمی مفهومی از شکستن رابط های کاربری به عناصر ساده تر و کوچکتر است که در نهایت به ایجاد UI سازگارتر با قابلیت نگهداری بهتر کمک می کند.

 

کامپوننت سازی در React

من فکر می کنم یکی از مفاهیم هیجان انگیزی که React وارد سیستم طراحی فرانت کرده است ، ترکیب سازی یا ایجاد مولفه ها(کامپوننت ها) است. با این حال ، در بسیاری از پروژه های React که مشاهده کرده ام ، بسیاری از توسعه دهندگان در استفاده کامل از این مفهوم کوتاهی می کنند و به طور مکرر اصل DRY را نقض می کنند. این احتمالاً به دلیل عدم وجود بهترین روشهای استاندارد برای الگوهای طراحی در React Docs است، زیرا بیشتر  ریپازیتوری ها بر اساس نظرات افراد کمک کننده در آن ساخته شده است. با این حال React Docs ترکیبی را با یک مثال خوب پیشنهاد می کند که سطوح مختلفی از سفارشی سازی کامپوننت ها را نشان می دهد.

 

این مفاهیم را می توان در بیشتر فریمورکهای فرانت اعمال کرد ، اما من React را انتخاب کردم زیرا همان چیزی است که با آن بسیار راحت هستم (همچنین می دانم که این کتابخانه UI متعلق به فیسبوک است)

 

همچنین React (Docs) یک رویکرد design-first  را برای توسعه frontend پیشنهاد می کند - در این روش ، یک تیم طراح UI / UX برای اجرای تیم توسعه دهنده شبیه سازی می کند ، تیم اکنون می تواند شکستن مدل های UI را به سلسله مراتب مولفه ها انجام دهد. شکستن اجزا براساس نوعی سلسله مراتب یکی از مبانی هنگام اجرای طراحی اتمی است. اتم ها ، مولکول ها ، ارگانیسم ها ، الگوها و صفحات به ساخت سلسله مراتب کمک می کنند.

 

چرا باید از طراحی اتمی استفاده کنیم؟

هنگامی که من برای اولین بار از این روش استفاده کردم ، در یک برنامه کاربردی بزرگ React Single Page (SPA) بود. ما مولفه های سفارشی  بسیار زیادی را برای ایجاد نیاز داشتیم و  همچنین راه حلی نبود که با مشاهده چارچوب ها و کتابخانه های CSS موجود بتوانیم پیدا کنیم. بنابراین نتیجه ، ایجاد این مولفه ها  بوسیله ساخت آنها با عناصر HTML و استفاده از CSS سفارشی بود. مفهوم داشتن یک مکان با تمام اجزا در واقع بسیار جالب بود و در واقع به زمان توسعه سریعتر منجر شد.

با الهام گرفتن این اصطلاحات از شیمی ، برد فراست مفهوم طراحی اتمی و استفاده از آن با مولفه های UI را معرفی کرد. از آنجا که عناصر سازنده وب سایت ها عناصر HTML هستند و دقیقاً مانند اتم ها ، این عناصر با هم ترکیب شده و صفحات پیچیده را تشکیل می دهند، هر صفحه طراحی شده توسط توسعه دهندگان را می توان به اجزای تشکیل دهنده کوچکتر تقسیم کرد ، شبیه آنچه در شیمی با مولکول ها و ارگانیسم ها آموزش داده می شود.

طراحی اتمی در ری اکت
طراحی اتمی در react

 

طراحی اتمی ، اتم ها ، مولکول ها ، ارگانیسم ها ، الگوها و صفحات هستند که همزمان با هم کار می کنند تا سیستم های طراحی رابط موثر تر ایجاد کنند.

 

اتم ها کوچکترین اجزای ممکن هستند ، مانند دکمه ها ، عناوین ، ورودی ها ، متن. اتم های رابط ما به عنوان عناصر اصلی سازنده اجزای ما عمل می کنند و بدون توقف عملکرد نمی توانند بیشتر تجزیه شوند. مولکول هایی که نامگذاری شده اند از دو یا چند اتم تشکیل شده اند ، مولکول ها گروه های نسبتاً ساده ای از عناصر UI هستند که با هم به عنوان یک واحد کار می کنند. به عنوان مثال ، یک Textfield شامل input HTML ، برچسب و پیام خطا یا جعبه جستجو متشکل از HTML TextInput و یک دکمه است. ارگانیسم ها اجزای UI نسبتاً پیچیده ای هستند که از گروه هایی از مولکول ها و / یا اتم ها و / یا دیگر موجودیت ها تشکیل شده اند. این موجودیت ها بخشهای مشخصی از یک رابط را تشکیل می دهند.

 

طراحی اتمی در ری اکت

 

الگوها، component ها را در یک طرح قرار می دهند و ساختار محتوای اساسی طراحی را نشان می دهند. آنها اساساً یک ساختار اسکلتی از شکل ظاهری صفحه بدون اجزای صفحه هستند. صفحات نمونه های خاصی از الگوها هستند که نشان می دهد UI با محتوای نماینده واقعی در آن به نظر می رسد. الگوها و صفحات (صفحات فقط نمونه هایی از الگوها هستند) همچنین حاوی ارگانیسم ها ، مولکول ها و اتم ها هستند. بهم پیوستن این اجزای کوچکتر ، رابط های کاربری ما در برنامه های ما را تشکیل می دهد.

 

structure directory in react

 

بنابراین با استفاده از  component هایی که قبلاً بحث شد ، می توانیم یک ساختار پوشه را برای شروع برنامه (خیالی) ایجاد کنیم. به یاد داشته باشید که موقعیت پوشه ها ممکن است در چندین کد مختلف متفاوت باشد ، اما بسیار مهم است که قبل از اجرای آن با تیم خود در میان بگذارید. در تصویر بالا ، من یک پوشه Components برای قرار دادن تمام اجزای استفاده شده در frontend دارم ، همچنین یک پوشه UI دارم تا اجزای طراحی کوچکتر خود را از ساختارهای سطح صفحه جدا کنم.

 

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

 

مزیت ها

مولفه ها را می توان جدا از برنامه توسعه داد ، قبل از وارد کردن آنها در برنامه خود ، روی ابزارهایی مانند راهنمای استایل ، آزمایش و مشاهده کرد. این همچنین بدان معنی است که بیش از حد به منطق برنامه back-end برای شروع توسعه front-end اعتماد نمی شود.

 

پس از ایجاد مجموعه ای از الگوها ، می توانیم روند ساخت سریع تری داشته باشیم ، در صورت نیاز به تغییر در طرح ها ، انعطاف پذیری بیشتری داریم. طراحی ها می توانند سازگارتر باشند زیرا ما در حال استفاده مجدد از بسیاری از اجزای موجود هستیم.

 

این الگو همچنین به ما کمک می کند CSS خود را بسیار بهتر مدیریت کنیم زیرا CSS ما به مولفه های خاصی گره خورده است. بنابراین بسته به معماری برنامه خود فقط باید CSS مورد استفاده در اجزای ارائه شده را ارائه دهید.

 

معایب

استفاده از media query ها سخت تر می شود ، زیرا وقتی اجزا از هم جدا هستند راهی برای تعیین اندازه ظروف اصلی ندارید. اجزا هیچ اطلاعی از عرض خود ندارند بنابراین تغییر اندازه در پاسخ به تغییر در اندازه واقعی صفحه اتفاق می افتد.

 

با معرفی اجزای طرح بندی که اجزای شما را احاطه کرده و متناسب با آنها اندازه آنها را تغییر می دهید ، این راه حل قابل اصلاح است. این اجزا خصوصیات طرح CSS مانند flex ، grid و غیره را اجرا می کنند.

 

نتیجه گیری

در حال حاضر ، از تصاویر صفحه بالا ، ما فقط برنامه خود را فقط با اجزای موجود داریم. آنچه ما نیاز داریم روشی قابل اعتماد برای وارد کردن منطق تجاری خود برای به روزرسانی این مولفه ها است. من فکر می کنم این روش خوبی است که لایه منطق خود را از ویوو های خود دور کنید. به این ترتیب اشکال زدایی از مشکلات کد آسان تر است ، به ویژه هنگامی که پروژه شما شروع به گسترش می کند. ما می توانیم با اتخاذ رویکردهای مختلف به این مهم دست پیدا کنیم. من شخصاً دوست دارم از مولفه های مرتبه بالاتر (HOC) استفاده کنم و صفحات را با هر حالت با استفاده از پراپ های مربوط به صفحه خاص پر کنم. این حالت می تواند مجموعه ای از تماس های API در اطراف برنامه باشد. سایر راه حل ها می توانند الگوی props rendering  یا react-hook باشند.

 

یک توضیح انتزاعی تر از این می تواند این باشد که تصور کنید اجزای شما بطری های خالی مانند رنگ و اندازه تصویر زیر هستند. شما تصمیم گرفتید هر مایع بطری را با رنگ دیگری پر کنید. این می تواند شبیه شما باشد که حالت اجزای مختلف را به روز می کنید اما در صورت مایع بودن حالت و بطری جز شماست. پر کردن هر بطری خالی با رنگ مایع متفاوت روشی ساده تر است.

 

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

 

 

 

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

پوشه بندی اتمی در ری اکت

 

 

حتی اگر React غیر عملیاتی باشد ، توصیه می شود حداکثر به سه یا چهار پوشه تو در تو در یک پروژه محدود شوید. با این حال ، نام مستعار در jest ، webpack و babel تعبیه شده است تا به شما در حل ورودی های نسبی کمک کند تا import ]های شما بیش از حد ناخوشایند به نظر نرسد.

 

منبع 

برچسب ها

نظرات :

در عرض چند دقیقه برای ایجاد حساب

کاربری خود اقدام کنید


اکنون حساب کاربری خود را ایجاد کنید!


ایجاد حساب کاربری

با ثبت نام در نیلوتک از آخرین بروز رسانی های آموزش ها و مقالات سایت مطلع شوید