Bubbleパフォーマンス究極のガイドブック

Bubbleで高速・スケーラブルなアプリを構築する方法

ノーコードツールのbubbleを使いパフォーマンスを上げるための内容満載のPDFブック。（A4判・204ページ）

「The Ultimate Guide to Bubble Performance」の日本語版です。

Bubbleは、ウェブアプリケーションの構築方法を変えつつあります。誰でも、次の大きなソーシャルネットワーク、SaaS、アプリのスタートアップを構築できるようになりました。

しかし、その驚くべき柔軟性には代償があります。好きなようにアプリを構築できる自由があるがゆえに、高いパフォーマンスとスケーリングに最適でない方法で構築してしまうこともあります。bubble の公式ドキュメントは、アプリをすばやく簡単に構築できるように用意されており、Bubble の最も高度な機能を活用してページ、ワークフロー、データベースを高速化する方法を提示しているわけではないのです。

この本では、次の２つのレイヤーについて深く掘り下げています。

・ページの読み込み、ワークフローの処理、データベースのレコードの編集を効率的に行うためのアプリのセットアップ方法

・アプリが実際よりも速く見えるように、ユーザーにうまく伝える方法

200ページ以上にわたって、数多くの例、シナリオ、イラスト、スクリーンショットを掲載したこの本は、一般的なベストプラクティスを教えるのではなく、あなたのプロジェクトに適した方法でアプリを最適化するための手段を提供します。

本書の内容

本書の内容 2

はじめに 9

本書の読み方 11

パフォーマンスとは 11

プラットフォームを知る 11

パフォーマンスを高めるための構築方法 12

コンセプト、定義、注釈 13

パフォーマンス 13

キャパシティ 13

サーバーサイドとクライアントサイド 14

応答性(Responsiveness) 15

外部のサービス 15

エディターの性能 15

経験値 16

開発計画について一言 16

ベストプラクティスとツールの違い 17

アプリとは何ですか? 19

パフォーマンスとは 23

パフォーマンスの捉え方 25

認識されているパフォーマンスと実際のパフォーマンス 25

開発者が感じるパフォーマンス 26

性能は機能である 28

Bubbleアプリの価格プラン 29

性能に投資するのか、キャパシティに投資するのか? 29

リサーチ段階 31

プロジェクトに合わせたツール 32

正しい質問をする 33

Bubbleのキャパシティのジレンマを理解する 35

オールマイティ 37

Bubbleの業績推移 37

Bubble公式ドキュメントとガイド 39

Bubbleの性能とデバイス性能の比較 40

RAM使用量 40

CPU使用率 41

ダウンロードサイズ 42

BubbleのサーバーとCloudflare 42

Bubbleの性能限界 44

大規模なデータを素早く処理する 45

長いリストを表示して操作する 45

複合検索 46

サーバーサイドのJavascript 46

ページ読み込みのUX(ユーザー体験) 47

Bubbleのデータベースの仕組み 47

インデックス作成について 50

Bubbleはどのようにインデックスを選択するのか 52

アプリでのインデックスの働き 53

構造化データと非構造化データ 54

ページの読み込み方法 55

ページのロードシーケンス 55

ブラウザによるページの描画方法 56

再描画 58

一般的なイベントのワークフローとページロードの優先順位 59

ページが読み込まれる(Page isloaded) 60

現在のユーザーはログアウトしている(Current User islogged out) 60

X秒ごとに行う(Do every X seconds) 60

条件が成立したときに実行する(Dowhen condition istrue) 60

ワークフローの優先順位:サーバーサイド 61

ワークフローの優先順位:クライアント側 62

カスタムイベント 62

バックエンドワークフロー/APIワークフロー 63

ページの読み込み終了の判断方法 64

ページ全体のロード(Page loaded (entire)) 64

画面表示部分のロード(Page loaded (above fold)) 65

クライアントサイドとサーバーサイドの演算子 65

ページ 67

RAM使用量とダウンロードサイズ 68

ウェブサイトはどこまで小さくするべきか? 69

ダウンロード 69

Bubbleエンジン 69

画像 69

フォント 71

アイコンパック 71

Javascript ライブラリ(プラグイン) 72

CSS(スタイル) 72

ページとすべてのアセットサイズの測定 73

検索対象の特定 77

ウォーターフォール図の読み方 78

種類の見分け方 79

画像 79

プラグイン 79

フォント 80

アイコンライブラリ 80

単一ページアプリと複数ページアプリの比較 81

レンダリングリスト 83

リストのThing上に直接保存された情報 84

Sub-Thingに保存された情報 84

Sub-Thingへの加工 84

条件 85

リストを高速に表示させる設定方法 85

繰り返しグループの罠 85

全ロードと部分ロードの比較 86

デフォルトで非表示 87

レイジーローディング 88

CPU使用率 88

ページのレンダリング 89

クライアントサイドのデータ処理の活用 90

ページレンダリングの測定 94

ペイント点滅 95

レイヤーを確認する 96

フレームレートを測定する 98

データベース 99

データベースの速度を低下させるもの 99

ダウンロードサイズ 99

データベースのレコードの大きさは何で決まるのですか? 101

複雑さ 103

ストラクチャリングの紹介 107

データベースの設計 108

高度なデータベース構造化が必要かのバランスを取る 108

Bubbleをメモに使うな 109

スクリーンから離れる 109

プライバシールールを常に意識した構築 110

ユーザーを中心に据える 110

Data Typeを作成するプロセス 110

使用する用語 111

データコンセプト 111

データウェイト 111

要件の競合 112

サテライト・データ型 112

検索データ型 112

コンテンツデータ型 112

リンクデータ型 113

データ型の統合 113

シナリオ1:CRMにおけるベンダーとクライアント 114

ステップ1:データコンセプトの定義 114

ステップ2 -要求事項の特定 115

ステップ3.コンフリクト(競合)の特定 118

(訳注:コンテナデータ型=多くの非構造化データで重く、検

索しにくい。検索データ型=少ない軽いデータで、検索しや

すい) 119

ユーザーの視点 121

Search for Clients:クライアントを検索する → Browse results:結果

を見る → Click record:レコードをクリックする → See client details:

クライアントの詳細を参照する 121

シナリオ2:トラベルアプリ 121

ステップ1:データコンセプトの定義 123

ステップ2:要求事項の特定 123

ステップ3:コンフリクトの特定 130

ユーザー目線: 132

異なるデータ型間のデータ同期 133

効率的に検索する 134

制約が多い方が良い 135

重複する検索について 135

Bubbleは必要なデータだけをダウンロードする 135

リストを検索の保存として使用する 135

フィルタリング(およびその他の)演算子の動作 136

入れ子構造 138検索において 139

繰り返しグループの場合 140

検索とリスト 141

リスト 142

検索 145

どちらが速いですか? 147

オプションセット 147

オプションセットのパフォーマンスへのクリエイティブな利用法 148

データベースの値を置換し、読み込みを高速化 149

アプリメニューとユーザー権限を同じOption Setで構築する 149

メッセージポップアップとして設定されるオプション 150

ワークフロー 152

ワークフローとは? 153

フロントエンドとバックエンドのワークフロー 154

フロントエンドワークフロー 154

バックエンドワークフロー 154

バックエンドのワークフローがフロントエンドに与える影響 155

バックエンドワークフローのスケジューリング 155

Bubbleはフロントエンドのアクションに最適化されている 156

では、バックエンドワークフローは使わないでくださいということです

か? 157

クライアントサイドとサーバーサイドのアクション 158

ワークフローを遅くしているものは何か? 160

アクションレスポンスデザイン 162

即時の反応(Immediate response) 164

ある程度の遅延(Delayed response) 164

かなり時間のかかる処理(Future response) 164

即時の反応 164

ある程度の遅延 165

動作の順序 167バックグランドトリガー 168

ワークフローの間隔を空ける 170

多段式 170

プロセス分散 170

エラーメッセージにプロセスス分散を使用 173

ドゥ・ノット・リピート・ユアセルフ(DRY) 177

カスタムイベント 177

再利用可能な要素 178

再利用可能な要素でアプリ全体のカスタムイベントを共有する 179

Bubbleバックエンドの活用 181

リストへのワークフローと再帰的ワークフローの比較 182

再帰的ワークフローの遅延 183

バックエンドトリガー 184

複雑なデータの削除 186

バックエンドトリガーを使ってデータの同期を保つ 190

オプションセットとトリガーを組み合わせてワークフローを自動化す

る 190

バックエンドトリガーを使用するタイミング 192

わかりやすいコミュニケーション 194

アクションの受信 196

プロセスが動作している 198

プロセスが終了する 200

パフォーマンスとは幾千の戦争である 202

性能は機能である 202