React Hebdo #82: React 18 beta, Remix, React-Location, Expo, Rust, Next.js, TypeScript...
React
React 18 passe en beta! Et on peut s'attendre à une release finale sous 3 mois environ. La beta est considérée suffisamment stable pour être testée en production (déjà le cas chez Facebook).
La version 18 est considérée comme feature complete: les dernières APIs ont été livrées pour assurer une migration sans accroc de l'écosystème, en partie pour les auteurs de lib. Une liste de libs déjà compatibles avec React 18 a été publiée.
On le sentait venir: Kent C. Dodds annonce qu'il devient Director of Developer Experience pour Remix. Des cours gratuit EpicRemix sont prévus.
Il résume: "Remix enables me to build amazing user experiences and still be happy with the code I had to write to get there."
De ce que je retiens, Remix encourage les bonnes pratiques d'UX et les rend intuitives avec des abstractions bien pensées: progressivement enhancement, gestion des chargements asynchrones, des ErrorBoundary, évite l'overfetching sans besoin de GraphQL...
Ce qui m'a le plus marqué: le progressive enhancement sur les formulaires, qui peuvent fonctionner sans JavaScript, y compris la validation!
Remix utilise esbuild (sans loader Webpack) pour compiler très rapidement votre app. Une couche d'adapteurs assure la portabilité de l'hébergement sans lock-in.
Une question récurrente: "quelle est la différence avec X". Pour l'instant il n'y a pas beaucoup de resources sur le sujet, mais ils ont prévus de faire des démos comparatives.
La "TanStack" se dote d'une nouvelle librairie de routing React, avec une belle liste de features: async route loaders, prefetching, parallélisation, caching, code splitting, nested layouts... Le 🧵 thread de Tanner Linsey est un bon résumé.
Pour moi, cette lib répond à un vrai besoin: React-Router est une lib plus simple, et les features avancées semblent être ajoutées dans Remix. Cette librairie simplifie l'accès à des features avancées dans un contexte ou vous ne souhaitez pas utiliser un meta-framework (Next.js, Remix, Redwood...), comme c'est le cas pour beaucoup de SPA d'entreprises.
Extras:
📦 suspend-react: lib très légère pour gérer les chargements async de votre code React. Je me vois bien la recommander à la place de ma propre lib react-async-hook d'ici quelques temps.
React Server Components Roadmap for Next.js: l'intégration est en alpha, il faudra encore attendre un peu avant que ça se stabilise
Next.js + SWC: le support de Styled-Components, Jest et décorateurs legacy est déjà implémenté en Rust
Get started with Storybook and Next.js: quelques subtilités à prendre en compte pour gérer le composant
next/imageuseEffect sometimes fires before paint: il semblerait que l'execution de
useEffectaprès le paint du browser ne soit pas garanti lorsqu'on fait unsetStatedans unuseLayoutEffectà vérifier.How I Would Use a UI Library: Kyle Shevlin met en avant une pratique que je ne peux que vous recommander: n'utilisez pas une lib UI directement dans vos pages, mais créez votre propre abstraction ou design système au dessus de cette lib
The React org is working to open source "stylex": la lib atomic CSS-in-JS de Facebook est toujours attendue. Collaboration avec Nicolas Gallagher, auteur de React-Native-Web
💸 Sponsors
Tu peux me soutenir et sponsoriser React Hebdo: offre d'emploi, produit, cours, agence…
Indy: la comptabilité repensée pour les indépendants
Liasse fiscale, exercice comptable, amortissement... c'est un langage que tu ne maîtrises pas ? Découvre Indy, la comptabilité repensée pour les indépendants 💪.
Grâce à la synchronisation bancaire sécurisée et à l'intelligence artificielle, les transactions bancaires sont automatiquement catégorisées. En quelques clics, les déclarations fiscales sont préremplies et télétransmises à l'administration. Un doute ou une question ? Un support client aux petits soins répond par chat sous 4 minutes 😍.
🔥 Pour essayer Indy gratuitement durant 2 mois et sans engagement, rendez-vous ici.
Être freelance, très peu pour toi ? Ils recrutent des profils tech à Lyon !
React-Native
Expo a annoncé la mise à dispo de son service managé pour tous. Ce service cloud permet de builder votre app Expo pour la production avec du code natif, créer un client dev sur mesure, gérer les certificats ou encore soumettre à l'app store... Tout ceci très simplement, et sans même avoir besoin d'un Mac!
On y voit plus clair sur la stratégie de monétisation de l'entreprise. Il y a un free plan généreux, et des offres pour les entreprises avec un prix fixe (pas de système de seat). Le service reste optionnel et il n'y a pas de lock-in, mais ils le rendent suffisamment attractif pour que ça vaille le coup de l'utiliser.
Lire aussi les threads d'🧵 Evan Bacon et 🧵 James Ide.
Extras:
Hermes 0.10: préparation pour React-Native 0.67 (toujours en RC3)
React-Native-MacOS 0.64: en retard par rapport à upstream mais Microsoft prévoit de rattraper (Windows est à jour 😄).
React-Three-Fiber v8 en beta avec un support React-Native!
🎥 React Native Gesture Handler and Reanimated Tutorial: dernière vidéo de William Candillon
🎥 Should you freeze your React Native screens: video qui explique pourquoi utiliser React-Freeze
📦 intercom-react-native: enfin un package officiel
🧵 "Here's how I improved performance by 33000%": Marc Rousavy a juste migré un algo JS vers JSI et C++
💸 Jobs
Luko | React Native Staff & Senior Engineer
Luko est la néo-assurance qui connaît la croissance la plus forte en Europe ! Notre ambition: rendre votre foyer plus sûr en travaillant de manière éthique. L’application est déjà notée 4.8/5 (iOS / Android) avec 100.000 visiteurs mensuels !
On recrute 2 profils pour rejoindre nos 6 ingénieurs React Native:
Staff Engineer: 80k€+
Senior Engineer: 60k€+
Au programme: Typescript, GraphQL, React Query, Shopify/Restyle, Testing Library, Detox, Bitrise...
CDI - Full-remote possible (notre culture) - Salaire + stock options (grille de salaire) + jours de congés illimités.
Divers
Il y a un truc que je n'ai compris que récemment (via cette conversation): Rust est très bien intégré avec Node.js (mieux que Go) via Node-API et la lib napi-rs qui permet à JavaScript de communiquer avec un programme Rust via une mémoire partagée, sans copie ni sérialisation des données. Ca rappelle beaucoup JSI et C++ sur React-Native! Et aussi SharedArrayBuffer!
Zach Leatherman (Eleventy/Netlify) commente "it’s exciting to see accumulating evidence that things are moving more and more into a post-React world". Perso je suis pas d'accord, parce que React-Native et cross-platform sont à prendre en compte. React n'est peut-être pas le choix ultime sur le web, mais il sera suffisamment bon.
Extras:
