React Hebdo #94: 2 ans 🥳️, memoization, composition, Remix, Next.js, Gatsby, React-Native, Windows, CSS, TypeScript, npm, SWC...
React
Using global memoization in React
Vladimir explique que parfois useMemo
n'est pas suffisant, et on a parfois besoin de partager un cache entre plusieurs composants. Il propose 5 façons différentes de cacher les données de manière globale en dehors de ses composants React, de la constante au cache LRU.
Mon avis: les WeakMap peuvent aussi être une solution. Et pourquoi pas mettre le cache dans un contexte React.
React component as prop: the right way™️
Nadia donne de bonnes raisons pour utiliser la composition en React. Elle prend en exemple un bouton avec texte + icone. Elle propose 3 alternatives et les compare sous différents angles:
icon={<MyIcon/>}
Icon={MyIcon}
renderIcon={(...settings) <Icon {...settings}/>}
Personnellement je n'aime pas trop la 1ère qui repose sur cloneElement
pour appliquer des props par défaut sur l'icone.
Extras:
📜 Remix upload to S3: utilise une API Remix pour forwarder le stream d'upload directement vers S3
📦 Remix Electron: intégration entre Remix et Electron 🤔 semble avoir un interet pour réduire la verbosité du code Electron et améliorer la co-location.
📦 Griffel: lib atomic CSS-in-JS de Microsoft, zero-runtime, typesafe. On attend toujours StyleX😏
📦 Jotai 1.6: expose l'interface store, atom sync avec localStorage...
🗳 Next.js Developer Survey: sondage proposé par Vercel
💡 Next.js RFC: Switchable Runtime: le SSR de Next.js est historiquement basé sur un runtime Node.js. Ils comptent proposer une config globale et par route pour utiliser le Edge Runtime. Cela présente de nombreux interets: streaming SSR, faible latence...
💡 Gatsby RFC: Ahead of Time Compilation for config files: pour le support de fichiers de config ecrit en TypeScript. PS: j'ai trouvé un package intéressant pour ce use-case: bundle-require
💡 Flat file system for file-based routing: opinions divergeantes de Jamie Kyle sur les conventions file-system de routing 🤔
📖 Partytown + Hydrogen: nouvelle doc d'intégration
📜 Hydrogen & Tailwind: The Perfect Match: article de Shopify, un peu de React mais surtout du Tailwind
React-Native
Measuring and improving performance on a React Native app
Alexandre nous présente un plugin Flipper pour mesurer les performances (FPS UI et JS Threads) en continu et calculer un score comme Lighthouse.
Il donne aussi 4 astuces pour mesurer efficacement, et présente un cas concret d'utilisation sur l'appli TF1, qui a amélioré les perfs (score 40 à 90).
Extras:
📜 4 years as a React Native OSS maintainer: a retrospective: c'est pas toujours facile d'être un maintainer 😅
📜 Calling Windows APIs from React Native just got easier: Microsoft présente un nouveau package React-Native pour appeler n'importe quelle API WinRT directement depuis JavaScript. A noter qu'il existe certaines initiatives similaires pour iOS (react-native-native-runtime) mais c'est pas sur qu'Apple soit d'accord 😝
📜 React Native for Windows is helping Settings improve more quickly: retour d'expérience de Microsoft sur un use-case précis
💸 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
Hello, CSS Cascade Layers
Une bonne introduction sur CSS Cascade Layers, une nouvelle feature CSS à ne pas manquer! Elle semble arriver assez vite dans nos navigateurs, et même si c'est pas encore utilisable (pas de polyfill) ça vaut le coup de s'y intéresser dès aujourd'hui.
Les cascade layers donnent un controle additionel sur la cascade CSS et l'ordre d'application des règles CSS, ce qui peut régler des problèmes liés à l'ordre d'insertion, la spécificité ou encore limiter l'usage de !important
.
Si vous n'avez qu'une minute, regardez cette animation. C'est comme si le browser retriait votre CSS au lieu de se contenter de l'ordre initial du fichier CSS. Ca me fait penser aux hooks React 😅.
Pourquoi c'est important? Parce que les bundlers et outils frontend actuels n'ont pas vraiment de règles pour emettre votre CSS dans le bon ordre. Par exemple, avec Webpack, CSS loader, code-splitting et imports dynamiques, est-ce que vous savez vraiment dans quel ordre votre CSS importé apparaitra sur la page finale? Pas moi 🤷♂️!
Avec cette nouvelle feature, notre CSS pourrait devenir plus portable. Si vous changez de bundler ou de framework (et donc potentiellement l'ordre d'insertion CSS), vous n'avez pas forcément envie de devoir tout réécrire et fixer de nombreux bugs CSS liés au changement d'ordre.
Ca bouge bien coté CSS en ce moment. Voir aussi le projet Interop 2022: les features sur lesquelles les browsers vont travailler cette année pour apporter une bonne compatibilité. Les Cascade Layers sont dedans!
Extras:
Announcing TypeScript 4.6 RC: des améliorations sur le Control Flow Analysis vraiment cool pour le code React
Typescript - (ReadOnly) NotEmptyArray: technique des tuples à connaitre:
[T, ...T[]];
Assertion Functions in TypeScript: présente une feature bien utile pour le type-narrowing
"Extract in TS can be used to query a member of a union type."
SWC v1.2.139: avec un nouveau système de plugins Rust
Why I prefer JS for front-end build automation: c'est sur que c'est mieux que bash 😅
npm RFC: Package Distributions: propose une solution pour les auteurs de lib qui ont besoin de distribuer des packages platform-specific
Node.js 17.5.0: fetch (behind flag), JSON modules
Jest v28.0 alpha: plus léger, retire JSDOM et Jasmine
AbortController -> TaskController: pouvoir assigner et modifier une priorité aux taches JS?
EdgeDB 1.0 avec un query builder TypeScript
Rome Formatter and Rust Update: le focus semble être sur un formatteur de code qui s'alignera avec Prettier.
Flutter in 2022: strategy and roadmap: des améliorations prévues sur le support web
Move over JavaScript: Back-end languages are coming to the front-end
Design system versioning: single library or individual components?
Server-Sent Events: the alternative to WebSockets you should be using