2024 JavaScript Rising Stars

Grand gagnant: shadcn/ui récidive 🏆

Comme en 2023, shadcn/ui est le projet le plus en vogue de l'année. Il a trouvé un équilibre parfait entre des fondations robustes (fournies par des librairies de composants headless comme radix) et les possibilités de personnalisation.

L'idée de laisser les développeurs posséder le code de leurs composants, plutôt que de fournir des composants à import, a vraiment changé la donne.

De nombreuses fonctionnalités ont été ajoutées en 2024 :

• Charts alimentés par la librairie Recharts
• Themes pour générer des ensembles de variables CSS personnalisables dans votre code
• Blocks: une collection de layouts pour répondre aux besoins des applications web typiques
• De nouveaux composants comme une barre latérale responsive et extensible

Le nouveau CLI est beaucoup plus puissant et flexible :

• shadcn add peut maintenant installer des composants, thèmes, hooks, utils, dépendances, etc.
• Il prend en charge plusieurs frameworks : Next.js, Remix, Vite, Laravel, etc.
• Il peut mettre à jour votre configuration Tailwind au lieu de l'écraser
• Prise en charge pour les monorepos

Encore plus impressionnant : le CLI shadcn peut importer des composants depuis n'importe quel "registre" (pas seulement shadcn/ui), créant un écosystème de librairies de composants compatibles, comme on le voit dans les projets suivants inclus dans le classement Librairies de composants :

• Motion-Primitives
• Magic UI

Une autre raison de son succès est l'intégration étroite avec le service v0 qui peut générer des composants construits sur shadcn/ui.

C'est aussi une excellente ressource d'apprentissage pour montrer comment créer des composants composables faciles à étendre, car les composants sont directement dans votre dossier source.

Numéro 2: Excalidraw

Excalidraw est un outil en ligne open-source conçu pour créer des dessins numériques et des visualisations avec un style de dessin fait à la main distinctif qui en fait l'outil parfait pour brainstormer des idées ou expliquer des concepts et des flux de travail.

Les fonctionnalités IA, incluent : Texte vers Diagramme, Mermaid vers Excalidraw, et Wireframe vers Code.

Numéro 3: AFFiNE

AFFiNE est une base de connaissances open-source et un outil de gestion de projet qui combine les capacités d'outils comme Notion (avec des documents faits de blocs) et Miro (canevas infini pour le dessin).

Étant offline-first, c'est un excellent outil pour construire sa Base de Connaissances Personnelle.

Mentions spéciales

Si vous voulez voir ce dont un navigateur est capable, regardez :

• PGlite : une base de données Postgres utilisant WebAssembly
• WebVM : une machine virtuelle fonctionnant dans le navigateur

En deuxième position en 2023, htmx a atteint le sommet de la catégorie des frameworks frontend en 2024.

Il peut être considéré comme une extension du langage HTML (d'où son nom) et est souvent vu comme une librairie plutôt qu'un framework. Cependant, la frontière est floue. Consultez cet article expliquant pourquoi htmx est un autre framework.

C'est un excellent choix si vous devez améliorer un site statique avec de l'interactivité ou si l'état de votre application est "piloté par le serveur". En utilisant uniquement une combinaison d'attributs HTML hx-*, vous pouvez implémenter des fonctionnalités comme la récupération de données sans écrire une seule ligne de JavaScript.

Vous voulez le voir en action ? Ce site "Rising Stars" est construit avec Astro, et htmx alimente des fonctionnalités comme le chargement différé des catégories supplémentaires lorsque vous défilez vers le bas.

À la 2ème place, React continue de se réinventer, ce qui fait partie de son succès. Il a fallu plus de trois ans pour sortir la version 19, mais elle a finalement été lancée en Décembre après des allers-retours liés au Drama Suspense. Consultez le pense-bête React 19 pour plus de détails.

Parmi les nouvelles fonctionnalités, le prise en charge des web components ("Custom Elements") est une excellente nouvelle. En parlant de web components, Ryan Carnato, le créateur de Solid (numéro 8) a expliqué pourquoi les Web Components Ne Sont Pas Le Futur, créant une certaine controverse. Une réponse intéressante est venue de Lea Vera dans cet article concluant que nous devrions utiliser "les outils que nous trouvons les plus productifs".

À la 3ème place, Svelte a également eu une version majeure avec la version 5. Le changement le plus marquant est l'introduction des "runes", un mécanisme explicite pour déclarer l'état réactif. Il est à noter que Svelte a l'opinion la plus positive dans les résultats du State of JS.

En 2024, React est paradoxalement devenu à la fois plus catégorique et moins catégorique.

D'un côté, React est devenu plus catégorique avec l'introduction des Composants Serveur et des Fonctions Serveur, orientant les développeurs vers des architectures qui opèrent à travers le réseau. D'un autre côté, il est devenu moins catégorique car ces nouvelles primitives sont adoptées et abstraites par plusieurs frameworks, chacun adoptant sa propre approche.

React n'est plus seulement une librairie. Il évolue vers une spécification pour les frameworks, représentant un changement significatif dans l'écosystème vers une mentalité "framework-first". Cependant, il permet toujours aux développeurs de se désengager de cette approche et de rester plus proche du client s'ils le préfèrent.

Durant toute cette transformation, React reste engagé dans l'amélioration de son cœur. Le développement en cours du React Compiler se concentre sur l'amélioration des performances et de l'expérience développeur. Avec la sortie de React 19, la prise en charge des Custom Elements a été introduit, ainsi que de nouveaux hooks et actions de formulaire qui redéfinissent la façon dont les formulaires sont gérés dans React.

Je suis maintenant enthousiasmé par les possibilités offertes par React 19. React est en train de devenir un framework full-stack, et il est fascinant de voir comment cela va façonner l'avenir du développement web avec tous les acteurs de l'écosystème React.

Cette année a été bonne année pour l'écosystème Vue. Vue lui-même a connu un cycle de releases plus actif de la part de l'équipe core, avec de nouvelles versions mineures apportant régulièrement des améliorations de performances. Par exemple, le système de réactivité a été retravaillé dans la v3.5, avec un autre changement utilisant la nouvelle approche, plus légère, alien-signals, déjà intégrée dans la branche principale. .

L'un des signes les plus marquants de la confiance en l'écosystème se voit dans ses librairies UI. Elles sont florissantes. Bien sûr, Tailwind CSS y contribue en partie. Son approche basée sur des conventions pour écrire du CSS et sa compatibilité multi-frameworks signifie que des librairies UI comme shadcn-vue ou Radix Vue (bientôt Reka UI ) pourraient être directement portées depuis leurs équivalents React. De même, les librairies natives Vue comme Element Plus et Naive UI continuent de prospérer, avec des bases d'utilisateurs dédiées et une croissance constante.

Cependant, le meilleur résultat parmi toutes les librairies UI vient de PrimeVue , qui peut s'intégrer à Tailwind CSS mais ne l'exige pas. PrimeVue s'est hissé à la deuxième place avec un nombre impressionnant de 5,4k étoiles. Ils ont connu un développement soutenu cette année, et ont des ambitions dans les écosystèmes React et Angular également - une bonne nouvelle pour l'écosystème Primefaces dans son ensemble.

Nous voyons également un certain nombre de frameworks comme Nuxt, Slidev, VitePress et Vue Element Admin qui se portent très bien.

Slidev offre une expérience interactive incroyable pour développer des présentations, avec des améliorations significatives déployées cette année, notamment les améliorations de Twoslash et la prise en charge de Magic Move.

VitePress continue d'être un cas d'école en matière de génération de sites statiques construits avec Vue, offrant des performances solides et une excellente expérience développeur. Il reste la référence pour les sites de documentation dans l'écosystème Vue et au-delà, mais peut être utilisé beaucoup plus largement.

Nuxt arrive en tête de liste. En tant que meta-framework le plus utilisé dans l'univers Vue, une grande partie du travail de cette année a consisté à consolider les changements effectués dans Nuxt 3, et à préparer une transition en douceur vers la prochaine version majeure Nuxt v4. Mais nous avons aussi vu la sortie de nouveaux modules core comme Nuxt Fonts (polices web optimisées sans configuration) et Nuxt Scripts (chargement performant de scripts tiers), et le développement de nuxt-auth-utils, qui est développé comme solution d'authentification core pour Nuxt.

Pour toutes les librairies figurant sur la liste, l'expérience des développeurs reste une priorité absolue et l'année prochaine promet des choses très intéressantes pour les développeurs Vue, comme le mode Vapor (enfin), Suspense stabilisé dans Vue 3.6, une prochaine version majeure de Nuxt - et bien plus encore.

À la première place, Payload est un CMS open-source polyvalent qui s'installe directement dans n'importe quelle application Next.js. L'intégration étroite avec le Next.js App Router facilite la mise en place d'un panneau d'administration directement dans une application existante, sans avoir à créer une nouvelle application pour les utilisateurs administrateurs.

Initialement conçu pour MongoDB, il prend désormais en charge Postgres et SQLite grâce à l'intégration de Drizzle ORM en arrière-plan. Il fournit son propre ORM utilisé pour configurer la structure des données et les règles de contrôle d'accès à un niveau supérieur, et inclut des fonctionnalités puissantes comme le téléchargement en masse de fichiers médias. Consultez l'annonce de Payload 3 pour plus de détails.

En deuxième position, Next.js reste le framework full-stack le plus populaire. La version 15 prend en charge React 19 et apporte des améliorations de performance, exploitant la nouvelle API Cache, ainsi qu'une expérience développeur (DX) améliorée grâce à l'adoption complète de Turbopack comme outil de build.

Le nouveau venu dans la catégorie est le serveur web Hono, prenant la troisième place. Il peut être vu comme un remplaçant moderne de Express (classé 13ème malgré ses 15 ans !) et est capable de fonctionner dans plusieurs environnements d'exécution JavaScript : Node.js, bien sûr, mais aussi Deno, Bun, et les environnements serverless comme Lambda ou Cloudflare Workers. Il se distingue par son empreinte incroyablement réduite. Lisez l'histoire de son créateur.

En quatrième position, Astro est devenu une solution polyvalente pour construire des applications riches en contenu. La version 5 a introduit l'API Content Layer, permettant la récupération de données type-safe depuis n'importe quelle source—que ce soit depuis le système de fichiers ou des API externes.

J'ai utilisé Astro pour construire ce site, et je suis impressionné par la DX (le CLI qui vous appelle astronaute est tellement mignon !) et les performances web exceptionnelles qu'il offre.

2024 est une nouvelle excellente année pour les outils JS, avec des travaux en cours pour innover et améliorer les performances. De nombreux projets ont mûri et gagné en popularité, tandis que d'autres projets très excitants sont encore en développement.

Vite a encore été le grand gagnant cette année, remportant pour la deuxième fois les State of JS awards en tant que technologie la plus adoptée et appréciée. Il est rare d'avoir à la fois une forte utilisation et rétention, et encore plus de la maintenir. Nous attendons avec impatience de voir comment la nouvelle entreprise void(0) impactera l'écosystème Vite l'année prochaine !

Il convient de souligner que les outils les plus performants se rendent faciles à adopter :

• Rspack est une alternative presque directe à webpack qui commence à gagner du terrain, adopté avec succès par Docusaurus et Nuxt. Il devrait exploser en 2025, étant donné sa facilité d'adoption et le nombre de projets webpack existants qui pourraient compiler plus rapidement.
• Bun est une chaîne d'outils JS tout-en-un, également conçue pour faciliter l'adoption grâce à sa compatibilité avec Node.js, npm, ou Jest. Il a poursuivi son travail de compatibilité en 2024, notamment en intégrant la prise en charge de Windows et un fichier de verrouillage basé sur du texte.
• Rolldown est un bundler rapide avec une API compatible Rollup et une parité de fonctionnalités avec esbuild. Il est encore en développement actif mais progresse rapidement et a récemment publié la première beta v1.0. C'est l'un des projets les plus attendus, destiné à alimenter Vite en 2025.
• Turbopack est un bundler incrémental qui se concentre initialement sur les détails d'implémentation de Next.js, que vous pouvez activer avec un simple flag CLI --turbo. Turbopack Dev est considéré comme stable, et Turbopack Prod est en cours de développement actif. Une version autonome de Turbopack est prévue dans le futur.
• Biome, une alternative plus rapide à Prettier (avec une compatibilité de plus de 97%) et à ESLint, a été largement and positivement adopté par la communauté.

Côté TypeScript, il est également important de mentionner :

• TypeScript 5.5 a intégré les Déclarations Isolées, permettant d'améliorer la parallélisation des builds.
• Node.js prend désormais en charge TypeScript par défaut et peut exécuter directement les fichiers .ts. Cela arrivera dans la très prochaine version v23.6 et devrait être rétro-porté dans la v22. Bun et Deno le prenaient déjà en charge.

En 2024, React Native continue de dominer l'espace des applications mobiles, maintenant son statut de framework le plus populaire pour construire des applications multi-plateformes. Expo, pour la deuxième année consécutive, reste le projet le mieux classé, avec une croissance substantielle depuis 2023.

L'une des plus grandes tendances de cette année est l'accent mis sur le support web/universel dans React Native. Expo Router a fait des progrès substantiels pour combler le fossé web-natif, en introduisant les composants Expo DOM ('use dom') pour permettre une migration incrémentale entre React web et React universel. On peut également observer cela dans le changement de direction de Meta, s'éloignant de React Native for Web au profit de React Strict DOM et Stylex, plus orientés web, qu'ils utilisent en interne. De plus, la majorité des projets les plus tendance se concentrent sur l'unification web/natif.

Le styling reste un point clé dans l'écosystème. Cela s'observe particulièrement avec Yoga v3 (moteur de styling de React Native) qui a apporté plusieurs améliorations aux styles natifs de React Native, principalement motivé par le travail de Meta sur des applications propriétaires comme Instagram et Facebook pour Quest (construites avec React Android). Pendant ce temps, les solutions communautaires continuent de prospérer, avec plusieurs approches et opinions apportant généralement le meilleur du web vers le natif.

Pour l'avenir, je m'attends à ce que l'IA joue un rôle encore plus important dans les outils de développement natif et les expériences applicatives. L'aperçu précoce des React Server Components universels d'Expo Router inspirera probablement l'émergence de nouvelles librairies de serveur composables. De plus, les interfaces utilisateur natives vont probablement évoluer encore davantage, avec plus de liaisons vers SwiftUI et Jetpack Compose, élargissant globalement le "cercle du succès".

Je prédis également que la communauté native grandira encore avec l'introduction des composants Expo DOM et l'amélioration continue des outils de déploiement d'applications en une seule commande comme (EAS Build),rendant cet espace beaucoup plus familier et excitant pour tous les développeurs.

2025 sera sans aucun doute une année passionnante !

Zustand continue son ascension fulgurante en tant que librairie de gestion d'état pour React, ainsi que React Native et au-delà. Zustand est la librairie de gestion d'état "épurée" et il est clair que les gens en sont friand.

Si nous examinons les résultats par style de gestion d'état, des tendances intéressantes émergent. Zustand, Pinia et Redux, et Boardgame sont unidirectionnels : on définit l'état et les actions qui le modifient. Avec Jotai, Nano stores, et Legend-State on définit l'état sous forme d'atomes et on crée des atomes calculés qui dépendent d'autres atomes. Valtio est une librairie de gestion d'état bidirectionnelle. Et X-State est une librairie de machine à états.

Une conclusion que nous pouvons tirer de ces résultats est que la gestion d'état formelle de type Redux (mais pas la librairie Redux elle-même) continue d'être le style de gestion d'état le plus populaire. Le modèle atomique fait également de grands progrès (Recoil, la librairie atomique originale, est juste en dehors de ce top 10).

XState ne doit cependant pas être négligé. Lorsqu'il s'agit d'applications complexes, les machines à états sont un excellent choix car elles modélisent votre application en une série stricte d'états et de transitions entre états. Si vous ne l'avez pas encore essayé, l'éditeur interactif et le simulateur pour X-State sont à voir absolument.

Boardgame and TinyBase sont des ajouts très intéressants dans le top 10. Boardgame est spécifiquement conçu pour créer des jeux. Et Tinybase est orienté vers le stockage local des données et leur synchronisation avec les services backend. Ces deux librairies sont hautement spécialisées, ce qui pourrait indiquer une tendance. Des problèmes tels que la synchronisation des premières données locales avec les services backend est un problème complexe, donc avoir des librairies (comme Tinybase et Legend State) qui se concentrent spécifiquement sur cela est une bonne chose.

Une chose que je ne vois pas dans cette liste, ce sont les signaux. Je ne sais pas si c'est parce que les gens attendent que la proposition TC39 soit finalisée et largement adoptée, ou parce que c'est intégré dans des frameworks comme Solid, Svelte, et Qwik. Les signaux n'ont peut-être pas atteint le top 10, mais ils restent une excellente façon de modéliser l'état efficacement.

Les prochaines années s'annoncent passionnantes dans le domaine de la gestion d'état pour React, Vue, JavaScript et au-delà.