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 jkent@blueengine.com.au

Start having more meaningfulconversations with your Customers.

The Communications Timeline

Strategy

☁Salesforce

Audience Fulfilment Analytics

Aggregations Relationships Inclusions

1 2 3What it does

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

Why ReactJS?

The challenge of developingfor Classic and Lightning

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

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)

Lightning Experience

Classic Experience

Quick Demo

Examples of:BuilderDialogs

Processing

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

Simple ReactJS Example

Segmentry ReactJS Component Example

Communication Architecture

VisualForce

Page

Client Application Server Application

☁Salesforce

Apex Web ServicesController

RemoteAction

Static Resource

Webpack-ed, ReactJS Application

Build Pipeline - Client

ES6 JSXSource Code ☁Salesforce

Babel TranspilerSASS CSS Compiler

UglifyJS

Webpack

gulp-force-developer

Gulp

Build Pipeline - Server

Salesforce Assets ☁Salesforce

gulp-force-developer

Gulp

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

References

get sentryJavascript bug tracking

https://sentry.io/welcome/

webpackbabel

others…Node.js development tools

Screenshot-BasedDemo

Segmentary Demo

Segmentary Demo

Segmentary Demo

Segmentary Demo

Segmentary Demo

Segmentary Demo