From KnockoutJS to… VueJS. Why?

I use KnockoutJS since 2012^th when MVVM became mainstream. Why Knockout? Because it’s easy to jump in. When your project is mature introducing new technology is always a challenge. But with Knockout you can add a small piece of code to ancient page and enjoy. Low level of knowledge required to work with the framework is valuable too. But it is obvious the KnockoutJS’ community do not grow and the technology remains marginal.

What about the big ones Angular and React? Angular is quite complex to learn and when you need MVVM for just a <5% of your project it is hard to convince teammates to invest time in it. React is much easier to learn but we are kind of CMS and we have team members who work with HTML and CSS only so templating right in HTML is a must.

I started with VueJS just a week ago and I’m in love with it already. I didn’t know we could have something simpler than KnockoutJS.

No need to wrap data in observables

KO

var model = {
    State: ko.observable(0), 
    TypeID: ko.observable(), 
    Name: ko.observable(), 
    Units: ko.observableArray([….]) ,
    Details: ko.observable({})
}

Vue

data: { 
    State:0,
    TypeId:null,
    Name:null, 
    Units: [],
    Details: {}
}

Easy reading mustache syntax

KO

<tbody data-bind=’foreach: Units’ > 
  <tr >
    <td data-bind=’text: ID’></td>
    <td data-bind=’text: ID’></td>
    <td data-bind=’text: ID’></td>
    <td data-bind=’text: new Intl.NumberFormat('en-US', { maximumSignificantDigits: 3 }).format(Population)’></td>
    <td>
      <a data-bind=’click: function(event) { ShowDetails($parent); event.preventDefault();}>Details</a>
    </td>
  </tr>
</tbody>

Vue

<tr v-for="unit in Units">>
  <td>  {{ unit.ID }}  </td>
  <td>  {{ unit.County }}  </td>
  <td>  {{ unit.Type }}  </td>
  <td>  {{ unit.IDName }}  </td>
  <td style="text-align: right;">
      {{ new Intl.NumberFormat('en-US', { maximumSignificantDigits: 3 }).format(unit.Population) }}
  </td>
  <td>  
      <a v-on:click.prevent="function() { ShowDetails(unit); }">Details</a>
  </td>
</tr> 

Natural namespaces for nested loops

<template v-for="unit in Units"> 
...
    <template v-for="wr in Details.BingSearch">
      <div :class="{ panel: true, 'panel-success': wr.Relevance == 2, 'panel-info': wr.Relevance == 1, 'panel-default': wr.Relevance == 0 }">
        <div class="panel-heading">
          <h4 class="card-title">{{ wr.Title }}</h4>
        </div>
        <div class="panel-body">
          <p class="card-text">{{ wr.Text }}</p>
            <a :href="wr.URL">{{ wr.URL }}</a>
                                        
            <a class="btn btn-default" v-on:click.prevent="function() { SetOfficialWebsite(unit.ID, wr.URL); }">Set as Official</a>
        </div>
       </div>
    </template> 
...
</template> 

Details object exists on the same level as Units and in KnockoutJS you have to use $parent variable to access it from the loop. But in Vue you just use a Details variable. It works like variable scope in C# or JS. We have the same for nested loops. Pay attention that unit variable EXISTS for v-for=’wr in Details.BingSearch’ context. It is so natural and so amazing at the same time.

I spent about 2 hours to learn documentation and now I feel I know this framework for ages.