Javascript-heavy Salesforce Applications
1 like•1,108 views
The document discusses the role of JavaScript in developing customized and responsive Salesforce applications, highlighting its growing relevance alongside various frameworks. It covers the integration of JavaScript with Salesforce through tools like remote objects, action methods, and unit testing frameworks including Node, Karma, Mocha, and Chai. Additionally, it provides guidance on best practices, debugging techniques, and continuous integration for JavaScript within Salesforce environments.
Javascript-heavy Salesforce Applications
- 1. JavaScript-heavy Salesforce Applications David Meyer Technical Architect, Appirio [email protected] Andrew Davis Consultant, Appirio [email protected]
- 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