React Hebdo #93: Server Components, Remix, Gatsby, React-Native-Web, Perf, Immutability, Stately, TypeScript, Deno...

Feb 09, 2022

Shopify: React Server Components best practices

Cathryn partage son retour d'expérience sur l'usage des Servers Components chez Shopify, qu'elle a appris à utiliser avec leur framework Hydrogen. Elle conseille d'utiliser par défaut des Shared Components par défaut, au lieu des Client Components (ce qu'on utilise aujourd'hui). Quand on a besoin de créer un Client Component, il faudra le faire avec la granularité la plus fine possible.

Elle donne aussi les cas de figure qui consuisent à l'usage d'un Server Component. Les patterns de composition (usage de children) qu'on utilise parfois pour optimiser peuvent aussi servir à entremeler les composants de différents types.

Au final, elle propose un véritable arbre de décision, qu'elle illustre avec 2 exemples: newsletter signup et product FAQ.

Un tutoriel utilisant les server components a aussi été publié: Rapid Development with Hydrogen: Building a Product Page

How to write performant React apps with Context

Nadia explique comment on peut optimiser les rendus sur un formulaire React complexe en utilisant le context React. En premier lieu, il faut séparer en 2 contextes et hooks useFormData() et useFormAPI(). Ne pas oublier de bien mémoiser l'objet api. On pourra éventuellement splitter le state en plusieurs contextes plus petits.

Ces techniques ne scalent peut-être pas aussi bien qu'un vrai state manager, mais restent utiles à connaitre.

The "best" way to manage icons in React.js

Il existe de nombreuses façons d'utiliser des icones en React, chacune avec des tradeoffs différents. Les fichiers .svg ne peuvent pas être stylés en CSS, et les composants React qui rendent du SVG (y compris les convertisseurs type SVGR) sont pratiques mais ils vont alourdir une page HTML rendue coté serveur en inlinant le svg (on le voit très vite sur une page qui utilise plein de fois la même icone).

Ben propose une bonne alternative intéressante et beaucoup moins connue: utiliser des sprites SVG.

Extras:

📜 How to Setup React Native Web in a Remix project: React-Native-Web s'intègre bien avec Remix, c'est comme n'importe quel framework CSS-in-JS.
📜 Offline React Query: Dominik présente les limites de React-Query 3 pour gérer un problème de connexion, et présente le "NetworkMode" de la v4 (en alpha), qui pourrait faciliter la création d'apps Offline First.
📜 Rendering 3D in React made easy with react-three-fiber: bonne intro pour découvrir R3f.
📖 Partytown: nouvelle doc + intégration avec Next.js et Remix
🐦 "A simple composition trick to avoid re-rendering a component": même technique de composition que le 1er article sur les Server Components 😏
📦 Gatsby 4.7: avec option trailingSlash
📦 Yerba: Electron Turborepo monorepo with Next.js, Typescript, Vite...
📦 Lamina: layer-based shader material pour Three.js + React-Three-Fiber
🔗 Remix Routing Demo
🔗 Remix Bug Report Test: Remix nous propose de reporter les bugs du framework en écrivant des tests en échec 😏
🔗 remix.guide: je découvre cette sorte de HackerNews pour le contenu Remix

React-Native

🧵 Andrew Clark: "I can’t prove this but I suspect if someone built a Next.js/Remix/etc for React Native (i.e. single codebase for client and server) they would make a trillion dollars": je ne sais pas ce qu'Andrew a derrière la tête mais c'est un sujet qui m'intéresse beaucoup! En particulier, l'usage de Server Components pour React-Native me semble pertinent, mais aussi la co-location data/screen (un équivalent React-Native de Remix/loader, Next.js/getServerProps)
🧵 Satyajit Sahoo: "Seeing many people compare React Navigation to React Router..."
📜 Displaying a List in React Native: Map Method or FlatList Component
📜 Expo EAS + LogRocket: Unlimited Possibilities for Your Expo Apps
📖 React-Navigation - Organizing Types: nouvelle doc
📦 React-Native 0.68.0-rc.1: nouvelle branche et RC déjà dispo, reflete le nouveau cycle de release plus rapide.
📦 expo-e2e-demo: demo qui fait tourner des tests Detox e2e sur une app Expo via GitHub actions
📦 React Location on React Native POC
🐦 "We rebuilt the docs of NativeBase using Nativebase"
👥 App.js Conf 2022: 8-10 Juin Cracovie (CFP)
👥 React Native London February 2022: meetup (live stream) avec une présentation par Quin Jung (Expo) du nouveau système EAS Updates
🎥 Limitless App Development with Expo and React Native

💸 Jobs

Sponsorise React Hebdo pour publier ton offre d'emploi

Cajoo: Dev & Architecte Fullstack - Remote - 40-90k€ (+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)

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

Divers

A list of every web API in Deno

Luca (contributeur Deno) mentionne toutes les APIs web que supporte Deno, ce qui en fait une plateforme de choix pour déployer Remix. C'est probablement en réponse au support récent de nouvelles APIs web annoncées pour Node.js 18. Lire aussi fetch() In Node.js Core: Why You Should Care

Immutability isn't free:

Histoire amusante, dans un contexte backend mais qui peut largement s'appliquer au frontend et React. L'usage de FP et d'immuabilité a conduit à de mauvaises perfs liées à la copie d'objet et une compléxité O(n^2).

Note: il est possible d'avoir de meilleurs perfs sur les updates de structures immuables avec l'usage de vector tries et de structural sharing, comme le fait ImmutableJS.

Netlify Scheduled Functions

Quirrel (service SaaS de jobs cron pour env serverless) et son créateur Simon (voir son post) rejoignent Netlify, qui présente un nouveau système de Scheduled Functions en beta.

Ce genre de feature manque réellement pour compléter l'offre serverless existante. A noter que Blitz (auquel Simon contribue) pivote en Blitz Toolkit pour fournir des services similaires. On ne serait pas surpris de voir Vercel faire une offre 😏

Extras: