This Week In React #108: App.js, Fresh, Reassure, Million, Hydrogen, Gatsby, Treasured, WebComponents, React-Native-Web, Zeego, TC39...
This Week In React #108: App.js, Fresh, Reassure, Million, Hydrogen, Gatsby, Treasured, WebComponents, React-Native-Web, Zeego, TC39...
React
Fresh - The next-gen web framework.
Luca Casonato (Deno core team) unveils a new meta-framework for Deno based on Preact. Shares some common points with Next.js and Remix (FS routing, progressive enhancement). Islands architecture for hydration. No build step: compile on the fly. To be tested!
Reassure
A new performance testing tool for React should be open-sourced next week. Measures and counts renders of a given scenario, snapshot them, and generates a report on changes (possible to publish in a PR). Announced at App.js, the tool only supports React-Native for now: web support will come later.
Million.js
Million is a Virtual DOM solution supported by Vercel, which proposes to use a compiler to improve performance and reduce size (inspired by Svelte). The Million + React integration package has just been released. All this seems promising, but not yet ready for production.
Gatsby Launch Week
A digest of the latest Gatsby news, with detailed blog posts on each topic. Some of those topics:
Script Component
GraphQL TypeGeneration
Image CDN GA
Incremental Deploys for All Builds
Shopify - Best-in-Class DX with Vite and Hydrogen
Interesting feedback on the usage of Vite in the Shopify Hydrogen meta-framework. There are advantages in terms of DX via the use of ES modules in dev, but also for the SSR and the integration of React Server Components thanks to its plugin system.
Extras:
📜 How to useMemo and useCallback: you can remove most of them: interesting reflection on the use of memoization hooks
📜 Stress Testing Concurrent Features in React 18: A Case Study of startTransition & 3D Rendering: nice demo that shows the advantages of Concurrent React to keep UI responsive. Based on React-Three-Fiber.
📜 Unit Testing React without Jest: shows how to replace Jest with the Node.js 18 built-in test runner. It's a good start, but doesn't cover everything: mocking, snapshots...
📜 Building Interoperable Web Components That Even Work With React: the official support of Web Components is still expected in React. Possible solution: create a wrapper.
📜 Giving Jest-Preview a Spin: feedback on this new practical tool
📜 First look at Joy UI: new design-system, by MUI
📦 styleQ: to concatenate classNames in an optimal way (with a memoization system), for CSS compilers. Published by Nicolas Gallagher, this lib is now used in React-Native-Web 0.18.
📦 Treasured: a SDK to convert Unity 3D scenes to web through React-Three-Fiber
📦 Relay 14
🐦 The Joy Of React: Josh Comeau's upcoming React course.
💸 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 😉
Scale Your Meteor Apps Confidently With Minimal DevOps
Meteor Cloud is the only full-service cloud solution engineered for Meteor apps.
You’ll be able to host and scale your Meteor app with ease, monitor performance, and reduce time spent on DevOps, all from one centralized dashboard.
Configure your hosting needs to your exact specifications or use intuitive out-of-the-box features designed by long-time Meteor developers.
Save $1,000's per month on DevOps costs with the additional comfort of knowing your app is supported by in-house Meteor experts. Sébastien’s readers get a special 30% OFF discount. Grab the offer here!
React-Native
App.js - Mon résumé sur Twitter
It's hard to summarize everything exhaustively. With Expo, mobile DX continues to improve. There is a real craze for web support! New tools available for performance monitoring. Various useful links:
🧵Expo Dev Tools Keynote: EAS Metadata, versioned CLI, config plugins, universal Metro, lazy bundling...
🧵 Sketches: David created sketches for each talk of the conference, giving a good overview.
🐦 Expo Sweet Modules: A new API to facilitate the creation of native Swift/Kotlin modules will be released in Release Candidate this week.
🐦 Shopify FlashList: a powerful alternative to FlatList that will be released soon.
📦 Zeego: cross-platform menu components, from Fernando Rojo.
📦 Universal Design System: Showtime has open-sourced its frontend and cross-platform design-system.
React Native for Web 0.18
React 18 support, introduction of the new styleQ runtime, removes support for older browsers, various improvements. A step toward the ability to statically extract CSS? Nicolas Gallagher questions the usefulness of his project 🤔.
Extras:
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
Updates from the 90th TC39 meeting
Various progress of proposals. I'm especially happy for "Symbols as WeakMap keys" in stage-3. It's an important step to be able to use Records & Tuples with React someday 🤗.
Extras:
