Angular becomes an adult

Issue #292.May 27, 2024.2 Minute read.
Bytes

Today’s issue: Vercel’s new wardrobe, Grandma’s sneaky leaks, and the old Remix snip-snap.

Welcome to #292.


Eyeballs logo

The Main Thing

Andy Samberg throwing a shot glass on the ground

I'M AN ADULT

Angular becomes an adult

When I turned 18 and became an adult, I decided it was time to give up my Samurai Jack lunchbox in favor of something more mature (a Tony Soprano lunchbox).

And when Angular launched v18 last week, they also made the adult decision to yeet move on from zone.js in favor of a new, zoneless approach to reactivity. Let’s break it down.

What’s zone.js? A library that’s historically been responsible for triggering Angular’s change detection that features a more hands-off approach to reactivity. Millions of Angular apps have been built with zones, but they can often introduce performance and maintainability issues.

That’s why the past couple Angular releases have begun introducing a new reactivity model with APIs like Signals, Computed, and Effect. This allows Angular to more efficiently understand changes made to your application state and update the UI accordingly – which yields some pretty powerful benefits for Angular devs:

  • Faster initial render and runtime
  • Better composability and interop with other frameworks
  • Smaller bundle size and faster page loads
  • More readable stack traces and simpler debugging

Zoneless change detection is still experimental in v18, but the migration path looks like it should be pretty seamless for existing apps. The Angular team has also promised strong backwards-compatibility, just in case you don’t want to give up your zones.

Bottom Line: Much like Simon Cowell, Angular continues to go through a major transformation right before our eyes. And thankfully, this one is a lot more fun to watch.

        

speakeasy logo

Our Friends
(With Benefits)

Cartoon girl's eye twitching

When my manager asks me to start building SDKs from scratch

Speakeasy helps you build enterprise-ready SDKs in a click

Now you can easily streamline your API integrations with idiomatic SDKs in 9+ languages – without having to use a buggy OSS generator or build it from scratch yourself.

Speakeasy instantly generates SDKs in minutes that your users will love, because they’re easy to read, easy to customize, and come with powerful features:

  • End-to-end type safety with Zod validation for both user inputs & server responses (see TypeScript SDK)

  • Flexible, feature-rich generation with support for server-sent events, file streaming, retries & pagination, and more

  • End-to-end automation that ensures your SDKs are automatically updated, versioned, and published to package managers every time the API changes

Create your first SDK for free – and see why an engineering leader at ConductorOne said, “it saves our team hundreds of hours, without a doubt.”


Spot the Bug logo

Spot the Bug

Sponsored by Datadog

They created this free ebook on Containerized Applications in AWS that’ll teach everything you need to confidently monitor your AWS container environments at scale.

What will be logged to the console after the code is finished executing?

function first () {
  var name = 'Jordyn'

  console.log(name)
}

function second () {
  var name = 'Jake'

  console.log(name)
}

console.log(name)
var name = 'Tyler'
first()
second()
console.log(name)

Cool Bits logo

Cool Bits

  1. I learned 3 things from Vercel Ship: 1) Vercel makes a lot of money ($100m ARR), 2) they used that money to buy their team members some non-black t-shirts, and 3) the Next.js 15 RC is now available.

  2. Rupour created a slightly new way to visualize colors with Colorang (their words, not mine).

  3. PropelAuth’s multi-tenant auth solution is the best way to scale auth for your B2B app, because they give you great tools and get out of your way (just like my calligraphy tutor). And their Startup Plan is completely free until you’ve raised at least $1m in funding. [sponsored]

  4. Ryan Florence wrote about Remix reversing back to React Router (again). Do you have any idea the physical toll that three vasectomies has on a person?

  5. Travis Arnold released ReStyle, a React 19-powered, no-config, zero-runtime, atomic-css, suspense-enabled, *breathes* npm-ready, CSS prop-supporting, on-demand, CSS-in-JS library.

  6. Million Lint just released a v1.0 RC of their IDE extension that automatically finds and fixes React performance issues for you.

  7. Jamie Turner wrote this article on Defining, Optimizing, and Invalidating Your Cache for the Convex blog. If you’ve ever felt a little confused about what a cache actually does, this post is perfect for you. [sponsored]

  8. Brent Sandifer and the Microsoft team wrote about how to extend Fabric, their web-component based design system. Glad to see there are still people keeping the web component dream alive .

  9. The Stellate team just open-sourced graphql-query, their 8.7x faster GraphQL query parser that’s written in Rust.

  10. Kevin Schiener wrote about Sneaky React Memory Leaks, which triggered memories of the sneaky leaks my Grandma used to bless us with every time she got up out of her chair. RIP, Gam Gam.


Spot the Bug logo

Spot the Bug: Solution

Sponsored by Datadog

function first () {
  var name = 'Jordyn'

  console.log(name)
}

function second () {
  var name = 'Jake'

  console.log(name)
}

console.log(name)
var name = 'Tyler'
first()
second()
console.log(name)

We get undefined, Jordyn, Jake, then Tyler. What this shows us is that you can think of each new Execution Context as having its own unique variable environment. Even though there are other Execution Contexts that contain the variable name, the JavaScript engine will first look to the current Execution Context for that variable.

For more info (and to see a cool GIF on how the JS interpreter evaluates the code above that I would include here but honestly I’m not sure how different email clients support GIFs), visit The Ultimate Guide to Hoisting, Scopes, and Closures in JavaScript