This Week In React

Share this post

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

substack.thisweekinreact.com

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

Sébastien Lorber
Mar 23, 2022
Share this post

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

substack.thisweekinreact.com

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:

  • Prettier 2.6: nouvelle option singleAttributePerLine, support TS 4.6...

  • Deno 1.20: améliorations des perfs significatives, upgrade TS 4.6, V8...

  • welcome2web3.com site ironique sur l'expérience web3 😂

  • Lamina: "Tailwind for shaders"

  • Vercel Deploy: Chrome Extension

  • Boa v0.14

  • Parcel CSS v1.7

  • Wave.js 2.0

  • Your SSR is slow & your devtools are lying to you

  • Debugging TypeScript using Replay Node

  • OpenSSL security releases require Node.js security releases

  • Conquering JavaScript Hydration

  • experiences. Web. frameworks. future. me.

  • Motion Developer Tools

  • How to write fast code

  • Vitest inline assertions? 🤔

  • hidden="until-found"

  • Alert: peacenotwar module sabotages npm developers in the node-ipc package to protest the invasion of Ukraine

  • Protestware is trending in open source: 4 different types and their impact

  • Packages with high download numbers that nobody wanted to install

  • CSS-Tricks is joining DigitalOcean!

  • In Defense of Sass

  • Gotchas with Git and the GitHub API

  • Retro-specifying fetch/performance

  • Making WebViews work for the Web

  • Why I Prefer Makefiles Over package.json Scripts

Twitter avatar for @Nick_Craver
Nick Craver @Nick_Craver
We've all done it. https://t.co/LGMcia2hgn
Image
8:42 PM ∙ Jan 18, 2023
Share this post

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

substack.thisweekinreact.com
Previous
Next
Comments
TopNewCommunity

No posts

Ready for more?

© 2023 Sébastien Lorber
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing