This Week In React

Share this post

This Week In React #85: FloatingUI, Remix, Redwood, Rails, Relay, Storybook, Gesture Handler, Flipper, Sandpack, Open-Props...

substack.thisweekinreact.com

This Week In React #85: FloatingUI, Remix, Redwood, Rails, Relay, Storybook, Gesture Handler, Flipper, Sandpack, Open-Props...

Sébastien Lorber
Dec 7, 2021
Share this post

This Week In React #85: FloatingUI, Remix, Redwood, Rails, Relay, Storybook, Gesture Handler, Flipper, Sandpack, Open-Props...

substack.thisweekinreact.com

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 useAnimationFrame hook

  • Demo: the 1st stage of Three.js Journey has been converted to React-Three-Fiber and code looks quite clean and composable.

  • React growth continues to accelerate

  • 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

  • Next.js for Drupal 1.0

  • 3D CSS Flippy Snaps With React And GreenSock

  • How To Maintain A Large Next.js Application

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

The v2 of this gestures lib has just been released, with a redesigned APIs, but backwards compatible. Integrates well with Reanimated 2 worklets.

Highlights:

  • a <GestureDetector> component and an API for constructing gestures. This should simplify app code and make it easier to compose gestures into more complex ones

  • a "Manual Gesture" and "touch events" for advanced use-cases

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.

  • Expo EAS supporte les webhooks

  • Evan Bacon à propos de la vision Expo

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

  • API structuredClone soon available everywhere

  • GitHub Actions supports Node.js v16

  • Kysely: TypeScript SQL query builder

  • How we cut 99% of our JavaScript with Qwik + Partytown

  • Web3 is Bullshit: 🍿

Twitter avatar for @mxbck
Max Böck @mxbck
Dev: can you send me the asset as SVG please? Designer: sure thing https://t.co/x5W5pAnOvE
Image
8:49 PM ∙ Jan 18, 2023
Share this post

This Week In React #85: FloatingUI, Remix, Redwood, Rails, Relay, Storybook, Gesture Handler, Flipper, Sandpack, Open-Props...

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