Slide 1

Slide 1 text

フロントエンドカンファレンス北海道2024 エッジはフロントンドなのか? バックエンドなのか? について考えてみる

Slide 2

Slide 2 text

- Aiji Uejima - Webエンジニア(フルスタックにやってます) - 最近はエッジコンピューティング(Cloudflare Workers)で色々構築・開発するのが好き 自己紹介 aiji42_dev aiji42

Slide 3

Slide 3 text

会場の皆さんに質問 ? エッジコンピューティングは 「フロントエンド」だと思いますか? それとも「バックエンド」だと思いますか?

Slide 4

Slide 4 text

アジェンダ 1. エッジとはなにか? 2. エッジの特徴 3. エッジをフロントエンド側からみてみる 4. エッジをバックエンド側からみてみる 5. 領域の定義 6. まとめ

Slide 5

Slide 5 text

What is the edge? 1. エッジとはなにか?

Slide 6

Slide 6 text

エッジと聞くと何を思い浮かべますか? 「CDNロケーションのエッジコンピューティング」を思い浮かべる人が多いはず。 (フロントエンドカンファレンスだし)

Slide 7

Slide 7 text

CDNロケーションのエッジコンピューティング CDNデータセンター上のコンピュータでクライアントとオリジンとの間で計算を行う。 WAFや高速化などの目的から始まり、徐々に用途がフルスタック化しつつある。 地球レベルで見たときにクライアント側(端)に配置されているのでエッジ。

Slide 8

Slide 8 text

CDNロケーションのエッジコンピューティング 今日はこの話をメインにするが... これらが登場する以前から「エッジ」と呼ばれるものは存在していた。 なので特段「新しいもの」「新しい概念」というわけではない。

Slide 9

Slide 9 text

IoTのエッジサーバー デバイスと中央サーバとの間に小規模サーバを挟んで処理したり、デバイス自身が 計算リソースを持つことで、遅延対策やネットワーク負荷軽減の役割を果たす。 デバイス側(端)にあるサーバーなのでエッジ。

Slide 10

Slide 10 text

店舗の在庫・売上を分散管理するシステム 各店舗内に小規模なサーバを配置し、ローカルのネットワーク内で処理することで 各店舗のレジシステムが完結するようにする。 店舗側(端)で処理するのでエッジ。

Slide 11

Slide 11 text

概念自体は古くから存在していた エンドユーザの近くに計算リソースを分散させることで、 中央サーバーの負荷や遅延の低減を行うものを、 一般に「エッジ(コンピューティング)」と呼ぶ。 概念自体は新しい訳では無いが... 「CDNのエッジコンピューティング」は、 Web開発の場面で、最近少しずつ注目されるようになってきた。

Slide 12

Slide 12 text

なぜ注目され始めたのか? - Core Web Vitals のためにパフォーマンス改善の重要性が増した - キャッシュコントロールや画像最適化など - 言語・インタフェースの選択肢が増えた - Fastly の VLC(Varnish) は習得難易度が高かった - JavaScriptで書けるベンダーが出始め、一気に敷居が下がった - 対応したライブラリやノウハウの普及により、フルスタック化

Slide 13

Slide 13 text

Edge features 2. エッジの特徴

Slide 14

Slide 14 text

ベンダー 名称 言語/エンジン Cloudflare Cloudflare Workers JavaScript/V8 Fastly Fastly Compute@Edge Wasm/Wasmtime Vercel Vercel Functions JavaScript/V8 Akamai Akamai EdgeWorkers JavaScript/V8 各ベンダーの採用言語とエンジン

Slide 15

Slide 15 text

ベンダー 名称 言語/エンジン Cloudflare Cloudflare Workers JavaScript/V8 Fastly Fastly Compute@Edge Wasm/Wasmtime Vercel Vercel Functions JavaScript/V8 Akamai Akamai EdgeWorkers JavaScript/V8 V8エンジンを採用しているベンダーが多い 各ベンダーの採用言語とエンジン

Slide 16

Slide 16 text

エッジとV8 V8エンジンのIsolate Modeが使用されることが多い。 一つのランタイムプロセス上でサンドボックスを立ち上げ、ユーザコードを実行。 VMベースと比較してスピンアップが速い。(従来のサーバレスと異なる点) Node.jsもV8の上に構築されているが、サンドボックスは組み込まれていない。 出典: Cloud Computing without Containers https://blog.cloudflare.com/cloud-computing-without-containers

Slide 17

Slide 17 text

Looking at the edge from the frontend 3. フロントエンド側から見てみる ※ 以降、 Cloudflare Wokers を前提に話します。

Slide 18

Slide 18 text

ブラウザ上のService Worker Webページとは別にバックグラウンドで実行するクライアントスクリプト。 Req/Resに介入して内容を変更したり、オリジンへリクエストすることなく CacheAPIを使ってレスポンスを返えしたりする。

Slide 19

Slide 19 text

エッジもある種のService Worker Service Workerと同じIFでWeb標準APIが動くように設計されている。 例えばCacheAPI や `waitUntil()` などが実行可能で、 Req/Resに介入し、スクリプトを実行することでプロキシの役割を持たせられる。 エッジ = リモートで動くService Workerと考えることができる。

Slide 20

Slide 20 text

エッジもある種のService Worker Service Workerと同じIFでWeb標準APIが動くように設計されている。 互換性があるので、逆にエッジ用に書いたコードがブラウザでも実行可能。 リモートでブラウザをもう一つ動かしている感覚に近い

Slide 21

Slide 21 text

エッジはフロントエンドだ(?) - Chromeと同じV8エンジンの上で実行される - JSが動いてWeb標準APIが利用可能 - Service Workerと同じ機能を備えている エッジ ≒ ブラウザと考えることができるということは、 「エッジはフロントエンドだ」といって良さそう。

Slide 22

Slide 22 text

Looking at the edge from the backend 4. バックエンド側から見てみる

Slide 23

Slide 23 text

ブラウザでは動かない実装が動く Node.jsのAPIに関しては互換性がある。(node compat) グローバルリソースに対しての、TCP Socket接続が可能。

Slide 24

Slide 24 text

as Origin (Origin less) エッジランタイムをサポートするライブラリが増加傾向で、 SSRやRSCのためのフルスタックな環境として稼働させたり、 BFFをエッジで稼働させるなどの潮流が活発化してきている。 これまでのオリジンサーバの代替となりつつある。 Supporting edge runtime

Slide 25

Slide 25 text

フルスタックなWebサーバーの代わりになる。 従来のオリジンサーバーの役目を果たせる。 「エッジはバックエンドだ」と言えるのでは? エッジはバックエンドだ(?) そもそも、フロントエンド=ブラウザ・クライアントと仮に限定するのであれば、 ブラウザ外(サーバ)で動いているエッジはバックエンドだと言えそう。

Slide 26

Slide 26 text

フルスタックなWebサーバーの代わりになる。 従来のオリジンサーバーの役目を果たせる。 「エッジはバックエンドだ」と言えるのでは? エッジはバックエンドだ(?) そもそも、フロントエンド=ブラウザ・クライアントと仮に限定するのであれば、 ブラウザ外(サーバ)で動いているエッジはバックエンドだと言えそう。 本当にそう言い切れるか?

Slide 27

Slide 27 text

フロントエンド=ブラウザ・クライアント? 実際はそんなに簡単に分けれるものではなさそう。 - ReactのServer Actions や Server Component はバックエンドか? - Next.js や Remix の SSR はバックエンドか? - BFFを開発するのはバックエンドエンジニアの役割か? - キャッシュコントロールやコンテンツ配信の計画は誰が責任を持つべきか?

Slide 28

Slide 28 text

Definition of frontend and backaend 5. 領域の定義

Slide 29

Slide 29 text

境界線はどこか? フロントエンドとバックエンドの境界線はどこにあるのか?

Slide 30

Slide 30 text

フロントエンドとバックエンドで分け始めたのは2010年代前半 我々は、いつから役割を区分し始めたのか Google Books Ngram Viewerによるキーワード出現率の可視化 2010年

Slide 31

Slide 31 text

フロントエンドとバックエンドで分け始めたのは2010年代前半 - AJAXなどの技術の登場によるクライアントの表現力の向上と浸透 - アプリ対応・モバイル対応の必要性の増加 - SPA技術・ライブラリの発達 「フロントエンドはクライアント」「バックエンドはサーバ」と比較的分けやすかった。 我々は、いつから役割を区分し始めたのか

Slide 32

Slide 32 text

求められることの多様化 フロントエンド=ブラウザ・クライアントだけ ではないのは明白。 フロントエンドエンジニアの業務はブラウザ・クライアントの技術だけでは回らない。 フロントエンドとバックエンドで分けるようになってからおおよそ10年。 フロントエンドのニーズは多様化している。 - SSR/RSC (w/ data loader) - キャッシュコントロール/コンテンツ配信の設計 - パフォーマンス改善 Reactを始めとした各種ライブラリはサーバサイド側の理解を暗黙的に求め、 GoogleはCWVを通じてブラウザに限らないスキルを求めている。

Slide 33

Slide 33 text

明確な境界線はない 境界線という概念で捉えるのは実態に即していない。

Slide 34

Slide 34 text

明確な境界線はない 境界線という概念で捉えるのは実態に即していない。 クロスオーバーしていると考える方が適している。 あるのは「バックエンド寄り」「フロントエンド寄り」という相対的な位置関係。

Slide 35

Slide 35 text

フロントエンド・バックエンドどちらかに限定することはできない。 ある意味、リモートでブラウザを動かしているようなもの。 フロントエンド・バックエンド間のコンテキストスイッチのためのコストが少なくて済み、 領域を分かつものではなく、架け橋になるものである。 エッジに話を戻すと フロントエンドの技術を使ったバックエンドである 出典: エッジは誰のもの? | ゆーすけべー日記 https://yusukebe.com/posts/2024/who-is-edge-for/

Slide 36

Slide 36 text

Conclusion 6. まとめ

Slide 37

Slide 37 text

エッジはフロントエンドとバックエンド両方の側面を持つ まとめ フロントエンド側面 - V8エンジンの上でJSでWeb標準なAPIを実行できるランタイム - Service Worker的な振る舞いを持つ バックエンド側面 - Node.jsのAPIが実行可能で外部ともTCPで接続可能と、フルスタック - Origin as EdgeとしてWebサーバーの代替になりつつある フロントエンジニア、バックエンドエンジニア両方との親和性が高く、 言語やIFが統一されるので、スイッチングコストが少なく領域越境がしやすい。

Slide 38

Slide 38 text

まとめ フロントエンドとバックエンドには明確な境界線はない あるのは、「フロントエンド寄り」「バックエンド寄り」の相対的な位置関係。 複雑で多様なスキル・知識が求められる昨今、積極的に領域越境をしていきましょう。 最後に 「サーバサイドに苦手意識がある」 「普段クライアントコードしか書かない」というフロントエンドエンジニアの方、 「バックとフロントのスイッチングコストを下げたい」というフルスタックエンジニアの方は、 是非、エッジコンピューティングを触ってみてください!

Slide 39

Slide 39 text

Thank you!

Slide 40

Slide 40 text

参考・出典 - エッジコンピューティングとは? IoTの活用事例も解説 https://www.nec-solutioninnovators.co.jp/sp/contents/column/20220225_edge-computing.html - Containers at Edge and the future https://speakerdeck.com/inductor/containers-at-edge-and-the-future - ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう https://speakerdeck.com/aiji42/biginaxiang-ke-etuzirantaimunosusume-etuzirantaimuwoyi-shi-sitakai-fa-wohazime you - エッジは誰のもの https://yusukebe.com/posts/2024/who-is-edge-for/ - Cloud Computing without Containers https://blog.cloudflare.com/cloud-computing-without-containers - サーバーレスJavaScriptの仕組みとは?| Service WorkersとCloudflare Workers https://www.cloudflare.com/ja-jp/learning/serverless/serverless-javascript/ - Cloudflare Workersプロキシパターン https://zenn.dev/yusukebe/articles/647aa9ba8c1550 - GraphQL Server on Edge https://speakerdeck.com/chimame/graphql-server-on-edge