Comparison CompBackbone.stickit and Vue.js.md

This is transolation written by me as Japanese about Vue.js

データバインディングについてVue.jsと Backbone.stickitを比較する - mizchi's blog http://mizchi.hatenablog.com/entry/2014/02/18/163721

My Engilish is not so good. So please teach me what to say is better.

This is resource to suite to use vue.js againt my compony so I blame Backbone.stickit :D

backbone.stickit http://nytimes.github.io/backbone.stickit/

Comparison CompBackbone.stickit and Vue.js

This example code theme is "When user click #menu, DOM move to left 100". template function is something jade template exapander.

In case of Backbone.stickit

class MenuView extends Backbone.View
  initialize: ->
    @model = new Backbone.Model()
    @render()

  render: ->
    @$el.html template("""
      #menu.js-open
    """)
    @stickit()

  bindings:
    '.js-move':
      observe: 'positionX'
      update: ($el, model, val) ->
        $el.css 'left', val

Testing

it 'should move to left 100', ->
  menu = new MenuView
  menu.move()
  expect(menu.model.get 'positionX').eq 100

Problems

Watching target for Backbone.stickit is DOM
Depends on 'on chagnge' of Backbone.Model, so it can't hadle nested model (common problem of Backbone.Model)
Procedures exist view and model ant it makes code buggy.
jQuery in update controll is free and controllable for user but makes code buggy.

In case of Vue.js

Menu = Vue.extend
  template:
    template """
      #menu(style="left: {{positionX}}px" v-on="click: move")
    """
  data:
    positionX: 0
  methods:
    move: ->
      @$data.positonX = 100

testings

it 'should move to left 100', ->
  menu = new Menu
  menu.move()
  expect(menu.$data.positionX).eq 100

In this case, menu.$data correspond to Backbone.View's model and Vue's view is under controll by Vue's ViewModel. It covers view controlls and hide from user.

Merit

fewer steps and stateful, not procedural
ViewModel(Vue) covers View
template is intuitive

Hidden view becomes code less and controllable as pure javascript object. And we can avoid DOM manipulation.

I have no expericen to write reusable view combinated with DOM. Cohesive is better when web page building.

What I want to say

Hidden view under view model is good.
Backbone.Model's get/set looks odd.
I don't want to use view model's parameter as special.

Comparison from Angular

Angular is too huge, difficult to learn, and have dirty DSL.(for me)

mizchi/Comparison CompBackbone.stickit and Vue.js.md