Developing a Web App with Heroku ConnectCase Study https://sif.illuminate.org

Mars HallCustomer Facing Architect, Heroku

@marsi

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.

Becoming an iconThe San Francisco Bay Lights returned in 2016 as a permanent installation

+

Illuminate Salesforce.orgPublic works of art Donor management

Create personal connection with the artThrough dedication of individual Bay Lights

“Dedicated to my love”

Develop a custom app25,000 lights / 3 contribution levelsDonate to dedicate a lightEach personalizable with photo & text

Luminary

Guiding Light

Shining Light

Design requirementsCreativity thrives under constraints

Custom “Bay Lights” experienceDesign requirements

• Dedicate Your Own Light call to action• Realistic mapping of lights on bridge• Beautiful, inspiring interaction• Searchable• Shareable• Dedication keepsake/certificate

Integrate with existing technologyDesign requirements

• Existing non-profit [NPSP] Salesforce org• Donor/Donation data• Admin UI• Existing non-profit PayPal account• Accept donations

Launch fastDesign requirements

• Five-week timeline• Tiny development team• Elegant, functional end-product• Discover how far we can push the “Bay Lights” experience

ArchitectureThe 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

Simple can be harder than complex:You have to work hard to get your thinking clean, to make it simple.— Steve Jobs

Live demohttps://sif.illuminate.org

• Bay Light dedications & search• Deep zoom UI• Donation & personalization• Donor certificates

https://github.com/heroku/create-render-4r

Model the app’s data with Salesforce objectsMinimize the transformation of data

Bay Lights data modelAll sObjects all the time!

•Opportunity• Account• Contact• custom Payment (from Non-Profit Starter Pack)• custom Bay Light (created for this app)

https://devcenter.heroku.com/articles/herokuconnect

Live demoHeroku Connect Add-on

Heroku Connect / authorizationData synchronization as a single user

Heroku Connect / authorizationData synchronization as a single user

Before authorization• Create a distinct, limited Connect user• Avoid using “System Administrator”

Heroku Connect / authorizationData synchronization as a single user

The authorizing user• Appears as actor on records it touches• Subject to permissions & validations

Heroku Connect / data flowBuilt on Force.com APIs: SOAP, bulk, & streaming

Heroku Connect / data flow

Design for data locality with the Postgres database.

Synchronization with Salesforce is not real-time.

Heroku Connect / data flow

Design reactive behaviorswith the Postgres database.

Asynchronously call Herokuapp functions as data changes.

Change in Salesforce data

Connect synchronizes

Postgres trigger sends notification

App listens for Postgres notification

Heroku Connect / related objectsSynchronize records for master-detail, many-to-many, & lookup

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.

Iterating on the Salesforce data modelEnabling local development

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

Dev demoIterating 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

Pipelines & org integrationTest new Heroku app features with Salesforce

Conventional deployment environments

Development Staging Production

Salesforce sandboxes…............. Salesforce org

Development Staging Production

Heroku pipeline

Review apps

Salesforce sandboxes….............

Salesforce org

feature branches master release tags release tags

change sets

live data

git

Dev demoDeploy app for testing• Push to master (pipeline auto deploy)• Load Connect config (depending on env)• Demo the new feature

Unified admin experienceSalesforce as the admin UI

Unified admin experienceLeverages existing Salesforce knowledge

No additional app-specific admin UI

Allow devs to focus on the app

Unified admin demo

• Bay Light detail• Secret personalization link• PayPal transaction

thank y uMars HallCustomer Facing Architect, Heroku

@marsi