Voir le profil

React Hebdo #110: Fresh, Hydrogen, Next.js, Remix, Storybook, useEffect, MJML, MDX, React-Native, ES2022...

React Hebdo #110: Fresh, Hydrogen, Next.js, Remix, Storybook, useEffect, MJML, MDX, React-Native, ES2022...
Par Sébastien Lorber • Numéro #110 • Consulter en ligne
Bonjour à tous!
Encore une semaine bien chargée en releases 🤪 Hydrogen 1.0, Fresh 1.0, Next.js 12.2, React-Native 0.69…
J'ai bien aimé l'article de Josh Comeau sur l'emailing basé sur MDX: c'est exactement le setup que je souhaite adopter pour cette newsletter 👌.
En parlant newsletter, je suis toujours en recherche d'une solution pour rendre le contenu plus “digeste”. Vous pensez quoi de l'idée d'une newsletter quotidienne? Cela signifie que chaque jour ouvré, vous recevriez à la place un email beaucoup plus court, avec des nouvelles très récentes.
Prévu ce mercredi: debrief de la conf App.js avec le Meetup React & React-Native Bordeaux - 29 Juin - 18h30 - en ligne.
🙏 Pour soutenir la newsletter: 

React
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.
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…
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.
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.
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.
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 😱.
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:
💸 Sponsors
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. 
💸 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 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
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:
Divers
Jamon
How some developers think “separation of concerns” works. https://t.co/Oa3oxwwF2R
Avez-vous aimé ce numéro ?
Sébastien Lorber

Chaque semaine, je t'envoie les nouvelles les plus pertinentes pour un(e) dev React et React-Native ouvert d'esprit.

Pour vous désabonner, cliquez ici.
Si on vous a fait suivre cette lettre d'information et que vous l'aimez, vous pouvez vous y abonner ici.
Propulsé par Revue
Lambda Scale - SIRET 82951115300027