第1回.js系勉強会

こばやし 'にらたま' けんいち @Niratama

そういえば、Angular.jsでModelの修正を外部に同期させる場合ってどうするんだろう #techbuzz

matsuu @matsuu

#techbuzz 続きまして、Backbone.jsでつくるWebアプリケーション @hokaccha さん

matsuu @matsuu

#techbuzz Backbone.jsとは何か JavaScriptのMVCフレームワーク。圧縮版で5.6KBと軽量。作者はCoffeeScript、underscore.jsなどを開発しているJeremy Ashkenas氏

pi9min @__pi9min

Backbone.js軽いなー5k弱とか #techbuzz

mittan @modsound

backbone.jsは5.6KB!! #techbuzz

maco @macococo

次は Backbone.js #techbuzz

matsuu @matsuu

#techbuzz 他のJavaScript MVCフレームワークとしては、Spine, AngularJS, Ember.jsなどがある

こばやし 'にらたま' けんいち @Niratama

次のBackbone.jsはAngular.jsとは対極なフレームワークなのかな #techbuzz

matsuu @matsuu

#techbuzz まず普通にVanilla JSで書いたサンプル。規模が大きくなった時に管理しきれなくなる。

matsuu @matsuu

#techbuzz 対策としては、とにかく分ける。ファイルを分ける。役割を分ける。機能を分ける。そうすることで、再利用、分業、テストが可能になる。

matsuu @matsuu

#techbuzz Backbone.jsを導入することによって、役割、機能の切り分けができる。大規模な子度の保守性などが解決できる。

matsuu @matsuu

#techbuzz Backbone.jsが解決しないこと。コード量は削減されない。プログラムは高速化されない。小規模なコードの保守性は向上しない。短期的には生産性は向上しない（長期的には向上するけど）

pi9min @__pi9min

割と好き勝手できるのねBackbone.jsは。自分でほしいものは書け！ってのは好感が持てる #techbuzz

matsuu @matsuu

#techbuzz ControllerはBackbone.RouterとBackone.History。ModelはBackbone.ModelとBackbone.Collection。ViewはBackbone.View

matsuu @matsuu

#techbuzz Modelを子要素にしてまとめたものがCollection

matsuu @matsuu

#techbuzz あーいいね。それぞれ疎結合でイベントを各モデルとビューで処理できるのか。いいねー

ないさろーる @nysalor

VとMが直接結びついているのか #techbuzz

matsuu @matsuu

#techbuzz ライブコーディング開始。開発環境はOSX。FTP/SFTPクライアントにForkLiftってのを使われてる。ブラウザはChrome。エディタはVIM。本題と関係ないけどメモ。

matsuu @matsuu

#techbuzz Backbone.jsはunderscore.jsとjQueryに依存している。

matsuu @matsuu

#techbuzz Backbone.Viewなどはクラス。Backbone.View.extend()で継承されたものを作成。

matsuu @matsuu

#techbuzz Viewは基本的に１つのHTML要素以下を管理する。el: 'form.searchForm'とすれば、View内のthis.elで取得できる。this.$elはjQueryオブジェクトとして取得も可能

しょうけん@KitchHike @shoken0x

Backbone.jsのライブコーディング、すげーなー。 どんどんできていく。 #techbuzz

matsuu @matsuu

#techbuzz Backbone.jsの肝はevents。ほほう。

matsuu @matsuu

#techbuzz みんなthisの処理どうやってんのかなーと気になってたけど、var self = this;ってやってた。なるほど

matsuu @matsuu

#techbuzz thisの扱いツライ