🔥 (#74) Configurable Composables #

August 2022

Hey there!

My friend Tim Benniks from Uniform asked me to share something cool with you:

The Uniform SDK for Nuxt 3! (you can find it here)

Uniform lets you loosely couple all of your CMS and headless sources in one place. This gives you a composable architecture that's easy for non-devs to work with, but also keeps all of us developers happy.

It's a totally new take on the headless CMS, and it's pretty cool!

Tim also recorded a video showing how you can get a demo Nuxt app spun up in only a few minutes:

https://www.youtube.com/watch?v=hKCXN_R0m54

Now let's get to the tips!

— Michael

🔥 Configurable Composables #

The key to highly reusable composables is making them configurable.

To do this we can pass in an options object as the last parameter of the composable:

const count = useCount(4, { incrementBy: 2 });

This way, we can use the composable in it’s default configuration:

const count = useCount(4);

While still being able to access the custom behaviour if we need it.

This is how we might implement this in a composable:

export function useCount(count, opts) {
  const { incrementBy } = opts;
  // ...
}

We take our options object and destructure any values that we need out of it.

Because we are using an object for this configuration, it’s very easy to add in additional properties in the future:

export function useCount(count, opts) {
  const { incrementBy, decrementBy } = opts;
  // ...
}

And because we don’t have to worry about the order of parameters when things are inside an object, we don’t break existing code!

🔥 Use quotes to watch nested values #

You may not have known this, but you can easily watch nested values directly, just by using quotes:

watch: {
  '$route.query.id'() {
    // ...
  }
}

This is really useful for working with deeply nested objects!

📜 The benefits of the Composition API #

This is a guest post by Andrew Schmelyun.

Go check out his blog for more awesome content like this!

Why you should be using Vue 3's Composition API

💬 Creating complexity #

"The purpose of software engineering is to control complexity, not to create it." —Unkown

🧠 Spaced-repetition: 6 Levels of Reusability #

The best way to commit something to long-term memory is to periodically review it, gradually increasing the time between reviews 👨‍🔬

Actually remembering these tips is much more useful than just a quick distraction, so here's a tip from a couple weeks ago to jog your memory.

There are six different levels of reusability that you can use in your components.

Each level adds more complexity but also increases your ability to reuse code.

These levels are the focus of my course, Reusable Components.

Here are the six levels of reusability:

1. Templating —Reusing code by wrapping it up inside of a component
2. Configuration —Using configuration props to allow for varying behaviour
3. Adaptability—Allowing components to become future-proof
4. Inversion —Letting other components control the process
5. Extension —Using reusability throughout our component
6. Nesting—Creating powerful hierarchies of components

I cover this in more detail in this excerpt from the course.

p.s. I also have two courses: Reusable Components and Clean Components

来源 #

原文 https://michaelnthiessen.com/weekly-074-august-17/

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。