Node.js Tutorial at Hiroshima

Transcript

• 1. Node.js  基礎 iwanaga 第78回  Web Touch Meeting in HIROSHIMA
• 2. 今⽇日のゴール 1. Node.js の基礎を理理解 2. ⾮非同期 I/O を体で覚える 3. Node.js を仕事や趣味に導⼊入 開発の現場ではどういうコードを書いているの？ 知っているだけで終わらせない。 Node.js の根幹「イベントループ」を習得。 他の⼈人に  Node.js の凄さを語れるようになろう。
• 3. ⾃自⼰己紹介 ⼤大学〜～⼤大学院。素粒粒⼦子物理理学。 地震速報 広島に６年年間いました 仕事 ウェブアプリ (フルスタック) 執筆 「Arduinoで始める  　Web技術者のための  IoT ⼊入⾨門」 www.atmarkit.co.jp/ait/kw/arduino_js.html @y_iwanaga_
• 4. Node.js の魅⼒力力 ⼊入出⼒力力の無駄を簡単に撲滅 同じコンピュータリソース (= 予算) で より多くの処理理を捌くことができる
• 5. ⼊入出⼒力力なくしてシステムなし！ ネットワーク：HTTP,  DNS DB：検索索、書き込み ディスク：ローカルファイル でも、I/O 処理理は時間がかかる
• 6. I/O の待ち時間 https://software.intel.com/sites/products/collateral/hpc/vtune/performance_analysis_guide.pdf http://mechanical-sympathy.blogspot.jp/2013/02/cpu-cache-flushing-fallacy.html I/O CPU  クロック 時間 L3 Cache 38 12 ns RAM 250 65 ns Disk 41,000,000 10,000,000 ns Network 240,000,000 60,000,000 ns I/O 完了了を待つのは勿体ない
• 7. ⼊入出⼒力力の処理理パターン 同期 ⾮非同期
• 8. ⼊入出⼒力力の処理理パターン 同期 ・ I/O 待ちの間、他の処理理をブロック ・  複数の同時 I/O を実現するには  　・ multi thread：メモリ消費量量が多い  　・ select：処理理速度度は I/O の数と共に劣劣化 ⾮非同期
• 9. ・ I/O 待ちの間も処理理を続⾏行行 ・ Single thread で複数の I/O をさばける ・  処理理速度度は I/O の数が増えても安定 同期 ⾮非同期 ⼊入出⼒力力の処理理パターン
• 10. 処理理性能を⽐比較
• 11. Node.js の Design Goals 1.    Event  Driven  Async  I/O 2.    全ての  I/O  を  Stream  に API の内側でバッファしない。メモリを節約。 I/O の完了了は全て event で受け取る   3.    シンプルな  API ブラウザの click イベントと同じインターフェース
• 12. どうやって実現しているの？ V8 Engine http://docs.libuv.org/en/v1.x/design.html
• 13. Node.jsの基礎 同期・⾮非同期 I/O パターン ファイル読み出しで実演
• 14. 本⽇日使うコード https://github.com/ iwanaga/nodejs-hands-on
• 15. 同期読み出し 2. 同期  I/O 3. ファイルの中⾝身を表⽰示 1. fs  モジュール  をインポート
• 16. ⾮非同期読み出し
• 17. ⾮非同期読み出し ・・・１ ・・・２
• 18. ⾮非同期読み出し ← 後 ← 先に実⾏行行
• 19. 実⾏行行順序はどうやって決まる？ event loop
• 20. event loop ファイル読み出し メインコンテキストを実⾏行行した後
• 21. event loop 終わるまでファイル読み出し
• 22. event loop ファイル読み込み完了了。 コールバック関数を実⾏行行！
• 23. ⾮非同期読み出し ← 後 ← 先に実⾏行行
• 24. Node.jsの基礎 Event Loop を使いこなす
• 25. イベントを操る EventEmitter fs.readStream,  net,  http.Server  は EventEmitter  を継承。 1. on メソッド 　 　イベント名とハンドラを紐紐づける 2. emit メソッド 　イベントを発⽕火 最低限  押さえておくべきこと
• 26. EventEmitter を使ってみよう
• 27. EventEmitter を使ってみよう
• 28. EventEmitter を使ってみよう
• 29. EventEmitter を使ってみよう
• 30. Node.jsの基礎 npm の基礎知識識
• 31. npm ・ XML を扱いたい ・ MySQL を利利⽤用したい ・ Web Framework を活⽤用したい Node.js に実装されていない機能を使うとき etc…
• 32. npm package.json でモジュールを管理理 ・  利利⽤用するモジュール ・  バージョン ハンズオン前半で実際に触ります デプロイ先で依存関係を簡単に再現できる
• 33. 座学の最後に https://nodejs.org/api/ ブックマークしときましょう。 今後、何度度も⾒見見ることになります。
• 34. ハンズオン  前半 1. Node.jsインストール 2. http  サーバを実装 3. npm  を使う
• 35. ハンズオン  前半 1. Node.jsインストール 2. http  サーバを実装 3. npm  を使う
• 36. オススメは  nvm インストール、バージョン変更更が簡単 ・  プロジェクトによってバージョンが違うとき ・  バイナリが⽤用意されていないとき
• 37. nvm を使ってインストール 1. “nvm github” で検索索！ 2. Install  script   curl https://raw.githubusercontent.com/creationix/nvm/v0.25.0/install.sh | bash source ~/.nvm/nvm.sh nvm install 0.12.2 nvm alias default 0.12.2 node -v 3. Usage  
• 38. ハンズオン  前半 1. Node.jsインストール 2. http  サーバを実装 3. npm  を使う
• 39. まず https://nodejs.org/api/ ⼀一覧の真ん中にある  HTTP  をクリック
• 40. http.Server
• 41. http.Server
• 42. http.Server
• 43. リクエストを出してみよう curl http://localhost:3000/index.html curl http://localhost:3000/ -d '{a: 1}'
• 44. ハンズオン  前半 1. Node.jsインストール 2. http  サーバを実装 3. npm  を使う
• 45. 管理理ファイルを作る コマンドラインで  npm init ↩️ 項⽬目 説明 例例 name アプリの名前 node-hands-on version アプリのバージョン 0.0.1 description 説明 hands-on codes entry point 実⾏行行ファイル index.js test command テスト実⾏行行コマンド (npm test で実⾏行行できるようになる) grunt test author 開発者の名前 iwanaga → package.json が出来る
• 46. package.json
• 47. モジュールインストール npm install lodash --save 1. lodash  をダウンロード 2. node_̲modules  ディレクトリにインストール 3. 依存モジュールとして  package.json  に追記
• 48. package.json
• 49. 使い⽅方は ビルトインモジュールと同じ。
• 50. メモ node_̲modules  ディレクトリを リポジトリにコミットしない ・  デプロイ先で  npm install を実⾏行行すれば  　  同じバージョンの全モジュールをインストールしてくれる。 ・ C++ をバインドしたモジュールがある。  　  デプロイ先でコンパイルする⽅方が確実。
• 51. ハンズオン  後半 Node.js  を仕事や趣味で活⽤用する
• 52. 短い時間で⽬目的の機能を実装し、 メンテナンスしやすいコードを維持したい！
• 53. それを実現するには、かなりの経験が必要でした。 しかし、時代は劇的に良良くなりました！ Node.js を⽤用いたWeb 開発の ベストプラクティスの結晶 generator-angular-fullstack
• 54. angular-fullstack YEOMAN MongoDB Express AngularJS Node.js SocketIO
• 55. 説明より先にやってみる npm install –g yo npm install –g bower npm install –g grunt-cli npm install –g generator-angular-fullstack yo angular-fullstack HandsOnApp
• 56. 質問に答えていきます ? What would you like to write scripts with? ›❯ JavaScript ? What would you like to write markup with? ›❯ HTML ? What would you like to write stylesheets with? ›❯ CSS
• 57. 質問に答えていきます ? What Angular router would you like to use? ›❯ uiRouter ? Would you like to include Bootstrap? n ? Would you scaffold out an authentication boilerplate? n
• 58. 質問に答えていきます ? Would you like to use mongoDB with Mongoose for data modeling? y ? Would you like to use socket.io? Y → サーバとクライアントのコードを⾃自動⽣生成。  　  依存モジュールをインストール
• 59. サーバ起動 grunt serve:dist クライアント⽤用の コードをビルド ・画像、JavaScript、CSS を minify ・構成ファイルをもとに  　script タグと link タグを⾃自動挿⼊入 ・AngularJS は CDN からロードさせる ・上記の結果を  dist に配置 サーバ起動 ・リクエストを  dist 配下にルーティング ・node server/app.js を実⾏行行
• 60. 次にやること ⽣生成されたコードを⾒見見ながら、 全体像を掴みます。
• 61. ディレクトリ構成 server client dist e2e Node.js で動くウェブサーバのコード群 ブラウザにサーブする HTML, JavaScript, CSS End To End テストのためのコード build:dist or serve:dist 実⾏行行時に作られる。 production 環境⽤用のアセットを配置。
• 62. server app.js routes.js サーバ起動ファイル。 モジュールのインポートに専念念。 HTTP リクエストのルーティング定義。 基本的に触らない。 YEOMAN が全て⾃自動的に更更新してくれます。 → 詳細を知りたい⼈人は、Express の API ドキュメントを  
• 63. server api ⼤大前提：動的なデータは全て API で取得します resourceName index.js resourceName.controller.js resourceName.model.js resourceName.socket.js resourceName.spec.js
• 64. server 側の開発 yo angular-fullstack:endpoint resourceName Model を修正 (必要に応じて  Controller, Socket を修正) (spec を修正。grunt test:server でテスト実⾏行行)
• 65. client bower_components index.html ・  この２つも基本的に触らない。 ・  grunt:build や bower install で  　  全て⾃自動的に更更新されます。 必要な script, CSS をロードするだけ bower でインストールした コードが配置される
• 66. client app AngularJS のベストプラクティスが詰まっています！ uiName uiName.js uiName.controller.js uiName.controller.spec.js uiName.html uiName.css compenents
• 67. client 側の開発 yo angular-fullstack:route uiName Controller, HTML を修正 (必要に応じて  uiName.js を修正) (spec を修正。grunt test:client でテスト実⾏行行)
• 68. もう⼀一つオススメ。 bower install angular-material https://material.angularjs.org/
• 69. ハンズオン  後半 TODO  アプリを作ってみよう
• 70. 完成イメージ
• 71. server 側
• 72. コード⽣生成 yo angular-fullstack todo yo angular-fullstack:endpoint todo
• 73. server 作り込み server/api/todo/todo.model.js
• 74. client 側
• 75. コード⽣生成 yo angular-fullstack:route todo yo angular-fullstack:service todoService bower install angular-material --save
• 76. client 側 client/app/todo/todo.html
• 77. client 側 client/app/todoService/todoService.js
• 78. client 側 client/app/todo/todo.controller.js
• 79. client 側 client/app/todo/todo.js
• 80. dev でも  SocketIO を serve する server/app.js
• 81. angular-material client/app/app.js
• 82. 起動してみましょう grunt serve ・  複数のタブで  　  作成／変更更をリアルタイムに同期。  　  WebSocket を活⽤用しています。 ・ DB に保存しているので、  　  リロードしても元通り。
• 83. いかがでしたか？ わずかなコーディングで、 リアルタイム＆双⽅方向通信のウェブアプリが 出来ました。 今後も是⾮非、Node.js を活⽤用していって下さい