Cache rules everything around me

Issue #5.July 20, 2020.2 Minute read.
Bytes

This issue was created entirely with GPT-3. The prompt? “Combine Old Spice commercials and tc39 meeting notes into a JavaScript newsletter”.

Apollo Client 3.0 finally gets released, and we’re over the moon about it

Apollo Client 3.0

So long, 2.0. Catch you on the flip side.

Houston, we have lift-off… Last week, Apollo blessed us with the major release that we’ve been waiting 11 long months (and 55 betas) for.

For the uninitiated, here’s the quick Apollo Client elevator pitch from CTO Matt DeBergalis:

“In many ways, what React did for UIs, that’s what Apollo does for your API: it brings structure to it so that you can focus on the specifics that have to do with your app and your data and leave the plumbing and complexity to the system as a whole.”

Highlights from Apollo Client 3.0

  • Cache rules everything around me: Apollo Client 3.0 introduces multiple new cache features and policies with the new InMemoryCache APIs. These include configurable cache policies for types and fields, garbage collection, pagination helpers, and more. In one way or another, they all help make Apollo Client’s cache more flexible and performant.

  • Reactive variables: If you create a variable with the new makeVar function and modify it later on, Apollo Client will automatically update every active query that’s dependent on that variable’s value. Reactive variables combined with the new cache policies should make local state management a lot less painful to deal with.

  • Squeaky clean entry point: You can now set up the client with a single, consolidated @apollo/client package.

The Bottom Line

GraphQL’s value prop has always been about offering a more efficient and customizable API experience than standard REST APIs. But since generic HTTP caching doesn’t work with GraphQL, it needs a library like Apollo to make it useable for larger, more complex applications that rely on caching. That’s probably why Apollo Client says they’re focused on being “not just a library for executing GraphQL operations, but a library for interacting with a client-side data graph.”

The new features in Apollo Client 3.0 double down on that mission and provide tools that should help accelerate the trends we’re already seeing towards greater UI reactivity. And considering that Apollo Client accounts for 95% of all GraphQL uses (according to CTO Matt), that’s a pretty big deal.

Adobe releases React Spectrum, validating my theory that every company has a project called Spectrum

Spectrum

Get the best triple play deals on Cable TV, High Speed Internet, and Home Phone Service.

Beyonce was right… Pretty hurts. But luckily, Adobe just made it a little easier to create pretty (and accessible) React apps by releasing React Spectrum last week. It’s a collection of libraries and tools to build adaptive, accessible, and customizable user experiences.

React Spectrum features 3 main libraries/tools:

  • React Spectrum: Meta. This is an implementation of Adobe’s design system, Spectrum, that could be useful if you’re integrating with Adobe software or just want to use their component library in a project.

  • React Aria: A collection of Hooks that implement behavior and accessibility based on the WAI-ARIA Authoring Practices. It also implements internationalization for 30+ languages.

  • React Stately: Another Hooks library that provides cross-platform state management and core logic for each component. They don’t make assumptions about the platform they’re on, and they don’t have any theme or design system-specific logic.

The Bottom Line

We’re 100% down for any tools that make it easier to build cohesive design systems and more accessible React applications.

If you want to see React Spectrum in action, check out this code example of building a component with React Aria and React Stately from one of the creators, Devon Govett.

Super Expressive turns Regex into a piece of cake

It's cake

Don’t trust anyone, not even yourself.

Lot of devs hate Regex… but only because it’s awful. All that weird, cryptic language you need to write regular expressions can make it feel like they’re more trouble than they’re worth (especially if you have to do extensive code reviews later on). Because of that, a lot of developers just avoid Regex altogether.

Super Expressive to the rescue?

Super Expressive is a new JavaScript library that lets you build regular expressions with more natural language so that your expressions can be read in both a programmatic way and a human way. The best of both worlds, Hannah Montana.

Properties and methods describe what they do in plain English, so that it’s easier to write the code initially and to fix mistakes later (in theory). It’s also pretty lightweight and doesn’t come with any extra dependencies.

But every new technology (even a relatively small library like this) brings trade-offs. In this case, the biggest one might be, is it worth the time to learn the new syntax and terminology, particularly if other developers aren’t familiar with it yet?

You can check out some examples of Super Expressive here and see if it’s something you’d like to start playing around with. Who knows, maybe it’ll help you get over your regex anxiety.

JS Trivia - Answer Below

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

  1. An up-and-comer in the React community named Dan Abramov wrote a great article about closures, which he calls an “invisible” JavaScript concept. Sounds spooky.

  2. The Redux core team (which we have a strange suspicion is just Mark) is revamping all of the Redux docs and tutorials, and this new Redux essentials tutorial gives a helpful initial overview.

  3. In this Google Chrome Developers Video, Shu and Leszek walk through some of the biggest changes to JavaScript and the V8 engine in the past 12 months.

  4. Puppeteer recorder is a Chrome extension that records your browser interactions and generates a puppeteer script.

  5. Dmitri wrote a great explanation of event delegation in JavaScript with a lot of helpful visuals and code snippets.

  6. Sharif “built” a React app by describing the desired functionality to GPT-3. GPT-3, so hot right now.

  7. Monica Powell walks through how to build a profile-level README for your personal Github profile (a recently added capability).

  8. Currency.js is a small library for working with currency values more efficiently.

JS Trivia - Answer

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.