Javascript-heavy Salesforce Applications

JavaScript-heavy
Salesforce Applications
David Meyer
Technical Architect, Appirio
dmeyer@appirio.com
Andrew Davis
Consultant, Appirio
adavis@appirio.com

The role of JavaScript in Salesforce
JS is the ‘last mile’ between Salesforce and users (it already powers much
of the Salesforce UI)
The relevance of JS continues to grow (Angular, node.js, mongoDB, etc.)
Salesforce continues to expand the options for using JavaScript (Lightning
Components, Lightning Experience)

Justifications: When to go JavaScript-heavy?
If you need a highly-customized and responsive UI
If you need/want to use JS Frameworks (Angular, Backbone, etc.)
To achieve tight integration with other JS tools or web services
To bypass Salesforce governor limits
To make more complex asynchronous calls than is possible with Apex

Sample uses of JavaScript in the AOL Support Console
  Account info derived
from back-end systems
  Dynamically-sourced
customer offers
 Displaying information from backend systems using browser-based REST APIs

  Entirely custom
JavaScript applications
can be included in SFDC
  … that draw data from
external systems
  … and allow purchases
and other actions to be
performed on those
external systems
Sample uses of JavaScript in the AOL Support Console
 Embedding entirely custom apps inside of Salesforce

Salesforce-JavaScript Interaction
Behind-the-scenes: Visualforce compiles down to HTML and JavaScript
Tools you can use:
• Remote Objects (JS data structures that mirror the SFDC database)
• Remote Actions (Defined in Apex, invoked from JS using JS callbacks)
• Action Methods (Action Functions, Action Support, Action Pollers)
• REST web services (Salesforce provides many and lets you write your own too)
• Lightning Components (learn more elsewhere)
• Tip: exchange complex objects between Apex and JS using JSON.de/serialize()
• Tip: overcome cross-org limitations by using JSONP or CORS-enabled services

Salesforce-JavaScript Interaction
How to pass control and data back and forth

JavaScript Concepts
Some core ideas to help Salesforce developers

JavaScript Concepts
Most developers know some JavaScript
It’s worth getting to know it well!
What we’ll touch on:
• Object-oriented JavaScript (properties, methods, protoypes)
• Asynchronous JavaScript: (callbacks and promises)
• Variable scope in JavaScript (scope, closures, namespacing)

Selecting Elements in Visualforce Pages
The Id that Visualforce gave them when it renders your pageThe Id you gave to your elements
Try this method instead (this also works in CSS)These methods won’t work to select this element

Minimize use of global variables
Having all of your variables in the global scope is poor practice, makes debugging harder, and there are
950 global variables used in Salesforce that your variable names might conflict withIdeally, create a single global “namespace” object and make your code into its methods and properties

Group Related Variables into Objects
JSON.parse and JSON.stringify provide an elegant way to pass complex data

Understanding Variable Scope and Closures

Promises and the jQuery Deferred Object
Deferred objects allow for concise and clear expression of how asynchronous requests should be handled

Debugging JavaScript using Chrome DevTools
Getting to know the capabilities of Chrome DevTools or Firebug is essential
Capabilities of DevTools:
• Inspect and modify HTML, CSS, JS, browser data
• Monitor network traffic and page rendering timeline
• Set breakpoints and step through JS execution
• Emulate devices and network speeds
• Profile and Audit your JavaScript and page loads
DevTools can give you complete visibility into every aspect of your JS

Unit Testing JavaScript on Salesforce
Setting up a unit testing framework and preparing your code

Unit testing JavaScript on Salesforce
Why unit test your JavaScript?
Setting up a unit testing stack: Node-Karma-Mocha-Chai (locally or in CI)
Preparing your code:
• Try to move all of your JS into static resources (this can also speed page load)
• But {!controllerBindings} need to stay on the Visualforce page
• Make sure your code is testable:
• Testable methods need to be globally-accessible
• Emphasize discrete, independent functions that don’t depend on global values
Write unit tests using Mocha and Chai syntax with Sinon for stubs/mocks

Sample Unit Testing Stack
For installing
dependenciesPlatform
Test Runner
(Creates a web server)
Assertion Syntax
assert.typeOf(foo, 'string');
assert.equal(foo, 'bar');
assert.lengthOf(foo, 3);
Mocks & Stubs
var callback = sinon.stub();
callback.withArgs(42).returns(1);
callback.withArgs(1).throws("TypeError");
Testing & Reporting
(The core test framework)
describe('testFn Suite', function () {
it('should return true', function () {
assert.equal(true, testFn() );
});
});

Unit testing stack setup (on your machine)
1.  Install Node.js on your development machine(s).
2.  Grab our code at goo.gl/fMFrm1 (github.com/abd3/DF15-JS-Heavy-Salesforce)
3.  Copy these files from our sample project into yours and customize as needed:
a.  /package.json - Node.js will use this to get all the packages you need
b.  /karma.conf.js - The configuration file for Karma (which files to test, etc.)
c.  /test/* - The actual unit tests used in our sample project
4.  In the root of your development directory (where package.json is installed) run
the following one-time installation command from the command line:
npm install
5.  Run the following code from the command-line every time you want to start the
karma test runner:
./node_modules/karma/bin/karma start karma.conf.js
6.  autowatch = true in our sample configuration file, so Karma will re-run all the unit
tests each time you save a change to one of the files being tested.

Unit Test FilesSalesforce Files
Anatomy of a JavaScript Unit Test
Salesforce Files
Unit Test Files
Similar Unit Tests can be Grouped
Salesforce Files
Setup & Tear-down steps
Actual Unit Tests

Actual Unit Tests

Karma’s unit testing interface
Command-line or web-based
Browser-based test runner
The command-line test runner auto-runs when files change

Karma’s code coverage report (karma-junit-reporter style)
This shows aggregate and line-by-line unit test coverage on the project
Aggregate code-coverage for the project
Line-by-line code coverage

Unit testing stack (for Continuous Integration)
 General guidelines for including JS unit testing in your CI builds:
•  Set up a separate build step for the JS unit testing
•  Install the nodejs plugin for Jenkins and specify your version of node & npm
•  The build step consists simply of running this shell command:
npm install
node_modules/karma/bin/karma start karma.conf.js --single-run
•  The build step will succeed or fail based on the results of that command
•  This will also output some reports in the /reports folder that can be ingested to
report on code coverage, code quality, etc. if you’re using code quality tools

  Build step for JS code
quality analysis in
SonarQube
JavaScript Unit Testing as a Continuous Deployment Step
 JS unit testing can be one step in a CI/CD setup
  Build step to run
JavaScript unit tests
Jenkins build step to
deploy to a QA org. This
also runs Apex unit tests

Karma outputs, displayed in SonarQube
Karma’s unit testing output can be ingested and displayed in other products

Questions & Answers
Grab the code at goo.gl/fMFrm1
(https://github.com/abd3/DF15-JS-Heavy-Salesforce)

Share Your Feedback, and Win a GoPro!
3
Earn a GoPro prize entry for
each completed survey
Tap the bell to take a
survey2Enroll in a session1

Salesforce - JavaScript Integration Methods
Note that you can mix and match any combination of these as needed
Action Methods
JavaScript
Remoting
Remote Objects
Salesforce
REST API
Require
Controller Code
yes yes no no
Require
Visualforce
yes yes yes no
Have their own
Governor Limits
no no no yes
Main Benefit
Call static or
instance methods
while maintaining
controller state
Call static Apex
methods quickly and
efficiently
Create a JS version
of Salesforce object
with CRUD access
Perform Salesforce
actions and modify
data from external
apps
Main
Disadvantage
Submits form data;
slower
Limited to static
methods
Can’t execute
custom Apex from
VF this way

Javascript-heavy Salesforce Applications

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Similar to Javascript-heavy Salesforce Applications

Similar to Javascript-heavy Salesforce Applications (20)

More from Salesforce Developers

More from Salesforce Developers (20)

Recently uploaded

Recently uploaded (20)

Javascript-heavy Salesforce Applications