🧵 This Week In React
👉 Remix: server state, waterfalls, + Next, + Prisma
👉 Remotion 2.6
👉 Preact Tutorial
👉 Relay 13
👉 3D particles
👉 RN ➡️ SwiftUI
👉 JSI
👉 Skia
👉 TypeScript
👉 Container Queries
👉 Browser-Vite
👉 NAPI-RS 2
...more by email! ✉️
🧵 Details 👇
🧵 Intro
No big unexpected React announcement this week, but a good variety of interesting reads!
@remix_run continues to get great marketing from its early adopters!
✉️ Subscribe by email or read this online (more content inside)
➡️ ThisWeekInReact.com
@remix_run 🧵 Some Thoughts on Server State in Remix by @_zachdtaylor
Showing another time how @remix_run abstractions are created to run with or without JS, including the loader function.
JS = bonus. Remix can fall back to good old browser behavior
zachdtaylor.com/blog/some-thou…
@remix_run @_zachdtaylor 🧵 Remix, SQLite, and Prisma, Oh my! by @jonrcrowell
Nice overview of a few @remix_run features: links/CSS, Outlet, loader function...
I really like the ability to query server data (here Prisma) on the loader: this reminds NextJS but more co-located
fullstackfish.com/posts/2021-12-…
@remix_run @_zachdtaylor @jonrcrowell 🧵 Run Next and Remix on the same server by @sergiodxa
Showcase an interesting setup where Next.js and Remix work together inside a single Node.js server.
Looks interesting for incremental migration strategies.
sergiodxa.com/articles/run-n…
@remix_run @_zachdtaylor @jonrcrowell @sergiodxa 🧵 Avoid waterfalls of queries in Remix loaders by @sergiodxa
@remix_run is generally good at parallelizing work and avoiding waterfalls
Yet you are not exempted from combining promises in loader functions
sergiodxa.com/articles/avoid…
@remix_run @_zachdtaylor @jonrcrowell @sergiodxa 🧵 Preact Tutorial by @_developit
10 minutes to learn this lighter React alternative
Includes a live code editor + preview
preactjs.com/tutorial/
@remix_run @_zachdtaylor @jonrcrowell @sergiodxa @_developit 🧵 Remotion v2.6 by @JNYBGR
Create videos with React 👌
Stable player to create live video editing previews
New error overlay
Most exciting: the next release is likely 3.0 with serverless support (AWS lambda). Will be much faster to produce videos!
remotion.dev/blog/2-6
@remix_run @_zachdtaylor @jonrcrowell @sergiodxa @_developit @JNYBGR 🧵 Relay v13.0 by @alunyov
github.com/facebook/relay…
Stable release including the brand new Rust compiler.
Read this other blog post about it:
relay.dev/blog/2021/12/0…
@remix_run @_zachdtaylor @jonrcrowell @sergiodxa @_developit @JNYBGR @alunyov 🧵 A React Native Engineer Builds A SwiftUI App, by @async
Interesting feedback.
React declarative model knowledge is reusable.
Good: animations, navigation, hot reload is good...
Bad: error messages, nested code pyramid...
medium.com/async/a-react-…
@remix_run @_zachdtaylor @jonrcrowell @sergiodxa @_developit @JNYBGR @alunyov @async 🧵 react-native-reanimated-carousel by @doho_1016
New lib fully implemented in Reanimated 2
Active maintainer, many examples
Should help replace the various legacy libs solving a similar problem 👌
github.com/dohooo/react-n…
@remix_run @_zachdtaylor @jonrcrowell @sergiodxa @_developit @JNYBGR @alunyov @async @doho_1016 🧵 react-native-jsi-image 🆕 + react-native-camera deprecated ⚠️
@mrousavy is slowly upgrading our dear React-Native ecosystem to JSI, one lib at a time
github.com/mrousavy/react…
@remix_run @_zachdtaylor @jonrcrowell @sergiodxa @_developit @JNYBGR @alunyov @async @doho_1016 @mrousavy 🧵 An overview of all keyboard types available in React Native by @flexbox_
Simple yet useful cheatsheet resource with screenshots of the various React-Native keyboards
iOS & Android side by side
+ some extra tips
davidl.fr/blog/keyboard-…
@remix_run @_zachdtaylor @jonrcrowell @sergiodxa @_developit @JNYBGR @alunyov @async @doho_1016 @mrousavy @flexbox_ 🧵 The Matrix Reacts
First React-Native-Skia tutorial by @wcandillon
Worth watching even if you are not into React-Native, even just for the Skia+Remotion Matrix intro 👌
(because obviously, it works on web + video too 😏)
@remix_run @_zachdtaylor @jonrcrowell @sergiodxa @_developit @JNYBGR @alunyov @async @doho_1016 @mrousavy @flexbox_ @wcandillon 🧵 How not to learn TypeScript by @ddprrt
Great post, might help you learn TypeScript efficiently & incrementally
Mistakes:
- Ignore JS
- Annotate everything
- types vs values
- Going all-in in
- Learn the wrong TypeScript
TIL: noEmitOnError
fettblog.eu/how-not-to-lea…
@remix_run @_zachdtaylor @jonrcrowell @sergiodxa @_developit @JNYBGR @alunyov @async @doho_1016 @mrousavy @flexbox_ @wcandillon @ddprrt 🧵 A New Container Query Polyfill That Just Works
Great @chriscoyier analysis of the polyfill from @DasSurma
CQ are very important for media query encapsulation with React components model.
Polyfill looks usable today, but SSR leads to FOUC 😢
css-tricks.com/a-new-containe…
@remix_run @_zachdtaylor @jonrcrowell @sergiodxa @_developit @JNYBGR @alunyov @async @doho_1016 @mrousavy @flexbox_ @wcandillon @ddprrt @chriscoyier @DasSurma 🧵 NAPI-RS v2.0 by @Brooooook_lyn
One of the lib that streamline efficient Rust adoption in modern frontend tooling
v2: retrocompatible rewrite solving v1 limitations, generating binding files, providing new features
WASM support planed
napi.rs/blog/announce-…
@remix_run @_zachdtaylor @jonrcrowell @sergiodxa @_developit @JNYBGR @alunyov @async @doho_1016 @mrousavy @flexbox_ @wcandillon @ddprrt @chriscoyier @DasSurma @Brooooook_lyn 🧵 Browser-Vite by @Gluckies @divriots
Runs Vite in the browser by shimming Vite FS and using Web Workers
Interesting comparison with @stackblitz WebContainers, looks more lightweight.
Curious to see what kind of innovation this will lead to.
divriots.com/blog/vite-in-t…
@remix_run @_zachdtaylor @jonrcrowell @sergiodxa @_developit @JNYBGR @alunyov @async @doho_1016 @mrousavy @flexbox_ @wcandillon @ddprrt @chriscoyier @DasSurma @Brooooook_lyn @Gluckies @divriots @stackblitz 🧵 Partytown beta by @adamdbradley
Offload third-party scripts in service worker => better web perf
Now in beta, requesting feedback to make it production-ready
Communication using Service Worker XHR sync, but exploring Atomics for faster impl (x10)
builder.io/blog/partytown…
@remix_run @_zachdtaylor @jonrcrowell @sergiodxa @_developit @JNYBGR @alunyov @async @doho_1016 @mrousavy @flexbox_ @wcandillon @ddprrt @chriscoyier @DasSurma @Brooooook_lyn @Gluckies @divriots @stackblitz @adamdbradley 🧵 AWS Lambda: ES modules & top-level await support, by @jbesw
Exciting news to see this happening
AWS Lambda powers many other DX tools and platforms that frontend developers use regularly: it might also impact them positively
aws.amazon.com/fr/blogs/compu…
🎬 THREAD END! 🧵
✉️ Subscribe & browse past editions at ThisWeekInReact.com
👌 More content, better insight by email
🙏 Help me make this sustainable 🙏
🐦 Retweet the thread "head" below 👇
Meme of the week:
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.