React Hebdo #102: Lexical, Mitosis, Remix, Next.js, Redux, Storybook, TurboModules, Node 18, HTTP 103, CSS :has()...

Apr 19, 2022

Lexical

Nouvelle lib open-sourcée par Meta pour la création d'éditeurs de texte extensible (système de plugins pour supporter mentions, hashtags...). Semble être une alternative moderne et légère à Draft.js (pas besoin d'utiliser ImmutableJS cette fois 😏). Ne dépend pas spécifiquement de React, mais propose un binding officiel. Peut être utilisé par d'autres frameworks et pourrait même viser d'autres plateformes (support iOS prévu).

A Quick Guide to Mitosis

Mitosis est un outil qui permet de créer un design system avec un dialecte proche de React/JSX (inspiré de Solid). Mitosis est capable de compiler ces composants pour divers frameworks (React, Angular, Svelte, React-Native...). Cela peut être pratique pour les grosses entreprises qui utilisent plusieurs frameworks dans le temps. Cet article officiel est une bonne introduction

Multiple forms per route in Remix

Explique comment gérer 2 formulaires associés à une même route Remix. Il n'est possible de n'avoir qu'une seule ActionFunction par route, alors la meilleur solution semble d'utiliser l'attribut action sur le bouton submit.

Accessible React Forms

Un bon aperçu de quelques principes d'accessibilité dans un contexte React: description de props aria-*, impact sur les screen readers, couleur, focus ring...

Storybook Lazy Compilation for Webpack

Storybook 6.5 va inclure diverses améliorations de performance pour améliorer l'expérience de dev en local via la compilation lazy des stories: démarrage 3x plus rapide, rebuild 2x plus rapide. L'impact semble significatif pour les gros Storybook. A comparer avec Ladle, une alternative à Storybook sortie récemment.

Extras:

📜 Static Full-Text Search in Next.js with WebAssembly, Rust, and Xor Filters: une partie dédiée à l'intégration de WebAssembly dans Next.js (config Webpack).
📜 Introducing React-admin V4: déjà présenté la semaine dernière. La v4.0 vient de sortir officiellement.
📜 Why you should always Cleanup Side Effects in React useEffect and How to Cleanup
📜 The Duality of CLS with Lazy Loading Components
📜 Migrating your React app from Webpack to Vite
📜 React Higher-Order Components (HOCs)
📜 What's New in React 18
📖 Why Redux Toolkit is How To Use Redux Today: nouvelle page de doc qui met en avant l'usage de Redux Toolkit.
🐦 React-Router v6.x: preview 1, preview 2
🐦 Remotion: StackBlitz support
🐦 Module Federation Support for Next.js
🐦 Lighthouse + Next.js guidance
📖 Why Redux Toolkit is How To Use Redux Today: nouvelle page de doc qui met en avant Redux Toolkit.
📦 Next-Markdown: nouvelle solution pour intégrer du contenu Markdown avec Next.js. Support de MDX, Table of Contents...
📦 Redux 4.2: createStore deprecated, avec un warning
📦 React-Redux v8: compatibilité React 18, codebase en TypeScript.
📦 Generouted: file-based routing, intégration entre React-Location + Vite. Support code-splitting, data loaders, nested layouts...
📦 Zustand v4.0.0-rc.0: JS backward compatible. Breaking changes TS.
📦 Proxy-Memoize 1.0: alternative intéressante à Reselect pour optimiser les selecteurs Redux.
📦 Create-React-App v5.0.1: amélioration compatibilité React 18
📦 React-Hooks-Testing-Library v8.0
🎥 Ryan Carniato - A First Look at Next.js
💸 Intellij 2022.1: amélioration support Next.js dans l'IDE
💸 Official React-Query Course

React-Native

📜 Create high-performance graphics with React Native Skia
🐦 React-Native-Skia: drop-in React-Native-Svg replacement?
💡 PR: Add TypeScript support in New Architecture/Codegen: il est possible d'écrire la spec TurboModule en TypeScript (décrit l'interface native du module).
📦 React-Native-Turbo-Starter: un boilerplate pour créer des modules natifs modernes basés sur la nouvelle architecture
📦 React Native Turbo Secure Storage
📦 expo-github-action/command: permet de lancer un build EAS via un comment GitHub (experimental)
👥 React-Native devs Twitter community
🎥 Creating a RN Turbo Secure Storage module from scratch
🎥 React Native Turbomodule + TypeScript Codegen Tutorial

💸 Jobs

💡 Sponsorise React Hebdo pour publier une offre d'emploi

Nabla: Front-end engineer React senior - Paris - 55k-90k

Nabla construit une plateforme de médecine asynchrone (chat sans rendez-vous + appel vidéo si besoin), en automatisant un maximum de tâches répétitives pour que les médecins se concentrent sur le soin et que le service reste accessible à tous.

Ils ont levé 17M€, remporté un award Google Play Best Apps of 2021 et viennent de lancer la première offre payante dédiée à la santé des femmes.

Les fans de hooks React et de Typescript se sentiront à la maison, ainsi que les amateurs de GraphQL, Tailwind, Vite ou Next.js. Pas mal de technos sympa à découvrir (WebRTC et codegen notamment)

Paris 3ème, remote possible, 55k-90k en fonction de l'expérience, + BSPCE.

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

CSS Parent Selector

CSS dispose d'un nouveau selecteur :has() , souvent appelé "parent selector", qui permet d'appliquer des règles CSS à un élément parent en fonction de ses enfants. Par exemple, on peut changer le layout d'une carte, seulement si elle contient une image: cela évite d'avoir a appliquer une classe variante sur le parent. Cet article illustra avec de nombreux cas d'usage. J'ai trouvé intéressant la possibilité d'appliquer des CSS variables sur html en fonction de la valeur d'un <select> (demo utile pour le theming ou le support dark mode). Pour l'instant, disponible uniquement dans Safari et Chrome Canary.

Attention à ne pas en abuser: dans un modèle composant comme React il faut mieux se limiter à targeter des classes locales pour éviter de casser l'encapsulation du composant.

New 103 HTTP Status Code (Early Hints)

Un nouveau status code est officiellement ajouté dans la spec HTML. Il permet d'envoyer des "early hints" au navigateur pour prefetcher/preloader des resources avant de recevoir la réponse 200 du serveur. L'usage semble plutot destiné aux CDNs (voir cet article Cloudflare) qui pourront envoyer des early hints cachés (ou même prédits via du machine-learning 🤯) pendant l'execution de la requête vers le serveur origine.

Building a dialog component

Avec le support de <dialog> dans Safari 15.4 et un support en hausse, il est temps de s'intéresser à ce nouvel élément. Adam Argyle nous propose un article assez complet sur le sujet: en se basant sur les APIs web les plus modernes, il nous propose d'implémenter des mega/mini modales avec support animation, responsive, light dismiss, custom events...