React Hebdo #76: Redux, useSyncExternalStore, context, React-Native, Netflix, Shopify, Cloudflare R2...

React

Premiere alpha pour React-Redux v8. La lib se modernise avec une ré-écriture native en TypeScript. Le comportement runtime ne devrait pas trop changer, mais il peut y avoir des breaking changes par rapport aux types externes qui étaient publiés.

C'est un milestone important pour React 18. Avec cet article, j'essaie de résumer la situation de manière accessible.

Un super article pour découvrir les pièges de performance lié à l'usage de contexts React (qui sont assez nombreux!). Vladimir met également en avant que l'usage d'un Higher-Order-Component peut améliorer les performances (par rapport à un hook) en permettant à React de réduire le travail de re-rendering.

On a souvent besoin d'afficher des listes d'éléments qui doivent être espacés. La problématique est souvent d'éviter d'ajouter une marge en trop sur le dernier élément. Cette article détaille comment créer une abstraction React pour résoudre cette problématique de manière réutilisable et fiable, puis fini par conclure qu'on pourra bientôt utiliser la propriété CSS gap (supportée par grid + flexbox), qui est arrivée récemment dans Safari.

Une équipe de Netflix présente Lattice, un système de plugin qu'ils ont développé en interne (non open-sourcé). Cela leur permet de développer des plugins React en isolation, qui sont ensuite installés au runtime dans une application hôte: il n'y a pas besoin de rebuilder l'app hôte pour déployer des updates sur les plugins.

Extras:

• Faster React Apps With Memoization: une conclusion intéressante avec un lien vers un article externe qui l'est encore plus et proposer de tout mémoiser par défaut.

• Le développement de plugins IDE React-Preview continue, avec un support expérimental pour WebStorm/IntelliJ.

• React philosophies: Mithi détaille de manière assez exhaustive les règles de base qu'elle suit pour écrire du code React.

• Remotion 2.4: diverses améliorations sur l'UI: toolbar, raccourcis clavier... Le support du rendering distribué via fonctions serverless semble prévu pour la v3.

• Redwood 0.37: premier framework à adopter officiellement Envelop (plugin system pour GraphQL).

• La doc Next.js propose maintenant un mini-cours sur le SEO.

• StyleX, la lib no-runtime atomic CSS-in-JS utilisée sur le site de Facebook, devrait être open-sourcée avant fin 2021.

• Le nouveau site de Kent C. Dodds est vraiment sympa. Un article présente les nouveautés: une saison 4 de podcasts, système de question vocale, des éléments de gamification...

React-Native

Une nouvelle release peu de temps après la 0.65, principalement pour le support de Apple M1, iOS 15 et Android 12, l'uprade d'Hermes en v9.

Le blog post détaille aussi la stratégie utilisée pour rendre le processus de release plus rapide et plus fiable: les nightly releases sont toujours disponibles sur npm, et les pull-requests publient maintenant des "commitlies": les artifacts d'un build React-Native sont dispo sur la CI pour faciliter le test et le merge des pull-requests.

Elvira fait partie de la React-Native Foundation team de Shopify, et nous présente ce qu'ils ont mis en place pour simplifier le partage de code au sein de l'entreprise, qui développe de nombreuses apps en React-Native.

Monorepos, Babel, Jest, Prettier, ESLint (avec config à la racine), usage de Plop pour générer du code, documentation Gatsby automatisée, release process avec Lerna semi-automatisé, envisage plusieurs mono-repo...

Opendoor est une grosse app React-Native publiée en 2016. Pendant longtemps ils ont souffert des performances de React-Navigation v1 (qui n'utilisait pas encore React-Native-Screens) et du manque de typage.

Dans cet article, Tyler détaille comment ils ont upgradé vers la v5, avec une approche hybride qui permet temporairement de faire cohabiter la v1 et la v5 sur une même app. Il explique aussi comment ils ont amélioré le typing de leurs apps en utilisant les dernières features TypeScript. Les gains de performance sont d'au moins 20%, et jusqu'a 70% pour certains écrans qui ont pu être optimisés grâce à certaines API v5 comme useIsFocused().

Extras:

• React-Three-Fiber va bientôt (re)supporter React-Native.

• Il se pourrait que TikTok utilise React-Native sur sa feature TikTok Jump: des mini-apps créées par des partenaires.

• Démo React-Native-Skia sur TVOS.

💸 Jobs

Cajoo: Dev Fullstack - Remote - 40-75k€ (+BSPCE)

Cajoo veut créer le supermarché de demain 🛒 Nous sommes présents dans 10 villes en France et suite à un investissement de 40M$ de Carrefour nous étoffons l'équipe tech pour créer la stack tech du futur du retail. Les squads s'insèrent dans les 3 streams:

• 🛍️ Consumer: App B2C en React Native, back-office React, backend Hasura & lambdas Node/Typescript

• 🏭 Warehouse: PWA React avec XState pour les opérateur en entrepôt, back-office React, backend Hasura & NestJS

• 🚴 Delivery: App coursiers en React Native sur Expo, back-office React, backend Hasura & lambdas Node/Typescript via Serverless

Notre code est typé de bout en bout avec Hasura en backend qui génère des endpoints GraphQL que nous consommons en frontend avec Apollo et un typing fort via Typescript.

• 🌴 Remote pour les équipes Tech, Produit et Data (avec possibilité de venir dans nos locaux dans le 8ème à Paris)

• 🏄‍♂️🏔️ Offsite chaque trimestre dans un endroit sympa en France (Hossegor, Chamonix)

Shotgun: Dev Fullstack Senior - Remote - 60-75k€ (+BSPCE)

Shotgun c'est une billetterie et plateforme de streaming pour des évènements electro/techno 🎶. On a déjà les plus gros évènements en France, maintenant on s'agrandit à l'international (US/Brésil/Europe) 🌎. L'équipe est composée de 13 personnes et on fait déjà plusieurs millions d'euros de volume par mois. Malgré le Covid, on vient de faire le mois le plus rentable de notre histoire.

• 🌴 Remote OK (tu peux aussi travailler depuis nos bureaux de Marseille ou Paris)

• 📈 Challenge B2C : aider les gens à sortir et s'amuser (Recommandations / Social / UX aux petits oignons)

• 📈 Challenge B2B : soutenir les organisateurs dans la création et la promotion de leur event (CRM / Business Intelligence / Marketing / Finance)

• 🤖 Côté tech : ReactNative, React, Typescript, Apollo, GraphQL, NextJS, PgSQL, Vercel (serverless)

PS: j'ai travaillé en freelance pour Shotgun, l'environnement technique est plutôt cool et les gens sympas ☺️.

Une offre ci-dessous t'intéresse? Réponds à cet email!

Ask Mona: dev React confirmé - CDI Paris 45-50k

Ponicode: dev JS/React - CDI Paris 40-65k

Shift: dev React senior - CDI Paris/full-remote 50-60k

Choose: dev React-Native - CDI Paris 50-60k

Splio: dev fullstack React/NodeJS senior - CDI Paris 60-70k

F4: dev NodeJS - CDI Paris 40-50k

Aria: dev NodeJS - CDI Paris - 45-60k

Divers

Cloudflare annonce R2: un concurrent sérieux pour AWS S3, avec une API compatible pour faciliter la migration, et qui tourne @ edge sur leur CDN (accessible via serverless/workers...). Avec 0 frais de sortie de données.

On devrait bientôt pouvoir utiliser les web streams (et fetch) de manière unifié dans les navigateurs et Node.js sans dépendance supplémentaire.

Cet article présente l'API, et met aussi en avant le fait que Node.js utilise initialement des APIs incompatible avec le web. Petit à petit, des APIs compatibles sont introduites, tandis que son alter-ego Deno implémente directement les APIs web.

Extras:

• TypeScript 4.5 beta: je note en particulier le support des modules ES sur Node.js, et des améliorations notables pour les template string literals (discriminated union type, tail recursion sur les conditional types)

• Vite 2.6

• Tailwind v3 alpha: le mode JIT est activé par défaut

• Timing attacks in Node.js: je connaissais pas cette vulnérabilité

• Explore JavaScript Dependencies With Lighthouse Treemap

• Understanding How Facebook Disappeared from the Internet

Le meme de la semaine: