《Bubble》保守性高く開発するガイド

Bubbleにおいて保守性高く開発するためにできること

Bubbleの保守性を高くするためには、モジュール化することが大切です。

アプリケーションの複数の場所で使われる一連の処理をまとめることをモジュール化といいます。

これにより、一部の変更が他の部分に影響を与えることなく、容易に更新や拡張ができます。

また再利用が可能になることも大きな魅力の一つです。

以下は、モジュール化の概念図です。

Reusable elementを利用する

Reusable elementは、UIのパーツとしてだけでなく、ワークフローもモジュール化できます。

以下のようなケースでReusable elementを利用することがおすすめです。

- 複数のページで同じようなUIのパーツを使う場合

- SPA実装時にGroupに複雑、かつ分離した機能がある場合

- ワークフローの数が多く、別ページで管理したい場合

実装方法

再利用可能なUIパーツの作成

BubbleアプリのDesignページを開き、New reusable element をクリックして作成していきます。

クリックするとポップアップが起動するので必要情報を入力します

Clone fromは、他の再利用ができる要素をベースにして作成するときに選択します。

作成できたら編集ページに移動するので、あとはページと同様に要素を作成する、workflowを定義するなどの操作を行います。

UIパーツを配置

Reusable elementsの一覧に作成した要素があるので、それをページにドラッグアンドドロップで配置しましょう。

再利用ができる要素の中に再利用ができる要素を入れ込むこともできました。

Custom Workflowを利用する

Custom Workflowを利用して、ワークフローのみをモジュール化できます。

次に示すAPI Workflowとは異なり、フロント側で実行されます。

次のような時はCustom Workflowを使うことがおすすめです。

- ページ上のElementに変更を加える場合（表示/非表示など）

- 即時の応答を期待するアクションの場合

実装方法

中に何も要素を含まない再利用ができる要素 のworkflowでカスタムイベントを作成します。

作成後、アクションを追加します。

今回はとても単純なものにしました。indexページにナビゲートするというフローです。

再利用ができるワークフローにアクセス

このworkflowを各ページのworkflowから呼び出します。

Custom eventsのTrigger a custom event from a reusable elementを使用します。

ログアウト状態なら 再利用ができる要素のworkflow を実行するという例です。

Reusable element には作成した再利用ができる要素を選択し、Custom eventも作成したものを選択します。

API Workflowを利用する

ワークフローをモジュール化できます。

Custom Workflowとは異なり、サーバー側で実行されます。

次のような時はAPI Workflowを使うことがおすすめです。

- アクションをすぐに完了する必要がない場合（非同期処理）

- セキュリティ保護されているデータを参照する必要がある処理の場合

API Workflow含むバックエンドworkflowに関する記事はこちら