Javascript remoting, Remote Object and Ajax toolkit

There are three ways of doing ajax calls in Visualforce page: Javascript remoting, Remote Object and Ajax toolkit. Have you ever wondered the differences between them? And which one is faster?

Performance:

Sfdcfox (Brian Fear) has done the following experiment:

Controller:

public class RemoteSpeed {
    @RemoteAction public static Account[] accounts() {
        return [SELECt Name FROM Account LIMIT 100];
    }
}

Page:


<apex:page controller="RemoteSpeed">
<apex:includeScript value="/soap/ajax/37.0/connection.js" />
<apex:remoteObjects jsNamespace="ro">
    <apex:remoteObjectModel name="Account" fields="Id,Name" />
</apex:remoteObjects>
<script>
function logTime(method, time) {
    var output = document.getElementById("output");
    var row = document.createElement("div");
    var column1 = document.createElement("span");
    var column2 = document.createElement("span");
    var text1 = document.createTextNode(method);
    var text2 = document.createTextNode(time);
    column1.appendChild(text1);
    column2.appendChild(text2);
    row.appendChild(column1);
    row.appendChild(column2);
    output.appendChild(row);
}
function remote1() {
    var time1 = new Date();
    {!$RemoteAction.RemoteSpeed.accounts}(function(data, event) {
        var time2 = new Date();
        logTime("@RemoteAction", time2-time1);
    });
}
sforce.connection.sessionId = "{!$Api.Session_ID}";
function remote2() {
    var time1 = new Date();
    sforce.connection.query("select id, name from account limit 100", { onSuccess: function(data, event) {
        var time2 = new Date();
        logTime("AJAX Toolkit", time2-time1);
    }, onFailure: alert });
}
function remote3() {
    var co = new ro.Account(), time1 = new Date();
    co.retrieve({ limit: 100 }, function(err, records) {
        var time2 = new Date();
        logTime("apex:remoteObjects", time2-time1);
    });
}
</script>
<style>
    #output div span {
        display: inline-block;
        width: 12em;
    }
</style>
<button onclick="remote1()">@RemoteAction</button>
<button onclick="remote2()">AJAX Toolkit</button>
<button onclick="remote3()">apex:remoteObjects</button>
<div id="output">
    <div>
        <span>Method</span>
        <span>Time</span>
    </div>
</div>
</apex:page>

And below is the example output:

Method Time
@RemoteAction 261
@RemoteAction 175
@RemoteAction 173
@RemoteAction 170
@RemoteAction 125
AJAX Toolkit 228
AJAX Toolkit 300
AJAX Toolkit 148
AJAX Toolkit 117
AJAX Toolkit 133
apex:remoteObjects 215
apex:remoteObjects 262
apex:remoteObjects 191
apex:remoteObjects 194
apex:remoteObjects 194

As you can see in the result table, RemoteAction is slightly the fastest. But all three of them are pretty fast – much faster than actionfunction.

Aside from Performance:

Javascript remoting will need server side Apex code. So it can have complex server side logic.

On the other side, Ajax toolkit and Remote Object don’t need any Apex code at all. So you don’t need to write unit test for them. Also, in Professional Edition where Apex code is not allowed, they can be very handy.

Ajax toolkit will need API calls. So if you worry about the API call limits, this is something to consider as well.

Next Post

How does contains work for a set of objects

Subscribe to Sfdcinpractice

Subscribe to get the latest blogs and tutorials of sfdcinpractice. No spam, no trash, only the awesome posts from sfdcinpractice. 

Leave a Reply

Your email address will not be published / Required fields are marked *