25
ehind the Scenes of Segmentry eveloping for Lightning and Classic using ReactJS and Visualforce ames Kent [email protected]

Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

Embed Size (px)

Citation preview

Page 1: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

Behind the Scenes of SegmentryDeveloping for Lightning and Classic using ReactJS and VisualforceJames Kent [email protected]

Page 2: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

Start having more meaningfulconversations with your Customers.

Page 3: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

The Communications Timeline

Strategy

☁Salesforce

Audience Fulfilment Analytics

Page 4: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

Aggregations Relationships Inclusions

1 2 3What it does

Page 5: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

Example: Donors

Donations:

Last 6 Months

Contacts w/Donatio

ns:$500 to

$2K

Contacts w/Donatio

ns:$2K or more

Recent Donations Mid-Value Active Donors

High-Value Active Donors

☁Salesforce

Page 6: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

Why ReactJS?

The challenge of developingfor Classic and Lightning

Page 7: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

Why ReactJS?2015: Lightning development support was rudimentary Transition to Lightning UI begins

Angular2 was coming but not released

Any App needed to support Lightning & Classic

ReactJS was maturing, is fast and has a high chance of future skills availability

Salesforce open sourced the Lightning Design System (SLDS)

The community had wrapped SLDS as ReactJS components

Page 8: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

ReactJS DisadvantagesComplex to learn- Multiple concepts such as ES6, Babel, Webpack & Redux

Doesn’t have access to Lightning components- You lose things like Chatter / Following unless you build them

If you need it, you build it…. most of the time

It isn’t Lightning … which is a good and bad thing.

All this equals….

Long development time (until you have experience)

Page 9: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

Lightning Experience

Page 10: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

Classic Experience

Page 11: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

Quick Demo

Examples of:BuilderDialogs

Processing

(A slide based version is a the end of the deck….)

Page 12: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

Simple ReactJS Example

Page 13: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

Segmentry ReactJS Component Example

Page 14: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

Communication Architecture

VisualForce

Page

Client Application Server Application

☁Salesforce

Apex Web ServicesController

RemoteAction

Static Resource

Webpack-ed, ReactJS Application

Page 15: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

Build Pipeline - Client

ES6 JSXSource Code ☁Salesforce

Babel TranspilerSASS CSS Compiler

UglifyJS

Webpack

gulp-force-developer

Gulp

Page 16: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

Build Pipeline - Server

Salesforce Assets ☁Salesforce

gulp-force-developer

Gulp

Page 17: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

References

react-lightning-design-systemSLDS implemented in ReactJS

https://github.com/mashmatrix/react-lightning-design-system

gulp-force-developerA gulp plugin that flattens projects into a SFDC-package format and uploads

https://github.com/jkentjnr/gulp-force-developer https://github.com/jkentjnr/sfdc-gulp-travisci-boilerplate

Page 18: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

References

get sentryJavascript bug tracking

https://sentry.io/welcome/

webpackbabel

others…Node.js development tools

Page 19: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

Screenshot-BasedDemo

Page 20: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

Segmentary Demo

Page 21: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

Segmentary Demo

Page 22: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

Segmentary Demo

Page 23: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

Segmentary Demo

Page 24: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

Segmentary Demo

Page 25: Segmentry: Developing for Salesforce Lightning and Classic using ReactJS and Visualforce

Segmentary Demo