declarative user interfaces leveraging react, redux and apex microservices

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