AWS Amplify + Figmaの個人的見解
AWS Amplify + Figmaの個人的見解
Figma + Amplifyのハンズオン的なのを初見でやってみたけど、最初よくわからなかったので、その流れをメモする
Amplifyって何？
フロントエンドエンジニアのために生まれたバックエンドをすっ飛ばすツール。
バックエンド出身の人からしたら「俺いらんやん。」って思う悲しいツール。
つまり、「UIカチカチw」で
・モデル設計
・RESTfulなエンドポイント作成
・デプロイ周り
を勝手にやってくれるツール
今回なにがすごいの？
従来では、Figmaの外部ツールでreactに変換して、コピペで自分のレポジトリのコードに貼り付けるのが一般的だと思いますが、それをいい感じにやってくれるようになった。
Figmaお絵描き
↓
Amprifyに輸入
↓
amplify pull --appId <YOUR_APP_ID> --envName <YOUR_ENV>
でreactで、ui-componetsに入るようになった。
イメージとしては、Amprifyはサインインとかのコンポーネントを提供したがそれがバージョンアップして
手書きのコンポーネントが使えるようになった感じ。
案にAWSがお絵描きツールを自作せずに、Figmaを使ったのは、いつものAmazon戦略感(※1)がすごい。
人気が出たら自作するんだろうなぁ、、、
※1 AMAZONは先に他社の商品を売らせて、売上データを解析して、よく売れる利益率の高い商品を見つけ出し、その商品を自社で製造し、検索した時に優先的に自社の製品を表示させるようにしているらしいよ。ずるいよね。
手こずったところ
yarn start yarn run v1.22.19 $ react-scripts start node:internal/modules/cjs/loader:598 throw e; ^
AWSが提供しているreact?がもう古いみたいで、なんか動かない。
の記事を参考やっていったけども、
Module not found: Error: Can't resolve '../models'
というエラーで動かないので、ごちゃごちゃやっていたところ
amplify update codegen
のコマンドを叩き、index.jsを
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { ThemeProvider } from "@aws-amplify/ui-react";
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';
import "@aws-amplify/ui-react/styles.css";
import { studioTheme } from "./ui-components";
Amplify.configure(awsconfig);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<ThemeProvider theme={studioTheme}>
<App />
</ThemeProvider>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
に変更したところ動くようになった。
手こずった原因
- AWS Amplifyでデフォルトで提供しているreactが最新のnode.js上で動かない
- Amplify pullでダウンロードされるコンポーネントがデフォルトでmodelsモジュールを利用する設定になってるが、modelsモジュールはpullでインストールされる仕様になっていない
- ThemeProviderをindex.jsに書かないとGraphQLの権限で引っかかる
- amplify update codegen を叩く必要がある。
2024年1月の段階だと、安定して動くチュートリアルを見つけるのが難しいかった。
ひとまず、これでバックエンドエンジニアからするとめっちゃ助かるツールになりそうな予感がする。
オーバライドについて
以下のようにしてオーバライドが可能
<Stat
overrides={{ "8,260": { children: '9999' }}}
/>
<ActionCard
overrides={{
"Information about this product": { children: 'honbun' },
"Button": {
onClick: async (e) => {
console.log('button was clicked.');
},
}
}}
/>
原理としては、呼び出すコンポーネントのXXX.jsxにて
{...getOverrideProps(overrides, "Button")}
などで、オーバライド可能なコンポーネントを指定できる。
Amplifyの概念まとめ
Figma+Amplifyチュートリアルから入ったので「何これぇ」って思うことが多かったが、色々触ってわかったことしては、Amplifyはあくまで補助ツールなので、自分でreactでinitしてごちゃごちゃした後に、「そろそろAmplifyつかうかー」ってテンションが良いかと思われる。
具体的には
react init
↓
Amplify Backend立ち上げ(※議論1)
↓
npm install aws-amplify @aws-amplify/ui-react をはじめとした初期設定
↓
amplify pull
↓
git push
↓
API Gatewayなどのバックエンド初期設定(※議論2）
↓
適当なボタン置いてバックエンドとフロントエンドの橋渡しテスト(Amplify HostingのSTG検証環境)
↓
全体的な構図
↓
Figmaからコンポーネント輸入
↓
いいかんじにする
↓
Amplify Hosting(master公開)
※議論1
Amplify Backend、この命名好きじゃない。
あくまでも、Amplifyはあくまでフロント支援ツールであるので、バックエンドと名乗ると変な感じになる。
※議論2
Amplifyを使った場合、バックエンドはどこまで、Amplifyに依存していいかに関して
個人開発、小規模の限られて発展する予定のない使い捨てプロジェクトの場合
→ご自由にどうぞ
ある程度発展する可能性のあるプロジェクト場合
バックエンド、フロントエンドは完全に分離するべきと考えた場合、レポジトリは分けるべきである。
そう考えた場合、切り離されたバックエンドがもう一度Amplifyを使うことは適切なのだろうか。
アーキテクチャ的に考えると
フロントエンド → Amplify ← バックエンド
という図式が完成してしまうので、これだとコアロジックとしてAmplifyが入ってくるので、
めでたくAmplifyとご結婚となってしまい、Amplifyが負債化した時に、一緒にプロジェクトも負債化してしまう可能性が出てくる、それを避けるためにも、
フロントエンド → Amplify
バックエンド → サーバーレスフレームワーク
とする方が、自然だろう。
Cloud Front + S3 + Route53が酷くなったしたら、少なくともバックエンドだけは、
即刻AWSと縁を切ることができる。
Figmaにどこまで依存するか
やっていてわかったことは、Figmaで全てのフロントエンドを実装できるわけではないということである。
Amplifyに輸入する際に、コンポーネントの種類を選べないので、変な感じになるケースが多々ある。また、アニメーションをはじめとして、まだまだ苦手なところはまだ多い
現状の段階では、あくまでFigmaは部分的なUIのコンポーネント製造であるべきというのが個人的見解である。
またAmpifyのコンポーネントに関しても、あくまでコンポーネントという立場を取った方が良いと思われる。
ページの構図などは、馬鹿正直にBootstrapかTailwind(※1)で組んでから、Amplifyコンポーネント、自作コンポーネントを使うという温度感が正解な気がしますね。全部Figmaでできたらいいのに
※1
参考URL
Discussion