This Week In React #90: JSX, Tinybase, Dioxus, Owl, useWorkerizedReducer, Perf, TypeScript, CSS...
Surma (Google) introduces a lib to use a Service Worker to create a React reducer (possibly async). Communication is efficiant thanks to ImmerJS and transmitting patches using
postMessage. Browser support is good, only Firefox needs a polyfill. Now let's find a good use-case for this 🤷♂️, anyone?
Interesting thoughts on the current limits of end-2-end typing in Next.js, focusing on
getServerSideProps and page props. There's either too much manual boilerplate (risk of error), or a type helper
InferGetServerSidePropsType that might give surprisingly unsafe results. Evokes a TypeScript feature much-awaited by all frameworks: the ability to type module exports. Presents other solutions like Blitz, Server Components or tRPC. The last one looks quite interesting (see also the zart boilerplate using it).
New reactive store for structured data (in tables, like SQL or Normalizr), with a React integration package including hooks like
useCell for efficient, fine-grained subscriptions. Small in size, but quite featured: index, relationships, undo/redo...
How we migrated 541 components from Styled Components to Emotion with zero bugs: feedback from migrating the Storybook codebase from one CSS-in-JS lib to another, dogfooding their own visual regression tooling (Chromatic) as a safety net
Reading Source Code - Redux: Alex studied the Redux codebase and uses this opportunity to discuss the legitimate usage of TypeScript overloads in
Performance Optimization for Three.js Web Animations: useful techniques to know to efficiently integrate and lazy-load heavy React components. In this case an optional Three.js background.
How to write performant React code: rules, patterns, do's and don'ts: good advice and 4 rules to take away
Gatsby 4.5: also trying to type
🎥 How to Contribute to Open Source (Next.js) with Lee Robinson
Stream is the maker of enterprise-grade APIs and SDKs that help product and engineering teams solve two common problems at scale: in-app chat and social activity feeds.
With Stream, developers can integrate any type of messaging or feed experience into their app in a fraction of the time it would take to build these features from scratch. Stream Chat makes it easy for developers to integrate rich, real-time messaging into their applications.
Unlock enterprise-grade features, functions, and UI components completely free for your startup or side project with the Maker Account.
This new solution runs your React-Native screens natively, takes screenshots, and compare them to the previously stored screenshots in
./owl to generate a report. All this is well-integrated with Jest (like snapshots).
Very happy to see visual regression testing progress for React-Native: this is very useful and React-Native has been left behind a bit compared to web. See also Storybook React-Native-Web permitting to do similar things with Chromatic, but requiring a web conversion.
React-Native 0.67 should be released this week (changelog is available)
Build Flavor / scheme for React Native: allows to install the same app multiple times on a device: useful to manage multiple envs.
Trying to understand the internals of Reanimated 2: nice overview, many diagrams
Expo Modules + JSI: Expo confirms the goal to simplify our life to create performant native modules in Swift or Kotlin, based on JSI. This should come first to iOS.
Demo React-Native-Gesture-Handler buttons: demonstrates advantages over React-Native Touchables
Drawing (with Skia) in React Native: creating a progress indicator
React-Native-Skia drawing app demo: drawing with fingers on a canvas
Who is going to Support your Next Mobile App Project? Hint: Not React Native or Flutter: where to get support for a RN app? 🤷♂️
Start React Native: learn everything about gestures and animations with William Candillon
React-Native Weekly: stay up-to-date React-Native core updates
TypeScript Weekly: the best TypeScript links every week, right in your inbox.
Tailwind Weekly: all things Tailwind CSS, new issue every Saturday
G2i: pre-vetted remote React & React-Native developers you can trust on contract or full-time basis
Infinite Red: US React-Native experts making your idea a reality
Software Mansion: the co-creators of React Native and the technological core of many tech companies
New Rust framework largely inspired by React (hooks, VDOM, RSX...), strongly typed, performant, cross-platform (web, mobile, desktop, SSR). Aiming to be easy to adopt for a React/TypeScript dev.
I looked a bit the cross-platform support and I'm not sure yet how it works. It says native performance but seems to be using Tauri on desktop and mobile, afaik using WebViews? 🤔
TypeScript Cheatsheets: 4 official cheatsheets: Type, Interface, Class and Control Flow Analysis
🎥 CSS Cascade layers: gives better control over specificity of CSS rules. This could have an interesting impact: not having to care anymore about CSS insertion order. See also Cascade Layers Explainer.
Announcing The Astro Technology Company: raising 7m$
Adding Vite to Your Existing Web App: useful to migrate from Webpack