Whether you're creating a totally customized UI, blending data from various sources, or using frameworks such as Angular and Backbone, there are many situations where you might need to make heavy use of Javascript. Join us as we offer an introduction to Javascript-heavy development in Salesforce, and present tips and tricks to make development easier and make your code scalable, testable, and efficiently integrated with Salesforce.

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

2. 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)

3. 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

4. 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

5. ​ 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

6. 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

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

8. JavaScript Concepts
Some core ideas to help Salesforce developers

9. 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)

10. 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

11. 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

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

13. Understanding Variable Scope and Closures

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

15. 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

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

17. 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

18. 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() );
});
});

19. 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.

20. 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

21. Setup & Tear-down steps
Setup & Tear-down steps
Anatomy of a JavaScript Unit Test

22. Actual Unit Tests
Anatomy of a JavaScript Unit Test

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

24. 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

25. 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

26. ​ 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

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

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

29. 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

30. Thank you

31. 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