This Week In React

Share this post

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

substack.thisweekinreact.com

Discover more from This Week In React

A weekly newsletter for React and React-Native experts. Join 16749 React devs and receive by email the most important React news.
Continue reading
Sign in

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

Sébastien Lorber
May 31, 2022
Share this post

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

substack.thisweekinreact.com
Share

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.

  • 📜 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:

  • 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

  • A new way to test types

  • How we converted our Node.js library to Deno (using Deno)

  • Byte sized TypeScript #1 - Filter type

  • Advanced TypeScript: How we made our router typesafe

  • Playlist Advanced TypeScript Matt Pocock

  • Monorepos in JavaScript & TypeScript

  • Type-Trident: a curated list of advanced type level madness

  • Tailwind - Headless UI v1.6

  • Processing Arrays non-destructively: for-of vs .reduce() vs .flatMap()

  • Lesser-Known And Underused CSS Features In 2022

  • Dark Mode Toggles Should be a Browser Feature

  • Electron 19.0.0

  • Chrome 103 Beta

  • GitHub is now free for teams

  • Angular’s Vision for the Future

Twitter avatar for @wolax
Matthias Schmidt @wolax
Airbnb moves from Webpack to Metro because it's faster. React Native folks move from Metro to esbuild because it's faster. I think I'll just do nothing for 2 more years and maybe the community will have settled on something fast-enough™. https://t.co/1aVluGU7Ux
8:42 PM ∙ Jan 18, 2023
Share this post

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

substack.thisweekinreact.com
Share
Previous
Next
Comments
Top
New
Community

No posts

Ready for more?

© 2023 Sébastien Lorber
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing