javascriptだけで アプリ作ってみませんか？
DESCRIPTION
2013/01/19 @20代エンジニア交流会TRANSCRIPT
JavaScriptだけでアプリ作ってみませんか？
2013/01/19@20代エンジニア交流会
自己紹介• 小島 裕次郎（こじま ゆうじろう）• 株式会社メンバーズ• 主にWeb広告系のシステム開発してます• 元Java使い• 最近はJS/PHPでNode.jsやFuelPHP等• 趣味• フレームワーク弄り• Hello, World!
最近のHello, World!
• Nginx+Node.jsにApache BenchでHello, World!言えなくなるまで攻撃
• Node.jsでWebAPI用意してAndroidからファイルを投げ続けるHello, World!
•世界の言葉でHello, World!
コンテンツ• JavaScript News• サーバサイドのJS• Node.js
• クライアントサイドのJS• Backbone.js
• 通信部分（WebSocket.IO）• 組み合わせてDEMOアプリを作成
JavaScript News• 2013/01/08：Firefox 1.8 リリース• 新しいJavaScriptエンジン「IonMonkey」搭載• 実行速度が最大25%高速化するんだとか• → http://sourceforge.jp/magazine/13/01/08/2354256
• 2013/01/15：jQuery 1.9 リリース• 1.9系でIE6～8サポートは最後とのこと• 2.0からはサポート廃止で今より高速化• → http://sourceforge.jp/magazine/13/01/17/0537222
サーバサイドのJS
• Node.js (http://nodejs.org/)•イベントループ方式•ノンブロッキングI/O• C10K問題と言われるクライアント同時接続数の多い環境で優位性がある
クライアントサイドのJS
• Backbone.js (http://backbonejs.org/)•クライアントMVCフレームワーク•サーバサイドMVCとは少し考え方が異なる
•Model/Collection/View/Router
WebSocket.IO• https://github.com/LearnBoost/websocket.io
•サーバ・クライアント間でリアルタイム通信（主にサーバからのPush）が行える
• Node.jsのモジュール•リアルタイムチャットDEMOが多い•今日のDEMOもチャットアプリ
DEMOアプリ作成
DEMOアプリ概要• Node.js/WebSocket.IOを用いたリアルタイムチャットアプリ
•クライアント側のBackbone.js組込み•ストレージは使用していないので処理はJavaScriptで完結
•以下で公開してます。• http://chat.wye.jp:3000/
サーバ側実装
• 必要なモジュールを準備• npmでExpressとWebSocket.IOをインストール• $ npm install express websocket.io
ファイル構成
•サーバ側はapp.js•クライアント側のファイルはpublicは以下
app.js• 基本的にはWebSocket.IOのServerを作成して以下の処理を実装
• connection• message• close
クライアント側実装• 必要なモジュールを準備• jQuery• Underscore.js• Backbone.js• Bootstrap
index.html • Backbone.jsのtemplateを記載
chat.js • Model/Collectionを作成
chat.js • Viewを作成
chat.js• WebSocketクライアントを作成
デプロイ
•ファイルをサーバに配置して以下コマンドでnode.jsアプリ実行
• $ node app.js
実行画面（Welcome）
実行画面（Chat）
追記
• DEMOアプリソースはGitHubに置いてありますので、興味のある方はどうぞ。
• https://github.com/wyekojima/chat-demo