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

業務アプリケーションと SPA• SPA = Single Page Application

• サーバサイドレンダリングしない Web アプリ• 画面描画のためにサーバを経由しない ⇒ ユーザ入力に対して迅速に反応

• もともと業務系アプリは SPA に向いている！• 例えば SEO はサーバサイドレンダリングでしかできないが、ほとんどの場合要件に含まれない

• しかしフロントエンドアプリ作成は面倒だった• 標準ルールの不在／職人の世界• 大規模開発では破綻するケースも

時代は変わる• JavaScript でアプリケーションを書くための環境が整った

• モジュールロードの仕組みの標準化（ CommonJS ）、ビルド文化の定着（ Grunt/Gulp ）、パッケージマネージャの普及（ npm ）

• 職人技・ハックの世界 ⇒ 統制の取れた通常の Web アプリケーション開発が可能に

Salesforce への影響• Visualforce はより JavaScript フレンドリーに

• apex:actionFunction ⇒ rerender (JS を隠蔽しようとしていた時代 )

• JavaScript Remoting (JS の力を無視できなくなった時代 )• Remote Object ( もはや Apex すら…？ )

Lightning !

Lightning に至る道（過去形）• これからの業務アプリ構築は HTML5 / JavaScript ベースが基本になるだろう（⇐ たぶん

その通り）• なので Salesforce も今後は HTML5/JavaScript でアプリを簡単に作れるようにせないか

んぜ（⇐ 仰るとおり）• ということで弊社謹製の Lightning Framework 作ったよ（⇐ へえ。がんばったのか

な？どれどれ？）• 現在に至る（）

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

Salesforce Lightning Design System (SLDS)

SLDS の要点• HTML/CSS のみ• JavaScript なし ( 例外 : SVG4Everybody)

• 参考： Bootstrap => jQuery に依存

SLDS での動的振る舞いの実現方法• Dropdown menu (:hover CSS 擬似クラス )

• Stateful Button

• それ以外 ⇒ 全部 JavaScript コード書いてやってね !

SLDS での HTML マークアップ

React.js

Pack into Component

react-lightning-design-system

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

ここまでのまとめ• JavaScript で業務アプリ作るの結構普通になってきたね。 Salesforce

でもおなじだね。• Visualforce 上でスクラッチでデザインする人のために SLDS という

CSS デザインフレームワークが出てきたけど、まだそのままだと使いづらいね

• React.JS で振る舞いも含めてコンポーネントにしてあげると使いやすい。なので react-lightning-design-system を作ったよ。

Case Study : Mashmatrix Sheet

Architecture of Mashmatrix Sheet

ActionCreatorStore

View

State

callrender

Reselect

Action

Redux

Action(async)

• Lightning: @AuraEnabled + enqueueAction

• Visualforce: @RemoteAction + VFRemoting

• Local: API + JSForce

Demo

Salesforce との接続• 環境ごとに Service 呼び出しのための Service Provider を

作成• Local 用（ JSforce 呼び出し） / Visualforce 用（ Remoting

呼び出し） /Lightning 用（ AuraEnabled メソッド呼び出し）• Lightning では Component のリファレンスを初期化時に渡す必要あり

• Flux からの非同期呼び出しでは接続環境は意識しない

Remoting Interface/** * */public with sharing class MsmxSheetController {

@RemoteAction @AuraEnabled public static List<SObject> query(String queryJSON) { // .. }

// ..

}

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>

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

API Failover• API コール数の消費を減らすため、 VF 上では Remoting を優先的

に利用• Apex内からアクセスできない情報は API Call 経由

• JSforce は SOAP API も一部サポート (AJAX toolkit の代替に )

• API コール不可の場合は別の手段を用いる (Failover in Application Design)

Thanks.