Afrodita vs. JSS

Nejprve jsem autorem JSS, takže ano - jsem zkreslený, ale pokusím se zůstat co nejspravedlivější, slibuji.

Důvod, proč píšu tento příspěvek, je můj pocit, že nikdo neví rozdíly mezi těmito dvěma hluboko a to je pochopitelné. Mým cílem není ukázat, že JSS je lepší, je na vás, abyste se rozhodli. Mým cílem je ukázat rozdíly, které vám pomohou rozhodnout, co je pro vás důležité.

Různé perspektivy.

Je to inline styl, ale funguje!

Afrodita se snaží generovat CSS tak, aby fungovaly inline styly.

Libra pro generování CSS z JavaScriptu.

JSS se snaží poskytnout api pro generování CSS z JavaScriptu. Cílem je dosáhnout předvídatelného chování a nejvyššího možného výkonu.

Rozdíly v těchto perspektivách se velmi dobře odrážejí v odpovídajících API.

Vykreslovací model.

Obě knihovny kompilují JavaScript do CSS, což znamená, že na konci obě generují značku „stylu“ s uvnitř řetězce CSS. To se zásadně liší od inline stylů známých z React.

Mezi implementací JSS a Aphrodite je však velký rozdíl.

Aphrodite používá jeden stylový uzel a zapisuje do něj všechna pravidla. Důvodem je omezení IE9 a nižší:

List může obsahovat až 4095 pravidel
List může importovat až 31 listů
@import vnoření podporuje až 4 úrovně hluboké

Nedoporučuji používat JSS těm, kteří stále podporují IE9. To je možné napravit, mám plán na alternativní vykreslování backend v režimu dávkového režimu, ale neměl jsem čas ho skutečně implementovat.

Mám několik důvodů, proč jsem ve výchozím nastavení nepřepnul JSS na vykreslovací model Aphrodite:

  1. Výkon.
    Jeden uzel zápisu do stylu je během životního cyklu aplikace mnohem rychlejší než více zápisů. Afrodita se snaží minimalizovat množství zápisů hromaděním pravidel a použití asap, ale to přináší ještě více problémů, o kterých budu mluvit později.
  2. Průhlednost
    Každý list v JSS odpovídá jednomu prvku stylu. Což znamená, že každá součást má v hlavě značku stylu. Toto je snadné ladit, vždy můžete získat úplný obrázek CSS generovaného určitou komponentou.

Jako vedlejší poznámka je současné vykreslování Aphrodite ve starších prohlížečích IE nedbalé, protože v podstatě zapisuje CSS z celé aplikace do stylového uzlu při každém zápisu, což by mělo starší IE zpomalovat v závislosti na tom, kolik aplikace CSS má.

JS API.

Afrodita používá čistě funkční styl, který se mi moc líbí. Cena je však řada omezení. Například nemůžete vytvořit více instancí Afrodity s různými možnostmi. Knihovnu nelze rozšířit a její API je velmi omezené.

Jedním příkladem je extrémně uvážená vlastnost, kterou Afrodita má od začátku: každá hodnota vlastnosti dostane příponu „důležitá“. Například tlačítko: {color: ‘red’} se vykreslí na něco jako .button_sdf24rs: {color: red! important}. Byl to pokus o vyřešení problémů s izolací, ale nefunguje to dobře pro všechny. Aphrodite řešení tohoto problému je samostatný vstupní bod „no-important.js“, což není vhodný způsob, jak zavést volitelné funkce.

Protože JSS byl navržen jako abstrakce nad CSS, měli byste být schopni dělat cokoli, co můžete dělat se štíhlou JS na CSS. Aby bylo dosaženo maximální přizpůsobitelnosti, má JSS modul plug-in API, který umožňuje upravovat pravidla před tím, než jsou vykreslena do DOM. To také umožňuje udržovat JSS jádro malé a rychlé. Všechny funkce, jako je předvolba dodavatele, vnoření, výchozí jednotka a mnoho dalších, jsou implementovány jako pluginy. To nám také umožňuje vytvářet takové experimentální věci, jako je automatická izolace pravidel a lepší syntaxe JSON DSL (podívejte se na ně!).

JSON DSL.

Afrodita nepodporuje globální CSS, vybírá sourozence nebo děti, což je většinou velmi dobrá věc!

Někdy však chcete vytvořit selektor, který zacílí na podřízený uzel, a to není špatné, pokud neupravíte jeho vnitřní styly. Změna polohy a okrajů podřízených prvků je něco, co by měl určitě rodič udělat. To lze provést v JSS pomocí jss-nested pluginu.

Theming.

Aphrodite má funkci css (), která umožňuje během vykreslování vytvářet více pravidel. To je příjemné, pokud jde o téma, protože usnadňuje použití tématu poskytovaného rodičem kdykoli. Také vykresluje pouze styly, které skutečně používáte v aktuálním stavu komponenty.

Theming in JSS je k dispozici také, je však méně zřejmé, jak to udělat, a v současné době není podporován balíčkem rea-jss, což je integrace jss do reakce.

JSS chce vykreslit styly dříve, než komponenta vykreslí jeho prvky. V zásadě chce znát základní a tematické styly předem. To není vždy vhodné a je to téma změny pro reakci-jss. JSS jádro samotné je však připraveno. Do listu můžete přidat pravidla kdykoli, protože má metody .addRule () a .deleteRule (). Pravděpodobně účinnějším způsobem by bylo zavolat .detach () před přidáním mnoha pravidel a poté znovu .attach (). Protože tímto způsobem je všechny nasadí do DOMu jedním zápisem.

Nepředvídatelné vykreslování.

Aphrodite vykreslí pravidla DOM, když jsou použita, a to je v pohodě. Nevýhodou je toto: v okamžiku, kdy jsou vykresleny vaše DOM uzly - CSS pravděpodobně není, protože CSS je vyprázdněno do DOM v dalším klíště, takže následky jsou:

  1. Pokud chcete přistupovat k vypočítaným stylům uzlů DOM, které jste právě vykreslili, musíte použít „setTimeout“.
  2. To může mít za následek dvojité zpětné kalení a překreslení.

JSS se vykreslí synchronně po volání metody .attach (). Zavádí řetězec CSS do prvku stylu a vloží prvek do hlavy dokumentu. Dokud není list připojen, můžete přidávat / odebírat a upravovat pravidla bez režie DOM. Poté to můžete udělat také, ale změny se okamžitě aplikují na DOM CSSRule.