DEV Community: epoundev 👨🏾‍💻

How to get away with slow rendering?

epoundev 👨🏾‍💻 — Mon, 07 Nov 2022 08:47:56 +0000

How to use v-memo and v-once

Les performances de rendu sont une mesure essentielle pour les développeurs front-end. Pour chaque seconde que prend le rendu de votre page, le taux de rebond augmente.

Et lorsqu'il s'agit de créer une expérience utilisateur fluide ? Un retour d'information quasi instantané est essentiel pour offrir aux utilisateurs une expérience d'application réactive.

Avec les framework front-end modernes comme Vue, il existe des moyens pour les développeurs d'améliorer les performances de leurs applications.

Il existe plusieurs façons d'optimiser le rendu des applications Vue, allant du défilement virtuel à l'optimisation de vos éléments v-for.
Mais un moyen extrêmement simple d'optimiser le rendu consiste à ne rendre à nouveau que ce qui est nécessaire.

Chaque fois que les données d'un composant changent, ce composant et ses enfants seront rendus à nouveau. Il existe des moyens d'éliminer les tâches inutiles avec deux directives Vue moins utilisées : v-once et v-memo.

Entrons dans le vif du sujet et voyons comment nous pouvons les utiliser dans une application.

Les directives Vue sont des attributs HTML spéciaux qui vous permettent de contrôler la façon dont Vue rend votre template.

v-once

La directive v-once est une directive Vue.js qui est utilisée pour éviter les re-renders non souhaitées d'un élément. Elle traite l'élément comme un contenu statique après l'avoir rendu une fois pour la première fois. Cela améliore les performances car il n'a pas besoin d'être rendu à nouveau. Il est rendu une et une seule fois

Il fonctionne avec des éléments simples, des éléments avec enfants, des composants, des directives v-for, tout ce qui se trouve dans votre template.

<template>
  <!-- elements individuels (single elements) -->
  <p v-once>{{ msg }}</p>
  <!-- elements avec enfants (elements with children) -->
  <div v-once>
    <p>{{ notification}}</p>
  </div>
  <!-- components -->
  <my-component v-once />
  <!-- directive v-for  -->
  <li v-for="”item" in list” v-once>{{item}}</li>
</template>

Disons que nous avons ce template avec des données réactives,

<script setup><script setup> import { ref } from "vue" ; const msg = ref("hello world") ; </script> <template> <div> <p v-once>{{ msg }}</p> <button @click="msg = 'changed message'">Change message</button> <div>État actuel : <p>msg : {{ msg }}</p> </div> </div> </template>.
  import { ref } from "vue";
  const msg = ref("hello world");
</script>
<template>
  <div>
    <p v-once>{{ msg }}</p>
    <button @click="msg = 'changed message'">Change message</button>
    <div>
      Current state:
      <p>msg: {{ msg }}</p>
    </div>
  </div>
</template>

Lorsque nous cliquons sur notre bouton, nous pouvons voir que même si la valeur de msg change, le paragraphe ne change pas grâce à v-once.

Quand dois-je utiliser `v-once` ?

Vous devriez utiliser v-once s'il n'y a aucune circonstance où vous aurez besoin de rendre à nouveau un élément.

Voici quelques exemples :

Affichage des informations sur le compte dans la barre latérale (navBar)
Afficher le texte d'un article
Persistance des noms de colonnes dans un tableau

Bien sûr, il y a des tonnes d'autres exemples, mais réfléchissez simplement si cela fonctionne bien dans votre application.

v-memo

La directive v-memo vous permet de “mémoïser” des parties de votre template Vue. En termes simples, la mémoïsation est une technique pour optimiser les programmes pour la performance en laissant les fonctions retourner la même valeur sans réévaluation lorsque les mêmes entrées sont données..

Elle accepte un tableau de dépendances et ne procédera à un nouveau rendu que si l'une des valeurs du tableau a changé. En gros, nous disons de ne mettre à jour cette parties de votre template que si l'une de ces valeurs change.

Dans un framework front-end réactif, il est facile d'imaginer un cas d'utilisation pour cela. Puisque Vue redéfinit automatiquement vos composants lorsque cela est nécessaire, il y a de grandes chances que parfois plus de code soit exécuté que strictement nécessaire. C'est là que v-memo entre en jeu.

<template>
  <p v-memo="[msg]">{{ msg }}</p>
</template>

En continuant avec cette logique où les changements dans la valeur de nos dépendances déclencheront une mise à jour, passer dans un tableau de dépendances vide fonctionnera de la même manière que d'utiliser v-once où il ne sera jamais rendu à nouveau.

<template>
  <p v-once>{{ msg }}</p>
  <p v-memo="[]">{{ msg }}</p>
</template>

Considérons cet example

<script setup>
import { ref } from 'vue'

const subscribers = ref(4000)
const views = ref(10000)
const likes = ref(3000)
</script>
<template>
  <div>
    <div v-memo="[subscribers]">
      <p>Subscribers: {{ subscribers }}</p>
      <p>Views: {{ views }}</p>
      <p>Likes: {{ likes }}</p>
    </div>
    <button @click="subscribers++">Subscribers++</button>
    <button @click="views++">Views++</button>
    <button @click="likes++">Likes++</button>
    <div>
      <p>Current state:</p>
      <p>Subscribers: {{ subscribers }}</p>
      <p>Views: {{ views }}</p>
      <p>Likes: {{ likes }}</p>
    </div>
  </div>
</template>

Si nous modifions les autres éléments de données du composant, notre div ne sera pas rendu à nouveau, mais dès que nous mettons à jour la valeur des abonnés... BAM ! Voilà le rendu.

Il y a cependant un disclaimer dans la documentation de Vue .

v-memo ne fonctionne pas à l'intérieur d'une boucle v-for, donc si nous voulons mémoïser quelque chose avec un v-for, nous devons les mettre sur le même élément.

Selon les v-docs eux-mêmes, v-memo sera rarement nécessaire. Il est principalement utilisé pour des micro-optimisations dans des situations où les performances sont vitales pour votre application. Le plus souvent, v-memo est utilisé pour le rendu de listes extrêmement volumineuses dans un v-for.

A directive to govern them all

epoundev 👨🏾‍💻 — Mon, 31 Oct 2022 17:27:52 +0000

What’s a directive? 🧏🏾‍♂️

A custom directive is defined as an object containing lifecycle hooks similar to those of a component. The hooks receive the element the directive is bound to. Here is an example of a directive that focuses an input when the element is inserted into the DOM by Vue:

<script setup>
// enables v-focus in templates
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

<template>
  <input v-focus />
</template>

In <script setup>, any camelCase variable that starts with the v prefix can be used as a custom directive. In the example above, vFocus can be used in the template as v-focus.

If not using <script setup>, custom directives can be registered using the directives option:

export default {
  setup() {
    /*...*/
  },
  directives: {
    // enables v-focus in template
    focus: {
      /* ... */
    }
  }
}

It is also common to globally register custom directives at the app level:

const app = createApp({})

// make v-focus usable in all components
app.directive('focus', {
  /* ... */
})

Next, we will do this by defining a plugin

How can we implement a plugin ? 💁🏾‍♂️

A plugin is defined as either an object that exposes an install()
method, or simply a function that acts as the install function itself. The install function receives the app instance along with additional options passed to app.use(), if any:

const vueGates = {
  install(app, options) {
    // configure the app
  }
}

Plugins are self-contained code that usually add app-level functionality to Vue. This is how we install a plugin:

import { createApp } from 'vue'

const app = createApp({})

app.use(vueGates, {
  /* optional options */
})

Writing my Plugin 🔌

Let's begin by setting up the plugin object. It is recommended to create it in a separate file and export it, as shown below to keep the logic contained and separate.

// plugins/vueGates.js
export default {
  install: (app, options) => {
    // Plugin code goes here
  }
}

We want to create a Gate class. This Gate can allows a user in relation to a certain door (it’s like a function). It’s will work like that.

<template v-gate:can="addAUser">
    <h1> You are able to create a new user </h1>
</template>

<template v-gate:allows="clickButton">
    <button> You can click it cause you're V.I.P </button>
</template>

<template v-gate:authorize="toSeeTheDoc">
    <doc
        :name="doc.name"
        :author="doc.author"
        :src="doc.src" 
    /> 
</template>

Or like that

<template v-if="$gate.can('addAUser')">
    <h1> You are able to create a new user </h1>
</template>

<template v-if="$gate.allows('clickButton')">
    <button> You can click it cause you're V.I.P </button>
</template>

<template v-if="$gate.authorize('toSeeTheDoc')">
    <doc
        :name="doc.name"
        :author="doc.author"
        :src="doc.src" 
    /> 
</template>

At work

First we will create a new vuejs application. I use the vue-cli by typing

npm i vue-cli
vue create VueGate

Create a folder called plugins in the src folder. In this folder, we will create a gate.js file that will contain the Gate class17 octobre 2022 01:00

//src/plugins/VueGate/gate.js
class Gate {
  constructor(user) {
    this.user = user;
    this.policies = {};
    this.abilities = {};
    this.resolveUserFn = () => null;
    this.resolveUserPermissionFn = () => [];
  }

  resolveUser(fn) {
    this.resolveUserFn = fn;
  }

  resolveUserPermission(fn) {
    this.resolveUserFn = fn;
  }

  registerPolicies(policies = {}) {
    Object.keys(policies).forEach((modelName) => {
      this.policies[modelName] = new policies[modelName]();
    });
  }

    registerAbilities(abilities) {
    Object.keys(abilities).forEach((name) => {
      this.define(name,abilities[name]);
    });
  }

  define(name, fn) {
    this.abilities[name] = fn;
  }

  allows(abilities = [], ...args) {
    if (typeof abilities === "string") {
      abilities = [abilities];
    }

    const user = this.resolveUserFn();

    if (!user) {
      return false;
    }

    return abilities.every((ability) => {
      if (this.abilities[ability]) {
        if (typeof this.abilities[ability] === "function") {
          return this.abilities[ability].call(null, user, ...args);
        }

        return false;
      }

      const model = args[0];

      if (!model) {
        return user.allPermissions.includes(ability);
      }

      const policy = this.policies[model.constructor.name];

      if (!policy) {
        return false;
      }

      if (typeof policy[ability] === "function") {
        return policy[ability].call(policy, user, ...args);
      }

      return false;
    });
  }

  denies(abilities = [], ...args) {
    return !this.allows(abilities, args);
  }

  can(permissions) {
    const allPermissions = this.resolveUserPermissionFn();
    if (allPermissions.length === 0) {
      console.warn(
        "You have to define the ways to get all permission of a user throught use resolveUserPermission method"
      );
    }
    return allPermissions.includes(permissions);
  }

  cannot(permissions) {
    return !this.can(permissions);
  }
}
const gate = new Gate();

export default gate;

Then we will create the plugin

//src/plugins/VueGate/index.js
import gate from "./gate";

export default {
  install: (app, options) => {
        //options for gate's class
    gate.resolveUser(() => options.user || {});
    gate.registerPolicies(options.policies || {});
    gate.registerAbilities(options.abilities || {});

    app.directive("gate", {
      beforeMount: (el, binding,vnode) => {
        if (["can","cannot", "allows","denies","authorized", "unauthorized"].includes(binding.arg)) {
          if (!gate[binding.arg](binding.value)) {
            el.style.display = "none";
            vnode.el.remove();
          }
        }
      },
    });
  },
};

Our plugin thus created, we will use it

//src/main.js
import { createApp } from "vue";
import App from "./App.vue";
import VueGates from "./plugins/vueGates";

createApp(App)
  .use(VueGates)
  .mount("#app");

As you saw in the src/plugins/VueGate/index.js file, the Gate class needs some options. Let’s create it

//src/main.js
import { createApp } from "vue";
import App from "./App.vue";
import VueGates from "./plugins/vueGates";

const user = {
  id: 12062001,
  name: "Epoundor",
};
const policies= {}
const abilities = {};
createApp(App)
  .use(VueGates, {
      user,
      policies,
      abilities
  })
  .mount("#app");

Now you can use the v-gate directive everywhere in our app

17 octobre 2022 We gonna try it out . First of all define a new abilities

//src/main.js

const abilities = {
  seeImage: (user) => {
    return typeof user.id === "string";
  },
};

Then in your component, use the v-gate:allows=”’seeImage’” directive

<template>
  <img alt="Vue logo" src="./assets/logo.png" v-gate:allows="'seeImage'">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

The Vue’s logo will disappear

Vue app without logo

We want pass it to a v-if or a v-show directive like

<template>
  <img alt="Vue logo" src="./assets/logo.png" v-if="$gate.allows('seeImage')">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

Let's modify our plugin a little by adding a line

//src/plugins/VueGate/index.js

import gate from "./gate";

export default {
  install: (app, options) => {
    // // Plugin code goes here
    gate.resolveUser(() => options.user || {});
    gate.registerPolicies(options.policies || {});
    gate.registerAbilities(options.abilities || {});

        //We define $gate as global property
    app.config.globalProperties.$gate = gate;

    app.directive("gate", {
      beforeMount: (el, binding,vnode) => {
        if (["can","cannot", "allows","denies","authorized", "unauthorized"].includes(binding.arg)) {
          if (!gate[binding.arg](binding.value)) {
            el.style.display = "none";
            vnode.el.remove();
          }
        }
      },
    });
  },
};

Conclusion 🫡

Now you’re able to create a directive and use it on a application. You will have noticed that in the Gate class I did not define some functions as authorized. I'll let you take care of that