React Hebdo #99: Remix, Next.js, Redux, Memoization, Storybook, Ladle, Wix, Shopify, React-Native, CodeSandbox, Prettier, Deno...

Mar 23, 2022

React

Ladle - A drop-in alternative to Storybook

Ladle est un project d'un ingénieur Uber qui aime Storybook mais pour autant constate divers problèmes de performance au sein de son entreprise: temps de build, de démarrage, Time-To-Interactive... Il a donc créé une alternative beaucoup plus performante, basée sur Vite et les modules ES, et compatible avec le Component Story Format pour faciliter l'adoption (demo).

Preemptive Memoization In React Is Probably Not Evil

Un article très intéressant et bien documenté sur la stabilité des objects et callbacks. Malgré le fait que l'usage de useMemo puisse ressemble à une premature optimization, Zhenghao recommande de stabiliser au maximum les identités, au moins pour les libs et les custom hooks. On attend avec impatience React-Forget et Records & Tuples qui pourraient grandement nous simplifier la vie.

Remix Stacks & Remix v1.3

Le CLI Remix permet d'initaliser un project avec une stack donnée. Remix propose maintenant 3 stacks completes, et il est possible de créer sa proper stack (par exemple pour son entreprise). Sur les 3 stacks dispo, la différence se fait surtout sur l'hébergement ou la persistence, et on retrouve en socle commun: Tailwind, TypeScript, Prettier, ESLint, Cypress, MSW, Docker, Vitest, Testing Library.

Je trouve ça bien de fournir des starters pour démarrer rapidement, mais j'ai un avis mitigé sur l'approche "template", je préfère une approche "company-scripts" (comme CRA) pour garder toutes les stacks synchro.

Upgrading Next.js for instant performance improvements

Vercel a upgradé une app de démo (Virtual Reality Store) de Next.js v8 vers v12. Ils en profitent pour faire le point sur les nombreuses améliorations qui viennent avec les dernières versions.

How Wix Applied Multi-threading to Node.js and Cut Thousands of SSR Pods and Money

Retour d'expérience de Wix qui explique comment ils ont optimisé leur plateforme qui execute le Server-Side-Rendering React avec une grosse demande en terme de CPU. Ils ont utilisé la nouvelle API Node.js 14 worker_threads (permet de partager la mémoire contrairement à child_process) et ont obtenus de très bons résultats.

Shopify: Creating a React Library for Consistent Data Visualization

Retour d'expérience de Shopify qui reporte des problèmes de consistence sur ses data-visualizations. Solution: la création d'une lib Polaris Viz, qui sera open-sourcée prochainement. Ils détaillent en particulier l'usage du context React pour créer des themes par défaut et la possibilité de créer des variantes via des overrides partiels.

Idiomatic Redux: Designing the Redux Toolkit Listener Middleware

Mark Erikson fait une rétrospective sur le design de la nouvelle API Listener Middleware de Redux Toolkit 1.8, qui s'étale sur plus de 2 ans, avec de nombreuses itérations. Ils ont réussi à couvrir de nombreux cas d'usage de Redux-Saga/Observable avec une API relativement simple. J'aime bien le concept de await condition.

Extras:

🇫🇷 Les erreurs courantes en débutant avec React
📜 Nexus — a Component Tree Visualizer for Next.js: extension VSCode
📜 Using SVG sprites in a React app
📜 Implementing advanced usePrevious hook with React useRef
📜 Remix - Full Context Review
📜 Remix vs Next.js
📜 Storybook Community Showcase #1
📖 Partydown + Gatsby: doc d'intégration
📖 Dan Abramov annonce 3 nouvelles pages sur la doc en beta: useReducer, useContext, createContext
📦 React-Runner v1: release stable pour cette alternative moderne à React-Live qui permet d'avoir un éditeur de code avec live preview (comme Sandpack mais sans iframe)
📦 React-Spline: React + 3D. J'ai pas encore 100% compris ce que c'est mais ça semble être une alternative à Blender + React-Three-Fiber?
📦 Remix-ETag
📦 MDX v2.1

React-Native

📦 React-Native v0.68.0-rc.3: la version stable 0.68 prévue la semaine prochaine avec le flag pour activer Fabric 🤗
📜 Using Storybook and MSW in React Native
🧑‍🎨 React-Native-Skia: shadows
🎙️ RNR 229 - Building an Expo App for Mobile and Web with Josh Justice
😢 React-Native Weekly - The End
📦 React-Native-Quick-SQLite: support async callbacks
📦 React-Native-Elements v4.0.0-rc.0

💸 Jobs

Sponsorise React Hebdo pour publier une offre d'emploi

Front: Développeur Senior Full-stack / Front-end (React / NodeJS) - Remote / Paris - 60-80k€ + stock options

Front en une journée, c'est:

30 déploiements en production sur 1500 serveurs
10 MM d'évènements temps réel
plus de 100,000 utilisateurs dans plus de 7000 entreprises

Nous développons une plateforme ayant pour but de réunir tous les canaux de communications d'une entreprise, en alliant collaboration et efficacité. Front est l'outil de travail principal de nos clients et nous devons faire attention à chaque détail: Front est une app très complexe avec une grande exigence de performance. On utilise React, Redux ou encore Styled Components, le tout en Typescript.

Nous avons 350 collaborateurs, dont 80 développeurs autour de hubs à San Francisco, Paris, Chicago et Dublin. Full remote possible, « Flexible Friday », environnement de travail en anglais, Salaire entre €60K - €72K + stock option (en fonction du niveau d'expérience)

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

CodeSandbox Projects

Nouvelle expérience de dev dans le cloud pour les projets de toute taille, qui s'intègre à l'IDE, avec un support iPad. Semble pratique pour collaborer ou review rapidement une pull-request.

Extras: