View
173
Download
1
Category
Preview:
Citation preview
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
Recommended