Download as PDF, PPTX
Uploaded byKenandy
Declarative User Interfaces Leveraging React, Redux and Apex Microservices
This document discusses leveraging React, Redux and Apex microservices to build a declarative user interface for Salesforce. The approach involves creating Apex microservices with a simple generic interface, an API gateway to route requests, and metadata-driven UI archetypes and components. This architecture promotes loose coupling, reusability, and reduces development lifecycles. The user interface is built with React and Redux for predictable state management. Apex microservices handle the backend logic. This provides a modern approach to building Salesforce user interfaces.
Declarative User Interfaces Leveraging React, Redux and Apex Microservices
- 1. Declarative User InterfacesLeveraging React, Redux and Apex Microservices
- 2. Mark Masterson Ryan Sieve weare here because we like to give presentations
- 3. @MarkMastersonSF @RyanSieve we are herebecause we like to give presentations @Kenandy
- 4.
- 5. Motivations Revamped UI API firstmentality Separate UI and back-end concerns Promote loosely coupled, reusable Apex code Reduce overall development lifecycles
- 6. Approach Apex Microservices API Gateway Metadatadriven UI Archetypes Component Driven UI
- 8. Apex Microservices Simple GenericInterface Receives payload object from requestor Returns successful boolean and response payload object Sync or Async (Via Queueable) Component driven UI
- 9.
- 10. API Gateway Custom MetadataAPI Gateway Simple, packageable Embedded namespace considerations
- 11.
- 12.
- 13.
- 14. UI Archetypes Record Detail FormFields Related Lists Metadata Page Layouts Fieldsets Search Layout Compact Layout
- 15. UI Archetypes Metadata Header withLines Form Fields Lines Related Lists Record Layout Fieldsets Search Layout Compact Layout Schema
- 16. UI Archetypes Metadata Lists, RelatedList, Hierarchal List Form Fields Related Lists Filters Keylist Layout List View Record Layout Related Lists Schema
- 17.
- 18. React Virtual DOM Large Community Reactabular SDLC HotReload Local Development Javascript unit testing frameworks
- 19. Redux Predictable state management Unidirectionaldata flow Reducers Dovetail with API Gateway
- 20. UI Components React Componentspecific to each Salesforce field type Higher order components for Archetypes Factory functions
- 21.
- 22.
- 23. Running In Visualforce Page Detailand List overrides Single controller with redirects Lightning Lightning containers once GA Layer in Lightning Events over time Looking to adopt Lightning Data Service
- 24. Development Lifecycle Local API Gatewaypoints to mock files within project Hot Reload Feature sketch-in Hybrid API Gateway via REST to interact with Apex Microservices Run application locally, interact with Salesforce org metadata and database Hot Reload Fully fledged interaction with Salesforce Server Webpack module bundler Gulp deployment of Static Resources
- 25. Testability Karma (test runner) Mocha(test library/construct) Chai (assertions) Sinon (spy utilities, observe variable assignment) Phantom (headless web browser for testing) Istanbul (test coverage reporting)
- 26.