کامپوننت های آینده نگر: قدرت اجزای قابل ترکیب

Summarize this content to 400 words in Persian Lang
به عنوان توسعه دهندگان برنامه های وب، ما دائماً به دنبال راه هایی برای ساختن برنامه های قوی تر، مقیاس پذیرتر و قابل نگهداری هستیم. در حالی که رویکردهای متعددی برای ساختاربندی یک جزء وجود دارد، من می‌خواهم موردی را برای آن مطرح کنم الگوی اجزای قابل ترکیب، که در بسیاری از سناریوها مزایای قابل توجهی را ارائه می دهد.

توجه: مثال های این مقاله برای زاویه ای است، اما این الگو را می توان در هر چارچوبی استفاده کرد.

داستان جو و شکل در حال تکامل: درس طراحی کامپوننت

یک توسعه دهنده سخت کوش TechCorp، جو یک داستان کاربر را انتخاب کرد:

“به عنوان یک کاربر می خواهم بتوانم ثبت نام کنم تا بتوانم محصولی را دریافت کنم”

او با اشتیاق، یک جزء براق ساخت که تمام زمینه های مورد نیاز را بدون زحمت انجام می داد.

@Component({
selector: ‘techcorp-user-registration’,
template: `

`
})
export class UserRegistrationComponent { … }

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

فرم کاملاً کار کرد. کاربران می توانستند برای یک حساب کاربری ثبت نام کنند و جو از اجرای پاک خود احساس غرور کرد. تیم به سمت ویژگی های دیگر رفت و همه چیز خوب بود.

Sprint 2: یک فرم جدید ظاهر می شود

چند سرعت می گذرد و برنامه TechCorp در حال رشد است. در بخش دیگری از برنامه، یک فرم مشابه مورد نیاز است. جو مشتاقانه داستان کاربر جدید را انتخاب می کند:

به عنوان یک مشتری بالقوه، می‌خواهم با ارائه نام، ایمیل، شرکت و نقش خود برای یک نسخه نمایشی محصول ثبت نام کنم تا بتوانم محصول را برای نیازهای تجاری خود ارزیابی کنم.»

جو متوجه شد که این فرم جدید کاملاً شبیه فرم ثبت نام اصلی است اما با تفاوت های جزئی.

به جای کپی کردن کد، او تصمیم گرفت با ایجاد یک مؤلفه قابل تنظیم که می تواند هر دو فرم را با حداقل تلاش مدیریت کند، رویکرد انعطاف پذیرتری در پیش بگیرد:

@Component({
selector: ‘techcorp-form’,
template: `

`
})
export class TechCorpFormComponent {
@Input() formFields!: Array<{label: string, type: string, name: string, placeholder: string}>;
@Output() formSubmit = new EventEmitter<Record<string, string>>();

formData: Record<string, string> = {};

submitForm() {
this.formSubmit.emit(this.formData);
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با استفاده از این مؤلفه قابل تنظیم جدید، جو هر دو فرم را به راحتی پیاده سازی کرد.

او فرم ثبت نام اصلی را تنظیم می کند:

@Component({
selector: ‘techcorp-user-registration’,
template: “
})
export class UserRegistrationComponent {
registerFormFields = [
{ label: ‘Full Name’, type: ‘text’, name: ‘fullName’, placeholder: ‘Enter your full name’ },
{ label: ‘Email’, type: ’email’, name: ’email’, placeholder: ‘Enter your email’ },
{ label: ‘Password’, type: ‘password’, name: ‘password’, placeholder: ‘Enter your password’ }
];
}

// …submit method

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

و مجدداً از مؤلفه قابل تنظیم در ثبت دمو استفاده می کند:

@Component({
selector: ‘techcorp-demo-registration’,
template: `

`
})
export class DemoRegistrationComponent {
demoFormFields = [
{ label: ‘Full Name’, type: ‘text’, name: ‘fullName’, placeholder: ‘Enter your full name’ },
{ label: ‘Email’, type: ’email’, name: ’email’, placeholder: ‘Enter your email’ },
{ label: ‘Company’, type: ‘text’, name: ‘company’, placeholder: ‘Enter your company name’ },
{ label: ‘Role’, type: ‘text’, name: ‘role’, placeholder: ‘Enter your role’ }
];
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

جو هیجان زده بود. “ببینید این چقدر کارآمد است!” او فکر کرد. تنها با یک جزء قابل تنظیم، او می‌توانست هر دو فرم را بدون کپی کردن کد مدیریت کند.

اسپرینت 3 و فراتر از آن: پیچیدگی به وجود می‌آید

اما پس از آن پیچ و خم آمد. یک داستان کاربر جدید نیاز به تأیید اعتبار اضافی برای فیلد ایمیل دارد، اما فقط در فرم ثبت نام اصلی.

“به عنوان یک کاربر آگاه به امنیت، مایلم فرآیند ثبت نام دامنه ایمیل من را تایید کند تا اطمینان حاصل شود که فقط ایمیل های شرکتی پذیرفته می شوند.”

جو برای رسیدگی به این مورد خاص، یک ویژگی بولی جدید به مؤلفه پیکربندی خود اضافه کرد:

@Component({
selector: ‘techcorp-form’,
template: `

`
})
export class FormComponent {
@Input() formFields!: Array<{
label: string;
type: string;
name: string;
placeholder?: string;
}>;
@Input() validateEmailDomain = false;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

جو فکر کرد: «هیچ چیز مهمی نیست. هنوز قابل کنترل است.»

اما سپس منحنی دیگری در اسپرینت 4 ضربه خورد. فرم ثبت نسخه آزمایشی به یک فیلد اضافی در محموله ارسالی خود (منبع) نیاز داشت، در حالی که فرم ثبت نام اصلی به آن نیاز نداشت.

من به عنوان یک عضو تیم بازاریابی، می‌خواهم منبع ثبت‌نام‌های کاربران را دنبال کنم تا بفهمم کدام کانال‌ها مؤثرتر هستند.»

جو متوجه شد که منطق شرطی بیشتری را اضافه می کند:

@Component({
selector: ‘techcorp-form’,
template: `

`
})
export class FormComponent {
@Input() formFields!: Array<{ label: string; type: string; name: string; placeholder?: string }>;
@Input() validateEmailDomain = false;
@Input() includeSource = false;

formData: Record<string, string> = {};

onSubmit() {
if (this.validateEmailDomain) {
// Perform email domain validation
}
if (this.includeSource) {
this.formData[‘source’] = ‘demo_registration’;
}
console.log(this.formData);
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

Joe's Epiphany: قدرت اجزای قابل ترکیب

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

جو که در مورد این مسیر جدید هیجان زده شده بود، دست به کار شد تا کد را بازسازی کند.

ابتدا فرم ثبت نام:

// Regular Registration Form
@Component({
selector: ‘techcorp-user-registration’,
template: `

`
})

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با انجام این کار، او متوجه شد که اعتبار سنجی دامنه باید بخشی از ورودی ایمیل باشد:

اکنون این قابلیت درون مولفه ورودی ایمیل کپسوله شده است و آن را قابل استفاده مجدد و قرار دادن منطقی می کند. این رویکرد به اصل تفکیک نگرانی ها پایبند است و اطمینان می دهد که اعتبار سنجی مربوط به ایمیل در جایی که متعلق به آن است – در خود مؤلفه ورودی ایمیل – انجام می شود.

سپس برای فرم ثبت نام دمو:

@Component({
selector: ‘techcorp-demo-registration’,
template: `

`
})
export class DemoRegistrationComponent {
@Output() formSubmit = new EventEmitter<Record<string, string>>();

onSubmit() {
// Gather form data
const formData = {}; // Collect data from child components
formData[‘source’] = ‘demo_registration’; // Add source tracking
this.formSubmit.emit(formData);
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

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

حالا جو بالاخره می تواند استراحت کند و از تعطیلات سزاوارش لذت ببرد.

درک ارزش اجزای قابل ترکیب

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

تکرار کد != تکرار دانش

یکی از استدلال های رایج در برابر مولفه های ترکیبی، تکراری بودن کد است. با این حال، درک آن بسیار مهم است تکرار کد != تکرار دانش.

همانطور که در “برنامه نویس عملگرا” توسط D. Thomas و A. Hunt به زیبایی بیان شده است:

«خودت را تکرار نکن (DRY) درباره تکرار است دانش، از قصد.”

نه در مورد “خطوط منبع را کپی و جایگذاری نکنید”.

سناریوی مولفه قابل تنظیم Joe را در نظر بگیرید: دو فرم مختلف در برنامه ممکن است دقیقاً از مجموعه یکسانی از اجزای کوچکتر تشکیل شده باشند. در نگاه اول، این ممکن است تکراری به نظر برسد. با این حال، فرم ها اهداف منطقی متفاوتی را دنبال می کنند – شاید یکی برای ثبت نام کاربر و دیگری برای نسخه ی نمایشی باشد.

شباهت در ساختار صرفاً است تصادفی. هر فرم مفهومی متمایز را در مدل دامنه شما نشان می‌دهد و استفاده مجدد از مؤلفه‌ها گواهی بر ماهیت ماژولار و خوب طراحی شده آن‌ها است.

ورودی های بولی

جو از استفاده از ورودی‌های بولی متعدد که پیچیدگی ایجاد می‌کردند، به جای ایجاد مؤلفه‌های تخصصی که رفتارهای خاص را مدیریت می‌کردند، فاصله گرفت.

ورودی های بولی در یک جزء می تواند چیز بدی باشد در مثال اول جو، اینطور است. همانطور که مارتین فاولر به خوبی توضیح داده است، بسیار شبیه به بوی کد “Argument Flag” است.

خلاصه

در حالی که رویکرد قابل تنظیم انعطاف پذیری را ارائه می دهد و به نظر می رسد خشک است، می تواند منجر به:

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

مولفه ترکیب پذیر چندین مزیت قانع کننده را ارائه می دهد:

انعطاف پذیری: به راحتی یک فرم را بدون تأثیر بر دیگری تغییر دهید
خوانایی: ساختار فرم در یک نگاه واضح و قابل درک است و درک کد را افزایش می دهد.
تست پذیری: اجزای کوچکتر و متمرکز آسان تر برای آزمایش واحد هستند و منجر به کد قوی تر می شوند.
جداسازی نگرانی ها: هر جزء منطق و ارائه خود را در بر می گیرد و به معماری مبتنی بر کامپوننت Angular پایبند است.
مقیاس پذیری: برنامه خود را با ایجاد فرم های جدید از اجزای موجود مقیاس کنید

@Component({
  selector: 'techcorp-user-registration',
  template: `
    
  `
})
export class UserRegistrationComponent { ... }

@Component({
  selector: 'techcorp-form',
  template: `
    
  `
})
export class TechCorpFormComponent {
  @Input() formFields!: Array<{label: string, type: string, name: string, placeholder: string}>;
  @Output() formSubmit = new EventEmitter<Record<string, string>>();

  formData: Record<string, string> = {};

  submitForm() {
    this.formSubmit.emit(this.formData);
  }
}

@Component({
  selector: 'techcorp-user-registration',
  template: ``
})
export class UserRegistrationComponent {
  registerFormFields = [
      { label: 'Full Name', type: 'text', name: 'fullName', placeholder: 'Enter your full name' },
      { label: 'Email', type: 'email', name: 'email', placeholder: 'Enter your email' },
      { label: 'Password', type: 'password', name: 'password', placeholder: 'Enter your password' }
    ];
  }

  // ...submit method

@Component({
  selector: 'techcorp-demo-registration',
  template: `
    
  `
})
export class DemoRegistrationComponent {
  demoFormFields = [
    { label: 'Full Name', type: 'text', name: 'fullName', placeholder: 'Enter your full name' },
    { label: 'Email', type: 'email', name: 'email', placeholder: 'Enter your email' },
    { label: 'Company', type: 'text', name: 'company', placeholder: 'Enter your company name' },
    { label: 'Role', type: 'text', name: 'role', placeholder: 'Enter your role' }
  ];
}

@Component({
  selector: 'techcorp-form',
  template: `
    
  `
})
export class FormComponent {
  @Input() formFields!: Array<{
    label: string;
    type: string;
    name: string;
    placeholder?: string;
  }>;
  @Input() validateEmailDomain = false;
}

@Component({
  selector: 'techcorp-form',
  template: `
    
  `
})
export class FormComponent {
  @Input() formFields!: Array<{ label: string; type: string; name: string; placeholder?: string }>;
  @Input() validateEmailDomain = false;
  @Input() includeSource = false;

  formData: Record<string, string> = {};

  onSubmit() {
    if (this.validateEmailDomain) {
      // Perform email domain validation
    }
    if (this.includeSource) {
      this.formData['source'] = 'demo_registration';
    }
    console.log(this.formData);
  }
}

// Regular Registration Form
@Component({
  selector: 'techcorp-user-registration',
  template: `
    
  `
})

@Component({
  selector: 'techcorp-demo-registration',
  template: `
    
  `
})
export class DemoRegistrationComponent {
  @Output() formSubmit = new EventEmitter<Record<string, string>>();

  onSubmit() {
    // Gather form data
    const formData = {}; // Collect data from child components
    formData['source'] = 'demo_registration'; // Add source tracking
    this.formSubmit.emit(formData);
  }
}