Web Frameworks Benchmark

Round 7

Swap Rows

Time to swap 2 rows on a 1K table. (with 5 warmup iterations).

Partial Update

Time to update the text of every 10th row (with 5 warmup iterations) for a table with 10k rows.

Remove Row

Duration to remove a row. (with 5 warmup iterations).

Select Row

Duration to highlight a row in response to a click on the row. (with 5 warmup iterations).

Append Rows To Large Table

Duration for adding 1000 rows on a table of 10,000 rows.

Create Rows

Duration for creating 1000 rows after the page loaded.

Replace All Rows

Duration for updating all 1000 rows of the table (with 5 warmup iterations).

Create Many Rows

Duration to create 10,000 rows

Clear Rows

Duration to clear the table filled with 10.000 rows.

Startup Time

Time for loading, parsing and starting up

Memory allocation in MBs

Ready Memory

Memory usage after page load

Run Memory

Memory usage after adding 1000 rows

Update Eatch 10th Row for 1k Rows (5 cycles)

Memory usage after clicking update every 10th row 5 times

Replace 1k Rows (5 cycles)

Memory usage after clicking create 1000 rows 5 times

Creating/Clearing 1k rows (5 cycles)

Memory usage after creating and clearing 1000 rows 5 times

Advantages

• Very Small Size
• Easy to Understand
  and Develop Applications
• Simple Integration
• Detailed Documentation
• Flexibility
• Right to choose

Information

• Progressive framework
• Component oriented
• Mix the best of React and Angular

Very Small Size

Easy to Understand and Develop Applications

<template>
    <div class="example">{{ msg }}</div>
</template>

<script>
    export default {
        data () {
            return {
                msg: 'Hello world!'
            }
        }
    }
</script>
                

Simple Integration

• tag script (Vue.js runtime)
• webpack
• web components
• browserify
• requirejs

Detailed Documentation

Flexibility

• Write your template in an HTML file
• Write your template in a string in a Javascript file
• Use JSX in a Javascript file
• Make your template in pure Javascript using virtual nodes

This flexibility makes it easy to switch to Vue because React developers, Angular developers, or developers new to JS frameworks would all find Vue’s design familiar.

Right to choose

• Template
  • html binding
  • jsx
  • jade
• Component class
  • es5
  • es6 / es7
  • es6 + flow
  • TypeScript

How it works?

Components

Lifecycle

Reactivity

Interpolations

Text

<span>Message: {{ msg }}</span>
<span v-once>This will never change: {{ msg }}</span>
                

Raw HTML

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
                

Attributes

<div v-bind:id="dynamicId"></div>
<button v-bind:disabled="isButtonDisabled">Button</button>
                

Using JavaScript Expressions

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
                

Computed Properties and Watchers

Watch

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})
                

Computed

<div id="demo">{{ fullName }}</div>
                

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})
            

Computed Setter

//...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
//...
            

What is Vuex?

What is a "State Management Pattern"?

Shared state