Nice to meet you, Deno!

Transcript

1. Nice to Meet you, Deno! Sumidagawa.js #1 2020/05/19 株式会社POL 星牟禮 健也
2. @yahooshiken 株式会社POL Engineer 星牟禮 健也 1996年生まれ．静岡県出身． フロントエンドエンジニアとして働く傍ら， 大阪の大学でロボットの研究をしています． 最近はWebパフォーマンスやフロントエンドの状態管理に 関心があります． 趣味はサウナです． コロナになってからあまり行けていないので悲しい… 自己紹介
3. 今日お話すること １．What is “Deno”? ２．What is different from “Node”? ３．Let’s dive into “Deno”!
4. 1．What is “Deno”? ”Deno”とはなにか．
5. What is “Deno”? 一言で言うと セキュアなJavaScript/TypeScriptランタイム 開発しているのは Node.js開発者のRyan Dahlが自身の後悔を基に設計・開発 2018 JSConf EU（6月）にてRyan Dahlにより発表された 設計思想としては ブラウザとサーバサイドの互換性，セキュリティを重視 発音の仕方は ディーノと読む（もともとは”デノ”と発音してた） Denoのロゴは恐竜（Dino/Dinosaur）がモチーフ
6. 開発開始から2年．2020年5月13日，記念すべきバージョン1.0.0がリリース
7. 2020年5月19日現在，リポジトリはすでに57.3kスター
8. とても単純化したDenoの内部アーキテクチャ Denoは，RustのAPI経由でJavaScriptエンジンであるV8を操作している
9. ちょっとだけ詳しいDenoの内部アーキテクチャ 主な内部スタック 1. V8 JavaScriptエンジン Node.jsと同じ 2. Rust プロトタイピング時には，Goを使用 していたがGCを含む複雑なランタイム を懸念し不採用に（#208） 3. Tokio Rustで非同期を扱うライブラリ Rustネイティブでは，イベントループ 機構をサポートしていないため使用． とても簡単に書いたDenoの内部アーキテクチャ rusty_v8 (Rust) に置換 (#3530)
10. ２．What is different from “Node”? ”Node”との違い
11. 作り手目線でのNode.jsにおける後悔 Node.js開発者のRyan Dahlによる設計ミスについての発表 1. Promiseを排除したこと 2009年に追加，2010年に排除 2. 安全性・セキュリティ上の問題 情報漏洩，ローカルファイルアクセス 3. ビルドシステム（GYP） 4. package.json 5. node_modules ブラックホールよりも深い依存性を生んでしまった 6. “.js”拡張子なしでのrequire(“module”) 7. index.js module解決アルゴリズムを不必要に複雑化させてしまった → Denoの開発に着手（2018〜） 10 Things I Regret About Node.js/Node.jsに関する10の反省点 Ryan Dahl (JSConf EU 2018)
12. Denoの機能紹介（いくつかを抜粋） 1. import and Urls ESModules（import/export）を使い ‍♂，requireはサポートしない ‍♂ サードパーティのモジュールはURL指定でのインポートが可能に． 2. TypeScript Built in tsconfig.jsonを用意せずとも，TypeScriptの実行が可能に． 3. Secure by default 許可がなければネットワークやファイルシステム，サブプロセス，環境変数にアクセスができない 4. Compatible with web window, locationm, atob/btoa, fetch, setTimeoutなどWeb互換関数をサポート（※ ただし全てでない） 5. Web assembly support wasmバイナリを直接実行可能 今後のマイルストーンにもぜひご注目 https://github.com/denoland/deno/milestones
13. Import and Urls import * as log from "https://deno.land/std/log/mod.ts"; ES Module形式(import/export)を使用し，require()はサポートしない（公式Docより） またDenoではパッケージマネージャが付属しておらず，パッケージ名では読み込まない． 実行時に必要なコードを取得して実行 → Zero-import (e.g. tink/Yarn v2)
14. Top Level Async // Node const fetchData = async(() => await fetch(‘/api/data’)); const data = fetchData(); // Deno const data = await fetch(‘/api/data’); 非同期処理を async で囲う必要がなくなる． ※ Top Level AwaitはTypeScript3.8でサポート済み ECMAでは，TC39でProposal (Stage-3)
15. ３．Let’s dive into “Deno”! さぁ，”Deno”の世界へ飛び込もう！
16. Installation https://deno.land/#installation $ brew install deno # https://deno.land/#installation $ deno --version deno 1.0.0 v8 8.4.300 typescript 3.9.2
17. Hello World! $ deno run https://deno.land/std/examples/welcome.ts Download https://deno.land/std/examples/welcome.ts https://deno.land/std/examples/welcome.ts Compile https://deno.land/std/examples/welcome.ts Welcome to Deno console.log("Welcome to Deno "); https://deno.land/std/examples/welcome.ts
18. Security Options # NG $ deno run dir.ts error: Uncaught PermissionDenied: read access to "/Users/hoshi/Code/Deno", run again with the --allow-read flag # OK $ deno run --allow-read dir.ts /Users/hoshi/Code/Deno console.log(Deno.cwd()); dir.ts 他にも --allow-net（ネットワーク）， --allow-write（ファイル書き込み） --allow-env（環境変数）, --allow-run（サブプロセス）などのオプションが存在 ※ $ deno run --help で参照可能
19. HTTP Server $ deno run --allow-net --allow-env server.ts deno http server started on 8000! import { serve } from "https://deno.land/std@0.50.0/http/server.ts"; const PORT = Number(Deno.env.get("PORT")) || 8000; const s = serve({ port: PORT }); console.log(`deno http server started on ${PORT}!`); for await (const req of s) { req.respond({ body: "<h1>Hello Deno!</h1> <img src=’logo.gif’/>" }); } server.ts serve関数でasync iterableな要素を返却しているので for await … of構文で処理を記述できる このGIFアニメロゴは日本人の@hashrockさんが 作られたものらしいです． https://hashrock.hatenablog.com/entry/2019/02/04/040505 ロゴの元ネタは，Ryan氏いわく 「夜の雨の中に立って、ソフトウェア開発の闇の戦 いにストイックに立ち向かう様子」を表現したそう
20. まだまだ実用に足る代物ではないので注意 ⚠ まだまだ発展途上やで Ryan Dahlニキ
21. まとめ Let’s dive into “Deno”!
22. Thank you for listening! @yahooshiken