Download - JavaScriptだけで アプリ作ってみませんか?
![Page 1: JavaScriptだけで アプリ作ってみませんか?](https://reader034.vdocuments.pub/reader034/viewer/2022051514/54953ef5b47959c91c8b4a28/html5/thumbnails/1.jpg)
JavaScriptだけでアプリ作ってみませんか?
2013/01/19@20代エンジニア交流会
![Page 2: JavaScriptだけで アプリ作ってみませんか?](https://reader034.vdocuments.pub/reader034/viewer/2022051514/54953ef5b47959c91c8b4a28/html5/thumbnails/2.jpg)
自己紹介• 小島 裕次郎(こじま ゆうじろう)• 株式会社メンバーズ• 主にWeb広告系のシステム開発してます• 元Java使い• 最近はJS/PHPでNode.jsやFuelPHP等• 趣味• フレームワーク弄り• Hello, World!
![Page 3: JavaScriptだけで アプリ作ってみませんか?](https://reader034.vdocuments.pub/reader034/viewer/2022051514/54953ef5b47959c91c8b4a28/html5/thumbnails/3.jpg)
最近のHello, World!
• Nginx+Node.jsにApache BenchでHello, World!言えなくなるまで攻撃
• Node.jsでWebAPI用意してAndroidからファイルを投げ続けるHello, World!
•世界の言葉でHello, World!
![Page 4: JavaScriptだけで アプリ作ってみませんか?](https://reader034.vdocuments.pub/reader034/viewer/2022051514/54953ef5b47959c91c8b4a28/html5/thumbnails/4.jpg)
コンテンツ• JavaScript News• サーバサイドのJS• Node.js
• クライアントサイドのJS• Backbone.js
• 通信部分(WebSocket.IO)• 組み合わせてDEMOアプリを作成
![Page 5: JavaScriptだけで アプリ作ってみませんか?](https://reader034.vdocuments.pub/reader034/viewer/2022051514/54953ef5b47959c91c8b4a28/html5/thumbnails/5.jpg)
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
![Page 6: JavaScriptだけで アプリ作ってみませんか?](https://reader034.vdocuments.pub/reader034/viewer/2022051514/54953ef5b47959c91c8b4a28/html5/thumbnails/6.jpg)
サーバサイドのJS
• Node.js (http://nodejs.org/)•イベントループ方式•ノンブロッキングI/O• C10K問題と言われるクライアント同時接続数の多い環境で優位性がある
![Page 7: JavaScriptだけで アプリ作ってみませんか?](https://reader034.vdocuments.pub/reader034/viewer/2022051514/54953ef5b47959c91c8b4a28/html5/thumbnails/7.jpg)
クライアントサイドのJS
• Backbone.js (http://backbonejs.org/)•クライアントMVCフレームワーク•サーバサイドMVCとは少し考え方が異なる
•Model/Collection/View/Router
![Page 8: JavaScriptだけで アプリ作ってみませんか?](https://reader034.vdocuments.pub/reader034/viewer/2022051514/54953ef5b47959c91c8b4a28/html5/thumbnails/8.jpg)
WebSocket.IO• https://github.com/LearnBoost/websocket.io
•サーバ・クライアント間でリアルタイム通信(主にサーバからのPush)が行える
• Node.jsのモジュール•リアルタイムチャットDEMOが多い•今日のDEMOもチャットアプリ
![Page 9: JavaScriptだけで アプリ作ってみませんか?](https://reader034.vdocuments.pub/reader034/viewer/2022051514/54953ef5b47959c91c8b4a28/html5/thumbnails/9.jpg)
DEMOアプリ作成
![Page 10: JavaScriptだけで アプリ作ってみませんか?](https://reader034.vdocuments.pub/reader034/viewer/2022051514/54953ef5b47959c91c8b4a28/html5/thumbnails/10.jpg)
DEMOアプリ概要• Node.js/WebSocket.IOを用いたリアルタイムチャットアプリ
•クライアント側のBackbone.js組込み•ストレージは使用していないので処理はJavaScriptで完結
•以下で公開してます。• http://chat.wye.jp:3000/
![Page 11: JavaScriptだけで アプリ作ってみませんか?](https://reader034.vdocuments.pub/reader034/viewer/2022051514/54953ef5b47959c91c8b4a28/html5/thumbnails/11.jpg)
サーバ側実装
• 必要なモジュールを準備• npmでExpressとWebSocket.IOをインストール• $ npm install express websocket.io
![Page 12: JavaScriptだけで アプリ作ってみませんか?](https://reader034.vdocuments.pub/reader034/viewer/2022051514/54953ef5b47959c91c8b4a28/html5/thumbnails/12.jpg)
ファイル構成
•サーバ側はapp.js•クライアント側のファイルはpublicは以下
![Page 13: JavaScriptだけで アプリ作ってみませんか?](https://reader034.vdocuments.pub/reader034/viewer/2022051514/54953ef5b47959c91c8b4a28/html5/thumbnails/13.jpg)
app.js• 基本的にはWebSocket.IOのServerを作成して以下の処理を実装
• connection• message• close
![Page 14: JavaScriptだけで アプリ作ってみませんか?](https://reader034.vdocuments.pub/reader034/viewer/2022051514/54953ef5b47959c91c8b4a28/html5/thumbnails/14.jpg)
クライアント側実装• 必要なモジュールを準備• jQuery• Underscore.js• Backbone.js• Bootstrap
![Page 15: JavaScriptだけで アプリ作ってみませんか?](https://reader034.vdocuments.pub/reader034/viewer/2022051514/54953ef5b47959c91c8b4a28/html5/thumbnails/15.jpg)
index.html • Backbone.jsのtemplateを記載
![Page 16: JavaScriptだけで アプリ作ってみませんか?](https://reader034.vdocuments.pub/reader034/viewer/2022051514/54953ef5b47959c91c8b4a28/html5/thumbnails/16.jpg)
chat.js • Model/Collectionを作成
![Page 17: JavaScriptだけで アプリ作ってみませんか?](https://reader034.vdocuments.pub/reader034/viewer/2022051514/54953ef5b47959c91c8b4a28/html5/thumbnails/17.jpg)
chat.js • Viewを作成
![Page 18: JavaScriptだけで アプリ作ってみませんか?](https://reader034.vdocuments.pub/reader034/viewer/2022051514/54953ef5b47959c91c8b4a28/html5/thumbnails/18.jpg)
chat.js• WebSocketクライアントを作成
![Page 19: JavaScriptだけで アプリ作ってみませんか?](https://reader034.vdocuments.pub/reader034/viewer/2022051514/54953ef5b47959c91c8b4a28/html5/thumbnails/19.jpg)
デプロイ
•ファイルをサーバに配置して以下コマンドでnode.jsアプリ実行
• $ node app.js
![Page 20: JavaScriptだけで アプリ作ってみませんか?](https://reader034.vdocuments.pub/reader034/viewer/2022051514/54953ef5b47959c91c8b4a28/html5/thumbnails/20.jpg)
実行画面(Welcome)
![Page 21: JavaScriptだけで アプリ作ってみませんか?](https://reader034.vdocuments.pub/reader034/viewer/2022051514/54953ef5b47959c91c8b4a28/html5/thumbnails/21.jpg)
実行画面(Chat)
![Page 23: JavaScriptだけで アプリ作ってみませんか?](https://reader034.vdocuments.pub/reader034/viewer/2022051514/54953ef5b47959c91c8b4a28/html5/thumbnails/23.jpg)
追記
• DEMOアプリソースはGitHubに置いてありますので、興味のある方はどうぞ。
• https://github.com/wyekojima/chat-demo