Dust off your CS textbook

Issue #243.December 4, 2023.2 Minute read.
Bytes

Today’s issue: Receiving a cease and desist from Scott and Wes, Dino Con Deno Cron, and the hottest edge-based boy band in America.

Welcome to #243.


Eyeballs logo

The Main Thing

A kid dressed up as a grass in a school play

Me acting my heart out in the role of *Grass* in my elementary school play.

The Actor Model makes a comeback

And I’m not talking about “actor-models” like Cara Delevingne and Ashton Kutcher. I’m referring to the Actor Programming Model that was first created in the ’70s — and is now “the main focus” of the newly launched XState v5.

Quick review: XState is a popular state management tool that helps you orchestrate complex app logic with state machines, state charts, and now the actor model.

State machines model your application logic by showing you how a process transitions from state to state when an event occurs. One classic example is handling HTTP requests — the state transitions from idle to loading and ends as either resolved or error.

The Actor Model makes “actors” the main unit of abstraction in XState v5. Similar to a “store” in Redux, actors are objects that:

  • Have their own internal state
  • Can send and receive events (or “messages”) from other actors and react to them
  • Can create other actors

State machines model the behavior of a single actor, and the Actor Model orchestrates the behavior of many actors communicating with each other. This means you can now use XState to orchestrate the logic of many parts of a system that need to talk to each other.

It also simplifies the library, because the basic unit will always be an “actor.” This allowed XState to remove confusing terms like “services” and “transient transitions” — and new Actor Logic Creators make it easier to create promise logic, callback logic, and more in your app. You can also use these as composable building blocks to create higher-level abstractions.

Bottom Line: The actor model unlocks new use cases for XState, while simultaneously helping the library to double down on what it’s already known for. Turns out, there’s still a lot we can learn from the ’70s — besides new and exciting ways to ingest cocaine at a dance party.

        

Callstack logo

Our Friends
(With Benefits)

A frozen cat with the loading symbol on its head

When you can't figure out why your app takes forever to load

Callstack’s App Performance Optimization can solve your perf issues

Your team’s app is great… but performance is terrible.

You’ve tried everything you can think of, but you don’t have the time or expertise to address the root problems — so your users keep complaining about slow startup times and janky interactions, until they eventually churn 😭.

Thankfully, Callstack’s App Performance Optimization can solve all of your perf issues for good. Here’s how it works:

  1. Their team of experts does a full performance audit to diagnose all issues.

  2. They present an action plan to your team, then implement all fixes and improvements.

  3. They help you set up better processes to future-proof your app for the long term and avoid technical debt for good.

Callstack has helped large teams like PWC and Ticketmaster improve key performance metrics, so they can boost conversion rates, increase retention, and make more money. They can probably help your team too. Check it out. 👈


Pop Quiz logo

Pop Quiz

Sponsored by Snyk

Integration of AI in development has introduced many security challenges. Snyk’s 10 Best Practices for Securely Developing with AI cheat sheet is your go-to for developing securely while navigating AI-assisted apps while grappling with AI models.

How many times is the reducer function invoked?

const nums = [2,4,6]

const reducer = (prev, current) => {
  console.count('invoked')
  return prev + current
}

nums.reduce(reducer)

Cool Bits logo

Cool Bits

  1. Swizec Teller wrote an article called, TanStack Router – Modern React for the rest of us, which covers how TanStack is able to give us the best parts of Remix, Next.js, TRPC, and Chicane.

  2. Evan You gave a Status Update on Vue and Vite in his 48-minute talk at VueConf Toronto. He discussed some of the mistakes the Vue team made in the transition from Vue 2 to Vue 3, and for the Vite portion of the talk, I think he just held a hockey stick up on its side for a few seconds and walked out.

  3. React Server Components are officially on the Remix roadmap.

  4. Clerk’s free tier offers more than just a few random auth components. Experience complete user management UIs and purpose-built APIs for React and Next.js, making it feel like someone is doing your job for you – plus, all plans include 10,000 MAUs for free! [sponsored]

  5. William Troup created Syntax.js, a lightweight code syntax highlighting tool. I just hope he has good lawyers, because I hear that Wes and Scott are pretty vicious at protecting their IP.

  6. The Graphite Team wrote about Why they use AWS instead of Vercel to host their Next.js app 🌶️.

  7. Deno just released Deno Cron, a simple way to schedule jobs — not to be confused with “Dino Con”, which is the 4th largest Land Before Time cosplay event in North America (at least it was last time I went dressed as Petrie).

  8. Speaking of Deno, the team also just released Fresh 1.6 with first-class Tailwind support and an expanded plugin API.

  9. Vjeux wrote about Using LLMs to implement normal functions within a program.

  10. SQLSync is a collaborative, offline-first wrapper around SQLite that can synchronize web app state between users, devices, and the edge. It’s also the name of my new database-themed NSYNC cover band - so let me know if you know any good tenors.


Pop Quiz logo

Pop Quiz: Answer

Sponsored by Snyk

How many times is the reducer function invoked?

const nums = [2,4,6]

const reducer = (prev, current) => {
  console.count('invoked')
  return prev + current
}

nums.reduce(reducer)

Answer: Twice

If an initial value isn’t supplied, the first element in the array will be used as the initial value and the first invocation of the reducer function will be skipped.