- Nue remet en question les valeurs par défaut lourdes du développement web moderne, en affirmant qu’il permet de créer une application complète avec seulement HTML, CSS et JavaScript, plus petite qu’un bouton React/ShadCN
- Une démo ajoute à la même application un moteur de calcul en Rust et l’Event Sourcing, afin d’effectuer instantanément des recherches et des opérations sur 150 000 enregistrements
- Le moteur JavaScript s’est arrêté sur une exception de dépassement de pile d’appels maximale, tandis que la version Rust/WASM est présentée comme un exemple de traitement instantané de données à la même échelle
- Au lieu des idiomes React, Nue cherche à simplifier la structure des applications en mettant en avant une approche centrée sur le modèle, des fonctions testables, le typage statique et un minimum de dépendances
- Pour les ingénieurs design et UX, Nue met l’accent sur un contrôle direct via le CSS moderne, plutôt que sur des design systems de plus de 40 000 lignes, des hooks React et des classes utilitaires
Démo d’une app plus légère qu’un bouton React
- La démo Nue montre à quel point une application peut devenir légère lorsque HTML, CSS et JavaScript sont utilisés au plus près des standards du web
- Elle met en avant le fait que l’application complète est plus petite qu’un seul bouton React/ShadCN
- La version à grande échelle ajoute à la même application un moteur de calcul en Rust et l’Event Sourcing
- Elle vise une configuration permettant la recherche instantanée et d’autres opérations sur 150 000 enregistrements
- Le moteur de la version JavaScript s’interrompt sur une exception de dépassement de pile d’appels maximale
- La démo Rust/WASM permet de constater des opérations instantanées sur 150 000 enregistrements
La méthode de développement visée par Nue
- Pour les ingénieurs Rust, Go et JavaScript, Nue met l’accent sur l’utilisation de patterns logiciels traditionnels et d’une couche de modèle séparée plutôt que sur les idiomes React
- Nue place au centre une approche centrée sur le modèle
- Il vise des fonctions simples et testables, le typage statique et peu de dépendances
- Pour les ingénieurs design, Nue considère qu’il est possible de créer des systèmes plus simples avec le CSS moderne, plutôt qu’avec des patterns React et des design systems de plus de 40 000 lignes
- Il cite comme exemples
@layers, les variables CSS etcalc() - Il met l’accent sur le contrôle direct de la typographie et des espacements
- Il cite comme exemples
- Pour les ingénieurs UX, Nue propose un flux qui réduit la barrière des hooks React et des classes utilitaires, afin de travailler directement sur l’expérience utilisateur
- Nue est un framework web centré sur les standards du web et fait actuellement l’objet d’un développement actif
- Nue voit dans la situation où un simple bouton est plus lourd qu’une application entière un exemple de complexité cachée du développement web moderne, et cherche à recréer outils et frameworks autour d’une architecture plus propre et plus robuste
2 commentaires
Nue - Framework web standard-first plus léger que les boutons React
Avis sur Hacker News
À voir les réactions qui s’énervent de diverses manières contre Nue, on dirait des gens tellement dépendants de React qu’ils passent à côté d’un problème plus vaste
Le problème, c’est que les énormes frameworks ont transformé le Web en un amas terriblement lent
En tant que DevOps/SRE, je m’occupe de ce genre de services tous les jours, et il est presque impossible d’en trouver un dont le premier chargement prend moins de 10 secondes
Si, même sur une connexion 10G avec un peering à moins de 5 ms de l’hôte, un simple tableau de bord d’accueil ou une page de notes prend plus de 10 secondes, et que 95 % de ce temps est dû à JavaScript, cela signifie que les webapps actuelles ont atteint un niveau de bloat massif qui s’appuie sur des moteurs de navigateur rapides et des attentes revues à la baisse
Je ne m’attends pas à ce que Nue révolutionne tout cela, mais au moins je peux l’encourager
Concrètement, un projet React de base créé avec
pnpm create vite -t react-tspèse environ 60 Ko compressé, et un projet Vue créé avecpnpm create vite -t vue-tsenviron 25 KoMême des projets de taille moyenne faits avec React/Vue tournaient autour de 200 à 300 Ko compressés, hors images, et restaient utilisables même avec une limitation réelle en 2G
Une daube de simple tableau de bord qui prend plus de 10 secondes peut être créée avec n’importe quel framework, et même sans framework
Au contraire, si l’on importe en bloc des dépendances tierces façon jQuery, on peut faire pire, en téléchargeant 200 Ko pour 1 Ko réellement utilisé
La comparaison de l’article est aussi stupide : la vue complète de React n’a pas une structure où elle devient bien plus grosse qu’un « seul bouton React », mais plutôt une structure de coût initial + coût marginal
La majeure partie du bloat du Web vient du fait que les développeurs ne prennent pas le temps d’optimiser, de faire du lazy loading, de mettre en cache et de réduire les dépendances, ainsi que des centaines de scripts de suivi que tous les sites ajoutent pour maximiser leurs revenus
Il y a quelques années, j’avais été choqué de voir un site avec 50 trackers ; aujourd’hui, même plusieurs centaines ne me surprennent plus
Si les développeurs y prêtent attention, un site React peut être très rapide, et le bloat ajouté par React n’est généralement pas le cœur du problème
Le billet de l’OP décrit le bouton comme faisant 78 Ko, mais c’est parce qu’il charge tout React pour un seul bouton
Avoir des centaines de boutons sur une page ne signifie pas qu’on télécharge 78 Ko des centaines de fois, donc un site React complexe n’est pas aussi inefficace que cela
En tant qu’ingénieur DevOps, je serais curieux de savoir s’il existe des statistiques sur la part de cette lenteur qui revient respectivement au framework et au vrai code applicatif
Au travail, nous avons un tableau de bord SPA Vue 3 avec plus de 20 widgets qui envoient chacun leurs propres requêtes et transfèrent plus de 2 Mo de JavaScript compressé, et même en désactivant tous les caches, tout se charge en moins de 2 secondes
Je parle du chargement complet, pas seulement du moment où c’est « interactif »
Je suis d’accord que le Web pourrait être plus léger, mais « il est presque impossible de trouver un premier chargement sous les 10 secondes » me paraît exagéré, et ce n’est peut-être pas lié à la présence ou non d’un framework
Pour référence, cette webapp n’a pas été construite par une équipe d’élite absolue
On ne demande l’aide d’un SRE que quand quelque chose ne va pas, donc il n’est pas surprenant de ne pas voir ce qui fonctionne correctement
Ceux qui ont travaillé sur des projets lents savent qu’au final, c’est la responsabilité du management, et le fait qu’une base de code devienne si grosse que plus personne n’a l’impression de pouvoir la corriger relève aussi du management
On peut se dire que si l’on vous avait appelé plus tôt, vous auriez conçu quelque chose de meilleur, mais cela aussi relève au final du management
Si tout le monde abandonnait les gros frameworks et que le logiciel devenait parfait et stable, il vaut aussi la peine de se demander ce que feraient exactement les SRE
En regardant la technologie autrement, je pense qu’il y a une grande opportunité devant les compétences que vous avez déjà
Le JavaScript pur fonctionne déjà plutôt bien, et parfois c’est encore mieux sans JavaScript du tout
Dans un projet SAP récent, il y avait une couche Java devant SAP, et au-dessus une énorme application Angular ; l’objectif de l’application était de gérer des ventes B2B de biens physiques, et comme la disponibilité du stock était très importante, presque tous les écrans envoyaient une requête complète à la couche SAP
On ne voyait pas clairement pourquoi un « client riche » aussi lourd était nécessaire, et PHP aurait très probablement été bien plus adapté
En retirant le marketing, il semble que les grandes organisations utilisent les frameworks comme moyen d’obtenir des pratiques de codage homogènes et de faciliter le remplacement des développeurs, mais il existe sûrement de meilleures façons d’atteindre cet objectif
Ce qui prétend remplacer React, c’est ceci : https://nuejs.org/docs/view.html
C’est une couche de vue non typée dans une direction proche des débuts d’Angular 2.0, et les fichiers de modèle sont simplement du JavaScript
Autrement dit, il n’y a de types nulle part ; si cela vise plutôt Vue.js, ça peut se tenir
Mais aujourd’hui, la plupart des utilisateurs de React utilisent TypeScript, et la prise en charge des types en tant que citoyens de première classe dans la couche de vue est très utile, donc il vaudrait peut-être mieux réorienter un peu le marketing de ce côté-là
C’est un choix de conception intentionnel
L’écosystème React pousse les développeurs à mettre TypeScript jusque dans le CSS, et c’est excessif
Nue prend l’approche inverse : garder la couche de présentation propre et sémantique, laisser les standards du Web faire une grande partie du travail, et laisser les types statiques comme ceux de Rust ou Go briller là où ils comptent vraiment, dans la logique métier
En prenant une autre direction, le besoin diminue
Vue lui-même est écrit en TS, et la plupart des grandes bibliothèques le sont aussi
À en juger par /r/vuejs et par mon expérience personnelle, c’est aussi le cas de la majorité des nouvelles applications
C’est excellent, mais j’ai investi dans Svelte et SvelteKit
Après avoir construit non pas un exemple jouet, mais une appli assez grosse avec des dizaines de formulaires et d’écrans, je suis revenu à React, et j’ai compris que React n’est pas si difficile une fois qu’on comprend les hooks, qu’il est aussi assez léger pour mon usage, et que c’est maintenant une technologie ennuyeuse, ce qui est plutôt un avantage
L’écosystème est aussi immense, et le fait qu’il soit difficile de remplacer des bibliothèques comme React Query en est un exemple
Je pense donc continuer à utiliser React pendant les prochaines années, surtout parce que le compilateur React est déjà utilisé en interne chez Facebook et Instagram et qu’il est sorti en bêta publique
React Native prend aussi en charge le compilateur React, et je pense que cette prise en charge va plutôt s’améliorer que disparaître
Avec l’arrivée du compilateur React, il ne restera probablement pas beaucoup de place pour les runes de Svelte ni pour son caractère compilé
Depuis les runes, Svelte donne l’impression de ne plus écrire du JavaScript, mais une notation qui ressemble à du JavaScript, ce qui ne me plaît pas ; et après le compilateur React, on aura beaucoup moins besoin de l’enfer des hooks dans les situations complexes
J’ai utilisé React pendant 10 ans et Svelte ces 3 dernières années ; Svelte est clairement un framework d’une génération plus récente et me convient bien mieux que React
Cela dit, je suis d’accord qu’il y a des aspérités autour de l’écosystème
Les performances sont aussi bien meilleures, même si ce n’est pas forcément important pour beaucoup d’usages
L’inconvénient, c’est que Svelte est en pratique un langage : pour qu’il fonctionne correctement, il faut un compilateur et des outils de développement dédiés
Maintenir et faire évoluer tout cela demande beaucoup d’efforts
J’aime Svelte et je l’ai utilisé presque tous les jours pendant des années, mais l’équipe a besoin de davantage de ressources pour réaliser sa vision et la maintenir sur le long terme
Il est étonnant qu’une grande entreprise comme Apple adopte Svelte dans des produits comme Apple Music sans y investir
https://gist.github.com/Rich-Harris/0f910048478c2a6505d1c321...
Je me demande si quelqu’un sait pourquoi ils sont partis dans cette direction
Nue est un framework web en cours de création pour éliminer la lourdeur du développement web moderne
Si un simple bouton Vite/ShadCN/Tailwind est 40 % plus lourd qu’une SPA complète, il est temps de faire autrement
Il est reconstruit depuis la base, donne la priorité aux standards du web et cherche à supprimer la lourdeur
Il s’adresse aux architectes frontend, design engineers et personnes côté UX qui veulent un flux de travail plus simple et plus raisonnable
C’est encore en cours, mais le changement arrive
C’est un paradigme complexe et inefficace, qui ne devrait être utilisé que pour des applications très interactives comme Photoshop ou Ableton Live pour le web, et ce type d’appli devrait rester très rare
Je ne suis pas développeur frontend, mais si le problème est « recherche et actions instantanées sur 150 000 enregistrements », il me semble logique de repenser le paradigme
En regardant la démo, il semble y avoir environ 100 Ko de code WASM non pris en compte dans la comparaison avec le bouton React
Cela dit, félicitations pour le projet, et je suis vraiment curieux de voir comment la vision globale va se concrétiser
Inclure le framework augmente le poids, mais ces frameworks ne sont pas pensés pour un composant isolé
Il faut comparer à conditions égales pour que la comparaison soit juste
Dans ce cas, je me demande comment Nue se compare à htmx ou à d’autres frameworks qui exploitent les standards web modernes
C’est un peu comme dire qu’une UI basée sur Visual Studio est plus légère
J’aurais aimé avoir des détails techniques plutôt que ce texte marketing
Par exemple, je me demande quelle approche est utilisée pour le suivi des changements : des proxys à la Vue, ou un recalcul complet à la React
Je ne comprends pas non plus la phrase selon laquelle JavaScript « dépasse la pile » avec 150 000 objets
J’ai créé moi-même une liste de 150 000 objets : dans le profileur, le tableau et les objets occupent environ 14 Mo, et même en faisant un
list.find()sans index, je n’obtiens pas de stack overflowAvec un index, ce serait probablement très rapide et il n’y aurait pas besoin de WASM ni de dispositif complexe
JavaScript n’est pas si lent
Si l’on fait du calcul numérique comme des multiplications de nombres dans un grand tableau, le code est compilé et s’exécute assez vite
list.push(...objects), et cela semble être la causeQuand on passe d’un coup un très grand nombre d’arguments avec l’opérateur spread, par exemple autour de 100 000, à une méthode, il est connu qu’en JavaScript chaque argument est placé sur la pile d’appel, ce qui provoque un stack overflow
La plupart des nouveaux frameworks commencent comme une alternative légère aux options plus mûres de leur époque
À lui seul, ce n’est pas une raison de l’adopter
Revenez dans 10 ans, après avoir ajouté toute la lourdeur demandée par les utilisateurs et géré tous les cas particuliers que vous ne comprenez pas encore
S’il est encore plus léger qu’un simple bouton React, alors ce sera digne d’intérêt
Si l’on ne peut pas se comparer aux acteurs existants, je ne vois pas comment attirer les utilisateurs nécessaires pour devenir suffisamment lourd
Selon la manière de compter, il est développé depuis environ 6 à 9 ans et reste pourtant très mince
J’ai commencé à utiliser Svelte pour distribuer sous forme de web components des widgets avec peu d’exigences, et pour cet usage c’était excellent
Questions que je me suis posées en regardant le projet
Je ne vois pas vraiment en quoi la démo https://mpa.nuejs.org/app/ est impressionnante, et je pense qu’on peut créer une web app aux mêmes performances avec React
Sur la page d’accueil, j’avais envie de voir rapidement des exemples de code, mais j’ai dû fouiller dans la documentation ; en voyant https://nuejs.org/docs/view.html#clean-html-templating, je me demande si l’inspiration vient de Svelte
J’aimerais aussi savoir en quoi Nue est plus rapide et plus léger que d’autres technologies, en particulier que du HTML/JavaScript pur
Pour me convaincre que Nue est un framework intéressant, il faudrait qu’il soit plus simple que HTML+JS, ou au moins plus simple que React, que le balisage et la logique restent proches de choses déjà connues comme le HTML afin d’être faciles à comprendre, et que l’expérience développeur soit bonne grâce à de bons temps de build et au HMR
Sur ce point, ça semble réussi
Il faudrait aussi montrer des avantages techniques et des métriques : faible overhead, basé sur WASM ou non, DOM virtuel, server islands, etc.
esbuild l’a bien fait : https://esbuild.github.io/
Si l’auteur du projet veut dire que le bouton React pèse 73 Ko parce qu’il ne fonctionne pas sans la bibliothèque React, c’est une critique assez faible
À ce stade, dans le bundle de l’application, la bibliothèque React est aussi réutilisée ailleurs
Cela induit les gens en erreur, et la promesse est tellement superficielle que ça en devient presque insultant
Pour clarifier, un seul bouton installé via la documentation officielle ShadCN/Vite (https://ui.shadcn.com/docs/installation/vite) finit par être bien plus lourd qu’une SPA Nue complète
Le but n’est pas de s’en prendre aux développeurs React, mais de montrer comment les standards du Web peuvent renverser la logique de la surcharge
Je me demande s’il y a une meilleure façon de présenter cette comparaison
J’aime beaucoup l’approche, mais la démo https://mpa.nuejs.org/app/ ne fonctionne pas correctement sur iOS Safari
Cela dit, c’est peut-être parce que ma version 16.7.8 est ancienne
Le défilement ne fonctionne pas, la mise en page et les boutons ont des retours à la ligne bizarres, et le bouton de recherche natif est incrusté dans le bouton au design personnalisé, ce qui donne deux icônes
C’était une correction rapide
Il implémente beaucoup moins de fonctionnalités que le composant auquel il se compare, puis montre à quel point sa solution est petite
Dans Firefox, la boîte de commentaires se retrouve cachée sous la barre de menu
Il force probablement la hauteur de la page en pourcentage ou avec
vh, ce qu’il vaut généralement mieux éviterSi c’est nécessaire, il faut utiliser
svhoudvhJe me demande s’il y a des exemples de code
J’ai cherché un peu sans en trouver, et je pense que dans un article de blog sur un nouveau framework, des exemples de code devraient apparaître tout au début
nue create simple-blogmontre un site web centré sur le contenunue create simple-mpacorrespond à la démo SPA d’aujourd’hui, où MPA signifie application multipageIl montre comment le routage côté client et les transitions de vue relient de façon fluide des pages riches en contenu et des vues de type application
Le code source est ici : https://github.com/nuejs/nue/tree/master/packages/examples