React Hebdo #110: Fresh, Hydrogen, Next.js, Remix, Storybook, useEffect, MJML, MDX, React-Native, ES2022...
React
Fresh 1.0
Le framework Preact officiellement supporté par Deno passe en v1 et considéré comme production-ready. Fresh me fait penser à un mélange entre Remix et Astro: pas de JS par défault, progressive enhancement, multi-page app avec islands architecture. Il n'y a pas de build step: on déploie directement son app TypeScript/Deno dans le cloud Deno (Edge) en moins de 10 secondes.
How We Built Hydrogen
Hydrogen, le meta-framework React de Shopify pour créer des boutiques e-commerces, vient juste de passer en v1.0. Il a été l'un des premiers à miser sur les React Server Components. Cet article est un retour d'expérience intéressant sur la création du framework, détaillant divers choix effectués au cours du temps: React Server Components, Vite, Tailwind, preloading/waterfall, fragments GraphQL fragments...
Next.js 12.2
Dernière version de Next.js, qui adopte progressivement le Edge et les APIs web standardisées: middleware, mais aussi API routes et SSR. Il y a également des améliorations sur les images, et un système de plugins SWC en WebAssembly.
My Wonderful HTML Email Workflow
Josh Comeau explique comment il écrit ses emails avec MDX, puis utilise MJML, React et Next.js pour créer le rendu HTML final qui fonctionnera dans tous les clients mail et sera également dispo en version web.
Data Flow in Remix
Le modèle initial de React peut être résumé en ui = f(state). Le problème est que ce modèle ne prend pas en compte la synchronisation réseau (ie les appels API). Jim explique comment Remix reprend le modèle de React en incluant le réseau, réduisant ainsi le besoin de state management local.
You Might Not Need an Effect
Nouvelle page de doc écrite par Dan Abramov, tout juste mergée sur le site en beta. Les effets existent pour la synchronisation avec un système externe. De nombreux anti-patterns sont présentés avec des exemples concrets et même des challenges. Certaines suggestions peuvent surprendre, comme utiliser setState pendant le render 😱.
What is the recommended way to load data for React 18?
Dan Abramov explique en commentaire Reddit pourquoi le data fetching via useEffect n'est pas recommandé. Il n'est cependant pas nécessaire de ré-écrire votre application sur le champ si celle-ci ne présente pas de problème d'UX.
Extras:
📜 How to add a theme switcher to Storybook: un exemple concret d'utilisation de la toolbar Storybook. Astuce: afficher dark/light mode en même temps.
📜 React Query FAQs: Dominik de React-Query répond à 3 questions qui reviennent tout le temps.
📜 The React core team finally have opinions about CSS: bon résumé des tendances actuelles: usage croissant de no-runtime CSS-in-JS
📜 Cut build times with Gatsby Runner: nouveau plugin experimental Netlify pour réduire le temps de build Gatsby.
📈 Front-end frameworks popularity (React, Vue, Angular and Svelte)
📦 Verbum: editeur de texte basé sur React et Lexical (outil de Facebook pour remplacer Draft.js)
📦 Storybook Variants Addon: addon pratique: permet de visualiser toutes les variantes d'une story en même temps, basé sur les Controls.
📦 Create-T3-App: stack moderne pour démarrer un projet: Next.js, Prisma, TypeScript, tRPC, Tailwind...
📦 Gatsby 4.17: améliorations de performance
💸 Sponsors
💡 Comment sponsoriser React Hebdo
Axiom - Zero-Config Observability for Vercel
Axiom vous permet de surveiller la santé et la performance de vos déploiements Vercel en ingérant toutes vos données de requête, de fonction et Core Web Vitals.
Utilisez le tableau de bord d'Axiom pour avoir une vue d'ensemble de tous vos logs et stats Vercel, explorez des projets et des déploiements spécifiques et obtenez un aperçu de la performance des fonctions en un seul clic.
PS: J'utilise Axiom pour surveiller les logs de ma newsletter 😉
💸 Jobs
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.
Nabla - Front-end engineer React senior - Paris - 55-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.
React-Native
Announcing React Native 0.69
Premiere version de React-Native à supporter React 18. Pour utiliser les nouvelles features de Concurrent React, il faudra d'abord migrer sur la nouvelle architecture. Le mode de distribution Hermes a également changé: chaque version de React-Native sera associée à une version Hermes garantie compatible.
Extras:
📦 react-native-zephyr: Formidable Labs propose une nouvelle solution de styling inspirée de TailwindCSS. Est-ce qu'il y a un support cross-platform?
📦 react-native-app-clip: Expo config plugin pour créer un iOS App Clip qui permet de tester une app iOS sans avoir à l'installer (demo).
Divers
ES2022 Features: Ecma International a validé la spec ES2022. Cet article donne la liste des features:
.at(), Error Cause, top-level await...Defensive CSS: liste d'astuces pour rendre votre CSS plus robuste.
Style Queries: la spec CSS Container Queries n'est pas lié qu'au layout.
StackOverflow Developer Survey 2022: React toujours très utilisé et apprécié. Svelte et Phoenix gagnent en popularité.
Histoire: A new way to write stories: challenger à Storybook qui vient de l'écosystème Vue.
FnApi: projet du créateur de swc pour réduire le boilerplate des appels API.
