React Hebdo #74: 2000 abonnés! React 18, Gatsby 4, Context, React-Native, cross-platform, flashbacks, shadows, Corepack, webperf...

React

Dan Abramov nous partage un résumé détaillé de l'avancement de React 18 et autres features en développement. On voit que ça avance, et certaines APIs ont l'air de se stabiliser, mais il reste encore pas mal de travail. React 18 ne s'adressent pas qu'aux apps de type Facebook. Dan nous invite à ne pas extrapoler la vision d'ensemble qu'ils n'ont pas encore bien communiqué, et d'éviter de créer du contenu sur des APIs non stabilisées.

Dustin Schau présente les nouvelles features qui arrivent dans Gatsby 4. Server-Side Rendering et Deferred Static Generation devraient aider à la scalabilité des sites statiques, et redonner de l'intérêt pour le framework face à Next.js.

Ces features semblent tout de même assez couplées à l'offre Gatsby Cloud, mais je ne serai pas surpris de voir Netlify les supporter à terme (ça ressemble aux On-Demand Builders). Entre Vercel, Netlify et Gatsby, la concurrence est rude sur l'offre Cloud Jamstack.

Un article qui présente des techniques à connaitre pour bien utiliser les contexts React: encapsulation derrière provider et hooks sur mesure, mémoisation de la valeur, et séparation en 2 contexts.

Ces patterns avancés ne sont pas forcément très intuitifs, et je ne les ai pas souvent vus en application dans les codebases que j'ai audité, pourtant ils peuvent avoir un impact significatif sur la lisibilité du code ou ses performances.

Note: la combinaison de Context Selectors et Records & Tuples pourraient rendre ces patterns moins utiles.

Omar propose de créer son propre système de routing en fonction du file-system, en s'inspirant de l'API de Next.js.

Il utilise le bundler Vite via l'API import.meta.globEager(), mais ça doit aussi être possible avec Webpack via require.context().

Josh Comeau nous propose un super article sur le design d'ombres cohérentes en CSS (box-shadow et drop-shadow), en s'inspirant de la réalité, et utilisant des techniques comme le shadow layering que je ne connaissais pas du tout. Il propose une implémentation React en utilisant Styled-Components et CSS vars.

Petit flashback avec Swyx et un extrait d'un vieux podcast de Pete Hunt (Instagram), qui a fortement contribué au succès de React à l'époque.

React n'a pas fait l'unanimité lors de son introduction (via un tutoriel), et n'a commencé à convaincre les amateurs de programmation fonctionnelle qu'en prenant le temps d'expliquer les détails d'implémentations.

A cette époque, le post de David Nolen The Future of JavaScript MVC Frameworks a eu un impact fondamental. C'est cet article qui m'a convaincu, étant ancien dev Scala.

Extras:

• 🎧 Vercel and Next.js: Guillermo Rauch partage des insights intéressants. J'ai particulièrement aimé le passage sur le SEO, Core Web Vitals, AMP...

• Conférence Next.js: le 26 Octobre, il risque d'y avoir de belles annonces!

• 🧵 10 state management lessons

• React Readability Analysis Of Implementing Custom Hooks

• TypeScript + React: Children types are broken

Hashnode: plate-forme de blogs gratuite (sponsor)

• Hashnode est la plate-forme idéale pour les développeurs qui souhaitent se connecter à la communauté tout en conservant la propriété de leur contenu et de leur domaine.

• Hashnode facilite l'usage d'un nom de domaine personnalisé: le référencement du domaine que vous créez au fil du temps vous appartient, et non à la plate-forme.

• Au-delà des aspects techniques, Hashnode dispose d'une audience massive et en croisssante pour votre contenu, dès le premier jour.

• Vous possédez ce que vous créez sans avoir à tout construire à partir de zéro, et Hashnode vous connecte avec vos futurs fans, qui attendent avec impatience de vous découvrir.

• En bonus: support de Markdown, coloration syntaxique, sauvegardes automatiques GitHub, et aucune publicité ou paywall, à jamais.

• Démarrez votre blog et rejoignez la communauté mondiale des développeurs sur Hashnode dès aujourd'hui!

React-Native

Matteo a récemment publié un boilerplate React-Native cross-platform qui vise iOS, Android, Windows, macOS, web, Electron, extension Chrome...

Il partage quelques idées originales, comme le fait de créer un package npm par plateforme. Cela permet en particulier de pouvoir utiliser une version React-Native différente pour que chacune d'elle. MacOS étant à la traine (0.63), on à pas forcément envie de rester bloquer sur une vieille version partout ailleurs.

Une série de posts intéressante (la moitié est déjà publiée), pour ceux qui veulent apprendre à configurer un monorepo React-Native (Metro, Yarn nohoist, Webpack, Babel...).

Un autre flashback de Swyx avec cet extrait de podcast (cette fois très récent), avec Christopher Chedeau qui retrace les débuts de React-Native.

Le projet est né d'un hackathon Facebook de 3 jours pour répondre à un besoin de vélocité sur les apps mobiles natives (les technos web n'étant pas assez bonnes). React-iOS est né comme ça, mais c'était pas gagné et l'histoire à bien failli s'arrêter la! C'est fou comme l'investissement d'une seule personne peut changer la donne.

Pour rester dans le cross-platform, Bartosz (Callstack) donnes quelques raisons d'utiliser React-Native Windows par rapport à d'autres possibilité comme Electron.

2 autres posts suivent sur le même sujet:

• How to Build a Desktop App with React Native for Windows

• Business Benefits of React Native Windows

Extras:

• Twitter's div Soup and Uglyfied CSS, Explained: donne quelques détails sur React-Native-Web, le framework atomic CSS-in-JS utilisé par Twitter.

• React-Native-Screens 3.7.0: nouvel event "onTransitionProgress" sur la stack native.

• Epic Games (Fortnite) VS Apple: si j'ai bien compris, Apple sera obligé d'accepter des moyens alternatifs de paiement aux In-App Purchases (30% de com...).

• Flutter vs React Native, par Stream qui propose des SDK pour les 2 plateformes.

Jobs

Shotgun: Dev Fullstack Senior - Remote - 60-75k€ (+BSPCE)

Shotgun c'est une billetterie et plateforme de streaming pour des évènements electro/techno 🎶. On a déjà les plus gros évènements en France, maintenant on s'agrandit à l'international (US/Brésil/Europe) 🌎. L'équipe est composée de 13 personnes et on fait déjà plusieurs millions d'euros de volume par mois. Malgré le Covid, on vient de faire le mois le plus rentable de notre histoire.

• 🌴 Remote OK (tu peux aussi travailler depuis nos bureaux de Marseille ou Paris)

• 📈 Challenge B2C : aider les gens à sortir et s'amuser (Recommandations / Social / UX aux petits oignons)

• 📈 Challenge B2B : soutenir les organisateurs dans la création et la promotion de leur event (CRM / Business Intelligence / Marketing / Finance)

• 🤖 Côté tech : ReactNative, React, Typescript, Apollo, GraphQL, NextJS, PgSQL, Vercel (serverless)

PS: j'ai travaillé en freelance pour Shotgun, l'environnement technique est plutôt cool et les gens sympas ☺️.

Une offre ci-dessous t'intéresse? Contacte moi à cet email!

Ask Mona: dev React confirmé - CDI Paris 45-50k

Ponicode: dev JS/React - CDI Paris 40-65k

Shift: dev React senior - CDI Paris 50-60k

Alkemics: dev Python/React - CDI Paris/remote

Choose: dev React-Native - CDI Paris 50-60k

Bloom: dev fullstack NodeJS/React senior - CDI Neuilly 60-70k

Splio: dev fullstack React/NodeJS senior - CDI Paris 60-70k

F4: dev NodeJS - CDI Paris 40-50k

Aria: dev NodeJS - CDI Paris - 45-60k

Divers

Corepack arrive en expérimental avec Node.js v16.9.0, et simplifie l'intégration avec Yarn et pnpm, alternatives populaires à npm (qui pour rappel est une entreprise à but lucratif). Un nouveau champ est disponible dans package.json pour dire quel package manager utiliser (exemple: "packageManager": "Yarn@1.22.1").

Cette version de Node.js supporte aussi Error Cause (mais pas encore dans les logs des erreurs il me semble).

Ben de Caliber (outil dédié à la perf web) nous propose un post plein de bons conseils, dont beaucoup s'appliquent dans un context React.

D'ailleurs, je découvre react-live-chat-loader, qui permet d'intégrer de manière performante un widget de chat!

Extras:

• Replay.io: un time-travel debugger nouvelle génération, et générique (pas comme Redux DevTools). Produit payant, free plan individuel. Acclamé par de nombreuses personnes (dont Dan Abramov) comme étant vraiment révolutionnaire. Je n'ai pas encore testé.

• Buildspace: un cours populaire pour apprendre à créer un projet crypto, Ethereum, Solidity, web3... je m'y intéresse de plus en plus, mais j'ai déjà un cours WebGL à suivre avant :D

• Web Vitals Patterns: pour implémenter certains patterns UX en gardant un bon score Core Web Vitals.

• Petite Vue: nouveau projet d'Evan You, semble être l'équivalent de Preact et propose une version allégée de Vue.

• TypeScript: In defense of any

• Core Web Vitals is a Measurable Ranking Factor

• Cloudflare Early Hints

• TC39 Pipeline Operator - Hack vs F#

• Bundling non-JavaScript resources