What's new with Vue?

Issue #320.September 5, 2024.2 Minute read.
Bytes

Today’s issue: New TC39 stages, the future of Angular, and the HTML action movie now playing on gas pumps across America.

Welcome to #320.


Eyeballs logo

The Main Thing

Cosplaying Alien

When the vueture is too bright

What’s new with Vue?

Not much, but thanks for asking. My weird foot rash has been flaring up, but hopefully the horse pills will help.

Oh, you meant Vue-the-framework. Well it turns out there’s lots of good stuff going on over there too.

They just launched v3.5, their first release this year and it’s a pretty big one, because it comes with a bunch of long-requested features and some key internal improvements:

  • Reactive Props Destructure is a now-stabilized feature that leverages JavaScript’s native default value syntax to make it much simpler to declare props with default values (checks out).

  • A major reactivity refactor has led to 56% less memory usage and noticeably faster performance, especially for large, deeply reactive arrays.

  • Lazy hydration for SSR allows async components to control when they should be hydrated – such as only when they become visible, for example.

  • A new useID() API can generate unique-per-application IDs that are always stable across server and client renders. This can be particularly helpful for avoiding hydration mismatches in SSR apps.

Bottom Line: React, Remix, Next, and even Angular seem to be getting more attention in Framework-Land these days, but it’s great to see Vue continue pumping out some great new features while maintaining stability across its larger ecosystem. The Vueture is bright.

        

stytch-logo.png

Our Friends
(With Benefits)

Pikachu in a hospital bed

Me after weeks of battling my auth provider that won’t scale

There’s a better way to build auth – with Stytch

They give you complete auth infrastructure (not just widgets), and built-in fraud and risk prevention in a single, API-first platform.

That means you won’t have to hack different tools together and write a bunch of custom code – because Stytch gives you everything you need to build secure, scalable auth:

  • Built-in device fingerprinting to help you secure your application from new AI threats

  • Enterprise auth features like SSO, MFA, RBAC, SCIM – and all the other acronyms that your biggest customers care about

  • A multi-tenant data model that easily scales to support the requirements of enterprise customers

Try it out to feel the power yourself – and see why teams at Groq, Zapier, and Replit all use Stytch in production.


Spot the Bug logo

Spot the Bug

Sponsored by Neon

They offer a fully managed Postgres platform to help you build cool stuff faster. Your DB scales automatically, and you can instantly spin up ready-to-use DBs for development, testing, and previews.

const userIds = [1, 2, 3];

async function fetchUsers() {
  userIds.forEach(async (id) => {
    try {
      const user = await fetchUserById(id);
      console.log(`Fetched user: ${user.name}`);
    } catch (error) {
      console.error(`Failed to fetch user with ID ${id}:`, error);
    }
  });
}

async function fetchUserById(id) {
  return new Promise((resolve) => {
    let delay = Math.random() * 1000 + 1000;
    setTimeout(() => {
      resolve({ id, name: `User${id}` });
    }, delay);
  });
}

fetchUsers();

Cool Bits logo

Cool Bits

  1. The TC39 committee added a new stage between Stages 2 and 3 for JavaScript feature proposals. It reminds me of when my dad told me that my school “invented a new grade” in between 4th and 5th – instead of telling me I had been held back (again).

  2. Jared Scholz wrote a detailed breakdown of The top 6 JavaScript errors and how to fix them in the hopes of helping you “turn speed bumps into stepping stones of better practices.” We love that wholesome content 🥹 [sponsored]

  3. Michael Novotny (Director of DX at Vercel) wrote about What’s new in React 19.

  4. Laravel just raised $57 million immediately after investors realized that the vanity plate on Taylor Otwell’s Lambo said FOUNDER MODE.

  5. Luke Harris wrote about Preloading files to reduce download chains in the browser.

  6. CarbonQA provides high-quality QA services that scale. Their US-based testers work directly with your tools and will break your app repeatedly by doing all the manual testing you hate doing yourself. [sponsored]

  7. Alex Rickabaugh wrote on the Angular blog about how The future is standalone. So I guess I was just ahead of my time at my Senior Prom after all.

  8. Bramus created a MutationObserver for CSS that lets you get notified when the computed value of a CSS property changes.

  9. Rodrigo Pombo wrote a code-heavy article on Build-time components and why RSC will be a big leap forward for content sites.

  10. Keith Cirkel wrote about i-html, a drop-in tag that lets you dynamically import html inline. It’s also the name of the riveting sequel to I, Robot that I produced – starring Jaden Smith and now playing on every gas station TV in the Midwest.


Spot the Bug logo

Spot the Bug: Solution

Sponsored by Neon

The forEach loop is synchronous, meaning it doesn’t wait for the inner async function to complete. This results in the data potentially being out of order when logged to the console. To fix this, you can use a for...of loop with await:

const userIds = [1, 2, 3];

async function fetchUsers() {
  for (const id of userIds) {
    try {
      const user = await fetchUserById(id);
      console.log(`Fetched user: ${user.name}`);
    } catch (error) {
      console.error(`Failed to fetch user with ID ${id}:`, error);
    }
  }
}

async function fetchUserById(id) {
  return new Promise((resolve) => {
    let delay = Math.random() * 1000 + 1000;
    setTimeout(() => {
      resolve({ id, name: `User${id}` });
    }, delay);
  });
}

fetchUsers();