React Hebdo #90: JSX, Tinybase, Dioxus, Owl, useWorkerizedReducer, Perf, TypeScript, CSS...
Discover more from This Week In React
React Hebdo #90: JSX, Tinybase, Dioxus, Owl, useWorkerizedReducer, Perf, TypeScript, CSS...
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é.
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).
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
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? 🤷♂️
💸 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
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).
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
Safari 15 IndexedDB Leaks + Exploiting IndexedDB API information leaks in Safari 15
How we built a VS Code extension with Rust, WebAssembly, and TypeScript
