第1回 Build Insider OFFLINE に行ってきた
6月8日は「<htmlday> 2013」ということで日本各地でWeb関連のイベントが行われたそうですよ。
ということで私はその中のひとつ「 第1回 Build Insider OFFLINE」に参加して来ました。（途中から参加なのでキーノートとランチは出来なかったけど・・。）
よりよい開発を目指すためのプロセス・ツール活用
まず最初に聞いたのがこのセッション。中村薫さんによる開発プロセスに関する自身の事例や、利用しているマイクロソフトのTFSというソフトウェアを通して感じたことを聞かせてもらいました。
Team Foundation Server - Wikipedia
TFS(Team foundation Server)しっている人と言われて、会場の8割くらい？が手をあげていたので、アウェイ感半端無かった。マイクロソフト関連のアプリケーション開発ってぜんぜんやったことないので、初耳でしたよ・・・。
TFSがどういうものかというと、私の理解によるとRedmineとJenkinsとGitが一つになったようなやつです。また、ローカルな環境にインストールして使えるTeam foundation Serverと、クラウドサービスとして展開しているTeam foundation Service（どっちもTFSなので分かりにくい）があるようで、中村さんはほとんど、TFService（クラウドの方）を使っているということでしたね。クラウドの利点である離れた場所にいる人と開発を行うってところで威力を発揮しているみたいでした。
印象に残ったのは、TFServiceは3週間毎にリリースを行なっているということ。マイクロソフトみたいな巨大な企業でさえアジャイルなプロセスが実践できているんだから、会社の規模が大きからできないよねって言い訳は出来ないよねって。なるほどねーと思いました。
Backbonejs
次に聞いたのMVCフレームワークのBackbornejsです。LINEの清水大輔さんによるセッションでした。
- 資料はこちら
BackboneとはMV*（MVCとかMVVMとかのこと）アプリを作るためのフレームワークというかライブラリって感じらしい。フルスタックなAngularJSと違って、もっと軽量で自由度が高いそう。
また、MVCフレームワークの人気度調査では1位になっているらしい（http://caliper.io/blog/2013/Javascript-Framework-Popularity/）でもGoogleトレンドでみたらAngularJSに負けてたってことでしょんぼり。
Backbonejsは他のJSライブラリと組み合わせて使うことが一般的で、jQuery, zepto(LINEではこれをよく使っているらしい）、Ender、underscore.js, json2.jsなどをよく使っているみたい。
Backbonejsを使うと、DOMからビジネスロジックが分離されることになるのでテストが書きやすくなるらしい。jQueryだけで作っているJavaScriptのテストってすごいやりにくかったりするので、これはいいね。
AngularJS
次は金井健一さんによるAngularJSについてのセッション。
AngularJSの得意なこととして
苦手なこととして
- モバイル向けアプリケーション（ファイルサイズが大きい。フルスタックなので。通信コストとか）
- ゲームなどのグラフィックの扱い（でもhttp://bombermine.com/のゲームのフレームとかステータス表示とかで使っているみたい）
モバイルは苦手みたいですが、最近タッチイベントとかスワイプイベントとか取れるようになってモバイル対応も始まっているようです。金井さんの希望としては、モバイルでは機能を少なくして、ライブラリのサイズを小さくして貰えたら、ということでした。ただ、サイズが大きくてもダウンロード型のアプリでライブラリを含めるのはありかな、ということです。
Knockout.jsとは
次は、沢渡真雪さんのKnockout.jsというライブラリのおはなし。
特徴としては
Observable
Observableとは値を監視可能な形にラップする仕組みだそうで。
- ko.observable
- ko.observableArray
- ko.computed
の3つがあり、次のように使うみたい。（因みに以下は動かして見てないので、雰囲気だけ感じてください）
var value = 1; // valueが変更されたことを知るのは難しいので・・ // まず、こうしてvalueを監視可能なオブジェクトにラップします。 var value = ko.observable(1); var value2 = value(); // value()というGetterができてる value(1.048596); // 値をセットする(Setterができている） // 次に、通知を受け取れるようにsubscribeでリスナーを登録します value.subscribe(function(newvalue) { alert(newValue); }); // この状態で、valueに値をセットすると value(30); // 変更されたことを受け取って、上で登録した関数が実行されます（30という値がalertで表示される） // つぎに、ko.computedでobservable同様の監視可能なオブジェクトを作る。 var value3 = ko.computed(function() { return value() + value2(); }); // computedなやつもsubscribe可能なので、次のようにできる value3.subscribe(function(newValue) { alert(newValue); }); // ということで、依存関係を自動で追跡して更新・通知してくれる！
あと、DOMとのバインディングの機能もありますということで、これはサンプルをメモれなかったので、後で自分で試してみようかと・・。
リアルタイムWeb最前線〜Socket.IO & SignalR徹底解説
最後に聞いたのが、芝村達郎さん（26歳）のWebSocketのライブラリであるSocket.IOとSignalRのセッション。
Windowsの人はSignalR使って、それ以外のMacとかLinuxとかの人はSocket.IO使えばいいじゃん、ということでした。
- 資料はこちら
Socket.IOの特徴としては
- Node.jsで動作する
- シングルスレッドモデル
- 対応してるトランスポートが多い
- クライントライブラリが多い
SignalRの特徴としては
- ASP.NET上で動作する
- マルチスレッドモデル
- SignalRの方がパフォーマンスはでる
- Socket.IOは複数のサーバを用意してコア数分動かす必要がある
- Taskベースの非同期処理ができて開発しやすくなった
- RPC感覚で処理をかける
- 対応トランスポート
- Websocket（WS2012+.NET4.5の場合だけ動く）
- Server-Sent Events
- Forever Frame
- Long Polling
- クライアント
- Javascript（jQuery依存）のライブラリ
- .NET framework 4／4.5
- Windows Storeアプリ
- Windows Phone 8
- Xamarin.iOS／Wamarin.Android
- 将来的にC++/ .NET Micro Framework
スケールアウトが非常に難しいらしいです。単純にサーバを増やしただけではスケールしなくて、誰がどのサーバにつながっているかを管理する必要があるということでした。そこで、メッセージングサーバを使って、誰がどこにつながっているかを管理するんですが、それにはRedisやAzureサービスバスとかを使うのだそうです。これはSocket.IOとSignalRとで異なった対応方法が必要になり、以下の様な感じになるみたいです。
Socket.IO
- 接続情報をメモリではなく外部ストレージに保存して共有（Redisを使えば）
- 接続情報はメモリに持っている。どのクライアントがどのサーバにつないでいるかを持っている。
- ・RedisStore
- ・SbStore（※接続情報の共有はできない）
SignalR
- そもそも接続情報もってない
- 情報共有はせず、メッセージングに投げっぱなし
- ・ SignalR.Redis
- ・ SignalR.ServiceBus
開発のヒントとして
- 通信頻度を下げてリソースの消費を抑える
- 1000台のクライアントが同時接続しているとき、1クライアントが1つメッセージを送ったら1000クライアント分データを送らないといけないなど。
- underscore.jsのthrottle/debounceを使って通信量を抑えるとか
- ビューの更新にデータバインディング可能なライブラリを利用する
- AngularJSとかKnockout.jsとか使う
開発をして思ったこと
