React Hebdo #108: App.js, Fresh, Reassure, Million, Hydrogen, Gatsby, Treasured, WebComponents, React-Native-Web, Zeego, TC39...
React
Fresh - The next-gen web framework.
Luca Casonato (Deno core team) dévoile un nouveau meta-framework pour Deno basé sur Preact. Quelques points communs avec Next.js et Remix (FS routing, progressive enhancement). Islands architecture pour l'hydratation. Pas de build step: compile à la volée. A tester!
Reassure
Un nouvel outil de test de performance pour React, en beta privée, qui devrait être open-sourcé la semaine prochaine. Mesure et compte les renders d'un scénario donné, puis génère un rapport (possible de publier dans une PR). Annoncé à App.js, l'outil supporte pour l'instant React-Native: le support web arrivera plus tard.
Million.js
Million est une solution de Virtual DOM supportée par Vercel, qui propose d'utiliser un compilateur pour améliorer les performances et réduire la taille (inspiré de Svelte). Le package d'intégration Million + React vient de sortir. Tout cela semble prometteur, mais pas encore prêt pour la production.
Gatsby Launch Week
Un condensé des dernières nouveautés Gatsby, avec des blog posts détaillés sur chaque sujet. Quelques exemples:
Script Component
GraphQL TypeGeneration
Image CDN GA
Incremental Deploys for All Builds
Shopify - Best-in-Class DX with Vite and Hydrogen
Retour d'expérience intéressant sur l'usage de Vite dans le meta-framework Shopify Hydrogen. Il y a des interêts en terme de DX via l'usage de modules ES en dev, mais aussi pour le SSR et l'intégration des React Server Components grace au système de plugins.
Extras:
📜 How to useMemo and useCallback: you can remove most of them: reflexion intéressante sur l'usage des hooks de memoization
📜 Stress Testing Concurrent Features in React 18: A Case Study of startTransition & 3D Rendering: belle demo qui montre les avantages de Concurrent React, basée sur React-Three-Fiber
📜 Unit Testing React without Jest: montre comment remplacer Jest par le test runner de Node.js 18. C'est un bon début, mais ne couvre pas tout: mocking, snapshots...
📜 Building Interoperable Web Components That Even Work With React: le support officiel des Web Components est toujours attendu dans React. Solution possible: créer un wrapper.
📜 Giving Jest-Preview a Spin: retour d'expérience sur ce nouvel outil pratique
📜 First look at Joy UI: nouveau design-system, par MUI
📦 styleQ: pour concaténer les className de manière optimale (avec un système de memoisation), à destination des compilers CSS. Proposée par Nicolas Gallagher, lib utilisée dans React-Native-Web 0.18.
📦 Treasured: un SDK pour convertir des scenes 3D Unity en composants React-Three-Fiber
📦 Relay 14
🐦 The Joy Of React: le cours React à venir de Josh Comeau.
💸 Jobs
💡 Comment sponsoriser React Hebdo
Pelico - Front-End Engineer - Paris/Remote - 45-70k€
Pelico développe une plateforme qui agit comme un assistant intelligent et aide les industries complexes, à optimiser la gestion quotidienne de leurs flux opérationnels. Par leurs expertises, les Pelicans collaborent pour réduire le fossé qui s’est creusé entre la technologie et l’industrie.
Tu as de l’expérience sur Single Page Applications avec React / Vue / Angular; tu utilises GraphQL, Redux ou Typescript, tu as expérimenté le Design System (Material UI, Ant Design) et enfin tu as de l’expertise en CSS : rejoint l’équipe Front End!
Salaire selon profile + BSPCE + Bureau à deux pas de Beaubourg + Mutuelle Alan Blue et d'autres avantages bientôt en place.
iFeelSmart - Dev React Native - Paris/Remote - 50-65k€
iFeelSmart, est une nouvelle génération de UI TV. Nous sommes une entreprise à taille humaine avec des millions d’utilisateurs. Nous recherchons des devs React Native ayant une expérience significative et une envie de challenge technique! Voici le décor :
Une équipe Front en ReactNative + équipe Backends multi clients unifiés via un proxy en Go
Une API en JS et un Store Redux, avec du RxJS communs à tous nos devices mais aussi du Vanilla, du TypeScript, du Reanimated 2, et des tests Jest accompagnés de tests end-to-end via Appium
Nombreux challenges : focus via contrôle vocal et télécommande, performances à atteindre en ReactNative sur hardwares spécifiques, future intégration Apple TV...
Une équipe cool ET sérieuse à la fois, venez donc voir :) !
Paris 9 - Terrasse - Hybride Remote possible - 50 à 65K
Maki: Développeur Frontend / Fullstack Senior - 65k / 80k
La mission de Maki est de permettre à chaque entreprise de recruter des talents sur mesure. Maki propose des tests d'évaluation standardisés avant l'embauche pour identifier les meilleurs candidats et accélérer les décisions des entreprises, sans préjugés.
Si comme nous vous aimez résoudre des problèmes complexes de façon simple, à l'aide d'outils modernes (ping TypeScript, React-Query, MUI, Playwright, …), afin de proposer des expériences fluides et efficaces, le tout dans une ambiance décontractée (si si), alors venez discuter avec nous :)
Paris 9ème - full remote possible - 65k / 80k en fonction de l’expérience + BSPCE
React-Native
App.js - Mon résumé sur Twitter
Difficile de tout résumer de manière exhaustive. Avec Expo, la DX mobile continue de s'améliorer. Il y a un véritable engouement pour le support du web! De nouveaux outils dispo pour le monitoring de la performance. Divers liens utiles:
🧵Expo Dev Tools Keynote: EAS Metadata, versioned CLI, config plugins, universal Metro, lazy bundling...
🧵 Sketches: David a créé un sketch pour chaque talk de la conf, donne une bonne vision d'ensemble.
🐦 Expo Sweet Modules: nouvelle API pour faciliter la création de modules natifs Swift/Kotlin sortira en Release Candidate cette semaine.
🐦 Shopify FlashList: alternative performante à FlatList qui sortira prochainement.
📦 Zeego: composant menu cross-platform, dernière lib de Fernando Rojo.
📦 Universal Design System: Showtime a open-sourcé son frontend et son design-systeme cross-platform.
React Native for Web 0.18
Support React 18, introduction du nouveau runtime styleQ, retire le support des anciens navigateurs, diverse améliorations. Nicolas Gallagher questionne l'utilité de son projet 🤔.
Extras:
Divers
Updates from the 90th TC39 meeting
Divers progression de proposals. Je suis surtout content pour "Symbols as WeakMap keys" en stage-3. C'est une étape importante pour qu'on puisse un jour utiliser Records & Tuples avec React 🤗.
Extras:
