KnockoutJSとAngularJSの話

ドキュメント

共通

嵌りどころ等で英語必須。
公式の日本語訳が有志により存在する。
開発ドキュメントは一式揃っている。

Knockout

Githubでの戦闘力が4900とナッパ並
公式のチュートリアルが秀逸で、その場でHTMLとJSを修正して動作させながら学習することができる。

Angular

Githubでの戦闘力が23000と3倍界王拳悟空並
公式のドキュメントが見辛いので、AngularJS Hubを参照するとよい

AngularJS Hub

ソースコード

Knockout

function AppViewModel() {
  this.firstName = ko.observable("Bert");
  this.lastName = ko.observable("Bertington");
  this.fullName = ko.computed(function () {
    return this.firstName() + " " + this.lastName();
  }, this);
}

// Activates knockout.js
ko.applyBindings(new AppViewModel(), $("#main")[0]);

Knockout

<div id="main">
  <p>First name: <input type="text" data-bind="value: firstName"/></p>
  <p>Last  name: <input type="text" data-bind="value: lastName"/></p>
  <p>Full  name: <strong data-bind="text: fullName"></strong></p>
</div>

Angular

angular.module("mainModule", [])
  .controller("myController", function ($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.getFullName = function () {
      return $scope.firstName + " " + $scope.lastName;
    }
  });

Angular

<div ng-app="mainModule">
  <div ng-controller="myController">
    <p>First name: <input type="text" ng-model="firstName"/></p>
    <p>Last  name: <input type="text" ng-model="lastName"/></p>
    <p>Full  name: <strong>{{getFullName()}}</strong></p>
  </div>
</div>

所感

簡単なコードでは記述方法はさほど変わらない。
だがAngularは定義すら関数を使用する必要があるのでAngularの作法をきっちりと身につける必要がある。
Knockoutの場合はJavaScriptの記述を壊していないので直感的に自由に記述ができる。

例えば継承は$controller('ParentCtrl', {$scope: $scope});を実行することにより継承可能となる。
Knockoutならextendsするだけだ。
CoffeeScriptとの親和性も壊してはいない。

結論

好きなほう使え

よもやまばなし

Angularが人気高いんだけど、記述方法がどうも受け付けない。
すごい雑多で後からソースコードを見直したときに、はてなマークが大量に浮かんできそうな気がする。
DIはあるけどいらないです。

現時点でみるとscopeで通知する仕組みはグッド。
knockoutはko.observable()と関数になってしまうので、非常に書きづらくなる。
ES5が使える場合はdefinePropertyで通知するのでknockoutのほうがよくなる。

バインドの反映がデフォルトで
Knockoutはfocusout
Angularはkeypress
どっちがいいかは謎。

Routerの仕組みはAngularはださいね。
Sinatraの記法でいいような気がするんだが、テンプレート使いたいからだめだったのか？

Angularはフルスタックなのでもう少し深く触れば見えてくるものがありそうだけど
書き方がださいので実践投入しても責任が持てない不安感。

Angularの記法に違和感がないならAngularでもいい気はする。

今気づいた、DI使ってるからこんなに記述方法がださいのか。
DIをなくしたAngularを所望する。

ああ、軽くしか使ってないのにAngular批判になってるわ。
そんな僕はKnockout押しです。