Voir le profil

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

React Hebdo #91: Remix, Next.js, Server Components, Forms, React-Native, TypeScript, Monorepos...
Par Sébastien Lorber • Numéro #91 • Consulter en ligne
Bonjour à tous!
Un paquet de bons articles React aujourd'hui, et pas mal de TypeScript également!
🥳️ Aujourd'hui, c'est mon anniversaire React 😝 ça fait au moins 8 ans que je l'utilise!
Du moins c'est ce que j'ai décidé en retrouvant cette vieille question StackOverflow 😂. C'est marrant, celui qui m'a répondu (Paul O'Shannessy, ancien React core) m'a fait passé l'entretien technique pour Docusaurus 6 ans plus tard 😏
En parlant de Docusaurus, on vient de passer les 30k stars sur GitHub et publié un résumé de 2021. La v2.0 stable devrait bientôt sortir. C'est cool de pouvoir parler de mon travail de temps en temps 😏!
🙏 Pour soutenir la newsletter 🙏

React
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!
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:
💸 Sponsors
React-Native
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.
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:
💸 Jobs
Sponsorise React Hebdo pour publier ton offre d'emploi
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
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.
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:
Avez-vous aimé ce numéro ?
Sébastien Lorber

Chaque semaine, je t'envoie les nouvelles les plus pertinentes pour un(e) dev React et React-Native ouvert d'esprit.

⚠️⚠️⚠️ La newsletter React change d'adresse ⚠️⚠️⚠️   
➡️ RDV sur ReactHebdo.fr 🇫🇷

Pour vous désabonner, cliquez ici.
Si on vous a fait suivre cette lettre d'information et que vous l'aimez, vous pouvez vous y abonner ici.
Propulsé par Revue
Lambda Scale - SIRET 82951115300027