React Hebdo #103: Contentlayer, Remotion 3, Stale Closure, Cross-platform, Jest 28, Hydration, Netlify Edge Functions...

Bonjour à tous!

De belles sorties cette semaine: Contentlayer, Remotion 3, Jest 28, Netlify Edge Functions…

Les articles React sont assez diversifiés, dont 2 qui traitent du cross-platform, sujet qui m'intéresse toujours autant.

Je viens d'enregistrer un podcast sur React pour IFTTD, je vous dirai quand il sort, d'ici quelques semaines 😉

🙏 Pour soutenir la newsletter: 

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 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!

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.

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.

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 :

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 😉

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.

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.

💡 Sponsorise React Hebdo pour publier une offre d'emploi

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 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.

Pas mal de nouveautés et changements. Mes highlights:

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.

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…

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é”.