This Week In React #106: Remix, Framer Motion, Storybook, Gatsby, Remotion, Metro, Lerna, TypeScript, Three.js, LocatorJS, Tailwind...
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:
- 😘 Recommend it to your friends: it really helps!
- 💸 Sponsor This Week In React
- 😍 Write testimonials on Twitter
- 🧵 Retweet the latest Twitter thread
- 📨 Reply to this email: feedback is welcome
- 👥 Follow on LinkedIn
If you like this newsletter, subscribe in priority there:
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!
Should you use Framer Motion or Motion One?
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:
- 📜 Making Videos with Code is Cool, but is it Productive?: feedback explaining that Remotion + Screenflow can be used in tandem.
- 📜 We rebuilt Cloudflare's developer documentation - here's what we learned: from Gatsby/MDX to Hugo
- 📜 Working With Three.js: The Popular 3D JavaScript Library + Working With 3D Model in Three.js: nice intro tutorial to discover Three.js in CRA with React-Three-Fiber.
- 📜 How FedEx Influenced the React Logo
- 📜 High-Performance Personalization with Next.js Middleware
- 📜 React start losing its way
- 📜 React project structure for scale: decomposition, layers and hierarchy
- 📦 Storybook 6.5: great release: interaction testing, Webpack 5 lazy compilation, Vite builder, React 18, MDX 2, Figma plugin...
- 📦 LocatorJS: browser extensions to rapidly open a React component in your IDE by clicking on the UI.
- 📦 Remix-Three: integration package for Remix and React-Three-Fiber
- 📦 TanStack Table v8 beta: React-Table has been made framework-agnostic, and renamed accordingly. Adapters available for React, Solid, Svelte, Vue...
- 📦 Microsoft FluentUI React v9 RC: Microsoft design-system Storybook, used on Office
- 📦 Gatsby 4.5: Script component + GraphQL Type Generation
- 📦 Jotai 1.7
- 🎥 Reactathon Conf 2022 playlist
- 🎥 Remix Conf 2022
- 🧑🎓 Up and Running with Remix: free course by Kent C. Dodds
- 🐦 Remix feedback: Jamie Kyle, Sarah Dayan
- 🐦 Remix VueJS Support?
- 🐦 Dan Abramov optimizing the new React doc site: interesting takeaways, in particular using Suspense to enable non-blocking hydration
- 🐦 Reco: avoid runtime CSS-in-JS lib
💸 Sponsors
💡 How to sponsor this newsletter
Meteor Celebrates 10 Years in the Javascript Ecosystem
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 - 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 😉
React-Native
React and React Native finally feel the same
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 theclassNameto 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
Other
Airbnb - Faster JavaScript Builds with Metro
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 🤔.
How Lerna just got 10x faster!
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:
- The balance has shifted away from SPAs: the need to have a SPA decreases with the addition of new web APIs which make certain experiences now possible in MPAs
- XState Test v1 Alpha released: use state machines to generate all possible paths when testing? 🤔
- Parcel 2.6: the scoping of CSS vars looks like an interesting idea 🤔
- TypeScript 4.7: with ES Modules support
- Babel 7.18.0: with TS 4.7 support
- A new way to test types
- How we converted our Node.js library to Deno (using Deno)
- Byte sized TypeScript #1 - Filter type
- Advanced TypeScript: How we made our router typesafe
- Playlist Advanced TypeScript Matt Pocock
- Monorepos in JavaScript & TypeScript
- Type-Trident: a curated list of advanced type level madness
- Tailwind - Headless UI v1.6
- Processing Arrays non-destructively: for-of vs .reduce() vs .flatMap()
- Lesser-Known And Underused CSS Features In 2022
- Dark Mode Toggles Should be a Browser Feature
- Electron 19.0.0
- Chrome 103 Beta
- GitHub is now free for teams
- Angular's Vision for the Future
