declarative user interfaces leveraging react, redux and apex microservices
TRANSCRIPT
![Page 1: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/1.jpg)
Declarative User Interfaces Leveraging React, Redux and Apex Microservices
![Page 2: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/2.jpg)
Mark MastersonRyan Sievewe are here because we like to give presentations
![Page 3: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/3.jpg)
@MarkMastersonSF@RyanSievewe are here because we like to give presentations
@Kenandy
![Page 4: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/4.jpg)
WHATare we doing?
![Page 5: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/5.jpg)
MotivationsRevamped UIAPI first mentalitySeparate UI and back-end concernsPromote loosely coupled, reusable Apex code
Reduce overall development lifecycles
![Page 6: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/6.jpg)
ApproachApex MicroservicesAPI GatewayMetadata driven UI ArchetypesComponent Driven UI
![Page 7: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/7.jpg)
![Page 8: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/8.jpg)
Apex MicroservicesSimple Generic Interface
Receives payload object from requestor
Returns successful boolean and response payload objectSync or Async (Via Queueable)Component driven UI
![Page 9: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/9.jpg)
Apex Microservices
![Page 10: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/10.jpg)
API GatewayCustom Metadata API GatewaySimple, packageableEmbedded namespace
considerations
![Page 11: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/11.jpg)
API Gateway
![Page 12: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/12.jpg)
API Gateway
![Page 13: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/13.jpg)
API Gateway
![Page 14: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/14.jpg)
UI ArchetypesRecord DetailForm FieldsRelated Lists
MetadataPage LayoutsFieldsetsSearch LayoutCompact Layout
![Page 15: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/15.jpg)
UI Archetypes
Metadata
Header with LinesForm FieldsLinesRelated Lists Record Layout Fieldsets
Search LayoutCompact Layout Schema
![Page 16: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/16.jpg)
UI Archetypes
Metadata
Lists, Related List, Hierarchal ListForm FieldsRelated ListsFilters Keylist Layout
List ViewRecord Layout Related ListsSchema
![Page 17: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/17.jpg)
WHYReact and Redux?
![Page 18: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/18.jpg)
ReactVirtual DOMLarge CommunityReactabularSDLCHot ReloadLocal DevelopmentJavascript unit testing frameworks
![Page 19: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/19.jpg)
ReduxPredictable state managementUnidirectional data flowReducers Dovetail with API
Gateway
![Page 20: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/20.jpg)
UI ComponentsReact Component specific to
each Salesforce field typeHigher order components for
ArchetypesFactory functions
![Page 21: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/21.jpg)
UI Components
![Page 22: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/22.jpg)
UI Components
![Page 23: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/23.jpg)
Running InVisualforcePage Detail and List overridesSingle controller with redirects
LightningLightning containers once GALayer in Lightning Events over timeLooking to adopt Lightning Data Service
![Page 24: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/24.jpg)
Development Lifecycle
LocalAPI Gateway points to mock files within projectHot ReloadFeature sketch-in
HybridAPI Gateway via REST to interact with Apex MicroservicesRun application locally, interact with Salesforce org metadata and databaseHot ReloadFully fledged interaction with Salesforce
ServerWebpack module bundler
Gulp deployment of Static Resources
![Page 25: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/25.jpg)
TestabilityKarma (test runner)
Mocha (test library/construct)
Chai (assertions)
Sinon (spy utilities, observe variable assignment)
Phantom (headless web browser for testing)
Istanbul (test coverage reporting)
![Page 26: Declarative User Interfaces Leveraging React, Redux and Apex Microservices](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a1a3171a28abe6468b4f1b/html5/thumbnails/26.jpg)
thank you
@MarkMastersonSF@RyanSieve
@Kenandy