Le meta-framework React créé par Shopify vient d'être annoncé en developer preview (Twitter, blog post, video). Il utilise React, Vite, Tailwind, GraphQL, React-Query et un ensemble de composants et hooks sur mesure pour le e-commerce et l'intégration avec l'API Shopify.
La vision est assez similaire à Next.js: du contenu dynamique, sans compromis sur la performance, qui reste très importante pour le e-commerce. Hydrogen utilise les dernières innovations React: le streaming SSR et les React Server Components.
Ils prévoient également une solution d'hébergement Serverless appelée Oxygen, basée sur leur propre infra utilisant des isolats V8.
React-Router n'a pas eu de breaking change depuis la v4 en 2017. La v6 est ré-implémentée de zero en utilisant les hooks React, ce qui permet de réduire la taille de 50%. Un usage avec React.Component reste tout de même possible. Il y a quelques changements notables, mais l'API reste familière et intuitive.
La v6 reprend le meilleur des versions passées et apporte des nouveautés:
Sous-routes sont relatives à leurs parents, facilitant la composition
Incitation à upgrader, d'autres améliorations sont prévues
La migration de v5 ou de Reach Router ne semble pas trop complèxe, il y a déjà pas mal de doc sur le sujet, et ils préparent des packages de rétro-compatibilité.
Storybook est un outil pratique pour afficher et travailler sur des composants en isolation. Mais parfois, les props du composant ne sont pas suffisantes pour mettre le composant dans l'état souhaité (en particulier lorsqu'il est stateful).
Pour résoudre ce problème, ils ajoutent une méthode Component.play() qui permet d'interagir avec le composant via Testing Library pour le mettre dans l'état souhaité.
Kent C. Dodds présente un pattern qui consiste à pouvoir ré-initialiser le state d'un composant React sur la valeur initiale. Il y a un interêt par rapport à l'usage de key: permet d'éviter de démonter/remonter le composant, qui en dehors d'être plus lourd, peut présenter d'autres désavantages qu'il illustre avec un exemple sympa d'animation de radio button. Pour fournir cette callback reset(), il faut aussi faire attention à conserver quelque part le state qui a servi à l'initialisation (une prop initialValue n'est pas fiable car elle peut changer au cours du temps)
Un article sympa qui montre bien les baby steps du TDD appliqué à un composant React. A noter qu'on ne teste pas les détails d'implémentation, , ce qui rend le test moins fragile. Pour tester le style du composant, il y a de meilleurs outils que TDD, comme Storybook + Chromatic.
File-based routing with React Router: partie 2 publiée, qui propose d'apporter en plus le code splitting via l'API Vite import.meta.glob et <Suspense>
🎙️ Podcast de Swyx avec Lee Robinson: Next.js 12, Server Components, Edge Functions, vs Remix… une liste de sujets très intéressante!
🐦 Addy Osmani mentionne que les Core Web Vitals de nos frameworks web se sont bien améliorées, avec une belle progression pour Next.js (sans doute gràce au projet Aurora) et pas trop mal pour React. Attention: une grosse amélioration ne veut pas dire que les scores sont forcément les meilleurs. On est pas trop mal, mais il faudra surement attendre les Server Components pour que React puisse réellement rivaliser avec les frameworks plus léger.
Les développeurs vanilla React-Native ont parfois une perception erronée du SDK Expo, pensant à tort qu'utiliser un module Expo ne sera pas possible, ou va alourdir considérablement leur app.
J'ai aussi constaté via plusieurs audits que beaucoup d'apps vanilla React-Native n'utilisaient aucun module Expo, préférant des alternatives non-Expo qui sont souvent de moins bonne qualité.
Kudo déconstruit ce mythe (auquel il croyait, il faut dire que c'était vrai du temps du monolithe ExpoKit), explique qu'un module Expo peut facilement être installé sur une app vanilla React-Native, et ne dépend que du package common expo qui reste assez léger.
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:
🏭 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)
Une offre ci-dessous t'intéresse? Réponds à cet email!
Un nouveau DevTool Chrome permet d'enregistrer tout un flow utilisateur et pouvoir le rejouer, ce qui peut être très pratique pour debugger certains problèmes de performances.
Le support des user flows dans Lighthouse permet de detecter des problèmes qui ne surviennent qu'après le chargement initial de la page, comme une navigation ou une interaction utilisateur qui produit un layout shift.
Jusqu'a présent, les outils de performance étaient surtout focalisés sur le chargement initial des pages. C'est une bonne chose qu'on puisse mesurer un flow dans son ensemble: cela permet de juger plus objectivement si l'usage d'une Single-Page-Application présente des avantages face à une solution plus légère qui aura souvent de meilleurs scores sur le chargement initial.
Les attaques de “package supply chain” via npm continuent, avec de nouveaux packages compromis (coa, rc). Voir aussi RFC npm Make npm install scripts opt-in. Un nouveau vecteur d'attaques “Trojan Source” a aussi été publié: vous pourriez merger du code compromis sans même vous en rendre compte via l'usage de “Unicode control characters”
Tweet
Partager