CSS-in-JS savdosi

Surat Artem Bali

Yaqinda men CSS-in-JS-ga nisbatan yuqori darajadagi sharh yozdim, asosan ushbu yondashuv hal qiladigan muammolar haqida gaplashdim. Kutubxona mualliflari kamdan-kam hollarda ularning echimini topish uchun vaqt sarflashadi. Ba'zan ular haddan tashqari xilma-xildir va ba'zida foydalanuvchilar ushbu vositani qanday qo'llashlarini bilishmaydi. Shunday qilib, bu men hozirgacha ko'rgan savdolarni tasvirlashga urinish. Menimcha, men JSS-ning muallifi ekanligimni aytib o'tishim kerak, shuning uchun meni noxolis deb hisoblash kerak.

Ijtimoiy ta'sir

Veb-platformada ishlaydigan va hech qanday JavaScript-ni bilmaydigan odamlar guruhi mavjud. Bu odamlar HTML va CSS-ni yozish uchun maosh olishmoqda. CSS-in-JS ishlab chiquvchilarning ish jarayoniga katta ta'sir ko'rsatdi. Haqiqiy transformatsion o'zgarish hech qachon orqada qolmasdan, hech qachon amalga oshirilmaydi. CSS-in-JS yagona yo'l bo'lishi kerakligini bilmayman, ammo ommaviy qabul qilinishi CSS-ni zamonaviy dasturlarda ishlatish bilan bog'liq muammolarning aniq belgisidir.

Muammoning katta tomoni, CSS-in-JS yoritilgan holatlardan aniq foydalanish imkoniyati va vazifa uchun uni qanday to'g'ri ishlatishimiz mumkin emasligidir. Ko'plab CSS-in-JS ixlosmandlari ushbu texnologiyani ilgari surishda muvaffaqiyat qozonishgan, ammo ko'pchilik tanqidchilar savdo-sotiq to'g'risida konstruktiv tarzda, vositalarga arzon tebranmasdan gapirishmagan. Natijada, biz ko'plab savdo-sotiqlarni yashirin qoldirdik va tushuntirish va echimlarni topshirish uchun astoydil harakat qilmadik.

CSS-in-JS - bu murakkab foydalanish holatlarini osonlashtirishga urinishdir, shuning uchun uni kerak bo'lmagan joyga bosmang!

Ish vaqti narxi

Brauzerda CSS-ni JavaScript-dan yaratganda, ajralib turadigan qo'shimcha xarajatlar mavjud. Ish vaqtining umumiy vaqti kutubxonadan kutubxonaga qadar farq qiladi. Bu yaxshi umumiy mezon, ammo o'zingizning testlaringizni bajarishingizga ishonch hosil qiling. Ish vaqtidagi asosiy farqlar shablon satrlarini to'liq CSS tahlil qilish zarurati, optimallashtirish miqdori, dinamik uslublarni amalga oshirish tafsilotlari, algoritm va ramka integratsiyasining qiymatiga bog'liq holda paydo bo'ladi. *

Mumkin bo'lgan ortiqcha ish vaqtidan tashqari, siz 4 xil to'plam strategiyasini ko'rib chiqishingiz kerak, chunki ba'zi CSS-in-JS kutubxonalari bir nechta strategiyani qo'llab-quvvatlaydi va ularni qo'llash foydalanuvchi tomonidan hal qilinadi. *

1-strategiya: Faqat ish vaqtini yaratish

Runtime CSS generatsiyasi bu JavaScript-da CSS satrini yaratadigan va keyin ushbu uslubni yorliq yordamida hujjatga kiritadigan usul. Ushbu uslub uslublar jadvalini emas, balki ichki uslublarni ham ishlab chiqaradi.

Ish vaqti ishlab chiqarilishining tugashi - bu hujjat yuklanishni boshlaganligi sababli, erta bosqichda o'ziga xos tarkibni taqdim etmaslik. Ushbu yondashuv odatda darhol foydali bo'lishi mumkin bo'lgan tarkibsiz ilovalar uchun mos keladi. Odatda, bunday dasturlar foydalanuvchi uchun foydali bo'lishi uchun ular bilan o'zaro aloqalarni talab qiladi. Ko'pincha bunday dasturlar juda dinamik tarkib bilan ishlaydi, chunki uni yuklaganingizdan so'ng u eskiradi, shuning uchun siz ertaroq, masalan, Twitter-ni o'rnatishingiz kerak. Bundan tashqari, foydalanuvchi tizimga kirganda, SEO uchun HTML-ni taqdim etishning hojati yo'q.

Agar o'zaro aloqa JavaScript-ni talab qilsa, dastur tayyor bo'lgunga qadar to'plamni yuklash kerak. Masalan, hujjatga Slack-ni yuklashda siz odatiy kanal tarkibini ko'rsatishingiz mumkin, ammo foydalanuvchi bundan keyin kanalni o'zgartirishni xohlashi mumkin. Shunday qilib, agar siz dastlabki tarkibni darhol tashlab yuborish uchun yuklagan bo'lsangiz.

Bunday dasturlarning sezgir ishlashini to'ldirish vositalari va boshqa nayranglar yordamida yaxshilash mumkin, bunda ilova avvalgidan ko'ra tezkor ko'rinishi mumkin. Bunday dasturlar odatda har qanday holatda ham katta ma'lumotlarga ega, shuning uchun ular maqola kabi tez foydali bo'lmaydi.

2-strategiya: Kritik CSS-bilan vaqtni yaratish

Kritik CSS - bu sahifani dastlabki holatiga sozlash uchun kerak bo'lgan CSSning minimal miqdori. U hujjat boshidagi uslub yorlig'i yordamida ko'rsatiladi. Ushbu usul CSS-in-JS-da va bo'lmagan holda keng qo'llaniladi. Ikkala holatda ham siz CSS qoidalarini ikki marta yuklashingiz mumkin, bunda Kritik CSSning bir qismi va JavaScript yoki CSS to'plamining bir qismi. Tanqidiy CSS-ning hajmi tarkibning hajmiga qarab juda katta bo'lishi mumkin. Odatda, hujjat saqlanmaydi.

Critical CSS-ni ishlatmasdan, statik tarkibga ega bo'lgan bitta sahifali dastur ishlaydigan CSS-in-JS-da tarkib o'rniga o'rniga to'ldiruvchilarni ko'rsatishi kerak bo'ladi. Bu yomon, chunki u foydalanuvchiga ancha oldin foydali bo'lgan, past darajadagi qurilmalarda va past tarmoqli ulanishlarda foydalanishni yaxshilashi mumkin edi.

Kritik CSS-da, CSS-ni ishga tushirish jarayoni keyingi bosqichda, dastlabki bosqichda UI-ni bloklamasdan amalga oshirilishi mumkin. Ehtiyot bo'ling, 5 yoshdan kichik mobil qurilmalarda, JavaScript-dan CSS avlod ishlashga salbiy ta'sir ko'rsatishi mumkin. Bu yaratilayotgan CSS va ishlatilgan kutubxonaning hajmiga bog'liq, shuning uchun uni umumlashtirish mumkin emas.

Ushbu strategiyaning ayirboshlashi - muhim Kritik CSS-ni ishlab chiqarish qiymati va CSS-ni ishlab chiqarish vaqti.

3-strategiya: Faqat vaqtni qazib olish

Ushbu strategiya Internetdagi CSS-in-JS-ni ishlatmasdan standart hisoblanadi. Ba'zi CSS-in-JS kutubxonalari sizga tuzilgan vaqtda statik CSS-ni ajratib olishga imkon beradi. * Bu holda, ish vaqtiga ortiqcha ishlov berilmaydi, CSS-da sahifa tegidan foydalanib ko'rsatiladi. CSS-ning generatsiyalash qiymati oldindan to'lanadi.

Bu erda ikkita yirik savdo aylanmasi mavjud:

  1. Ishlash vaqtida siz ba'zi CSS-in-JS dinamik API-laridan foydalana olmaysiz, chunki siz davlatga kirish huquqiga ega emassiz. Ko'pincha siz hali ham CSS-ning shaxsiy xususiyatlaridan foydalana olmaysiz, chunki ular har bir brauzerda qo'llab-quvvatlanmaydi va tabiiy ravishda tuzilgan vaqtda ko'pxil to'ldirilmaydi. Bunday holda siz dinamik mavzularni va davlatga asoslangan uslubni o'zgartirish uchun bir necha bor harakat qilishingiz kerak bo'ladi.
  2. Kritik CSS-ni ishlatmasdan va bo'sh kesh bilan siz CSS to'plamingiz yuklanmaguncha birinchi bo'yoqni blokirovka qilasiz. Hujjat boshidagi bog'lanish elementi HTML-ning ishlashini bloklaydi.
  3. Yagona sahifali ilovalarda sahifalar to'plamlarini ajratish bilan aniqlanmaydigan o'ziga xoslik. *

4-strategiya: Kritik CSS yordamida vaqtni ajratib olish

Ushbu strategiya shuningdek CSS-in-JS uchun yagona emas. Kritik CSS bilan to'liq statik ajratish, yanada statik dastur bilan ishlashda eng yaxshi ko'rsatkichni beradi. Ushbu yondashuv hanuzgacha yuqorida aytib o'tilgan CSS-ning savdo-sotiqlariga ega, bundan tashqari, blokirovka qilingan tegni hujjatning pastki qismiga o'tkazish mumkin.

CSS ko'rsatishning 4 ta asosiy strategiyasi mavjud. Ulardan faqat ikkitasi CSS-in-JS uchun xosdir va ularning hech biri barcha kutubxonalarga tegishli emas.

Kirish imkoniyati

Noto'g'ri ishlatilganda CSS-in-JS kirishni kamaytiradi. Bu, asosan, statik tarkibli sayt Kritik CSS ajratishisiz amalga oshirilganda, HTML-ni to'plamni yuklash va baholashdan oldin bo'yash mumkin bo'lmaganda amalga oshiriladi. Bu, shuningdek, CSS-ning ulkan CSS fayli hujjat boshidagi blokirovka qilinadigan havola tegidan foydalangan holda amalga oshirilganda paydo bo'lishi mumkin, bu an'anaviy ichki joylashtirishning eng mashhur muammosi va CSS-in-JS-ga xos emas.

Ishlab chiquvchilar foydalanish uchun javobgarlikni o'z zimmalariga olishlari kerak. Barqaror internet ulanishi iqtisodiy zaif mamlakatlar muammosi degan noto'g'ri noto'g'ri fikr hali ham mavjud. Er osti temir yo'l tizimiga yoki katta binoga kirganimizda har kuni ulanish bilan bog'liq muammolarimiz borligini unutishga moyil bo'lamiz. Barqaror kabelsiz mobil aloqa afsona. Barqaror WiFi ulanishi hatto oson emas, masalan, 2,4 Gigagertsli WI-FI tarmog'i mikroto'lqinli pechdan shovqinni olishi mumkin!

Server tomonidan ko'rsatiladigan Rendering bilan Critical CSS qiymati

CSS-in-JS uchun tanqidiy CSS ajratishni olish uchun bizga SSR kerak. SSR bu serverda dasturning ma'lum bir holati uchun yakuniy HTML yaratish jarayoni. Aslida, bu juda murakkab va qimmat jarayon bo'lishi mumkin. Har bir HTTP so'rovi uchun serverda ma'lum miqdordagi protsessor tsikllarini talab qiladi.

CSS-in-JS odatda HTMLni ko'rsatish quvuriga ulanganligini ta'kidlaydi. * U HTMLning qanday ishlashini va CSS-ning mutlaq minimal miqdorini ishlab chiqarishi uchun unga nima kerakligini biladi. Kritik CSS serverda HTML ishlashiga qo'shimcha xarajatlarni qo'shadi, chunki bu CSS-ni oxirgi CSS satriga tuzish kerak. Ba'zi bir stsenariylarda, serverda keshlash qiyin yoki hatto imkonsizdir.

Qora qutini yuborish

Siz foydalanayotgan CSS-in-JS kutubxonasi sizning CSS -ingizni qanday ko'rsatayotganidan xabardor bo'lishingiz kerak. Masalan, odamlar Styled Component va Emotion dinamik uslublarni qanday qo'llashlarini bilishmaydi. Dinamik uslublar bu sintaksis bo'lib, sizning JavaScript deklaratsiyasida sizning funktsiyalaringizdan foydalanishga imkon beradi. Ushbu funktsiyalar rekvizitlarni qabul qiladi va CSS blokini qaytaradi.

Resurs buyurtma xususiyatlarining izchil bo'lishini ta'minlash uchun yuqorida ko'rsatilgan ikkala kutubxona yangi CSS qoidasini yaratadi, agar unda dinamik deklaratsiya va komponentlar yangi rekvizitlar bilan yangilanadigan bo'lsa. Men nima demoqchi ekanligimni namoyish qilish uchun ushbu sandboxni yaratdim. JSS-da biz boshqa CSS qoidalarini yaratmasdan dinamik xususiyatlarni yangilashga imkon beradigan boshqa savdoni o'tkazishga qaror qildik. *

To'g'ri o'rganish egri

CSS-ni yaxshi biladigan, ammo JavaScript-ni yaxshi biladiganlar uchun CSS-in-JS-ga tezlashish uchun boshlang'ich ish hajmi juda katta bo'lishi mumkin.

CSS-in-JS-ni yozish uchun siz murakkab JavaScript mantiqiy ishga kirishguncha professional JavaScript dasturchisi bo'lishingiz shart emas. Uslubning murakkabligini umumlashtira olmaymiz, chunki bu haqiqatda foydalanish holatiga bog'liq. CSS-in-JS murakkablashganda, vanil CSS bilan amalga oshirish yanada murakkablashishi mumkin.

CSS-in-JS asosiy styling uchun o'zgaruvchini qanday e'lon qilishni, andoza satrlarini qanday ishlatishni va JavaScript qiymatlarini interpolyatsiya qilishni bilish kerak. Agar ob'ekt notasi ishlatilsa, JavaScript ob'ektlari va kutubxonaga tegishli ob'ektga asoslangan sintaksis bilan qanday ishlash kerakligini bilish kerak. Agar dinamik styling bo'lsa, JavaScript funktsiyalari va shartlaridan qanday foydalanishni bilish kerak.

Umuman olganda, o'rganish chizig'i mavjud, biz buni inkor eta olmaymiz. Ushbu o'rganish egri odatda Sassni o'rganishdan ko'ra kattaroq emas. Aslida, men buni namoyish qilish uchun ushbu tuxum yo'nalishini yaratdim.

O'zaro moslashuvchanlik yo'q

CSS-in-JS lib-larining ko'pi bir-biri bilan ishlay olmaydi. Bu shuni anglatadiki, bitta kutubxonadan foydalangan holda yozilgan uslublar boshqa kutubxonadan foydalanib ko'rsatilmaydi. Amalda bu shuni anglatadiki, siz barcha ilovalaringizni bitta amalga oshirishdan ikkinchisiga osongina o'tkaza olmaysiz. Bu sizning UI-ni NPM-da CSS-in-JS-ni o'zingizning tanlagan kutubxonangizni iste'molchilar to'plamiga qo'shmasdan osongina ulashishingiz mumkin degan ma'noni anglatadi, agar sizda CSS-ga o'rnatilgan statistik ekstrakti bo'lmasa.

Biz ushbu muammoni hal qilishi kerak bo'lgan ISTF formatida ishlay boshladik, ammo afsuski, uni ishlab chiqarishga tayyor holatga keltirishga hali vaqtimiz yo'q. *

Qayta foydalanish mumkin bo'lgan agnostik UI komponentlarini jamoat mulki bilan bo'lishish, haligacha hal qilib bo'lmaydigan muammo bo'lib qolmoqda.

Xavfsizlik xavflari

Xavfsizlikni CSS-in-JS bilan kiritish mumkin. Har qanday mijoz tomonidan qo'llaniladigan dasturlarda bo'lgani kabi, har doim ishlatishdan oldin foydalanuvchini kiritishdan qochishingiz kerak.

Ushbu maqola sizga ko'proq tushuncha va noto'g'ri misollarni keltiradi.

O'qib bo'lmaydigan sinf nomlari

Ba'zilar hali ham Internetda mazmunli o'qiladigan sinf nomlarini saqlashimiz muhim deb o'ylashadi. Hozirgi vaqtda ko'plab CSS-in-JS kutubxonalari deklaratsiya nomi yoki ishlab chiqish rejimida komponent nomi asosida mazmunli sinf nomlarini beradi. Ularning ba'zilari hatto sizga sinf nomi generator funktsiyasini sozlash imkonini beradi.

Ishlab chiqarish rejimida, ammo ularning aksariyati kichikroq yuk uchun qisqa nomlarni yaratadilar. Bu kutubxona foydalanuvchisi kutubxonani yaratishi va sozlashi kerak bo'lgan savdo hisoblanadi.

Xulosa

Savdo savdolari mavjud va men ehtimol ularning barchasini hatto eslamaganman. Ammo ularning aksariyati barcha CSS-in-JS uchun amal qilmaydi. Ular qaysi kutubxonadan foydalanishingiz va uni qanday ishlatishingizga bog'liq.

* Ushbu jumlani tushuntirish uchun maxsus maqola bo'ladi. Menga Twitter-da (@ oleg008) xabar bering, qaysi biri to'g'risida ko'proq o'qishni xohlaysiz.