AWS Amplify Gen 2 GA記念 ~Gen1との違いを確認

by Kihara, Takuya

Slide 1

Slide 1 text

AWS Amplify Gen 2 GA記念 ~Gen1との違いを確認 AWS Amplify Gen 2 Festival in Japan 2024/06/19 tacck (Kihara, Takuya) 1

Slide 2

Slide 2 text

2 木原卓也 Kihara, Takuya / @tacck 生活協同組合コープさっぽろデジタル推進本部システム部 Amplify Japan User Group 運営メンバーゆるWeb勉強会@札幌主催 AWS Community Builder Since Q2 2021 / Category: Front-end Web and Mobile 好きなフィギュアスケートの技スプレッド・イーグル

Slide 3

Slide 3 text

本日話すこと ● AWS Amplify Gen1 と Gen2 の変更ポイント ○ リソース追加方法の違い ○ 立ち位置の変化 ○ 立ち位置の変化からみる個人的見解 3

Slide 4

Slide 4 text

AWS Amplify Gen1 と Gen2 のリソース追加方法の違い 4

Slide 5

Slide 5 text

Menu をベースに機能一覧比較 Gen 2 for Gen 1 customers https://docs.amplify.aws/react/start/migrate-to-gen2/ ここに機能一覧比較が詳しく載っている。大まかにメニューにある機能レベルで比較してみる。 5

Slide 6

Slide 6 text

Gen1 Gen2 Item setup Item setup Authentication amplify add auth Authentication amplify/auth/resource.ts / CDK API (GraphQL) More features / DataStore amplify add api Data amplify/data/resource.ts / CDK Storage amplify add storage Storage amplify/storage/resource.ts / CDK Functions amplify add function Functions amplify/functions/[function_name]/r esource.ts / CDK API (REST) amplify add api Add any AWS Service API (REST) amplify/functions/[function_name]/r esource.ts / CDK More features AI/ML Predictions amplify add predictions AI/ML Predictions CDK Analytics amplify add analytics Analytics CDK Geo amplify add geo Geo CDK In-App Messaging amplify add notifications In-App Messaging CDK Interactions amplify add interactions # LexV1 Interactions By hand # LevV2 PubSub By hand PubSub By hand - - - Deletion protection and Backup resources CDK Tools / CLI Custom AWS resources amplify add custom / CDK Custom resources CDK (Each features) amplify override [feature] / CDK Overriding resources CDK 6

Slide 7

Slide 7 text

差分を確認 (ex. Authentication) Authentication で比較するが、基本どの機能も同じ。 7

Slide 8

Slide 8 text

8 Gen1 Gen2

Slide 9

Slide 9 text

9 Gen1 Gen2 CLIによるリソース管理 CDKによるリソース管理

Slide 10

Slide 10 text

AWS Amplify Gen1 と Gen2 の立ち位置の変化 10

Slide 11

Slide 11 text

機能的な面できることそのものに大きな差は無い。「やり方」が変わった。 ● CDKに+TypeScript によるリソース管理 ○ TypeScript ベースのリソース定義・拡張 ○ CDKのホットデプロイによる高速な Snadbox 環境 ○ Functions (AWS Lambda) も TypeScript で書ける Webフロントエンド開発なら、「すべて」 TypeScript で完結可能。 11

Slide 12

Slide 12 text

AWS Amplify の立ち位置の変遷 Gen1 から Gen2 になったときに、どのように立ち位置が変わって行ったか。 12

Slide 13

Slide 13 text

AWS Amplify の立ち位置の変遷 ● mBaaS (Mobile Backend as a Service) ○ モバイル向けのバックエンド機能提供サービス ■ 認証、DB、ストレージ、ホスティング、など。 ● 最近は Web フロントエンドを中心とした機能追加が目立っていた ○ Amplify Studio ○ Next.js 対応 ○ SSR アダプター ● バックエンドの開発の必要性も高まり、フロントエンドとバックエンドを一体で開発する必要がでてきた。 13

Slide 14

Slide 14 text

AWS Amplify の歴史の一部 14 2015年10月 AWS Mobile HUB 発表 2018年11月 AWS Amplify 発表 2020年12月 AWS Fargate 対応 2021年05月 Next.js の SSR に対応 2021年07月 Next.js 10 & 11 に対応 2021年12月 Amplify Studio 発表 2022年11月 Next.js 12 & 13 に対応 2023年11月 SSR アダプター対応 https://docs.aws.amazon.com/amplify/latest/userguide/document-history.html

Slide 15

Slide 15 text

AWS Amplify Gen1 と Gen2 の立ち位置の変化からみる個人的見解 15

Slide 16

Slide 16 text

技術領域をざっくり Web Application Backend Auth Data Storage API Hosting Smartphone Application Developer Tools Technique Frontend Backend Infrastructure CLI npm vite etc… IaC AWS CDK etc… IaC AWS CloudFormation etc… 16

Slide 17

Slide 17 text

Slide 18

Slide 18 text

AWS Amplify Gen1 のターゲット (個人の感想) Web Application Backend Auth Data Storage API Hosting Smartphone Application Developer Tools Technique Frontend Backend Infrastructure CLI npm vite etc… IaC AWS CDK etc… IaC AWS CloudFormation etc… フロントエンドエンジニアが必要に迫られてバックエンドもやる。システムの中心はフロントエンド。 18

Slide 19

Slide 19 text

AWS Amplify Gen1 のターゲット (個人の感想) Web Application Backend Auth Data Storage API Hosting Smartphone Application Developer Tools Technique Backend Infrastructure CLI npm vite etc… IaC AWS CDK etc… IaC AWS CloudFormation etc… フロントエンドエンジニアが必要に迫られてバックエンドもやる。システムの中心はフロントエンド。ツールとしてCLIを使い慣れているので、 Amplify CLI も受け入れられる。 Frontend 19

Slide 20

Slide 20 text

AWS Amplify Gen1 のターゲット (個人の感想) Web Application Backend Auth Data Storage API Hosting Smartphone Application Developer Tools Technique Backend Infrastructure CLI npm vite etc… IaC AWS CDK etc… IaC AWS CloudFormation etc… バックエンドエンジニアにとっては、バックエンドでできることが少ない。システムの中心はフロントエンド。 Frontend 20

Slide 21

Slide 21 text

AWS Amplify Gen1 のターゲット (個人の感想) Web Application Backend Auth Data Storage API Hosting Smartphone Application Developer Tools Technique Backend Infrastructure CLI npm vite etc… IaC AWS CDK etc… IaC AWS CloudFormation etc… バックエンドエンジニアにとっては、バックエンドでできることが少ない。 Frontend バックエンドリソースを CDKで管理したい。細かく調整したい。 21

Slide 22

Slide 22 text

技術領域をざっくり Web Application Backend Auth Data Storage API SSR Hosting Smartphone Application Developer Tools Technique Frontend Backend Infrastructure CLI npm vite etc… IaC AWS CDK etc… IaC AWS CloudFormation etc… 22

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

AWS Amplify Gen2 のターゲット (個人の感想) Web Application Backend Auth Data Storage API SSR Hosting Smartphone Application Developer Tools Technique Frontend Backend Infrastructure CLI npm vite etc… IaC AWS CDK etc… IaC AWS CloudFormation etc… BFF (Backend for Frontend) フロントエンドとバックエンドを一体として開発する BFFの領域。フロントエンド技術で対応。 25

Slide 26

Slide 26 text

Slide 27

Slide 27 text

まとめ 27

Slide 28

Slide 28 text

まとめ ● AWS Amplify Gen2 とは『Webフロントエンドとバックエンドを　「フロントエンド」中心に開発するためのツール』 ○ BFF (Backend for Frontend) の領域に対応BFF (Backend for Frontend) ● 個人的にはフロントエンド・バックエンドの区別なく開発するので、今回の進化は大歓迎。 28

Slide 29

Slide 29 text

スマホアプリの開発にとってはどうか? ● React Native にとっては、言語統一できるのでプラスに働くはず。 ● 他の言語でも、Dataの型がスマホアプリで使える。(Flutterで確認) ○ この辺りをもっと確認して、アピールしたい。 29

Slide 30

Slide 30 text

個人的な希望 ● Amplify Studio Gen2 ! ○ Amplify Studio の簡易的な管理機能を使いたい。 ■ Console でモデル操作など可能だが、 AWSアカウントベース。 ■ 操作させるユーザーを独自で制御したい。 ○ Figma to React Component が使いたい。 ■ Figma の開発者モードで補完は可能だが有料。 30

Slide 31

Slide 31 text

宣伝 31

Slide 32

Slide 32 text

Amplify Boost Up #06 32 https://aws-amplify-jp.connpass.com/event/321534/ 2024/07/31 (水) ハイブリッド開催!! Amplify Gen2 の楽しさをお伝えします!!

Slide 33

Slide 33 text

End 33