Aller au contenu principal

📨 #122: Next.js 13, Turbopack, Remixing Shopify, React-Three-Fiber Journey, Gatsby Valhalla, Expo 47, Rive, Storybook, Asta...

· 12 minutes de lecture
Sébastien Lorber

Salut à tous !

Quelle belle semaine pleine de rebondissements! Il y en a de tous les cotés:

  • Next.js 13 nous donne accès aux dernières innovations React
  • Turbopack pourrait succéder à Webpack
  • Shopify fait l'acquisition de Remix
  • Gatsby va sortir sa v5 et rendre son data-layer agnostic
  • Le SDK 47 d'Expo est prometteur

Je profite de l'occasion pour tester un nouveau format, dites-moi ce que vous en pensez!

J'ai été invité par le podcast Double Slash (🇫🇷) pour parler de Docusaurus et de cette newsletter. D'ailleurs si vous avez des questions, n'hésitez pas ;)

Ne manquez pas non plus la grosse mise à jour du cours Three.js Journey avec les modules React-Three-Fiber. Bruno m'a partagé un code promo "TWIR" pour le lancement. Cela sera le 1er cours à figurer sur une prochaine page "deals" que je vais créer.

💡 Consulter cette newsletter sur Twitter - format visuel 🎨


Pour me soutenir:

Ne manque pas le prochain article !


    💸 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

    Next.js 13 keynote slide

    Next.js 13 - Dynamic Without Limits

    Cette nouvelle version de Next.js introduit le nouveau système de routing et de nested layouts en beta. La migration est incrémentale et optionnelle: il faudra déplacer vos pages Next.js dans un nouveau dossier app/ pour utiliser les toutes dernières innovations, comme l'usage des React Server Components et du support streaming SSR sur les 2 runtimes Edge + Node.js.

    ⚡️ Autres améliorations significatives:

    • Utilisation d'un nouveau bundler Rust Turbopack en alpha (détaillé plus bas).
    • next/image: nouveau composant image plus léger, flexible et rapide, qui évite les layouts shifts
    • @next/font: pour self-hoster ses fonts de manière optimisée et éviter les layout shifts (voir aussi Fontaine présenté la semaine dernière)

    💬 Commentaires:

    • Dan Abramov est excité par cette release qui donne une implémentation concrète à l'architecture cible visée par React.
    • Andrew Clark explique sa phrase "Next.js 13 is the real React 18 release" qui fait polémique
    • Matt Kane pense que React est trop lié à Next.js
    • Zach Leatherman mentionne que le Hello World de Next.js 13 envoie toujours beaucoup trop de JavaScript.

    🔗 Liens utiles:


    Turbopack keynote slide

    Introducing Turbopack: Rust-based successor to Webpack

    Vercel a embauché Tobias Koppers (créateur de Webpack), pour travailler sur Turbopack, un nouveau bundler très rapide en Rust. Pour l'instant, l'outil est en alpha, supporte principalement Next.js, et ses features sont limitées. Le support d'autres frameworks (Svelte, Vue..) et features (Tailwind...) sera ajouté progressivement.

    Turbopack est optimisé pour la developer experience, et Vercel annonce que l'outil est 700x plus rapide que Webpack, et 20x plus rapide que Vite. Il repose sur Turbo, un framework de mémoisation en Rust qui est capable de cacher le résultat de chaque fonction. Vercel a aussi publié un article avec des benchmarks plus détaillés.

    💬 Commentaires:

    • Jared Palmer explique comment le cache fonctionne et que Turborepo/Turbopack pourraient fusionner.
    • Evan You commente et créé une page Is Turbopack really 10x Faster than Vite?. Vite n'utilise pas SWC par défaut, et les benchmarks publiés reposent sur l'usage de Babel. Vite pourrait remplacer esbuild/Rollup par Turbopack.
    • Sebastian McKenzie pointe du doigt le gain relativement faible de performance sur un cold start (x4).
    • Devon Govett mentionne que l'architecture est similaire à Parcel.
    • Amjad Masad mentionne que le bundler React-Native Metro utilise un système de cache similaire depuis très longtemps.

    Remixing Shopify

    Remix Joins Shopify to Push the Web Forward

    Remix vient de rejoindre Shopify, et sera utilisé dans leur meta-framework Hydrogen ainsi que d'autres projets. La version 2.0 d'Hydrogen remplacera l'usage des React Server Components par les APIs de Remix! Ils ont trouvé le modèle Remix plus simple à comprendre et plus performant que les Server Components.

    Pour moi, c'est une belle acquisition qui a du sens. Shopify peut se concentrer sur la proposition de valeur d'Hydrogen plutôt que sur des problématiques d'infrastructure, et bénéficie du progressive enhancement de Remix (particulièrement important pour le e-commerce). Sans compter que Remix est découplé de React, et Shopify travaille sur une librairie agnostique Hydrogen UI: Shopify devrait pouvoir toucher les développeurs de divers frameworks (Vue, Svelte...), sans avoir à imposer React, tout en reposant sur une infrastructure partagée.

    💬 Commentaires:

    • Josh Larson a travaillé sur Hydrogen v1, liste les challenges rencontrés, et ne remet pas en question les bénéfices des React Server Components qui sont mieux implémentés dans Next.js 13 que Hydrogen v1.
    • Ryan Florence mentionne que Shopify ne mise pas contre les Server Components, et qu'ils seront surement ré-introduits dans Remix plus tard.
    • Ryan Florence explique que cette acquisition permettra de se concentrer pleinement sur le produit.
    • Guillermo Rauch dit qu'un frontend devrait être découplé d'un backend headless. Anthony Frehner répond que le support Next.js devrait arriver dans Hydrogen UI.

    🔗 Liens utiles:


    Three.js Journey is going React

    Three.js Journey is going React

    Three.js Journey est le cours de référence pour apprendre à créer des scenes 3D sur le web avec Three.js. Bruno Simon vient tout juste de sortir 24h de vidéos supplémentaires basées sur React-Three-Fiber qui apporte un modèle déclaratif à Three.js. La 3D est en train de prendre de l'ampleur dans nos applications: c'est le bon moment pour s'y mettre si vous voulez savoir faire autre chose que des formulaires et des applications de gestion. Je m'y suis mis avec ce cours et je ne regrette pas du tout!

    Bruno propose aux lecteurs de la newsletter un code promo "TWIR" de -30% (soit 66$) pendant les 10 prochains jours. Ce n'est pas du contenu sponsorisé: je trouve ce cours réellement super cool, et la mise à jour le rend encore plus pertinent pour un dev React.

    Je compte créer prochainement une page "deals" avec d'autres cours de ce genre et des promos intéressantes (sur lesquelles je ne gagne rien du tout). N'hésitez pas à me dire quels cours vous intéressent le plus!


    Ne manque pas le prochain article !


      💸 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

      Expo SDK 47 beta is now available

      Expo SDK 47 beta is now available

      Le nouveau SDK Expo est disponible en beta pendant une semaine.

      • React-Native 0.70.4 et React 18.1
      • Hermes disponible dans Expo Go sur iOS. Hermes sera le moteur JS par défaut à partir du SDK 48.
      • Support Fabric dans de nombreux modules Expo
      • Expo Modules API 1.0 qui permet de faciliter la création de modules natifs Fabric en Swift/Kotlin
      • Le filesystem routing pour React-Navigation en beta. La dernière release v0.0.34 est compatible avec le SDK 47.

      On aura plus de détails sur les highlights la semaine prochaine, mais c'est clairement une grosse release de très belles nouveautés!



      🧑‍💻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

      Next.js 13 - 1299$ price - Apple-like keynote troll

      Ne manque pas le prochain article !