React Hebdo #103: Contentlayer, Remotion 3, Stale Closure, Cross-platform, Jest 28, Hydration, Netlify Edge Functions...
React Hebdo #103: Contentlayer, Remotion 3, Stale Closure, Cross-platform, Jest 28, Hydration, Netlify Edge Functions...
React
Contentlayer: Content Made Easy for Developers (beta)
Contentlayer est un nouveau système qui propose de gérer la glue entre votre contenu (Markdown, CMS, Notion...) et votre code. Vous définissez un schema, et il va valider votre contenu puis le compiler et générer de manière efficace un dossier .contentlayer avec des types TypesScript, et le contenu pret à être directement importé dans votre app. Cela semble améliorer significativement les performances du build. La beta dispose d'une intégration Next.js et permet de réduire la quantité de code d'intégration. Je vous conseille la video d'intro (5min). Nouveau projet de Johannes Schickling, créateur de Prisma, qui fait déjà la glue entre code et DB.
Remotion 3.0
Remotion permet de créer des vidéos programmatiquement, avec du code React (web) et des data/props. Après 10 mois de dev, la v3.0 vient de sortir (trailer) avec en principale nouveauté le support du rendering serverless sur AWS Lambda, ce qui permet de scaler, réduire les coûts, et produire la vidéo beaucoup plus rapidement!
Hooks, Dependencies and Stale Closures
Article intéressant (et intéractif) pour bien comprendre le problème de stale closure en React. Si vous utilisez la memoisation et ne respectez pas la règle ESLint exhaustive-deps, vous risquez d'introduire ce type de problème dans votre codebase, et ça n'est pas toujours simple à debugger.
The challenges of rendering an OpenLayers map in a popup through React
Un retour d'expérience intéressant sur le rendu d'une app React dans plusieurs fenêtres via des portals. Il y a des avantages (un seul state pour piloter toutes les fenêtres) mais aussi quelques problématiques à résoudre.
Extras:
📜 File-based routing with React Location — Nested layouts: le créateur de Generouted continue sa série et explique comment implémenter sois-même les nested routes de Remix, en se basant sur Vite et React-Location.
📜 React Component Composition Explained: la composition peut aider à résoudre le props drilling et améliorer les performances.
📜 Upgrading to React 18 with TypeScript: résumé des breaking changes TypeScript après l'upgrade React 18, et comment automatiser la migration via codemod.
📜 Flexible Design System Components With "as/is" Props: technique utile pour utiliser un composant avec des tags HTML différents en fonction du contexte:
<span>,<h1>...📜 Introduction to React v18 Suspense and Render-as-You-Fetch approach: utilise quelques nouveautés de React 18 pour éviter les waterfalls.
🧵 Sebastian Markbåge: "Hydration in React was originally not built for SSR": il y a eu pas mal de discussions intéressantes sur l'hydratation cette semaine, probablement en reaction à cet article de Misko Hevery (créateur de Qwik/Angular)
🧵 Alex Russell on CSS-in-JS: critique des libs avec un runtime
📦 Create-React-App Redux Template v2: update React 18
📦 Jest-Preview: nouvelle solution qui s'intègre avec React-Testing-Library pour voir visuellement vos tests s'executer et les debugger plus facilement.
📦 Rive-React: binding React pour la plateforme d'animation Rive
💸 Sponsors
App.js Conf 2022 - 8-10 Juin à Cracovie
Après deux longues années, App.js Conf revient avec une conf en personne ! Rencontrez les créateurs de React Native & Expo, apprenez des meilleurs, ou amusez-vous simplement avec d'autres développeurs du monde entier ! Notre line-up est pleine de professionnels du développement mobile prêts à partager leurs connaissances. Découvrez nos incroyables speakers ici !
En plus de la conférence de deux jours, nous avons également préparé des ateliers pratiques d'une journée! Il reste encore quelques places pour deux de nos ateliers :
Modern intro to app development with React and Expo par Lydia Hallie et Evan Bacon;
Setting up a professional development process with Expo and EAS par la team Expo team!
Réservez les billets pour un atelier avec une réduction exclusive de 20 % pour les abonnés ! Utilisez le code ThisWeekinReact20 ou suivez ce lien pour réserver votre place.
PS: moi j'y vais cette année 😉
React-Native
Migrating React And Native Apps To React Native
Les ingénieurs de Callstack expliquent comment adopter React-Native pour une app existante, avec 2 approaches différentes: greenfield (ré-écriture complete) et brownfield (migration incrémentale). Discute aussi comment porter une application web vers React-Native.
Writing cross-platform components for web and React Native
Artem donne quelques idées pour le développement cross-platform web/mobile. Il propose d'utiliser des composants primitifs, et de prendre une approche web-first: développer dans le browser et tester avec Cypress, puis vérifier que l'app mobile fonctionne.
Extras:
🎙️ React-Native-Radio 232 - Flutter is better than React Native...in all the ways that don’t matter
🎙️ The React Native Show Podcast: Coffee Talk #1 - React v18.0 & React Native 0.68
👥 React-Native EU: le Call-For-Papier ouvert jusqu'a fin Mai
💸 Jobs
💡 Sponsorise React Hebdo pour publier une offre d'emploi
Maki : Développeur Frontend / Fullstack Senior - 65k / 80k
La mission de Maki est de permettre à chaque entreprise de recruter des talents sur mesure. Maki propose des tests d'évaluation standardisés avant l'embauche pour identifier les meilleurs candidats et accélérer les décisions des entreprises, sans préjugés.
Si comme nous vous aimez résoudre des problèmes complexes de façon simple, à l'aide d'outils modernes (ping TypeScript, React-Query, MUI, Playwright, …), afin de proposer des expériences fluides et efficaces, le tout dans une ambiance décontractée (si si), alors venez discuter avec nous :)
Paris 9ème - full remote possible - 65k / 80k en fonction de l’expérience + BSPCE
Nabla: Front-end engineer React senior - Paris - 55k-90k
Nabla construit une plateforme de médecine asynchrone (chat sans rendez-vous + appel vidéo si besoin), en automatisant un maximum de tâches répétitives pour que les médecins se concentrent sur le soin et que le service reste accessible à tous.
Ils ont levé 17M€, remporté un award Google Play Best Apps of 2021 et viennent de lancer la première offre payante dédiée à la santé des femmes.
Les fans de hooks React et de Typescript se sentiront à la maison, ainsi que les amateurs de GraphQL, Tailwind, Vite ou Next.js. Pas mal de technos sympa à découvrir (WebRTC et codegen notamment)
Paris 3ème, remote possible, 55k-90k en fonction de l'expérience, + BSPCE.
Divers
Jest 28: Shedding weight and improving compatibility
Pas mal de nouveautés et changements. Mes highlights:
Support du sharding pour paralléliser les tests
Support complet des package
"exports"GitHub Actions Reporter
Support ESM toujours bloqué
jest-runner-tsd: pour tester les types TypeScript
jest-light-runner: 2x plus rapide sur la codebase Babel
Building a JavaScript Bundler
Christoph Nakazawa comment créer un bundler JavaScript simple, en se basant sur des packages Jest. Lecture des fichiers JavaScript, création du graphe de dépendances, runtime, assemblage final... Une lecture technique mais qui démystifie bien le fonctionnement interne d'un bundler simple.
Netlify Edge Functions (beta)
Après une tentative ratée (Edge Handlers), Netlify sort une nouvelle offre serverless @ Edge avec ses Edge Functions en beta, en se reposant sur l'infrastructure Deno Deploy. Cela permet notamment de faire tourner de manière plus optimale les meta-frameworks React avec serveur: Remix, Next.js (uniquement middleware pour l'instant), Hydrogen...
Hydration is Pure Overhead
Le créateur de Qwik/Angular continue de questioner le modèle d'hydratation de nos applications avec Server-Side-Rendering, et pousse à adopter un autre modèle plus performant, basé sur la "resumabilité".
Extras:
