Swizec Teller - a geek with a hatswizec.com

    Benchmarking Vue

    This is a Livecoding Recap โ€“ an almost-weekly post about interesting things discovered while livecoding. Usually shorter than 500 words. Often with pictures. Livecoding happens almost every Sunday at 2pm PDT on multiple channels. You should subscribe to My Youtube channel to catch me live.

    This article builds on my previous articles about Building an interactive DOM benchmark and Adding Preact to a React project

    I understand why people like Vue, and those people are wrong.

    But this isn't a rant about Vue. If you like the ease of porting your 2012-era code to a modern framework, Vue is for you. If you're into Mustache templates, Angular directives, and love to split your code into templates, scripts, and styles just like ye olden times, Vue is perfect. Hell, if you love nothing more than to use cumbersome workarounds to avoid JavaScript classes ๐Ÿ‘‰ Vue.

    You do you. I built a Vue component and hated every minute of it. But it's important to try new things.

    It took about 2 hours to add Vue to my interactive DOM benchmark. Half the time I spent bitching about the Angular 1 style templates. The other half, I complained about 2012-era hacks designed to fake classes.

    Oh, and it took an hour just to get it compiling.

    Swizec Teller published ServerlessHandbook.dev avatarSwizec Teller published ServerlessHandbook.dev@Swizec
    Getting started with Vue is easy they said, you'll have fun they said.

    vue-loader installs vue-template-es2015-compiler then complains it can't find vue-template-compiler
    Tweet media

    A wonderful experience all over ๐Ÿ‘Œ

    BUT! I created my first non-trivial Vue component, a simple benchmark ๐ŸŽ‰

    My first Vue component

    The Vue benchmark component

    You can see the code on GitHub. There are 5 buttons and a scratchpad area that renders a list of immutable nodes. Much like a chatroom or a newsfeed.

    Buttons can prepend, insert, append, drop, and remove nodes. Clicks map to methods on the Vue component that manipulate a nodes array in data. The template renders it as a bunch of divs.

    <div class="row benchmark-scratchpad">
    <div v-for="k in nodes">{{ k }}</div>

    That v-for="k in nodes" syntax is one of my least favorite parts of Vue. Brings back memories of some Angular 1 projects I worked on. Nightmares lasted months1.

    Click events call instance methods via v-on:click="func". They manipulate the nodes array and that triggers a re-render. These methods look a lot like to their React counterparts, but cleaner because there's no setState in Vue. I liked that ๐Ÿคซ

    prepend() {
    this.nodes = [...this.newNodes(), ...this.nodes];
    append() {
    this.nodes = [...this.nodes, ...this.newNodes()];

    I think that looks more readable and makes more sense than going through setState in React.

    However, you have to define instance attributes in a data: key and instance methods in a methods: key. But you override Vue's internal instance methods in the normal namespace. ๐Ÿคจ

    module.exports = {
    // adding attributes here does nothing
    data: function () {
    // this is where you define state
    return {
    nodes: [],
    start: null,
    times: [],
    // ...
    // override Vue instance methods here
    methods: {
    // define custom instance methods here

    Wat ๐Ÿคจ

    That's kind of how we used to write code in the old days before JavaScript got better. Did I fall into a time machine?

    I've heard you can install plugins and tweak configs to get a better approach going, but if it's not the default in the official docs, it doesn't exist. Ask anyone.

    Some people like this, so here we are. It was a fun experiment, I don't like it at all. ยฏ\_(ใƒ„)_/ยฏ

    Oh btw we render benchmark results using Vue refs and direct DOM manipulation so as to avoid re-rendering via Vue after each render. That would be unfair.

    Adding Vue to a nwb-cli based project

    Getting Vue to compile at all was fun, too. I started the project using nwb-cli, which is not The Official Wayโ„ข. You're supposed to use vue-cli, but I didn't want to start a new project.

    Some finagling with vue-loader was necessary. Two steps ๐Ÿ‘‡

    1. install some stuff
    2. tweak nwb.config.js.

    Install some stuff

    yarn add vue vue-loader vue-template-compiler

    You need both vue-loader and vue-template-compiler because vue-loader actually installs vue-template-es2015-compiler then complains that it can't find vue-template-compiler. This is confusing.

    I installed vuera as well. It gives you a wrapper component so you can render Vue inside your React project. Vue is kept internally autonomous so it shouldn't affect the benchmark, but it makes it easier to put all benchmarks in the same project.

    // VueBenchmarkWrapper.js
    import React from "react";
    import { VueWrapper } from "vuera";
    import VueBenchmark from "./VueBenchmark.vue";
    export default () => <vuewrapper component={VueBenchmark}>;</vuewrapper>;

    Tweak nwb.config.js

    After installing Vue, you have to tell Webpack how to use it. That goes in nwb.config.js.

    // nwb.config.js
    module.exports = {
    type: "react-app",
    webpack: {
    extra: {
    module: {
    rules: [
    test: /\.vue$/,
    loader: "vue-loader",

    You add a rule that tells Webpack to use vue-loader for files ending with .vue. Same as a normal Webpack config file, just wrapped in extra: so nwb knows what to do.

    This is where nwb shines over create-react-app. Extra config without eject.

    Next step for the DOM benchmark

    What I want to do next is going to blow your mind. Maybe.

    Remember my blockchain-redux experiment from December? I want to use it to make this DOM benchmark collaborative.

    Every time you click a button, it adds to the benchmark blockchain, distributes it to everyone, updates graphs on everyone's page. We're going to see how these benchmarks behave in the real world on real people's computers.

    That's gonna be fun ๐Ÿค˜

    1. This is a dramatization. There were only cold sweats every time I opened the editor to get started. โ†ฉ

    Did you enjoy this article?

    Published on March 5th, 2018 in Front End, Technical, vue

    Learned something new?
    Want to become an expert?

    Here's how it works ๐Ÿ‘‡

    Leave your email and I'll send you thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths.

    Join Swizec's Newsletter

    And get thoughtful letters ๐Ÿ’Œ on mindsets, tactics, and technical skills for your career. Real lessons from building production software. No bullshit.

    "Man, love your simple writing! Yours is the only newsletter I open and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. ๐Ÿ‘Œ"

    ~ Ashish Kumar

    Join over 14,000 engineers just like you already improving their careers with my letters, workshops, courses, and talks. โœŒ๏ธ

    Have a burning question that you think I can answer?ย I don't have all of the answers, but I have some! Hit me up on twitter or book a 30min ama for in-depth help.

    Ready to Stop copy pasting D3 examples and create data visualizations of your own? ย Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization

    Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.

    Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first ๐Ÿ’ฐ on the side with ServerlessReact.Dev

    Want to brush up on your modern JavaScript syntax?ย Check out my interactive cheatsheet: es6cheatsheet.com

    By the way, just in case no one has told you it yet today: I love and appreciate you for who you areย โค๏ธ

    Created bySwizecwith โค๏ธ