React Hebdo #111: Reassure, Multiplayer Cursors, Next.js, Meteor, Storybook, TanStack, FlashList, Bun...
React
Reassure
Reassure est une nouvelle librairie de test de performance en React. Déjà présentée, elle vient juste d'être open-sourcée. Elle permet de poster un rapport dans une pull-request quand des régressions sont detectées. Exemple: un composant qui re-render plus lentement, ou plus souvent qu'avant. Pour l'instant seul React-Native est supporté, mais le support web arrivera très prochainement.
How to animate multiplayer cursors
Un super article intéractif qui propose d'animer le curseur de la souris sur plusieurs browsers en temps réel. C'est un problème plus compliqué qu'il n'en a l'air. Chaque approche est illustrée avec une implémentation React et présente des tradeoffs différents: CSS transitions, spring, splines...
How to Use Next.js Middleware
Article intéractif du même auteur, présentant de nombreux cas d'usage de middleware. Déjà publié ici, il vient d'être mis à jour suite à la sortie officielle de Next.js 12.2 qui comporte quelques breaking changes.
10 Years Of Meteor
Sacha Grief (co-auteur de Discover Meteor, et aussi des sondages State of JS...) fait une rétrospective sur 10 ans de son histoire personnelle avec le framework. Meteor a perdu en popularité, mais largement influencé notre écosystème frontend.
The mystery of React Element, children, parents and re-renders
Nadia met en avant quelques comportements React qui peuvent parfois être surprenants voir contre-intuitifs, et explique dans quel cas un re-render du parent va lancer un re-render de l'enfant.
Storybook Community Showcase #2
Résumé des dernières nouveautés de la communauté Storybook: Component Encyclopedia, Figma plugin, Story Explorer, et divers addons: Variants, CSS variables, Recoil...
The new wave of React state management
Présente les différents problèmes résolus par les solutions de state management et en compare quelques uns. Rétrospective pre/post Redux. Article complet mais assez long: pas évident à lire.
Extras:
🇫🇷 Recapt Juin 2022: résumé de l'actualité React/JS en Juin.
📜 Deploy Next.js 12.2 on Netlify today: démontre la capacité de Netlify à gérer les dernières nouveautés
📜 Use Next.js 12.2 On-Demand ISR to automatically refresh stale data
📖 Thinking in Efffects: nouvelle doc beta en cours d'écriture
📦 FramerMotion 6.4: nouveau hook useInView()
📦 TanStack Table v8: nouvelle version de React-Table maintenant framework-agnostic. Partenariat avec AG Grid.
💸 Sponsors
💡 Comment sponsoriser React Hebdo
Axiom - Zero-Config Observability for Vercel
Axiom vous permet de surveiller la santé et la performance de vos déploiements Vercel en ingérant toutes vos données de requête, de fonction et Core Web Vitals.
Utilisez le tableau de bord d'Axiom pour avoir une vue d'ensemble de tous vos logs et stats Vercel, explorez des projets et des déploiements spécifiques et obtenez un aperçu de la performance des fonctions en un seul clic.
PS: J'utilise Axiom pour surveiller les logs de ma newsletter 😉
💸 Jobs
Pricemoov - Senior Software Engineer React.js - 55-80k€
Pricemoov est une solution SaaS de pricing dont la mission est de permettre à ses clients d'optimiser leur marge et leurs revenus grâce à une meilleure gestion de leurs stratégies de prix.
Notre siège est à Paris et nous avons ouvert notre bureau à New York en novembre 2021. Fin 2022, on accélère notre internationalisation avec l'ouverture de Singapour. Nous serons plus de 100 collaborateurs d'ici là !
En rejoignant l'équipe Engineering de Pricemoov, vous participerez notamment à la conception d'une architecture front-end intelligente afin de permettre au produit de scaler à l'international.
Notre ambition technique est l'amélioration continue en visant de hauts standards en terme de qualité de code. Vous y participerez en progressant sur le chemin du software craftsmanship.
Paris 10ème, remote friendly, 55K - 80K+ selon la séniorité technique.
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
FlashList - Fast & Performant React Native List
Shopify vient de sortir FlashList, son alternative à FlatList pour résoudre les problèmes de performance lors du scroll et éviter d'afficher des cellules vides. Le but est de garder 60fps même sur les appareils Android un peu ancien, sans pour autant compliquer l'implémentation. La librairie réutilise les cellules déjà rendues: il faudra adapter votre usage de key React pour lui laisser la main.
React-Native-Compat-Table
Répertorie le support API de chaque runtime React-Native (JSC, V8, Android...) de manière exhaustive. L'auteur explique également Explique aussi pourquoi React Native recommande la config TypeScript es2017
Extras:
📜 What’s New in React Native 0.69 — How to Upgrade and Why it Matters
🧵 Expo 46 + web: Evan Bacon donne des précisions sur le support web et confirme aussi l'ambition de remplacer Webpack par Metro.
🧵 React-Native vs mobile native trends: le développement d'apps natives semble diminuer.
🎥 The React Native Avengers: GestureHandler, Reanimated, and Skia
Divers
Bun - an incredibly fast all-in-one JavaScript runtime.
Un nouveau runtime JavaScript qui vient directement concurrencer Node.js et Deno sur les performances, basé sur JSC (et pas v8) et écrit en Zig. Une toolchain complête avec bundler, transpiler, test runner, client npm... Outil à suivre de pret. On l'avait déjà parlé du bundler Bun l'année dernière mais le scope s'est élargi et la v0.1 vient de sortir.
Extras:
Safari Technology Preview 148: :has(), Container Queries, inert...
