The Super Bowl of monorepos

Issue #262.February 12, 2024.2 Minute read.
Bytes

Today’s issue: The Amazon Basics version of Bun, clapping back at the App Router haters, and your brain on drugs Node.js.

Welcome to #262.


Eyeballs logo

The Main Thing

Jason Kelce talking to Ice Spice and Taylor Swift

"OK explain how Monorepos are like munchkins one more time"

The Super Bowl of monorepos

We just got done watching the live media event of the year that everyone’s still buzzing about — LaunchNx Conf (obviously).

Usher was too busy being upstaged by Taylor Swift to stop by, but last week’s MonorepoBowl was packed with major releases, surprise announcements, and (in my case) a bowl of buffalo chicken dip the size of my head.

Quick monorepo review: As the name implies, monorepos let you group related projects in a single repo to facilitate communication, reuse code, and speed up development. But you can only get so far with built-in npm/yarn/pnpm workspaces before you hit painfully slow builds — that’s where Nx comes in.

It’s built in Rust and TypeScript and offers optimizations like local and remote caching to speed up monorepos. Nx has evolved a lot since it first launched in 2017, now getting 4 million npm downloads per week and being used by half of Fortune 500 companies 🤯.

Now that we’re all on the same page, let’s get to the biggest highlights from Launch Week.

Big launch #1: Project Crystal — a major overhaul of Nx Plugins that makes them more powerful and a lot easier to use.

Nx plugins can now automatically infer tasks and auto-configure caching inputs and outputs based on existing framework configs. For example, the @nx/vite plugin infers tasks to run Vite through Nx based on your repo’s Vite configuration. This config already defines the destination of your build files, so Nx reads that value and caches the correct output files for you.

This change also makes it much easier to get started with plugins. Just run nx init on any existing npm/pnpm/yarn workspace to instantly enhance it with special Nx powers.

Big launch #2: Nx Agents — a paid add-on that brings all the powers of Nx to your CI.

It gives you seamless distribution of tasks across machines, dynamic allocation o f machines tailored to PR size, fine-grained e2e distribution, and automatic re-running of flaky tests. You can enable all of this with a single line of code, and watch your CI instantly become 80% faster.

Bottom Line: Nx has come a long way since 2017, but these major launches should make it more approachable than ever. It’s also nice to see Nx-the-company releasing genuinely innovative products to help fund their open source work.

Long live the MonorepoBowl.

        

multi-logo.png

Our Friends
(With Benefits)

Shrek and Donkey making a heart with their hands

Using Multi to pair program with your work bestie

Multi makes remote pairing feel seamless

Their free MacOS app adds a multiplayer layer to your desktop, so you can collaborate and build together with your team in real time.

Instead of squinting at lines of code on a Zoom call, Multi gives you everything you need to feel like you’re pairing side by side with your team IRL:

  • High-quality video sharing that uses low bandwidth, thanks to AI image upscaling

  • Blazing fast shared control that lets you share cursors and clipboards, take control of each others’ apps, and draw

  • Multiple people can screenshare at the same time

We wrote about Multi when it first blew up back in August, and it’s now open to everyone without a waitlist and comes with a bunch of new secret AI features 🤫.

Download the MacOS app for free — and see why so many developers (including the creator of Angular) call it “the most seamless collaboration tool I’ve ever used.”


Spot the Bug logo

Spot the Bug

Sponsored by Stream

Their React SDK for Video & Audio lets you easily build a full-featured video call, audio room, or live stream experience in days that can instantly support millions of users.

const Animal = (name, type) => {
  this.name = name
  this.type = type
  this.age = 0
}

Animal.prototype.birthday = function () {
  this.age++
}

const leo = new Animal('Leo', 'Lion')

Cool Bits logo

Cool Bits

  1. AWS just launched LLRT, an experimental, low latency JavaScript runtime for serverless applications. I’m not sure what this Amazon Basics version of Bun will retail for, but it’s probably cheaper if you have Prime.

  2. Hono v4 just launched with static site generation, client components, and file-based routing.

  3. Convex created the 2024 version of Firebase. It’s a modern backend platform that comes with real-time queries, first-class React/Next.js support, and thoughtfully designed wrappers for scheduling — all backed by a durable, transactional database. [sponsored]

  4. Ruoyu Sun wrote about Squeezing every last bit of JavaScript performance for my automation game.

  5. Matteo Collina wrote about 3x Faster Stream processing in Node.js on his blog called “Adventures in Nodeland.” He doesn’t include as many references to hallucinogenics as Lewis Caroll did, but being a Node maintainer is probably the next closest thing to eating magic mushrooms.

  6. Glaze is a new utility-based animation framework that’s built on top of GSAP.

  7. Did you know that 63% of JavaScript vulnerabilities have simple fixes available? That’s why Snyk created a free JavaScript code security & vulnerability checker. It scans your JS code for security issues and gives you AI-powered fix suggestions in-line in your IDE. [sponsored]

  8. Adam Fortuna wrote about how his team increased search traffic by 20x in 4 Months with the Next.js App Router. Take that, App Router haters.

  9. Rich Harris did an 80-minute interview with Prismic about the future of Svelte.

  10. tabgod lets you execute any JavaScript on any Chromium tabs with cross-tab parallel execution. It’s also the name of the up-and-coming Soundcloud rapper who’s an early favorite to perform at next year’s Super Bowl.


Spot the Bug logo

Spot the Bug: Solution

Sponsored by Stream

const Animal = (name, type) => {
  this.name = name
  this.type = type
  this.age = 0
}

Animal.prototype.birthday = function () {
  this.age++
}

const leo = new Animal('Leo', 'Lion')

Arrow functions don’t have their own this. This leads to three errors in our code.

First, we’re adding properties to this in the constructor function. Again, because Arrow Functions don’t have their own this, you can’t do that.

Second, we can’t use the new keyword with an Arrow Function. This will throw a X is not a constructor error.

Third, we can’t add a property on a function’s prototype if that function is an arrow function, again, because there’s no this.

Here’s the solution -

function Animal (name, type) {
  this.name = name
  this.type = type
  this.age = 0
}

Animal.prototype.birthday = function () {
  this.age++
}

const leo = new Animal('Leo', 'Lion')