Salesforceでのモダンspa開発（Mashmatrix ”Sheet"の場合）

1. SalesforceでのモダンSPA開発
（Mashmatrix “Sheet" の場合）

2. 業務アプリケーションとSPA
• SPA = Single Page Application
• サーバサイドレンダリングしないWebアプリ
• 画面描画のためにサーバを経由しない ⇒ ユーザ入力に対して迅速に反応
• もともと業務系アプリはSPAに向いている！
• 例えばSEOはサーバサイドレンダリングでしかできないが、ほとんどの場合要件に
含まれない
• しかしフロントエンドアプリ作成は面倒だった
• 標準ルールの不在／職人の世界
• 大規模開発では破綻するケースも

3. 時代は変わる
• JavaScriptでアプリケーションを書くための環境が整った
• モジュールロードの仕組みの標準化（CommonJS）、ビルド文
化の定着（Grunt/Gulp）、パッケージマネージャの普及（npm
）
• 職人技・ハックの世界 ⇒ 統制の取れた通常のWebアプリケ
ーション開発が可能に

4. Salesforceへの影響
• VisualforceはよりJavaScriptフレンドリーに
• apex:actionFunction ⇒ rerender (JSを隠蔽しようとしていた時
代)
• JavaScript Remoting (JSの力を無視できなくなった時代)
• Remote Object (もはやApexすら…？)

5. Lightning !

6. Lightningに至る道（過去形）
• これからの業務アプリ構築はHTML5 / JavaScriptベースが基本になるだろう（⇐ たぶんそ
の通り）
• なのでSalesforceも今後はHTML5/JavaScriptでアプリを簡単に作れるようにせないかんぜ
（⇐ 仰るとおり）
• ということで弊社謹製のLightning Framework作ったよ（⇐ へえ。がんばったのかな？ど
れどれ？）
• 現在に至る（）

7. なぜそうなった
• フロントエンド周りの進化が早すぎた
• 開発開始後、まわりの世界を取り入れようとしなかった
• 「僕らはエンタープライズだから…」症候群
• 自身を存続させるためだけにやってる状態

8. Salesforce Lightning Design System
(SLDS)

9. SLDSの要点
• HTML/CSSのみ
• JavaScriptなし (例外: SVG4Everybody)
• 参考： Bootstrap => jQuery に依存

10. SLDSでの動的振る舞いの実現方法
• Dropdown menu (:hover CSS擬似クラス)
• Stateful Button
• それ以外 ⇒ 全部 JavaScript コード書いてやってね !

11. SLDSでのHTMLマークアップ

12. React.js

13. Pack into Component

14. react-lightning-design-system
http://stomita.github.io/react-lightning-design-system/
https://github.com/stomita/react-lightning-design-system/

15. ここまでのまとめ
• JavaScriptで業務アプリ作るの結構普通になってきたね。Salesforceでも
おなじだね。
• Visualforce上でスクラッチでデザインする人のためにSLDSというCSSデ
ザインフレームワークが出てきたけど、まだそのままだと使いづらいね
• React.JSで振る舞いも含めてコンポーネントにしてあげると使いやすい
。なので react-lightning-design-system を作ったよ。

16. Case Study : Mashmatrix Sheet

17. Architecture of Mashmatrix Sheet
Action
CreatorStore
View
State
callrender
Reselect
Action
Redux
Action(async)
• Lightning: @AuraEnabled + enqueueAction
• Visualforce: @RemoteAction + VFRemoting
• Local: API + JSForce

18. Demo

19. Salesforceとの接続
• 環境ごとにService呼び出しのためのService Providerを作成
• Local用（JSforce呼び出し）/ Visualforce用（Remoting呼び出し
）/Lightning用（AuraEnabledメソッド呼び出し）
• LightningではComponentのリファレンスを初期化時に渡す必要あり
• Fluxからの非同期呼び出しでは接続環境は意識しない

20. Remoting Interface
/**
*
*/
public with sharing class MsmxSheetController {
@RemoteAction
@AuraEnabled
public static List<SObject> query(String queryJSON) {
// ..
}
// ..
}

21. Initialization (Visualforce)
<apex:page docType="html-5.0"
sidebar="false"
cache="true"
controller="MsmxSheetController"
>
<link rel="stylesheet" href="{!URLFOR($Resource.MsmxSheetVendor, 'salesforce-
lightning-design-system/assets/styles/salesforce-lightning-design-system-vf.css')}" />
<link rel="stylesheet" href="{!URLFOR($Resource.MsmxSheetApp, 'styles/main.css')}" />
<script src="{!URLFOR($Resource.MsmxSheetVendor,
'jsforce/build/jsforce.min.js')}"></script>
<script src="{!URLFOR($Resource.MsmxSheetApp, 'scripts/main.js')}"></script>
<div class="msmx-tabbed-container msmx-app slds"></div>
<script>
(function() {
// ...
MsmxSheet.render('vf', document.querySelector(‘msmx-tabbed-container’), options);
})();
</script>
</apex:page>

22. Initialization (Lightning)
({
afterRender: function(cmp, evt) {
this.superAfterRender();
var options = {
component: cmp,
appResourceRoot: '/resource/MsmxSheetApp/',
vendorResourceRoot: '/resource/MsmxSheetVendor/',
};
typeof MsmxSheet !== 'undefined' && MsmxSheet.renderComponent('aura',
cmp.getElement(), options);
},
rerender: function(cmp, evt) {
// ...
}
})
MsmxSheetRenderer.js

23. API Failover
• APIコール数の消費を減らすため、VF上ではRemotingを優先的に
利用
• Apex内からアクセスできない情報はAPI Call経由
• JSforceはSOAP APIも一部サポート(AJAX toolkitの代替に)
• APIコール不可の場合は別の手段を用いる(Failover in Application
Design)

24. Thanks.