React Hebdo #72: Scheduling Profiler, Next.js, TypeScript, React-Native, React-Navigation...

React

Brian Vaught a releasé et présenté un nouveau profiler dans les DevTools React, qui devrait aider à comprendre ce qu'est en train de faire React et dans quel ordre. En particulier avec le concurrent mode et les feature pour React 18 (Suspense, startTransitions, offscreen, lazy, priority...).

Nouvelle release, avec un support expérimental des modules ES, une nouvelle fois beaucoup d'améliorations liées à la performance (intégration de SWC, sourcemaps, fetch de CMS, images...).

A noter qu'il y a aussi une nouvelle page de doc sur les tests en Next.js.

Met en avant 4 règles de décomposition d'un vieux papier CS et les applique à un exemple React concret. Je pense suivre ces règles (un peu formelles et abstraites) plus ou moins intuitivement. Note: je pense que par "composant", l'auteur veut dire "composant avec une API publique/exportée". Une décomposition interne un peu plus fine ne me semble pas être un problème pour éviter les composants trop gros.

Kyle met en avant une petite frustration que j'ai avec TypeScript (déjà évoqué plusieurs fois): après un destructuring (souvent utilisé en React sur les props ou résultats async...), TypeScript n'arrive pas à savoir quel est le bon type des objets dans un if. La version 4.4 améliore un peu (en cas de condition stockée en variable intermédiaire), mais pas encore sur le destructuring (issue).

Histoire intéressante qu'on est surement nombreux à avoir vécue: le merge d'un anti-pattern React ("context flags") qui conduit à une adoption plus globale du pattern.

Explique comment afficher un formulaire React dynamique (configuré par l'utilisateur via un schema JSON) avec le pattern Visitor. Les implémentations des fields sont fournies de l'extérieur et peuvent être adaptées au cas d'usage. Perso j'aime bien utiliser le context pour injecter les composants à utiliser.

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

ReactNative

Nouvelle version de React-Native, avec un upgrade du moteur optionnel Hermes (nouveau garbage collector Hades, Intl sur Android...). Des améliorations d'accessibilité également et quelques bumps de dépendances. Une release qualifiée d'un peu pauvre par certains. Perso je suis très content de voir Hermes continuer sa route. Encore quelques efforts et on est pas loin d'avoir une solution facile à adopter sur toutes les plateformes et sur Expo!

L'équipe React-Native compte communiquer plus sur ses avancées, et présente le travail prévu sur la 2ème partie de l'année. Rollout de la nouvelle architecture Fabric, utilisation du concurrent mode, poursuite des travaux sur le cross-platform (Windows/MacOS et Oculus/VR). Petit retour d'expérience sur l'usage de React-Native sur Messenger Deskop (qui utilisait Electron) avec des perfs améliorées. On risque d'en savoir plus sur tout ça pendant la conf React-Native EU. Note: l'app RNTester est dispo sous Fabric (benchmark).

Comme annoncé pendant la beta, cette release n'est pas une ré-écriture et devrait être plus simple à adopter, avec un nombre de breaking changes limités. Diverses améliorations, dont en particulier:

• Navigation native par défaut

• Amélioration du typage TypeScript

• Elements: lib de composants pour construire ses propres navigateurs

• Group: nouveau composant d'organisation

• Plugin de debugging Flipper

Le créateur de React-Native-Modal donne un retour d'expérience, et ses erreurs, lors de la maintenance de sa lib sur plusieurs années. Les enseignements peuvent bien sur s'appliquer à d'autres contexts que React-Native.

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

L'auteur explique pourquoi rendre ses tooltips PopperJS dans body pose un problème de performance, et propose de créer un conteneur DOM dédié (body > div.tooltips). Utile à savoir pour les apps React qui utilisent ce type de lib de positionnement (PopperJS, Tether...) et autres portals.

Post intéressant, qui donne une vision du futur ou WebAssembly nous donnerait la liberté de faire tourner n'importe quel programme n'importe ou. A noter que Next Image utilise WebAssembly pour réduire le temps d'installation (cf le blog post v11.1 du dessus).