Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Node.js Tutorial at Hiroshima

16,895 views

Published on

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

Published in: Technology
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes.........ACCESS WEBSITE Over for All Ebooks ..... (Unlimited) ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • (Unlimited)....ACCESS WEBSITE Over for All Ebooks ................ accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD TH1S BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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 を活⽤用していって下さい

×