The One true React framework

Today’s issue: Bullying React on the server, threatening an innocent newsletter, and making the radical decision to not burn down your open source community.

Welcome to #331.

---

The One true React framework

Have you ever wondered what would happen if React Native had a baby with Rails?

Well today’s your lucky day, because One is a brand new full-stack React framework for web and native that’s definitely not like other girls frameworks. Let’s find out why.

How we got here: One was created by the team behind Tamagui – a cross-platform styling library for React that uses an optimizing compiler to let you share more code between web and native.

One takes that idea about 12 steps further by allowing you to target native and web with just one codebase (🥁) via strongly typed file-system routes.

Here’s how it works:

• One is built on Vite, which can serve both React Native and web seamlessly with file-system routing across server, client, and static pages. This lets you build for native and web in the same project with fast HMR for both.

• You can target a specific platform by using the same extension convention as React Native in the filename, like blog.web.tsx or blog.ios.tsx.

• You can choose your rendering mode on a per-page basis with filename suffixes like route+ssg.tsx or route+ssr.tsx.

The framework also comes with a production server out of the box that provides a “default but ejectable” data solution that aims to make cross-platform development as simple as possible – ala Rails and other batteries-included tools of a bygone era.

Bottom Line: Could One finally fulfill React Native’s original and now abandoned promise of “write once, run anywhere”?

I’m not sure, but they were somehow able to get the one npm package name – so maybe they really are the chosen ones after all.

---

👋 Goodbye low test coverage and slow QA cycles

Bugs sneak out when less than 80% of user flows are tested before shipping. But getting that kind of coverage (and staying there) is pricey and difficult for any team.

That’s why some of the best software teams in the world use QA Wolf. Their AI-native approach gets you 80% automated e2e test coverage for your application – and reduces QA cycles from hours to minutes.

It comes with:

• Unlimited parallel test runs
• 24-hour maintenance and on-demand test creation
• Human-verified bug reports sent directly to your team
• Zero flakes, guaranteed

The result? With QA Wolf, Drata’s team of 80+ engineers achieved 4x more test cases and 86% faster QA cycles.

Schedule a demo to learn more.

---

What gets logged?

for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 1000)
}

---

1. Baldur Bjarnason wrote a long article on the parallel evolution of React and Web Components, in light of the most recent culture war. It’s designed to help us all “look past the a**holes to see the forest” – which is valuable advice for both evaluating web dev arguments and hiking near your local nudist campground.

2. Structs is a Stage-1 JavaScript proposal for a new low-level feature that would enable developers to run multi-threaded JavaScript.

3. Unlayer provides embeddable content creation tools for SaaS, so you can give your users a drag-n-drop builder to create emails, web pages, or popups. Teams at Netflix, Fidelity, and 1,000+ other companies use Unlayer to build content features faster and save an average of 52% on dev and maintenance costs. [sponsored]

4. bobae kang wrote about Serverless servers and the challenge of new React architecture.

5. And right on cue, Christoffer Artmann wrote about how React on the server is not PHP. And if you say that it is PHP, that’s because you’re just a nerd and a bully.

6. KaibanJS JavaScript-native framework for building and managing multi-agent systems with a Kanban-inspired approach.

7. Zustand v5 just came out with no new major features and a smooth upgrade from v4. How boring of you, Daishi.

8. solid-events is a set of primitives for declarative event composition and state derivation for SolidJS, similar to RxJS.

9. Font sensei is a Google fonts picker categorized by tag names. And remember, there is no fear in this font dojo.

10. Sam wrote about Node.js, pipes, and disappearing bytes. Excuse me sir, but is that a threat?

---

What gets logged?

for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 1000)
}

A little throw back for all you old heads. This used to be everyone’s favorite JavaScript interview question.

This code will log 5 5 times.

The reason for this is because we declared our variable with var, which is function scoped. By the time our functions given to setTimeout run, i will already be 5 and every function will reference that same variable. To fix this, use let which is block scoped and will give each iteration of our for loop its own i.

for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 1000)
}