O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Node.js Tutorial at Hiroshima

Node.js Hands-on at 78th Web Touch Meeting in Hiroshima.

  • Entre para ver os comentários

Node.js Tutorial at Hiroshima

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

×