React Hebdo #113: React source code, SOLID, Remix, Docusaurus, FP, Remotion, Rapier, Hermes, RN at Airbnb...

⚠️ IMPORTANT: ma newsletter LinkedIn est arretée

🔗Abonnez-vous sur ReactHebdo.fr 🇫🇷

------------------------------------------------------------------------------

Bonjour à tous!

La newsletter passe maintenant en mode été: 1 édition sur 2.

On va lancer Docusaurus 2.0 très prochainement (2.0-rc.1 publiée). Je vais vous envoyer une édition spéciale pour l'occasion. Ca sera l'occasion de mieux vous présenter ce projet sur lequel je travaille depuis 2 ans avec Facebook. Docusaurus n'est pas le framework React le plus connu, mais il est très utilisé: 2 fois plus que Remix ou Redwood, et rattrape progressivement Gatsby. J'espère que je peux compter sur vous pour le lancement sur ProductHunt 😄.

Cette semaine, j'ai envie de mettre en avant tRPC pour faire des appels distant (client/server ou même server/server). Solution typée de bout en bout, agile, et beaucoup plus simple à utiliser que GraphQL. Il n'y a pas d'événement particulier lié à la lib, à part un gain significatif en popularité grâce à Théo et son “framework” create-t3-app.

🙏 Pour soutenir la newsletter: 

• 😍 Recommande la newsletter! Ca m'aide vraiment!
• 💸 Sponsorise React Hebdo
• 🧵 Retweet le dernier thread Twitter!
• 📨 Réponds à cet email: merci pour les retours 😘
• 💬 Rejoins le chat Discord
• 👥 Suis la page LinkedIn

React

Reading Source Code: React

Alex lis le code source React et commente plusieurs parties, en prenant comme point d'entrée le mount d'une application React. Des détails intéressants sur l'usage de prototypes, du JSX, et de l'intéraction du reconcilier (agnostique) avec le renderer DOM.

Can We All Just Admit React Hooks Were a Bad Idea?

Amy avance que les hooks React ne respectent pas les principes d'architecture SOLID. Je ne suis pas vraiment d'accord, mais reconnais que la majorité des exemples qu'on trouve sur internet sont simplifiés et ne mettent pas en avant une bonne architecture.

Applying SOLID principles in React

Presque une réponse à l'article ci-dessus, même si l'application de SOLID y est ici traitée plus largement (composants + hooks). Note: il ne faut pas hésiter à utiliser le context React pour l'injection de dépendances.

Extras:

• 📜 Avoid anonymous components with displayName: parfois React n'arrive pas a inférer un bon nom pour vos composants, ce qui complique l'usage des devtools (Context, memo, forwardRef, HOC)
• 📜 Why Remix is not a React framework but a full stack web framework: une bonne vision d'ensemble des différences de Remix avec les autres frameworks. Remix est full-stack et framework-agnostic.
• 📜 Functional programming is finally going mainstream: GitHub met en avant la popularisation de la programmation fonctionnelle, en partie grace à React.
• 📜 Why Docusaurus is a powerful documentation framework: 1Password explique pourquoi Docusaurus est une bonne solution pour l'implémentation de leur doc.
• 📜 Store data in a cookie with sessions and Remix: création d'un compteur de visites
• 📖 Remix Deferred: nouvelle API en cours de développement qui donne un controle fin sur les tradeoffs de chargement de données (optimise TTFB vs CLS).
• 📖 Next.js accessibility doc improvements
• 🐦 New Preact VDOM state model
• 🐦 Remix + React 18 startTransition + time-sliced hydration: Ryan Florence partage une astuce controversée. Lance des discussions intéressantes sur l'hydratation avec Ryan Carniato et Andrew Clark.
• 📦 pmndrs/react-three-rapier: intégration react-three-fiber avec Rapier (physics engine)
• 📦 Remotion 3.1: plein de nouveautés! Gifs, Tailwind CSS, springs with duration, OffthreadVideo…
• 📦 Remix 1.6.5: inférence de type loader + useLoaderData 👌
• 📦 Framer Motion 6.5: scroll animations
• 📦 Zustand 4.0.0-rc.2
• 📦 Redwood 2.1

💸 Sponsors

💡 Comment sponsoriser React Hebdo 

CSS Weekly Newsletter

Stay up-to-date with the latest trends in CSS by getting only relevant and valuable articles and tutorials directly into your inbox. Join more than 30,000 developers and sign up now.

Axiom - Zero-Config Observability for Vercel

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. 

PS: J'utilise Axiom pour surveiller les logs de ma newsletter 😉

💸 Jobs

Pricemoov - Senior Software Engineer React.js - 55-80k€

Pricemoov est une solution SaaS de pricing dont la mission est de permettre à ses clients d'optimiser leur marge et leurs revenus grâce à une meilleure gestion de leurs stratégies de prix.

Notre siège est à Paris et nous avons ouvert notre bureau à New York en novembre 2021. Fin 2022, on accélère notre internationalisation avec l'ouverture de Singapour. Nous serons plus de 100 collaborateurs d'ici là !

En rejoignant l'équipe Engineering de Pricemoov, vous participerez notamment à la conception d'une architecture front-end intelligente afin de permettre au produit de scaler à l'international. 

Notre ambition technique est l'amélioration continue en visant de hauts standards en terme de qualité de code. Vous y participerez en progressant sur le chemin du software craftsmanship.

Paris 10ème, remote friendly, 55K - 80K+ selon la séniorité technique.

React-Native

Hermes as the Default

Le moteur JS Hermes est une alternative à JSC/V8. Il peut aider votre app à démarrer plus vite via une pré-compilation en bytecode. Avec React-Native 0.70 (release candidate), Hermes est activé par défaut. Michael partage divers benchmarks à partir de l'app open-source Mattermost. Le mode de distribution Hermes à changé pour éviter les problèmes d'incompatibilité ABI. Les APIs Intl manquantes ont été ajoutées sur iOS. Features à venir: support BigInt et WeakRef.

What working at Airbnb during its React Native era taught me about web3

Devin reviens sur l'histoire de React-Native chez Airbnb et sur la décision très nuancée d'abandonner la techno. Il fait le parallèle intéressant avec le web3.

Extras:

• 📜 Ionic - Announcing Portals for React Native: permet une intégration d'expériences WebView Ionic dans une app React-Native. Produit payant.

🎙️ React-Native-Radio #242 - Inspecting React Native 0.69

🎙️ The React Native Show #14 - React Native Paper v.5

• 📦 Vision Camera 2.14: possibilité de chainer les frame processors
• 📦 expo vscode 0.8: JSON config autocomplete 👍
• 📦 expo-music-picker
• 📦 react-native-iconic
• 🧑 🎨 React-Native-Skia + Expo web demo
• 🧑 🎨 Instagram iOS page transitions demo

Divers

Vite 3

Cet outil est très vite devenu un référence dans l'écosystème frontend. Aujourd'hui, c'est une très bonne alternative à Create-React-App, avec une DX beaucoup plus rapide, et certains metaframeworks React se basent maintenant dessus (Storybook, Hydrogen…). La v3 arrive avec un paquet de changements, une nouvelle doc, des starters pour divers frameworks y compris React, des améliorations sur les imports glob, une nouvelle doc… Voir aussi la conférence ViteConf en Octobre.

Extras:

• The Cost of Consistency in UI Frameworks
• Node.js 18.6 - Custom ESM loaders: Who, what, when, where, why, how
• A New Pattern For The Jamstack: Segmented Rendering
• Event-Driven JavaScript Development
• Chrome Dev Insider: The CSS and UI edition
• Safari Technology Preview 149
• NestJS v9
• Parcel CSS 1.12