This Week In React

Share this post

This Week In React #107: Plasmo, Panapasi, Fastify-DX, Remix, Solid, useInsertionEffect, JSI, Vite, Angular, Safari...

substack.thisweekinreact.com

This Week In React #107: Plasmo, Panapasi, Fastify-DX, Remix, Solid, useInsertionEffect, JSI, Vite, Angular, Safari...

Sébastien Lorber
Jun 7, 2022
Share this post

This Week In React #107: Plasmo, Panapasi, Fastify-DX, Remix, Solid, useInsertionEffect, JSI, Vite, Angular, Safari...

substack.thisweekinreact.com

React

Plasmo - Like Next.js for browser extensions!

A new framework focused on the creation of browser extensions, based on React and TypeScript. Open-source, free core, which offers paid CI/CD cloud service.

Panapasi - The Universal UI Library

We see more and more UI libs that want to offer a native cross-framework support (see Chakra, TanStack libs...). Panapasi is to my knowledge the first project of its kind based on Mitosis, compiling a JSX Lite dialect to the target frameworks.

Fastify DX for React

New fullstack framework under development, based on Fastify and Vite. Agnostic: can be adapted to several frameworks (React, Vue, Solid...). The React integration aims to be a lightweight alternative to Next.js and Remix, based on React-Router and Valtio.

Converting a React Component to SolidJS

Converting a pagination component from React to Solid. A lot of JSX code can be taken as is, but the hooks will have to be adapted a little. Solid represents a real innovation: the code looks a lot like React in the end (without dependency array 😏) but the execution model is reactive.

Redux Toolkit’s new listener middleware vs. Redux-Saga

Nice side by side comparison of the new RTK Listener system vs Redux Saga. Compares the implementation of many use-cases. RTK Listener seems like a good lightweight alternative to Redux-Saga, with a relatively low learning curve. A good resource to choose one or the other, or to plan a migration.

React 18 useEffect Double Call for APIs: Emergency Fix

Jack gives 6 possible solutions to avoid the double query problem with React 18's StrictMode. Using a lib like React-Query or RTK-Query (hmmm, TanStack Query 😏) seems the easiest.

Extras:

  • 📖 Second draft of the useEffect guide: new beta doc

  • 📜 Remix-ing Routing in Angular: Remix is ​​framework-agnostic. Brandon shows how it can be integrated with the brand new Angular v14.

  • 📜 Setting up a dev environment with React, Vite, and Tailwind: highlights the advantages of Vite over Webpack/CRA.

  • 📜 Know about the useInsertionEffect hook in React 18: presentation of a hook intended for authors of CSS-in-JS libs. Allows styles to be inserted at the best time.

  • 📜 Modulz has been acquired by WorkOS: gives details on the maintenance of their popular React libs Radix and Stitches.

  • 📜 The Case For Prisma In The Jamstack: explains the interest of combining Prisma with various frameworks like Next.js or Redwood.

  • 🐦 React Server Components + SSG/ISR: it will be possible to use Server Components with static generation: the SSG framework will output static .rsc files.

  • 🐦 useRef<HTMLElement> + TypeScript contravariance: my analysis + 2 suggested solutions.

  • 🐦 CSS @scope + React: upcoming CSS feature that could be useful for the React component model and encapsulation

  • 📦 TanStack: TanStack libs are gradually becoming framework-agnostic! TanStack Query, TanStack Virtual, TanStack Table...

  • 📦 Remix-Flat-Routes: package to support a flat file-system routing convention for Remix. Gives good arguments for using it.

  • 📦 Jest-Image-Snapshot: visual regression testing tool. New v5 upgrades to Jest 28. Best used with Storybook StoryShots.

  • 📦 Recoil Relay 0.1.0

  • 🎥 Redwood in 100 Seconds

💸 Sponsors

💡 How to sponsor this newsletter

Axiom - Zero-Config Observability for Vercel

Axiom enables you to monitor the health and performance of your Vercel deployments by ingesting all your request, function, and web vitals data.

Use Axiom's pre-built dashboard for an overview across all your Vercel logs and vitals, drill down to specific projects and deployments, and get insight on how functions are performing with a single click. 

PS: I use it myself to monitor the newsletter signups 😉

Meteor’s Biggest Online Event: Looking For Speakers! ☄️

The Meteor Impact conference is coming back this year and will be taking place on October 13th and 14th!

If you’re new to Meteor, it is is an open-source framework for seamlessly building and deploying Web, Mobile, and Desktop applications in Javascript.

We anticipate this year’s event to be the biggest and the best Meteor Impact conference ever!

We are now looking for speakers who are interested in participating in the conference.

You can submit your talk proposal by clicking here. We hope to see you in October!

React-Native

React Native JSI/TurboModules pitfalls

Oscar has significant JSI exprience: he is the author of React-Native packages, and a Youtube playlist dedicated to JSI. He gives us interesting feedback on the use of various languages ​​for the native side, or on the difficulty to benchmark appropriately JSI compared to the old bridge architecture.

Extras:

  • 🧵 React-Native @ Shopify: VP Engineering at Shopify gives update on internal usage, and the significant Shopify contribution in the ecosystem.

  • 🐦 It's Flutter but in React Native... but in ReactJS…: React-Native-Skia also works on the web thanks to Flutter CanvaKit

  • 🐦 Multiplying 2 numbers: React-Native bridge vs JSI benchmark

  • 📦 react-native-lightbox

Partners

  • Start React Native: learn everything about gestures and animations with William Candillon

  • Adventures in Nodeland: Matteo writes about his journey as a Node.js TSC member and maintainer of 500+ modules on npm, including Fastify and Pino!

  • 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

Other

WebContainers are now supported in Firefox

This StackBlitz's innovation allows you to run Node.js code directly in the browser, including React frameworks like Next.js, Remix, Docusaurus... It has just taken a big leap forward with this new Firefox support (in addition to Chrome).

Extras:

  • WebKit Features in Safari 16 Beta: CSS Container Queries, Web Push (in 2023) 🤯

  • Safari Technology Preview 146: with Change Array by Copy ❤️️

  • You may not need a bundler for your NPM library

  • Using yup and typescript for typesafe select validation

  • Angular 14

  • Node.js 18.3 parseArgs

  • Chrome - How and why we built Performance Insights

  • WebPageTest - Opportunities & Experiments

  • Why most design systems implode

Twitter avatar for @molly_struve
Molly Struve 🦄 @molly_struve
No. Just no. https://t.co/BlngqRREgG
Image
8:49 PM ∙ Jan 18, 2023
Share this post

This Week In React #107: Plasmo, Panapasi, Fastify-DX, Remix, Solid, useInsertionEffect, JSI, Vite, Angular, Safari...

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