📨 #118: Gatsby, Beta Docs, Reactivity, Lazy Maps, Ezno, Whyframe, Reassure, Node.js, TypeScript, WASM...
Salut à tous !
Bonne nouvelle: l'arrivée prochaine de la nouvelle doc React en beta! Un lien sur l'ancienne doc invite à consulter le nouveau site. Gatsby v5 sort alpha.
La tendance du moment: apporter la réactivité à React.
Quelques contenus React-Native sympa également. On surveille de près l'arrivée de Expo Router, WishList et du support web dans Reassure.
TypeScript fête ses 10 ans. Un mode --watch
arrive dans Node.js. Du contenu intéressant sur WebAssembly.
La conférence React Brussels a lieu dans à peine 2 semaine, le 14 Octobre 2022. Il ne reste que quelques places disponibles, mais il est aussi possible d'y assister en ligne.
💡 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
Avez-vous déjà essayé Storyblok ? C'est le CMS headless avec un éditeur visuel conçu pour les développeurs et les spécialistes du marketing !
Utilisez Storyblok React SDK pour construire rapidement des composants réutilisables et récupérer le contenu pour créer vos applications, sites Web ou eCommerces React, Next.js, Remix, ou même React-Native.
Consultez le Hub Technologique et découvrez-le vous-même !
⚛️ React
La v5 de Gatsby est sortie en alpha avec comme principales nouveautés:
- le support de partial hydration basé sur les React Server Components et une directive
"client export"
déclarée en haut des composants client - la Gatsby Slices API, qui permet d'améliorer significativement les temps de build lorsqu'un composant partagé (layout/navbar/footer) doit être re-rendu
Making React fast by default and truly reactive
Article interactif qui illustre les problèmes de re-render dans React qui n'est pas optimisé par défaut. Montre comment la librairie Legend-State, basée sur des observables, permet d'apporter la réactivité à React (un peu comme SolidJS). Le code est alors optimisé par défaut et permet d'éviter des re-renders inutiles.
Un nouveau type-checking compiler expérimental pour JavaScript, compatible avec les annotations TypeScript et le JSX de React. Se base sur le "dependent typing" pour faire une analyse statique plus poussée. Le but semble être de pouvoir compiler une app qui ressemble à React dans une forme réactive, et se passer de VDOM. Lecture assez technique.
Présente une technique utile à connaitre pour favoriser le code-splitting lorsque vous faites du rendu conditionnel. A utiliser en particulier sur de larges enums/union-types, comme les composants type <Icon name="my-icon-name"/>
.
Une technologie qui permet d'isoler le rendu de composants frontend dans une iframe, qui supporte maintenant Webpack, Next.js et Docusaurus. Cela semble pratique pour les sites de documentation de composants, pour que le CSS global du site n'affecte pas le rendu du composant présenté.
- 📖 Beta React docs: useEffect + useId + "All the commonly used APIs documented"
- 📜 How to use Serverless Functions with SSR: explique comment partager correctement une fonction entre la partie server/client dans Gatsby
- 📜 Fastest Frontend Tooling in 2022: Christoph Nakazawa justifie les choix derrière son starter minimaliste vite-ts-react-tailwind-template
- 📜 Improving the accessibility of our Next.js site
- 📜 The Orton Effect - dreamy photo effect in CSS and React
- 📜 Mark Erikson - Guide to React Rendering Behavior - updated for React 18
- 🚧 no-nested-components ESLint rule: une nouvelle règle pourrait arriver prochainement et éviter de déclarer des composants à la volée (mauvaise pratique).
- 🧵 Dan Abramov - "skipping re-renders (eg with memo) is a performance optimization only"
- 🧵 Andrew Clark - "We've looked very seriously at a WASM rewrite of React"
- React Spectrum - React Aria - October 4 releases
- 📦 Redwood v3 + What's new in Redwood v3?
- 📦 Supabase Pre-built React Auth UI
Ne manque pas le prochain email !
💸 Sponsor
Progressez dans votre anglais professionnel avec Cambly
Cambly, c'est la plateforme pour progresser à l'oral en anglais avec des tuteurs anglophones, quand et où vous voulez. Maîtriser le vocabulaire technique, interagir avec vos collègues ou clients à l'international ou travailler depuis n'importe où dans le monde, nos tuteurs s'adaptent à vos besoins, votre niveau et vos objectifs.
👉 Faites un cours d'essai gratuit de 15 minutes et profitez de 50% de réduction sur votre abonnement
📱 React-Native
Reassure - Continuous App Performance Monitoring Made Simple
Pour Callstack, 80% des problèmes de performance sur React-Native viennent du JS, et en particulier d'un mauvais usage de React. Pour y remédier, ils ont créé Reassure, une nouvelle librairie de performance regression testing. Elle s'intègre à votre CI pour éviter que les performances de vos apps ne se dégradent dans le temps. Le support web n'est pas encore disponible.
- 📒 BAM Mobile Tech Radar 2022: un rapport complet sur le développement mobile en 2022, avec une grosse partie sur React-Native
- 🔗 fabric-library-with-custom-cpp-example
- 📦 React-Native v0.70.2 + v0.69.6
- 📦 Jest-Native 5.0: support natif TypeScript
- 🎥 React-Native EU playlist: les vidéos découpées sont en ligne
- 🎥 Arc Slider with React-Native Skia, React-Native Gesture Handler and Reanimated 2
- 📜 How to specify pre-processor flags to the JSI-based React Native libraries
- 📖 Expo Router: la doc est dispo pour se familiariser avec ce nouveau routeur
- 📖 Expo App Icons and Splash Screen guides updated
- 🎨 Native iOS bottom sheet demo - iOS detents
- 🎨 React-Native WishList demo - alpha soon
- 🎨 Experimental support for debugging Reanimated’s worklet runtime (Hermes) in Flipper
🧑💻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.
🧑💼 Matters - Senior Software Engineer (React/Node)
Envie de challenges et de contribuer à des réussites entrepreneuriales ? Rejoins notre startup studio pour construire des produits variés et complexes dans une culture devOps, une stack JS, des code reviews, tests et déploiements automatisés. Paris, remote flexible, 50K€-65K€.
🧑💼 Linxea - Lead Dev React.js - 60-75k€
Plateforme leader de l’épargne en ligne. Stack tech : ReactJS, Redux, Saga, Formik, Storybook, Webpack, Typescript. Skills : architecture, développement, pratiques craft (clean architecture, clean code ,TDD), mentoring et formation des équipes. Paris 75008 - 2j de TT/sem.
💡 Comment publier une offre d'emploi ?
🇫🇷 En français
- 🎥 JavaScript : 7 choses à maîtriser pour React
- 🎥 React + Three.js, le combo parfait pour la 3D dans ton navigateur
- 📜 Recapt Q3 2022
💡Tu peux m'envoyer ton contenu: sebastien@thisweekinreact.com !
🔀 Autre
- Ten Years of TypeScript
- TotalTypeScript - Beginner's TypeScript
- Why I don't use Prettier
- Gifs without the .gif - The most performant image and video options
- Use cases for CSS comparison functions
- Node.js 18 -
node --watch
- Node.js 19 RC.0
- Astro 1.4
- Deno 1.26
- Rome 0.10
- State of CSS 2022 - Survey open
- State of GraphQL 2022 - Results
- Progressively enhance for a more resilient web
- New in Chrome 106
- New to the web platform in September
- Minimize Heap Allocations in Node.js
- Will Serving Real HTML Content Make A Website Faster?
- What’s Stopping WebAssembly from Widespread Adoption?
- Blink - Intent to prototype - CSS Nesting
- Postgres-WASM
- I turned JS into a compiled language (for fun and Wasm)
🤭 Fun
Ne manque pas le prochain email !