Salut à tous !
La newsletter est en retard: une nouvelle RFC React m'a donné beaucoup de lecture 😄 L'article de Kent C. Dodds est assez long également mais vaut le coup. On a 2 articles qui mettent en avant Sandpack en 2 semaines, ça vaut sans doute le coup de s'y intéresser!
Ca bouge bien coté React-Native core également, avec de nouvelles discussions ouvertes. On pourrait même penser qu'après la migration vers la nouvelle architecture et la stabilisation des APIs publiques, il pourrait y avoir une release 1.0?
Il y a aussi pas mal de nouveautés intéressantes dans l'écosystème frontend. Je suis particulièrement intéressé par Codeflow, Fontaine et Unplugin qui peuvent avoir un intérêt direct pour Docusaurus.
En parlant de Docusaurus, voir aussi:
- ma démo live pour les ateliers BlueHats (direction interministérielle du numérique)
- mon épisode dans le podcast Changelog JS Party (en Anglais).
💡 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
Les professionnels de tous les autres secteurs d'activité disposent d'outils spécialisés, mais les développeurs Web sont toujours obligés d'utiliser le navigateur que leur grand-mère utilise pour faire ses courses sur Amazon ?
Si vous ouvrez localhost:3000 dans un autre navigateur que Sizzy, vous perdez des heures de votre temps précieux.
Avant Sizzy: le développement web vous stresse, le responsive design est difficile, vous avez une quantité écrasante d'onglets et d'applications ouverts.
Après Sizzy: tous les outils dont vous avez besoin sont au même endroit, le responsive design est un jeu d'enfant, plus de changement de contexte.
Vous pouvez le télécharger ici et l'essayer gratuitement pendant 14 jours !
⚛️ React
React RFC: First class support for promises and async/await
L'équipe React a décidé de revenir sur un modèle async/await pour simplifier l'usage des Server Components. Problème: il est difficile de supporter async/await sur les Client Components. Ils proposent donc d'introduire une API use(promise) coté client. Contrairement aux autres hooks, on peut appeler use conditionnellement. Plus tard on pourra l'utiliser avec d'autres "usables" comme le context React (en vrai, on peut déjà utiliser useContext conditionnellement!). Utiliser des APIs différente peut aussi être vu comme une feature: cela permet de bien distinguer les Server Components des Client Components.
Cette RFC donne lieu a des débats intéressants. On se demande a quoi ressemblera l'intégration avec les librairies de data-fetching. L'usage de générateurs semble adapté au cas de figure, mais ils sont difficiles à utiliser en pratique. On est en attente d'une nouvelle RFC qui proposera une API de cache.
Kent C. Dodds propose une belle rétrospective des 3 grandes architectures web, très bien illustré et documenté. Il met en avant la dernière architecture, tendance du moment: Progressively Enhanced Single-Page-Application. Remix en est une implémentation, avec des abstractions bien pensées qui incitent a émuler le comportement natif du navigateur. Je ne suis pas d'accord sur la nécessité absolue d'un serveur. Docusaurus est aussi une implémentation PESPA qui fonctionne bien sans JavaScript.
A World-Class Code Playground with Sandpack
Josh Comeau vante les mérites de Sandpack, la boite a outils de CodeSandbox qu'il utilise pour créer des code playgrounds intéractifs. Cela à l'air simple d'utilisation et très fléxible!
- 📜 Streaming: is it worth it?: les auteurs de Qwik, Solid et Marko expliquent les avantages du streaming, et pourquoi il est difficile d'adopter cette technique. Dans un contexte React, il faut que les librairies utilisées (Helmet, CSS-in-JS, Redux...) soient compatibles pour que le streaming soit efficace.
- 📜 Storybook - First-class Vite support: la version 7.0 passe prochainement en beta: support Vite sans config, pre-bundling, plus besoin de Webpack, support de nouveaux comme Vue 2, Lit et Svelte...
- 📜 Moving From React to htmx: retour d'expérience (article + video) sur une migration réussie de React vers htmx. On est dans un contexte backend Python, leurs conclusions seraient sans doutes différentes dans un contexte JavaScript ou tous les devs sont full-stack.
- 📜 Prioritise content over components: des idées intéressante sur la modélisation des composants React selon différentes perspectives: designer, developer et créateur de contenu (CMS)
- 📜 A little semantic HTML trick for React components: explique comment respecter la sémantique du HTML en passant l'élément DOM a créer en props.
- 📜 Using Web Components With Next (or Any SSR Framework)
- 📜 Exploring how virtual DOM is implemented in React
- 📜 Lazy-load React components in Remix
- 🐦 React tip: isFocused should almost never be a prop
- 🚧 Streaming SSR in Preact prototype
- 🧑🎓 Create a 3D site with Game Controls in Spline and React (video)
- 🎨 Satori + React-Three-Fiber demo
- 🎨 Satori + SVG code syntax highlighting demo
- 🎙️ Docusaurus 2 is a pretty big deal
- 🎥 In Defense of useEffect
- 🎥 Making React Context Fast!
- 📦 Planby - React.js based component for schedules and timelines
- 📦 Gatsby v5 beta
- 📦 Astro 1.5
- 📦 SWR 2.0 RC
Ne manque pas le prochain email !
💸 Sponsor
Premier Octet - Agence de développement React
Premier Octet est une agence de développement d'applications web et mobile. Depuis 2008, nous accompagnons de nombreux clients grâce à notre expertise en React et React Native.
Plus concrètement, nous intervenons en développement, conseil, audit ou formation, sur des thématiques JavaScript serveur et front. Nos projets embarquent des technologies open source telles que :
- Next.js
- Nest.js
- ChakraUI
- NativeBase
- Strapi
N'hésitez pas à aller voir notre site premieroctet.com pour plus d'informations !
📱 React-Native
2022: How can we improve React Native?
L'équipe React-Native aimerait avoir avis retour sur ce qu'il faut améliorer dans React-Native. Quelques points mentionnés: le support CSS (Yoga, gap, grid, shadows...), le support cross-platform, les montées de version, le debugging, le clavier, les symlinks Metro...
- 💬 Restructuring React Native's Public API
- 📜 Setting up React Native Monorepo with Yarn Workspaces
- 📜 How to Use Module Federation with Re.Pack 3
- 🚧 Expo Router 0.0.27 + Layout API change RFC
- 🚧 React-Native Bottom Sheet v5 will have web support
- 🚧 React-Native Flex gap support coming?
- 📖 Expo docs improvements: "Running E2E tests on EAS Build now works on Android"
- 📦 Metro 0.73.0
- 📦 React-Native 0.70.3
- 🎥 Flip card Animation in React-Native Re-Animated 2
- 🎙️ React-Native-Radio 248 - Introducing Ignite v8: Maverick!
🧑💻Jobs
🧑💼 Matters - Senior Software Engineer (React/Node)
Envie de challenges et de contribuer à des réussites entrepreneuriales ? Rejoins notre startup studio pour construire des produits variés et complexes dans une culture devOps, une stack JS, des code reviews, tests et déploiements automatisés. Paris, remote flexible, 50K€-65K€.
🧑💼 Masteos - Lead ReactJS - Hybride ou Remote - 75-90k€
Masteos réinvente l’expérience de l’investissement locatif, en proposant un parcours entièrement dématérialisé et un accompagnement de haut niveau aux particuliers qui souhaitent acheter un bien pour le louer.
🧑💼 Linxea - Lead Dev React.js - 60-75k€
Plateforme leader de l’épargne en ligne. Stack tech : ReactJS, Redux, Saga, Formik, Storybook, Webpack, Typescript. Skills : architecture, développement, pratiques craft (clean architecture, clean code ,TDD), mentoring et formation des équipes. Paris 75008 - 2j de TT/sem.
💡 Comment publier une offre d'emploi ?
🇫🇷 En français
- 📜 Partager son code entre des projets React et React Native sur un monorepo
- 🎥 Apprendre React.js en 1 heure | Comprendre l'essentiel en 2022
💡Tu peux m'envoyer ton contenu: sebastien@thisweekinreact.com !
🔀 Autre
La technologie StackBlitz WebContainers permet de faire tourner Node.js dans le navigateur via WebAssembly. On peut executer VS Code, Next.js ou Docusaurus directement dans votre navigateur, et non pas via un conteur Docker distant. Codeflow vient rajouter toute la couche d'intégration avec GitHub qui permet d'ouvrir facilement une pull-request ou de lancer l'execution du code d'une pull-request en local pour une revue de code.
Ils ont aussi lancé Web Publisher, une vue d'édition simplifiée pour éditer des fichiers Markdown (éditeur, preview, bouton save). Très pratique pour contribuer à de la documentation sur Git, même pour les utilisateurs moins techniques. Il y a une véritable preview du contenu, et non pas l'expérience dégradée de la preview GitHub. C'est un besoin important pour les utilisateurs Docusaurus.
Fontaine - Automatic font fallback based on font metrics
Propose d'éviter les layout shifts liés au chargement d'une font custom. Fait en sorte que la font de fallback ait la même dimension que la font finale, pour que la transition soit douce et n'impacte pas la taille des conteneurs texte. Super idée!
- Node.js 19
- Node 18.11: apporte le mode --watch et quelques autres améliorations intéressantes
- Unplugin - Unified plugin system for Vite, Rollup, Webpack, and more: pour créer des plugins qui fonctionnent sur tous les bundlers!
- CSS - Help pick a syntax for nesting - Survey results
- Status update of my tsc port + Speedy TypeScript type checker public repo
- TypeRunner - High-performance TypeScript compiler
- Lerna reborn — What’s new in v6?
- What’s new in Nx 15?
- JetBrains Fleet - Public Preview
- Import maps soon available in all browsers
- Bun's, ViteConf talk
- rRPC-chrome - tRPC adapter for Web Extensions
- What is pnpm? Is it really so fast and space-efficient?
- Intl Explorer - A tool for experimenting and trying out the ECMAScript Internationalization API
- Why We Use Babylon.js Instead Of Three.js in 2022
- How Vite Came to Be - ViteConf 2022 slides
- Rollup v3
- Jest 29.2
- Obsidian 1.0
🤭 Fun
