View profile

This Week In React #106: Remix, Framer Motion, Storybook, Gatsby, Remotion, Metro, Lerna, TypeScript, Three.js, LocatorJS, Tailwind...

This Week In React #106: Remix, Framer Motion, Storybook, Gatsby, Remotion, Metro, Lerna, TypeScript, Three.js, LocatorJS, Tailwind...
By Sébastien Lorber • Issue #106 • View online
Hi everyone!
We have a few interesting news related to Remix this week! This was expected, after last week’s Remix Conf.
I’m going to App.js conf next week: say hi if you go too! 😉
🙏 Support the newsletter:

React
Already announced in Remixing React Router: many Remix abstractions (action, loader…) will be added to React-Router. This is happening in v6.4, currently in pre-release. Doc for the new Data APIs is already available!
Matt is the author of many popular animation libraries. He explains in a nuanced way the difference between a declarative and an imperative model. Most React developers should use the declarative Framer Motion library. Motion One is a lightweight, low-level imperative library that wants to be the “JQuery for Web Animations API”.
Extras:
💸 Sponsors
Meteor or also known as MeteorJS is still alive and well, and we’re happy to share that we are also growing!
Meteor is a mature and open-source framework for seamlessly building and deploying Web, Mobile, and Desktop applications in Javascript.
Use popular frameworks like Vue, React, Svelte, or Blaze and tools right out of the box. Focus on building features instead of configuring disparate components yourself.
Whether you’re still studying to become a developer or a seasoned veteran, you’ll find it convenient and easy to code with Meteor. Join the community of developers from all over the world that rely on Meteor. Get started here!
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. 
React-Native
Jay explains the 3 main challenges of the web/mobile cross-platform today: styling, animation, navigation. He suggests to use Tailwind-React-Native with his new cross-platform animation library. Legend Motion relies on the same API as Framer Motion (web-only). The doc briefly explains the differences with Moti, another similar solution.
Extras:
  • 📦 Tailwind-React-Native: looks nice to use Tailwind in a cross-platform way. Mobile: className + Babel plugin. Web: just forwarding the className to a React-Native-Web element.
  • 📦 React-Native-Esbuild: to very easily replace Metro with esbuild and compile much faster. A few limitations to consider: no Hermes nor Fast Refresh.
  • 🎙️ RNR 237 - React Native on Desktop
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
Build and hot-reload times have skyrocketed at Airbnb. They decided to replace Webpack with Metro (the React-Native bundler 🤯) and saw a significant improvement. This article highlights some architectural differences between the 2 bundlers, and the challenges encountered during this migration. Note: Stripe also uses Metro 🤔.
Nwrl (behind Nx) just took the leadership of the unmaintained monorepo tool Lerna. They have already released a v5.0 and started integrating Nx into Lerna 5.1-beta as a retrocompatible option. A simple Lerna config useNx: true and your build becomes immediately faster.
Extras:
Matthias Schmidt
Airbnb moves from Webpack to Metro because it's faster. React Native folks move from Metro to esbuild because it's faster. I think I'll just do nothing for 2 more years and maybe the community will have settled on something fast-enough™. https://t.co/1aVluGU7Ux
Did you enjoy this issue?
Sébastien Lorber

📨 For React and React-Native developers ⚛️ I filter out the noise 🔊 You save time ⏱️ Stop losing your time scrolling on Twitter! 🐦

⚠️ The newsletter has moved!
➡️ Go to ThisWeekInReact.com

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue