Morioh
Login
Ilaria Dugg

Ilaria Dugg

4 years ago

Declarative code and importance in Vue

What is declarative code?

The most common way of programming a computer is to give it a list of instructions. The computer will then go through each instruction step-by-step until the program finishes.

This is called imperative programming.

It’s like you’re explaining your favourite pasta recipe to someone who has never cooked in their life.

You can’t just tell them the ingredients for the sauce and expect them to produce something delicious. They need to know every single step in the most detail possible:

  • Slice the mushrooms

    • Hold the knife like this
    • Slice them this thick

  • Boil the pasta

    • Put in this much water
    • Add a bit of salt
    • Do this to make sure the pot doesn’t boil over

If you leave any detail out, they’ll probably make a mistake and ruin the dish

But what if you were explaining this recipe to someone who has experience cooking?

Your instructions would look like this instead:

  • Slice the mushrooms
  • Boil the pasta
  • Heat up some butter and cream in a sauce pan
  • Mix in garlic, parmesan, cream cheese, salt and pepper

You don’t need to specify how to do each of those things, because the chef knows that. All you need to do is to tell them what they are making.

This is called declarative programming.

Instead of specifying every single step of the program, you only need to tell the computer what should happen, and it knows how to handle the rest.

Computed props allow you to write declarative code

We have a component here that takes in a list prop, but always renders just the top 3 items:

export default {
  props: {
    list: {
      type: Array,
    },
  },

  data() {
    return {
      topThree: [],
    };
  },

  watch: {
    list: {
      // Run as soon as the component loads
      immediate: true,
      handler() {
        // Recalculate and set the `topThree` variable
        this.topThree = this.getTopThree(this.list);
      },
    },
  },

  methods: {
    getTopThree(list) {
      // Sort the array
      list.sort();

      // Return first 3 items
      return list.slice(2);
    }
  }
}

Our component state topThree will always contain the top three items in the list, no matter how the list prop changes.

Step-by-step, this is what it’s doing: 1. If the list prop changes, our watcher fires 1. We pass this.list to our getTopThree method to calculate the top 3 items 1. We take those items and update our component state

We’re following an imperative approach here, by specifying exactly what needs to happen.

Actually, our watcher is somewhat declarative, because we don’t need to write any logic to check when props update. Vue just runs the function for us when the list prop changes.

But if we switch to using a computed prop, we end up with a more declarative approach. You’ll also see that it’s a simpler and more understandable way of writing this functionality.

Declarative code is better code

To switch this to a computed prop we’ll first get rid of the watcher completely:

export default {
  props: {
    list: {
      type: Array,
    },
  },

  data() {
    return {
      topThree: [],
    };
  },

  methods: {
    getTopThree(list) {
      // Sort the array
      list.sort();

      // Return first 3 items
      return list.slice(2);
    }
  }
}

We can also get rid of our data section as well:

export default {
  props: {
    list: {
      type: Array,
    },
  },

  methods: {
    getTopThree(list) {
      // Sort the array
      list.sort();

      // Return first 3 items
      return list.slice(2);
    }
  }
}

Now we can convert the method into a computed prop that we’ll call topThree:

export default {
  props: {
    list: {
      type: Array,
    },
  },

  computed: {
    topThree(list) {
      // Sort the array
      list.sort();

      // Return first 3 items
      return list.slice(2);
    }
  }
}

However, computed props can’t accept any arguments. Instead we’ll just grab the list prop directly from inside the computed prop:

export default {
  props: {
    list: {
      type: Array,
    },
  },

  computed: {
    topThree() {
      // Copy the list to avoid side effects
      const copy = this.list.slice();

      // Sort the array
      copy.sort();

      // Return first 3 items
      return copy.slice(2);
    }
  }
}

As we saw in Lesson 2.2 — Mutating an Array, we have to make a copy of this list first so we don’t accidentally modify it and produce a confusing side effect.

Here are some of the benefits that we can already see just from looking at this small illustration:

  • Less code — Our component here went from 33 lines to 19, a significant reduction
  • Much simpler — Instead of four different pieces in our component (props, data, watcher, and methods) we just have two to think about (props and computed)
  • Focused on our goals — We’re not wasting our time with writing code to trigger the update, which has nothing to do with the feature that we’re trying to write. This is especially important when someone is trying to read the code and understand what it’s doing.

I think you’d probably agree with me that the approach with computed props is easier to understand as well.

Summary

In this lesson we explored what declarative code is, and saw that one of the reasons why people love Vue so much is because it allows us to write our code more declaratively.

We also saw that computed props are the main way that we can convert our imperative code to be more declarative, and saw that there are several benefits to writing code this way.

Because of this, computed props are the most important feature in Vue in my opinion — hopefully I’ve convinced you.

Thank you for reading!

#vue #vue-js #code #developer #programming

Declarative code and importance in Vue
10.40 GEEK