この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
「What’s new for frontend web and mobile developers with AWS Amplify」のセッションに参加してきたので、その内容についてお話ししていきたいと思います。
タイトルにもあるように、「AWS AmplifyによるフロントエンドのWebおよびモバイル開発者のための新機能」という内容のセッションでした。
アジェンダ
概要
AWS Amplify helps frontend web and mobile developers build full-stack applications in hours with minimal cloud expertise. In this session, explore the capabilities of Amplify, including how you can easily configure a backend with authentication, data, and storage; create a frontend UI with Amplify Studio; and host static and server-side rendered web apps with Amplify Hosting. Learn about recent Amplify updates, including Next.js support; Amplify Flutter support for web, desktop, and iOS/Android; and extensibility features that let you use the breadth of 175+ AWS services with AWS CDK and modify deployment operations as your needs evolve.
（直訳:
AWS Amplifyは、フロントエンドのWebおよびモバイル開発者が、最小限のクラウドの専門知識で数時間でフルスタックアプリケーションを構築することを支援します。このセッションでは、認証、データ、ストレージを含むバックエンドを簡単に構成し、Amplify StudioでフロントエンドUIを作成し、Amplify Hostingで静的およびサーバサイドレンダリングのWebアプリケーションをホストする方法を含む、Amplifyの機能を探ります。また、Next.jsのサポート、Web、デスクトップ、iOS/Android向けのAmplify Flutterのサポート、AWS CDKで175以上の幅広いAWSサービスを使用し、ニーズの進化に応じて導入作業を変更できる拡張性機能など、最近のAmplifyの更新について学びます。
アジェンダ
The state of the web and mobile development industry
What's AWS Amplify
Building fullstack web and cross-platform app
How customers are using Amplify
Underlying architecture
（直訳:
Web・モバイル開発業界の現状
AWS Amplifyとは
フルスタックウェブ、クロスプラットフォームアプリの構築
お客様によるAmplifyの活用方法
基本的なアーキテクチャ
内容（Web・モバイル開発業界の現状/AWS Amplifyとは）
NEWとして発表されていた内容は「※NEW」と表記しています。
フロントエンドの責任範囲とAWS Amplifyの概要
- 多くの責任を伴う
- すぐに市場にリーチする
- 素晴らしいユーザ体験を提供する
- 差別化し、群衆に打ち勝つ機能を構築する
- Fullstack dvelopment
- AWS Backendの構築
- Web
- UIアプリの構築
- アプリのホスト
- Cross Platform & Web
- バックエンドへのコネクト
内容（フルスタックウェブ、クロスプラットフォームアプリの構築）
実際にAmplifyを利用して、デリバリーアプリを作成した程で、内容確認。
AWS Backendの構築
- コマンドラインとビジュアルリソースプロビジョニング
- 認証とファイル保存のユースケース利用
- データスキーマのモデル化と協力な権限ルールの追加
※コマンドやコンソール画面を開きながら進めていたので、詳しくは動画より
データのモデリング化
例で作成するアプリケーションのモデル定義例
Amplifyプロジェクトのイニシャライズ
ターミナルからコマンドを実行（amplify init）
バックエンドへのAPIと認証の追加
ターミナルからコマンドを実行（amplify add api）
データのモデリング
ソースの修正(graphql）
バックエンドへ変更内容をPUSH
ターミナルからコマンドを実行（amplify push）
GraphQL APIのテスト（※NEW）
Build an AWS backend: What's new
- GraphQL in Studio：自動生成されたGraphQL APIをクエリ実行
- リアルタイムデータ：サービスサイドのフィルタリングにより、「1/（特定のユーザー）またはグループ（コラボレーションアプリ）」にのみ更新を送信し、「2/データを選択的」に同期（ネットワークトラフィックとローカルストレージを最適化）
- アプリ内のメッセージ：定義されたユーザー・セグメントにターゲット・メッセージを送信したり、ユーザーの行動に基づいてコンテクスト・メッセージをトリガーなどを可能
UIアプリの構築
- FigmaのデザインからReactコンポーネントを生成する
- Studio Form Builder - NEW！
- 組み込みのUIコンポーネント
UIコンポーネントビルドイン
ログインコンポーネントの構築
FigmaからインポートされたUIコンポーネント
コンソール実行やコマンド実行
フォーム作成（※NEW）
Amplify Studio Form Builder
- あらゆるAPIに対応するフォーム
- API定義からフォームを生成、またはゼロからフォームを新規作成
- 視覚的にデザインする
- 共通の検証ルールを視覚的に設定することで、時間を節約可能
- コードで拡張する
- 検証ルールとフォームのスタイルをコードでカスタマイズ
アプリのホスト（※NEW）
- SPA ウェブアプリのフルマネージドホスティングサービスに加え、ハイブリッド SSR アプリも提供開始
- ブランチに関連付けられた Git ベースの強力な C/CD 機能
- Amplifyで作成したバックエンドのデプロイも可能
- React、Next.js、Angular、Vue、Gatsby、Hugo、Jekyllなど、最新のWebフレームワークをサポート
Fully managed hosting for server side rendered apps built with Next.js 13
- Next.jsのメリット - 静的レンダリングとサーバーレンダリングのハイブリッドで、インタラクティブ性と初期ロード時間の短縮の両方をサポートします。
- ゼロコンフィグデプロイメント - レポを接続するだけ。ブラウザとサーバーのコードにまたがる単一の開発者エクスペリエンス
- バックエンドとの統合 - Auth や Data などの Amplify バックエンドとシームレスに動作します。
- Amazon CloudWatchの統合 - SSRアプリの観察、監視、トラブルシューティング
バックエンドへのコネクト
- Amplifyがプロビジョニングした、または既存の AWSリソース
- ユースケース中心 APIサーフェス
- ウェブ、モバイル、クロスプラットフォームのフレームワークをサポート
認証
GraphQL APIのインテグレーション(※NEW）
Connect to an AWS backend: What's new
- Flutter
- Dartを使用して書き直され、単一のDartベースのコードベースからモバイル、そして今やデスクトップとウェブアプリを作成
- iOS
- Swiftを使って書き直され、単一のコードベースからiOS、そして現在ではmacOSのアプリを作成できるようになりました。構造化された並行処理を実装するために、async/awaitのようなSwiftの慣用的な機能をサポート
- アンドロイド
- Kotlin を使用して書き直され、Storage と Auth が改善
- Authenticator UI コンポーネント
- Flutter と React Native で使用
最終的なデモアプリ構成図
基本アーキテクチャ（Customer）
基本アーキテクチャ（Driver）
おまけ
会場に参加している人たちが「フロントエンド？バックエンド？etc」
- FullStackが多数
