React

Click To Component

Nouvelle lib très pratique, qui permet d'ouvrir facilement le fichier source d'un composant React, avec un simple Option + Click sur l'interface. Supporte CRA, Next.js, Vite... Ne fonctionne qu'avec VS Code, mais d'autres IDEs semblent prévus, comme Intellij.

Zag

Zag est une collection de composants primitifs basés sur des state machines. Cela permet de découpler la logique du framework, et de proposer un binding pour React, Vue, Solid... Cette nouvelle solution va permettre à la lib React Chakra UI d'être adaptée plus facilement à d'autres frameworks, tout en partageant un maximum de code.

Why I don't miss React: a story about using the platform

Jack travaille chez Google sur les Chrome DevTools depuis 2 ans. Depuis, il n'utilise plus React, et partage son retour d'expérience sur sa transition vers des APIs web standardisées qui ne nécessitent pas de dépendances: formulaires, custom elements...

Moving from Next to Remix

Kristofer a migré son site personnel de Next.js vers Remix, pour s'amuser. Il donne son retour d'expérience, et partage l'impact sur le score Lighthouse. Il liste les principaux changements qu'il a du effectuer: intégration Chakra, composant Link, routing, data fetching, metadonnées...

How HashiCorp developers iterate faster with ISR

Retour d'expérience sur l'usage de Incremental Static Regeneration de Next.js pour réduire les temps de build des sites de documentation chez HashiCorp. Le nouveau mode "on-demand ISR" permet d'invalider le cache Next.js et donc de donner un feedback immédiat lors de la publication d'une update.

Extras:

• 💡 Next.js Router Upgrade: Next.js va supporter les nested routes, et un design qui permet d'utiliser les features React 18 et les Server Components

• 🧑‍🎨 L'outil de design 3D Spline peut maintenant exporter vers React-Three-Fiber: cela peut permettre rendre votre scene interactive

• 🔗 Component Party: site qui propose de comparer facilement la syntax de React avec d'autres frameworks (Vue, Svelte, Solid...) sur différents use-cases.

• 🏢 Convex: nouvelle database serverless temps-réel avec un binding React. Ils viennent de lever $27m et s'intègrent avec Netlify ou Vercel.

• 🎥 The Story of Concurrent React: 10 minutes sur l'histoire de Concurrent React, de 2016 à aujourd'hui.

• 📦 Ultra 1.0: le meta-framework React pour Deno vient d'annoncer sa v1

• 📦 React 18.1: principalement des bugfixes

• 📦 useTilg: un hook React pour faciliter le debug de vos composants

• 📦 zustand v4.0.0-rc.1

• 📦 Gatsby 4.13

• 🐦 Using useReducer to manage one-way boolean state

• 📜 Building a Terminal Wordle Game with React Ink

• 📜 Managing React Monorepos with Nx

💸 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

Expo SDK 45 beta is now available

Le nouveau SDK Expo passe en beta pour une semaine. Quelques nouveautés sympas:

• React-Native 0.68.1: Expo passe sur la dernière version, mais sans activer le renderer Fabric pour l'instant

• redesign de Expo Go, avec une meilleur intégration de EAS Update et la possibilité de voir et ouvrir les branches

• plusieurs libs migrées vers JSI et/ou Expo Sweet Module API

• nouveau CLI expo (beta), qui sera versionné et installé localement plutot que globalement

• les libs wrapper Expo sont dépréciées: on peut utiliser les libs natives originales via des config plugins

React Native Skia - For Us, For You, and For Fun

Skia est le moteur 2D de Google, et vous l'utilisez très certainement: Chrome, Flutter, Android... Shopify supporte le développement de React-Native-Skia pour fournir les primitives graphiques/2D manquantes à React-Native, et ne pas être limité lors de l'implémentation d'un design complexe. La lib propose une API déclarative expressive, mais aussi une API bas-niveau impérative compatible avec Flutter, ce qui pourrait aider au support web via React-Native-Web et CanvasKit.

Extras:

• 📦 React-Native 0.69-rc.0: première version basée sur React 18, avec possibilité d'utiliser les features concurrent.

• 📦 React-Native-Graph: nouvelle librairie de graph avec animations, basée sur React-Native-Skia

• 🎥 Charts with React-Native-Skia: dernière video de William Candillon

• 🐦 React-Native-WishList preview: Marc Rousavy travaille sur une nouvelle lib de liste virtualisée performante en React-Native, qui devrait combler les lacunes de FlatList

• 🎥 RN.live: chaine live de Jamon Holmgren sur React-Native

• 🎙️ RNR 233 - React 18 and the Future of React Native

• 📜 Using RevenueCat with Expo's Managed Workflow: montre bien la facilité avec laquelle on peut intégrer une lib native dans Expo

• 📜 Twitter going all in on Jetpack Compose: ça me fascine toujours autant de savoir que Twitter utilise React-Native sur le web, mais pas React-Native sur mobile 😄

• 📜 Apple Gets Ready to Eliminate Almost 30% of Apps in the App Store: votre vieille app pourrait être dépubliée 😅

• 📜 What is the performance of your users device?

• 📜 A performant way to use PouchDB@7 on React Native in 2022

💸 Jobs

💡 Sponsorise React Hebdo pour publier une offre d'emploi

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.

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

Divers

TypeScript Error Translator

Nouvel outil en ligne qui propose de traduire vos erreurs TypeScript en langage humain, facile à comprendre, avec des explications en plus (source)

Keeping TypeScript Type Guards safe and up to date

Evoque un problème auquel je n'ai jamais 😅: si vous avez un type-guard qui se base sur un attribut d'objet, et que vous rajoutez un 2nd attribut, votre type-guard n'est plus bon mais TypeScript compile toujours.

Extras:

• Web Scraping via Javascript Runtime Heap Snapshots: technique de scraping originale, qui consiste à extraire les objets JS directement en mémoire

• Node 16.15: support experimental fetch backporté

• Lerna is now an officially dead project. Le projet n'était pas maintenu depuis un moment. Il y a des alternatives comme Nx et Turborepo

• Nx 14 vient de sortir

• Zaplib post-mortem: retour d'expérience qui démontre une fois de plus que Rust et Wasm n'est pas toujours plus rapide que JavaScript

• WebAssembly vs Javascript: "don't use WebAssembly primarily for performance"

• Detecting UI components with TypeScript Compiler API

• Misusing TypeScript Assertion Functions for Fun and Profit

• SemVer for TS in Practice

• Narrowing Types in TypeScript

• Progressively Enhanced Builds

• google/wireit: upgrades your npm scripts to make them smarter and more efficient

• Four Eras of JavaScript Frameworks

• New to the web platform in April

• Figma plugin for Storybook

• State of Frontend 2022