1. Kirish
Dasturiy ta'minotni ishlab chiqish jarayonida SCSS asosidagi uslub tizimini boshqarish jarayonida rang va uslub o'zgaruvchilarini boshqarish usuli asta-sekin murakkablashishi muammosiga duch keldim. Dastlab, oddiy o'zgaruvchi e'lon qilish kifoya edi, lekin xizmat o'lchami oshgani sari va turli UI komponentlari qo'shilgani sayin o'zgaruvchilarning roli noaniq bo'lib qoldi va qo'shimcha ta'riflar ko'paydi.
Xususan, bir nechta xizmati umumiy UI dan foydalanadigan tuzilmalarda bir xil ranglar bir-biridan farqli nomlar bilan ishlatilishi holatlari paydo bo'ldi va bu esa saqlash imkoniyatlari va hamkorlik samaradorligini pasaytirdi. Dizayn tizimi nuqtai nazaridan “qiymat markazida” tuzilmaning cheklari mavjud bo'lib, ma'no asosidagi token tizimini qayta tuzish zarurati ortib bormoqda.
Shu sababli, mavjud SCSS o'zgaruvchilari tuzilmasi dizayn tokenlariga asoslangan tuzilma sifatida qayta ishlangan va saqlash imkoniyatlari va kengaytirilishini yaxshilash maqsadida tizim qayta o'ylab chiqilgan.
Shuningdek, ilgari uslublarni belgilash komponent ichida aralashib ketgan edi, bu esa umumiy uslubni boshqarishni qiyinlashtirdi. Xizmatlarga bo'lgan talablar ko'paygani sayin, bir xil komponentlarda uslub bo'linmalari ko'paydi va kodni o'qish qiyinlashdi. Ushbu muammoni hal qilish uchun umumiy dizayn standartlarini token bo'yicha boshqarish yo'nalishini ko'rib chiqishga qaror qildik.
2. Mavjud strukturadagi muammolar
Mavqe'lar tuzilmalar oldingi --gray200, --primary600 shaklida asl rang qiymatiga yaqin nomlar bilan boshqarilayotgan edi. Ushbu usul dastlabki rivojlanish tezligi yuqori bo'lsa-da, loyiha hajmi katta bo'lganda turli muammolar yuzaga keladi.
Birinchi cheklov ma'no uzatishda edi. O'zgaruvchi nomlari bilan rangning matnmi, fonmi yoki chegara mi, farqlash qiyin bo'ldi. Natijada dasturchilar orasida talqinlar farqlanishi mumkin edi va hamkorlik jarayonida kommunikatsiya xarajatlari oshdi.
Ikkinchisi takroriy ta'rif muammosi edi. Yangi UI ishlab chiqilganda, mavjud ranglarni qayta ishlatish o'rniga o'xshash ranglarni yangidan ta'riflash holatlari ko'paydi. Bu jarayonda dizayn tizimining birlikligi asta-sekin zaiflashdi.
Uchinchisi esa texnik xizmat ko'rsatish xarajatlarining oshishi edi. Ma'lum rang o'zgartirilganda ta'sir ko'rsatadigan hududni aniqlash qiyin bo'lib, kutilmagan UI o'zgarishlari yuzaga kelishi mumkin edi. Ayniqsa, umumiy komponentlarda ishlatiladigan o'zgaruvchilar ta'sirini kuzatish jarayoni samarali emas edi.
Bundan tashqari, komponent darajasidagi uslubni o'zgartirish ko'paygan sari, uslub to'qnashuvi ehtimoli ham oshdi. Loyihaning hajmi oshgan sari, o'zgaruvchilar tizimi bilan barqaror boshqarish qiyin bo'ldi va yanada tizimli tuzilma loyihalash zarurati paydo bo'ldi.
3. Takliflar
Ushbu muammoni hal qilish uchun oddiy qiymatga asoslangan tuzilmadan chiqib, ma'no markazli dizayn tokenlari tizimini joriy etdik. Tokenlar Primitive, Alias, Semantic - 3 bosqichli qatlamli tuzilmada loyihalangan.
3.1 Primitive Token
Primitive Token aslida rang qiymatlarini belgilash vazifasini bajaradi. Masalan, gray qatori, primary qatori kabi haqiqiy HEX qiymatlarini boshqaradi.
3.2 Alias Token
Alias Token ranglarni aniqlaydi. Misol uchun, matn, chegara, fon va boshqalar kabi ma'no birliklarini guruhlash va boshqarish.
3.3 Semantik Token
Semantik Token aslida UI elementlariga tatbiq etiladigan bosqichdir. Tugma fon ranglari, karta chegaralari, holat xabarlari kabi haqiqiy komponent darajasida qo'llaniladigan tokenlar aniqlangan.
Bunday tuzilma orqali oddiy qiymatlar emas, balki ma'no asosidagi stil boshqaruvi mumkin bo'lib qoldi va umumiy UI va xizmatlarga xos UIni yanada tizimli ravishda boshqarish imkoniyatini beradi.
Shuningdek, token strukturasi qatlamlash orqali qorong'u rejim yoki xizmatga xos mavzularni kengaytirishga moslashuvchanlik sifatida asos yaratildi. Avval ranglarni o'zgartirishda kodning butunligini o'zgartirish kerak bo'lsa, hozirgi tuzilishda faqat muayyan qatlamni o'zgartirish bilan butun UI'ga bir xil tarzda aks ettirish mumkin bo'ldi.
4. Tatbiq jarayoni
Token tuzilishini joriy etish jarayonida faqat oddiy o'zgaruvchi nomlarini o'zgartirish emas, balki haqiqiy foydalanish maqsadiga asoslanib, butun uslub strukturasi qayta tartibga solindi.
Birinchidan, mavjud SCSS o'zgaruvchilarini to'liq tekshirib chiqib, ularning qaysi ekran va komponentlarda ishlatilishini tahlil qildik. Bunga asoslanib, ma'no birligiga ko'ra qayta klassifikatsiya qilish amalga oshirildi.
Shuningdek, SCSS ning @use va @forward ni foydalanib modul tizimini tuzdim. Har bir token qatlamini fayl darajasida ajratish va _index.scss orqali import tuzilishini birlashtirdim. Buning natijasida bog'lanishni aniq qilish va zarur tokenlardan faqat aniq foydalanishni yaxshilashga erishdim.
Butun kodni bir marta almashtirish usuli xavfli deb hisoblanganligi sababli, bosqichma-bosqich qo'llash strategiyasini qo'lladim. Yangi sahifalar va o'zgarish kiritish kerak bo'lgan joylardan boshladim va mavjud kod bilan parallel ravishda barqaror tarzda o'tkazishni amalga oshirdim.
Shuningdek, dizayn jamoasi bilan hamkorlik qilib, token nomlash qoidalarini tartibga keltirdik va umumiy standartlarni hujjatlashtirdik. Bu jarayon nafaqat kodni yaxshilashga, balki hamkorlik jarayonini tartibga solishga ham katta yordam berdi.
Amalda qo'llanilish jarayonida dizayn QA'ni takroran o'tkazib, tokenlarning qo'llanish doirasini tekshirdik. Ayniqsa, umumiy komponentlarga qo'llaniladigan uslublar bir nechta xizmatlarda bir vaqtning o'zida ishlatilishi tufayli, kichik o'zgarishlar ham umumiy UI'ga ta'sir o'tkazishi mumkin, shuning uchun diqqatli tahlil o'tkazish zarur edi.
5. Takomot etkasi
Dizayn tokenlari tuzilmasi qo'llanilgandan so'ng eng katta yaxshilanish qismi o'qish va hamkorlik samaradorligi edi. Semantic Token orqali o'zgaruvchi nomlari yordamida roli intuitiv ravishda anglash mumkin bo'ldi va dizaynerlar bilan dasturchilar o'rtasidagi muloqot yanada aniq bo'ldi.
Texnik xizmat ko'rsatish nuqtai nazaridan ham samarali bo'ldi. Maxsus UI rangini o'zgartirganda, tegishli Semantic Tokenni o'zgartirish orqali butun uslubda bir xil tarzda aks etdi. Avvalgiga qaraganda o'zgarish doirasini tezda aniqlash osonlashdi va kutilmagan yon ta'sirlar ham kamaydi.
Kengaytirilishi ham sezilarli darajada oshdi. Yangi komponent qo'shishda mavjud token strukturasiga asoslanib bir xil usulda ishlab chiqish mumkin bo'ldi, shuningdek xizmatlar o'rtasida dizaynning bir xilligini saqlab qolish ham osonlashdi.
Qo'shimchasiga, qorong'u rejim yoki xizmatlar bo'yicha mavzu kengaytirish imkoniyatlari ham ta'minlandi. Avvalgi holatda, rang qiymatlari kodning turli joylariga tarqoq bo'lib, mavzuni o'zgartirish qiyin edi, ammo hozirgi tuzilishda faqat Alias va Semantic bosqichlarini sozlash orqali moslashuvchanlikni ta'minlash mumkin bo'ldi.
Eng muhimi, umumiy dizayn standartlari yangi xodimlar loyihaga qo'shilganda tezda tuzilmani tushunishga yordam berdi. Bu nafaqat hamkorlik samaradorligini, balki loyiha barqarorligi jihatidan ham ijobiy ta'sir ko'rsatdi.
6. Xulosa va tajriba
Ushbu refaktoring oddiy o'zgaruvchi tartibga solish ishi emas, balki dizayn tizimi nuqtai nazaridan tuzilmani qayta loyihalash tajribasi bo'ldi. Ayniqsa, “qiymat” markazida emas, balki “ma'no” markazida uslublarni boshqarish orqali xizmat ko'rsatish va kengaytirish imkoniyatlarini bir vaqtda ta'minlash mumkinligini his qildim.
Shuningdek, token tuzilmasini loyihalashtirish jarayonida hamkorlik standartlari va nom berish qoidalarining ahamiyatini yana bir bor tasdiqlay oldik. Dizayn tizimi oddiy uslub to'plami emas, balki butun jamoa tomonidan birgalikda ishlatiladigan umumiy tilga yaqin ekanligini his qildim.
Kelajakda rangi bilan bir qatorda spacing, typography, radius, shadow kabi turli dizayn elementlariga ham bir xil token tuzilmasini qo'llash rejalashtirmoqdamiz. Bu orqali yanada tizimli va kengaytiriladigan dizayn tizimi muhitini yaratmoqchimiz.
Ushbu ish orqali men faqat oddiy amalga oshirishga e'tibor bermay, uzoq muddatli texnik xizmat ko'rsatish va kengayish imkoniyatlarini hisobga olishning ahamiyatini tushunish imkoniyatiga ega bo'ldim. Keyinchalik umumiy tizim nuqtai nazaridan loyihani ko'rib chiqib, yaxshiroq barqaror UI muhitini yaratmoqchiman.
nature