This Week In React #88: Remix, Next.js, React 18, Storybook, Skia, Expo, Turborepo, Nx, Rising Stars, Learning Patterns...
This Week In React #88: Remix, Next.js, React 18, Storybook, Skia, Expo, Turborepo, Nx, Rising Stars, Learning Patterns...
React
I really like this conf format. The talks are very short and to the point (inspired by Next.js conf? 😏). It's easy to find the time to watch them. My Twitter thread also allows you to skim over the highlights.
Beautiful year for Storybook doing a 2021 retro: Webpack 5, Vite builder, automatic code splitting, faster, smaller... There is also a new ESLint plugin, and they have published an useful UI Testing Handbook
In 2022 we will continue to see great improvements: tests, performance, ESM, stability, embeds and integration with design/documentation tools...
As a cross-platform enthusiast, I'm most excited about the React-Native-Web support that was recently released!
Extras:
Articles about new React 18 hooks: useId et useSyncExternalStore
Create-React-App v5: much awaited upgrade, includes Webpack 5 support
Blitz potential pivot: this Next.js fork has interesting unique features but does not take off compared to Next.js. The project could pivot to a framework-agnostic Blitz Toolkit (more emphasis on useful backend-related features) and help users migrate to Next.js + Blitz Toolkit.
React Three Fiber Journey: new resource helps you follow the popular Three.js Journey course (3D) using React
Remix 1.1: Node.js ESM, Cloudflare Pages support
Remix: no static export planned, but wget is suggested 🤔 why not?
remix-routes: CLI to generate TS typesafe routing (see also pathpida for Next.js).
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
React-Native
Skia is Google's 2D graphics engine powering Flutter, Android, Chrome, Firefox...
A Skia renderer for React-Native has just been released, supported by Shopify, and implemented by William Candillon and Christian Falch.
A powerful imperative API (uses JSI, without bridge), 100% compatible with the Flutter one in Dart. This compatibility allows the reuse of CanvasKit (Skia's WebAssembly build) to get a powerful web rendering for free using React-Native-Web 🤯 The animations of the great presentation video are already using this web support through Remotion.
Above this low-level API, a very intuitive declarative API, which integrates nicely with animation libs like Reanimated. All this will eventually be available in Expo!
Ricky Hanlon at React-Conf: "We are not building React for individual platforms, and we are not building for the lowest common denominator".
A fundamental difference between React-Native and Flutter:
Flutter smoothen the differences across platforms: it can save time initially, but you can also reach dead ends with some platforms (like for the web: perf and SEO ...)
React-Native doesn't smoothen these differences, and it's 100% voluntary. We can choose to optionally smoothen them only when it makes sense (with this new project for example)
This is the reason why I bet on React: an incredible flexibility to interface with native platforms and re-use innovations from other ecosystems. We see it with mobile, web, Desktop, Skia, Three.js... and soon VR?
SDK 44 is now available, still based on React-Native 0.64.3.
EAS Update in preview: a great new service that should significantly improve DX of Over-The-Air updates. It should catch-up with CodePush on some useful features (rollout, rollback, promote...) and the DX should become one step closer to what we are used to on the web: deploy previews, continuous deployment.
expo-dev-client 0.8.0: new UI, better error handling, Flipper integration...
Upgrades Software Mansion libraries: Reanimated, RNGH, Screens...
New modules to customize navbar/background (demo).
Extras:
React-Native doc: new tab Architecture is online.The new architecture adoption playbook is still being worked on (PR)
🎙️ React-Native-Radio 222 - The New Architecture with Kevin Gozali from the RN core team. Good summary in Andrei Calazans' newsletter.
Other
2021 JavaScript Rising Stars
Great overview of all the popular JavaScript projects in 2021 (based on GitHub stars), including many useful comments. A good way to catch-up with what you may have missed in 2021.
I had the opportunity to comment the Build Tools section.
Why TurboRepo Will Be The First Big Trend of 2022
Swyx wrote a good intro to Turborepo, particularly useful if you don't have time to watch the video.
Note: Nx is a similar project, older and more featured (growing fast this year). They created a page to compare Nx and Turborepo. Jared Palmer comments: "Turbo aims to underdo the competition": do less (on purpose) and be a simpler tool. In my opinion there's room for both, and we should see them grow in 2022.
See also 🎥 Video with Swyx + Nx creators: just published
Extras:
Learning Patterns: awesome and very polished book and online resource to learn design, rendering and performance patterns, with some emphasis on React.
Updates from the 87th meeting of TC39: array groupBy stage 3. Intl and Regexp progress. Side-note: Records & Tuples has been simplified (no more Box) so that the proposal has a chance to process
Why Vitest: Vitest aims to replace Jest 😏
JavaScript for impatient programmers ES2022 update
