Using JavaScript with Force.com

I’ve written previously about how modern web app development increasingly favors client-side (i.e. in the browser) processing over server-side logic. In this “fat-client” architecture, the server is mostly responsible for providing an API that exposes backend data and the client is responsible for invoking the API, processing/massaging the data and rendering the appropriate view. This architecture is especially applicable to mobile web applications built using HTML5, CSS3 and JavaScript. For obvious reasons, JavaScript plays a critical and ever-growing role in this type of architecture. Modern MV* JavaScript frameworks like Backbone, Angular, Ember etc. help provide structure for such type of JavaScript-heavy web apps and if you haven’t done so already, I would highly encourage you to try atleast one of those frameworks.

Given that modern web apps are so reliant on JavaScript, I thought it would be useful to summarize the different ways that you can use JavaScript to interact with Salesforce data and logic on the backend. This is not meant to be an exhaustive review of any of these options – I have included links in each section for a deeper dive into the respective library/feature. Instead, this is meant to be a directory of sorts for web developers new to the Force.com platform. In addition to this list, please also review the basics of using JavaScript in Visualforce. That section of the Visualforce Developer Guide covers basics like how to include an external JavaScript library in a Visualforce page using <apex:includeScript>, accessing DOM elements in a Visualforce page etc. The JavaScript resource page on our developer portal is another great resource for all things JavaScript.

1. apex:actionFunction: This standard Visualforce component lets you invoke an Apex controller action method directly from JavaScript code. In other words, you can invoke server-side logic (written in your Apex controller/extension) directly from JavaScript code on the Visualforce page.
   Code Snippet:
   1<apex:includeScript value="{!URLFOR($Resource.static, 'forcetk.js')}" />
   2<script type="text/javascript">
   3    var client = new forcetk.Client();
   4    client.setSessionToken('{!$Api.Session_ID}');
   5    client.query("SELECT Name FROM Account LIMIT 1",
   6                 function(response){ ....});
   7</script>

   For JavaScript hosted on: Any web page (Visualforce or otherwise) or PhoneGap application.
   Pros: Simple and very easy to use. Can be used from both within a Visualforce page and from an externally hosted web page. Since the toolkit wraps the REST API, all the advantages of using a lightweight HTTP/JSON based protocol like REST apply to this toolkit.
   Cons: Similar to the AJAX toolkit, you consume API calls when using ForceTK. The REST API does not support bulk DML operations and by extension, neither does ForceTK.

2. RemoteTK – This variation of the ForceTK library provides a JavaScript abstraction very similar to the REST API, but without consuming API calls. It does so by implementing all the REST API resources (e.g. query, insert, update, upsert etc.) in an Apex class and then exposing them via JavaScript Remoting. By including a simple Visualforce Component in their page, developers can then make calls like client.describe(‘Account’, metadataCallback); in their JavaScript code.
   Code Snippet: 
   1<c:RemoteTK />
   2<script type="text/javascript">
   3    var client = new remotetk.Client();
   4    client.query("SELECT Name FROM Account LIMIT 1",
   5                 function(response){ ....});
   6</script>

   For JavaScript hosted on: Visualforce pages.
   Pros: Unlike ForceTK, you don’t consume any API calls when using the RemoteTK library.
   Cons: Unlike ForceTK which only requires a simple import of the forcetk.js library, this option requires you to add an Apex Class and Component to your Org. This library also cannot be used from outside the Force.com Platform.

3. Backbone.force – Backbone.js is one of the most popular JavaScript MVC frameworks. The Backbone.force library extends the Backbone framework (specifically the Backbone Model and Collection objects) and allows you to build a Backbone web application (in Visualforce, or externally hosted) that connects to a Salesforce backend.
   For JavaScript hosted on: Any web page (Visualforce or otherwise).
   Pros: Ability to build a Force.com web/mobile application using a modern MVC framework like Backbone.js.
   Cons: Requires knowledge of Backbone.js (which really isn’t a con!)
4. nForce – This library is a Node.js wrapper for the Force.com REST API. Developed and maintained by Force.com community stalwart Kevin O’Hara, this Node.js NPM module allows access to Salesforce data from server-side JavaScript. In addition to the REST API, nForce also supports the Force.com Streaming API, whose real-time, push nature is a perfect compliment to a typical Node.js application.
   Code Snippet: 
   1var nforce = require('nforce');
   2var org = nforce.createConnection({....});
   3org.authenticate({....});
   4var acc = nforce.createSObject('Account');
   5org.insert(acc, oauth, function(err, resp){
   6  if(!err) console.log('It worked!');
   7});

   
   For JavaScript hosted on: Any Node.js application (hosted on say Heroku)
   Pros: Very easy to setup and use. Supports both the REST and Streaming API. Built-in support for session handling with express middleware.
   Cons: Requires knowledge of Node.js (again, not a con!)