Aller au contenu principal

📨 #162: Lit-React, Remix, Next.js, Fresh, next-safe-actions, Starlight, RN 0.73 RC, RCTText, canvaskit-js, vxrn, Rolldown, Vite, Japa, Prisma...

· 8 minutes de lecture
Sébastien Lorber

Salut à tous !

Cette semaine, je me suis intéressé à la sortie de Lit 3.0 pour voir si l'usage des Web Components devenait plus facile avec React.

Coté React-Native, la version 0.73 est en release candidate avec de nombreuses améliorations DX. On parle aussi d'optimisation des composants Text et View. Canvaskit-js permet de faire tourner Skia sur le web pour seulement 20kb!

Il y a eu quelques annonces intéressantes à la ViteConf la semaine dernière, dont un port de Rollup en Rust, et l'usage de Vite avec Remix ou encore React-Native.

J'ai été l'invité de Melvyn dans un podcast pour parler des dessous de cette newsletter d'un point de vue business (rappel: je build in public), mais on aborde aussi quelques sujets React 😜

💡 Consulter cette newsletter sur Twitter - format visuel 🎨

Pour me soutenir:

Ne manque pas le prochain email !

    💸 Sponsor​

    highlight.io

    highlight.io - The open-source, full-stack monitoring Platform

    highlight.io is a truly open-source application monitoring solution. They support Session Replay, Error Monitoring, and Logging platform; a perfect solution for your next project.

    Don't waste time trying to guess why a bug happens. Use highlight and get a clear picture of your browser and server-side application.

    It is super easy to install in your favorite framework: React.js, Next.js, Remix, or anything else!

    ⚛️ React​

    Lit React v1.0

    Lit React v1.0

    Le framework Web Components de Google Lit vient de sortir en v3.0. En dehors des améliorations du framework (decorators, template compiler, Preact Signals), on retrouve en particulier la graduation du package d'intégration @lit/react qui sort du Lab, devient stable et sort en v1.0.

    Cette intégration facilite l'usage des Web Components dans une app React (ou Preact) en créant un wrapper qui va mapper les props React sur les properties de l'élément cible, gérer les event handlers et faciliter le typage TypeScript. Elle comble certaines lacunes de React 18 qui ne s'intègre pas facilement avec les Web Components: les props sont mappées sur des attributs et non des properties. Voir la documentation pour le framework React.

    Mais est-ce qu'un dev React moderne peut facilement utiliser tout ça? Lit propose des packages expérimentaux @lit-labs/ssr, @lit-labs/ssr-react et @lit-labs/nextjs mais le support est limité et ne marchera pas avec Next.js App Router. Le Declarative Shadow DOM, qui permet le SSR, n'est pas encore implémenté dans Firefox, mais un polyfill existe. Bref, Lit devrait bien fonctionner sur une app CRA, mais semble encore un peu risqué si vous avez besoin de SSR et SEO.

    Ne manque pas le prochain email !

      💸 Sponsor​

      Drop-in Authentication & User Management for React

      Drop-in Authentication & User Management for React

      Clerk is the easiest way to add authentication and user management to your React app. It’s purpose-built for the modern web and designed to get you up and running in minutes.

      With Clerk you get:

      • 💅 Pre-built UI components for sign-in, sign-up, user profiles, and organizations
      • 📦 SDKs for React, React Native, Next.js, Redwood, Remix, and other frameworks
      • ⚡ Integrations with Firebase, Supabase, Convex, and other BaaS providers
      • 🎁 User management, social login, magic links, MFA, and more out of the box

      Get started with Clerk’s quickstarts and tutorials 🚀

      📱 React-Native​

      Using RCTView & RCTText in React Native for Performance Gains

      Using RCTView & RCTText in React Native for Performance Gains

      En ce moment, les devs React-Native discutent beaucoup sur Twitter de la perf des composants Text et View, qui sont des wrappers JS et rajoutent de l'overhead par rapport aux éléments natifs RCTText et RCTView. William Candillon avait déjà 🎥 reporté ce problème dès 2021, et la possibilité d'optimiser, ce qu'il est possible de faire à condition de se priver de quelques features comme les listeners onPress. Ce benchmark propose de mesurer l'impact d'utiliser les composants natifs à la place des composants officiels, et reporte un gain d'environ 15%, avec des variations selon la plateforme.

      Maintenant que cette astuce s'est répandue, les devs React-Native ont bien envie d'en profiter. On peut noter la création de react-native-fast-text, ou encore le POC d'un plugin Babel react-native-optimizer qui appliquerait cette optimisation automatiquement.

      🇫🇷 En français​

      💡Tu peux m'envoyer ton contenu: sebastien@thisweekinreact.com !

      À l'abordage de React

      🚀 Formation React approfondie et 100% FR (pré-vente) !

      Découvrez "À l'abordage de React" en pré-vente dès la semaine prochaine, avec les deux premiers modules et un accès à vie aux autres modules lorsqu'ils sortiront.

      Notre plateforme interactive et immersive permet un apprentissage efficace et en profondeur de React en Français.

      🔀 Autre​

      🤭 Fun​

      alt

      A plus 👋


      Ne manque pas le prochain email !