Summarize this content to 400 words in Persian Lang
من از سال 2009 با توسعه وب کار می کنم و در طول سال ها شاهد تحول چشمگیری در چارچوب ها و استانداردهای توسعه بوده ام. یکی از مهم ترین تغییرات، ظهور بود توسعه مبتنی بر مؤلفه، که امروزه به عنوان یکی از رویکردهای اصلی خودنمایی می کند.
توسعه مبتنی بر کامپوننت یک رویکرد توسعه نرم‌افزار است که در آن سیستم‌ها از قطعات مستقلی به نام اجزا ساخته می‌شوند که می‌توانند در بخش‌های مختلف پروژه یا حتی در پروژه‌های مختلف مورد استفاده مجدد قرار گیرند. در جلو، ابزارهایی مانند React، Angular و Vue.js به شدت از این مفهوم استفاده می کنند.
همانطور که می دانیم، هیچ چیز کامل نیست و این رویکرد با چالش هایی همراه است، مانند:
اندازه ایده آل برای یک قطعه چیست؟
چگونه باید سازماندهی شوند؟
چگونه می توانیم قابلیت استفاده مجدد را حفظ کنیم؟
طراحی اتمی به ما کمک می کند تا با این چالش ها مقابله کنیم.
طراحی اتمی چیست؟
طراحی اتمی یک روش طراحی رابط است که توسط براد فراست پیشنهاد شده است، با هدف ایجاد سیستم های طراحی سازگارتر و مقیاس پذیرتر. این بر اساس این مفهوم است که یک رابط را می توان به قطعات کوچک و قابل استفاده مجدد تقسیم کرد.
در توسعه front-end، Atomic Design رویکردی برای ایجاد سیستم‌های جزء به روش مدولار و مقیاس‌پذیر است. این متدولوژی امکان ساخت رابط را از اجزای قابل استفاده مجدد، سازماندهی سلسله مراتبی از ساده ترین تا پیچیده ترین، تسهیل توسعه، نگهداری و مقیاس پذیری پروژه را فراهم می کند.
طراحی اتمی پیشنهاد می کند اجزاء را به 5 مرحله تقسیم کنید:
1. اتم ها: اینها ساده ترین و ابتدایی ترین عناصر رابط هستند که نمی توان آنها را به قسمت های کوچکتر تقسیم کرد. آنها مستقل هستند و معمولاً هیچ رفتاری به تنهایی ندارند. اتم‌ها می‌توانند تگ‌های اصلی HTML یا متغیرهای CSS مانند رنگ‌ها، فونت‌ها، فاصله‌ها و انیمیشن‌ها باشند.
2. مولکول ها: اینها ترکیبی از اتم ها هستند که با هم کار می کنند تا یک عملکرد حداقلی را تشکیل دهند. مولکول ها رفتار مشخص تری دارند و اغلب بخش های کوچکی از رابط را نشان می دهند.
3. موجودات زنده: گروه هایی از مولکول ها و اتم ها هستند که بخش های پیچیده تر و متمایزتری از سطح مشترک را تشکیل می دهند. یک موجود زنده ممکن است یک ناحیه عملکردی کامل از یک صفحه را نشان دهد.
4. الگوها: الگوها طرح‌بندی‌هایی هستند که از ارگانیسم‌ها تشکیل شده‌اند که از نظر ساختاری سازماندهی شده‌اند تا ساختار یک صفحه را تشکیل دهند. با این حال، قالب ها هنوز در سطح طرح بندی هستند، بدون داده های خاص.
5. صفحات: صفحات نمونه های خاصی از الگوها هستند که در آن محتوا و داده های واقعی پر می شود.
برای کسانی که می خواهند عمیق تر غواصی کنند، نسخه کامل مقاله در Medium موجود است. در آنجا، مثال‌های عملی، قطعه‌های کد و تصاویر را برای نشان دادن هر مفهوم با جزئیات اضافه کردم.
👉 مقاله کامل را در Medium بررسی کنید
امیدوارم این محتوا برای کسانی که به دنبال بهبود سازماندهی و مقیاس پذیری پروژه های فرانت اند خود هستند مفید باشد! اگر سوالی دارید یا می خواهید در مورد موضوع بیشتر بحث کنید، در اینجا یا در Medium نظر دهید.
من از سال 2009 با توسعه وب کار می کنم و در طول سال ها شاهد تحول چشمگیری در چارچوب ها و استانداردهای توسعه بوده ام. یکی از مهم ترین تغییرات، ظهور بود توسعه مبتنی بر مؤلفه، که امروزه به عنوان یکی از رویکردهای اصلی خودنمایی می کند.
توسعه مبتنی بر کامپوننت یک رویکرد توسعه نرم‌افزار است که در آن سیستم‌ها از قطعات مستقلی به نام اجزا ساخته می‌شوند که می‌توانند در بخش‌های مختلف پروژه یا حتی در پروژه‌های مختلف مورد استفاده مجدد قرار گیرند. در جلو، ابزارهایی مانند React، Angular و Vue.js به شدت از این مفهوم استفاده می کنند.
همانطور که می دانیم، هیچ چیز کامل نیست و این رویکرد با چالش هایی همراه است، مانند:
- اندازه ایده آل برای یک قطعه چیست؟
- چگونه باید سازماندهی شوند؟
- چگونه می توانیم قابلیت استفاده مجدد را حفظ کنیم؟
طراحی اتمی به ما کمک می کند تا با این چالش ها مقابله کنیم.
طراحی اتمی چیست؟
طراحی اتمی یک روش طراحی رابط است که توسط براد فراست پیشنهاد شده است، با هدف ایجاد سیستم های طراحی سازگارتر و مقیاس پذیرتر. این بر اساس این مفهوم است که یک رابط را می توان به قطعات کوچک و قابل استفاده مجدد تقسیم کرد.
در توسعه front-end، Atomic Design رویکردی برای ایجاد سیستم‌های جزء به روش مدولار و مقیاس‌پذیر است. این متدولوژی امکان ساخت رابط را از اجزای قابل استفاده مجدد، سازماندهی سلسله مراتبی از ساده ترین تا پیچیده ترین، تسهیل توسعه، نگهداری و مقیاس پذیری پروژه را فراهم می کند.
طراحی اتمی پیشنهاد می کند اجزاء را به 5 مرحله تقسیم کنید:
1. اتم ها: اینها ساده ترین و ابتدایی ترین عناصر رابط هستند که نمی توان آنها را به قسمت های کوچکتر تقسیم کرد. آنها مستقل هستند و معمولاً هیچ رفتاری به تنهایی ندارند. اتم‌ها می‌توانند تگ‌های اصلی HTML یا متغیرهای CSS مانند رنگ‌ها، فونت‌ها، فاصله‌ها و انیمیشن‌ها باشند.
2. مولکول ها: اینها ترکیبی از اتم ها هستند که با هم کار می کنند تا یک عملکرد حداقلی را تشکیل دهند. مولکول ها رفتار مشخص تری دارند و اغلب بخش های کوچکی از رابط را نشان می دهند.
3. موجودات زنده: گروه هایی از مولکول ها و اتم ها هستند که بخش های پیچیده تر و متمایزتری از سطح مشترک را تشکیل می دهند. یک موجود زنده ممکن است یک ناحیه عملکردی کامل از یک صفحه را نشان دهد.
4. الگوها: الگوها طرح‌بندی‌هایی هستند که از ارگانیسم‌ها تشکیل شده‌اند که از نظر ساختاری سازماندهی شده‌اند تا ساختار یک صفحه را تشکیل دهند. با این حال، قالب ها هنوز در سطح طرح بندی هستند، بدون داده های خاص.
5. صفحات: صفحات نمونه های خاصی از الگوها هستند که در آن محتوا و داده های واقعی پر می شود.
برای کسانی که می خواهند عمیق تر غواصی کنند، نسخه کامل مقاله در Medium موجود است. در آنجا، مثال‌های عملی، قطعه‌های کد و تصاویر را برای نشان دادن هر مفهوم با جزئیات اضافه کردم.
👉 مقاله کامل را در Medium بررسی کنید
امیدوارم این محتوا برای کسانی که به دنبال بهبود سازماندهی و مقیاس پذیری پروژه های فرانت اند خود هستند مفید باشد! اگر سوالی دارید یا می خواهید در مورد موضوع بیشتر بحث کنید، در اینجا یا در Medium نظر دهید.
