📨 #128: SWR, Vite, Codux, Storybook, Next.js, Forget, Nylon, Paper, align-deps, INP, Zod, Tauri...
Salut à tous !
Cette semaine, je vous propose de découvrir Le Courrier Du Hacker, la newsletter de Carl Chenet (voir la dernière édition). Vous y trouverez du contenu 100% en français 🇫🇷 sur des sujets variés autour du logiciel libre et de l'Open Source.
On rentre dans la période des fêtes, et les bloggers React réduisent la cadence. De mon coté, je vais sauter 2 éditions.
On a tout de même quelques releases et articles sympa à découvrir. J'ai beaucoup aimé celui sur les font layout shifts.
💡 Consulter cette newsletter sur Twitter - format visuel 🎨
Pour me soutenir:
- 😘 Recommande la newsletter! Ça m'aide vraiment beaucoup!
- 💸 Sponsorise la newsletter ou sponsorise-moi
- 🧵 Retweet le dernier thread Twitter
- 📨 Réponds à cet email
- 💬 Rejoins le chat Discord
Ne manque pas le prochain email !
💸 Sponsor
React Bricks est un CMS visuel basé sur des composants React.
Flexible pour les développeurs: créez votre propre design system en utilisant des composants React, ajoutez l'édition visuelle dans votre JSX et ajoutez des contrôles dans la barre latérale pour modifier les props comme la couleur de fond. Choisissez Next.js, Gatsby ou Remix et le framework CSS de votre choix !
Facile pour les éditeurs: qui peuvent éditer directement de manière visuelle sans casser le design system: beaucoup plus facile que d'éditer des entités abstraites en utilisant des champs gris, comme dans un CMS headless classique. Vous gagnez du temps: les éditeurs de contenu sont autonomes !
Prêt pour l'entreprise avec la collaboration, le versioning, l'authentification unique, la conformité réglementation GDPR, le CDN global pour des images optimisées, l'intégration e-commerce électronique, la publication programmée et bien plus encore.
Commencez ici: ReactBricks.com
⚛️ React
Nouvelle version majeure pour la librairie de data-fetching de chez Vercel. On y retrouve diverses améliorations, dont:
- Nouveau hook
useSWRMutation - Optimistic UI simplifié
- Des extensions SWR DevTools
- Une API impérative de preloading
- Support React 18 amélioré
Vite est un outil frontend qui continue de gagner en popularité. Cette dernière version utilise maintenant Rollup 3, qui simplifie grandement la gestion des assets internes de Vite. Il y a maintenant 2 plugins React avec des tradeoffs différents:
- vite-plugin-react: esbuild + Babel
- vite-plugin-react-swc: remplace Babel par SWC en dev, ce qui semble améliorer le cold start et le HMR
Codux - Visual IDE for React projects
Nadav est co-founder de Wix et nous présente son nouveau projet, un IDE visuel pour React (et bientôt d'autres frameworks). Il ne s'agit pas de replacer votre IDE actuel, mais plutôt de le compléter. Codux permet de travailler sur un composant en isolation, incluant l'édition de props et styles via une interface visuelle. La video Meet Codux devrait aider à mieux comprendre. Cela fait un peu penser à Storybook, mais avec l'édition en plus, et une synchronisation bidirectionnelle avec votre code.
- 📖 Beta docs: team page updated + useTransition demo + useSyncExternalStore API ref
- 📖 New Supabase Docs, built with Next.js: la doc de Supabase migre de Docusaurus vers Next.js, suite aux besoins grandissants de faire du sur mesure. Ils donnent tout de même un retour d'expérience très positif sur Docusaurus.
- 📖 React Router website repository public
- 📖 React-Spring - New doc site
- 📜 Integrate Next.js and Storybook automatically: présente le fonctionnement du support automatique de Next.js via la nouvelle Framework API qui arrive dans Storybook 7 (maintenant en beta). Storybook est capable de mieux comprendre votre projet Next.js. Plus besoin d'ajouter des décorateurs pour le support de la navigation ou des composants Link et Image. Le support va continuer de s'améliorer dans le temps: Server Components, next/font...
- 📜 Optimizing Web Fonts in Next.js 13: probablement l'article le mieux illustré sur les font layout shifts. Explique à la fin comment Next.js optimise tout ça pour nous.
- 📜 Migrating a large, open-source React application to Next.js and Vercel: Vercel fait un POC de migration du site open-source de la BBC, pour s'amuser 😄 Ils mettent en avant les avantages obtenus rien qu'en étant sur une stack Next.js.
- 📜 Avoid These Common Pitfalls Of React useState: 6 anti-patterns communs présentés avec des solutions + des exercices interactifs
- 📜 The Evolution of urql
- 📜 Publishing Docusaurus to dev.to with the dev.to API
- 📜 An Introduction To RedwoodJS
- 📜 Using Path Matching in React Router
- 📜 Testing API Calls in useEffect using React Testing Library and Jest
- 💬 Improve React Query hydration, Streaming SSR & Server Components
- 🐦 Xuan Huang - "Forget is in good hands as we now have a team behind it": Xuan mentionne aussi son départ de Meta
- 🎨 React-Three-Editor demo - Threejs Journey scene
- 🐦 "I fixed vanilla-extract/sprinkles using a vite plugin": nouveau plugin Vite qui pourrait réduire significativement le CSS émis par Vanilla-Extract / Sprinkles
- 🐦 Ryan Florence - "Next.js isn't really OSS"
- 📦 React-Nylon + Four: bientôt une alternative plus légère à Three.js et React-Three-Fiber?
- 📦 Remix 1.8: le "React-Router-ing" progresse bien
- 📦 Chakra UI Figma Kit
- 🎥 Modern Component Library with React & Storybook
- 🎥 MaterialUI + Qwikify demo
Ne manque pas le prochain email !
💸 Sponsor
Vous voulez avoir un impact sur l'écosystème des développeurs ?
D'après le dernier rapport State of the Developer Nation, React est de loin la lib client la plus populaire puisqu'elle est utilisée par 58 % des développeurs web qui utilisent des frameworks web. Qu'en pensez-vous ?
Participez à l'enquête la plus complète jamais créée par Developer Nation, façonnez les principales tendances chez les développeurs pour 2023 et gagnez des cadeaux incroyables ! 🎁
Une fois le questionnaire complété, vous obtiendrez un accès gratuit à notre sac à surprises virtuel. N'oubliez pas de vous inscrire pour participer aux tirages au sort hebdomadaires. Parmi les 250 prix, vous trouverez un ThinkPad L15 Gen 3, un mini PC Intel NUC 10 Performance, des kits IoT, un iPad Air, des cartes-cadeaux, des cours Udemy, des accessoires tech, et bien d'autres encore.
📱 React-Native
- 📜 React Native Paper 5.0 – What’s New?: support de Material Design 3 "Material You", mais conserve aussi la possibilité de rester sur Material Design 2. Il y a de nouveaux composants, et la possibilité d'intégrer facilement la lib avec React-Navigation.
- 📜 Microsoft - Announcing the evolution of dep-check: align-deps: nouvelle version de l'outil dep-check de Microsoft qui permet d'assurer que son monorepo utilise les bonnes versions de package. Renommé à cause d'un conflit avec depcheck. L'outil peut maintenant être plus facilement utilisé sur un projet autre que React-Native.
- 📜 Introducing: Maestro Studio: pour créer des tests end-2-end black box via une interface
- 🔗 Microsoft - React-Native Devblog: nouveau blog dédié à React-Native sur le site de Microsoft.
- 🎨 @expo-image demo: Software Mansion travaille sur une alternative à react-native-fast-image
- 🎨 React-Native-Skia-Gesture demo: detection de gestures pour les éléments d'un canvas Skia
- 📦 android-performance-profiler: nouvelle API disponible
- 📦 expo-router@next - Shared Routes + Layout Clones (experimental)
- 🎙️ RNR 253 - We React to News: Kotlin's got a new daddy
- 🎥 File-based navigation for Expo and React Native
- 📖 Expo docs updates
- 🐦 "Apple is preparing to allow alternative app stores and side-loading on iOS" + "And allow non-Safari browser engines": cela semble important pour React-Native même si pour l'instant cela semble limité à l'Europe.
🧑💻 Jobs
🧑💼 Premier Octet - Développeurs(euses) React - Paris
Nous cherchons des développeurs(euses) JavaScript passionnés. Vous interviendrez en développement sur des projets variés et motivants, à la fois serveur et front (React, Nest, Next), et éventuellement mobile (React Native).
💡 Comment publier une offre d'emploi ?
🇫🇷 En français
- 🧵 Neolectron - Thread sur le plugin Vite pour Vanilla Extract
- 🎥 Guillermo Rauch - Ce génie a révolutionné le web
- 📜 Faire une bonne UI en fermant les yeux
💡Tu peux m'envoyer ton contenu: sebastien@thisweekinreact.com !
🔀 Autre
- Optimize Interaction to Next Paint: les devs Google nous expliquent comment améliorer les performances sur les interactions de nos apps (la nouvelle métrique INP). Cela semble particulièrement intéressant pour nos SPAs React.
- 2022 In Review: What’s New In Web Performance?: une belle vue d'ensemble des nouveautés webperf de 2022. Les prévisions 2023 indiquent des travaux pour mieux mesurer les performances des SPA, au lieu de se contenter des métriques du chargement initial de la page. Je découvre le repo soft-navigations
- Ecma International welcomes new members: dont Shopify et Vercel
- Zod 3.20: content de voir la coercion arriver, très pratique pour convertir certains params query-string (exemple: ?pageSize=10) en nombres automatiquement.
- Vitest 0.27.7: support Vite 4
- Tauri Mobile Alpha Release: si je comprends bien c'est de la WebView, nouveau concurrent à Cordova/Capacitor? 🤔
- New npm features for secure publishing and safe consumption: enfin un code explorer sur le site npm!
- WebKit Features in Safari 16.2
- Bun 0.3.0
- Alma - a digital playground for generative graphics
- TypeScript: Should you use Types or Interfaces?
🤭 Fun
Ne manque pas le prochain email !
