Auth redesign - Githubissues

MathisBarre commented 1 year ago

MacBook Air - 1

Redesign of auth pages with tailwind.css.

It should not break others pages. tailwind is only applied on auth pages and have near zero impact on the bundle size

Feel free not to merge if you want to avoid using another ui library

Jerome-Marichez commented 1 year ago

Je suis pas contre les reworks scss d'autant plus que le tient est pas si mal mais j'ai du mal à voir l'interêt d'utiliser tailwind en tant que tel.

ça alourdit le code coté .JSX pour du "style" je suis pas ultra fan. A voir avec les autres.

D'autant plus qu'il suffit d'une convention de nommage pour les class SCSS si on souhaite avoir des styles plus propres.

Jerome-Marichez commented 1 year ago

Sinon beau boulot.

MathisBarre commented 1 year ago

Je suis pas contre les reworks scss d'autant plus que le tient est pas si mal mais j'ai du mal à voir l'interêt d'utiliser tailwind en tant que tel.

ça alourdit le code coté .JSX pour du "style" je suis pas ultra fan. A voir avec les autres.

D'autant plus qu'il suffit d'une convention de nommage pour les class SCSS si on souhaite avoir des styles plus propres.

@Jerome-Marichez

Débat d'opinion. Je ne vais pas débattre sur l'utilité de tailwindcss ici mais je dirais juste c'est personnellement une librairie qui me permet d'être très rapide pour développer des interfaces personnalisés de qualité. Ça fait maintenant environ 3 ans que j'utilise cet outil sur mes projets perso et en entreprise et j'en suis ravi. D'ailleurs je ne suis pas le seul dans ce cas (voir screen).

Dans ce contexte, je n'oblige pas à merge ma PR car c'est effectivement pas forcément une bonne idée de mélanger trop d'outils dans une seule codebase et je ne compte pas participer très fréquemment au projet donc c'est pas à moi d'imposer mes outils.

Mais j'invite tout le monde à au moins vous renseigner et essayer tailwind un jour. Ça semble effectivement lourd de loin mais en fait à l'usage c'est un vrai plaisir.

WhitedogWarren commented 1 year ago

En tout cs, dans le cas présent, ça n'a pas spécialement alourdi la partie jsx. Enfin, j'ai pas eu l'impression à la lecture.

Jerome-Marichez commented 1 year ago

@MathisBarre La remarque pour Tailwind vaut aussi pour material UI. Je vois pas trop l'interêt de pas écrire son propre CSS, en dehors dans le cas de prototypage ou de la création d'un dashboard rapidement.

Par ailleurs effectivement dans le cas présent étant donnée l'usage de material au préalable c'est pas fou de mixup les 2 librairie.

Après à voir pour les autres avis (cf: @julienb86) par exemple.

J'ai pas citer les autres framework css (comme bootstrap ou autre) mais c'est la même idée.

@WhitedogWarren ça le devient surtout par la suite, hors dès l'usage du framework l'idée c'est de l'utiliser sur le reste du projet. Donc infiné.

WhitedogWarren commented 1 year ago

Ben, on va dire que le "choix" de material UI, c'est un peu moi qui suis tombé dessus et qui ai commencé à en coller partout. Mais ça n'était pas un choix spécialement "éclairé", vu le peu d'expérience et d'affinité que j'ai avec le dev front ^^ Et, pour tout dire, j'ai trouvé sur certain points que les composant MUI n'était pas super simple à customiser ( cf la couleur des boutons. ). Mais pour le coup, envisager un changement de lib', ça implique pas mal de boulot. Donc il faut effectivement faire un choix qui convienne à un maximum de personnes sur ce projet, et fixer ce choix. Moi ça me dérange pas d'apprendre à faire du tailwind, mais en ce moment je suis plus orienté sur la partie plus "technique" des nouvelles features comme les PM, ou la gestion des events qui est loin d'être finalisée.

julienb86 commented 1 year ago

Hello! Je pense qu il faut, premièrement, se poser la question de savoir si, lorsqu'on fait un composant jsx, on est responsable de faire la partie CSS ou est ce que qq un est dédié à gérer ça et dans ce cas c'est à cette personne de proposer sa façon de faire (on peut toujours en débattre). Deuxièmement, je ne connais pas tailwind même si j entends de bons échos, a-t-on besoin de cet outil et pourquoi ? Voilà, perso peu importe de mon côté, je n'ai pas fait de css depuis plus de 3 ans donc bon ^^, je ne suis pas le meilleur juge. Je me ferai au choix du groupe.

Jerome-Marichez commented 1 year ago

A voir donc @julien86 / @WhiteDogWarren.

En résumée pour moi les bonnes options:

On reste sur du SCSS/CSS et Material UI (voir même on remove Material UI si au final y'a pas tant que ça d'usage dans la codebase ? ).
On part sur tailwind mais on vire Material UI.

Maintenant je vous cache pas que je suis pas ultra fan m'enfin c'est à vous de voir @WhitedogWarren / @julienb86 Par contre en l'état faire du crossover pas ouf du tout (et là c'est à mon sens plus correcte comme point de vue que juste le fait que je fais le chiant sur la librairie) :>

MathisBarre commented 1 year ago

Encore une fois, je ne veux pas imposer mon avis n'étant pas contributeur principal sur le projet. Cependant, voici ce que je peux vous dire sur tailwindcss avec mon experience:

Vous êtes rapide car vous n'avez pas à nommer et créer de nouvelles classes.
Le résultat est souvent plus consistant car vous avez un set de couleur/border radius/spacing etc définis. Aux oubliettes les marges de 5px par là et de 9px par ici. . Ou les couleurs moches
Très customisable. Au final c'est que des classes CSS et tous les tokens (couleurs, spacing etc..) prédéfinis sont modifiable si besoin. Donc tous les designs sont envisageables.
Ajouter de la logique à votre interface custom n'est pas difficile avec Radix UI, c'est même possible de juste le copier-coller directment dans votre projet grâce à shadcn/ui
Pour passer d'un projet à un autre il suffit de copier coller le code est c'est fonctionnel
Très grosse communauté avec beaucoup de ressources
Très facile à prendre en main
Très léger, c'est que des classes CSS encore une fois
La logique n'est pas couplé au style, ce qui rend les deux remplaçable facilement si besoin dans le futur. Et ça permet de faire cohabiter une librairie comme MaterialUI avec tailwind (chez shotgun par exemple, on a Ant design ET tailwindcss)

Les points négatifs:

Il faut quand même quelques notions d'ui pour faire quelque chose de jolie (mais c'est vrai avec toutes les libs dans une certaine mesure)
Si le code est mal fait on peut se retrouver avec une chié de class peu compréhensible (mais c'est mitigé car évitable de pleins de manières différentes)
Même avec peu de classes, tout le monde n'aime pas la tête que ça donne au html

Voilà, j'espère que ça pourrait vous aider à faire votre choix

WhitedogWarren commented 1 year ago

Bah, au final, MUI produit aussi un HTML pourri. Des jeux de divs pas toujours compréhensibles, ayant plein de classes aux noms à coucher dehors. Au final, je crois pas que sur ce point-là il y en ai un vraiment pire que l'autre ^^ Mais ça, j'ai envie de dire, 99,5% des utilisateurs ne vont pas aller regarder la propreté du HTML généré, si ?

julienb86 commented 1 year ago

We decided not to use tailwind. Thanks Mathis.

devs-coffee / frontend-collab-chat-project

Auth redesign #94