Hi everyone!
Another week with lots of content, including 2 official articles on the React and React-Native blogs.
The React ecosystem continues to grow, and my curation workflow is getting better too. Result: I have more and more links to share π
By the way, I'm curious, is being exhaustive a bug or a feature? π You can answer me by email or on theΒ Twitter poll.
The problem is also that Gmail truncates my newsletter π¬. This is partly because of my Revue provider and its long tracking links. I'm thinking of migrating to ConvertKit soon.
πΒ Support the newsletter:
- πΒ Recommend it to your friends: it really helps!
- πΈΒ Sponsor This Week In React
- πΒ Write testimonials on Twitter
- π§΅Β Retweet the latest Twitter thread
- π¨Β Reply to thisΒ email:Β feedback is welcome
- π₯ Follow onΒ LinkedIn
If you like this newsletter, subscribe in priority there:
- π¬π§Β ThisWeekInReact.com
- π«π·Β ReactHebdo.fr
React
React Labs: What We've Been Working On -- June 2022
React Labs is a new series of articles: the React team wants to share more regularly its progress. Read the whole article: it contains a lot of very interesting information, in particular:
- Server Components: async/await model, no moreΒ
.server.jsΒ extension, Webpack/Vite unification... - React Optimizing Compiler (React Forget) rewritten, seems to progress well.
- the Offscreen API offering new very interesting capabilities (instant transitions β€οΈοΈ)
See alsoΒ Dan Abramov comments on Reddit
Airbnb explains how they went from Sass to react-with-styles and then Linaria. It is a no-runtime CSS-in-JS framework with static CSS extraction. They explain their choice, migration strategy, and give a positive feedback on the tool they contribute to.
React Aria - Date and Time Pickers for All
React Aria has just announced the release of Date and Time Picker components and hooks. As you can expect, there is a real focus on accessibility, flexibility and internationalization. We can feel that there is a lot of work behind these components from the Adobe teams.
Notes on maintaining an internal React component library
Gabe works on Walrus, Digital Ocean's internal React design system. He offers a very detailed feedback on the maintenance of a React design system over time. He shares interesting lessons on the human aspect as well as on the design of props, the encapsulation of components or the management of version upgrades.
Capture Phase Event Handling in React
We often use the "bubbling" phase of DOM events, but it is sometimes useful to use the "capture" phase which is not very well known. We can use for exampleΒ onClickCaptureΒ with React.
Extras:
- πΒ 5 Big Takeaways from RemixΒ Conf
- πΒ What is XState used for?
- πΒ The Case for Use.GPU
- πΒ Why UseΒ useReducer?
- πΒ React Element vs Component
- πΒ Inversion of Control and JSX Injection via Context API
- πΒ You Might Not Need an Effect: new doc page in beta
- π¦Β Sandpack 1.0: React components to build interactive code playground, from CodeSandbox. New design, theming, SSR support, React 18, file explorer...
- π¦Β Ladle 1.0: Storybook alternative based on Vite, built for Uber. Can now customize Vite config + addons for accessibility and accessing story source.
- π¦Β uipkg: new plugin to export Figma designs to React.
- π¦Β Remix-routers: adapt Remix router to other frameworks (for now only Vue)
- π¦Β React-Teleporter 3.0: React 18 support
- π¦Β SWR 2.0 Beta 4: resource preloading API
- π¦Β React-cmdk: A command palette for React
- π¦Β Redwood 2.0: 3 months after v1.0? Don't panic! It's just a few breaking changes, Redwood respects semantic versioning.
- π¦Β React 18.2: SSR bugfixes
- π¦Β Vitext: Next.js alternative based on Vite?
- π¦Β React-Three-Fiber + Html embed
- π₯Β React-conferences
- π§΅Β React Summit Sketches
πΈ Sponsors
π‘Β How to sponsor this newsletter
TechTree - Introducing This Week in React Bounty Board
TechTree is building the firstΒ social-economic platform for developersΒ - a place to help you unlock the real value of your knowledge and network!
The first major feature on TechTree is Bounties, a tool to help youΒ earn money by referring your friendsΒ to open roles at top VC backed tech startups or find a job that might be right for you!
To help show you around, I have gone ahead and created my very ownΒ Bounty boardΒ -Β a selection of remote, React related roles for you to apply to or refer your network to. There has been over $300k worth of Bounties claimed on TechTree so far!
Looking to hire React developers? You can post Bounties of your own to be featured on my Bounty board! Read more and get startedΒ here.
A Global Virtual Conference for Full-Stack Developers π
Meteor Impact, Meteor's most significant online conference, will beΒ back this year and held by Jan DvoΕΓ‘k (akaΒ Storyteller). Meteor SoftwareΒ and Pathable will support the event, amongst other sponsors.
Last year's conference was a significant success, with overΒ 490+Β attendeesΒ andΒ 40 talks, and we're planning to make this year'sΒ event even bigger and better!
Make sure you save these dates:Β October 13thΒ andΒ 14th, 2022.
If you want to stay up to date with information regardingΒ Meteor Impact, you canΒ sign up hereΒ to stay updated with theΒ latest news and updates.
React-Native
Helping migrate React Native libraries to the New Architecture
The React-Native team explains how they will help us adopt the new architecture. There will be documentation, support via the working group, but also GitHub repos with many examples of applications and migration branches. Note that React-Native 0.69 (with React 18) should be available soon: the features of Concurrent React will be available only for users on the new architecture.
@shopify/react-native-performance
Packages created by Shopify to profile the performance of your apps. First-class React-Navigation and FlatList profiling support.
β οΈ Warning: 3 popular packages now have the same name π
Extras:
- πΒ Writing fastlane scripts in Javascript
- π§΅Β Metro + web: Metro web usage is increasing: Airbnb, Stripe, Expo...
- π¦Β React-Native-Owl 1.0: visual regression testing lib for React-Native reaching v1 milestone
- π¦Β React-Native-Performance Config PluginΒ (not the same π )
- π¦Β Siri Shortcuts Config Plugin
- π¦Β React-Native-Firebase v15
- ποΈΒ RNR 239 - Shrink your app with ProGuard
- ποΈΒ TheΒ React NativeΒ Show Coffee Talk #3 - Open Source
- ποΈΒ TheΒ React NativeΒ Show #13 - Migration to React Native
Other
An interesting reflection on frontend abstractions and their cost... Proposes an interesting mental model to differentiate a framework from a library (IoC - Hollywood principle - "Don't call us, we'll call you"). All this illustrated with some React examples.
Moon - A build system for the JavaScript ecosystem
Seems to be a new competitor to Nx and Turborepo, this time written in Rust π
Extras:
- TypeScript 4.8 Beta
- Why You Might Prefer Map Over Object In JavaScript
- Sponsoring dependencies: The next step in open source sustainability
- CSS - Complex vs Compound Selectors
- Socket for GitHub 1.0
- State of Open Source Security 2022
- CSS - Backdrop Filter finally in Firefox 103
- V8 - Discontinuing release blog posts
- Bringing forward the End-of-Life Date for Node.js 16
- CSS - New syntax for range media queries in Chrome 104
- Software Engineering - The Soft Parts
- Lerna 5.1
- Boa v0.15
- zx 7.0
- Tauri 1.0
- Deno 1.23
- Deno raises $21M
Top comments (0)