React Hebdo 113
React source code, SOLID, Remix, Docusaurus, FP, Remotion, Rapier, Hermes, RN at Airbnb...
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).
🐦 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
💸 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.
📦 Vision Camera 2.14: possibilité de chainer les frame processors
📦 expo vscode 0.8: JSON config autocomplete 👍
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:
