Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Developing a Web App with
Heroku Connect
Case Study https://sif.illuminate.org
Mars Hall
Customer Facing Architect, Heroku...
Hi! I’m Mars 👽💫🌎
• Web developer since 1997
• Integrated web sites/apps with Salesforce
countless times throughout the yea...
Becoming an icon
The San Francisco Bay Lights returned in 2016 as a permanent installation
+
Illuminate Salesforce.org
Public works of art Donor management
Create personal connection with the art
Through dedication of individual Bay Lights
“Dedicated to my love”
Develop a custom app
25,000 lights / 3 contribution levels
Donate to dedicate a light
Each personalizable with photo & tex...
Design requirements
Creativity thrives under constraints
Custom “Bay Lights” experience
Design requirements
• Dedicate Your Own Light call to action
• Realistic mapping of lights ...
Integrate with existing technology
Design requirements
• Existing non-profit [NPSP] Salesforce org
• Donor/Donation data
•...
Launch fast
Design requirements
• Five-week timeline
• Tiny development team
• Elegant, functional end-product
• Discover ...
Architecture
The design solution
Universal web frontend
Heroku Connect
Salesforce backend
Responsive React JavaScript app ...
Simple can be harder than complex:
You have to work hard to get your thinking clean,
to make it simple.
— Steve Jobs
Live demo
https://sif.illuminate.org
• Bay Light dedications & search
• Deep zoom UI
• Donation & personalization
• Donor ...
https://github.com/heroku/create-render-4r
Model the app’s data with Salesforce objects
Minimize the transformation of data
Bay Lights data model
All sObjects all the time!
• Opportunity
• Account
• Contact
• custom Payment (from Non-Profit Start...
https://devcenter.heroku.com/articles/herokuconnect
Live demo
Heroku Connect Add-on
Heroku Connect / authorization
Data synchronization as a single user
Heroku Connect / authorization
Data synchronization as a single user
Before authorization
• Create a distinct, limited Con...
Heroku Connect / authorization
Data synchronization as a single user
The authorizing user
• Appears as actor on records it...
Heroku Connect / data flow
Built on Force.com APIs: SOAP, bulk, & streaming
Heroku Connect / data flow
Design for data locality with
the Postgres database.
Synchronization with
Salesforce is not rea...
Heroku Connect / data flow
Design reactive behaviors
with the Postgres database.
Asynchronously call Heroku
app functions ...
Heroku Connect / related objects
Synchronize 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 ...
Iterating on the Salesforce data model
Enabling local development
Iterating on the Salesforce data model
• Modify the Salesforce setup
• Create or customize objects
• Update the Heroku Con...
Dev demo
Iterating on the data model
Add an “Anniversary Date” to Bay Light dedications.
• Add a custom field
• Update Con...
Pipelines & org integration
Test 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 branc...
Dev demo
Deploy app for testing
• Push to master (pipeline auto deploy)
• Load Connect config (depending on env)
• Demo th...
Unified admin experience
Salesforce as the admin UI
Unified admin experience
Leverages existing Salesforce knowledge
No additional app-specific admin UI
Allow devs to focus o...
Unified admin demo
• Bay Light detail
• Secret personalization link
• PayPal transaction
thank y u
Mars Hall
Customer Facing Architect, Heroku
@marsi
Lighting up the Bay, Real-World App Cloud
Upcoming SlideShare
Loading in …5
×

Lighting up the Bay, Real-World App Cloud

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.

  • Be the first to comment

  • Be the first to like this

Lighting up the Bay, Real-World App Cloud

  1. 1. Developing a Web App with Heroku Connect Case Study https://sif.illuminate.org Mars Hall Customer Facing Architect, Heroku @marsi
  2. 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. 3. Becoming an icon The San Francisco Bay Lights returned in 2016 as a permanent installation
  4. 4. + Illuminate Salesforce.org Public works of art Donor management
  5. 5. Create personal connection with the art Through dedication of individual Bay Lights “Dedicated to my love”
  6. 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
  7. 7. Design requirements Creativity thrives under constraints
  8. 8. Custom “Bay Lights” experience Design requirements • Dedicate Your Own Light call to action • Realistic mapping of lights on bridge • Beautiful, inspiring interaction • Searchable • Shareable • Dedication keepsake/certificate
  9. 9. Integrate with existing technology Design requirements • Existing non-profit [NPSP] Salesforce org • Donor/Donation data • Admin UI • Existing non-profit PayPal account • Accept donations
  10. 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. 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. 12. Simple can be harder than complex: You have to work hard to get your thinking clean, to make it simple. — Steve Jobs
  13. 13. Live demo https://sif.illuminate.org • Bay Light dedications & search • Deep zoom UI • Donation & personalization • Donor certificates
  14. 14. https://github.com/heroku/create-render-4r
  15. 15. Model the app’s data with Salesforce objects Minimize the transformation of data
  16. 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)
  17. 17. https://devcenter.heroku.com/articles/herokuconnect
  18. 18. Live demo Heroku Connect Add-on
  19. 19. Heroku Connect / authorization Data synchronization as a single user
  20. 20. Heroku Connect / authorization Data synchronization as a single user Before authorization • Create a distinct, limited Connect user • Avoid using “System Administrator”
  21. 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. 22. Heroku Connect / data flow Built on Force.com APIs: SOAP, bulk, & streaming
  23. 23. Heroku Connect / data flow Design for data locality with the Postgres database. Synchronization with Salesforce is not real-time.
  24. 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. 25. Heroku Connect / related objects Synchronize records for master-detail, many-to-many, & lookup
  26. 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. 27. Iterating on the Salesforce data model Enabling local development
  28. 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. 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. 30. Pipelines & org integration Test new Heroku app features with Salesforce
  31. 31. Conventional deployment environments Development Staging Production Salesforce sandboxes…............. Salesforce org
  32. 32. Development Staging Production Heroku pipeline Review apps Salesforce sandboxes…............. Salesforce org feature branches master release tags release tags change sets live data git
  33. 33. Dev demo Deploy app for testing • Push to master (pipeline auto deploy) • Load Connect config (depending on env) • Demo the new feature
  34. 34. Unified admin experience Salesforce as the admin UI
  35. 35. Unified admin experience Leverages existing Salesforce knowledge No additional app-specific admin UI Allow devs to focus on the app
  36. 36. Unified admin demo • Bay Light detail • Secret personalization link • PayPal transaction
  37. 37. thank y u Mars Hall Customer Facing Architect, Heroku @marsi

×