React Hebdo #83: Remix 1.0, React Test Selector, Tamagui, R3f, Next.js, PopperJS, Bun, TypeScript, Lighthouse, Cloudflare...

React

C'est le lancement officiel pour Remix, le meta-framework React de Michael Jackson et Ryan Florence qui focus sur l'expérience utilisateur et le progressive enhancement.

La landing page est très bien faite et explique quelques unes des innovations proposées: composant Form qui peut fonctionner sans JavaScript, nested routes, prefetching chargement de données parallélisé (sans waterfall ni spinners), repose principalement sur des APIs web existantes, gestion des error boundaries...

Ce framework ne propose pas d'export sous forme de sites statiques, qui semble devenir moins attractif dans l'écosystème React.

Il va falloir lire la doc pour se faire une idée plus concrète, mais la première impression est bonne. Il y a pas mal de points qui le différencie de son concurrent Next.js. Dans la vidéo d'intro, Ryan Florence explique que Remix est plus comparable à Rails et s'occupe de l'expérience utilisateur dans son ensemble. La stratégie de monétisation du projet est orientée autour d'une offre de services.

Liens divers:

• Site

• Twitter

• Trailer

• Video d'introduction

• Playgrounds StackBlitz et CodeSandbox

Brian Vaughn présente une nouvelle API expérimentale pour les tests end-to-end dont la motivation première semble être de rendre les tests Jest plus robustes et portables, avec la possibilité de supporter n'importe quel renderer (React-Native, React-Three-Fiber...).

L'API permettrait d'utiliser des selectors imbriqués, et il y aurait un sélecteur pour viser du texte, un data-testname ou encore un composant React.

Tout ça me semble une bonne idée, à voir comment cela s'intégrera dans l'écosystème avec Testing Library ou Detox.

Varun décompose différentes techniques en React-Three-Fiber qu'il a utilisé pour créer une scene 3D. Utiliser React apporte un plus avec son approche modulaire et déclarative, la possibilité d'utiliser Storybook...

React-Three-Fiber est aussi cross-platform, et le support React-Native arrive dans la v8, comme le montre cette démo de Paul Henschel.

Extras:

• L'équipe React clarifie: les Server Components ne seront pas dans la v18.0 mais arriveront plus tard dans une version mineure.

• How To Prevent Unnecessary React State Update Re-renders: met en avant 2 techniques intéressantes pour éviter les render: utiliser le setState fonctionnel, et éviter de créer des shallow copies inutiles

• Next.js: proposition pour off-loader les scripts tiers dans un web worker pour améliorer les performances, en utilisant potentiellement Partytown

• 🎥 What's Next.js #1: première vidéo d'une série de meetups en ligne sur le futur de Next.js. On y parle en particulier de Bun, le nouveau bundler en Zig qui est compatible avec Next.js.

• 🎥 "Should you learn JavaScript before React?" par Lee Robinson

• Gatsby 4.2

• How to Create and Publish a React Component Library

💸 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

Une nouvelle abstraction au dessus de React-Native-Web pour faciliter la création de design systems et d'apps cross-platforms, en particulier pour résoudre certains problèmes comme les media-queries, les design tokens, le theming...

J'aime bien l'idée d'avoir un compilateur pour extraire les inline styles en atomic CSS-in-JS, et optimiser le rendu.

La solution est compatible avec le Server-Side-Rendering, et le site est d'ailleurs en Next.js.

Il faudra étudier comment cette nouvelle solution se différencie de Dripsy.

Extras:

• react-native-performance: nouveau plugin Flipper pour monitorer la performance et le FPS de vos apps React-Native.

• Don’t use the wrong JDK for React Native if you’re using an M1 Mac: Jamon nous recommande d'utiliser le JDK d'Azul pour compiler nos apps Android 2x plus vite.

• La v3 de PopperJS est découplée du web et pourra tourner sur React-Native

• Nouvelle demo Skia: utilisation d'un moteur physique Box2D

• Une app Expo de moins de 5mb: c'est une taille qu'il est possible d'atteindre avec Expo Application Services si votre app est petite (contrairement à avant EAS ou l'app était beaucou plus grosse).

• "we now have 1200+ React Native screens in the Facebook app"

• How to Manage Environment Variables in React Native

• React Native: Two Important Lessons I Learned The Hard Way

💸 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

Anthony fait un super travail de journaliste à travers le temps pour nous parler de réhydratation partielle ou progressive, de progressive enhancement, d'islands architecture... Il mentionne comment ces problématiques sont adressées dans de nombreux frameworks.

Cette article donne une bonne vision d'ensemble des tendances actuelles qui visent à améliorer les performances de nos Single-Page-Applications (et éviter la "uncanny valley") et conduisent à l'arrivée d'innovations dans l'écosystème React (server components, streaming SSR, progressive hydration...).

Extras:

• Lighthouse 9.0: avec le support des user flows pour mesurer l'expérience SPA dans son ensemble

• Cloudflare Pages Goes Full Stack: Cloudflare rattrape son retard en DX sur ses concurrents Netlify et Vercel: il est maintenant possible de deployer des Cloudflare Workers via un simple git push, ce qui devrait faciliter l'usage de nos meta-frameworks React

• TypeScript 4.5: comme prévu, le support des ES modules pour Node.js est retardé. Cette release contient tout même quelques améliorations sympas, comme Awaited et tail-recursion sur les conditional types

• Astro 0.21: usage de Vite, nouveau compiler écrit en Go, système inspiré à MDX pour mélanger Markdown et composants.

• Svelte Cubed: Rich Harris a open-sourcé une lib expérimentale pour utiliser Three.JS avec Svelte

• Introducing “Shadow Palette Generator”: nouvel outil de Josh Comeau pour aider à designer des ombres réalistes

• GitHub’s commitment to npm ecosystem security: 2FA devient nécessaire pour publier un package populaire

• Proposals.es: pratique pour naviguer dans les proposals ES du commité TC39

• The 2021 State of the Octoverse

• Some notes on using esbuild

• How do arrays work?

• Electron 16.0

• Chrome 96 DevTools

• "I will pay you cash to delete your npm module"

Dan @dan_abramov

Recruiter: Do you have a CS background? Me: Yes, absolutely My CS background: https://t.co/eDnPsr0CDN