React Hebdo #92: Remix, MDX 2, Lifetime Analysis, Story of React, Quick Start Docs, TypeScript, Node.js, Deno, Go, Rust, Error Cause...
Discover more from This Week In React
React Hebdo #92: Remix, MDX 2, Lifetime Analysis, Story of React, Quick Start Docs, TypeScript, Node.js, Deno, Go, Rust, Error Cause...
React
Remix: Not Another Framework!
Ryan Florence donne de bonnes raisons pour apprendre Remix, qui se base sur des APIs web standardisées. Il ne sait pas si Remix perdurera dans le temps, mais une chose est certaine: la connaissance ne sera pas perdue. C'est assez similaire à React: pas besoin d'apprendre un nouveau langage de templating: on peut pleinement utiliser JavaScript dans le JSX.
Comme déjà expliqué, Remix est aussi designé pour être framework-agnostic. Ryan Florence nous tease sur les prochains frameworks supportés par Remix. Je mise sur Qwik et Solid.
Je vois de plus en plus Remix comme une potentielle passerelle vers Deno (également basé sur les APIs web), et sur le prochain framework qui survira React.
Pas vraiment lié: accident de voiture de Kent C. Dodds 🤕
MDX 2.0
Sortie officielle pour la v2 de MDX, la techno qui permet de mélanger facilement Markdown et React/JSX, très utile pour créer des contenus intéractifs (cf le site de Josh Comeau), qu'on utilise aussi sur Docusaurus.
La v2 règle des problèmes de syntaxe, améliore significativement les perfs, et peut supporter d'autres frameworks.
Lifetime Analysis for React Component Architecture
Alan s'inspire des concepts de lifetime analysis et d'ownership des objects en Rust pour en déduire ou mettre son state React. J'ai l'impression qu'avec l'expérience c'est je fais intuitivement. Lecture originale, un peu verbeuse au début, mais on comprends bien à la fin. Pas besoin de comprendre Rust.
Creating a Schema-Based Form System
Tania nous explique comment piloter le rendu d'un formulaire React via un schema JSON. Ici il s'agit d'un exemple basé sur Formik et Yup, mais c'est surtout la technique qu'il est important de connaitre, et peut être utile pour l'intégration avec un CMS ou backend qui vous envoie ce schema.
Extras:
Dan Abramov a réécrit la doc React Quick Start (doc en beta)
🎥 The Story of React: belle rétrospective sur l'histoire de React, de JQuery/Backbone à Next.js/Remix
Pause Your React App with Breakpoints: pour ceux qui utilisent encore
console.log😏react-zorm: lib de forms React (uncontrolled) typée et basée sur Zod qui s'intègre bien avec Remix (validation de
FormData)The baseline for web development in 2022: des stats sur le web qui ont fait parler l'écosystème cette semaine: React n'a pas de si bons scores, et en particulier Next.js (qui est battu par Gatsby sur les core web vitals).
🧵 Sebastian Markbåge: "Over-fetching means three things to me": reflexion intéressante sur les avantages de GraphQL avec un framework comme Relay, par rapport aux alternatives modernes (Remix loaders, Next.js
getServerProps, tRPC...).🧵 Next.js: évitez de retourner trop de data dans getStaticProps et getServerProps
Recoil 0.6: support React 18, concurrent rendering, strict mode
Docusaurus 2.0.0-beta.15: une belle release ;)
SWR 1.2: support
.mjs+ optimistic UI auto error rollback
💸 Sponsors
My Little Team
Une plateforme pour t'aider à trouver un job React dans une équipe qui correspond à tes valeurs.
Les avantages de My Little Team :
Filtrer les équipes par mission, valeurs, stack, style de management, télétravail, pour trouver celle qui te correspond.
Être le plus transparent possible sur les équipes et leurs valeurs.
Candidat•e first : après chaque entretien et dans ton nouveau job, on s'assure avec toi que tout se passe bien.
My Little Team est une plateforme indépendante, créée par un psychologue du travail et un développeur qui n'ont qu'un but : t'aider à être heureux dans ton travail. Retrouve plus de 40 équipes avec des missions inspirantes qui recrutent activement des déloppeur•ses React : Vendredi, Lalilo, Shotgun, Ponicode...
React-Native
React-Native Versions: je découvre cet outil d'analyse pour connaitre l'usage de chaque version React-Native
Deep dive into React Native’s New Architecture: présentation des différentes briques de la nouvelle architecture: JSI, Fabric, Turbomodules, Codegen
🐦 Demo React-Native-Skia: shaders, path interpolations
💸 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)
Divers
Porting tsc to Go (not Rust)
Avec l'arrivée des nouveaux bundlers, le type-checking devient le bottleneck dans les grosse codebases. Donny (Vercel) est l'auteur de SWC (Rust). Il a tenté une ré-écriture complête en Rust (POC qui compile 62x plus vite que tsc), mais c'est beaucoup de travail par rapport à un portage qui s'inspirerait du code existant tsc. Problème: la codebase tsc est difficile à porter en Rust (shared mutability, GC...), et Go convient mieux.
Le plan de SWC et Vercel est annoncé: ils vont nous construire tout un écosystème d'outils ultra-rapide pour la transpilation, le typechecking, la minification et le bundling.
Une autre alternative en Rust existe - tyty - pour l'instant à l'état de side-project, pas encore open-sourcé.
Deno in 2021
Deno partage sa rétrospective 2021, avec les améliorations sur le core (opcalls, perf, FFI), leur service Deno Deploy (isolats V8, comparable à Cloudflare, bonne cible pour Remix)...
Je suis excité par la compatibilité avec les APIs web et le mode compatible avec Node.js. Avec Node.js qui implémente progressivement les APIs web, on pourrait peut être passer de l'un à l'autre plus facilement par le biais des meta-frameworks comme Remix.
Extras:
Node.js: v18 va supporter
fetchnativement 🙌! JSON modules unflagged et peut-être une nouvelle APIResponse.json()?Node.js debugging and error handling with Error Cause: belle présentation de cette nouvelle feature ES 2022
Trailing Slashes on URLs: Contentious or Settled?: mon analyse sur les trailing slashs (réalisé pour Docusaurus) semble utile à la communauté. Zach Leatherman (Eleventy/Netlify) présente mes résultats de manière plus digeste 🤗 Ca devrait aussi aider Gatsby 😏.
V8 v9.9: améliorations Intl
prettier-plugin-tailwindcss: pour ordonner les classes
Updates from the 88th meeting of TC39: pas grand chose à se mettre sous la dent 😅 il y a une proposal enum en stage 0 🤔
Turborepo v1.1: permet notamment de créer des dépendances sur les variables d'env
The TypeScript converging point: est-ce qu'on peut exprimer n'importe quel programme JS avec des types TS? Stefan réponds "Not yet" et illustre avec le typage de l'API CLI commander.
Créateur de NAPI-RS recruté par Vercel qui renforce son positionnement sur Rust
How TypeScript Won Over Developers and JavaScript Frameworks
State of the Web: Bundlers & Build Tools, Static Site Generators, Serverless Functions, Deno, WebAssembly
