Managing a Salesforce Lightning Application state using Flux architecture

1. LightningComponents
State

2. LightningApp
Demo

3. LightningApp
Demo

4. Application
DesignSteps
 The Components
 The Events
 The State

5. Step 1:The
Components
Searchable Table DetailView

6. Step 1:The
Components

7. Step 1:The
Components
Searchable Table DetailView
1
2
1: Search Box
2:Table
3: Searchable Table
4: Detail View
3 4

8. Step 2:The
Events
Emitters
1
2
1: Search Box: OnSearchValueChanged
2:Table: OnCaseSelected
4: Detail View: OnCaseUpdated
3 4

9. Step 2:The
Events
Receivers
1
2
2:Table : OnSearchValueChanged, OnCaseUpdated
4: Detail View Event: OnCaseSelected
3 4

10. Step 2:The
Events
1
2
Salesforce Controller
3 45

11. Step 3:The
State
 Flux Design Pattern (From Facebook)
 One Only State
 ContainerComponents
 PresentationalComponents
 Actions

12. Step 3:State –
Presentational
Component
Searchable Table: OnSearchValueChanged
Searchable Table: OnCaseSelected

13. Step 1:State –
Container
Component
- CASE_LIST
- CASE_SELECTED
Dispatch Action

14. Step 3:
Resources
 GitHub : https://github.com/kofijohnson/LightningFlux
 Dreamforce Presentation - Fluxy Lightning :
https://www.youtube.com/watch?v=fLfeMAk-Up4
 Smart and Dumb Component in React:
https://jaketrent.com/post/smart-dumb-components-react/

15. ThankYou!