Actualités de mars 2024
Interface Utilisateur (UI)
Sortie de Storybook en version 8
La version 8 de Storybook propose de nombreuses nouveautés : React Server Components, construction de tests plus rapide, support de Vite & Vitest, optimisations de l’UI & meilleure réactivité. https://storybook.js.org/blog/storybook-8 🔗
Tailwind annonce la nouvelle version V4 en alpha
Des améliorations de performances (jusqu’à 10 fois plus rapides) en réécrivant une partie du framework en Rust, une réduction de plus de 35 % de la taille du package en abandonnant PostCSS pour un parseur personnalisé réduisant de moitié le temps d’analyse nécessaire. https://tailwindcss.com/blog/tailwindcss-v4-alpha 🔗
Why I Pick ShadCN and Tailwind for all my projects
Un petit tour d’horizon des différentes façons de faire du CSS dans un projet React et des opinions sur chacune d’entre elles. https://www.youtube.com/watch?v=98v05b-u2OE 🔗
Layout in react ecosystem
Description des mises en page et comparaison de leur utilisation sous react-router, Next.js & Astro. https://www.ericburel.tech/blog/what-layout-means-in-react 🔗
Frameworks
New JS Framework Just Dropped (Next.js Killer??)
Pourquoi installer tanstack query, tanstack router, tanstack form, tanstack table, tanstack graph.. quand on peut directement installer le framework tanstack ? À peine sorti et déjà le framework à suivre en 2024. https://www.youtube.com/watch?v=LMTJPKD0lQw 🔗
Angular’s Third Era is…weird
Angular vient d’annoncer lors de la conférence NG que le framework fusionne avec Wiz (framework interne de Google). De nombreux efforts sont également concentrés sur l’IA (chatbot dans la documentation, CLI capable de générer des composants complets..). https://www.youtube.com/watch?v=3CBlwpC1gW4 🔗
Introduction du “pages router” sur Waku
Et un de plus.. Le méta-framework Waku utilise maintenant lui aussi un routeur basé sur une architecture de fichiers. Existe-t-il encore un routeur récent pour lequel ce n’est pas le cas.. ? https://waku.gg/blog/introducing-pages-router 🔗
The problem with Nextjs de Dave Gray
Comprendre le SSR sous Next.js, comment le cache fonctionne et comment le désactiver pour rendre une page dynamique. https://www.youtube.com/watch?v=XHSiMSEE2S8 🔗
How Next.js breaks React Fundamentals
Critique de certains choix faits par Next.js qui dégradent l’expérience de développement sur le framework. En dehors des exemples cités, il est important de noter que Next.js est basé sur des principes encore expérimentaux. https://ondrejvelisek.github.io/how-nextjs-breaks-react-fundamentals 🔗
Why React Server Components Are Breaking Builds to Win Tomorrow
Pourquoi en sommes-nous arrivés aux composants serveur React (RSC) dans React 19 ? On commence par un rappel des notions de SSG / SSR / CSR / SPA pour expliquer la nécessité de faire des RSC. https://www.builder.io/blog/why-react-server-components 🔗
You might not need useEffect() …
Quand et comment utiliser (ou non) le hook React useEffect. Inspiré par le guide React “Vous pourriez ne pas avoir besoin d’un effet” https://www.youtube.com/watch?v=V1f8MOQiHRw 🔗 https://react.dev/learn/you-might-not-need-an-effect 🔗
Utilizing useOptimistic() across the component tree in Next.js
Explication des mises à jour optimistes et du nouveau hook useOptimistic dans Next.js pour mettre à jour nos données dès la soumission d’un formulaire. https://aurorascharff.no/posts/utilizing-useoptimistic-across-the-component-tree-in-nextjs 🔗
Exploring useSyncExternalStore, a lesser-known React Hook
Vous avez toujours souhaité comprendre comment fonctionnent les librairies de gestion d’états ? Voici un tutoriel sur useSyncExternalStore, le hook qui permet des stores externes. https://blog.logrocket.com/exploring-usesyncexternalstore-react-hook 🔗
Progressively Enhance Handling Your Forms With React.js Server Actions
(re)Découvrez comment gérer vos formulaires sans JavaScript côté client. Les années 90 sont de retour ! https://techhub.iodigital.com/articles/progressively-enhance-handling-your-forms-with-react-js-server-actions 🔗
STOP using useState, instead put state in URL (in React & Next.js)
Pourquoi et comment utiliser vos URL comme gestionnaire d’état. https://www.youtube.com/watch?v=ukpgxEemXsk 🔗
Astro
Why I’ll choose Astro (almost) every time in 2024
https://www.youtube.com/watch?v=kssIEqSJeMI 🔗
I Stopped Using Express.js: Because Bun and Hono
https://www.youtube.com/watch?v=uxMADW3CmN4 🔗
### Release of astroDB
Astro nous présente une nouvelle solution d’hébergement de base de données, basée sur SQLite & Turso. Installation et utilisation ultra simple sous Astro avec un niveau gratuit limité à 1 Go de données, 1 milliard d’opérations en lecture et 1 million en écriture. https://astro.build/db/ 🔗 https://maciekpalmowski.dev/blog/astro-studio-first-impression 🔗
Tests
How to test React custom hooks and components with Vitest
Parce que nous n’avons pas encore parlé de tests aujourd’hui, voici un tutoriel sur la configuration et l’utilisation de Vitest pour tester des hooks personnalisés. https://www.thisdot.co/blog/how-to-test-react-custom-hooks-and-components-with-vitest 🔗
Best Practices for Writing Tests with React Testing Library
Une mine d’or pour comprendre et optimiser nos tests de composants. À lire. https://claritydev.net/blog/improving-react-testing-library-tests 🔗
Divers
Gleam 1.0 is out
Coder en JavaScript sans utiliser JavaScript ? Un nouvel outil pour les détracteurs qui permet de compiler ce nouveau langage en JS. La syntaxe semble assez séduisante et la documentation est super bien faite. https://gleam.run/ 🔗 https://www.youtube.com/watch?v=_I-CSgoCgsk 🔗
WinterJS just dropped and it’s faster than Bun?
Bun est-il déjà obsolète avant même que nous ayons eu le temps de le tester ? Sortie d’un nouveau runtime JavaScript encore plus rapide que Bun axé sur l’interopérabilité. https://www.youtube.com/watch?v=_GEu0JV72Rg 🔗