Angular's bold new look

Today’s lineup: JavaScript journalism, creative ways to save on your AWS bill, and a CSS-themed spa next to your local Subway.

Welcome to #185.

---

Angular’s bold new look

We saw a lot of interesting fashion choices at last week’s Met Gala, but none of them could hold a candle to Angular 16’s bold new look.

Critics are calling it “the biggest release since the initial rollout of Angular” — and by critics, I mean Minko Gechev from the Angular Core Team.

So what are the key new features behind NG’s glow up? Most of them fit into three categories: Signals, Server-side rendering, and tooling. Let’s break it down.

Signals are a way for you to add state to your application. But unlike React, where your app re-renders every time state changes, Signals enable granular state updates. This means that when a Signal value changes, only the most necessary work to update the UI will happen – no rendering and no diffing.

This can dramatically improve performance, since they let your app skip expensive rendering work. And since Signals are always referentially stable (meaning their location in memory never changes), you never have to worry about them triggering unnecessary component renders when you pass them around your application.

Angular 16 is embracing this new approach to reactivity with a brand new Angular Signals library. It’s still in developer preview right now, but its final form will significantly improve performance, simplify the DX, and interop better with RxJS.

Server-side rendering has historically been difficult with Angular. But v16 comes with a new-and-improved approach to SSR they’re calling, “full app non-destructive hydration.”

That’s not the catchiest name (#FANDH), but it provides much better performance and will enable Angular to incorporate more robust SSR features in the future. They’ve even hinted at potentially implementing Qwik’s resumability approach to hydration 👀.

Tooling upgrades provide a new esbuild-based build system, experimental support for Jest, and a new Vite-powered dev server.

Bottom Line: For the past few years, the Angular team has prioritized stability over big new features and changes. But the features in this v16 release (which are still backwards compatible), prove they’re still willing to make some big waves in the framework fashion show.

---

PropelAuth is the smart way to scale your auth

You always *think* you have auth covered… and then you start signing up enterprise users 😭.

Suddenly, you’re frantically trying to build a bunch of b2b features on top of your auth solution and asking ChatGPT “wtf does SAML mean??”

Should’ve used PropelAuth, my friend. They make it super easy to go live quickly, but they’re specifically designed for B2B use cases — so you get all the enterprise features you’ll ever need, right out of the box:

• Self-service portals let your end users sign up for your product, invite coworkers, manage permissions, and set up enterprise SSO/SAML. (See the docs.)

• It handles all transactional emails, 2FA enrollment, and RBAC.

• Everything is hosted on your own domain, and easily integrates with any backend.

PropelAuth just works on day 1, and it scales with you every step of the way.

Check out their “Free Until Funded Plan” — it’s completely free for startups until you’ve raised $1m in funding.

---

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  set fullName(name) {
    name = name.split(' ');
    this.firstName = name[0];
    this.lastName = name[1];
  }
}

class Employee extends Person {
  constructor(firstName, lastName, title, salary) {
    super();
    this.title = title;
    this.salary = salary;
  }

  get employeeInfo() {
    return 
      `${this.fullName}, ${this.title}, earns $${this.salary} annually.`;
  }
}

const employee = Employee('Jane', 'Doe', 'Software Developer', 90000);

---

1. The Amazon Prime Video team wrote about How they saved 90% on their AWS bill by moving from serverless microservices to a monolith. This sparked many heated debates like “serverless is good” and “serverless is bad”.

2. The Snyk team wrote A helpful guide to unit testing in JavaScript that will help you find and fix vulnerabilities - and keep them from coming back. [sponsored]

3. josn is a newly released command-line JSON viewer. It’s also the name I was planning to give one of my future children, so they could enjoy the greatest gift of all: a unique, 4-letter gamertag. But it’s probably taken now, so I’ll have to go with my backup name: jo$n.

4. Slava Knyazev wrote this Practical Guide To Not Blocking The Event Loop with some helpful visual examples. This was particularly helpful for me and my usual “throw everything at the event loop and hope for the best” strategy.

5. Daishi Kato wrote an article called Why You Don’t Need Signals in React, which shares how you can realize the same benefits by using Jotai, the React state management library he created.

6. Astro 2.4 just launched with experimental middleware, stronger scoping for CSS, and more. If you want to see a beautiful Astro site in action, I’ve suggest checking out React.gg. That’s just my totally unbiased opinion as a journalist™️.

7. Deno just announced Deno KV - a strongly consistent and globally replicated key-value database.

8. Today is the 20th anniversary of CSS Zen Garden launching. And five years from tomorrow will be the 5th anniversary of my luxury developer spa, which I also named CSS Zen Garden. It’s located in that one strip mall a few minutes from your house, in between the Subway and the old dry cleaners. You know the place. Come on in — I’ll do your first waxing for 15% off, while you enjoy the soothing aroma of Italian herbs and cheese mixed with perchloroethylene.

---

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  set fullName(name) {
    name = name.split(' ');
    this.firstName = name[0];
    this.lastName = name[1];
  }
}

class Employee extends Person {
  constructor(firstName, lastName, title, salary) {
    super();
    this.title = title;
    this.salary = salary;
  }

  get employeeInfo() {
    return 
      `${this.fullName}, ${this.title}, earns $${this.salary} annually.`;
  }
}

const employee = Employee('Jane', 'Doe', 'Software Developer', 90000);

Spot the Bugs are always fun because if I don’t point out every potential issue, you all let me know 😅.

With that said, I’m leaning into it this week because this one has a bunch of issues.

First, we’re not validating any types (yes, I hear TypeScript fixes this). Second, it’s probably not a great idea to mutate our name parameter in set fullName. Third, we need to pass firstName and lastName to super inside of our Employee constructor. Fourth, because of automatic semicolon insertion, our employeeInfo will return undefined instead of our string. And last (I think), when we create a new instance of Employee, we need to do so with the new keyword.