This Week In React #85: FloatingUI, Remix, Redwood, Rails, Relay, Storybook, Gesture Handler, Flipper, Sandpack, Open-Props...
This Week In React #85: FloatingUI, Remix, Redwood, Rails, Relay, Storybook, Gesture Handler, Flipper, Sandpack, Open-Props...
React
New positioning library for floating elements (tooltip, dropdowns ...), similar to Tether or PopperJS, but lighter, low level, with a modular system, decoupled from the DOM. It also offers higher level APIs like React components, and experimental React-Native support! The lib is provided by a PopperJS maintainer, who felt it was better to create a brand new project.
A comparison of Remix to Rails, approuved by Michael Jackson. Evokes the productivity primitives offered by Remix (resource routes, loader, filesystem convention, co-location ...), the context of "Jamstack fatigue" in which we find ourselves, the advent of the serverless Edge deployment and the return of SSR.
Redwood has just released its 1st release candidate, with some highlights such as integration with Chakra, Fastify or RedwoodRecord. Redwood is supported by Tom Preston-Werner, creator of GitHub and Jekyll, who has used Rails a lot. Redwood focuses first on product velocity, before pure technical performance. It has strong opinions, like the use of Chakra, Prisma, GraphQL, TypeScript, Storybook ...
Extras:
Why Remix is worth your attention: interesting insight around progressive enhancement, forms...
Relay 13: Release Candidate: the compiler has been re-written in Rust for perf reasons. Robert Balicki's thread is a good reminder of reasons to use Relay
Storybook 6.4: supports interactive stories, improve performances, linter and upgrade CLI
A Visual Guide to useEffect: nice visualization work, can be useful for beginners to learn faster
Framer Motion 5.4: new
useAnimationFramehookDemo: the 1st stage of Three.js Journey has been converted to React-Three-Fiber and code looks quite clean and composable.
React.holiday: advent calendar by email, short lessons to welcome the arrival of React 18
Ben Awad gave a technical interview to Dan Abramov. He answered "when to use Redux" 😝
Metronome.sh: new SaaS analytics service for Remix apps (beta, non-official)
Gatsby 4.3: 100% compatible with React 18
Gatsby: Using Deferred Static Generation with Analytics Tools
Partners
React-Native Weekly: stay up-to-date React-Native core updates
TypeScript Weekly: the best TypeScript links every week, right in your inbox.
ES.next News: learn about the latest in JavaScript and cross-platform tools
Tailwind Weekly: all things Tailwind CSS, new issue every Saturday
Start React Native: learn everything about gestures and animations with William Candillon
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
React-Native
There is already Storybook for React-Native, but it's different separate project from the web Storybook, with its own - fewer - addons. Danny is one of the maintainers, and offers us to use a new official plugin for React-Native-Web, converting React-Native components to equivalent web elements automatically.
The trade-offs are different: you can reuse the entire ecosystem of existing web-only addons, benefit from visual regression testing with Chromatic, or distribute more easily the storybook to stakeholders. But the React-Native components might render a bit differently or simply fail to render.
The 2 approaches seem complementary. If a component does not work, it remains possible to deactivate it with a .web.js stub.
Extras:
Reanimated 2.3: the much-awaited layout animations have landed
Developing React Native with Expo and Flipper: Jakob explains his modern dev setup with Expo, EAS and custom dev clients. He created a Flipper Expo Config Plugin so that you can debug with Flipper without ejecting.
React-Native v0.67.0-rc.5: last RC before 0.67?
PyTorchLive: run ML algos on mobile. React-Native support + Expo Config plugin.
Other
CodeSandbox open-sourced this tool to create new live interactive code experiences where you can edit some code and see a live preview. It includes a bundler that can run inside your browser (can work with npm dependencies) and a full-featured code editor. React components make it easier to integrate. The new beta React doc is using it. It looks like a modern alternative to React-Live?
Extras:
Error Cause: devtools logging has been merged in Node.js for the next v16
Open-Props.style: CSS innovative idea from Adam Argyle: instead of shipping class names (like Tailwind), it ships a collection of design tokens as CSS variables.
designcember.com: advent calendar by Google
Web Almanac 2021: lots of web-related stats, based on HTTP Archive. You might like the Jamstack section?
🎥 Top #10 Reasons why Svelte is the future: good overview, compares a bit with React and mention Vercel strategy
pg_graphql: native GraphQL extension for extension for PostgreSQL
Kysely: TypeScript SQL query builder
