This week in React
👉 Remix v1 beta
👉 Next.js 10.2
👉 Redux 4.1
👉 Babel 7.14
👉 Safari 14.1
👉 Suspense is killing me
👉 Key prop
👉 Advanced Framer Motion
👉 Design system: Stitches & Radix
👉 Airtable Flow ➡️ TS
👉 Inspx
👉 Expo + Next.js
👉 Mighty
...
🧵🧵🧵 Details 👇👇👇
Remix v1 first beta!
The React meta-framework built by @mjackson & @ryanflorence launched as a 1h30 Youtube stream:
The @vercel team is working hard to improve the Next.js DX even more.
10.2 release improves startup time, hot reload, and many other things.
The Webpack 5 rollout has started for simpler Next.js sites and should also improve rebuild times significantly
nextjs.org/blog/next-10-2
Webpack 5 support was also added to @docusaurus !
I tested myself on 20 large doc sites and also see significant rebuild time improvements, due to Webpack 5 persistent caching.
Here's ReactNative.dev rebuild time improvement!
github.com/facebook/docus…
Redux 4.1 was released by @acemarke
Reducing bundle size by extracting error messages from code, similarly to ReactJS.
Redux Toolkit Query is being added to Redux Toolkit
This will help reduce the boilerplate of using Redux as storage for API data
github.com/reduxjs/redux/…
The Suspense is killing me
@frontsideair wrote a nice timeline of the much awaited React features related to Concurrent Mode and Suspense, and how they evolved other time
Includes many links to talks and demos to understand the story
Waiting for part2
blog.6nok.org/the-suspense-i…
Why do we need the key prop in React?
Particularly when rendering arrays?
@kentcdodds explains the problem simply with an array of fruits where🍎 becomes 🍊
Thinking array ➡️ key is not necessarily the good mental model to have
epicreact.dev/why-react-need…
Another cool interactive article from @MaximeHeckel showing advanced Framer Motion tricks
AnimateSharedLayout and AnimatePresence looks nice to solve animations I've found hard to build in the past.
blog.maximeheckel.com/posts/advanced…
Another quite interactive post: @peduarte gives a nice presentation of his preferred tools to build scalable and maintainable design systems.
Stitches manage theme and design tokens, Radix the accessibility.
Looks like a convenient API to work with
ped.ro/blog/why-i-bui…
Inspx is a convenient devtool by @raunofreiberg
A React wrapper that lets you easily inspect the layout of any hovered component.
Low overhead and shortcut can be more convenient than opening Chrome devtools.
github.com/raunofreiberg/…
Expo-Next-Monorepo: convenient starter to share code between web/mobile, using React-Native-Web.
@FernandoTheRojo is progressively building an incredible ecosystem of convenient cross-platform libs, making all this easier to adopt for the rest of us!
github.com/nandorojo/expo…
It's not often we hear about a "Big Bang" TypeScript migration, as incremental adoption is more common.
Airtable migrated a large codebase from Flow to TypeScript at once, as @calebmer and @umbrant reports.
The codemod has been open-sourced!
medium.com/airtable-eng/t…
Slow Jamstack Builds: Netlify’s Solution Is Distributed Persistent Rendering
@ricmac wrote a good synthesis of the latest Jamstack trends, after the recent Netlify announcement of DPR and on-demand builders
thenewstack.io/slow-jamstack-…
Shared Element Transitions for the web?
A new WICG proposal was highlighted by @chriscoyier & @jaffathecake
This could reduce the need of building a SPA just for the client-side nav UX, and impact the current framework trends?
css-tricks.com/shared-element…
The new @babeljs v7.14 have a few cool additions:
- Newest class features (that went stage-4 recently) enabled by default
- TS 4.3 support
- support async do expressions 🥰
...
Really hope this would help the 2 stage-1 do expression proposals progress!
babeljs.io/blog/2021/04/2…
Safari 14.1 announced by @jonathandavis
Really happy to see web API support is progressing!
- Flexbox Gap
- Date/Time inputs
- WeakRef
- Intl
... many other useful things!
webkit.org/blog/11648/new…
JavaScript tooling not written in JavaScript 🧐
It is a clear trend now, is it seems using Rust, Go or C++ can often increase significantly the perf of our tools
(but not always, cf Sucrase 🤪)
@RobinCsl created a list for all those tools:
github.com/RobinCsl/aweso…
Will we keep rendering web pages locally in the future?
@suhail is building @mightyapp, a new kind of browser in the cloud that stream the UI to your computer!
This looks like an interesting trend to watch, also used in the gaming industry (Shadow...)
blog.mightyapp.com/mightys-secret…
🎬 THE END!
Going to turn these threads into emails (when I'll have more time).
✉️ Pre-subscribe here: tinyletter.com/slorber
❤️ Like this thread 🧵 ?
🙏 Please Retweet 🙏
👇 Follow the link 👇
Previous editions?
Keep reading 👇
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.