Effective web apps use data from Salesforce to drive user engagement. In this real-world case study https://sif.illuminate.org, you'll learn patterns that leverage Salesforce data through Heroku Connect to deliver a modern consumer web app, key design considerations and the app development model to build these kinds of apps.
Developing a Web App with Heroku Connect - Case Study
1. Developing a Web App with
Heroku Connect
Case Study https://sif.illuminate.org
Mars Hall
Customer Facing Architect, Heroku
@marsi
2. Hi! I’m Mars 👽💫🌎
• Web developer since 1997
• Integrated web sites/apps with Salesforce
countless times throughout the years
• Joined Heroku/Salesforce one-year ago
• Started out this journey knowing the basics of
Force.com REST API.
3. Becoming an icon
The San Francisco Bay Lights returned in 2016 as a permanent installation
5. Create personal connection with the art
Through dedication of individual Bay Lights
“Dedicated to my love”
6. Develop a custom app
25,000 lights / 3 contribution levels
Donate to dedicate a light
Each personalizable with photo & text
Luminary
Guiding Light
Shining Light
10. Launch fast
Design requirements
• Five-week timeline
• Tiny development team
• Elegant, functional end-product
• Discover how far we can push the “Bay Lights” experience
11. Architecture
The design solution
Universal web frontend
Heroku Connect
Salesforce backend
Responsive React JavaScript app developed on Heroku
Donation & Bay Light data modeled directly in Salesforce
Salesforce data synchronized with Postgres database
12. Simple can be harder than complex:
You have to work hard to get your thinking clean,
to make it simple.
— Steve Jobs
15. Model the app’s data with Salesforce objects
Minimize the transformation of data
16. Bay Lights data model
All sObjects all the time!
• Opportunity
• Account
• Contact
• custom Payment (from Non-Profit Starter Pack)
• custom Bay Light (created for this app)
19. Heroku Connect / authorization
Data synchronization as a single user
20. Heroku Connect / authorization
Data synchronization as a single user
Before authorization
• Create a distinct, limited Connect user
• Avoid using “System Administrator”
21. Heroku Connect / authorization
Data synchronization as a single user
The authorizing user
• Appears as actor on records it touches
• Subject to permissions & validations
22. Heroku Connect / data flow
Built on Force.com APIs: SOAP, bulk, & streaming
23. Heroku Connect / data flow
Design for data locality with
the Postgres database.
Synchronization with
Salesforce is not real-time.
24. Heroku Connect / data flow
Design reactive behaviors
with the Postgres database.
Asynchronously call Heroku
app functions as data changes.
Change in Salesforce data
Connect synchronizes
Postgres trigger sends notification
App listens for Postgres notification
25. Heroku Connect / related objects
Synchronize records for master-detail, many-to-many, & lookup
26. Heroku Connect / related objects
ExternalId__c on each related object
• External ID data type
• Connect handles cascading creation of
related records
• Use UUIDs for data portability
• Populate reactively for records originating
in Salesforce.
27. Iterating on the Salesforce data model
Enabling local development
28. Iterating on the Salesforce data model
• Modify the Salesforce setup
• Create or customize objects
• Update the Heroku Connect mapping
• Capture the Connect config
• Database structure from Postgres
• Connect mappings “config.json”
• Locally load the database structure
• Develop new functionality
29. Dev demo
Iterating on the data model
Add an “Anniversary Date” to Bay Light dedications.
• Add a custom field
• Update Connect mapping
• Capture Connect config & DB structure
• Load for local work
30. Pipelines & org integration
Test new Heroku app features with Salesforce