blog

Deyvlime qayta foydalanish dizayni bilan texnik xizmat ko'rsatishni oshirish

NEXTREE.

• 6 min read
Deyvlime qayta foydalanish dizayni bilan texnik xizmat ko'rsatishni oshirish

1. Fon

Devlime ishlab chiqilishi bir nechta ishlab chiquvchilar har birining funktsiyalari va domenlaridan javobgar bo'lgan holda bir vaqtda rivojlanish asosida amalga oshirildi. Vizend platformasi asosida ishlab chiqilganligi sababli loyiha tuzilishi yoki asosiy dasturlash usuli ma'lum darajada bir xil bo'lgan va umumiy arxitektura yaxshi o'rnatilgan edi.

Biroq, mahsulotning hajmi oshgani sayin va funktsiyalar ko'paygani sayin, mavjud funktsiyalarni o'zgartirish yoki boshqa ishlab chiqaruvchi tomonidan yozilgan kodni tahlil qilish zarurati ko'proq paydo bo'la boshladi. Ushbu jarayonda bir xil yoki juda o'xshash funktsiyalar bo'lsa-da, har bir ishlab chiquvchi tomonidan har xil usullarda amalga oshirilgan holatlar ko'p bor topildi.

Masalan, muayyan ma'lumotlarni qayd etish logikasi bir nechta ekranlarda bir xil ishlatilgan bo'lsa-da, har bir xizmat tomonidan to'g'ridan-to'g'ri amalga oshirilgan va ekranlarda holatni ko'rsatadigan UI ham shunga o'xshash funktsiya bo'lsa-da, har xil uslub va tuzilishdan foydalanilgan edi.

Dastlabki ishlab chiqarish bosqichida bunday usullar katta muammo bo'lmagan. Ammo funktsiyalar ko'paygani sayin takroriy kodlar tezda ko'payib, bir xil funktsiyani o'zgartirish uchun bir nechta joylarni topish va o'zgartirish zarurati tez-tez yuzaga keldi.

Shuningdek, har bir ekran uchun ifoda uslubi farq qilishi sababli foydalanuvchi tomonidan seziladigan UI/UX tajribasi ham izchil bo'lmaslik muammosi bor edi.

Shu bilan birga, oddiygina funktsiyalarni amalga oshirishga e'tibor berish o'rniga, takroriy ishlatiladigan logikalar va UI ni umumiylashtirib, qayta ishlatish imkoniyatini oshirish va saqlash xarajatlarini kamaytirish maqsadida takomillashtirishni amalga oshirdik.

2. Mavjud usulning muammolari

2.1 Backend

Backend-da bir xil funktsiyaga ega bo'lsa-da, ishlab chiquvchilar o'rtasidagi amalga oshirish usuli farq qilishiga olib keladi, shunga o'xshash muammolar paydo bo'ldi.

Birinchidan, o'qish mushkullashdi. Bir xil funktsiyani bajaruvchi kodlar bir-biridan turlicha amalga oshirilgani uchun kodni o'qiyotgan odamga funktsiyani tushunishda ko'p vaqt sarflanadi.

Ikkinchidan, qayta ishlatish imkoniyati yetarli emas edi. Ma'lum kutubxona API chaqiruvlari yoki umumiy ma'lumotlarni qayd etish logikasi bir nechta xizmatlarda takroriy amalga oshirilgan edi. Masalan, xodimlar ma'lumotlarini qayd etish logikasi bir nechta xizmatda to'g'ridan-to'g'ri yozilgan edi.

Member member = memberClient.findMember(citizenId);

Bu usul yangi funktsiyalarni ishlab chiqishda har safar bir xil kodni takroran yozishga olib keldi.

Uchinchidan, saqlash xarajatlari oshdi. Bir xil funktsiya bir necha joyda mavjud bo'lgani uchun o'zgarishlar zarur bo'lganda hamma joyini topib o'zgartirishga to'g'ri kelardi.

To'rtinchidan, xato chiqish imkoniyati oshdi. O'xshash logikalar bo'lishiga qaramay, ba'zi xizmatlarda istisnolarni qayta ishlash yoki tasdiq logikasi yo'qolishi holatlari yuzaga kelgan va bir xil funktsiya bo'lsa-da, bir-biridan farqli natijalar qaytarilishi muammosi paydo bo'lishi mumkin edi.

2.2 Frontend

Frontendda ham shunga o'xshash muammolar mavjud edi.

Birinchidan, bir xil ma'lumotni ifodalovchi ekranlar bir-biridan turlicha ishlayotgandi. Masalan, holat(Status), ustuvorlik(Priority), tur(Type) kabi ma'lumotlar ekranlarda har xil usulda ko'rsatilayotgan edi.

Ikkinchidan, UI/UX bir xil emas edi. Bir xil ma'lumotni ko'rsatadigan komponent bo'lishiga qaramay, ekranlarda rang, uslub, joylashtirish turlicha qo'llanilayotgan edi.

Uchinchidan, takrorlangan ko'p tilli ishlov berish mantiqi mavjud edi. Member ob'ektining Display Name'ini ko'rsatishda har bir ekranda alohida til ishlov berish mantiqini yozayotgan edik.

To'rtinchidan, umumiy funksiyalar qayta ishlatilmayotgandi. A'zolar profili, vaqt ifodasi, xato ishlov berish, shablon ishlov berish kabi funksiyalar bir nechta ekranda takroran amalga oshirilayotgan edi.

3. Takliflar va loyihalash

Muammoni hal qilish uchun avvalo takroran ishlatiladigan funksiyalarni tahlil qildik. Bu jarayonda umumiylashtirish uchun yana katta ikki guruhga ajratish mumkin edi: backend va frontend.

3.1 Backend umumiylashtirishga oid

Backendda quyidagi punktlar birinchi navbatda tanlandi.

  • Enum klassi

  • Kutubxona mijozidan foydalanish mantiqi

  • Umumiy so'rov mantiqi

  • Takroran ishlatiladigan domen funksiyalari

  • Umumiy vazifa mantiqi

3.2 Frontend umumlashtirish maqsadi

Frontendda quyidagi elementlar asosida umumlashtirish o‘tkazildi.

  • Enum ifoda usuli

  • Holat va ustuvorlikni ko‘rsatish UI

  • A’zo profili UI

  • Ko‘p tilli ishlov berish funksiyasi

  • Timezoneni ishlov berish funksiyasi

  • Grid umumiy sozlamalari

  • Xato ishlov berish

Faqatgina funksiyalarni umumlashtirish emas, balki foydalanuvchi tajribasining izchilligini saqlab qolish yo‘nalishida rejalashtirish o‘tkazildi.

4. Tatbiq jarayoni

4.1 Backend umumiy modulni ajratish

Avvalo takroriy ishlatiladigan kutubxonalarni chaqirish mantiqini umumlashtirdik. Avvalgi holatda har bir xizmat bevosita kutubxonalarni chaqirardi. Quyida sodda misol kodi keltirilgan.

Member member = memberClient.findMember(citizenId);

Buni Extern qatlamiga ajratdik.

@Service
@RequiredArgsConstructor
public class MemberExtern {

    private final MemberClient memberClient;

    public Member getMember(String citizenId) {
        return memberClient.findMember(citizenId);
    }
}

Buning orqali kutubxona bog‘liqliklarini bitta joyda boshqarish imkoniyatiga ega bo‘ldik, shuningdek, istisno ishlov berish va oxirgi mantiqni ham umumlashtira oldik.

4.2 Enum ifoda usuli yaxshilanishi

Oldin Enum qiymatlari o'z-o'zidan ekranda ko'rsatilardi.

Late
LeftEarly
HolidayWork

Lekin foydalanuvchi uchun qulay ifoda yaratish qiyin edi va UI o'zgartirilganda domenga ham ta'sir ko'rsatadigan muammolar bor edi. Buni hal qilish uchun domen qiymatlari va UI ifoda qiymatlarini ajratdik.

LeftEarly("Early Leave")

Shuningdek, front-endda DisplayName Map orqali ekranda ifodani boshqarish imkonini berdi. Shu orqali ekran o'zgarishlari zarur bo'lsa ham, domen modelini o'zgartirmasdan javob berish mumkin bo'ldi.

4.3 Ko'p tilli ishlov berish umumlashtirish

Member obyekti uchun Display Name-ni ekranda har bir alohida qilish usulini o'zgartirdik. Oldin har bir ekranda tilni bevosita aniqlash kerak edi.

O'zgartirishdan so'ng, bu jarayon umumiy funktsiya orqali boshqariladigan qilib o'zgartirildi.

getMemberDisplayName(member)

Bu orqali ko'p tilli ishlov berish mantiqini bir joyda boshqarishga erishdik va til siyosati o'zgartirilganda tuzatish doirasini minimal darajada saqlab qoldik.

4.4 UI komponentlarini umumlashtirish

Takroran foydalaniladigan a'zolar profili UI-ni umumiy komponent sifatida ajratdik.

Oldin har bir ekranda Avatar yaratish, initsial hisoblash va Tooltip tuzish alohida amalga oshirilgan edi. O'zgartirishdan so'ng, faqat bitta komponentdan foydalanish imkoniyatini yaratdik. Quyidagicha ma'lum UI/UX elementlarini komponentga joylash va parametrlar orqali komponent ichidagi erkinlik darajasini oshirdik.

<MemberProfileGroup
  members={members}
  maxVisible={10}
/>

Bu orqali ekran dizaynining birligini ta'minlash imkonini berdi va yangi ekranlarda ham bir xil foydalanuvchi tajribasini taqdim etish imkonini oldik.

5. Qo'llash natijalari

Qayta foydalanish mumkin bo'lgan kod loyihalashtirishni qo'llaganimizdan so'ng quyidagi ta'sirlarni ko'rish mumkin edi.

Birinchidan, ishlab chiqish samaradorligi oshdi. Avvalgi holatda yangi funksiyalarni ishlab chiqish jarayonida bir xil mantiqni yana qayta amalga oshirish kerak bo'lgan, lekin umumiy modullar va komponentlardan foydalanish orqali ishlab chiqish vaqti sezilarli darajada qisqardi.

Ikkinchidan, texnik xizmat ko'rsatish yaxshilandi. Umumiy logic bir joyda jamlanganligi sababli o'zgartirishlar ta'sir qiladigan ko'lamni osonlikcha aniqlash mumkin bo'ldi va takroriy o'zgartirish ishlari kamaydi.

Uchinchidan, kod sifati yaxshilandi. Bir xil vazifalar uchun bitta amalga oshirish usuli qo'llanilishi bilan istisno ishlov berish va tasdiqlash logikasi bir xilda qo'llanilishi mumkin bo'ldi.

To'rtinchidan, UI/UX bir xilligi yaxshilandi. Holat ko'rsatuvchi, a'zo ma'lumotlari, ko'p tilli ishlov berish kabi umumiy funksiyalarni bir xil usulda taqdim etish orqali foydalanuvchi tajribasining birligini ta'minlash mumkin bo'ldi.

Oxirgi, umumiy jarayondan tartibga solingan ma'lumotlarni Notion hujjati orqali baham ko'rgan holda jamoa a'zolariga bir xil me'yorlarda rivojlantirish imkonini berildi. Bu orqali oddiy kodni qayta ishlatishdan tashqari, jamoa umumiy rivojlantirish samaradorligini va texnik xizmat ko'rsatish imkoniyatlarini yaxshilash uchun poydevor yaratilishi mumkin bo'ldi.

Bignow

Site footer