Aller au contenu principal

📨 #121: Next.js, experimental_cache, Qwikify, CSS-in-JS, Typesafety, 3D, Vitest Preview, Outstatic, Remix, React-Native...

· 9 minutes de lecture
Sébastien Lorber
Sébastien Lorber
Editeur - Mainteneur de Docusaurus

Salut à tous !

La semaine dernière je me suis trompé, j'ai envoyé l'édition 220 au lieu de 120 😅 Personne n'a remarqué, ça doit pas être très grave.

C'est la saison des conférences. Le replay ViteConf est disponible, React Advanced vient juste de se terminer, et d'autres vont suivre.

La conférence Next.js démarre dans quelques heures. On va surement avoir une annonce de Next.js 13, avec les nested layouts, et d'autres trucs super cools qui commencent par Turbo 🤭. On en parle la semaine prochaine!

On a aussi tous les clouds qui se sont mis d'accord pour améliorer leur support Next.js en même temps: Netlify, Cloudflare, Microsoft...

Ne manquez pas non plus la saison 5 des vidéos React-Native de William Candillon qui démarre aujourd'hui!

💡 Consulter cette newsletter sur Twitter - format visuel 🎨

Pour me soutenir:

Ne manque pas le prochain email !

    💸 Sponsor​

    Sizzy - le navigateur pour les développeurs

    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​

    Why We're Breaking Up with CSS-in-JS

    Sam est un des principaux maintainer d'Emotion, une des libs CSS-in-JS les plus populaires. Il explique les avantages et inconvénients du CSS-in-JS, avec un focus sur les librairies avec runtime. Pour son app Spot, le cout de serialisation des styles était trop élevé. Ils ont remplacé Emotion par des Sass modules (CSS modules + Sass) avec un système de CSS utilitaire. Sur Docusaurus, on utilise CSS modules et je confirme que c'est une bonne alternative no-runtime et relativement simple. La DX n'est pas aussi bonne mais reste cependant largement acceptable.

    Cet article a lancé de nombreuses discussions intéressantes. On sait depuis un moment que les librairies CSS-in-JS avec runtime causent des problèmes de performance. Dan Abramov confirme et ne veut pas utiliser de runtime sur la nouvelle doc. Ryan Florence mentionne des problèmes de performance lié à Chakra, qui utilise Emotion.

    Tailwind est aussi une bonne alternative. Pour moi, on peut le ranger Tailwind dans la catégorie CSS-in-JS no-runtime, en particulier dans un contexte React dans lequel le styling Tailwind se fait via du JSX. Certains questionnent sa maintenabilité, mais en pratique cela marche plutôt bien.

    Qwik React

    Qwik est un framework SPA innovant qui évite les problèmes de performances liés à l'hydratation. Il peut maintenant s'intégrer avec React par le biais d'une fonction qwikify$() pour wrapper n'importe quel composant React. Des directives client:xyz (inspiré de Astro) permettent de controller avec beaucoup de granularité quand le composant React sera hydraté. Leur démo intègre Material UI dans une app Qwik. Voir aussi cette video. Je trouve que c'est une bonne solution qui permet d'éviter de faire un all-in sur ce nouveau framework. On peut conserver les propriétés cross-platform de React, tout en adoptant Qwik sur le web pour améliorer les performances.

    Fully Typed Web Apps

    Kent C. Dodds explique l'interet d'avoir une app typée de bout en bout, de la DB jusqu'a l'UI, à travers les différentes limites: réseau, localstorage, DB... Il évoque la validation (schema, type guards), la génération de types (Prisma) ou encore les conventions (Remix). Il explique comment cette expérience est possible avec Remix, grâce à l'inférence: il vaut mieux utiliser typeof que as.

    Building an interactive WebGL experience in Next.js

    Vercel explique comment ils ont créé une expérience de signup immersive impressionnante pour la conf Next.js, en se basant sur React-Three-Fiber. Cela reste complexe à comprendre sans expérience 3D / WebGL / Three.js, mais la déconstruction en étapes successives est intéressante et donne un aperçu de l'état d'esprit à adopter pour faire du dev créatif.

    Ne manque pas le prochain email !

      💸 Sponsor​

      premier octet - Agence de développement React

      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​

      🧑‍💻Jobs​

      🧑‍💼 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.

      🧑‍💼 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€.

      🧑‍💼 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​

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

      🔀 Autre​

      🤭 Fun​

      Meme - VSCode running on iWatch


      Ne manque pas le prochain email !