Qoʻshma forma komponentlarini loyihalash

Kirishga

So'nggi loyihani amalga oshirayotganda React Hook Form (RHF) va Material UI (MUI) asosida turli xil Form sahnalarini amalga oshirdim.

Loyihaning boshida Form UI'ning muvofiqligini saqlash uchun umumiy Field komponentini qurib foydalanayotgan edik.

<Field.Text
  name="name"
  label="Name"
/>

Dasturchi yuqoridagi usulda kiritish maydonlarini tezda tashkil eta oldi va React Hook Form va MUI'ni to'g'ridan-to'g'ri bog'lash zaruriyati bo'lmasdan, faqat umumiy komponentlardan foydalanish mumkin edi.

Haqiqatan ham, xizmatda quyidagi turli kiritish komponentlari taqdim etilgan edi.

• Field.Text

• Field.Select

• Field.Autocomplete

• Field.DatePicker

• Field.DateTimePicker

• Field.Checkbox

Dastlab bu tuzilma rivojlanish samaradorligi va UI muvofiqligi jihatidan yetarlicha samarali deb o'yladim.

Ammo loyiha kengayib, sahna talablarini xilma-xil bo'lgan sari, mavjud tuzilmaning cheklovlari asta-sekin ko'rinadigan bo'la boshladi.

Monolitik tuzilmaning cheklovlari

Boshqa tarafdan, dastlabki Field komponenti Label chiqarish, Validation ishlov berish, React Hook Form bilan bog'lash, Input render qilish kabi barcha vazifalarni bitta komponent ichida bajarish tuzilmasiga ega edi.

Field
├─ FormLabel
├─ Controller
└─ Input Component

Ushbu tuzilma odatiy kirish ekranida ishlatish uchun qulay edi.

Lekin haqiqiy xizmatda oddiy kirish maydonlaridan ko'ra murakkab UI shakllari ko'proq paydo bo'ldi.

Input yonida tugma bo'lgan UI

Mashhur misol sifatida kirish maydoni yonida tugma bilan joylashgan UI mavjud.

Masalan, takrorlanishni tasdiqlash, autentikatsiya raqamini so'rash, manzilni qidirish kabi funksiyalar quyidagi ko'rinishda amalga oshiriladi.

Mavjud Field.Text Label, Input, HelperText bitta komponent sifatida bog'langanligi sababli, oddiy Flex tartiblash bilan kerakli tartibni amalga oshirish qiyin bo'ldi.

• align-items: flex-start ishlatganingizda Label va tugma bir xil balandlikda joylashadi

• align-items: center ishlatganingizda Input va tugmaning vertikal tartiblanishi g'alati ko'rinadi

• align-items: flex-end ishlatganingizda asosiy holatda yaxshi, lekin xato xabar ko'rsatilganda tugma joyi birga siljiydi va tartib buziladi

Oxir-oqibat, tugma joyini moslashtirish uchun Label balandligi va masofasini hisoblagan margin-top: 22px kabi qattiq kod yozish kerak bo'ldi.

Bu Label, Input, HelperText kuchli bog'langan tuzilmasining murakkab UI ni tashkil etishga mos emasligini ko'rsatadigan misol edi.

Oraliq kirish(Range Field) uchun HelperText muammosi

Yana bir misol oraliq kirish UI edi.

Oraliq kirish foydalanuvchi nuqtai nazaridan bitta kirish elementi, lekin haqiqiy amalga oshirish boshlanish va tugash qiymatlaridan iborat ikkita kirish maydonidan tashkil topadi.

Mavjud tuzilishda har bir kirish maydoni mustaqil Field sifatida harakat qilganligi sababli, Validation Error yuzaga kelganda HelperText ham alohida chiqarildi.

Maxsus torli ekranlarda xatolik xabarlari bir nechta qatorlarga o'zgarib, umumiy balandlik sezilarli darajada oshish muammosi yuzaga keldi.

Bundan tashqari, boshlanish va tugash qiymatlari bilan bog'liq xatolik xabarlarining uzunligi bir-biridan farq qilganda, joylashuv balandligi o'zgarib, ekranning beqaror ko'rinishi muammosi ham bor edi.

Foydalanuvchilar "diapazon" deb nomlangan bitta qiymatni kiritmoqda, lekin xatolik xabarlari ikkiga tarqalib ko'rsatilayotganligi UX jihatidan hayron qoldiruvchi nuqta edi.

Umumiy komponentlarni o'zgartirish holatining paydo bo'lishi

Loyihaning murakkablashuvi bilan bir nechta sahnalarda eski Field komponenti orqali talablarni qondirish qiyinlashdi.

Natijada, ba'zi sahnalarda umumiy komponentlardan foydalanmasdan, React Hook Formning Controller va MUI komponentlarini to'g'ridan-to'g'ri ishlatish usuli qo'llanilishga boshlandi.

<Controller
  name="period"
  control={control}
  render={({ field }) => (
    <TextField {...field} />
  )}
/>

Umumiy komponent mavjud bo'lishiga qaramay, alternativ implementatsiyaning paydo bo'lishi, ushbu komponentning kengaytirilganligi yetarli emasligini koʻrsatdi.

Ushbu muammoni hal qilish uchun mavjud tuzilmani qayta ko'rib chiqishga majbur bo'ldik.

Kompozitsiya tuzilmasini ko'rib chiqish sababi

Mavjud tuzilmaning eng katta muammosi, bitta komponentning juda ko'p mas'uliyatga ega ekanligidir.

Buni hal qilish uchun Reactning Kompozitsiya Patternini ko'rib chiqamiz.

Kompozitsiya - bitta katta komponent barcha funktsiyalarni bajaradigan o'rniga, kichik rol birliklari komponentlarini birlashtirib, UI ni tashkil qilish usulidir.

Rayonli misollar quyidagi kabi.

<Card>
  <Card.Header />
  <Card.Body />
  <Card.Footer />
</Card>

Har bir komponent o'z vazifasiga e'tibor qaratadi va kerakli shaklda erkin birlashtirish mumkin.

Bunday tuzilma Design Systemda ham tez-tez qo'llaniladigan naqsh bo'lib, kengaytirilganlik va qayta ishlatilish imkoniyatining yuqoriligi bilan ajralib turadi.

Fieldni rolga asoslangan tarzda ajratish

Oldin bitta komponent Label, Validation, Form ulanishi, Error chiqarish kabi hamma narsani bajarardi.

Bu esa quyidagicha rol birliklariga ajratildi.

<Field>
  <Field.Label />
  <Field.Control />
  <Field.HelperText />
</Field>

Har bir komponent quyidagi rollarni bajaradi.

• Field: Layout tuzish va umumiy holatni boshqarish

• Field.Label: Labelni chiqarish

• Field.Control: React Hook Form ulanishi va kirish elementini render qilish

• Field.HelperText: Xato xabarlari va ko'rsatma matnini chiqarish

Rollarni ajratganimizda komponentning mas'uliyati aniq bo'ldi va UIni ancha moslashuvchan tarzda tashkil qilish imkoniyati paydo bo'ldi.

Eng katta o'zgarish, Field.Group

Ushbu refaktoringda eng muhim o'zgarish Field.Groupning joriy etilishi bo'ldi.

Amaldagi xizmatda bir nechta kirish elementi bitta ma'noni anglatadigan holatlar ko'p uchraydi.

Ommabop misol - davrni tanlash UIsi.

<Field>
  <Field.Label required>
   기간
  </Field.Label>

  <Field.Group>
   <Field.Control name="startDate" />
   <span>~</span>
   <Field.Control name="endDate" />
  </Field.Group>

  <Field.HelperText />
</Field>

Oldingi tuzilmada boshlanish va tugash sanalari mustaqil maydonlar sifatida harakat qilgani uchun xato xabarlari takroran chiqarilib, guruh bo'yicha UXni taqdim etish qiyin bo'ldi.

Boshqa tomondan, Field.Groupni joriy etgandan so'ng bir nechta kirish elementlarini bitta maydon sifatida boshqarishimiz mumkin bo'ldi va Layout va Validation jarayoni ham ancha tabiiy ravishda tashkil qilindi.

Qoʻshilish shaklining keltirgan kengayishi

Composition tuzilmasi joriy etilgandan soʻng, yangi talablar paydo boʻlganda maxsus komponentlar yaratish zaruriyati deyarli qolmadi.

Masalan, teg kiritish UI'sini mavjud komponentlarni qoʻshish orqali amalga oshirish mumkin.

<Field>
  <Field.Label>
    Tags
  </Field.Label>

  <Field.Control
    render={() => (
      <>
        <TextField />
        <ChipList />
      </>
    )}
  />

  <Field.HelperText />
</Field>

Shunday qilib, yangi funksiyalar qoʻshish o'rniga, mavjud komponentlarni birlashtirib turli xil UI'larni yaratish imkoniyati yaratildi.

Tatbiq natijasi

Composition tuzilmasini tatbiq qilgandan so'ng, quyidagi ta'sirlarni qo'lga kiritish imkoniyati mavjud edi.

• Form UI tuzilmasining muvofiqligini ta'minlash

• Murakkab kiritish UI'ga moslashuvchanlikni oshirish

• Yangi kiritish turini qo'shish osonligi

• MUI slotProps dan foydalanishning ko'payishi

• Umumiy komponentlarni chetlab o'tishning kamayishi

• Saqlash va ta'mirlash xarajatlarini kamaytirish

• Qayta foydalanish imkoniyatini oshirish

Xususan, yangi talablar yuzaga kelganda, mavjud komponentlarni oʻzgartirishdan koʻra birlashmalar orqali hal qilish imkoniyati yaratildi va kengayish ancha yuqori boʻldi.

Xulosa qilib

Dastlab men faqat React Hook Form wrapper komponentini yaxshilash ustida ishlayotganimni o'yladim.

Ammo aslida " umumiy komponentlarni qanday loyihalashtirish kerakki, uzoq muddatda kengaytiriladigan bo'lsin" degan masala ko'proq muhim edi.

Bu tajriba orqali hamma funksiyalarni bitta komponentga qo'shish Monolithic usulidan ko'ra, rolni ajratish va kerakli funksiyalarni birlashtirish Composition usuli ancha moslashuvchan ekanligini tasdiqlay oldim.

Kelgusi reja shu orqali Form komponentidan tashqari, Design Systemning umumiy qismida ushbu dizayn usulini qo'llab, qayta foydalanish va kengaytirish imkoniyatlarini oshirishdir.

nature