React Hebdo #79: React Doc, useId, Sandpack, Gatsby, Next.js, MDX, Expo, Chicane, Node.js, Yarn...

React

Rachel Nabors a présenté la nouvelle doc React (beta), qui met en avant les hooks React, contient beaucoup d'illustrations, d'exemples interactifs (via CodeSandbox et Sandpack) et de mini-challenges, facilitant l'apprentissage de React.

C'est un site de documentation ambitieux, un projet démarré il y a plus d'un an avec toute une équipe derrière. On devrait en savoir plus prochainement, certains contributeurs ont prévu d'écrire des blog posts et collectent les questions de la communauté (Rachel Nabors, Jared Palmer).

Le site passe de Gatsby vers Next.js. Une question posée plusieurs fois: pourquoi ne pas avoir choisi Docusaurus? Docusaurus suit le principe de Pareto (20% de l'effort pour 80% du résultat). Si vous êtes prêt à investir beaucoup de temps et d'argent pour avoir un résultat optimal, ça n'est pas forcément le meilleur choix. Next.js permet aussi à l'équipe React de tester plus facilement les prochaines features de React 18. Ma réponse détaillée.

React 18 va contenir un nouveau hook useId() qui simplifier le travail pour rendre ses formulaires accessible en reliant un label a son input via htmlFor={id}.

On peut se demander pourquoi ce hook a besoin d'être dans React core, et pourquoi ne pas utiliser un package comme uuid? C'est un problème qui n'est pas si simple à résoudre, en particulier quand on prend en compte le server-side rendering et le streaming, si l'on veut s'assurer que l'id généré coté client et serveur soit le même.

Cette nouvelle intéressera particulièrement les auteurs de libs qui encapsulent l'accessibilité (Reach-UI, React-Aria, Reakit, MUI, Chakra...), mais peut-être vous aussi, si vous implémentez votre propre design system?

Lancement officiel pour Gatsby 4 avec ses nouvelles features principales:

• Deferred Static Generation

• Server-Side Rendering

• Parallel Query Running

• Support de React 18

Ces features le rapprochent un peu plus de Next.js, leader actuel des meta-frameworks. L'offre Gatsby Cloud semble tout de même en forte croissance. Il ne devrait pas y avoir trop de vendor lock-in: le Deferrerd Static Generation de Gatsby semble être une implémentation du Deferred Persistent Rendering de Netlify.

Première release candidate pour MDX qui permet d'ajouter du JSX à vos fichiers Markdown et rendre le contenu plus interactif. Utilisé sur Docusaurus, et les sites de Josh Comeau, Kent C. Dodds...

Pas mal d'améliorations importantes:

• Syntaxe pour mélanger MD et JSX plus intuitive

• Meilleur compatibilité avec CommonMark possible

• Support de nombreux runtimes: React, Preact, Vue...

• Améliorations de performance (build, runtime...)

• Types TypeScript

• Early-adopter des React Server-Components

Extras:

• Building an awesome image loading experience: Kent C. Dodds explique comment il gère les images sur son site, avec un placeholder inliné. Utiliser une image upscalée avec un filtre blur CSS me semble une bonne idée pour réduire la taille!

• A technical breakdown of React-Three-Fiber: permet de comprendre comment créer un renderer React

• React-Chicane: nouveau router React qui utilise TypeScript template literal strings pour type-checker la construction d'urls

• Remotion 2.5

• Sunil Pai: how I'd build a react framework today

• Next.js is working on URL module imports

• Create a window manager with React

• 🎥 Temporal: React for the Backend

React-Native

Sortie officielle du nouveau SDK qui était en beta la semaine dernière:

• Improved and simplified Expo module infrastructure

• Added experimental support for Hermes on iOS along with Hermes inspector in Expo CLI

• Updated React Native to 0.64.2 and React to 17.0.1

Expo supporte maintenant beaucoup plus facilement du code natif et souhaite nous faciliter la vie pour créer des libs natives. "Sweet API" est un nouveau système basé sur un DSL Swift déclaratif qui permet de créer l'interface d'un module plus facilement, avec support de JSI et validation automatique des payloads (un peu comme avec un schema Yup/Joi).

Extras:

• react-native-native-runtime: permet un accès direct au runtime natif via JSI. Pas sur qu'Apple apprécie 😅

• React-Native 0.67.0-RC2: j'ai comme l'impression que le cycle des releases React-Native s'accélère

• rnx-kit: boite à outils pour React-Native de Microsoft

• react-native-testing-library 8.0

• Even a company as successful as Shopify cannot make a great React Native App: critique de React-Native avec quelques discussions intéressantes. C'est vrai que niveau gestion du clavier, ça reste parfois compliqué 😅

• 🎧 React Native News #9

• 🎧 React-Native-Radio #15 iOS Native Components

💸 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)

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

Smallable: dev React senior - CDI Paris 50-60k (+ CTO)

Ask Mona: dev React confirmé - CDI Paris 45-50k (+ CTO)

Hublo: Node.js React senior - CDI Paris/remote 60-70k (+ EM)

Habx: React TS - CDI Paris - 38-50k

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

Shift: dev React senior - CDI Paris/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

HD Rain: dev backend Node.js React - CDI Toulouse 38-45k

Teester: dev frontend React - CDI Nantes 40-45k

Divers

Les grosses nouveautés sont:

• Additional promisified APIs

• Stack traces with Node.js version

• OpenSSL 3.0 support

• V8 JavaScript Engine is updated to 9.5

A noter que Node.js 16 entre en active LTS aujourd'hui!

Extras:

• How do you type a higher order function in TypeScript?

• Yarn 3.1: Corepack, ESM, pnpm, Optional Packages ...

• Core Web Vitals Checker: affiche les CWV d'une url en fonction du dataset public Chrome User Experience Report

• Lib Node.js compromise: ua-parser-js: un package très utilisé (transitivement) qui a pu être installé sur votre PC

• New HTTP standards for caching on the modern web

• vscode.dev: votre IDE préféré dans le browser

• Les nouveaux DevTools de Chrome 95 (vient de sortir)

• TC39: le 86eme meeting est en cours, les évolutions de proposal seront mentionnées ici

Ricky @rickhanlonii

https://t.co/6a98DidOPY