Aphrodite, esempi css in js - fevr 10.08.2016

Matteo Ronchi [9:10 AM]
domandona del lunedì mattina: cosa ne pensate di aphrodite (no pun) @michele @lucacolonnellocrweb @danieleb @gianmarcotoso

Luca Colonnello [9:11 AM]
Per me è favoloso, ma non l'ho ancora provato.. l'idea di poter creare pacchetti altamente modificabili da css è stupenda.. bisogna vedere un po' per il debug che magari può diventare morboso, ma alla fine non è proprio un compilato quindi quello che vedi in console può bastare

Michele Bertoli [9:12 AM]
Aphrodite è una delle soluzioni più sensate Anche perchè è arrivata quando l'universo dei css in js era stato già esplorato E altri progetti erano falliti

Matteo Ronchi [9:13 AM]
si infatti il concetto mi piace molto, unica cosa che non mi esalta è che ogni volta che cambi una prop css crei una classe nuova

Michele Bertoli [9:13 AM]
Mette insieme la comodità degli oggetti js per gli stili, con l'output di vero css

Matteo Ronchi [9:13 AM]
mi piace molto di più degli inline styles puri

Michele Bertoli [9:14 AM]
Yes Una feature molto interessante

Matteo Ronchi [9:14 AM]
vedevo che loro consigliano di usare react-look come alternativa che ora è deprecated in favore di react-fela

Michele Bertoli [9:14 AM]
È che inietta solo gli stili attualmente in uso L'autore di fela È co-maintainer del mio repo

Matteo Ronchi [9:15 AM]
:open_mouth: e cosa cambia / ne pensi tra fela e aphrodite?

Michele Bertoli [9:15 AM]
È un tipo molto smart

Matteo Ronchi [9:16 AM]
una cosa che ha peso per aphrodite è anche che è sviluppata appositamente per paypal quindi dovrebbe avere una longevità/continuità più stabile (edited) anche se non so su quali app la usano ah no vedo che lo usano in produzione

Michele Bertoli [9:19 AM]
Sisi la usano in prod in paypal Infatti Secondo me fela ha delle feature anche più interessanti Es. Plugins Ma non diventerà mai così popolare Una soluzione da tenere d'occhio È https://github.com/geelen/css-components-demo Sta nascendo in sti giorni ma ha un grande potenziale

Matteo Ronchi [9:22 AM]
interessante! però come x radium non mi esalta il fatto che decori/modifichi il comportamento/output di react

Michele Bertoli [9:24 AM]
Giusto

Matteo Ronchi [9:30 AM]
quindi per fare tirare le somme:

  • aphrodite è usata da progetti grandi, non pare avere particolari drawback se non in scenari dove generi davvero tanti nuovi stili in continuazione. Non è legata solo a React
  • radium anch’essa usata da grandi progetti ha + limiti verso media queries e altri aspetti css ma non ha altri grandi limiti. E’ legata a react e wrappa il render method
  • react-fela è un pò un aphrodite on steroids ma non ha usi reali in grandi progetti ed è mantenuta da un singolo dev. Come radium si interpone/modifica i comportamenti di React per funzionare

Luca Colonnello [9:56 AM]
a me onestamente non preoccupa molto il casso della generazione live dello style penso che faccia memoizzazione

Matteo Ronchi [9:57 AM]
si fa memoization però la chiave è la serializzazione in JSON dell’intero oggetto passato alla lib quindi imho va gestito con attenzione quando generi/rigeneri gli stili usando css() (edited) se no è vero che non genera nuove classi css ma fai cmq serializzare uno sproposito di oggetti ad ogni render

Michele Bertoli [10:00 AM]
ottime conclusioni @cef62 radium tra l'altro non sono sicuro sia utilizzato davvero in progetti grossi (a parte le cose che fa formidable labs)

Matteo Ronchi [10:00 AM]
loro sul sito dicono che è usato da FB stessa :stuck_out_tongue:

Michele Bertoli [10:00 AM]
un'altra alternativa e' https://github.com/cssinjs/jss

Matteo Ronchi [10:01 AM]
si l’ho vista non mi ha convinto però mi isembra che non sia usata in progetti reali importanti o sbalgio?

Michele Bertoli [10:05 AM]
quello non lo so (percio' penso di no) pero' e' la piu' matura (edited) es. quando ho iniziato con il mio repo c'era gia' c'e' questa che funziona in modo super strano https://github.com/threepointone/glamor e siccome l'ha twittata mj sta ricevendo un sacco di attenzione ma se vuoi andare sul sicuro aphrodite e' quello che fa per te

Matteo Ronchi [10:07 AM]
si ho visto quella di threepointone fa cose molto cool però è troppo nuova si infatti aphrodite mi sembra il miglior compromesso anche se un sistema di plugins sarebbe figo

Michele Bertoli [10:08 AM]
confermo

Matteo Ronchi [10:43 AM]
ragazzi idee su come supportareflexbox per ie11 con aphrodite?

Michele Bertoli [10:49 AM]
https://github.com/rofrischmann/inline-style-prefixer sembra che aphrodite usi questa dovresti essere a posto

Matteo Ronchi [10:59 AM]
si infatti stavo guardando proprio ora! grazie mille! sei il mio salvavita

https://github.com/Khan/aphrodite/issues/100 questo è inerente, se ti può interessare

Luca Colonnello [11:36 AM]
l’ho vista anche io glamor seguiamo la stessa gente!!!

Michele Bertoli [11:43 AM]
io seguo tutti quelli che mettono le parole css e js nello stesso tweet : )

Luca Colonnello [11:43 AM]
si io anche react redux e graphql ce ne sono un botto cmq se vi può essere utile un mio collega ha trovato questo https://medium.com/@oleg008/aphrodite-vs-jss-a15761b91ee3#.gyovlnjce

Luca Colonnello [11:48 AM]
sul fatto che il render così è async ha ragione aphrodite ha questo unico difetto che il css purtroppo viene inserito nel dom in modo async quindi vedi il componente laggare prima di essere completamente renderizzato mi piacerebbe risolvere il problema con aphrodite, non riesco invece a capire se glamor genera css inline o tag style

We introduce an api to annotate arbitrary dom nodes with style definitions ("rules") for, um, the greater good.

però non capisco dove lo fa perchè non c’è nessun setup richiesto a inizio app se non per server side rendering

Michele Bertoli [12:00 PM]
la versione che ho provato io generava css e non usava classi ma attributi

Luca Colonnello [12:01 PM]
ho letto data-* ma sono più lenti nella selezione css non mi piacciono molto


Matteo Ronchi [2:31 PM]
...
in ogni caso sto iniziando uno uikit abbastanza impegnativo con aphrodite, nelle prox week ti potrò dire di più :slightly_smiling_face:

Luca Colonnello [2:35 PM]
grande mi interessa proprio questo purtroppo è una delle attività che faranno qui quando me ne sarò andato

Matteo Ronchi [2:35 PM]
XD

Luca Colonnello [2:35 PM]
quindi mi interesserebbe dargli dei feedback prima che comincino ma non ne ho il tempo ora di provarlo

Matteo Ronchi [2:35 PM]
sto disegnando ora il layer di astrazione (theme-manager, HoCs, etc…) (edited)

Luca Colonnello [2:35 PM]
buonooo alla fine fai come dicevamo più o meno l’altra volta?

Matteo Ronchi [2:36 PM]
l’idea è che i componenti siano completamente slegati dal layer them/css/styles ci sarà un HoC che riceve le props, il context (come dicevamo) etc… e produce delle classi css per il comp figlio un pò come redux ma per gli stili

Luca Colonnello [2:37 PM]
ah ok bene

Matteo Ronchi [2:37 PM]
quindi il comp riceve un oggetto con le chiavi tipo { background, header, body } che sono le classi prodotte da aphrodite nell'HoC l’idea è che se mi slego da aphrodite non devo modificare i componenti ma solo l'HoC ovvio se passo a stili inline devo modificare il comp ma finché uso classi css tutto va via liscio

Luca Colonnello [2:38 PM]
a beh si ma in teoria aphrodite di per se slega già molto perchè tu usi un css prodotto come fosse css modules con oggetto styles per dire quindi sei abbastanza slegato

Matteo Ronchi [2:39 PM]
si

Luca Colonnello [2:39 PM]
al massimo all’HoC gli fai generare tutto

Matteo Ronchi [2:39 PM]
ma io non voglio 2 cose:

Luca Colonnello [2:39 PM]
e ricevi solo oggetto css o styles nel comp

Matteo Ronchi [2:39 PM]

    1. invocare css() nella render function
    1. invocare css() ad ogni render

Luca Colonnello [2:39 PM]
come dicevamo si si e l’HoC potrebbe memoizzare e modificare quello che cambia e rigenerare css solo se cambia qualcosa

Matteo Ronchi [2:40 PM]
è vero che se la classe è già iniettata è leggero ma fa cmq un filter + join + un paio di if

Luca Colonnello [2:40 PM]
anche se lo fa già lui ma ad alto livello non lo reinvochi si si

Matteo Ronchi [2:40 PM]
l’invocazione di css() se la fai su centinaia di componenti è cmq inutile e consuma risorse è come il bind nella render fn non impatta realmente la tua app ma è uno spreco inutile

Luca Colonnello [2:41 PM]
si si sono d'accordo lo farei uguale probabilmente io

Matteo Ronchi [2:42 PM]
inoltre, spezzare css() dentro l’HoC mi da un altro vantaggio posso scegliere se aggregare i vari stili in 1 o N classi css tanto al comp figlio passo una stringa lui non guarda se è composta da 1 o N nomi di classi

Luca Colonnello [2:42 PM]
si infatti e puoi gestire concatenazioni o merge vari con config passate dall’esterno al componente o dal provider del tema si si ottimo giusto così vai chef!!

results matching ""

    No results matching ""