CSS-in-JS kompromisai

Artem Balio nuotrauka

Neseniai parašiau aukštesnio lygio „CSS-in-JS“ apžvalgą, daugiausia kalbėdama apie problemas, kurias bando išspręsti šis požiūris. Bibliotekų autoriai retai investuoja laiką į savo sprendimo kompromisų aprašymą. Kartais taip yra todėl, kad jie yra pernelyg šališki, o kartais jie tiesiog nežino, kaip vartotojai taiko šį įrankį. Taigi tai yra bandymas aprašyti kompromisus, kuriuos mačiau iki šiol. Manau, svarbu paminėti, kad esu JSS autorius, todėl turėčiau būti laikoma šališka.

Socialinis poveikis

Yra sluoksnis žmonių, kurie dirba žiniatinklio platformoje ir nežino jokios „JavaScript“. Tie žmonės gauna užmokestį už HTML ir CSS rašymą. CSS-in-JS padarė didžiulę įtaką kūrėjų darbo eigai. Tikrai transformacinių pokyčių niekada negalima padaryti nepaliekant tam tikrų žmonių. Nežinau, ar CSS-in-JS turi būti vienintelis būdas, tačiau masinis priėmimas yra aiškus CSS naudojimo šiuolaikinėse programose problemų ženklas.

Didelė problemos dalis yra mūsų nesugebėjimas tiksliai komunikuoti naudojimo atvejų, kai šviečia CSS-in-JS, ir kaip tinkamai jį naudoti atliekant užduotį. Daugeliui „CSS-in-JS“ entuziastų pavyko sėkmingai išpopuliarinti techniką, tačiau ne daug kritikų kalbėjo apie kompromisus konstruktyviai, nesiimdami pigių sūpuoklių prie įrankių. Todėl daugelį kompromisų palikome paslėptus ir labai stengėmės nepateikti paaiškinimo ir sprendimo būdų.

CSS-in-JS yra bandymas palengvinti sudėtingo naudojimo atvejų tvarkymą, todėl nespauskite jo ten, kur nereikia!

Runtime kaina

Kai CSS sugeneruojamas iš „JavaScript“ vykdant, naršyklėje yra būdinga pridėtinė vertė. Trukmė, priklausomai nuo bibliotekos, gali skirtis. Tai yra geras bendras etalonas, tačiau būtinai pasidarykite savo testus. Pagrindiniai skirtumai vykdymo metu atsiranda priklausomai nuo to, ar reikia atlikti visą CSS analizę šablonų eilutėse, optimizacijų kiekį, dinaminių stilių diegimo detales, maišos algoritmą ir sistemos integravimo kainą. *

Be galimo pridėtinio veikimo laiko, turite atsižvelgti į 4 skirtingas grupavimo strategijas, nes kai kurios CSS-in-JS bibliotekos palaiko kelias strategijas ir jas turi pritaikyti vartotojas. *

1 strategija: Tik kartos laikas

Runtime CSS generavimas yra technika, kuri sugeneruoja CSS eilutę „JavaScript“ ir tada įveda tą eilutę, naudodama stiliaus žymą, dokumente. Ši technika sukuria stiliaus lapą, NE ĮRENGINĮ.

Klaida, kurią sukuria vykdymo laiko generacija, yra nesugebėjimas pateikti stiliaus turinio ankstyvajame etape, nes dokumentas pradedamas įkelti. Šis požiūris paprastai tinka toms programoms, kuriose nėra turinio, kuris gali būti nedelsiant naudingas. Paprastai tokioms programoms reikalinga vartotojo sąveika, kol jos tikrai gali tapti naudingos vartotojui. Dažnai tokios programos veikia su tokiu dinamišku turiniu, kad jis tampa nebeįmanomas, kai tik jį įkeliate, todėl jums reikia anksti nustatyti atnaujinimo kanalą, pvz., „Twitter“. Be to, prisijungus vartotojui nereikia pateikti HTML HTML.

Jei sąveikai reikalingas „JavaScript“, paketą reikia įkelti prieš paruošiant programą. Pvz., Galite parodyti numatytojo kanalo turinį, kai įkeliate „Slack“ į dokumentą, tačiau tikėtina, kad vartotojas norės pakeisti kanalą iškart po to. Taigi, jei įdėjote pradinį turinį, tiesiog išmeskite juos nedelsdami.

Suvokiamą tokių programų veikimą galima patobulinti naudojant vietos žymeklius ir kitus triukus, kad programa galėtų jaustis akimirksniu, nei yra iš tikrųjų. Bet kokiu atveju tokios programos yra sunkios, todėl jos nebus tokios naudingos kaip straipsnis.

2 strategija: Trukmės generavimas naudojant kritinę CSS

Kritinė CSS - tai minimalus CSS kiekis, kurio reikia norint formuoti puslapį pradinėje būsenoje. Jis pateikiamas naudojant stiliaus žymą dokumento galvutėje. Ši technika yra plačiai naudojama su CSS-in-JS ir be jos. Abiem atvejais tikriausiai du kartus įkelsite CSS taisykles, vieną kartą kaip „Kritinės CSS“ dalį ir vieną kartą kaip „JavaScript“ arba CSS paketo dalį. Kritinės CSS dydis gali būti gana didelis, atsižvelgiant į turinio kiekį. Paprastai dokumentas nebus talpykloje.

Be Kritinės CSS, statinio turinio turinčio vieno puslapio taikomoji programa su veikiančiąja CSS-in-JS turės parodyti vietos žymeklius, o ne turinį. Tai yra blogai, nes tai galėjo būti naudinga vartotojui daug anksčiau, pagerinant prieinamumą žemos klasės įrenginiuose ir mažo pralaidumo jungtims.

Esant kritinei CSS, vykdymo CSS galima generuoti vėliau, neužblokavus vartotojo sąsajos pradiniame etape. Įspėkite, kad mažos klasės mobiliuosiuose įrenginiuose, kurie yra maždaug 5 metų ir vyresni, CSS generavimas iš „JavaScript“ gali neigiamai paveikti našumą. Tai labai priklauso nuo sukuriamo CSS kiekio ir naudojamos bibliotekos, todėl jos negalima apibendrinti.

Šios strategijos privalumai yra kritinės CSS gavybos išlaidos ir vykdymo laiko CSS generavimo išlaidos.

3 strategija: Tik gavyba statybų metu

Ši strategija yra numatytoji žiniatinklyje be CSS-in-JS. Kai kurios CSS-in-JS bibliotekos leidžia išgauti statinę CSS kūrimo metu. * Šiuo atveju nereikia atlikti papildomų išlaidų, CSS pateikiama puslapyje naudojant nuorodos žymą. CSS kartos išlaidos apmokamos vieną kartą prieš laiką.

Čia yra 2 pagrindiniai kompromisai:

  1. Negalite naudoti kai kurių dinaminių API CSS-in-JS pasiūlymų vykdymo metu, nes neturite prieigos prie būsenos. Dažnai jūs vis dar negalite naudoti tinkintų CSS ypatybių, nes jos nepalaikomos visose naršyklėse ir negali būti užpildytos daugialypės struktūros metu. Tokiu atveju turėsite atlikti apeigos būdus, kad būtų patobulintas dinaminis efektas ir sukurtas valstybinis stilius. *
  2. Be kritinės CSS ir tuščios talpyklos blokuosite pirmuosius dažus, kol jūsų CSS paketas nebus įkeltas. Nuorodos elementas dokumento galvoje blokuoja HTML pateikimą.
  3. Neapibrėžtas specifiškumas, kai puslapių pagrindu suskirstomi paketai atskiruose puslapiuose. *

4 strategija: Ekstrahavimo laikas naudojant „Critical CSS“

Ši strategija taip pat nėra būdinga tik CSS-in-JS. Visiškas statinis ištraukimas naudojant kritinę CSS suteikia geriausią našumą dirbant su statiškesne programa. Šis metodas vis dar turi aukščiau paminėtų statinės CSS kompromisų, išskyrus tai, kad blokuojančios nuorodos žymą galima perkelti į dokumento apačią.

Yra 4 pagrindinės CSS pateikimo strategijos. Tik 2 iš jų yra būdingi CSS-in-JS ir nė vienas iš jų netaikomas visoms bibliotekoms.

Prieinamumas

„CSS-in-JS“ gali sumažinti prieinamumą, kai naudojama neteisingai. Taip atsitiks, kai didele dalimi statinio turinio svetainė bus įdiegta be Critical CSS ištraukimo, kad HTML nebūtų galima nuspalvinti prieš įkeliant ir įvertinant „JavaScript“ paketą. Tai taip pat gali nutikti, kai didžiulis CSS failas pateikiamas naudojant blokuojančios nuorodos žymą dokumento galvutėje. Tai yra populiariausia dabartinė tradicinio įterpimo problema, o ne būdinga CSS-in-JS.

Kūrėjai turi prisiimti atsakomybę už prieinamumą. Vis dar vyrauja klaidinga mintis, kad nestabilus interneto ryšys yra ekonomiškai silpnų šalių problema. Mes linkę pamiršti, kad kiekvieną dieną kyla problemų dėl susisiekimo, kai įvažiuojame į požeminę geležinkelio sistemą ar didelį pastatą. Stabilus belaidis mobilusis ryšys yra mitas. Net nėra lengva turėti stabilų „WiFi“ ryšį, pavyzdžiui, 2,4 GHz WI-FI tinklas gali trikdyti mikrobangų krosnelę!

Kritinės CSS su serverio pusės perteikimu kaina

Norėdami gauti kritinę CSS ištrauką CSS-in-JS, mums reikia SSR. SSR yra tam tikro serverio programos būsenos galutinio HTML generavimo procesas. Tiesą sakant, tai gali būti gana sudėtingas ir brangus procesas. Kiekvienai HTTP užklausai reikia tam tikro serverio procesoriaus ciklų.

CSS-in-JS paprastai pasitelkia faktą, kad jis yra užfiksuotas HTML atvaizdavimo vamzdyne. * Jis žino, koks HTML buvo pateiktas ir kokio CSS reikia, kad galėtų sukurti absoliučiai minimalų jo kiekį. Kritinė CSS prideda papildomų pridėtinių išlaidų HTML pateikimui serveryje, nes tą CSS taip pat reikia sudaryti į galutinę CSS eilutę. Vis dėlto kai kuriais atvejais sunku arba net neįmanoma išsaugoti talpyklą serveryje.

Pateikiama juodoji dėžutė

Turite žinoti, kaip jūsų naudojama CSS-in-JS biblioteka pateikia jūsų CSS. Pavyzdžiui, žmonės dažnai nežino, kaip sukurti elementai ir emocijos įgyvendina dinaminius stilius. Dinaminiai stiliai yra sintaksė, leidžianti naudoti „JavaScript“ funkcijas jūsų stiliaus deklaracijose. Tos funkcijos priima rekvizitus ir grąžina CSS bloką.

Kad šaltinio užsakymo specifiškumas būtų nuoseklus, abi minėtos bibliotekos sukuria naują CSS taisyklę, jei joje yra dinaminė deklaracija ir komponentas atnaujinamas naujomis rekvizitais. Norėdami parodyti, ką turiu galvoje, sukūriau šią smėlio dėžę. JSS nusprendėme pasirinkti kitokį kompromisą, kuris leidžia atnaujinti dinamines savybes nesugeneruojant naujų CSS taisyklių. *

Staigus mokymosi kreivė

Žmonėms, kurie yra susipažinę su CSS, bet dar nėra susipažinę su „JavaScript“, pradinis darbo su CSS-in-JS tempu darbas gali būti gana didelis.

Jei norite rašyti CSS-in-JS, jums nereikia būti profesionaliu „JavaScript“ kūrėju, kol neįvyks sudėtinga logika. Negalime apibendrinti stiliaus sudėtingumo, nes tai tikrai priklauso nuo naudojimo atvejo. Tais atvejais, kai CSS-in-JS tampa sudėtingas, tikėtina, kad įgyvendinimas naudojant vanilinę CSS bus dar sudėtingesnis.

Pagrindiniam CSS-in-JS stiliui reikia žinoti, kaip deklaruoti kintamuosius, kaip naudoti šablono eilutes ir interpoliuoti „JavaScript“ reikšmes. Jei naudojamas objekto žymėjimas, reikia žinoti, kaip dirbti su „JavaScript“ objektais ir konkrečios bibliotekos objekto pagrindu sukurta sintaksė. Jei naudojamas dinaminis stilius, reikia žinoti, kaip naudoti „JavaScript“ funkcijas ir sąlygas.

Apskritai yra mokymosi kreivė, mes negalime jos paneigti. Ši mokymosi kreivė paprastai nėra daug didesnė nei Sass mokymosi kreivė. Tiesą sakant, aš sukūriau šį „kiaušinių galvos“ kursą, kad tai parodyčiau.

Nėra sąveikos

Dauguma CSS-in-JS sąsajų nėra suderinamos. Tai reiškia, kad stiliai, parašyti naudojant vieną biblioteką, negali būti pateikiami naudojant kitą biblioteką. Praktiškai tai reiškia, kad jūs negalite lengvai perjungti visos programos iš vienos programos į kitą. Tai taip pat reiškia, kad jūs negalite lengvai bendrinti savo vartotojo sąsajos naudodamiesi NPM, neįdėdami pasirinktos CSS-in-JS bibliotekos į vartotojo rinkinį, nebent turite CSS statinio ištrauką, skirtą statyti.

Pradėjome dirbti su ISTF formatu, kuris, kaip manoma, padės išspręsti šią problemą, bet, deja, dar neturėjome laiko, kad gautume ją į parengimui parengtą būseną. *

Manau, kad dalijimasis pakartotinai naudojamais pagrindų agnostikos UI komponentais viešojoje erdvėje vis dar yra sunkiai išsprendžiama problema.

Saugumo rizika

Su CSS-in-JS galima įdiegti saugumo nutekėjimą. Kaip ir bet kurioje kliento programoje, visada turite išvengti vartotojo įvesties prieš pateikdami ją.

Šis straipsnis suteiks daugiau įžvalgos ir keletą gąsdinančių pavyzdžių.

Neįskaitomi klasių pavadinimai

Kai kurie žmonės vis dar mano, kad svarbu, jog internete turėtume prasmingus, skaitomus klasių pavadinimus. Šiuo metu daugelis CSS-in-JS bibliotekų teikia prasmingus klasių pavadinimus, pagrįstus deklaracijos vardu arba komponento pavadinimu kūrimo režimu. Kai kurie iš jų netgi leido tinkinti klasės pavadinimo generatoriaus funkciją.

Tačiau gamybos režimu dauguma jų sukuria trumpesnius pavadinimus mažesniam naudingam kroviniui. Tai yra kompromisas, kurį bibliotekos vartotojas turi padaryti ir pritaikyti bibliotekai, jei reikia.

Išvada

Kompromisų yra ir aš greičiausiai net neminėjau jų visų. Tačiau dauguma jų ne visuotinai taikomi visiems CSS-in-JS. Jie priklauso nuo to, kurią biblioteką naudojate ir kaip ja naudojatės.

* Šiam sakiniui paaiškinti prireiks skirto straipsnio. Praneškite man „Twitter“ (@ oleg008) apie tai, kurį norėtumėte perskaityti daugiau.