A CSS-in-JS kompromisszumai

Fotó: Artem Bali

Nemrég írtam egy magasabb szintű áttekintést a CSS-in-JS-ről, többnyire azokról a problémákról beszélek, amelyeket ez a megközelítés megpróbál megoldani. A könyvtári szerzők ritkán fordítanak időt megoldásuk kompromisszumainak leírására. Néha azért van, mert túl elfogultak, és néha csak nem tudják, hogy a felhasználók hogyan használják az eszközt. Tehát ez egy kísérlet leírni a kompromisszumokat, amelyeket eddig láttam. Fontosnak tartom megemlíteni, hogy a JSS szerzője vagyok, ezért elfogultnak kell tekinteni.

Szociális hatás

Van egy réteg emberek, akik a webes platformon dolgoznak, és nem ismerik a JavaScript-et. Azoknak fizetnek, hogy HTML és CSS-t írnak. A CSS-in-JS óriási hatást gyakorolt ​​a fejlesztők munkafolyamatára. Soha nem lehet valóban átalakító változást végrehajtani anélkül, hogy néhány ember elmaradna. Nem tudom, hogy a CSS-in-JS-nek kell-e lennie az egyetlen útnak, de a tömeges elfogadás egyértelmű jele a CSS modern alkalmazásokban való használatának problémáinak.

A probléma nagy része az, hogy nem tudunk pontosan kommunikálni azokkal az esetekkel, amikor a CSS-in-JS világít, és hogyan tudjuk azt megfelelően használni egy feladathoz. Számos CSS-in-JS rajongó sikeresen támogatta a technikát, ám sok kritikus nem beszélt konstruktív módon a kompromisszumokról anélkül, hogy az eszközök olcsó hintáját tennék. Ennek eredményeként sok kompromisszumot rejtettünk, és nem tettünk erőfeszítéseket a magyarázat és a lehetséges megoldások biztosítása érdekében.

A CSS-in-JS egy olyan kísérlet, amely megkönnyíti a bonyolult használati esetek kezelhetőségét, ezért ne tolja oda, ahol nincs rá szükség!

Futásidejű költség

Ha a böngészőből a CSS-t a JavaScriptből generálják, akkor a böngészőben benne rejlő fölött vannak. A futásidejű általános kiadvány könyvtáronként változik. Ez jó általános referenciaérték, de feltétlenül végezzen saját teszteket. A futásidejű különbségek attól függnek, hogy szükség van-e teljes CSS-elemzésre a sablonok karakterláncaitól, az optimalizálás mennyiségétől, a dinamikus stílusok megvalósítási részleteitől, a kivonási algoritmustól és a keretintegrációs költségektől. *

A lehetséges futásidejű általános költségek mellett 4 különféle csomagolási stratégiát kell figyelembe vennie, mivel néhány CSS-in-JS könyvtár több stratégiát támogat, és a felhasználó feladata ezeket alkalmazni. *

1. stratégia: Csak futásidejű generálás

A futásidejű CSS-generálás egy olyan módszer, amely CSS-karakterláncot generál JavaScript-ben, majd ezt a karakterláncot stíluscímke segítségével fecskendezi be a dokumentumba. Ez a technika stíluslapot hoz létre, NEM inline stílusokat.

A futásidejű generáció kompromisszuma az a képtelenség, hogy stílusos tartalmat biztosítson a korai szakaszban, ahogy a dokumentum elindul. Ez a megközelítés általában olyan tartalom nélküli alkalmazásokra alkalmazható, amelyek azonnal hasznosak lehetnek. Általában az ilyen alkalmazások felhasználói beavatkozást igényelnek, mielőtt valóban hasznossá válnának a felhasználó számára. Az ilyen alkalmazások gyakran olyan dinamikus tartalommal dolgoznak, hogy elavulttá válnak, amint betölti őket, ezért korán létre kell hoznia egy frissítési folyamatot, például a Twitter-hez. Ezen felül, ha egy felhasználó be van jelentkezve, nem kell HTML-t megadnia a SEO-hoz.

Ha az interakcióhoz JavaScript szükséges, akkor a köteget be kell tölteni, mielőtt az alkalmazás készen állna. Például, megjelenítheti az alapértelmezett csatorna tartalmát, ha a Slack-ot beteszi a dokumentumba, de valószínű, hogy a felhasználó ezt követően azonnal meg akarja változtatni a csatornát. Tehát, ha az eredeti tartalmat betöltötte, csak hogy azonnal dobja el.

Az ilyen alkalmazások észlelt teljesítményét javíthatjuk helyőrzőkkel és egyéb trükkökkel, hogy az alkalmazás azonnali hatást érezhessen, mint amilyen valójában van. Az ilyen alkalmazások általában egyébként nagyon nehéz adatok, tehát nem lesznek olyan gyorsan hasznosak, mint egy cikk.

2. stratégia: Futásidejű generálás a kritikus CSS-sel

A kritikus CSS az a minimális CSS-mennyiség, amely szükséges az oldal eredeti állapotának stílusához. A dokumentum fejében található stíluscímkével látják el. Ezt a technikát széles körben használják a CSS-in-JS rendszerben és anélkül. Mindkét esetben valószínűleg kétszer tölti be a CSS-szabályokat, egyszer a Kritikus CSS részeként, és egyszer a JavaScript vagy CSS csomag részeként. A kritikus CSS mérete a tartalom mennyiségétől függően meglehetősen nagy lehet. Általában a dokumentum nem kerül tárolásba.

Kritikus CSS nélkül egy statikus, tartalomigényes egyoldalas alkalmazásnak, amely futtatja a CSS-in-JS-t, a tartalom helyett helyőrzőket kell megjelenítenie. Ez azért rossz, mert sokkal korábban hasznos lehet a felhasználó számára, javítva az akadálymentes eszközök és az alacsony sávszélességű kapcsolatok hozzáférhetőségét.

A kritikus CSS-sel a futásidejű CSS-generálás későbbi szakaszban is elvégezhető anélkül, hogy a felhasználói felületet blokkolnák a kezdeti szakaszban. Figyelem! Figyelembe kell azonban venni, hogy az alacsonyabb kategóriájú, kb. Öt éven felüli mobil eszközökön a CSS generálása a JavaScriptről negatív hatással lehet a teljesítményre. Ez erősen függ a generált CSS mennyiségétől és a használt könyvtáratól, így nem általánosítható.

Ennek a stratégiának a kompromisszuma a kritikus CSS kibontás költsége és a futásidejű CSS generálás költsége.

3. stratégia: Csak építkezési idő kitermelés

Ez a stratégia az alapértelmezett stratégia az interneten, CSS-in-JS nélkül. Egyes CSS-in-JS könyvtárak lehetővé teszik a statikus CSS kibontását az építkezés idején. * Ebben az esetben nincs szükség futási időre, a CSS-t az oldalon egy hivatkozási címke segítségével jelenítik meg. A CSS generáció költségei egyszeri idővel megtérülnek.

2 fő kompromisszum van itt:

  1. A CSS-in-JS dinamikus API-k némelyikét futási időben nem használhatja, mert nincs hozzáférése az állapothoz. Gyakran még mindig nem használhatja a CSS egyéni tulajdonságait, mert ezeket nem minden böngésző támogatja, és a természet általi felhasználásuk nem tölthető be többször. Ebben az esetben meg kell akadályoztatni a dinamikus szinkronizálást és az állami alapú stílus kialakítását. *
  2. Kritikus CSS nélkül és üres gyorsítótárral blokkolja az első festéket, amíg a CSS-csomag betöltődik. A hivatkozás elem a dokumentum fejében blokkolja a HTML megjelenítését.
  3. Nem determinisztikus specifitás az oldal alapú köteg felosztásával egyoldalas alkalmazásokban. *

4. stratégia: Építési idő kitermelés a kritikus CSS-sel

Ez a stratégia nem kizárólagos a CSS-in-JS esetében. A teljes statikus kivonás a kritikus CSS-sel biztosítja a legjobb teljesítményt, ha statikusabb alkalmazásokkal dolgozik. Ez a megközelítés továbbra is rendelkezik a statikus CSS fent említett kompromisszumaival, azzal a különbséggel, hogy a blokkoló linkcímkét a dokumentum aljára lehet helyezni.

4 fő CSS-megjelenítési stratégia létezik. Csak 2 közülük jellemző a CSS-in-JS-re, és egyikük sem vonatkozik az összes könyvtárra.

Megközelíthetőség

A CSS-in-JS rosszul felhasználva csökkentheti az akadálymentességet. Ez akkor fordul elő, amikor egy nagyrészt statikus tartalmú webhelyet valósítanak meg kritikus CSS kivonatolás nélkül, így a HTML-t nem lehet festeni, mielőtt a JavaScript-csomag betöltődött és ki lett értékelve. Ez akkor is előfordulhat, ha egy hatalmas CSS-fájlt egy blokkoló linkcímkével jelenítünk meg a dokumentum fejében, amely a hagyományos beágyazással kapcsolatos legnépszerűbb jelenlegi probléma, és nem a CSS-in-JS-re jellemző.

A fejlesztőknek felelősséget kell vállalniuk az akadálymentességért. Még mindig erős tévesen gondolják, hogy az instabil internetkapcsolat a gazdaságilag gyenge országok problémája. Hajlandóak vagyunk elfelejteni, hogy minden nap kapcsolódási problémák vannak, amikor belépünk egy földalatti vasúti rendszerbe vagy egy nagy épületbe. A stabil kábel nélküli mobil kapcsolat mítosz. Nem is könnyű stabil WiFi-kapcsolatot létesíteni, például egy 2,4 GHz-es WI-FI hálózat zavart okozhat a mikrohullámú sütőből!

A Kritikus CSS költségei kiszolgálóoldali megjelenítéssel

Ahhoz, hogy kritikus CSS-kivonást kapjunk a CSS-in-JS-hez, SSR-re van szükségünk. Az SSR az a folyamat, amellyel a végső HTML-kódot generálják a kiszolgálón lévő alkalmazás adott állapotához. Valójában ez elég bonyolult és költséges folyamat lehet. Minden HTTP-kéréshez bizonyos mennyiségű CPU-ciklusra van szükség a kiszolgálón.

A CSS-in-JS általában kihasználja azt a tényt, hogy be van dugva a HTML-megjelenítési folyamatba. * Tudja, milyen HTML-t rendelt el és milyen CSS-re van szüksége ahhoz, hogy képes legyen abszolút minimális mennyiségének előállítására. A kritikus CSS további többletköltségeket ad a kiszolgálón lévő HTML-megjelenítéshez, mivel ezt a CSS-t szintén be kell állítani egy végső CSS-karakterláncba. Egyes esetekben azonban nehéz vagy akár lehetetlen gyorsítótárazni a szerveren.

Renderelés fekete dobozban

Tudnia kell, hogy egy CSS-in-JS könyvtár hogyan teszi a CSS-t. Például az emberek gyakran nem tudják, hogy a Stílusos Komponensek és Érzelem hogyan alakítják át a dinamikus stílusokat. A dinamikus stílusok olyan szintaxis, amely lehetővé teszi a JavaScript funkciók használatát a stílusok deklarációjában. Ezek a funkciók elfogadják a kellékeket és visszaadnak egy CSS blokkot.

Annak érdekében, hogy a forrás-sorrend specifikussága konzisztens legyen, mindkét fent említett könyvtár létrehoz egy új CSS-szabályt, ha dinamikus deklarációt tartalmaz, és az összetevő frissíti új kellékeket. Hogy bemutassam, mire gondolok, elkészítettem ezt a homokozót. A JSS-ben egy másik kompromisszum mellett döntöttünk, amely lehetővé teszi a dinamikus tulajdonságok frissítését új CSS-szabályok létrehozása nélkül. *

Merev tanulási görbe

Azoknak az embereknek, akik ismerik a CSS-t, de újak a JavaScripten, a CSS-in-JS felgyorsításához való munka kezdeti összege meglehetõsen nagy lehet.

A CSS-in-JS írásához nem kell professzionális JavaScript fejlesztőnek lennie, egészen addig a pontig, amikor a komplex logika bekapcsolódik. Nem lehet általánosítani a stílus összetettségét, mivel ez valójában a felhasználási körülményektől függ. Azokban az esetekben, amikor a CSS-in-JS összetetté válik, valószínű, hogy a vanília CSS-sel történő megvalósítás még bonyolultabb lenne.

Az alapvető CSS-in-JS stílushoz a tudást kell megtudni a változók deklarálására, a sablonok karakterláncainak használatára és a JavaScript-értékek interpolálására. Objektum-jelölés használata esetén meg kell tudni, hogyan kell működni a JavaScript-objektumokkal és a könyvtárspecifikus objektum-alapú szintaxissal. Dinamikus stílus kialakítása esetén tudnia kell, hogyan kell használni a JavaScript funkciókat és a feltételt.

Összességében van egy tanulási görbe, nem tagadhatjuk meg. Ez a tanulási görbe általában nem sokkal nagyobb, mint a Sass-tanulás. Valójában ezt a tojásfejű tanfolyamot készítettem, hogy ezt bizonyítsam.

Nincs interoperabilitás

A legtöbb CSS-in-JS könyvtár nem interoperábilis. Ez azt jelenti, hogy az egyik könyvtár használatával írt stílusokat nem lehet más könyvtárakkal megjeleníteni. Gyakorlatilag azt jelenti, hogy a teljes alkalmazás nem váltható át könnyedén az egyik megvalósításról a másikra. Ez azt is jelenti, hogy nem könnyedén megoszthatja felhasználói felületét az NPM-en anélkül, hogy a választott CSS-in-JS könyvtárat a fogyasztói csomagba behozná, kivéve, ha statikus kibontása van a CSS számára.

Megkezdtük az ISTF formátum kidolgozását, amely állítólag megoldja ezt a problémát, de sajnos még nem volt időnk, hogy készenléti állapotba hozzuk. *

Úgy gondolom, hogy az újrahasznosítható keret-agnosztikai felhasználói felület komponensek megosztása a nyilvánosságban továbbra is általában nehéz megoldandó probléma.

Biztonsági kockázatok

A CSS-in-JS segítségével szivárgást lehet bevezetni. Mint minden ügyféloldali alkalmazás esetén, mindig el kell kerülnie a felhasználói bemeneteket, mielőtt megjelenítené.

Ez a cikk további betekintést és néhány félrevezető példát nyújt Önnek.

Olvashatatlan osztálynevek

Néhányan még mindig fontosnak tartják, hogy értelmes, olvasható osztályneveket tartsunk az interneten. Jelenleg számos CSS-in-JS könyvtár értelmes osztályneveket nyújt a deklarációs név vagy az összetevő neve alapján fejlesztési módban. Néhányuk lehetővé teszi az osztálynévgenerátor funkció testreszabását.

Termelési módban azonban ezek többsége rövidebb neveket generál egy kisebb hasznos teherhez. Ez a kompromisszum, amelyet a könyvtár felhasználójának el kell készítenie és testreszabnia kell a könyvtárat, ha szükséges.

Következtetés

Vannak kompromisszumok, és valószínűleg nem is említettem mindet. De a legtöbbjük nem egyetemesen vonatkozik az összes CSS-in-JS-re. Attól függnek, hogy melyik könyvtárat használja és hogyan használja.

* Ez a mondat elmagyarázza a dedikált cikket. Tudassa velem a Twitter-en (@ oleg008), hogy melyikről szeretne többet megtudni.