React Hebdo #95: onRecoverableError, Next.js, Remix, ReactNode, Fabric, Flipper, Expo, React-Runner, State Of JS...
React Hebdo #95: onRecoverableError, Next.js, Remix, ReactNode, Fabric, Flipper, Expo, React-Runner, State Of JS...
React
React 18: onRecoverableError
Une RC1 de React 18 devrait sortir prochainement avec cette nouvelle API, annoncée par Andrew Clark: "Small update on React 18: we're planning another RC for next week that includes improvements to error reporting"
L'idée générale est d'introduire une API pour pouvoir logger ou reporter les "recoverable errors" (via reportError) qui surviennent dans React, en particulier lors de la phase d'hydratation.
Next.js 12.1
Belle release qui inclue une des features Next.js les plus demandées: on-demand Incremental Static Regeneration (ISR). Une nouvelle API unstable_revalidate("/static-page-url") qui devrait améliorer significativement l'intégration avec un CMS.
Coté SWC: 6 nouveaux plugins Babel ont été portés en Rust (dont Styled-Components et Relay), la minification SWC en release-candidate et une meilleur intégration avec Jest.
Il y a également du mouvement sur le support de React 18 et des Server Components, mais ça reste en alpha.
Voir aussi la vidéo d'introduction de Lee et la demo on-demand ISR de Delba.
Remix 1.2
Une release intéressante sur la partie déploiement: nouvelle option serverBuildTarget pour configurer le build (directory, module format) à son hébergeur, possibilité de builder le server en un fichier unique, et adapter pour deployer sur Deno.
The React.ReactNode type is a black hole
Problème bien connu: le type TypeScript ReactNode est trop lache ne remonte pas certaines erreurs à la compilation. Kevin propose de créer un StrictReactNode et un plugin ESLint pour interdir l'usage de ReactNode. Article similaire.
Extras:
📜 Putting test files in the pages folder in a Next.js app: un trick Next.js utile à connaitre si vous souhaitez co-localiser les stories et tests à coté de vos pages: la config
pageExtensions📜 Deep dive into React keys bugs: illustre divers problèmes lié à la prop
keyet propose des solutions📦 React-Runner: nouvelle alternative moderne à React-Live pour fournir une fonction d'éditeur de code avec preview, basé sur Sucrase. Pourrait être adopté par la nouvelle doc React en beta et Docusaurus.
📦 Tunnel-Rat: nouvelle lib Poimandres, basée sur Zustand, pour créer un "tunnel" React: permet de rendre du JSX à un endroit différent. Voir aussi React-Teleporter.
🔗 Nextjs-blog-theme: template de blog Next.js + Tailwind proposé par Netlify/Bejamas
💬 Mark Erikson: "when/why should I use Context, Hooks, Thunks, Sagas, React Query, RTK Query?"
React-Native
Introducing Fabric to react-native-screens
Avec React-Native 0.68, on pourra facilement activer le nouveau renderer Fabric! Mais ça ne marchera que si toutes vos libs sont compatibles.
Software Mansion annonce son engagement à rendre ses libs compatibles avec Fabric, à commencer par React-Native-Screens.
Ils nous incite à faire de même et nous donnent quelques pistes (process et PRs). L'idée: créer des libs qui fonctionnent aussi bien avec la nouvelle que l'ancienne architecture, pour permettre une migration incrémentale, sans pour autant dupliquer trop de code.
React-Navigation fonctionne sous Fabric avec react-native-screens!
Tout ça plait beaucoup à la communauté:
Flipper is coming to your web and Node.js apps
Flipper est à la base un DevTool desktop pour React-Native, qui permet par exemple de consulter les logs, les appels API... Andrey présente js-flipper, un package qui permet d'intégrer Flipper avec une application web ou encore Node.js (exemple React). Il nous présente de nombreux use-cases chez Meta: apps web, Node.js, Desktop, Occulus Quest, mais aussi des usages métier comme un bouton "se logger en tant que user X".
Flipper semble être une plateforme idéale pour construire un DevTools universel, à condition que l'écosystème suive, Andrey nous invite donc à créer des plugins.
Extras:
📜 Security of React Native libraries: the bad, the worse and the ugly: un audit sécurité assez avancé qui critique pas mal de libs crypto en React-Native. L'entreprise propose Themis, une librairie de crypto cross-platform (API React-Native en beta) qui encourage aux bonnes pratiques sans être expert crypto.
📜 Expo 101: Building mobile apps in weeks, not years: belle présentation de l'écosystème Expo, qui propose un outil pour chaque étape du projet mobile
📜 Better Credentials Management with Expo Application Services
📦 vision-camera-ocr: reconnaissance de texte en temps réel
📦 react-native-safe-area-context v4 RC: support de Fabric, backward compatible. Cherche feedback des early adopters.
🎨 Demo graph React-Native-Skia: plus performant que SVG
💸 Jobs
Sponsorise React Hebdo pour publier une 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
Cycle App: Lead Frontend Engineer – Remote ou Paris/Brussels – 60-80k€ (+ stock options compétitives)
Cycle, c'est un outil de collaboration pour les équipes produit : on aide les PMs, les développeurs et les designers à mieux travailler ensemble tout en prenant en compte le feedback de leurs clients. Lancé avec eFounders en 2019, on a construit un produit "no code" très flexible qui s'adapte à n'importe quelle typologie d'équipe produit. On a levé 4.5M$ avec des fonds prestigieux aux US et on s'apprête à sortir de beta.
On a de beaux défis produit en perspective et dans ce contexte on recrute plusieurs développeurs dont un Lead Frontend Engineer sur une stack moderne : real-time editor, React avec TypeScript (avec GQL codegen), GraphQL (Apollo avec cache avancé: TypePolicies, optimistic UIs), monorepo et UI-kit (styled components + storybook).
Divers
State Of JS 2021
Sans surprise, React reste très populaire cette année, mais surpassé par Svelte et Solid en terme de satisfaction. Next.js et Remix tous deux à 91% de satisfaction. Lisez en particulier la conclusion de Swyx. Un livestream a lieu aujourd'hui avec quelques personalité
Rappelons que ce sondage n'est pas sans bias, mais reste tout de même intéressant pour dégager des tendances. Sacha Grief est de bonne volonté et adresse les critiques sur Dev.
Extras:
Rebuilding Babel: The Tokenizer: article interactif, parfait pour découvrir ce qu'est un tokenizer
Express 5.0: première beta attendue depuis très longtemps 😅 pendant ce temps, son concurrent moderne Fastify release une v4.0.0-alpha.1
GitHub Actions:
concurrency.cancel-in-progress: permet d'optimiser sa CINode.js:
AbortSignal.timeout(): nouvelle APInew.target: TIL, permet de savoir si une fonction est appelée avec le mot clénewen JS, plus rapide queinstanceofCSS Container Queries: activé par défaut dans WebKit
New Google Cloud Functions: temps d'execution jusqu'a 60min
Cross-Browser support with Cross-Origin isolation: explique pourquoi les WebContainers de StackBlitz ne fonctionnent que sur Chromium pour l'instant
Create your Chrome Extension using Flutter web: 🤔 ce use-case a sans doute du sens, pas besoin de SEO
TypeScript - Implement Rust-style Result: rappelle le type fonctionnel Either
Netlify Graph: nouveau service Netlify suite à l'acquisition de OneGraph: une interface GraphQL unifiée vers plein d'APIs tierces
Node.js Trademarks Transferred to OpenJS Foundation: ça serait cool si Oracle transferrait sa trademark sur JavaScript maintenant 😅
"TIL you can write overloads for arrow functions in TypeScript"
You Can throw() Anything In JavaScript - And Other async/await Considerations
Rome: "A sneak peak of our formatter: being able to format partial broken code!"
Measuring user flow performance with Lighthouse and WebdriverIO
