This week in React

πŸ‘‰ React-Hook-Form 7
πŸ‘‰ React-UX-Form
πŸ‘‰ Dumi
πŸ‘‰ Figma-To-React
πŸ‘‰ Recoil 0.2
πŸ‘‰ Hermes Intl + OTA
πŸ‘‰ Nextgen buildtools
πŸ‘‰ Bundless
πŸ‘‰ Microsite
πŸ‘‰ Let ➑️ Const
πŸ‘‰ How to test UI
πŸ‘‰ XState Catalogue
πŸ‘‰ Vue 3 ❌ IE11
πŸ‘‰ DevTools ➑️ TS

🧡🧡🧡 Details πŸ‘‡πŸ‘‡πŸ‘‡
React-Hook-Form v7 was released by @bluebill1049

react-hook-form.com/migrate-v6-to-…

Most exciting thing is probably leveraging TS 4.1 template literal types and being able to type-check the form against field-name typos!
New React-UX-Form library by @zoontek

Also based on a subscription model and per-field validation (like React-Hook-Form), also using an interesting "validation strategy" concept.

Compat with React and React-Native.

github.com/swan-io/react-…
Discovered UmiJS by @chenchengpro

A React application framework that can output a static SPA.
github.com/umijs/umi

Looks quite popular already and has its own ecosystem, including an opinionated doc site generator called Dumi:

github.com/umijs/dumi
Figma to React by @tomsoderlund

It can convert a Figma design to:
- React-Native
- React+Styled-JSX

Code output looks quite clean

figma-to-react.vercel.app
Recoil 0.2 released by @mcc_abe

Improvements on async selectors, performance and scalability, and various bugfixes.

Future releases will have memory management features like cache eviction policies (LRU).

recoiljs.org/blog/2021/03/2…
Hermes progress continues!

After Proxies in RN 0.64, @huxpro said Intl support should be added in React-Native 0.65 for Android.

github.com/facebook/herme…
About Hermes and OTA:

@mrousavy it seems RN CodePush OTA already works, even with the newly released iOS support! (community feedbacks from @mrousavy)

github.com/microsoft/reac…

And @expo is likely to add Hermes support soon too!
It's a bit difficult to see how the next-gen build tools are different from one another.

@elliotclydenz did a great job comparing them and explaining the tradeoffs!

It looks like Vite by @youyuxi is the simplest option for a drop-in CRA replacement.

css-tricks.com/comparing-the-…
But there are new nextgen build tool contenders!

Enter Bundless by @__morse

It looks interesting, as it bets fully on esbuild and its plugin ecosystem, even for the production build.

github.com/remorses/bundl…
Another interesting innovation: Microsite, a static site generator based on Snowpack and Preact, by @n_moore . .

github.com/natemoo-re/mic…

Following the progressive enhancement pattern:
- Supports "automatic partial hydration"
- Ships minimal JS to the browser
Replacing "let" with "const"

charles-stover.medium.com/replacing-let-…

Can't agree more with this article from @CharlesStover

Your code becomes simpler by using an inner function + return.

Alternatives: IIFE or do-expressions (stage-1):
github.com/tc39/proposal-…
How to actually test UIs by @winkerVSbecks

Interesting post explaining the tradeoffs of 5 different ways to test UI / components:
- visual
- compositions
- interaction
- accessibility
- user-flows (end-2-end)

storybook.js.org/blog/how-to-ac…
Vue 3 drop its initial plan to support IE 11

According to this RFC by @youyuxi , explaining the decision:

github.com/vuejs/rfcs/blo…

It's planned to backport important features to Vue 2 for those that need to support IE11
XState Catalogue by @mpocock1

A collection of well-designed state machines for XState.

Includes various patterns from complex forms like wizards) to data-fetching patterns like infinite-scroll

xstate-catalogue.com
Chrome DevTools migrated 150k LOC from Closure Compiler to TypeScript.

@TimvdLippe tells the story behind this migration:

- catch more errors than before, but increased compilation time

- using @ts-nocheck everywhere and removing it one file at a time

developer.chrome.com/blog/migrating…
🎬 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 πŸ‘‡

β€’ β€’ β€’

Missing some Tweet in this thread? You can try to force a refresh
γ€€

Keep Current with Sebastien Lorber πŸ‡«πŸ‡·

Sebastien Lorber πŸ‡«πŸ‡· Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @sebastienlorber

5 Apr
This week in React

πŸ‘‰ React Labs
πŸ‘‰ Next.js 10.1
πŸ‘‰ Dependency Injection
πŸ‘‰ Fastest Text Update
πŸ‘‰ Tuples?
πŸ‘‰ React React Errors
πŸ‘‰ Expo 41
πŸ‘‰ RN Timeline
πŸ‘‰ Web: Flutter vs RN?
πŸ‘‰ TS 4.3 beta
πŸ‘‰ Coolify
πŸ‘‰ Storybook 6.2
πŸ‘‰ Change Array by copy
...

🧡🧡🧡 Details πŸ‘‡πŸ‘‡πŸ‘‡
React Labs: @abernathyca presented a new official video series of technical deep dives in the React research.


The first video is a Q&A about server components:
Next.js 10.1 by @vercel contains significant improvements to Fast Refresh, install time, images

Webpack5 will roll out progressively

The Next.js team plans to make DX even faster.

More high-level tools get released: Shopify integration, Nextra blog...

nextjs.org/blog/next-10-1
Read 16 tweets
29 Mar
This week in React

πŸ‘‰ Suspense & Concurrent Mode news
πŸ‘‰ React API evol
πŸ‘‰ Piral: React microfrontends
πŸ‘‰ React-Spring 9
πŸ‘‰ Instagram Lite & Bloks
πŸ‘‰ Human-Readable JS
πŸ‘‰ CSS container queries
πŸ‘‰ vanilla-extract
πŸ‘‰ Deno company
πŸ‘‰ SvelteKit
πŸ‘‰ tRPC
πŸ‘‰ ...

🧡🧡🧡 Details πŸ‘‡πŸ‘‡πŸ‘‡
After almost 1 year, @dan_abramov gives fresh news about Suspense and ConcurrentMode.

- We see the light at the end of the tunnel.
- We don't have large "unknown unknowns" anymore.

Work has shifted to ecosystem compatibility & incremental migration path

github.com/facebook/react…
In React API evolution, @alex_frantic shows that React hasn't changed much conceptually.

2013 code can still work today by using a compat layer.

I've adopted React at 0.5.3 πŸ€ͺ didn't know there was React.autoBind, but have used LinkedStateMixin :)

frantic.im/react-api-evol…
Read 15 tweets
15 Mar
This week in React

πŸ‘‰ React "Fizz"
πŸ‘‰ Docusaurus i18n
πŸ‘‰ Relay hooks
πŸ‘‰ Preact Server Components
πŸ‘‰ ReactNative 0.64
πŸ‘‰ Bob
πŸ‘‰ React-Navigation 6
πŸ‘‰ CSS for JS devs
πŸ‘‰ TS Constrained Identity Function
πŸ‘‰ ES 2021, TC39 updates
πŸ‘‰ TS-Pattern 3
πŸ‘‰ SvelteKit
...

🧡🧡🧡 Details πŸ‘‡
🧡 React "Fizz": looks like a new project code for React.

The goal is to support Suspense on the server (SSG + SSR) with streaming support!

@sebmarkbage opened many pull-requests already, one of them set-up some initial architecture and document Fizz.

github.com/facebook/react…
🧡 Docusaurus v2 i18n released!

This time I can present my own work 😜

You can now translate your doc sites easily.
v2.docusaurus.io/blog/2021/03/0…

We already have a few early adopters!
- Jest: jestjs.io/blog/2021/03/0…
- Redwood: learn.redwoodjs.com/fr
- PNPM: pnpm.js.org/zh/
Read 17 tweets
4 Jan
This week in React (actually 2 weeks πŸ€ͺ)

πŸ‘‰ Special React-Server-Components
πŸ‘‰ Inside React core team
πŸ‘‰ Expo Go
πŸ‘‰ Ignite v6
πŸ‘‰ ReactNative @ Wix
πŸ‘‰ Volta v1
πŸ‘‰ xstyled v2
πŸ‘‰ Moiva
πŸ‘‰ Mythical β€œfast” web page
πŸ‘‰ Typo tolerance

🧡🧡🧡 Details πŸ‘‡πŸ‘‡πŸ‘‡
The @reactjs core team published the state of their R&D about React Server Components, allowing to run some components on the server, and reduce the overhead of shipping some client-side code.

There's a video and a RFC here:

reactjs.org/blog/2020/12/2…
This is an illustration of what could be possible in the future.

Don't worry, React is not becoming like PHP, and it's not because you can that you should.

(In the same way, you could implement a React app in a single very fat component)

Read 26 tweets
21 Dec 20
This week in React

πŸ‘‰ React 2025
πŸ‘‰ Next for Vercel
πŸ‘‰ Vercel Virtual-Event-Starter-Kit
πŸ‘‰ Cloudflare Pages
πŸ‘‰ Meli
πŸ‘‰ Expo Application Services
πŸ‘‰ RN SwiftUI renderer
πŸ‘‰ React pragma
πŸ‘‰ Framer Motion
πŸ‘‰ React-Query 3
πŸ‘‰ RadixUI
πŸ‘‰ Modular
πŸ‘‰ EStimator
...

🧡🧡🧡 Details πŸ‘‡πŸ‘‡πŸ‘‡
React 2025 is a free course created by @leeerob

You'll build a real SaaS app, using a modern tech stack using Next.js, Firestore, Chakra, SWR, MDX, Stripe...

This looks interesting and different from other courses available.

react2025.com
After Vercel 40m$ series B announcement, @rauchg tells us what's Next for Vercel, and the future looks bright.

Core Web Vitals will likely become a very important indicator in May 2021 for SEO, and Vercel will give us the tools to do the right things

rauchg.com/2020/next-for-…
Read 19 tweets
16 Nov 20
What interested me this week❓

πŸ‘‰ React: Chakra, security, device-based code-splitting
πŸ‘‰ ReactNative: at Wix / ProductHunt, React-Navigation v6, Expo Application Services...
πŸ‘‰ TypeScript: at Bloomberg
πŸ‘‰ No-JS
πŸ‘‰ No-Else
πŸ‘‰ No-pipeline
πŸ‘‰ ...

🧡🧡🧡 Details πŸ‘‡πŸ‘‡πŸ‘‡
A nice React security cheatsheet has been posted by @ronperris from @snyksec, with 10 best practices

snyk.io/blog/10-react-…
Chakra UI v1 has been released, congratz to @thesegunadebayo for his popular accessible UI library.

Read 21 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!