DEV Community: Heru Joko Priyo Utomo

Creating a debounced input component using Vue Composition API

Heru Joko Priyo Utomo — Sat, 25 Apr 2020 15:24:00 +0000

Few weeks ago I was browsing up dev.to to look up some references for custom hook in react, and found this great article https://dev.to/gabe_ragland/debouncing-with-react-hooks-jci . I also heard that vue 3 is coming with similar API with react hooks called compostion API and that part already available in https://www.npmjs.com/package/@vue/composition-api for Vue 2. Lets try to create similar thing there using vue new feature.

Create a new vue project (you can look up to google on how to do this)
Install https://www.npmjs.com/package/@vue/composition-api by running npm i @vue/composition-api -S
Run the project with npm run serve
In the main.js we need to info vue to use the composition api plugin, otherwise it won't compile the new syntax correctly

import Vue from 'vue'
import App from './App.vue'
import VueCompositionApi from "@vue/composition-api";

Vue.use(VueCompositionApi);
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Create a new component in components folder called DebouncedInput.vue and copy the following code

<template>
  <div>
    <input :value="displayValue" @input="debounceListener" placeholder="search here" />
    <p>deb : {{ debouncedValue }}</p>
  </div>
</template>

<script>
import { ref } from "@vue/composition-api";

export default {
  setup() {
    let timeoutRef = null;
    const displayValue = ref("");
    const debouncedValue = ref("");

    const debounceListener = e => {
      if (timeoutRef !== null) {
        clearTimeout(timeoutRef);
      }

      displayValue.value = e.target.value;
      timeoutRef = setTimeout(() => {
        debouncedValue.value = e.target.value;
      }, 800);
    };

    return { debouncedValue, displayValue, debounceListener };
  }
};
</script>

Ok, what was that huh? seems strange for usual vue file. its the new composition API syntax which allow us to write our logic code more modular / functional you can look up for more info here https://composition-api.vuejs.org/. Okay now we break down few things about code above

import { ref } from "@vue/composition-api";

in this line we import our ref function from the plugin, basically, it will turn our variables into a reactive variable (like useState in react hooks).

let timeoutRef = null;
const displayValue = ref("");
const debouncedValue = ref("");

here is how we create the reactive data. timeourRef is a helper variable that we will use to maintain our timeout and won't be used in view, so no need to be reactive.

const debounceListener = e => {
  if (timeoutRef !== null) {
    clearTimeout(timeoutRef);
  }

  displayValue.value = e.target.value;
  timeoutRef = setTimeout(() => {
    debouncedValue.value = e.target.value;
  }, 800);
};

this is the main function, basically it just delay the process to set the debouncedValue and clear the timeout if there is a previous timeout but new event input is already typed.

return { debouncedValue, displayValue, debounceListener };

finally we return all the reactive variable and the function.

Now we have a usable component with new composition api. but this is the same behaviour like previous vue syntax that we need to share the logic and the view as a component. What if like we need to just reuse the logic only? this is where this new syntax comes in handy.

Reusable logic

Now create a new file called useDebounce.js inside src/composed folder. then use the following code

import { ref } from "@vue/composition-api";

export default function (timeoutCount = 800) {
    let timeoutRef = null;
    const displayValue = ref("");
    const debouncedValue = ref("");

    const debounceListener = e => {
        if (timeoutRef !== null) {
            clearTimeout(timeoutRef);
        }

        displayValue.value = e.target.value;
        timeoutRef = setTimeout(() => {
            debouncedValue.value = e.target.value;
        }, timeoutCount);
    };

    return { debouncedValue, displayValue, debounceListener };
}

basically it is almost like the prev component but we wrap it inside a function (oh maybe this is called functional approach?) then we pass a parameter to easily customize how long we wanna wait for the timeout. Then in our previous component, we can update the code to be like

<template>
  <div>
    <input :value="displayValue" @input="debounceListener" placeholder="search here" />
    <p>deb : {{ debouncedValue }}</p>
  </div>
</template>

<script>
import useDebounce from "../composed/useDebounce";

export default {
  setup() {
    return {
      ...useDebounce(2000)
    };
  }
};
</script>

wow so much cleaner, and we can mix and match other logic inside our component.

Conclusion

Reusable code is one of the signs of good code, as more and more duplicated code lives in our codebase will make our codebase harder to maintain. Really look up for this composition api to be ready to use in vue 3.

please let me know your thoughts or if have other possible cool use cases to use this cool feature. If you find my explanation hard to follow can also look up to the code in my github https://github.com/heruujoko/use-debounce-vue

Reference

Analyzing and Improving Bundle Size

Heru Joko Priyo Utomo — Sun, 19 Apr 2020 05:39:38 +0000

Setting up frontend project these days is as easy as running a single command. We will get all of the good stuff and best practices alongside with the template (vue-cli or create-react-app) when we initialised the project. But what happened when we adding more and more components, pages, 3rd party libs, etc in our project? the bundle size will increase as the time goes on and gradually slowing down our apps. What shall we do? There are some improvements methods to do depending on our project conditions. First thing first before we do any action we need to analyse it first to know what we're up against.

Google Lighthouse
this is an interesting and very useful tools to give a high level information and suggestion about how our app perform in browser. It will provide score and suggestion on how we improve the apps. This tools can be a baseline guide on which methods we should choose to improve our site.
webpack-bundle-analyzer https://www.npmjs.com/package/webpack-bundle-analyzer
this tools help us to check each size of our application chunk. By looking of the report generated by this tool we can find and minimize unused chunk of code being bundled in our application
browser network inspection tool
this is basic tool that offered by most browser to help us spotted files and data being transferred to our site. By combining these 3 tools we will start our improvement

Let's get started to code i'm going to use vue in this example (will add a react version later). We will be starting with a project with bunch of libraries packed into it, then we will improve step by step

clone this project https://github.com/heruujoko/performante-vue-example

navigate to branch feature/without-optimization and try to run npm run build to see our condition of initial build

Just looking at the result, somehow it still look fine and will do just ok in most browser. But we can improve more on that.

CSS Part

Look for the biggest file in the build its our css. the project doesn't have much styling and the css is too big to be that size. We could be wrong, but lets not guessing and try with google lighthouse. serve the build file in your local machine then right-click on the browser and look for audit tab

run the audit and we will find reports about unused css and our current performance.

this is because most of the css framework provide bunch of classes for all purpose use. but not all css class we use in our site, so we will need to select only we need. But how? are we suppose to copy/cut paste the class? NO WAY!! too tedious. We will use css-purge plugin to to that. what it does is looking into our build files and delete any unused css in our build files that still present in our css files. install @fullhuman/postcss-purgecss package to our project and update our postcss.config.js to the following:

const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');
const postcssPurgecss = require(`@fullhuman/postcss-purgecss`);

const purgecss = postcssPurgecss({
    // Specify the paths to all of the template files in your project.
    content: [
        './public/**/*.html',
        './src/**/*.vue',
    ],
    // Include any special characters you're using in this regular expression.
    // See: https://tailwindcss.com/docs/controlling-file-size/#understanding-the-regex
    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
    // Whitelist auto generated classes for transitions and router links.
    // From: https://github.com/ky-is/vue-cli-plugin-tailwind
    whitelistPatterns: [/-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/],
});

module.exports = {
    plugins: [
        tailwindcss,
        autoprefixer,
        ...process.env.NODE_ENV === 'production'
            ? [purgecss]
            : [],
    ],
};

basically the additions config is just to show purge-css where to look for css classes to keep (our index html and all *.vue files) and only enable this on production build enviroment. Ok lets try npm run build again to see the result

surprisingly, we only need the tip of the iceberg now down to 3.47 KiB !!

JS Part

CSS part was easy just add few lines of config with plugin and we have our code optimized. But JS? we need to be more careful, taking up wrong piece of code could fail our apps. To do that, we need webpack-bundle-analyzer. install it by

npm i webpack-bundle-analyzer -D

then create vue.config.js with the following code:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

let plugins = [];
let optimization = {};

// comment line 6 to disable analyzer
plugins.push(new BundleAnalyzerPlugin());

module.exports = {
    lintOnSave: false,
    configureWebpack: {
        plugins,
        optimization,
    },
};

and run:

npm run build

http://locahost:8000 will pop up to our browser and show us overview of our bundle

actually analyzing this part is not a straight to method. Most likely based on experience and requirements whether we need to include some part of the code. In this case we can see moment and lodash took a big part in our bundle and looks like we don't need them that much. They are utilities that bundles all possible usecase they cover and bundle all the functions and module. Since we just only need findIndex for lodash we can change our code into

import { Vue, Component } from "vue-property-decorator";
import UserResponse from "@/interfaces/UserResponse";
import User from "@/interfaces/User";
import axios from "axios";
import findIndex from "lodash/findIndex";

@Component
export default class Networkable extends Vue {
  users: User[];

  constructor() {
    super();
    this.users = [];
  }

  async getData() {
    const resp = await axios.get("https://reqres.in/api/users");
    const parsed: UserResponse = resp.data;
    this.users = parsed.data;
  }

  findEmma() {
    const index = findIndex(this.users, (u: User) => {
      return u.first_name == "Emma";
    });
    alert(`emma is at index ${index}`);
  }

  mounted() {
    this.getData();
  }
}

we import only function that we need.

secondly, take a look on moment package they took up a lot of space from their locale module. In this case we only need english locale, we can strip-down all those locale by updating our vue.config.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const webpack = require('webpack');
let plugins = [];
let optimization = {};

// comment line 6 to disable analyzer
plugins.push(new BundleAnalyzerPlugin());

// ignore moment locale
plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));

module.exports = {
    lintOnSave: false,
    configureWebpack: {
        plugins,
        optimization,
    },
};

moment is a good library but it don't have a good size and it's mutable (a lot of article explain this) for frontend when size matter i will suggest to take a look date-fns (https://date-fns.org/) over moment. Finally we can enhance a bit by removing axios and use fetch API provided by most browser. This step is really depending on your target browser when you have to support very very legacy browser (IE) then you should not do this. By the time this article written the fetch API has already supported in major browser you can see the details here https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

update our network request to be like this

async getData() {
    const resp = await fetch("https://reqres.in/api/users").then(response => response.json());
    const parsed: UserResponse = resp;
    this.users = parsed.data;
  }

now lets see how our bundle looks

and our final performance result

we have reduced so much of the bundle size without breaking/changing any features.

Infra level optimization

All the steps we do above is on the codebase level, infrastructure level can give boost to performance too with compression when delivering our bundle usually with gzip or brotli compression. You can find more info here https://computingforgeeks.com/how-to-enable-gzip-brotli-compression-for-nginx-on-linux/

That's all from me on what I've learned along the way being frontend engineers. Let me know in the comments if you have more tips on how we improve the performance on our site

reference: