This Week In React

Share this post

This Week In React #88: Remix, Next.js, React 18, Storybook, Skia, Expo, Turborepo, Nx, Rising Stars, Learning Patterns...

substack.thisweekinreact.com

This Week In React #88: Remix, Next.js, React 18, Storybook, Skia, Expo, Turborepo, Nx, Rising Stars, Learning Patterns...

Sébastien Lorber
Jan 4, 2022
Share this post

This Week In React #88: Remix, Next.js, React 18, Storybook, Skia, Expo, Turborepo, Nx, Rising Stars, Learning Patterns...

substack.thisweekinreact.com

React

Official blog post presenting the various talks of the conference. Those related to React 18 have a more detailed summary.

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.

Yang has worked a lot with Next.js. He explains how Remix is different very clearly and addresses potential objections. Forms, progressive enhancement, hydration, SSR vs SSG, routing, head links, data fetching, deployment ...

The Remix abstractions look really elegant. They answer real problems that I've encountered regularly: progressive enhancement, layout which unmount / remount, order of CSS, validation of duplicated forms... Remix is definitively a framework to keep an eye on!

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

  • React Architecture Patterns for Your Projects

  • 6 simple tips for working with React and TypeScript

  • Introduction to Redux Toolkit Query with TypeScript

  • Next.js on Netlify: full ISR support

  • Remix 1.1: Node.js ESM, Cloudflare Pages support

  • Remix plans to be framework-agnostic 🤯

  • Remix: no static export planned, but wget is suggested 🤔 why not?

  • HTTP vs. Server-side Cache in Remix

  • On-Demand Hydration in Remix

  • remix-routes: CLI to generate TS typesafe routing (see also pathpida for Next.js).

  • Nx: new Remix plugin

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.

  • Tamagui for React Native: Create faster design systems

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.

  • Creating custom generic TypeScript utility types

  • 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

  • Deep-copying in JavaScript using structuredClone

  • State of CSS 2021

  • CSS in 2022

  • State of the Web: WebAssembly

  • Jamie Kyle left the Rome project.

  • Is It Time for the JavaScript Temporal API?

Twitter avatar for @jsjoeio
Joe Previte @jsjoeio
Me waiting for Vercel to acquire my open source project https://t.co/niFWDrjWV4
Image
8:49 PM ∙ Jan 18, 2023
Share this post

This Week In React #88: Remix, Next.js, React 18, Storybook, Skia, Expo, Turborepo, Nx, Rising Stars, Learning Patterns...

substack.thisweekinreact.com
Previous
Next
Comments
TopNewCommunity

No posts

Ready for more?

© 2023 Sébastien Lorber
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing