OpenAI vient de déployer une mise à jour majeure pour ChatGPT Canvas, transformant cet outil en un véritable couteau suisse pour les créateurs web. Au menu : rendu interactif de code React/HTML et intégration du modèle de raisonnement o1. De quoi rivaliser frontalement avec Claude Artifacts et autres plateformes comme v0 ou Bolt.
React ou le pire truc qui soit arrivé au web après Tailwind. Non merci.
Bonsoir. Pourquoi svp ?
Les librairies comme ca c’est pas mal, ca fait gagner du temps et poir reacg, ca permet de mettre à jour la page sans tout recharger…comme angular ou ajax (à l’époque^^)
React est une horreur qui mélange tous les aspects d’une application : logique, vue et style, ce qui est déjà le premier truc à ne pas faire qu’on t’apprend quand on étudie le développement logiciel. Le problème est que React vient de la culture JavaScript et la très grande majorité des développeurs JavaScript sont des billes en développement. Ensuite sa façon de gérer l’état de l’application est un cauchemar, on passe son temps à passer des objets d’un composant à l’autre, il faut une centrale nucléaire pour juste communiquer entre deux composants alors qu’en Angular on injecte juste un service dans le constructeur.
Tailwind bah… c’est un peu pareil. Premier truc qu’on apprend quand on étudie le développement front-end : on ne met pas ses styles dans le HTML. Or Tailwind c’est exactement ça. Ca parasite le code HTML qui de classes qui n’ont rien à faire là car les classes sont censées être sémantiques et descriptives ce qui fait que quand on inspecte le code HTML d’une page c’est un bordel monstrueux illisible, ça empêche la réutilisabilité et complexifie tout changement de styles. C’est là aussi une béquille pour pseudo-développeurs trop paresseux pour apprendre le CSS.
Je pense que ça fait un moment que tu n’as pas utilisé React. C’est fini le passage de propriétés au travers de tous les composants.
Certes il y a un « mélange » vue/contrôleur mais par rapport à la « boite noire » que constitue Angular avec ses nom obligatoires par exemple, je ne suis pas sûr que ce soit pire. Et on peut complètement choisir son approche de dev, pas de « système pré-établi ».
Sinon je suis d’accord que Tailwind est uniquement fait pour les développeurs, pas pour le client final, mais on peut tout de même l’utiliser via des classes séparées, on n’est pas obligé de pourrir son HTML avec, c’est les mauvais dev qui font ça. Tout comme ceux qui disent que les CSS c’est incontrôlable, et qu’il vaut mieux du CSS-in-JS (mauvais devs).
Sinon sur l’article, à mon avis, le rédacteur ne sait pas vraiment de quoi il parle. Un petit lien vers le communiqué original qui a été traduit serait intéressant.
J’ai suivi une formation dessus l’an dernier.
C’est justement l’un des principaux problèmes de React. C’est juste une librairie de template auquel chacun greffe son choix de trucs et de machins pour faire un monstre de Frankenstein impossible à maintenir et où chaque développeur fait sa popote. Angular vient avec tout ce qui est nécessaire pour faire son app de A à Z inclus et fournit de vrai guidances sur la bonne façon de travailler.
Je ne vois pas le rapport avec l’utilisateur, l’utilisateur ne lit pas le code HTML. C’est en tant que développeur que ça me fait chier de chercher mes petits dans 20 divs qui s’appellent
flex flex-col sm:flex-row md:flex-wrap lg:grid lg:grid-cols-3 xl:grid-cols-4 gap-4
p-6 md:p-12 lg:p-24 border-4 border-dashed border-gray-700 dark:border-gray-500
shadow-2xl shadow-indigo-500/50 rounded-3xl
bg-gradient-to-br from-red-500 via-purple-600 to-blue-500 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700
text-white dark:text-gray-200
hover:bg-gradient-to-bl hover:from-blue-500 hover:to-green-500 transition-all duration-700 ease-in-out
hover:scale-105 active:scale-95
motion-reduce:transition-none motion-reduce:hover:scale-100
select-none text-lg md:text-2xl font-extrabold italic uppercase tracking-wide
backdrop-blur-md backdrop-brightness-110 backdrop-contrast-125
ring-8 ring-yellow-300 ring-opacity-50
skew-x-6 md:skew-x-0 md:skew-y-6 hover:skew-x-0 hover:skew-y-0
animate-pulse md:animate-none
before:content-['🚀'] before:absolute before:-top-5 before:-left-5 before:text-4xl
after:content-['💥'] after:absolute after:-bottom-5 after:-right-5 after:text-4xl
dark:hover:text-yellow-300 dark:hover:rotate-180
Si tu parles de créer des classes customs à partir des classes Tailwind, c’est totalement déconseillé par la doc de Tailwind car de leur aveu même c’est juste faire du CSS normal mais moins maintenable et non standard. Un jour les gens réaliseront peut-être qu’utiliser Tailwind comme il est prévu est là aussi juste utiliser du CSS moins maintenable et non standard inline.