📨 #123: TanStack Router, Gatsby, Remix, Next.js, React-Three-Fiber, Astro, Expo, Open Native, Rome...
Salut à tous !
C'était la Jamstack Conf cette semaine, et on a eu quelques annonces sympa pour l'occasion, comme Tanstack Router, Gatsby 5 ou les résultats de leur sondage annuel.
Expo sort son superbe SDK 47. La 1ère release-candidate React-Native 0.71 conduit à quelques soucis de build Android sur des versions précédentes 😅.
Next.js et React-Native utilisent maintenant TypeScript par défaut sur les nouvelles apps.
Dernière chance pour acheter le cours Three.js Journey avec le code promo TWIR (-30%, expire demain). Il vient d'être upgradé avec 24h de modules pour faire de la 3D avec React-Three-Fiber. J'en profite pour mettre en avant le blog de Maxime Heckel qui a suivi le cours l'année dernière et est maintenant capable de faire de la 3D assez cool! Il vient justement de sortir un article sur les particules.
💡 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
Les professionnels de tous les autres secteurs d'activité disposent d'outils spécialisés, mais les développeurs Web sont toujours obligés d'utiliser le navigateur que leur grand-mère utilise pour faire ses courses sur Amazon ?
Si vous ouvrez localhost:3000 dans un autre navigateur que Sizzy, vous perdez des heures de votre temps précieux.
Avant Sizzy: le développement web vous stresse, le responsive design est difficile, vous avez une quantité écrasante d'onglets et d'applications ouverts.
Après Sizzy: tous les outils dont vous avez besoin sont au même endroit, le responsive design est un jeu d'enfant, plus de changement de contexte.
Vous pouvez le télécharger ici et l'essayer gratuitement pendant 14 jours !
⚛️ React
Tanner dévoile son nouveau projet: un routeur 100% typesafe, et framework-agnostic. Une liste de features impressionnantes, dont:
- URL State Management
- Built-in Caching
- Search Param Schema/Validation
- Auto Prefetching
- Loaders/Actions
- Async Elements + Code-Splitting
A première vue, on dirait qu'il y a pas mal d'inspirations venant de Remix ou React-Router, mais l'API est assez différente et ne repose pas sur du JSX, ce qui doit aider pour rendre la solution agnostique et typesafe. Pour l'instant il y a seulement l'adapter React, et la doc est incomplète, mais cela semble assez prometteur!
🔗 Liens utiles:
- 🐦 Tanner Linsley lance son projet sur Twitter avec un super trailer!
- 🐦 Ryan Florence pourrait s'inspirer de son travail pour rendre Remix plus typesafe
Gatsby 5: The Fastest Gatsby Yet
Gatsby 5.0 vient officiellement de sortir de beta. On y retrouve la Gatsby Slice API qui permet d'améliorer les temps de build lors d'une modification d'un élément de layout (header, footer...), et le support en beta des Server Components qui permettent de supporter l'hydratation partielle. Il y a aussi de nouveaux composants Head/Script, GraphiQL v2.
Gatsby a aussi présenté Valhalla, un nouveau service sur leur cloud qui propose d'utiliser les plugins source de Gatsby pour créer un content hub et une API unifiée GraphQL découplée de Gatsby. Il est donc possible d'utiliser Valhalla avec Next.js.
Les générateurs de site statiques n'ont pas trop la côte en ce moment. Pour autant un site statique convient toujours pour plein de sites, je trouve ça bien qu'au moins un gros acteur continue d'innover dans le domaine. L'API Slice est une bonne idée. J'aurais aimé que Valhalla puisse tourner localement, mais je crois que c'est un service cloud uniquement.
🔗 Liens utiles:
- 📜 Gatsby 5.0 - Release Notes
- 📜 Valhalla Content Hub Explained
- 📜 Gatsby 5 Upgrade. Say No to YOLO
- 📜 Partial Hydration (Beta) Explained
- 📜 The Gatsby Slice API: High Precision Incremental Builds
- 🎥 Valhalla Content Hub video
De nombreuses data APIs de Remix ont été ajoutées dans React-Router 6.4, et bien plus encore. Maintenant c'est au tour de Remix de reposer officiellement sur ces nouvelles APIs de React-Router. L'upgrade se fera en 4 étapes incrémentales et rétrocompatibles livrées dans Remix v1.x avec des feature flags. La vision est de faire en sorte que Remix v2 soit un compiler pour React-Router 6.4.
🔗 Liens utiles:
- 🗺 Remix on Router v6.4
- 💬 Remix RFC - v2 meta API
- 💬 Remix RFC - Flat Routes
- 🎙️ Remix + Shopify - Twitter Space
- 👀 React Core PR - Support Promise as a renderable node
- 📊 Jamstack Community Survey 2022: React est utilisé à 71%, Next.js représente 1 projet sur 2, et Remix est en belle croissance, et Docusaurus se porte bien également 😜
- 📜 React Router 6 Deferred Fetch: article assez cool qui montre comment utiliser l'API
defer, et met en avant quelques subtilités à comprendre pour la gestion des erreurs et éviter les waterfalls. - 📜 Reduce cumulative layout shift in Docusaurus with fontaine: la même technique utilisée par @next/font peut être utilisée dans d'autres contexts (pas limité à Docusaurus) pour améliorer le score CLS
- 📜 Playing with Astro: Sharing State Between React and Vue Components: montre comment React et Vue peuvent cohabiter sur une app Astro, et partager un état via les nanostores.
- 📜 Remix Simplifies Things: Brad explique pourquoi il aime Remix. Il peut écrire moins de JavaScript/React, et plus de HTML. Utiliser Tailwind semble plus simple que l'API links.
- 📜 Why I Ditched Django for NextJS: Bill était un "Python guy" travaillant sur Google Compute Engine. Finalement, il recommande d'utiliser Next.js (ou du moins JS/TS) et d'éviter Python/Ruby pour des projets web.
- 📜 How to Integrate Storybook with Hydrogen: l'intégration n'est pas si simple et demande de configurer Vite correctement.
- 📜 What's New in Next.js 13: un bon résumé des nouveautés Next.js 13
- 📜 What does CSR, SSR, SSG and ISR means and why should you care?: bon résumé des techniques de rendu Next.js existantes (avant les nouveautés Next.js 13)
- 📜 Implementing 3D Graphics In React: intro à React-Three-Fiber
- 📜 The magical world of Particles with React Three Fiber and Shaders: article avancé sur la création de scènes de particules avec React-Three-Fiber et Frame Buffer Objects
- 🎨 Taxonomy - An open source application using everything new in Next.js 13
- 🐦 TanStack Query for Angular: React-Query est progressivement porté sur d'autres frameworks
- 🐦 scheduler.yield() - Upcoming Web API, useful for React?
- 🐦 Next-Auth -
getServerSession()in Server Components - 🧵 Meet the new
create-next-app: utilise TypeScript par défaut - 🧵 You might not need Context in Server Components in Next.js 13: Sebastian donne différentes alternatives au context React pour l'usage dans les Server Components
- 🎥 NextJS 13 Warning: Easy Mistake = Infinite Loops
- 📦 React-Three-Next - updated to Next.js v13
- 📦 Redux ToolKit 1.9
- 📦 derive-zustand
- 📦 Generouted 1.6 - file-based routes for Vite
- 📦 udomsay - A stricter, signals driven, JSX based library
Ne manque pas le prochain email !
💸 Sponsor
Premier Octet - Agence de développement React
Premier Octet est une agence de développement d'applications web et mobile. Depuis 2008, nous accompagnons de nombreux clients grâce à notre expertise en React et React Native.
Plus concrètement, nous intervenons en développement, conseil, audit ou formation, sur des thématiques JavaScript serveur et front. Nos projets embarquent des technologies open source telles que :
- Next.js
- Nest.js
- ChakraUI
- NativeBase
- Strapi
N'hésitez pas à aller voir notre site premieroctet.com pour plus d'informations !
📱 React-Native
Le nouveau SDK 47 vient de sortir officiellement, avec un article plus détaillé sur les nouveautés.
- React Native 0.70.5 et React 18.1.0
- Expo Modules API 1.0 permet de créer très facilement des modules natifs Fabric en Swift/Kotlin
- Hermes disponible sur Expo Go iOS, experience de debugging simplifiée. Hermes sera le moteur par défaut dans le prochain SDK
- Support de Fabric dans plusieurs modules Expo
- Expo Router en beta: le file-system routing pour React-Navigation
- Diverses améliorations EAS: sécurité end-to-end, M1 workers...
Bref, une très belle release! Avec Expo Modules, cela semble plus simple d'adopter la nouvelle architecture par rapport aux outils officiels comme react-native-codegen qui ne supporte pas encore Swift.
- 📦 React-Native 0.71 RC.0: inclus les types TypeScript, utilise TypeScript par défaut pour les nouvelles applications, support Flex gap... Une release qui a aussi cassé les builds Android (maintenant réparé)
- 👥 Open Native: Native Modules, for all: une initiative intéressante qui propose de dé-dupliquer l'effort de création de modules natifs entre différents écosystèmes (React-Native, Flutter, Capacitor, NativeScript...) via des modules natifs agnostic et des adapters. A suivre!
- 📜 Migrating a React Native Library to the New Architecture: Oscar a migré React-Native Slider vers Fabric et liste les challenges rencontrés. Il explique les 4 grandes étapes pour migrer une librairie existante, ou en créer une nouvelle.
- 📜 Introducing End-to-end Security to EAS Update with Code Signing
- 📜 Flutter vs. React Native: Which is the right cross-platform framework for you?
- 💬 RFC: Metro package exports support + Node.js - define "react-native" community condition
- 💬 RFC: Vision for Layout Conformance/Parity
- 🎉 React-Native - Use TypeScript by default for new applications
- 🎙️ RNR 251 - Examining React Native 0.70
- 🎥 React-Native and Bluetooth Low Energy ( BLE ) - Send and Receive Data
- 🎥 Animated FlatList in React Native
- 📦 Storybook-Solito
🧑💻Jobs
🧑💼 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.
🧑💼 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.
💡 Comment publier une offre d'emploi ?
🇫🇷 En français
- 📜 Recapt Octobre 2022
- 🎥 Top 5 Des Erreurs de Hooks React que les débutants font
- 🎥 Pourquoi je n'utilise pas Redux... et tu ne Devrais pas aussi !
💡Tu peux m'envoyer ton contenu: sebastien@thisweekinreact.com !
🔀 Autre
- Announcing Rome v10: première release stable de la toolchain Rome, qui propose de remplacer ESLint/Prettier par une alternative Rust plus rapide et simple à utiliser. Ce qui m'attire le plus, ce n'est pas la vitesse mais surtout la partie sur le Error Recovery et les messages d'erreur.
- Introducing the CodeSandbox GitHub App: propose une intégration pour faciliter les contributions et la review de pull-requests. Cela rappelle StackBlitz Codeflow lancé récemment, mais avec une technologie assez différente.
- Jest over Vitest: Brad décide de rester sur Jest pour l'instant, après une tentative de migration vers Vitest qui n'a pas réellement améliorer la vitesse d'execution et présenté quelques challenges.
- Vitest 0.25: permet d'écrire des tests pour ses types TypeScript
- TypeScript PR - Convert TypeScript to modules: dans TypeScript 5.0, tsc sera 10-25% plus rapide
- Xata - Serverless Data Platform for modern web builders
- Tina CMS 1.0
- Safari Technology Preview 157
- ESLint - consistent-type-imports
- Client-side Routing without the JavaScript
- Performance: Rust and its relationship with Node.js
- What is a realm in JavaScript?
- Tailwind CSS turns 5 years old
- New to the web platform in October
- Protobuf-ES: The Protocol Buffers TypeScript/JavaScript runtime we all deserve
- ESLint v8.27
- Node.js - drop fetch experimental warning
- Node.js - Nov 3 2022 Security Releases
- Playwright now has new getBy APIs
🤭 Fun
Pour encore plus de fun, ce nouveau thread Twitter répertorie toutes mes trouvailles. Beaucoup n'ont jamais été publiées dans la newsletter.
Ne manque pas le prochain email !
