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 useAnimationFrame

• Démo: le "1er étage" de Three.js Journey a été convertie en React-Three-Fiber.

• La croissance de React continue de s'accélérer.

• 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

• Next.js for Drupal 1.0

• 3D CSS Flippy Snaps With React And GreenSock

• How To Maintain A Large Next.js Application

💸 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

La v2 de cette lib de gestures vient de sortir, avec des APIs repensées, mais rétro-compatibles. Elle s'intègre bien avec les worklets Reanimated 2.

Les nouveautés:

• un composant <GestureDetector> et une API de construction de gestures. Cela devrait simplifier le code nos apps et faciliter la composition pour créer des intéractions plus complexes

• les "Manual Gesture" et "touch events" pour les cas plus avancés

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.

• Expo EAS supporte les webhooks

• Evan Bacon à propos de la vision Expo

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

• 🎥 Top #10 Reasons why Svelte is the future

• pg_graphql: extension GraphQL native pour PostgreSQL

• API structuredClone bientôt dispo

• GitHub Actions supporte Node.js 16

• Kysely: query builder SQL en TypeScript

• How we cut 99% of our JavaScript with Qwik + Partytown

• Web3 is Bullshit