コードファーストの考え方。 Amplify Gen2から学ぶAWS次世代のWeb開発体験 KOITABASHI Yoshitaka 1

2

アジェンダ • Amplify Gen2 • コードファーストとは？ • Astro, Vite • 最近のJavaScript Bundler事情 • Demo • まとめ 3

4

Amplify Gen2 “コードファースト”な世界を目指したAmplifyの次世代機能群 5 Docs: https://docs.amplify.aws/gen2/ Workshop: https://catalog.us-east-1.prod.workshops.aws/workshops/386fd39b-01a5-44e9-9836-264c10039160/ja-JP

Gen1とGen2の大きな違い • TypeScriptが標準 • スキーマ定義/自動生成される型定義による“タイプセーフ”を実現 • 開発者ごとのサンドボックス環境 / 自動反映 • AWS CDK L3 Construct 対応でインフラ作成の簡素化 • デプロイ環境の切り分けが容易になった 6

TypeScript標準と型定義 7 • バックエンド側で書いたスキーマ定義の型が フロント側でそのまま適用 • バリデーションは、Zodの書き方となっている https://github.com/aws-amplify/amplify-backend/blob/21f6292a159454bf929fdf89eca3a610229748a2/packages/backend-output-schemas/package.json#L25

開発者ごとのサンドボックス 8 ・ローカルのバックエンドコードをAWS上 にデプロイし、かつ、localhostから接続 が可能 ・作成される資源は開発者ごとに 専用で用意 ・コードの変更を監視しているので、開発 中のコード変更を自動で反映

AWS CDK L3 Construct 対応 9 ラップされているインフラリソースが簡単に利用できたり、 L1/L2コードをインラインで記述することもできる。

デプロイ環境の切り分け Gitリポジトリの各ブランチごとで デプロイが可能 => リリースブランチを作成して、 運用することができるようになった 今までは、下記のようなCLIを 実施する必要があった > amplify add env dev > amplify env checkout dev > amplify push 10

地味に嬉しい機能: Amplify/backendで AppsyncのJS Resolverが追加 AppSyncのResolverは、GraphQLの スキーマで受けたリクエストに対してデータ を操作する部分。 従来は、VTLで記述する必要があった。 => この対応でResolverについて、 JSで記述が可能 11 マージされたバージョン:https://github.com/aws-amplify/amplify-backend/releases/tag/%40aws-amplify%2Fbackend%400.13.0-beta.4 PR: https://github.com/aws-amplify/amplify-backend/pull/1095

Amplify Gen2は何を目指しているのか？ ・コードファーストな開発者体験 コードファースト = フロントエンド/バックエンドという 役割を意識させずにアプリ開発ができること ・最新のフロントエンド事情/動向を汲み取った機能整備 12

“コードファースト”な考え方 SOAP Webサービスの時代からコードファーストな 機能 / 考え方は存在していた => サンプルとなるサービスのコードをフレームワークに 挿入し、コードからWSDLやスキーマを生成すること 13 https://www.infoq.com/jp/articles/sosnoski-code-first/ その後、スキーマの自動生成ができる ツールが誕生 ・Microsoft： .NET framework ・Sun： JAX-WS 2.0/JAXB 2.0

.NET Framework におけるコードファースト • Entity Framework 4.1で導入されたのが 「コードファースト」という機能(2011年あたり) => Entity Frameworkは、MicrosoftのADO.NETチームによって 開発された永続化フレームワークです。 • エンティティ(モデルのコード)を書いておけば、テーブルが自動生成 14 データベース エンティティクラス 自動生成

GraphQLにおけるコードファースト • GraphQLにおいてもコードファーストという考え方がある • 開発者はResolverだけを書くのみでよい • コードに含まれる型またはアノテーションに基づいて ビルドツールがスキーマと SDL をコンパイルし、schema.gql を生成 15 https://www.apollographql.com/blog/schema-first-vs-code-only-graphql

Amplify Gen2が解決したもの • Gen1で歯痒かったCLI依存によるインフラリソースの マスク化されたものの可視化/管理化が可能 => Gen1の時の例だと: amplify add auth • 個別のサンドボックス作成、自動反映、 Gitブランチごとでのデプロイなど一気通貫でリリースが可能 • タイプセーフの実現 16

余談 17

Next.js14の機能であるApp Router対応 • 2023年10月26日: Next.js 14 公開 => 仕様変更で一番大きかったのは、App Routerの導入 また、React Server Component (RSC)により、 基本サーバサードでの処理となる これにより、今までのPage Routingが変わる形となる • Next.js 14 の公開後すぐ(2023年11月15日)に AWS Amplify javascript v6が提供され App Routerへの対応が行われる 18 https://aws.amazon.com/jp/about-aws/whats-new/2023/11/aws-amplify-javascript-v6/

実際にやってみよう 19

20

Astro Gatsby,Hugoなどと同じモダンな静的サイトジェネレータ(SSG) [特徴] 1. 既存 UI フレームワークがコンポーネントに利用可 2. ビルドで必要最低限のJavascriptだけを出力 3. ビルドツールにViteを使用 21 ビルド、Webサイトの読み込みがデフォルトで鬼早い https://github.com/withastro/astro Astroのパフォーマンスが分かる動画: https://www.youtube.com/watch?v=2ZEMb_H-LYE&t=8163s

Islands: フロントエンドアーキテクチャ Astroは、Islandsというフロントエンドアーキテクチャを採用 要は、必須ではないJavascriptを全てページから自動的に削除する ことで、フロントエンドのパフォーマンスを向上 22 柔軟性が高いので、React / Svelte / Preact / Vue / SolidsJSなど 複数のフレームワークを混合可能

JavaScriptモジュールバンドラーの役割 • バンドラーとは、複数のJavaScriptファイルを1つのファイルにまと めるツール • ESモジュールやHTTP/2への対応、圧縮、トランスパイル、最適化 や、さまざまなブラウザ間の互換性確保などをする • Webpack • Vite 23

Vite ・オンデマンドバンドル: 全てのコードとアセットを事前に バンドルする ・ES Moduleの仕組みを利用し、必要な時に必要な ファイルだけをコンパイルする => ほぼ瞬時にHot Module Replacement（HMR）が行われる 24 https://github.com/vitejs/vite https://qiita.com/yoshii0110/items/6277626b0f558818da08

Viteの内部 Viteの内部は、esbuildとRollupというビルドツールを使用 • esbuild: ビルドツールで、Viteにおいては依存関係について事前 バンドルを生成するために使用 • Rollup: ビルドツールで、Viteでは最終的(本番環境向け)な バンドル(全てのファイルを一つにまとめる)を 作成するために使用 25 https://github.com/rollup/rollup https://github.com/evanw/esbuilda

最近のJavaScript Bundler事情 ここ最近動きがあり、Viteは今後esbuildとRollupの2つを 使用していたものを今後他のツールに置き換える それが Rolldown Rolldown ・Rust で書かれた JavaScript バンドラ ・将来 Vite で使われることを念頭に開発されている(現在開発段階) ・Rollup 互換の API とプラグインインターフェースを提供 26 https://github.com/rolldown/rolldown

27 Demo

まとめ • CLIベースでラップされて気持ち悪かったGen1が 改善され使いやすくなった印象 • ”コードファースト”な体験により、開発者がアプリ開発に専念で きる • Node.jsのプロジェクトでローカル環境にて開発モードで 起動する(例: "scripts": {"dev": "next dev"})ような感覚でサ ンドボックスのコードが自動反映されるなど、 フロントエンド開発に寄り添った機能を揃えてきた 28