React Hebdo #85: FloatingUI, Remix, Redwood, Rails, Relay, Storybook, Gesture Handler, Flipper, Sandpack, Open-Props...
Discover more from This Week In React
React Hebdo #85: FloatingUI, Remix, Redwood, Rails, Relay, Storybook, Gesture Handler, Flipper, Sandpack, Open-Props...
React
Nouvelle librairie de positionnement pour les éléments flottants (tooltip, dropdowns...), similaire à Tether ou PopperJS, mais plus légère, bas niveau, avec un système modulaire, découplé du DOM. Elle propose également des APIs plus haut niveau comme des composants React, et un support expérimental de React-Native! La lib est proposée par un maintainer de PopperJS, qui a jugé qu'il valait mieux créer un nouveau projet.
Une comparaison de Remix à Rails, approuvée par Michael Jackson. Evoque les primitives proposées par Remix (resource routes, loader, convention filesystem, co-location...), le contexte de "Jamstack fatigue" dans lequel on se trouve, l'avénement du déploiement Edge serverless et le retour du SSR.
Redwood vient de sortir sa 1ère release candidate, avec quelques highlights comme l'intégration avec Chakra, Fastify ou RedwoodRecord. Redwood est projet supporté par Tom Preston-Werner, le créateur de GitHub et Jekyll, qui a beaucoup utilisé Rails. Redwood focus d'abord sur la vélocité produit, avant les performances techniques. Il a des opinions fortes, comme l'usage de Chakra, Prisma, GraphQL, TypeScript, Storybook...
Extras:
Why Remix is worth your attention: des insights intéressants autour du progressive enhancement sur les forms
Relay 13: Release Candidate: compiler ré-écrit en Rust. Le thread de Robert Balicki rappelle les avantages du client GraphQL
Storybook 6.4: support des interactive stories, amélioration des perfs
A Visual Guide to useEffect: des visualisations sympathiques pour apprendre
Framer Motion 5.4: nouveau hook
useAnimationFrameDémo: le "1er étage" de Three.js Journey a été convertie en React-Three-Fiber.
React.holiday: calendrier de l'avent, leçons sur React 18
Ben Awad fait passer un test à Dan Abramov, qui réponds aussi à "quand utiliser Redux" 😝
Metronome.sh: nouveau service SaaS d'analytics pour les apps Remix (en beta, non officiel)
Gatsby 4.3: compatible à 100% avec React 18
Gatsby: Using Deferred Static Generation with Analytics Tools
💸 Sponsors
Tu peux me soutenir et sponsoriser React Hebdo: offre d'emploi, produit, cours, agence…
Indy: la comptabilité repensée pour les indépendants
Liasse fiscale, exercice comptable, amortissement… c'est un langage que tu ne maîtrises pas ? Découvre Indy, la comptabilité repensée pour les indépendants 💪.
Grâce à la synchronisation bancaire sécurisée et à l'intelligence artificielle, les transactions bancaires sont automatiquement catégorisées. En quelques clics, les déclarations fiscales sont préremplies et télétransmises à l'administration. Un doute ou une question ? Un support client aux petits soins répond par chat sous 4 minutes 😍.
🔥 Pour essayer Indy gratuitement durant 2 mois et sans engagement, rendez-vous ici.
Être freelance, très peu pour toi ? Ils recrutent des profils tech à Lyon !
React-Native
Il y a déjà Storybook pour React-Native, mais c'est un projet séparé, qui a ses propres addons, moins nombreux. Danny est un des maintainers, et nous propose d'utiliser un nouveau plugin officiel pour React-Native-Web. Les trade-offs sont différents: on peut réutiliser tout l'écosystème de plugins existant pour le web, mais les composants React-Native peuvent s'afficher un peu différemment que sur mobile (voir ne pas fonctionner). On peut faire de la non-reg visuelle avec Chromatic, ou envoyer un lien vers le Storybook web aux stakeholders.
Les 2 approches sont complémentaires. Si un composant ne fonctionne pas, on peut toujours le désactiver avec un stub en .web.js.
Extras:
Reanimated 2.3: les layout animations sont dispo!
Developing React Native with Expo and Flipper: Jakob explique son setup de dev avec Expo. Il a créé un config plugin expo-community-flipper pour utiliser le debugger Flipper sans éjecter.
React-Native v0.67.0-rc.5: ça devrait bientôt sortir.
PyTorchLive: algos ML sur mobile. Support React-Native + plugin Expo Config.
💸 Jobs
Luko | React Native Staff & Senior Engineer
Luko est la néo-assurance qui connaît la croissance la plus forte en Europe ! Notre ambition: rendre votre foyer plus sûr en travaillant de manière éthique. L’application est déjà notée 4.8/5 (iOS / Android) avec 100.000 visiteurs mensuels !
On recrute 2 profils pour rejoindre nos 6 ingénieurs React Native:
Staff Engineer: 80k€+
Senior Engineer: 60k€+
Au programme: Typescript, GraphQL, React Query, Shopify/Restyle, Testing Library, Detox, Bitrise…
CDI - Full-remote possible (notre culture) - Salaire + stock options (grille de salaire) + jours de congés illimités.
Divers
Un bundler proposé par CodeSandbox et capable de fonctionner dans le navigateur, y compris avec des dépendances npm. Particulièrement intéressant pour créer des expériences intéractives d'édition de code en live. Des composants facilitent l'intégration avec React. Déjà utilisé sur la nouvelle doc React en beta. Une bonne alternative à React-Live?
Extras:
Error Cause: logging mergé dans Node.js pour la prochaine v16
Open-Props.style: innovation CSS d'Adam Argyle: une collection de design tokens sous forme de variables CSS
designcember.com: calendrier de l'avent par Google
Web Almanac 2021: beaucoup de stats sur le web basé sur HTTP Archive. La partie Jamstack peut vous intéresser.
pg_graphql: extension GraphQL native pour PostgreSQL
Kysely: query builder SQL en TypeScript
