React Hebdo #70: ComboBox, Remotion, Gatsby, Suspense, GraphQL, Fabric...

React

Le composant ComboBox fait son apparition dans React-Spectrum, le design system de Adobe. Ils font un retour d'expérience et expliquent que ça n'a pas été si simple à implémenter. En particulier, l'usage de portals React demandent quelques précautions pour l'accessibilité. Je trouve que ce genre de composant est le plus difficile à implémenter dans un design system. Entre l'accessibilité, la navigation clavier, les animations et le design d'une API flexible...

Remotion permet de créer des vidéos en React, et c'est l'outil que j'utilise pour ThreadMotion. La 2.2 sort quelques nouveautés. En particulier un support de Three.js, un composant Freeze et diverses améliorations sur le player.

Des features expérimentales pour améliorer les perfs: Parallel Query Running et Webpack Persistent Caching.

Alex explique quand un composant React re-render et comment l'usage de memo permet d'optimiser son app. Rien de nouveau, mais l'explication avec des gifs plutôt bien faite et compréhensible pour les débutants.

Un autre article bien expliqué d'Alex, très visuel, et un peu plus technique cette fois. Montre que l'optimisation du render sur les listes React n'est pas si simple. Il faut d'abord stabiliser le "onChange" au lieu d'utiliser une arrow function. Autre problème (pas mentionné dans l'article) que je n'ai toujours pas résolu: comment faire en sorte que l'enfant ne ré-injecte pas l'id dans le parent xD

Swizec Teller explique qu'avec Suspense (qui viendra avec React 18.x), le chargement de données asynchrone est natif. Il compare avec React-Query et met en évidence la simplicité du code avec Suspense: on peut se concentrer sur le "happy-usecase" et directement afficher les données, comme si elles n'étaient pas asynchrones.

Une architecture d'app React simple, scalable, et dont les choix techniques sont documentés. Pas eu le temps d'étudier plus que ça, curieux de savoir ce que vous en pensez.

• 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!

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

ReactNative

L'app Facebook a migré tous ses (1000+) écrans React-Native vers Fabric, la nouvelle architecture, qui devrait donc pas tarder (enfin! mais après RN 0.65 - la RC3 vient de sortir). En pratique, il est déjà possible d'utiliser certaines parties dans vos projets (cf les travaux de Marc Rousavy avec les Frame Processors et ce tweet).

Un article qui met en avant les différentes, utile pour ceux qui ont envie de tester React-Native pour la 1ère fois. N'attendez pas, lancez-vous avec Expo!

Divers

Airbnb a expliqué le fonctionnement de sa "Ghost Platform". Le principe est d'envoyer une représentation propriétaire de votre UI (au lieu du JSON) aux différents clients qui sont capable d'en faire un rendu. C'est un peu comme si votre serveur vous retournait du VDOM React propriétaire (et me fait aussi penser aux server components). C'est pas la première fois que je vois ça sur des très grosses apps (cf Facebook Messenger) qui ont plein d'écrans dans plein de variantes: avoir plein de composants React dans son app mobile n'est pas scalable et il vaut mieux shipper un moteur qui donne la main au backend d'envoyer les variantes en payload. Au final, avoir un backend qui retourne les data json, ou du html, il peut y avoir un juste milieu ;)

Encore des nouvelles du TC39 avec quelques petites updates sur les proposals sur Array, ArrayBuffer, Class, Intl. A noter également array.groupBy() qui a été extrait dans une nouvelle proposal.

Blog post qui résume les dernières nouveautés de Firefox. Particulièrement intéressé par la proposal Error Cause dont j'ai déjà parlé plusieurs fois, qui bénéficie d'une première implémentation de "bout en bout", avec les DevTools qui loggent correctement la chaine de cause d'une erreur.

TheGuild présente son nouveau projet: Envelop un est un système de plugins pour étendre GraphQL. Ils comparent ce nouvel outil à Babel, car il permet l'usage de features GraphQL avant qu'elles ne soient officiellement standardisées (@defer, @live...). A priori, ce système devrait pouvoir être adopté par les différents serveurs GraphQL (dont Apollo Server qui vient de sortir en v3), ce qui rendrait les plugins portable.