Discover more from This Week In React
React Hebdo #106: Remix, Framer Motion, Storybook, Gatsby, Remotion, Metro, Lerna, TypeScript, Three.js, LocatorJS, Tailwind...
React
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.
📜 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.
🧑🎓 Up and Running with Remix: cours gratuit de Kent C. Dodds sur Egghead
🐦 Remix feedback: Jamie Kyle, Sarah Dayan
🐦 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.
💸 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.
classNameet 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.
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:
The balance has shifted away from SPAs: le besoin d'avoir une SPA baisse avec l'arrivée de nouvelles APIs web qui rendent certaines experiences possibles en MPA
XState Test v1 Alpha released: utiliser des state machines pour générer tous les chemins possibles lors des tests 🤔
Parcel 2.6: le scoping des CSS vars est une idée intéressante 🤔
TypeScript 4.7: avec support ES Modules
Babel 7.18.0: avec support TS 4.7
Processing Arrays non-destructively: for-of vs .reduce() vs .flatMap()
