Voir le profil

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

React Hebdo #72: Scheduling Profiler, Next.js, TypeScript, React-Native, React-Navigation...
Par Sébastien Lorber • Numéro #72 • Consulter en ligne
Bonjour à tous!
Pendant l'été, c'est une édition sur 2!
Coté React, un nouveau scheduling profiler a été releasé et devrait aider à debugger React en concurrent mode. Next.js 11.1 sort avec pas mal d'améliorations de perf. Vercel.com utilise déjà React 18, et on peut s'attendre à des évolutions de ce coté sur les prochaines releases de Next.js. L
Des releases coté React-Native et React-Navigation. La nouvelle architecture Fabric ne devrait pas tarder à sortir (enfin) et on voit passer sur Twitter quelques démos qui montrent l'amélioration de perfs.
Pour la newsletter, je pense changer de format, et je suis curieux de savoir ce que vous en pensez: je pense inclure les gros titres React avec mes commentaires, et le reste serait une liste d'articles avec un extrait en anglais. C'est pas toujours évident de résumer un article en quelques lignes, et je souhaite alléger mon workflow dans le but de proposer une version en anglais.
Quelques liens en exemple qui auraient pu être dans cette édition, et sur lesquels je ne sais pas trop quoi commenter:
Bonne lecture et à bientôt!
🙏 Pour soutenir la newsletter 🙏: 
  • recommande la autour de toi! Dans ton entreprise ou école, sur Slack, Discord ou Linkedin… Cela a un vrai impact pour moi et me permet de continuer sur le long terme
  • réponds à cet email: un feedback ou remerciement est toujours bienvenu, et cela aide surtout la newsletter à ne pas être considérée comme un spam 😰
  • sponsorise ReactHebdo: offre d'emploi, produit…
  • rejoint le chat Discord React Hebdo

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…).
github.com  •  Partager
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.
nextjs.org  •  Partager
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.
joaoforja.com  •  Partager
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).
kyleshevlin.com  •  Partager
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.
betterprogramming.pub  •  Partager
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.
www.arahansen.com  •  Partager
  • 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!
hashnode.com  •  Partager
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!
reactnative.dev  •  Partager
React Native in H2 2021
React Native in H2 2021
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).
reactnative.dev  •  Partager
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
reactnavigation.org  •  Partager
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.
mmazzarolo.com  •  Partager
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.
atfzl.com  •  Partager
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).
dev.to  •  Partager
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