This Week In React #96: Next.js, Gatsby, Remix, Remotion, React-Native, Glassmorphism, Deno, TypeScript, Qwik...
React
Comparing Gatsby and Next.js for website development
Alex explains why his agency prefers Gatsby over Next.js for website development. It's pretty well argued. Gatsby is not very fashionable at the moment but I think it's still a good solution to ship a website quickly and easily integrate with a CMS out-of-the-box.
Optimizing third-party script loading in Next.js
Presentation of the work of the Aurora team at Google who worked on the <Script> component of Next.js, optimizing the loading of third-party scripts. There may be an upcoming integration with Partytown, to run these scripts in a worker.
Moving from Next to Remix
Adam shares his motivations for migrating his site from Next.js to Remix, as well as many other details (Prisma, Planetscale, UnoCSS...). Next.js remains a good choice. He really likes how Remix handle forms.
Interaction Testing with Storybook
Storybook now offers an interaction testing system (beta) co-located with stories to test components with Jest, Playwright and Testing Library. That looks quite convenient.
Extras:
🐦 React-18 RC1: should be released soon
🐦 Rachel Nabors leaves the React team at Meta after greatly contributing to the new beta React docs site and React-Native docs.
💬 Mark Erikson suggests to create a React Docs Working Group.
📜 Doordash: Building a Marketing Engineering Platform using Next.js, Cloudflare, and Contentful
👥 GatsbyConf 2022: 2-3 March
📦 Redux Toolkit 1.8: listener side-effect middleware inspired by Redux-Saga: dispatch actions in reaction to other actions
📦 Gatsby 4.8 + Gatsby 4.9: improves TypeScript support, reduces memory footprint
📦 Docusaurus 2.0 beta.16: swizzle CLI, breadcrumbs...
📦 GraphCMS Docs Starter: Remix + Tailwind
📦 Headless UI 1.5: with Combobox
📦 Radix UI: release with Select, NavigationMenu and Toast
💸 Sponsors
React Bricks: CMS with visual editing for Next.js, Gatsby and Remix, based on React components
Content creators don’t like the grey forms of a headless CMS.
Visual tools like Wix or Webflow are either not flexible, complex to use or too flexible: a content creator should not decide on a margin, right?
React Bricks has the best of the 2 worlds: all the advantages of a Headless CMS and best in class Visual editing experience with no way to break the design system.
You create visually editable content blocks as React components using the react-bricks library. Content creators use these blocks to compose content with all the freedom they want and no more than they need.
Learn it in about 2 hours with the Step-by-step tutorial or the full Documentation.
Create your free account and start building now
React-Native
React Native New Architecture Working Group
GitHub discussions repo to support the rollout of the new React-Native architecture. Read-only but possible to request an invitation. Quite similar to the React-18 Working Group. Already a few interesting subjects under discussion.
Extras:
🐦 React-Native 0.68: pre-release announced as available (now in RC2)
🎥 Glassmorphism in React Native: last Skia video from William Candillon, nice demos of what is now possible in React-Native using blur/backdrop filters
🎙️ RNR 227 - Better React Native Tooling with Tommy Nguyen and Adam Foxman: Microsoft engineers presenting rnx-kit
Partners
Start React Native: learn everything about gestures and animations with William Candillon
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
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
How to publish Deno modules to NPM
Kitson introduces dnt, a tool for transforming Deno code into Node.js compatible code. They managed to publish the Deno oak http framework on npm, but it is not without any challenges. I find this very encouraging: it should drive incremental adoption of Deno. As a TypeScript library author, I definitively want to target both ecosystems so that's a really good incentive to give Deno a try on a small lib.
Why Progressive Hydration is Harder than You Think
Miško Hevery is the creator of Angular, he is now working on Qwik, a new generation framework with a strong focus on progressive hydration. It will be difficult for current existing frameworks to fully support this concept without changing mental models. It's not an afterthought for Qwik, unlike other frameworks.
Extras:
