O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

2.531 visualizações

Publicada em

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

Publicada em: Internet
  • Hi All, We are planning to start new Salesforce Online batch on this week... If anyone interested to attend the demo please register in our website... For this batch we are also provide everyday recorded sessions with Materials. For more information feel free to contact us : siva@keylabstraining.com. For Course Content and Recorded Demo Click Here: http://www.keylabstraining.com/salesforce-online-training-hyderabad-bangalore
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

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.

×