📨 #126: React Perf, Progressive Enhancement, Remix, Storybook, React-Native, FlashList, Nitro, TC39...
Salut à tous !
C'est la fin du Black Friday, mais quelques offres sont encore valides.
Si votre entreprise recrute, j'en profite également pour faire une promo de -50% sur les offres de sponsoring job offer. N'hésitez pas à en parler à vos RH ou votre manager, ça m'aide beaucoup!
Comme on pouvait s'en douter avec Thanksgiving, c'est une semaine plutôt calme en nouvelles React.
Rappel: 1er meetup React-Native Paris le 6 Décembre (Slack).
💡 Consulter cette newsletter sur Twitter - format visuel 🎨
Pour me soutenir:
- 😘 Recommande la newsletter! Ça m'aide vraiment beaucoup!
- 💸 Sponsorise la newsletter ou sponsorise-moi
- 🧵 Retweet le dernier thread Twitter
- 📨 Réponds à cet email
- 💬 Rejoins le chat Discord
Ne manque pas le prochain email !
💸 Sponsor
FlyCode rend votre app React éditables, sans code - basé sur Git.
FlyCode (YC S22) rend les applications web React modifiables en quelques minutes afin que les équipes produit et UX puissent itérer et sortir des produits plus rapidement, sans avoir à attendre (ou consommer) le temps des développeurs.
FlyCode lit votre code React et trouve les textes, les images, les design tokens et les événements analytics, puis il permet aux non-codeurs de collaborer, de les modifier et de renvoyer une demande de modification (ils n'ont pas besoin d'accéder à GitHub !).
- Gain de temps de développement
- Pas d'intégration de code, ça lit simplement votre code !
- Basé sur GitHub, un robot analyse le code et crée les pull requests
- Utilisez votre propre stack et vos propres composants
- Gardez le contrôle de votre base de code
Vous pouvez commencer ici: flycode.com/developers
⚛️ React
Reflexion intéressante de Ruben, après avoir rencontré un CTO e-commerce qui a décidé d'abandonner React pour du Vanilla JS. Est-ce que React est réellement responsable des mauvaises perfs de son app? Est-ce qu'adopter une alternative est justifié? Est-ce que React va rester leader sur les 5 ou 10 prochaines années?
Improving React Interaction Times by 4x
L'app de Causal (cloud spreadsheet) présente des problèmes de performance. Ils nous proposent une analyse détaillée des problèmes et comment ils les ont résolu via le profiler Chrome. Certains problèmes liés à AG Grid (qu'ils ont patché) et d'autres de leur propre code principalement lié à la mémoisation. Ils ont aussi tenté d'utiliser des Web Workers, mais la sérialisation avait un cout trop élevé.
- 📜 Progressively enhance the useFetcher hook in Remix: petite astuce pour supporter les users avec/sans JS sur l'API useFetcher de Remix: il faut forcer un redirect pour les users sans JS. Dans le même genre, il est possible de gérer le progressive enhancement sur un upload de fichiers. Tout cela n'est sans doute pas indispensable pour beaucoup d'apps, mais ça reste bon à savoir que cela est possible en cas de besoin.
- 📜 Remix Deferred overview: une explication du fonctionnement de defer dans Remix, qui va permettre de "téléporter" une promesse du back au front. Pour ceux qui ont envie de comprendre le fonctionnement interne de Remix.
- 📜 How to update the state of a sibling component in React?: article court qui illustre bien le concept de "Lifting the state up".
- 📜 Minimal TypeScript Crash Course For React: pour débuter sur TypeScript et React.
- 📜 Data Structures In Frontend JavaScript In The Real World - With React Code Examples: pour se familiariser avec les data structures dans un context React
- 📜 ArConnect Migrates Its Chrome Extension to the Plasmo Framework: retour d'expérience sur l'usage de Plasmo: framework open-source React pour créer des extensions web.
- 📜 Storybook for full-stack developers: une bonne vue d'ensemble de tout ce que l'écosystème Storybook peut faire pour vous.
- 📜 Solid Final Form – Proof of Concept: Erik explique que sa lib Final Form (populaire il y a quelques années) est découplée de React et montre qu'il est possible de l'utiliser dans un contexte SolidJS.
- 📜 Ant Design 5.0 - Component-level CSS-in-JS: le design system React sort une nouvelle version majeure et explique comment ils ont optimisé leur runtime CSS-in-JS.
- 🎥 On the merits & limitations of React & single-page apps: débat de 2 heures entre Alex Russell et Theo Browne. Je n'ai pas eu le temps de regarder, mais cela devrait être très intéressant. Alex est bien connu pour ses critiques envers React et les SPA, et Theo devrait être un bon défenseur de l'écosystème React.
- 🎥 React Dev, You Need To Know @container!: bonne intro aux containers query, nouvelle feature CSS, présentée dans un context React en vanilla CSS + Tailwind. Il manque encore le support Firefox, mais il y a un polyfill.
- 🎥 RTK Query Basics: Query Endpoints, Data Flow and TypeScript: nouveau cours gratuit sur Egghead par Lenz un des créateurs RTK Query.
- 🧑💻 Remix PR - Add "jump to definition" support: les contributeurs tRPC portent leurs apprentissages sur Remix pour améliorer la DX.
- 📦 react-three-editor: un éditeur de scenes React-Three-Fiber est en cours de création.
- 📦 Gatsby 5.1
Ne manque pas le prochain email !
💸 Sponsor
Yuzu est la meilleure API de données financières pour les devs frontends
Yuzu est conçu pour faciliter l'intégration des données pour les développeurs frontend qui ont besoin de :
- Cours en direct des actions, crypto et forex
- Nouvelles du marché à la minute près
- Détails sur les ETF et les fonds communs de placement
Les développeurs adorent les API GraphQL, Websockets et SQL de Yuzu, car elles leur permettent de saisir n'importe quelle donnée avec souplesse et de se concentrer sur la création d'expériences pour l'utilisateur, plutôt que sur le scrapping, la normalisation et la maintenance des data sets.
Les données de qualité professionnelle de Yuzu sont utilisées par des sociétés de courtage, des plateformes analytiques et des applications d'investissement, qu'il s'agisse de startups émergentes ou de sociétés financières établies.
Le meilleur ? Tout le monde peut commencer gratuitement !
📱 React-Native
React Native Core Contributor Summit 2022
Une bonne partie des contributeurs React-Native se sont réunis début Septembre à l'occasion de la conférence React-Native EU. Ils ont participé à une série de workshops et nous font un compte rendu. Divers sujets abordés, comme la nouvelle architecture, le bundler Metro ou encore le workflow de release.
Shopify - Our Solution for Measuring React Native Rendering Times
Présentation du package react-native-performance qui permet de générer des rapports (JSON) de performance de type field/Real User Monitoring. Il s'intègre facilement avec React-Navigation. Vous pouvez envoyer ces rapports à un dashboard analytics de votre choix. Cela permet d'identifier un écran spécifique qui a des soucis de performance en production. Cela rappelle les métriques existantes coté web: Core Web Vitals, TTI, INP et les dashboards perf de Vercel/Netlify/Gatsby...
- 📜 Shopify - What We Learned from Open-Sourcing FlashList: retour d'expérience sur un lancement open-source réussi chez Shopify. Comme quoi, le marketing est une part importante du succès d'un projet open-source, et il ne faut pas le négliger. Voir aussi mon lancement de Docusaurus 2.0.
- 📜 How to build a React Native app 5x faster with Nitro: Nitro est un outil (payant, en preview) qui permet de réduire significativement les temps de build CI lorsque seul le code JS à changé.
- 📜 React Native in 2022 and Beyond
- 📜 How react-native became performant as native with the new architecture
- 🐦 setNativeProps is back on Fabric?
- 🎨 VisionCamera Frame Processor + Skia - Censor faces demo
- 📦 React-Native 0.71.0-rc.2
- 📦 React Native Windows 0.69.14
🧑💻Jobs
🧑💼 Masteos - Lead ReactJS - Hybride ou Remote - 75-90k€
Masteos réinvente l’expérience de l’investissement locatif, en proposant un parcours entièrement dématérialisé et un accompagnement de haut niveau aux particuliers qui souhaitent acheter un bien pour le louer.
🧑💼 Premier Octet - Développeurs(euses) React - Paris
Nous cherchons des développeurs(euses) JavaScript passionnés. Vous interviendrez en développement sur des projets variés et motivants, à la fois serveur et front (React, Nest, Next), et éventuellement mobile (React Native).
💡 Comment publier une offre d'emploi ?
🇫🇷 En français
💡Tu peux m'envoyer ton contenu: sebastien@thisweekinreact.com !
🔀 Autre
- Agenda for the 93rd meeting of Ecma TC39: un meeting est en cours! La nouvelle proposal Async Context m'intéresse particulièrement!
- Advanced web font optimization techniques: explique bien comment optimiser ses fonts: réduire la taille, éviter les layouts shifts et ajuster l'alignement vertical.
- Octoverse 2022 - The state of open source software
- A first look at SolidStart
- How to split JavaScript strings into sentences, words or graphemes with "Intl.Segmenter"
- How we lost our slick new npm package name (and then got it back)
- JavaScript from ES6 to ES12 in 2022
- Color Formats in CSS
- TypeScript 5.0 is coming...
- The Complete Guide to the Fastify Plugin System
- GitHub Copilot CLI
- Wasmer 3.0
- WebAssembly: TinyGo vs Rust vs AssemblyScript
- The large, small, and dynamic viewport units
- Node.js Architecture Pitfalls to Avoid
- Cloudflare - Server-side render full stack applications with Pages Functions
- Vercel - Edge Config: Ultra-low latency data at the edge
🤭 Fun
Ne manque pas le prochain email !