Developing SLDS Apps with React.js

  • Published on
    13-Apr-2017

  • View
    933

  • Download
    2

Transcript

  • 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/

    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.