Voir le profil

React Hebdo #93: Server Components, Remix, Gatsby, React-Native-Web, Perf, Immutability, Stately, TypeScript, Deno...

React Hebdo #93: Server Components, Remix, Gatsby, React-Native-Web, Perf, Immutability, Stately, TypeScript, Deno...
Par Sébastien Lorber • Numéro #93 • Consulter en ligne
Bonjour à tous!
Pas mal de bons articles cette semaine, en particulier un premier retour d'expérience par Shopify sur l'usage pratique des Server Components.
En retard cette semaine car j'essaie de créer une landing page pour la newsletter: cf.thisweekinreact.com. J'ai tenté d'utiliser une nouvelle stack (Remix, Tailwind, Cloudflare), mais je rencontre quelques soucis de SSL et Cloudflare ne veut pas communiquer avec l'API Revue 😅.
Je teste aussi l'usage d'emojis pour “classer” les liens, dites moi si vous trouvez ça utile 🤷‍♂️?
🙏 Pour soutenir la newsletter: 

React
Cathryn partage son retour d'expérience sur l'usage des Servers Components chez Shopify, qu'elle a appris à utiliser avec leur framework Hydrogen. Elle conseille d'utiliser par défaut des Shared Components par défaut, au lieu des Client Components (ce qu'on utilise aujourd'hui). Quand on a besoin de créer un Client Component, il faudra le faire avec la granularité la plus fine possible.
Elle donne aussi les cas de figure qui consuisent à l'usage d'un Server Component. Les patterns de composition (usage de children) qu'on utilise parfois pour optimiser peuvent aussi servir à entremeler les composants de différents types.
Au final, elle propose un véritable arbre de décision, qu'elle illustre avec 2 exemples: newsletter signup et product FAQ.
Un tutoriel utilisant les server components a aussi été publié: Rapid Development with Hydrogen: Building a Product Page
Nadia explique comment on peut optimiser les rendus sur un formulaire React complexe en utilisant le context React. En premier lieu, il faut séparer en 2 contextes et hooks useFormData() et useFormAPI(). Ne pas oublier de bien mémoiser l'objet api. On pourra éventuellement splitter le state en plusieurs contextes plus petits.
Ces techniques ne scalent peut-être pas aussi bien qu'un vrai state manager, mais restent utiles à connaitre.
Il existe de nombreuses façons d'utiliser des icones en React, chacune avec des tradeoffs différents. Les fichiers .svg ne peuvent pas être stylés en CSS, et les composants React qui rendent du SVG (y compris les convertisseurs type SVGR) sont pratiques mais ils vont alourdir une page HTML rendue coté serveur en inlinant le svg (on le voit très vite sur une page qui utilise plein de fois la même icone).
Ben propose une bonne alternative intéressante et beaucoup moins connue: utiliser des sprites SVG.
Extras:
React-Native
💸 Jobs
Sponsorise React Hebdo pour publier ton offre d'emploi
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)
La mission de Maki est de permettre à chaque entreprise de recruter des talents sur mesure. Maki propose des tests d'évaluation standardisés avant l'embauche pour identifier les meilleurs candidats et accélérer les décisions des entreprises, sans préjugés.
Si comme nous vous aimez résoudre des problèmes complexes de façon simple, à l'aide d'outils modernes (ping TypeScript, React-Query, MUI, Playwright, …), afin de proposer des expériences fluides et efficaces, le tout dans une ambiance décontractée (si si), alors venez discuter avec nous :)
Paris 9ème - full remote possible - 65k / 80k en fonction de l’expérience + BSPCE
Divers
Luca (contributeur Deno) mentionne toutes les APIs web que supporte Deno, ce qui en fait une plateforme de choix pour déployer Remix. C'est probablement en réponse au support récent de nouvelles APIs web annoncées pour Node.js 18. Lire aussi fetch() In Node.js Core: Why You Should Care
Histoire amusante, dans un contexte backend mais qui peut largement s'appliquer au frontend et React. L'usage de FP et d'immuabilité a conduit à de mauvaises perfs liées à la copie d'objet et une compléxité O(n2).
Note: il est possible d'avoir de meilleurs perfs sur les updates de structures immuables avec l'usage de vector tries et de structural sharing, comme le fait ImmutableJS.
Quirrel (service SaaS de jobs cron pour env serverless) et son créateur Simon (voir son post) rejoignent Netlify, qui présente un nouveau système de Scheduled Functions en beta.
Ce genre de feature manque réellement pour compléter l'offre serverless existante. A noter que Blitz (auquel Simon contribue) pivote en Blitz Toolkit pour fournir des services similaires. On ne serait pas surpris de voir Vercel faire une offre 😏
Extras:
TJ
I thought these were drawn exclusively for O’Reilly. My whole life is a lie. https://t.co/32n1edTQKh
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