Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

大規模BIクラウドWebサービスの裏側

1,342 views

Published on

翔泳社 Developer Summit2016 19-A-2 セッションで使用したスライドです。

Published in: Technology

大規模BIクラウドWebサービスの裏側

  1. 1. 大規模BIクラウドWebサービスの裏側 ~ Waveの内部アーキテクチャとデザイン理念 ~ 岡本 充洋 Senior Developer Evangelist, Salesforce.com mokamoto@salesforce.com
  2. 2. Forward-Looking Statements ​Statement under the Private Securities Litigation Reform Act of 1995: ​This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. ​The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal yearand in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site. ​Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available.Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.
  3. 3. 自己紹介 ​岡本 充洋 ​Salesforce.com Senior Developer Evangelist ​2008年 に入社 § Salesforceのテクノロジの啓蒙 § 開発者からの声を R & D へのフィードバック
  4. 4. アジェンダ Waveについて Wave サーバ ​ ストラクチャ ​ データセット ​ クエリエンジン Wave UI ​ 開発における理念 ​ ノウハウ、プラクティス
  5. 5. Waveとは ​インタラクションに特化したビジュアリゼーションツール 5 テキストベース・テクノロジ スキーマフリー のキーバリュー型ストア 転置インデックス及びデータの圧縮 SAQLクエリ⾔語 Wave UI データを様々な⾓度から⾼速にクエリを実⾏ 圧縮 転置インデックスKey/Value型 データマート (⽬的、靴)(スポーツ、スキー)(⾊、⾚)…. (⽬的、⽔)(価格、3ドル)
  6. 6. Waveの構成要素 - ELT ​データセットのデザイン、作成 • Salesforceデータ • CSVデータのアップロード • データAPIによる外部連携 スケジュールによるデータ自動同期 • ワークフローの設定、管理
  7. 7. Waveの構成要素 - エキスプローラ ​アドホックなデータの分析 • Lens(クエリ + ビジュアリゼーション) • Measure(指標) • Dimension(カテゴリ) • 絞り込み、グループ • チャートの選択
  8. 8. Waveの構成要素 -ダッシュボード ​ダッシュボードビルダーで作成、共有 • 多様なWidgetサポート ​インタラクティブなダッシュボード • Selector Widgetによる クエリ、チャートの自動更新
  9. 9. Salesforce.comのサービス群とデータセンター B2C Marketing Automation SMB Service & Support B2B Marketing Automation Development Platform Stream ProcessSFA Service & Support Customize Platform Analytics
  10. 10. Wave サービス (Super POD) Queue(Redis) Workerサービス Wave アーキテクチャ Salesforce Core(POD) Appサーバ Force.com DB (RDB) Query Queue ELT Worker Query Worker クライアント (Web) • SPA • HTML、JS、CSSを 初回にロード • データ、クエリは API経由 Data center スケジューラ CMS FIieForce (ファイルシステム) Control Library リソース マネージャ ELT Queue Query ResultQuery ResultQuery Result ELT Worker ELT Worker Query Worker Query Worker
  11. 11. Wave サービス (Super POD) Queue(Redis) Workerサービス Wave アーキテクチャ ​データ・セット作成の場合 Salesforce Core(POD) Appサーバ Force.com DB (RDB) Query Queue クライアント (Web) • SPA • HTML、JS、CSSを 初回にロード • データ、クエリは API経由 Data center スケジューラ CMS FileForce (ファイルシステム) Control Library リソース マネージャ ELT Queue Query ResultQuery ResultQuery Result ELT Worker Query Worker ELT Worker ELT Worker Query Worker Query Worker
  12. 12. Wave サービス (Super POD) Queue(Redis) Workerサービス Wave アーキテクチャ ​Query実行の場合 Salesforce Core(POD) Appサーバ Force.com DB (RDB) Query Queue クライアント (Web) • SPA • HTML、JS、CSSを 初回にロード • データ、クエリは API経由 Data center スケジューラ CMS FileForce (ファイルシステム) Control Library リソース マネージャ ELT Queue Query ResultQuery ResultQuery Result ELT Worker Query Worker ELT Worker ELT Worker Query Worker Query Worker
  13. 13. Waveのデータセット アドホックなデータ分析のために最適化されたファイルセット ​転置インデックス(Inverted Index) ​コンプレッションによりファイルサイズも最小限に ​スケーラブル
  14. 14. 転置インデックス (Inverted Index) ​3つのドキュメント ​{0} – “Turtles love pizza” ​{1} – “I love my turtles” ​{2} – “My pizza is good” テキスト ドキュメントID “turtles” {0, 1} “love” {0, 1} “pizza” {0, 2} “i” {1} “my” {1, 2} “is” {2} “good” {2} ​検索キーワード: “my turtles” “turtles” {0, 1} “my” {1, 2}) INTERSECT({0, 1},{1,2}) = {1}
  15. 15. Row ID Carrier Origin Destination Miles Duration 1 AA SFO ORD 1200 4 2 AA SFO PHX 350 4 3 WN ORG SFO 1200 4 4 WN LAX ATL 1500 5 5 UA DFW SEA 1500 5 6 UA BOS LAX 1500 6 7 UA JFK SFO 1600 6 8 UA SFO ORD 1200 4 9 AA JFK ORD 1100 5 10 DL JFK ORD 1100 5 例 : 飛行機のフライトと飛行距離
  16. 16. Row ID Carrier Origin Destinat ion Miles Duration 1 AA SFO ORD 1200 4 2 AA SFO PHX 350 4 3 WN ORG SFO 1200 4 4 WN LAX ATL 1500 5 5 UA DFW SEA 1500 5 6 UA BOS LAX 1500 6 7 UA JFK SFO 1600 6 8 UA SFO ORD 1200 5 9 AA JFK ORD 1100 5 10 DL JFK ORD 1100 5 キー = 項目名 : 値 carrier:AA = {1, 2, 9} dest:SFO = {3, 7} データセットに転置インデックス作成
  17. 17. Key Value Carrier:AA 1,2,9 Dest:ORD 1,8,9,10 Carrier:WN 3,4 Carrier:UA 5,6,7,8 Carrier:DL 10 Origin:SFO 1,2,8 etc. データセットに転置インデックス作成 Row ID Carrier Origin Destinat ion Miles Duration 1 AA SFO ORD 1200 4 2 AA SFO PHX 350 4 3 WN ORG SFO 1200 4 4 WN LAX ATL 1500 5 5 UA DFW SEA 1500 5 6 UA BOS LAX 1500 6 7 UA JFK SFO 1600 6 8 UA SFO ORD 1200 5 9 AA JFK ORD 1100 5 10 DL JFK ORD 1100 5
  18. 18. Row ID Carrier Origin Destinat ion Miles Duration 1 AA SFO ORD 1200 4 2 AA SFO PHX 350 4 3 WN ORG SFO 1200 4 4 WN LAX ATL 1500 5 5 UA DFW SEA 1500 5 6 UA BOS LAX 1500 6 7 UA JFK SFO 1600 6 8 UA SFO ORD 1200 5 9 AA JFK ORD 1100 5 10 DL JFK ORD 1100 5 SELECT sum(Miles) FROM Airline WHERE ‘Origin’ = “SFO” AND Destination’ = “ORD” リレーショナル・データベースの場合 SFOからORDまでの全フライトのマイルの合計は?
  19. 19. Row ID Carrier Origin Destinat ion Miles Duration 1 AA SFO ORD 1200 4 2 AA SFO PHX 350 4 3 WN ORG SFO 1200 4 4 WN LAX ATL 1500 5 5 UA DFW SEA 1500 5 6 UA BOS LAX 1500 6 7 UA JFK SFO 1600 6 8 UA SFO ORD 1200 5 9 AA JFK ORD 1100 5 10 DL JFK ORD 1100 5 Key Value Carrier:AA 1,2,9 Dest:ORD 1,8,9,10 Carrier:W N 3,4 Carrier:UA 5,6,7,8 Carrier:DL 10 Origin:SFO 1,2,8 etc. Miles 1200 350 1200 1500 1500 1500 1600 1200 1100 1100 転置インデックス + Measure SFOからORDまでの全フライトのマイルの合計は?
  20. 20. Origin:SFO = {1,2,8} Dest:ORD = {1,8,9,10} SFOからORDまでの合計マイル数は? {1,2,8} {1,8,9,10} = {1,8} → 2 フライト Σ = 1200 + 1200 = 2400 マイル Key Value Carrier:AA 1,2,9 Dest:ORD 1,8,9,10 Carrier:W N 3,4 Carrier:UA 5,6,7,8 Carrier:DL 10 Origin:SFO 1,2,8 etc. Miles 1200 350 1200 1500 1500 1500 1600 1200 1100 1100 転置インデックス + Measure SFOからORDまでの全フライトのマイルの合計は?
  21. 21. データセットの圧縮 row carrier origin dest dist 1 AA SFO DFW 1800 2 CO SFO LAX 600 3 AA SFO ORD 1500 4 CO SFO JFK 2000 5 AA SJC DFW 1600 6 CO SJC ORD 1400 7 AA SJC LAX 600 8 CO SJC ONT 600 9 AA LAX ORD 1000 9 – レコード数 carrier:AA {1, 3, 5, 7, 9} carrier:CO {2, 4, 6, 8} dest:DFW {1, 5} dest:LAX {2, 7} dest:ONT {8} dest:ORT {3, 6, 9} 9 – レコード数 0 10 carrier:AA 5 9 4 1, 0, 4, 2 8 2 CO 4 8 3 0, 4, 2 0 8 dest:DFW 2 5 2 1, 4 5 3 LAX 2 7 2 2, 5 5 3 ONT 1 8 1 8 6 2 RD 3 9 3 0, 3, 3 Inverted Index 圧縮された Inverted Indexデータ 検索キーワード Carrier == ‘AA’ && origin == ‘SFO’ && dest in [‘DFW’, ‘LAX’]
  22. 22. SAQL ​Waveのデータセットのデータにアクセスする時に使用 ​Apache Pig Latinに影響されたクエリ言語 ​すべてのレンズ、ダッシュボードがSAQL経由でデータ取得
  23. 23. SAQL 例 ​q = load "Opportunity"; ​q = filter q by 'Stage' != "Closed Won"; ​q = group q by ('Stage', 'OpportunityOwner'); ​q = foreach q generate 'Stage' as 'Stage', 'OpportunityOwner' as 'OpportunityOwner', sum('Amount') as 'sum_Amount', avg('Amount') as 'avg_Amount'; ​q = order q by 'sum_Amount' DESC; ​q = limit q 2000;
  24. 24. クエリ・エンジン SAQLパーサー (Query Graph) Optimizer Query Executor リソースマネジャー データセット (ローカルディスク) クエリ・エンジン クライアント Salesforce Core Appサーバ データストア Wave サービス Queue クエリエンジン リソースマネージャ Data center
  25. 25. データ分析において重要な要素 ​データ分析において ​ビジュアリゼーションとインタラクションは 必要不可欠な要素 Ø 可視化の表現力と速度 Ø データの柔軟性 データ 分析 比較 絞込み 集計 並替え ズーム イン・ アウト ハイラ イト ブック マーキ ング
  26. 26. Wave UIクライアント
  27. 27. Wave UIにおける重要な理念 モジュラーな コードベース 再利用可能な コンポーネント プロダクト アグノスティック ビジュアリゼー ションの最適化
  28. 28. Wave UIにおける重要な理念 モジュラーな コードベース 再利用可能な コンポーネント プロダクト アグノスティック ビジュアリゼー ションの最適化
  29. 29. 再利用可能なコンポーネントを基礎にしたUI開発 ​再利用可能なUIコンポーネントの設計・実装、それらコンポーネントを組み合わせてUIを開発 ​再利用可能なUIコンポーネントとは • UI Viewの一部を生成 • 例えば、ボタン、フォームフィールド、レイアウトコンポーネント、パネルビュー、モーダル… • コンポーネントの動作、内部ステートをカプセル化 • 理想はステートレスなコンポーネント(つまり、コンポーネントは単にViewを生成する関数) ​Build UI with Reusable Components
  30. 30. React ​Wave ClientのUI View実装はReactを使用 ​Reactとは? FacebookからオープンソースされたハイパフォーマンスなWeb UIを作 成するためのJavascriptライブラリ
  31. 31. Reactを取り入れた理由 ​ReactはUIコンポーエントを基礎にUI作成するためのライブラリ ​Reactの一方向データフローとWaveアーキテクチャの相性が良い ​Reactの仮想DOMによるレンダリングの高速化 アセットデータ クエリ ビジュアリゼーション
  32. 32. <Explorer> <ControlBar> <MeasureBar> <GroupBar> <Groups> <Group> … <GroupAddButton> <FilterBar> <Filters> <Filter> … <FilterAddButton> <ActionsMenu> <OptionsMenu> … エキスプローラのコンポーネントツリー MeasureBar GroupBar ActionsMenuFilterBarControlBar Data Event 再利用可能なコンポーネン トを基礎に開発
  33. 33. Wave Analytics ダッシュボード Salesforce CRMダッシュボード ダッシュボード グリッドレイアウト GridLayoutコンポーネント、関連するUtilやサービスを 再利用可能に設計、実装 その結果、Salesforce CRMのダッシュボードにも再利用
  34. 34. Wave UIにおける重要な理念 モジュラーな コードベース 再利用可能な コンポーネント プロダクト アグノスティック ビジュアリゼー ションの最適化
  35. 35. Wave UI コードベース ​コードベースのモジュール化は必要不可欠 ​クライアントアプリケーテョンの開発環境も飛躍的に向上 ​Wave UIもそれら開発ツールを使用 Browserify Gulp Backbone React
  36. 36. Wave Client コードベース ​Before Wave Client/Common ETL Explorer Dashboard Éclair Lightning Dashboard Wave Lightning Dashboard
  37. 37. Wave Client コードベース ​Now and Future Wave Common Wave ETL Explorer Dashboard Éclair Query Builder Lightning Lightning Common Dashboard Reports Home App Framewor k Finder Analytics Common
  38. 38. Wave UIにおける重要な理念 モジュラーな コードベース 再利用可能な コンポーネント プロダクト アグノスティック ビジュアリゼー ションの最適化
  39. 39. プロダクトに依存しないデザイン ​取り組みの一つとして、データサービスオブジェクトのリファクタリング ​データサービスの主な役割 • 必要なデータセットメタデータのロード(API) • クエリメタデータからSAQLクエリの生成 • SAQLクエリの実行 • クエリ実行後のリスナーへの通知 • クエリエラーの際のハンドリング データサービス データセットのロード SAQLクエリ生成 クエリ実行 リスナーへの通知
  40. 40. データサービスオブジェクトのリファクタリング ​依存するサービスをデータオブジェクトから切り離す ​実行時に生成するDependencyを決定(ファクトリーメソッドなど) ​共通のインタフェースを定義 • 実行時に供給するクラスはインタフェースを実装 データサービス データセットのロード SAQLクエリ生成 クエリ実行 リスナーへの通知 ファクトリ・メソッド SAQLBuilder SOQLBuilder 他のクエリ言語(SQL) API エンドポイント を実行時に決定
  41. 41. Wave UIにおける重要な理念 モジュラーな コードベース 再利用可能な コンポーネント プロダクト アグノスティック ビジュアリゼー ションの最適化
  42. 42. Wave Lightning Wave Mobile ÉclairNG ​Javascriptベースのチャートライブラリ ​プロダクト、プラットフォームに依存しない ​Wave, Lightning Reporting & Dashboard, Wave Mobileで使用
  43. 43. ÉclairNG スタック Chart Script Javascriptによるチャートの定義(設定、インタラクションの定義) Utils、プリパッケージチャート Scene Graph API (Layout Management, Scrolling, Tweening, Scaling..) Renderer API (Common Interface) Desktop (HTML5 Canvas) iOS (Open GL ES)
  44. 44. ビジュアリゼーションの流れ in Wave アセットデータのロード(API) ChartWidget 生成 Lens StateからSAQLクエリ生成 SAQLクエリ実行 CanvasController 生成 クエリ結果からViz Model生成 チャートの表示(Éclair) Lens State ChartWidget Data Service CanvasController Viz Model Éclair WaveUI Lens API Endpoint Query API Endpoint
  45. 45. インタラクション #1 ユーザアクション (条件、グループ、指標、並び替えの追加、変更、削除) イベントハンドラーがLens State変更 Lens StateからSAQLクエリ生成 SAQLクエリ実行 CanvasControllerへ通知 クエリ結果からViz Model生成 チャートの表示(Éclair) ​ユーザアクションによるクエリシェープの変更 Lens State ChartWidget Data Service CanvasController Viz Model Éclair WaveUI Lens API Endpoint Query API Endpoint
  46. 46. インタラクション #2 ユーザアクション (チャートの変更) イベントハンドラーが 新しいCanvasController生成 クエリ結果からViz Model生成 (クエリ結果を再利用) チャートの表示(Éclair) ​ユーザインタラクションによるチャートの変更 Lens State ChartWidget Data Service CanvasController Viz Model Éclair WaveUI Lens API Endpoint Query API Endpoint
  47. 47. インタラクション #3 ユーザアクション (前/次のステートへ、初期ビューへ戻る) HistoryManagerからLens Stateを取得 Lens StateからSAQLクエリ生成(Dataサービス) QueryCacheからクエリ結果を取得 CanvasControllerへ通知 クエリ結果からViz Model生成 チャートの表示(Éclair) ​ヒストリー・ナビゲーション Lens State ChartWidget Data Service CanvasController Viz Model Éclair WaveUI HistoryManager QueryCache (ブラウザメモリ)
  48. 48. まとめ ​Waveのアーキテクチャ Ø 論理構成 Ø データセットの仕組み Ø SAQL、クエリエンジン ​Wave UI Ø モジューラなコードベース Ø 再利用可能なコンポーネントをベースにしたUI開発とその利点 Ø 特定のプロダクトに特化しないデザイン Ø ビジュアリゼーションとインタラクティブな機能の仕組み モジュラーな コードベース 再利用可能な コンポーネント プロダクト アグノスティック ビジュアリゼー ションの最適化
  49. 49. thank y u

×