Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

SalesforceでのモダンSPA開発(Mashmatrix ”Sheet"の場合)

Salesforceでのモダンspa開発(Mashmatrix ”Sheet"の場合)

SalesforceでのモダンSPA開発(Mashmatrix ”Sheet"の場合)

  1. 1. SalesforceでのモダンSPA開発 (Mashmatrix “Sheet" の場合)
  2. 2. 業務アプリケーションとSPA • SPA = Single Page Application • サーバサイドレンダリングしないWebアプリ • 画面描画のためにサーバを経由しない ⇒ ユーザ入力に対して迅速に反応 • もともと業務系アプリはSPAに向いている! • 例えばSEOはサーバサイドレンダリングでしかできないが、ほとんどの場合要件に 含まれない • しかしフロントエンドアプリ作成は面倒だった • 標準ルールの不在/職人の世界 • 大規模開発では破綻するケースも
  3. 3. 時代は変わる • JavaScriptでアプリケーションを書くための環境が整った • モジュールロードの仕組みの標準化(CommonJS)、ビルド文 化の定着(Grunt/Gulp)、パッケージマネージャの普及(npm ) • 職人技・ハックの世界 ⇒ 統制の取れた通常のWebアプリケ ーション開発が可能に
  4. 4. Salesforceへの影響 • VisualforceはよりJavaScriptフレンドリーに • apex:actionFunction ⇒ rerender (JSを隠蔽しようとしていた時 代) • JavaScript Remoting (JSの力を無視できなくなった時代) • Remote Object (もはやApexすら…?)
  5. 5. Lightning !
  6. 6. Lightningに至る道(過去形) • これからの業務アプリ構築はHTML5 / JavaScriptベースが基本になるだろう(⇐ たぶんそ の通り) • なのでSalesforceも今後はHTML5/JavaScriptでアプリを簡単に作れるようにせないかんぜ (⇐ 仰るとおり) • ということで弊社謹製のLightning Framework作ったよ(⇐ へえ。がんばったのかな?ど れどれ?) • 現在に至る()
  7. 7. なぜそうなった • フロントエンド周りの進化が早すぎた • 開発開始後、まわりの世界を取り入れようとしなかった • 「僕らはエンタープライズだから…」症候群 • 自身を存続させるためだけにやってる状態
  8. 8. Salesforce Lightning Design System (SLDS)
  9. 9. SLDSの要点 • HTML/CSSのみ • JavaScriptなし (例外: SVG4Everybody) • 参考: Bootstrap => jQuery に依存
  10. 10. SLDSでの動的振る舞いの実現方法 • Dropdown menu (:hover CSS擬似クラス) • Stateful Button • それ以外 ⇒ 全部 JavaScript コード書いてやってね !
  11. 11. SLDSでのHTMLマークアップ
  12. 12. React.js
  13. 13. Pack into Component
  14. 14. react-lightning-design-system http://stomita.github.io/react-lightning-design-system/ https://github.com/stomita/react-lightning-design-system/
  15. 15. ここまでのまとめ • JavaScriptで業務アプリ作るの結構普通になってきたね。Salesforceでも おなじだね。 • Visualforce上でスクラッチでデザインする人のためにSLDSというCSSデ ザインフレームワークが出てきたけど、まだそのままだと使いづらいね • React.JSで振る舞いも含めてコンポーネントにしてあげると使いやすい 。なので react-lightning-design-system を作ったよ。
  16. 16. Case Study : Mashmatrix Sheet
  17. 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. 18. Demo
  19. 19. Salesforceとの接続 • 環境ごとにService呼び出しのためのService Providerを作成 • Local用(JSforce呼び出し)/ Visualforce用(Remoting呼び出し )/Lightning用(AuraEnabledメソッド呼び出し) • LightningではComponentのリファレンスを初期化時に渡す必要あり • Fluxからの非同期呼び出しでは接続環境は意識しない
  20. 20. Remoting Interface /** * */ public with sharing class MsmxSheetController { @RemoteAction @AuraEnabled public static List<SObject> query(String queryJSON) { // .. } // .. }
  21. 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. 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. 23. API Failover • APIコール数の消費を減らすため、VF上ではRemotingを優先的に 利用 • Apex内からアクセスできない情報はAPI Call経由 • JSforceはSOAP APIも一部サポート(AJAX toolkitの代替に) • APIコール不可の場合は別の手段を用いる(Failover in Application Design)
  24. 24. Thanks.

×