Shoken Startup Blog

KitchHike Founder/CTO

【TechBuzz】第1回.js系勉強会に行きました

勉強会 JavaScript

【TechBuzz】第1回.js系勉強会　〜Angular.jsのここがアツい！！シンプルで楽しい開発の実践 / Backbone.jsでつくるWebアプリケーション（ライブコーディングあり）〜
http://atnd.org/events/30767

テーマは、
・Angular.jsのここがアツい！！シンプルで楽しい開発の実践 @tea_noma
　資料：http://nayuta-works.com/study_angularjs
・Backbone.jsでつくるWebアプリケーション（ライブコーディングあり）@hokaccha
　資料：http://hokaccha.github.com/slides/backbone_webapp/
でした。

Angular.jsのここがアツい！！

  • 簡単に始められる
  • DOMと結びついたControllerが直感的
  • ModelとViewの同期が楽
  • routing設定が直感的にできる
$routeProvider.
  when({url}, {template}, {controller}).
  when ...
  otherwise
  • htmlのカスタムタグを簡単に定義できる => viewのコード量が減る
  • 非常に簡単で、やりたいことに注力できるのが良い
  • それなりに複雑なアプリケーションも簡単に実装できるのが強み
  • 大規模なアプリケーションを組む場合は事前に検証をした方が良い => 作り込むとクロスブラウザでひっかかる


■まとめ
一番重要なのは、何を作るか？何を作りたいか？何を実現したいか？
Angular.jsは良いフレームワークだけど、それを超えるものを皆さんには目指して欲しいと思う。

■感想
デモアプリでの説明があったので、Angular.jsでできることがわかりやすかったです。
とてもミニマムからはじめられることが驚きでした。
これだけで動きます。

<html ng-app>
  <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    <input type="text" ng-model="n" />{{' name = ' + n }}
</html>

Backbone.jsでつくるWebアプリケーション

  • JavaScriptのMVCフレームワーク
  • 圧縮版で5.6KBと軽量 => Angular.jsは70KBくらい
  • Backbone.jsは、開発規模が大きくなったときの問題を解決するのを手伝ってくれる
  • Backbone.jsが解決すること

役割、機能の切り分け
大規模なコードの保守性の向上
長期的な生産性の向上

  • Backbone.jsが解決しないこと

コード量の削減
プログラムの高速化
小規模なコードの保守性の向上
短期的な生産性の向上

  • jQueryに依存している
  • 日付周りのライブラリ　moment.jsを使うと良い
  • Modelに変更を加えるには、toJSONを上書きすると簡単
  • twitter公式ライブラリでtwttr.txt.autoLink() が便利 => 本文にリンク処理を加えてくれる

■まとめ
Backbone.jsは役割を分割することでメンテナンス性をよくすることができる
あくまで一つの手段なのでBackbone.jsにこだわる必要は無い
アプリケーションを設計する力が必要になる

■感想
ライブコーディングでどんどん機能が実装されるのを見ているのは、とても爽快でした。
すごいなぁ。githubの.vimrc.bundleで勉強させてもらいます。