declarative user interfaces leveraging react, redux and apex microservices
TRANSCRIPT
Declarative User Interfaces Leveraging React, Redux and Apex Microservices
Mark MastersonRyan Sievewe are here because we like to give presentations
@MarkMastersonSF@RyanSievewe are here because we like to give presentations
@Kenandy
WHATare we doing?
MotivationsRevamped UIAPI first mentalitySeparate UI and back-end concernsPromote loosely coupled, reusable Apex code
Reduce overall development lifecycles
ApproachApex MicroservicesAPI GatewayMetadata driven UI ArchetypesComponent Driven UI
Apex MicroservicesSimple Generic Interface
Receives payload object from requestor
Returns successful boolean and response payload objectSync or Async (Via Queueable)Component driven UI
Apex Microservices
API GatewayCustom Metadata API GatewaySimple, packageableEmbedded namespace
considerations
API Gateway
API Gateway
API Gateway
UI ArchetypesRecord DetailForm FieldsRelated Lists
MetadataPage LayoutsFieldsetsSearch LayoutCompact Layout
UI Archetypes
Metadata
Header with LinesForm FieldsLinesRelated Lists Record Layout Fieldsets
Search LayoutCompact Layout Schema
UI Archetypes
Metadata
Lists, Related List, Hierarchal ListForm FieldsRelated ListsFilters Keylist Layout
List ViewRecord Layout Related ListsSchema
WHYReact and Redux?
ReactVirtual DOMLarge CommunityReactabularSDLCHot ReloadLocal DevelopmentJavascript unit testing frameworks
ReduxPredictable state managementUnidirectional data flowReducers Dovetail with API
Gateway
UI ComponentsReact Component specific to
each Salesforce field typeHigher order components for
ArchetypesFactory functions
UI Components
UI Components
Running InVisualforcePage Detail and List overridesSingle controller with redirects
LightningLightning containers once GALayer in Lightning Events over timeLooking to adopt Lightning Data Service
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
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)
thank you
@MarkMastersonSF@RyanSieve
@Kenandy