React Hebdo #106: Remix, Framer Motion, Storybook, Gatsby, Remotion, Metro, Lerna, TypeScript, Three.js, LocatorJS, Tailwind...

May 31, 2022

React Router v6.4.0-pre.2

Déjà annoncé via Remixing React Router: de nombreuses abstractions de Remix (action, loader...) vont être ajoutées à React-Router. Cela arrive dans la v6.4, actuellement en pre-release. La doc pour les Data APIs est déjà disponible.

Should you use Framer Motion or Motion One?

Matt est l'auteur de nombreuses libraries d'animations populaires. Il explique de manière nuancée la différence entre un modèle déclaratif et impératif. La majorité des devs React devraient plutôt utiliser la librairie déclarative Framer Motion. Motion One est une librairie impérative légère et bas niveau qui veut être le "JQuery pour Web Animations API".

Extras:

📜 Making Videos with Code is Cool, but is it Productive?: retour d'expérience Remotion + Screenflow.
📜 We rebuilt Cloudflare's developer documentation - here's what we learned: de Gatsby/MDX à Hugo
📜 Working With Three.js: The Popular 3D JavaScript Library + Working With 3D Model in Three.js: un tutoriel sympa pour découvrir Three.js via React-Three-Fiber.
📜 How FedEx Influenced the React Logo
📜 High-Performance Personalization with Next.js Middleware
📜 React start losing its way
📜 React project structure for scale: decomposition, layers and hierarchy
📦 Storybook 6.5: interaction testing, Webpack 5 lazy compilation, Vite builder, React 18, MDX 2, Figma plugin...
📦 LocatorJS: extensions pour ouvrir rapidement un composant React dans voter IDE.
📦 Remix-Three: package d'intégration avec React-Three-Fiber
📦 TanStack Table v8 beta: React-Table est renommé car framework-agnostic: adapters compatible React, Solid, Svelte, Vue...
📦 Microsoft FluentUI React v9 RC: le design-system de Microsoft, utilisé sur Office.
📦 Gatsby 4.5: Script component + GraphQL Type Generation
📦 Jotai 1.7
🎥 Reactathon Conf 2022 playlist
🎥 Remix Conf 2022
🧑‍🎓 Up and Running with Remix: cours gratuit de Kent C. Dodds sur Egghead
🐦 Remix feedback: Jamie Kyle, Sarah Dayan
🐦 Remix VueJS Support?
🐦 Dan Abramov optimise la nouvelle doc React en réponse à Evan You: quelques leçons intéressantes, en particulier l'usage de Suspense pour rendre l'hydratation React non-bloquante.
🐦 Reco: éviter les solutions CSS-in-JS avec runtime

💸 Sponsors

💡 Comment sponsoriser React Hebdo

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

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

React-Native

React and React Native finally feel the same

Jay explique les 3 principaux challenges du cross-platform web/mobile aujourd'hui: styling, animation, navigation. Il propose de combiner Tailwind-React-Native à sa nouvelle librairie d'animation cross-platform. Legend Motion repose sur la même API que Framer Motion (web-only). La doc explique brièvement les différences avec Moti.

Extras:

📦 Tailwind-React-Native: solution pour utiliser Tailwind de manière cross-platform. className et plugin babel sur mobile, simple passe plat sur le web.
📦 React-Native-Esbuild: pour remplacer très facilement Metro par esbuild et compiler beaucoup plus vite. Quelques limitations à prendre en compte.
🎙️ RNR 237 - React Native on Desktop

Divers

Airbnb - Faster JavaScript Builds with Metro

Les temps de build et de hot-reload ont explosé chez Airbnb. Ils ont décidé de replacer Webpack par Metro (le bundler de React-Native) et ont vu une amélioration significative. Cet article met en avant quelques différences d'architecture entre les 2 bundlers, et les challenges rentrés lors de cette migration. Note: Stripe utilise aussi Metro 🤔.

How Lerna just got 10x faster!

Nwrl (derrière Nx) a repris l'outil monorepo Lerna qui n'était plus maintenu. Ils ont déjà publié une v5.0 et ont commencé à intégrer Nx dans Lerna 5.1-beta de manière optionnelle. Une simple config Lerna useNx: true et votre build devient beaucoup plus rapide.

Extras: