この記事は chillSAP 夏の自由研究2020 の記事として執筆しています。
UI5conとは？
UI5に関する技術の発表会で、SAPやパートナーの技術者が登壇します。SAPからは直近のUI5の改善した点や、今後注力していく分野について。パートナーからはUI5の技術の活用方法や、独自に開発した技術などについて紹介があります。
UI5Conは2016年から年2回開催されています。
イベントの告知ページ：https://openui5.org/ui5con/
UI5con ON AIR 2020
今年2回目となるUI5Conは7/9～7/10にオンラインで実施されました。
アジェンダと発表資料：https://openui5.org/ui5con/onair2020/#agenda
セッションの動画：https://www.youtube.com/channel/UCOlLpeus2uAJhmxjKHHGTgA
ざっくりまとめ
セッションの内容を簡単にまとめました。気になるテーマがあれば、リンクから見てみてください。
| タイトル | 概要 |
|---|---|
| Opening Keynote - Day One | 直近のUI5conからどんな進展があったか、今後注力する分野について。UI5Tooingなど |
| wdi5 - cross-platform test framework for hybrid UI5 apps | 複数のプラットフォーム（iOS, Android, Electron）でテストするためのフレームワークを開発した話 |
| Introducing Test Recorder | UIVeri5・OPAテスト用に、画面コントロールを選択するコードを生成するツール |
| Opposites attract - UI5 Components in Angular | 教育サービスのフロントエンドをAngularとUI5で構築。Angularのコンポーネントの中にUI5を埋め込む |
| Using TypeScript and PubSub to scale freestyle UI5 apps | 大規模なアプリケーションを開発する際、コントローラーを複雑にしないための心得 |
| UI5 Tooling 2020 | これまでのUI5Toolingの発展、UI5 Tooling 2.0で何が良くなったか |
| Modernize SAP Fiori app development using SAP Fiori tools | SAP Fiori Toolsの紹介とデモ |
| Opening Keynote - Day Two | UI5の開発環境の進化。SAP Business Application Studio、UI5 Flexibility Service、SAP Fiori Tools の紹介 |
| How we develop a state-of-the-art SAP portal using UI5 and more! | SAPのカスタマーポータルをUI5で開発。Bootstrapを早くする工夫と、ローカルでの開発プロセスについて |
| On premise SAP Launchpad as a PWA | Web Workerを使ってオフラインでも使える、アプリとしてダウンロード可能なラウンチパッドを作る |
| Component based development | 一つのアプリケーションを複数のコンポーネントに分けて開発することの勧め |
| UI5 Routing with Reusable Components | コンポーネントをRoutingのターゲットにする方法 |
| Don't worry, be async | アプリケーションのパフォーマンスをよくするために、非同期でリソースをロードをする設定について |
| Mission Apollo: Bring UI5 to the Moon | Apolloというフレームワークを使ってUI5でGraphQLを使用する方法 |
注目したテーマ
全体を通して私の印象に残ったのは「大規模な開発においてモジュール化をどうするか」というテーマでした。"Modularization", "Micro Frontends"といったキーワードがよく出てきたように思います。
これに関連する2つのセッションについて共有したいと思います。
1. Component based development
概要
Leon van Ginnekenさんらは、オランダでサービス技術者を支援するAndroidアプリを開発しています。10人のチームで3年にわたる開発の結果、アプリケーションは大きなものになっていました。
チームを2つに分けるという体制上の変更をきっかけに、複数のチームでの開発ができるように、アプリケーションから明確な機能をもった部品を切り出す「コンポーネント化」を行いました。コンポーネント化には以下のようなメリットがあります。
- コンポーネント単位で独立してテストができる
- 複数人（チーム）で開発ができる
- 部品として再利用ができる
コンポーネントはそれぞれ独立したプロジェクトとして作ることもできますが、ここでは1つのプロジェクトの中に各コンポーネントのフォルダを作成したそうです。部品としての再利用というよりパーツに分けることに重点が置かれたようです。
関連ブログ
https://blogs.sap.com/2020/06/21/component-based-development-in-ui5/
感想
コンポーネントを部品として再利用する目的で使うことはありましたが、同一アプリの中でモジュール化のを目的として、というのは考えたことがなかったので新鮮でした。メインのコントローラーのコードは大きくなりがちなので、コンポーネントに分かれていればメンテしやすいと感じました。
2. Using TypeScript and PubSub to scale freestyle UI5 apps
概要
コントローラーが巨大化してしまうというよくある問題に対して、Gabriel Borgesさんのプロジェクトでは独自の解決方法を生み出しています。
＜問題＞
UI5ではモデル、ビュー、コントローラーがそれぞれに状態(state)を持ち、双方向に更新することが可能になっています。コントローラーはビューからのイベントに反応し、モデルを更新したりビューの状態を更新したりするため、巨大なコードになりがちです。
＜解決方法＞
ビュー、コントローラーに状態を持たせるのをやめ、アプリケーションの状態は唯一モデルが管理します。さらに、コントローラーからはビューやコントロールにアクセスしないというルールにします。（byIdでコントロールを取得するのは禁止）
このルールを実践するために開発されたのがPubSubというライブラリです。PubSubはPublish & Subscribeの略で、実態はUI5のEventBusのラッパーであり、TypeScriptを使用できるようになっています。コントローラーがPubSubを通じてイベントを発行すると、ビジネスロジックがそれを拾って処理を行うようになっています。
発表では詳しくは触れられていませんでしたが、おそらくコントローラーはビューで発生するイベントを個別のクラスに中継する役割に徹することで、コードを簡潔にしていると思われます。
感想
byIdも禁止というのが衝撃的で、質問コーナーでも関連する質問が2つほど出ていました。これについては、UI5のコントロールを拡張したコントロールを作って、JSONモデルを通じて操作をしているそうです。本当に巨大なプロジェクトのために用意された仕組みといえるでしょう。（真似するのは難しそう）
一方で、コントローラーですべての処理を行わずに個別のクラスに任せるという考え方は普段の開発にも適用できそうだと思いました。
おわりに
UI5ConではUI5の基本の技術からプロジェクトの事例まで、幅広いトピックについて話が聞けます。普段私はS/4HANAのフロントエンド開発のためにUI5を使うことが多いですが、モバイルや大規模サービスで使った事例を聞けるのは興味深いです。もしよければ、タイトルから興味のありそうな動画を選んで見てみてください。