React Hebdo #107: Plasmo, Panapasi, Fastify-DX, Remix, TanStack, Redwood, Solid, useInsertionEffect, JSI, Vite, Angular, Safari...

Jun 07, 2022

Plasmo - Like Next.js for browser extensions!

Un nouveau framework dédié à la création de browser extensions, basé sur React et TypeScript. Open-source, core gratuit, qui propose un service cloud CI/CD payant. A étudier.

Panapasi - The Universal UI Library

On voit de plus en plus de libs UI qui veulent proposer un support cross-framework natif (cf Chakra, les libs TanStack...). Panapasi est à ma connaissance le premier projet de ce type basé Mitosis, qui compile un dialect JSX Lite vers les frameworks cibles.

Fastify DX for React

Nouveau framework fullstack en cours de développement, basé sur Fastify et Vite. Peut être adapté à plusieurs frameworks (React, Vue, Solid...). La version React se veut une alternative légère à Next.js et Remix, basée sur React-Router et Valtio.

Converting a React Component to SolidJS

La conversion d'un composant React de pagination vers Solid. Beaucoup de code JSX peut être repris tel quel, mais il faudra adapter un peu les hooks. Solid représente une réelle innovation: le code ressemble pas mal à React (sans dependency array 😏) mais le modèle d'execution est réactif.

Redux Toolkit’s new listener middleware vs. Redux-Saga

Belle comparaison côte à côte du nouveau système RTK Listener par rapport à Redux Saga. Compare l'implémentation de nombreux use-cases. RTK Listener semble être une bonne alternative légère à Redux-Saga, avec une courbe d'apprentissage relativement faible. Bonne resource pour faire un choix sur sa librairie d'effets Redux, ou prévoir une migration.

React 18 useEffect Double Call for APIs: Emergency Fix

Jack donne 6 solutions possibles pour éviter le problème de double requête avec le StrictMode de React 18. Utiliser une lib comme React-Query ou RTK-Query semble le plus simple.

Extras:

🇫🇷 React-Europe était initiallement à Paris: devient React-Eurasia et déménage à Dubai (polémique)
📖 Second draft of the useEffect guide: nouvelle doc en beta
📜 Remix-ing Routing in Angular: Remix est framework-agnostic. Brandon montre comment on peut l'utiliser avec Angular 14 qui vient juste de sortir.
📜 Setting up a dev environment with React, Vite, and Tailwind: met bien en avant les avantages de Vite par rapport à Webpack/CRA .
📜 Know about the useInsertionEffect hook in React 18: présentation d'un hook destiné aux auteurs de libs CSS-in-JS, qui permet d'insérer les styles au meilleur moment.
📜 Modulz has been acquired by WorkOS: donne des précisions sur la maintenance de leurs libs React populaires Radix et Stitches.
📜 The Case For Prisma In The Jamstack: explique l'interet de combiner Prisma avec divers frameworks comme Next.js ou Redwood.
🐦 React Server Components + SSG/ISR: il sera possible d'utiliser les server components avec un générateur de sites statiques: le rendu sera alors émis sous forme de fichiers statiques .rsc.
🐦 useRef<HTMLElement> + TypeScript contravariance: mon analyse du problème, 2 solutions proposées.
🐦 CSS @scope + React: nouvelle feature CSS qui pourrait encore améliorer l'encapsulation React
📦 TanStack: toutes les libs TanStack sont en train de devenir progressivement framework-agnostic! TanStack Query, TanStack Virtual, TanStack Table...
📦 Remix-Flat-Routes: package pour supporter une de convention de routing file-system plate pour Remix. Donne de bons arguments pour l'utiliser.
📦 Jest-Image-Snapshot: outil de visual regression testing. v5 avec Jest v28. A combiner à Storybook StoryShots pour un usage React.
📦 Recoil Relay 0.1.0
🎥 Redwood in 100 Seconds

💸 Jobs

💡 Comment sponsoriser React Hebdo

Nabla - Front-end engineer React senior - Paris - 55-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

iFeelSmart - Dev React Native - Paris/Remote - 50-65k€

iFeelSmart, est une nouvelle génération de UI TV. Nous sommes une entreprise à taille humaine avec des millions d’utilisateurs. Nous recherchons des devs React Native ayant une expérience significative et une envie de challenge technique! Voici le décor :

Une équipe Front en ReactNative + équipe Backends multi clients unifiés via un proxy en Go
Une API en JS et un Store Redux, avec du RxJS communs à tous nos devices mais aussi du Vanilla, du TypeScript, du Reanimated 2, et des tests Jest accompagnés de tests end-to-end via Appium
Nombreux challenges : focus via contrôle vocal et télécommande, performances à atteindre en ReactNative sur hardwares spécifiques, future intégration Apple TV...
Une équipe cool ET sérieuse à la fois, venez donc voir :) !

Paris 9 - Terrasse - Hybride Remote possible - 50 à 65K

React-Native

React Native JSI/TurboModules pitfalls

Oscar est l'auteur d'une playlist Youtube dédiée à JSI, et nous donne un retour d'expérience intéressant sur l'usage de divers languages pour la partie native, ou sur la difficulté à benchmarker JSI par rapport au bridge de l'ancienne architecture.

Extras:

🧵 React-Native @ Shopify: update du VP Engineering de Shopify sur l'usage de React-Native, et leurs nombreuses contributions à l'écosystème.
🐦 It's Flutter but in React Native... but in ReactJS…: React-Native-Skia fonctionne aussi sur le web grace à CanvaKit
🐦 Multiplying 2 numbers: React-Native bridge vs JSI benchmark
📦 react-native-lightbox

Divers

WebContainers are now supported in Firefox

L'innovation de StackBlitz qui permet de faire tourner du code Node.js directement dans le browser vient de franchir une nouvelle étape avec le support de Firefox (en plus de Chrome).

Extras:

Molly Struve 🦄 @molly_struve

No. Just no. https://t.co/BlngqRREgG

This Week In React

Discussion about this post