Aller au contenu principal

📨 #136: Next.js, Signals, Bling, Suspense, Server Components, useSyncExternalStore, Expo, Reanimated, Metro...

· 10 minutes de lecture
Sébastien Lorber

Salut à tous !

Cette semaine, le débat autour du modèle des signaux continue. On a aussi une belle release de Next.js qui dévoile un nouveau système de cache pour faciliter l'usage des Server Components sur un runtime Edge.

Beaucoup d'activité également coté React-Native, avec Expo 48, Expo Router 1.0, Expo Image 1.0, Reanimated 3.0, et l'arrivée des symlinks dans Metro!

💡 Consulter cette newsletter sur Twitter - format visuel 🎨

Pour me soutenir:

Ne manque pas le prochain email !

    💸 Sponsor​

    Suncel

    Publiez plus rapidement votre contenu. Améliorez votre SEO.

    Pour les éditeurs de contenu : destiné aux sociétés qui publient beaucoup de contenu et ont une importante stratégie SEO. Les éditeurs de contenu et équipes marketing peuvent publier le contenu sans aucune complexité technique (éditeur no-code), utiliser des blocks et des templates pré-conçus. Les mises en ligne de page sont instantanées, sans intervention d'un développeur. Les pages et les images sont optimisées grâce à Next.js afin d'obtenir d'excellent scores pour vos Core Web Vitals.

    Pour les développeurs : solution plug and play pour votre application Next.js existante ou pour une nouvelle application. De nombreux avantages pour ce CMS :

    • Conception de blocks réutilisables construits en React
    • Meta données pour le SEO déjà définies et Sitemap géré automatiquement (module SEO)
    • Création de vos propres settings custom en React
    • Admin personnalisable en React
    • Pas de système de routing nécessaire pour s'adapter au CMS

    Visiter Suncel.io | 5mn vidéo démo

    ⚛️ React​

    Next.js 13.2

    Next.js 13.2

    Une belle release avec des nouveautés dont les devs Vercel nous avaient déjà donné un aperçu. La nouvelle API Metadata est utile pour le SEO, fonctionne bien avec le streaming SSR, les server components et le nouveau app directory. Les nouveaux Route Handlers ont l'air d'avoir une bonne ergonomie: il suffit d'exporter le verbe HTTP. Particulièrement excité par les nouveautés qui touchent au MDX (compiler Rust, Server Components), et qui devraient rendre les sites de contenus Next.js beaucoup plus léger à utiliser. Si j'ai bien compris, Next.js commence à utiliser une étape de codegen TypeScript pour les liens typés (en plus du plugin TypeScript). La compatibilité Turbopack avec Webpack loaders sera bien pratique pour faciliter la migration.

    La plus grosse surprise pour moi, c'est l'introduction d'une API de cache directement intégrée à fetch(): permet un peu la même chose que ISR mais avec une granularité plus fine, au niveau du composant, pour chaque requête. Il y a même un système de tagging. Next.js reste portable: le cache peut être hébergé sur votre propre infra, ou utiliser un simple LRU. L'intégration avec Vercel est facilitée. Un article dédié donne plus de détails et explique les limites du modèle ISR: Vercel Cache API: A progressive cache, integrated with Next.js. Voir aussi le thread de Sebastian Markbåge.

    The Evolution of Signals in JavaScript

    The Evolution of Signals in JavaScript

    Cet article de Ryan Carniato (SolidJS) retrace l'histoire des signaux dans le frontend, en passant par KnockoutJS, MobX et bien d'autres solutions.

    C'est le gros sujet du moment, alors je vous propose de lire vous-même les nombreuses discussions qui ont eu lieu sur Twitter cette semaine:

    • Andrew Clark clarifie sa position et n'est pas fermé à introduire les signaux dans React. Le compiler React Forget pourrait compiler vers des signaux
    • Miško Hevery explique comment les signaux évitent les problèmes de perf sur le props drilling.
    • Evan You préfère un modèle muable compréhensible à un modèle immuable qui leak.
    • Devon Govett nous rappelle pourquoi on a adopté le "unidirectional data flow" et met en avant quelques problèmes des signaux.
    • Jordan Walke mentionne qu'ils ont considéré utiliser un modèle réactif à la création de React. Rejeté, car cela changeait la sémantique du langage.
    • Dan Abramov explique que l'utilisateur s'attend à voir la même interface pour les mêmes données. Il explique l'intérêt d'utiliser des "raw values" (non enveloppées dans un conteneur).
    • Ma position: je suis plutôt du même avis que l'équipe React et pense qu'il faut continuer d'innover sur le modèle actuel. J'espère qu'a terme JavaScript supporte mieux le modèle immuable, et que le compiler React Forget n'est qu'une étape de transition.

    Ne manque pas le prochain email !

      💸 Sponsor​

      Build and Run Synthetic Monitoring That Scales

      Build and Run Synthetic Monitoring That Scales

      You build it; you own it! It's a simple mantra that has driven software development for years. But how do you monitor complex React applications the best way?

      • First: use Playwright to mimic user flows and guarantee that your app works.
      • Second: be confident that the used APIs are up and running.

      "Monitoring as Code" - is a new way to define, test & deploy your entire application monitoring directly from code.

      • Code your monitoring setup and keep in version control
      • Test your application in preview environments to avoid bugs and regressions
      • Deploy your tests and start monitoring production

      Bring your monitoring next to your code for free

      📱 React-Native​

      Expo 48

      Expo 48

      Belle release. On retrouve les highlights de la beta:

      • React Native 0.71.3 - React 18.2.0
      • Améliorations Yoga (Flexbox) qui viennent avec React-Native
      • EAS builders sous M1 par défaut
      • Moteur Hermes par défaut
      • Tous les modules Expo supportent Fabric - expérimental

      Petites nouveautés depuis la beta:

      • Expo Image 1.0 en version stable
      • Expo Router 1.0 en version stable (blog post dédié)

      Reanimated 3.0

      Reanimated 3.0

      La v3.0 de Reanimated vient de sortir en version stable, avec une nouvelle feature de Shared Elements Transitions (demo). Il est maintenant possible d'utiliser des shared values en inline styles. La librairie a été réécrite pour améliorer les performances, la DX et préparer l'arrivée de nouvelles features. La v3 est compatible avec Fabric et l'API Reanimated 2 pour faciliter la mise à jour, mais l'API Reanimated 1 est retirée.

      🧑‍💻 Jobs​

      🧑‍💼 Passionfroot - Senior Full-stack Engineer (Remix) - €160k+, Berlin/remote

      Passionfroot's mission is to empower the independent businesses of tomorrow via YouTube, Podcasts, Social Media, and Newsletters. Join us in building a tool that will empower creators globally to build scalable, sustainable businesses.

      🧑‍💼 Shotgun - Senior Full Stack Engineer - 60-75k€ + BSPCE

      Shotgun est la billetterie des évènements electro. Nous recherchons des devs expérimentés pour travailler sur une stack moderne: React, React-Native, Typescript, GraphQL, NextJS, PgSQL, Vercel...

      🧑‍💼 Premier Octet - Développeurs(euses) React - Paris

      Nous cherchons des développeurs(euses) JavaScript passionnés. Vous interviendrez en développement sur des projets variés et motivants, à la fois serveur et front (React, Nest, Next), et éventuellement mobile (React Native).

      🧑‍💼 Teale - Mobile Software Engineer - 50-60k - Paris/Remote

      Teale recrute un dev mobile React-Native / TypeScript pour travailler sur une app à fort impact dédiée à la santé mentale.

      💡 Comment publier une offre d'emploi ?

      🏢 Vous recrutez en CDI ou freelance? Contactez-moi!

      🇫🇷 En français​

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

      🔀 Autre​

      🤭 Fun​

      alt

      A plus 👋


      Ne manque pas le prochain email !