Upload
james-kent
View
226
Download
1
Embed Size (px)
Citation preview
Behind the Scenes of SegmentryDeveloping for Lightning and Classic using ReactJS and VisualforceJames Kent [email protected]
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