こんにちは、技術1課の加藤です。
今日は、、、というか今日も Amplify のお話をしていきますw
Amplify における UI Components の実装が変わったよ、という話。
新しいバージョンである@aws-amplify/ui-<framework> と Legacy 版である aws-amplify-<framework> の違いがちょっと面白かったのでご説明していきます。
Amplify の UI Components
Amplify はご存知の通りモバイルやWebアプリケーションを簡単に作れるよう様々な支援を行ってくれるツール群なわけですが、そのひとつに UI Components というものがあります。
これは各種フレームワークに向けて提供された UI のコンポーネント (部品) のこと。
例えばログイン機能を実装しようと思った時、本来であれば自ら HTML, CSS, JavaScript のコードを書き UI を作らなければいけません。
しかし Amplify の UI Components を使うと、用意された <amplify-authenticator> のようなコンポーネントをインポートするだけで、簡単にログイン用の UI を使うことができるようになります。
見た目のカスタマイズには制約があるものの、必要十分な機能が揃っており、非常に優秀。テスト用に軽くアプリを作りたい、と言った時には真っ先に使っていただきたいものになっています。
Amplify UI Components の対応フレームワーク
2020/06/17 現在で、以下のフレームワークに対応しています。
- React
- Angular
- Vue
- Web Components
- React Native
Webフロントエンドのフレームワークは網羅、React つながりで React Native にも対応、と言った形でしょうか。
加えて、 Web 標準のコンポーネント作成の仕様群である Web Components にも対応していますね。素敵。
Amplify UI Components の新旧
さてここから本題。
Amplify UI Components には以下の二種類が存在しています。
- @aws-amplify/ui-<framework>
- aws-amplify-<framework>
多くのチュートリアルサイトでは後者の方を使っているのではないでしょうか。
しかし今 UI Components のページにアクセスすると真っ先に上のライブラリの利用方法が出てきます。
実は 2020/04 に発表があり、 UI Components の新しいバージョンとして上のライブラリが登場しています。
下のライブラリは古いバージョンということ。公式ドキュメントでも Legacy 版として紹介されています。
今後開発で利用する際には @aws-amplify/ui-<framework> を使うと良いでしょう。
何が変わったのか
では Legacy 版と 新バージョンで何が異なるのか。
最も大きな違いはその実装です。
Legacy 版
Legacy 版の UI Components は各フレームワークごとに専用のテンプレートを用意し、必要な UI を実装していました。これは GitHub のリポジトリを見るとよくわかります。
例として Vue のリポジトリを貼っておきますね。
amplify-js/packages/aws-amplify-vue | GitHub
[src] > [components] 内を適当に覗くと、 .vue ファイルがたくさん置いてあるのが確認できます。
新バージョン
次に新バージョンの UI Components のディレクトリを覗いてみましょう。
amplify-js/packages/amplify-ui-vue | GitHub
すると [src] には index.ts しか入っておらず、コンポーネントの実装は含まれていないことがわかります。
「？？？」となりつつリポジトリを辿ってみると、どうやら amplify-ui-compoenents なるパッケージにコンポーネントが納められています。
amplify-js/packages/amplify-ui-components/src/components | GitHub
先ほど見た Vue 側の index.ts ではこのコンポーネントを利用して、Vue 向けに変換・提供していたわけです。コミットコメントや index.ts の記述を見てみると、変換には Stencil が使われている様子。
今までフレームワークごとにコンポーネントの実装を行っていた形だったのが、単一のパッケージにまとめて各フレームワーク向けに変換する形に変わったわけですね。
フレームワーク間の差異が減ったり、開発スピードが向上したり、様々メリットがありそうです。素敵。
公式ブログあった
上記のことを GitHub リポジトリあさりながらちょっとずつ把握していったんですが、公式ブログに更新情報ありました。
Amplify Framework announces new, rearchitected UI Component and modular JavaScript libraries | AWS Mobile Blog
これによると実装の変更に伴い、
- サインアップ後の自動サインイン機能などの追加
- HTML slot エレメントによるより粒度の細かなカスタマイズ性能
- モジュール化の改善によるバンドルサイズの低減
なども行われているとのこと。GraphQL と REST のモジュールを分けることでおっきくバンドルサイズを下げられるようになった、なんてことも記載されてましたね。
まとめ
ということで、Amplify の UI Components の新バージョンおよび Legacy 版に関して見てきました。
まだまだ新しい上に、開発スピードの速い Amplify です。
今後、コンポーネントの周りの発展にも期待ですね。
