Developing SLDS Apps with React.js (from the case of Mashmatrix Sheet)

Salesforce Lightning Design System (SLDS)

Key Point of SLDS

• Only HTML/CSS

• No JavaScript (exception: SVG4Everybody)

• c.f. Bootstrap => jQuery Dependency

Dynamic Behavior in SLDS

• Dropdown menu (using :hover CSS pseudo-class)

• Stateful Button

• Otherwise - Do it by your own JavaScript code !

Markup is Your Own Responsibility

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/

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

Thanks.