This Week In React #89: Remix, Remotion, Preact, Nextra, Relay, JSI, Skia, SwiftUI, TypeScript, web3...
React
Some Thoughts on Server State in Remix
An interesting thought on the management of state and server calls in Remix, which is designed to work with as well as without JavaScript on the client side. It can fall back to plain old browser behavior and JS is just a bonus.
Run Next and Remix on the same server
An interesting setup, which shows that we can mix Remix and Next.js inside the same Node.js server. This help design an incremental migration strategy to adopt or assess Remix.
Remix, SQLite, and Prisma, Oh my!
Another nice demonstration of the features of Remix. Being able to call Prisma from loader functions is quite powerful. It reminds other solutions like Next.js (but in a more co-located way) and server components.
Latest release for this React video production lib. The Remotion player is now stable. A new Error Overlay and an Audiogram template. The next release will surely be 3.0 with AWS lambda serverless rendering support and the ability to encode videos very quickly!
Extras:
Avoid waterfalls of queries in Remix loaders: even if Remix manages to parallelize the requests, you still have to use
Promise.all ()inside a loader functionRemix is recruiting: remote-first, min 4h overlap with USA
Preact now has a Tutorial: 10 minutes to learn this React lightweight alternative with a nice code editor ad preview
Relay 13.0: including the new Rust compiler
Nextra 2.0 work-in-progress: nice stack planned for this upgrade of the Next.js SSG (docs/blog) tool. Good competition for Docusaurus 😯
Three ways to create 3D particle effects: for those like me learning Three.js 😏
💸 Sponsors
Remixtape - Modern SaaS boilerplate for building better websites
Jumpstart your next SaaS with the modern Remix boilerplate that includes everything you need to build better websites.
Save months of development time and skip implementing standard functionality like authentication, account management, sessions, subscription payments, billing management, teams, transactional emails, and more.
Remixtape gives you a solid foundation to build great web apps today and scale with you tomorrow.
Sébastien's readers get a special 30% OFF discount. Grab it here!
React-Native
A React Native Engineer Builds A SwiftUI App
A React-Native dev trying SwiftUI. Knowledge of React and its declarative model is reusable. Positive feedback on animations, navigation and the SwiftUI "hot reload". Mixed feedback on error messages, nested syntax, and a few other details.
Extras:
react-native-reanimated-carousel: new modern carousel lib based on Reanimated 2, actually maintained
Marc Rousavy upgrades us to JSI with react-native-jsi-image & "react-native-camera has now been deprecated in favor of react-native-vision-camera"
An overview of all keyboard types available in React Native: convenient cheatsheet resource
App.js conf returns in June, CFP opening tomorrow
docusaurus-react-native-plugin: React-Native-Web support 😍
🎥 The Matrix Reacts: 1st React-Native-Skia tutorial from William Candillon, with a great Remotion intro 😉
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
Great article from Stefan Baumgartner, full of good advice with which I fully agree. This should make it easier to get started with TypeScript and to gradually increase your skills without tears and pain. TIL about the noEmitOnError flag.
A New Container Query Polyfill That Just Works
Chris Coyier's analysis on a new polyfill for container queries: a new, eagerly awaited CSS feature extremely useful for the encapsulation of responsive design (media queries) in component-based frameworks like React. This polyfill looks usable today for client-rendered apps, if you need SSR support it will unfortunately lead to FOUC until browsers support this.
Great post about the “web 3” from the Signal app creator, showing some surprisingly weird things in the current state of blockchain and NFT technologies. Many great answers from Web 3 leaders (like Vitalik). Also worth reading: The Myth of Decentralization and Lies about Web 2.0.
This lib allows Node.js to interact efficiently with Rust code, and is increasingly used in our modern frontend tooling. V2 is a backward compatible rewrite that resolves some existing limitations, provide some automated binding files generations and new features. WebAssembly support planned.
Extras:
Browser-Vite: new innovation to run Vite inside your browser, using service workers. Interesting comparison with Stackblitz WebContainers de StackBlitz in the end.
Partytown in beta: lib to improve web perf by off-loading third-party scripts in service workers. Now in beta, looking for feedback to make it production ready. Exploring new implementation based on Atomics for page<->SW communication (instead of XHR sync)
AWS Lambda now supports ES modules et top-level await!
An open-source maintainer willfully sabotages his own npm packages colors & faker.js to denunciate the lack of open-source funding
Prettier begins paying maintainers: but... not enough for 1 person full-time, yet this lib is used by the whole JS industry 😅 crazy times
We wonder who's gonna hire Jamie Kyle… 😏
Svelte Core Team Mulls Rust Compiler to Further Speed Web Apps
Solid 1.3: notable improvements on server rendering which supports streaming, error boundaries and “Islands architecture” hydration inspired by Astro
Tina: New Year, New CMS? really need to try it, the native MDX support is appealing
fast-json-stringify 3.0: reported as 2x faster than JSON.stringify
Introducing fuite: a tool for finding memory leaks in web apps
