React Hebdo #90: JSX, Tinybase, Dioxus, Owl, useWorkerizedReducer, Perf, TypeScript, CSS...

⚠️ IMPORTANT: ma newsletter LinkedIn est arretée

🔗Abonnez-vous sur ReactHebdo.fr 🇫🇷

------------------------------------------------------------------------------

Bonjour à tous!

Newsletter en retard cette semaine! J'ai de gros problèmes de connexion internet 😅 avec le retard, l'article tant attendu Remix vs Next.js vient d'être publié: je commente ça pour la semaine prochaine ;)

Une semaine assez variée, avec des articles React sympas et quelques nouveaux outils.

Parcel CSS qui réutilise une lib Rust créée pour Firefox, c'est plutôt cool!

Très content de constater Node.js supporte maintenant Error Cause!

Bonne lecture et à bientôt.

🙏 Pour soutenir la newsletter 🙏: 

• 😍 Recommande la newsletter! Ca m'aide vraiment!
• 💸 Sponsorise React Hebdo
• 🧵 Retweet le dernier thread Twitter!
• 💬 Rejoins le chat Discord

React

Good advice on JSX conditionals

On aime React pour sa proximité avec JavaScript: avec JSX pas besoin d'apprendre un nouveau langage de templating spécifique au framework. Cependant il faut reconnaitre qu'il y a quelques pièges à éviter 😅 Cet article en est un très bon résumé.

useWorkerizedReducer

Surma (Google) nous propose d'utiliser un Service Worker pour créer un reducer React (avec possibilité de code async). Ceci est réalisé de manière performante puisqu'il utilise postMessage et des patchs json pour la communication. Le support navigateur a l'air correct (Firefox a besoin d'un polyfill). A voir quels sont les cas d'usage 🤷♂️.

An Inconsistent Truth: Next.js and Type Safety

Reflexions sur les limites actuelles du typage de bout avec Next.js. Il y a un risque de désynchro entre getServerSideProps et les props du composant. Trop de boilerplate à écrire, et un helper InferGetServerSidePropsType qui ne fonctionne pas toujours comme on l'espère. Mentionne une feature TypeScript très attendue par tous les frameworks: la possibilié de typer un module. Présente d'autres solutions comme Blitz, Server Components ou tRPC. Ce dernier me plait bien (voir aussi le boilerplate zart).

Tinybase

Une nouvelle base de donnée réactive pour les données structurées (en tableau, comme SQL ou normalizr), qui dispose aussi d'un package d'intégration React performant, avec des hooks comme useCell. Une petite lib en taille, mais pas mal de features: indexes, relationships, undo/redo…

Extras:

• How we migrated 541 components from Styled Components to Emotion with zero bugs: retour d'expérience de Storybook qui a migré d'une lib CSS-in-JS vers l'autre en utilisant ses propres outils (Chromatic) pour s'assurer qu'il n'y ait pas de régression visuelle
• Reading Source Code - Redux: Alex étudie le code de Redux et en profite pour discuter l'usage d'overloads TypeScript
• Performance Optimization for Three.js Web Animations: technique à connaitre pour lazy-loader des composants React couteux. Ici un background optionel en Three.js.
• How to write performant React code: rules, patterns, do’s and don'ts: quelques bons conseils et 4 règles présentées
• Gatsby 4.5: essaie aussi de typer getServerData 😏
• 🎥 How to Contribute to Open Source (Next.js) avec Lee Robinson
• Remix-GraphQL
• Next.js RFC: Change default JS/CSS output to target modern browsers

React-Native

React-Native-Owl: Visual Regression Testing for React-Native

Cette nouvelle solution propose de lancer nativement vos écrans React-Native, prendre des screenshots, et de les comparer visuellement avec les screenshots précédent stockés dans un dossier ./owl, en produisant un rapport. Tout cela s'intègre facilement avec Jest.

Super content de voir le visual regression testing se développer pour React-Native, ça manque vraiment! Voir aussi Storybook React-Native-Web qui peut permettre une intégration avec Chromatic, mais nécessite une conversion web.

Extras:

• React-Native 0.67 devrait être releasé cette semaine (changelog dispo)
• Build Flavor / scheme for React Native: permet d'installer la même app en plusieurs variantes sur le même device: pratique quand on doit gérer plusieurs envs.
• Trying to understand the internals of Reanimated 2: belle présentation, nombreux diagrammes
• expo-auto-navigation-webpack: travaux en cours d'Evan Bacon pour avoir une navigation React-Native basée sur le file-system (ancienne demo). Utilise Webpack cette fois.
• Expo Modules + JSI: Expo confirme la volonté de nous simplifier la vie pour créer des modules natifs performants en Swift et Kotlin, basé sur JSI. Ca arrivera d'abord sur iOS.
• Demo React-Native-Gesture-Handler buttons: démontre un avantage par rapport aux touchables de base de React-Native
• Drawing (with Skia) in React Native: création d'un progress indicator
• React-Native-Skia drawing app demo: dessiner avec ses doigts
• Who is going to Support your Next Mobile App Project? Hint: Not React Native or Flutter: vers qui se tourner quand on a un problème technique? 🤷♂️
• React Native Facebook Login: The Hard Way + The Expo Way

💸 Jobs

Sponsorise React Hebdo pour publier ton 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.

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)

Divers

Parcel CSS

Un nouveau parser, compiler et minifier CSS écrit en Rust, qui réutilise rust-cssparser de Firefox. Surperforme ses concurrents (même esbuild) en terme de vitesse et de taille du CSS émis. Ce nouvel outil est intégré au bundler Parcel, mais peut aussi être utilisé en standalone, en Rust ou JavaScript (Webpack loader?), et même Deno ou web (WASM).

Dioxus

Un nouveau framework en Rust fortement inspiré de React (hooks, VDOM, RSX…), fortement typé, performant, cross-platform (web, mobile, desktop, SSR). L'adoption semble facilitée pour les devs React/TypeScript.

J'ai regardé un peu le support cross-platform mais je n'ai pas encore très bien compris comment ça marche. On parle de performances natives mais en même temps ça a l'air de se baser sur Tauri qui si je ne me trompe pas repose sur des WebViews.

Extras:

• TypeScript Cheatsheets: 4 cheatsheets officielles: Type, Interface, Class et Control Flow Analysis
• 🎥 CSS Cascade layers: permet un meilleur controle sur la spécificité des règles CSS. Ca peut avoir un impact très intéressant: ne plus avoir besoin de se soucier de l'ordre d'insertion du CSS. Voir au Cascade Layers Explainer.
• 🧵 How can I optimize my frontend for the fastest page load times?
• Announcing The Astro Technology Company: levée de 7m$ pour le framework Astro (compatible React)
• Adding Vite to Your Existing Web App: utile pour migrer de Webpack vers Vite
• Make Beautiful Gradients: Josh Comeau explique comment designer de beaux gradients, et présente son outil Gradient Generator
• State Of JavaScript Survey: sondage ouvert
• What’s New In DevTools (Chrome 98)
• Publishing and consuming ECMAScript modules via packages
• Accelerating Svelte’s Development
• Safari 15 IndexedDB Leaks + Exploiting IndexedDB API information leaks in Safari 15
• Discontinued Long Term Support for AngularJS
• How we reduced our nodejs monorepo build time by 70%
• The Cost of Logging in 2022
• The State of WebAssembly – 2021 and 2022
• How we built a VS Code extension with Rust, WebAssembly, and TypeScript