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.

Developing SLDS Apps with React.js

1,183 views

Published on

Introduction and case study of Salesforce Lightning Design System app which is built on React.js

Published in: Software

Developing SLDS Apps with React.js

  1. 1. Developing SLDS Apps with React.js (from the case of Mashmatrix Sheet)
  2. 2. Salesforce Lightning Design System (SLDS)
  3. 3. Key Point of SLDS • Only HTML/CSS • No JavaScript (exception: SVG4Everybody) • c.f. Bootstrap => jQuery Dependency
  4. 4. Dynamic Behavior in SLDS • Dropdown menu (using :hover CSS pseudo-class) • Stateful Button • Otherwise - Do it by your own JavaScript code !
  5. 5. Markup isYour Own Responsibility
  6. 6. React.js
  7. 7. Pack into Component
  8. 8. react-lightning-design-system http://stomita.github.io/react-lightning-design-system/ https://github.com/stomita/react-lightning-design-system/
  9. 9. Case Study : Mashmatrix Sheet
  10. 10. Architecture of Mashmatrix Sheet Action CreatorStore View State callrender Reselect Action Redux Action(async) • Lightning: @AuraEnabled + enqueueAction • Visualforce: @RemoteAction +VFRemoting • Local: API + JSForce
  11. 11. Thanks.

×