Feeling the Flow Envy™️

Issue #279.April 11, 2024.2 Minute read.
Bytes

Today’s issue: Using Val Town to become our BFF, passing on GraphQL, and being the TC39 change you wish to see in the world.

Welcome to #279.


Eyeballs logo

The Main Thing

Darth Sidious smiling

Let the JSX flow through you

React’s very own programming language

As a kid, remember when you’d start losing and instead of finish the game, you’d just quit and go play by yourself?

That’s kind of what happened with Flow, Meta’s type-safe programming language. It first launched back in 2014, but shifted to being an internal Meta project a few years later after losing out to TypeScript. Thankfully, there were slightly less tears than when my brothers used to beat me at Three Flies Up 🙏.

But there’s a silver lining – by focusing solely on Meta’s needs, Flow has been able to create some interesting language features for React that wouldn’t work for more general-purpose languages like TypeScript.

Flow refers to these features as Component Syntax, consisting of three new keywords designed to make it easier to write high-quality React code:

  • component – Replaces the function keyword and lets you define components in way that reduces boilerplate and enforces the Rules of React

  • hook – Also replaces function when declaring custom hooks and makes sure your hooks adhere to React’s programming model

  • renders – Gives you a simple way to enforce design systems by expressing stylistic constraints through types

Bottom Line: Meta has already adopted Component Syntax across all of their codebases, so if you’re a React dev that’s feeling a little bit of Flow Envy™️ right now, just try getting a job at Meta. That might sound hard, but it’s definitely easier than convincing your current employer to migrate to Flow.

        

Convex logo

Our Friends
(With Benefits)

A guy working with his computer in his fridge

When your machine heats up from compiling 200k lines of Rust

Convex just went open source 👀

Their backend-as-a-service platform gives you a realtime database, server functions, and a set of client libraries to replace all your glue code – and it’s now open source 🥳.

What does that mean? The Convex GitHub repo now has over 200,000 lines of Rust and TypeScript code, comprising its core backend and the server-side function environment.

This unlocks some exciting new ways to use Convex:

  • Local development for testing or building offline with lower latency and faster push times (see guide).

  • Self-hosting so you can run it yourself in production.

  • Transparency so you can learn about how Convex works under the hood, and see if it fits your team’s needs.

Clone the repo to get started, and check out this episode of the Software Engineer Daily Podcast where Convex’s CTO breaks down everything that went into open-sourcing their backend platform.


Spot the Bug logo

Spot the Bug

Sponsored by New Relic

They created this helpful guide on How to develop and monitor your first generative AI chatbot, so you can avoid AI hallucinations and other common issues at scale.

function deepCopy(obj) {
  return JSON.parse(JSON.stringify(obj));
}

const user = {
  name: 'Tyler',
  age: 32,
  created: new Date(),
}

const copiedUser = deepCopy(user)

Cool Bits logo

Cool Bits

  1. TC39 news: The Set methods proposal advanced to Stage 4, and the Signals proposal advanced to Stage 1, just a week after we wrote about it in Bytes. That’s why I always say to be the change you wish to see in the world.

  2. StackBlitz is hosting a livestream on how to create interactive documentation using the WebContainer API and StackBlitz’s JavaScript SDK. You’ll learn how to create next-gen docs like Svelte and Google that will help convince developers to actually use your software. [sponsored]

  3. Roman Maksimov wrote a deep dive on Object structure in JavaScript engines.

  4. XState just released XState Store, a “simple and tiny” state management library inspired by XState. My elementary school teachers used to describe me the same way before my growth spurt.

  5. zx v8.0 is now 20x smaller, and it uses esbuild with custom plugins to introduce more safety, more stability, and much faster installation times.

  6. Aral Roca wrote a great deep dive on HTML streaming over the wire.

  7. PostHog created the Product for Engineers newsletter to help engineers (like you!) improve their product skills. It comes with deep dives on top startups, lessons and mistakes from building PostHog, advice for crafting great products, and unreasonably cute hedgehog illustrations. [sponsored]

  8. Max Stoiber wrote about how You probably don’t need GraphQL. That’s surprising to read from the founder of a GraphQL company, but knowing Max, he’s probably running some sort of 4D chess-level PsyOp here.

  9. Rafael R. Camargo wrote about his experience Building a React 19 meta-framework from scratch.

  10. Val Town just raised $5.5m to expand its browser-based platform for writing and deploying serverless functions. It’s great for quickly creating websites, APIs, and tools like this bytes.dev newsletter notifier built by our new BFF, Pranjal.


Spot the Bug logo

Spot the Bug: Solution

Sponsored by New Relic

function deepCopy(obj) {
  return JSON.parse(JSON.stringify(obj))
}

const user = {
  name: 'Tyler',
  age: 32,
  created: new Date()
}

const copiedUser = deepCopy(user)

A deep copy of an object is a copy whose properties do not share the same references as those of the source object from which the copy was made. One approach for deep copying in JavaScript is using JSON.stringify and JSON.parse.

This kind of works in our case, but it will convert created to a string. To prevent that, you can use window.structuredClone instead (assuming browser support).

function deepCopy(obj) {
  return window.structuredClone(obj)
}