React Hebdo #91: Remix, Next.js, Server Components, Forms, React-Native, TypeScript, Monorepos...

Jan 25, 2022

React

Remix vs Next.js

On a enfin une comparaison officielle avec Next.js!

D'abord, il faut savoir que Remix apprécie beaucoup la plateforme Vercel, malgré la concurrence entre Next.js et Remix.

Ce comparatif est basé sur une app e-commerce avec intégration Shopify, sur laquelle ils analysent essentiellement 2 pages: une landing page avec du contenu assez statique, et une page de recherche très dynamique. Tout ça déployé sur Vercel et Fly.

Une bonne mise en avant des avantages du rendu serveur: parfois il vaut mieux tout rendre coté serveur plutôt que de faire un mix des 2, comme semble le recommander Next.js: coquille statique, et résultats de recherche fetchés coté client.

Next.js est plus complexe, avec des lifecycles qui tournent un peu partout (server, browser...). Remix préfère rester plus simple, ne faire que du rendu dynamique, mais le faire très bien. En s'appuyant sur les fonctions natives du browser, cela permet de réduire la quantité de JavaScript a envoyer coté client.

Article très long, pas facile à résumer, lisez le pour vous faire votre propre idée. Je n'ai pas encore tout compris de Remix, et j'ai encore quelques interrogations sur la gestion des erreurs si l'API Shopify tombe, la sécurité, la complexité de l'architecture avec le cache Redis, le redéploiement de l'app avec invalidation des caches... Bref pas mal de choses qu'on aime avec la Jamstack.

Dans l'ensemble ça me donne envie d'essayer Remix sur un projet non critique: pourquoi pas le site de cette newsletter!

How React server components work: an in-depth guide

Article très intéressant et assez technique sur le fonctionnement des Server Components. Pas mal de détails que je n'ai vu nulle part ailleurs jusqu'a présent. Explique notamment comment un arbre React coté serveur est sérialisé en JSON avec des "module references", et présente quelques exemples de payloads pour la communication client/serveur.

Extras:

What is a react component, anyways?: reflexion intéressante sur ce qu'est un composant React. Clairement pas si simple à définir. Propose 4 définitions dont "a unit of update"
Mastering the art of forms in React: l'auteur insiste qu'on a pas forcément besoin de controlled inputs, et recommande React-Hook-Form + Zod.
Sneak peek into React 18 useDeferredValue hook: permet de dé-prioriser un rendu React, utile pour la perf.
Exploring React 18’s three new APIs: useId, useSyncExternalStore, useInsertionEffect
How Redux DevTools broke Jira for 14 hours: histoire amusante, pas forcément liée à React
Vercel Platforms Starter Kit: Vercel propose un template basé sur Next.js pour ceux qui veulent créer des apps multi-tenant avec support des noms de domaine sur mesure. Donne quelques exemples comme la plateforme de blogging Hashnode.
Blitz: pivot du meta-framework React validé: transformation en Blitz Toolkit, une boite à outil générique qui s'intégrera d'abord avec Next.js. Sur la partie "zero abstraction data layer", une collaboration avec tRPC semble d'actualité.
Custom Elements + React: Dan Abramov nous invite une nouvelle fois à donner du feedback
Storybook Addon Next
Remix Conf: 24-25 May
🐦 Daishi Kato explique comment ces libs fonctionnent: Zustand, Jotai, Valtio
🐦 Props drilling: le context n'est pas la seule solution
🎥 Remix Singles: nouvelle série de vidéos sur Remix
🧵 Amazon dev: "SSR React wasn't fast enough for us.": un ingé explique comment ils ont optimisé le site. Pas beaucoup de détails, mais ça fait bien parler 😏
Deep dive into the new Suspense Server-side Rendering
Type-safe routing in React with `fp-ts-routing` (part 1)

💸 Sponsors

React-Native

Announcing React Native 0.67

C'est pas la release avec le plus de highlights 😅 Le blog post parle surtout des améliorations sur le process de release qui devrait être plus fiable et régulier.

Ce process est aussi évoqué dans un autre post React Native - H2 2021 Recap, c'est une étape importante pour le rollout de la Nouvelle Architecture qui arrive progressivement. Encore un rappel que React-Native n'est pas juste iOS + Android 😏.

Note: on devrait aussi avoir des nouvelles versions des plateformes MacOS et Windows prochainement.

From Native to React Native to Flutter:

Article assez long mais très intéressant, qui évoque de manière juste les divers problèmes rencontrés avec React-Native et Flutter.

Je pense que leur conclusion serait différente si ils construisaient pour d'autres plateforme que iOS + Android (support du web par exemple), ou si ils avaient un besoin régulier de mélanger des vues natives avec des vues Flutter. Dommage que React-Native-Skia n'hexistait pas plus tot 😄.

Extras:

Conférence Chain React annulée cette année
🎥 Unboxing Expo SDK 44
🎙️ RNR 224 - React Native Web on Next.js with Fernando Rojo
🐦 React-Native Fabric + Apple TV
🐦 UI d'iOS recréée en React-Native
🐦 Démo: Enter/Exit Layout animations en Reanimated
🐦 Démos Skia + Raycasting
🐦 Flutter web: avis de Jake Archibald et de Jamie Kyle: ça conforte bien notre choix d'utiliser React-Native pour le cross-platforme 😄

💸 Jobs

Sponsorise React Hebdo pour publier ton offre d'emploi

Nabla: Front-end engineer React senior - Paris - 55k-90k

Nabla construit une plateforme de médecine asynchrone (chat sans rendez-vous + appel vidéo si besoin), en automatisant un maximum de tâches répétitives pour que les médecins se concentrent sur le soin et que le service reste accessible à tous.

Ils ont levé 17M€, remporté un award Google Play Best Apps of 2021 et viennent de lancer la première offre payante dédiée à la santé des femmes.

Les fans de hooks React et de Typescript se sentiront à la maison, ainsi que les amateurs de GraphQL, Tailwind, Vite ou Next.js. Pas mal de technos sympa à découvrir (WebRTC et codegen notamment)

Paris 3ème, remote possible, 55k-90k en fonction de l'expérience, + BSPCE.

Cajoo: Dev & Architecte Fullstack - Remote - 40-90k€ (+BSPCE)

Cajoo veut créer le supermarché de demain 🛒 Nous sommes présents dans 10 villes en France et suite à un investissement de 40M$ de Carrefour nous étoffons l'équipe tech pour créer la stack tech du futur du retail. Les squads s'insèrent dans les 3 streams:

🛍️ Consumer: App B2C en React Native, back-office React, backend Hasura & lambdas Node/Typescript
🏭 Warehouse: PWA React avec XState pour les opérateur en entrepôt, back-office React, backend Hasura & NestJS
🚴 Delivery: App coursiers en React Native sur Expo, back-office React, backend Hasura & lambdas Node/Typescript via Serverless

Notre code est typé de bout en bout avec Hasura en backend qui génère des endpoints GraphQL que nous consommons en frontend avec Apollo et un typing fort via Typescript.

🌴 Remote pour les équipes Tech, Produit et Data (avec possibilité de venir dans nos locaux dans le 8ème à Paris)
🏄‍♂️🏔️ Offsite chaque trimestre dans un endroit sympa en France (Hossegor, Chamonix)

Divers

Announcing TypeScript 4.6 Beta

Une belle release TypeScript qui continue d'apporter des améliorations utiles, notamment sur le Control Flow Analysis qui peut être très utile pour un dev React, et dont j'ai déjà parlé. Le blog post ne le mentionne pas, mais j'ai testé: ça va améliorer un peu le destructuring de props, mais ça ne semble pas encore fonctionner avec {...props}: peut-être pour la prochaine release.

Monorepo.tools

Une page bien présentée qui vous donne de bonnes raisons d'adopter le monorepo, et compare quelques outils populaires: Lerna, Nx, Turborepo, Bazel, Lage... Proposée par Nwrl (derrière Nx), la comparaison reste honnête et objective.

Extras: